index.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. @import "./../common/abstracts/_mixin.scss";
  2. @import "./../common/abstracts/variable.scss";
  3. .wot-theme-dark {
  4. @include b(popover) {
  5. @include e(pos) {
  6. background: rgb(75, 76, 77);
  7. color: $-dark-color;
  8. box-shadow: 0px 2px 10px 0px rgba(75, 76, 77, 0.1);
  9. }
  10. @include e(menu) {
  11. background: rgb(75, 76, 77);
  12. }
  13. @include e(inner) {
  14. background-color: rgb(75, 76, 77);
  15. }
  16. @include e(menu-inner) {
  17. @include halfPixelBorder("top", 0, $-dark-border-color);
  18. }
  19. @include squareArrow($-popover-arrow-size, rgb(75, 76, 77), $-popover-z-index - 1, $-popover-arrow-box-shadow);
  20. }
  21. }
  22. @include b(popover) {
  23. position: relative;
  24. display: inline-block;
  25. @include edeep(icon) {
  26. vertical-align: middle;
  27. font-size: 18px;
  28. margin-right: 5px;
  29. }
  30. @include e(menu-inner) {
  31. position: relative;
  32. padding: $-popover-padding 0;
  33. display: flex;
  34. align-items: center;
  35. @include halfPixelBorder("top", 0, $-popover-border-color);
  36. &:first-child::after {
  37. display: none;
  38. }
  39. }
  40. @include e(menu) {
  41. display: inline-block;
  42. padding: 0 $-popover-padding;
  43. white-space: nowrap;
  44. z-index: $-popover-z-index;
  45. position: relative;
  46. background: $-popover-bg;
  47. border-radius: $-popover-radius;
  48. }
  49. @include edeep(pos) {
  50. position: absolute;
  51. box-sizing: border-box;
  52. background-clip: padding-box;
  53. text-align: center;
  54. min-height: 36px;
  55. z-index: $-popover-z-index;
  56. line-height: $-popover-line-height;
  57. font-size: $-popover-fs;
  58. border-radius: $-popover-radius;
  59. transition: opacity 0.2s;
  60. background: $-popover-bg;
  61. box-shadow: $-popover-box-shadow;
  62. color: $-popover-color;
  63. }
  64. // @include edeep(transition) {
  65. // position: relative;
  66. // z-index: $-popover-z-index;
  67. // }
  68. @include e(hidden) {
  69. left: -100vw;
  70. visibility: hidden;
  71. }
  72. @include e(container) {
  73. position: relative;
  74. line-height: $-tooltip-line-height;
  75. font-size: $-tooltip-fs;
  76. }
  77. @include e(inner) {
  78. position: relative;
  79. white-space: nowrap;
  80. padding: $-popover-padding;
  81. line-height: $-popover-line-height;
  82. z-index: $-popover-z-index;
  83. background-color: $-popover-bg;
  84. border-radius: $-popover-radius;
  85. }
  86. @include edeep(close-icon) {
  87. font-size: 12px;
  88. position: absolute;
  89. right: -8px;
  90. top: -10px;
  91. transform: scale(0.5);
  92. padding: 10px;
  93. }
  94. @include squareArrow($-popover-arrow-size, $-popover-bg, $-popover-z-index - 1, $-popover-arrow-box-shadow);
  95. }