index.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. @import "./../common/abstracts/_mixin.scss";
  2. @import "./../common/abstracts/variable.scss";
  3. .wot-theme-dark {
  4. @include b(tooltip) {
  5. @include e(pos) {
  6. background: $-dark-background4;
  7. color: $-tooltip-color;
  8. }
  9. @include triangleArrow($-tooltip-arrow-size, $-dark-background4);
  10. }
  11. }
  12. @include b(tooltip) {
  13. position: relative;
  14. display: inline-block;
  15. @include edeep(pos) {
  16. position: absolute;
  17. min-width: 138px;
  18. min-height: 36px;
  19. font-size: $-tooltip-fs;
  20. backdrop-filter: blur($-tooltip-blur);
  21. background-clip: padding-box;
  22. border-radius: $-tooltip-radius;
  23. background: $-tooltip-bg;
  24. color: $-tooltip-color;
  25. text-align: center;
  26. box-sizing: border-box;
  27. z-index: $-tooltip-z-index;
  28. }
  29. @include e(hidden) {
  30. left: -100vw;
  31. bottom: -100vh;
  32. visibility: hidden;
  33. }
  34. @include e(container) {
  35. line-height: $-tooltip-line-height;
  36. font-size: $-tooltip-fs;
  37. }
  38. @include e(inner) {
  39. padding: $-tooltip-padding;
  40. white-space: nowrap;
  41. line-height: $-tooltip-line-height;
  42. }
  43. @include edeep(close-icon) {
  44. font-size: 12px;
  45. position: absolute;
  46. right: -8px;
  47. top: -10px;
  48. transform: scale(0.5);
  49. padding: 10px;
  50. }
  51. @include triangleArrow($-tooltip-arrow-size, $-tooltip-bg);
  52. }