index.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. @import "./../common/abstracts/_mixin.scss";
  2. @import "./../common/abstracts/variable.scss";
  3. .wot-theme-dark {
  4. @include b(datetime-picker) {
  5. @include e(placeholder) {
  6. color: $-dark-color-gray;
  7. }
  8. :deep(.wd-datetime-picker__arrow),
  9. :deep(.wd-datetime-picker__clear) {
  10. color: $-dark-color;
  11. }
  12. @include e(action) {
  13. @include m(cancel) {
  14. color: $-dark-color;
  15. }
  16. }
  17. @include e(region) {
  18. color: $-dark-color;
  19. @include when(active) {
  20. background: $-picker-region-bg-active-color;
  21. color: $-dark-color;
  22. }
  23. }
  24. }
  25. }
  26. @include b(datetime-picker) {
  27. @include edeep(cell) {
  28. @include when(disabled) {
  29. .wd-cell__value {
  30. color: $-input-disabled-color;
  31. cursor: not-allowed;
  32. }
  33. }
  34. @include when(error) {
  35. .wd-cell__value {
  36. color: $-input-error-color;
  37. }
  38. .wd-datetime-picker__arrow {
  39. color: $-input-error-color;
  40. }
  41. }
  42. @include when(large) {
  43. .wd-datetime-picker__arrow {
  44. font-size: $-cell-icon-size-large;
  45. }
  46. }
  47. .wd-cell__value--ellipsis {
  48. view {
  49. @include lineEllipsis;
  50. width: 100%;
  51. }
  52. text {
  53. @include lineEllipsis;
  54. max-width: 100%;
  55. }
  56. }
  57. }
  58. @include e(placeholder) {
  59. color: $-input-placeholder-color;
  60. }
  61. @include edeep(arrow) {
  62. display: block;
  63. font-size: $-cell-icon-size;
  64. color: $-cell-arrow-color;
  65. line-height: $-cell-line-height;
  66. }
  67. @include edeep(clear) {
  68. display: block;
  69. font-size: $-cell-icon-size;
  70. color: $-cell-clear-color;
  71. line-height: $-cell-line-height;
  72. }
  73. @include edeep(popup) {
  74. border-radius: 16px 16px 0px 0px;
  75. }
  76. @include e(wraper) {
  77. padding-bottom: var(--window-bottom);
  78. }
  79. @include e(toolbar) {
  80. position: relative;
  81. display: flex;
  82. font-size: $-picker-toolbar-fs;
  83. height: $-picker-toolbar-height;
  84. line-height: $-picker-action-height;
  85. justify-content: space-between;
  86. align-items: center;
  87. box-sizing: border-box;
  88. }
  89. @include e(action) {
  90. display: block;
  91. border: none;
  92. outline: none;
  93. font-size: $-picker-toolbar-fs;
  94. color: $-picker-toolbar-finish-color;
  95. background: transparent;
  96. padding: 24px 15px 14px 15px;
  97. @include m(cancel) {
  98. color: $-picker-toolbar-cancel-color;
  99. }
  100. @include when(loading) {
  101. color: $-picker-loading-button-color;
  102. }
  103. }
  104. @include e(title) {
  105. display: block;
  106. float: 1;
  107. color: $-picker-toolbar-title-color;
  108. }
  109. @include e(region-tabs) {
  110. display: flex;
  111. }
  112. @include e(region) {
  113. width: 50%;
  114. display: inline-block;
  115. color: $-picker-region-color;
  116. text-align: center;
  117. padding: 14px 0;
  118. font-size: $-picker-region-fs;
  119. line-height: 16px;
  120. transition: all 0.15s ease-out;
  121. @include when(active) {
  122. background: $-picker-region-bg-active-color;
  123. color: $-color-white;
  124. }
  125. }
  126. @include e(region-time) {
  127. font-size: 16px;
  128. margin-top: 2px;
  129. }
  130. @include e(hidden) {
  131. visibility: hidden;
  132. overflow: hidden;
  133. height: 0;
  134. }
  135. @include e(show) {
  136. visibility: visible;
  137. height: auto;
  138. }
  139. }