index.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. @import '../common/abstracts/variable';
  2. @import '../common/abstracts/mixin';
  3. .wot-theme-dark {
  4. @include b(drop-menu) {
  5. color: $-dark-color;
  6. @include e(list) {
  7. background-color: $-dark-background2;
  8. }
  9. @include e(item) {
  10. @include when(disabled) {
  11. color: $-dark-color-gray;
  12. }
  13. }
  14. }
  15. }
  16. @include b(drop-menu) {
  17. box-sizing: border-box;
  18. color: $-drop-menu-color;
  19. font-size: $-drop-menu-fs;
  20. position: relative;
  21. @include e(list) {
  22. display: flex;
  23. text-align: center;
  24. background-color: #fff;
  25. }
  26. @include e(item) {
  27. flex: 1;
  28. min-width: 0;
  29. height: $-drop-menu-height;
  30. line-height: $-drop-menu-height;
  31. text-align: center;
  32. @include when(active) {
  33. font-weight: $-fw-medium;
  34. .wd-drop-menu__item-title::after {
  35. opacity: 1;
  36. }
  37. :deep(.wd-drop-menu__arrow) {
  38. transform: rotate(-180deg);
  39. transform-origin: center center;
  40. }
  41. }
  42. @include when(disabled) {
  43. color: $-drop-menu-disabled-color;
  44. }
  45. }
  46. @include e(item-title) {
  47. position: relative;
  48. display: inline-flex;
  49. align-items: center;
  50. justify-content: center;
  51. max-width: 100%;
  52. padding: 0 $-drop-menu-side-padding;
  53. box-sizing: border-box;
  54. &::after {
  55. position: absolute;
  56. content: '';
  57. width: 19px;
  58. height: $-drop-menu-line-height;
  59. bottom: 6px;
  60. left: 50%;
  61. transform: translate(-50%, 0);
  62. background: $-drop-menu-line-color;
  63. border-radius: $-drop-menu-line-height;
  64. transition: opacity .15s;
  65. opacity: 0;
  66. }
  67. }
  68. @include e(item-title-text) {
  69. position: relative;
  70. @include lineEllipsis;
  71. }
  72. @include edeep(arrow) {
  73. font-size: $-drop-menu-arrow-fs;
  74. margin-left: 2px;
  75. }
  76. }