popover.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. @use 'mixins/mixins' as *;
  2. @use 'mixins/var' as *;
  3. @use 'common/var' as *;
  4. @include b(popover) {
  5. @include set-component-css-var('popover', $popover);
  6. &.#{$namespace}-popper {
  7. background: getCssVar('popover-bg-color');
  8. min-width: 150px;
  9. border-radius: getCssVar('popover-border-radius');
  10. border: 1px solid getCssVar('popover-border-color');
  11. padding: getCssVar('popover-padding');
  12. z-index: getCssVar('index-popper');
  13. color: getCssVar('text-color', 'regular');
  14. line-height: 1.4;
  15. text-align: justify;
  16. font-size: getCssVar('popover-font-size');
  17. box-shadow: getCssVar('box-shadow-light');
  18. word-break: break-all;
  19. box-sizing: border-box;
  20. @include m(plain) {
  21. padding: getCssVar('popover-padding-large');
  22. }
  23. @include e(title) {
  24. color: getCssVar('popover-title-text-color');
  25. font-size: getCssVar('popover-title-font-size');
  26. line-height: 1;
  27. margin-bottom: 12px;
  28. }
  29. @include e(reference) {
  30. &:focus:not(.focusing),
  31. &:focus:hover {
  32. outline-width: 0;
  33. }
  34. }
  35. @include when(dark) {
  36. @include set-css-var-value(
  37. ('popover', 'bg-color'),
  38. var(#{getCssVarName('text-color', 'primary')})
  39. );
  40. @include set-css-var-value(
  41. ('popover', 'border-color'),
  42. var(#{getCssVarName('text-color', 'primary')})
  43. );
  44. @include set-css-var-value(
  45. ('popover', 'title-text-color'),
  46. var(#{getCssVarName('bg-color')})
  47. );
  48. color: getCssVar('bg-color');
  49. }
  50. &:focus:active,
  51. &:focus {
  52. outline-width: 0;
  53. }
  54. }
  55. }