index.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. @import "./../common/abstracts/_mixin.scss";
  2. @import "./../common/abstracts/variable.scss";
  3. .wot-theme-dark {
  4. @include b(picker-view) {
  5. @include e(columns) {
  6. background: $-dark-background2;
  7. }
  8. :deep(.wd-picker-view__roller) {
  9. background: $-dark-background4;
  10. }
  11. }
  12. @include b(picker-view-column) {
  13. color: $-dark-color;
  14. @include e(item) {
  15. @include m(disabled) {
  16. color: $-dark-color-gray;
  17. }
  18. }
  19. }
  20. }
  21. @include b(picker-view) {
  22. position: relative;
  23. padding: 10px 0;
  24. @include e(columns) {
  25. position: relative;
  26. display: flex;
  27. background: $-picker-bg;
  28. overflow: hidden;
  29. align-items: center;
  30. }
  31. @include edeep(mask) {
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. width: 100%;
  36. height: 100%;
  37. background: $-picker-mask;
  38. background-position: top, bottom;
  39. background-repeat: no-repeat;
  40. z-index: 2;
  41. pointer-events: none;
  42. filter: blur(4px);
  43. }
  44. @include e(loading) {
  45. position: absolute;
  46. display: flex;
  47. top: 0;
  48. right: 0;
  49. bottom: 0;
  50. left: 0;
  51. align-items: center;
  52. justify-content: center;
  53. z-index: 3;
  54. background: $-picker-loading-bg;
  55. }
  56. @include edeep(roller) {
  57. background: rgba(245, 245, 245, 1);
  58. z-index: 0;
  59. &::before,
  60. &::after {
  61. display: none;
  62. }
  63. }
  64. }
  65. @include b(picker-view-column) {
  66. flex: 1;
  67. font-size: $-picker-column-fs;
  68. color: $-picker-column-color;
  69. text-align: center;
  70. transition-timing-function: cubic-bezier(0.28, 0.8, 0.63, 1);
  71. @include e(item) {
  72. padding: $-picker-column-padding;
  73. @include lineEllipsis;
  74. @include m(disabled) {
  75. color: $-picker-column-disabled-color;
  76. }
  77. }
  78. }