79fb1af25ebaf43840d55442949aaeb7750525b279769b73bd1853b06f783f2267c23ec114d2ad32dbf16bc7b5d0214b43c0eedf9e70ff074e07e0d6d87010 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. @use '../common/var' as *;
  2. @use '../mixins/mixins' as *;
  3. @use '../mixins/var' as *;
  4. @use './picker-panel.scss';
  5. @use './utils.scss' as *;
  6. @include b(date-picker) {
  7. @include set-component-css-var('datepicker', $datepicker);
  8. }
  9. @include b(date-picker) {
  10. width: 322px;
  11. &.has-sidebar.has-time {
  12. width: 434px;
  13. }
  14. &.has-sidebar {
  15. width: 438px;
  16. }
  17. &.has-time .#{$namespace}-picker-panel__body-wrapper {
  18. position: relative;
  19. }
  20. .#{$namespace}-picker-panel__content {
  21. width: 292px;
  22. }
  23. table {
  24. table-layout: fixed;
  25. width: 100%;
  26. }
  27. @include e(editor-wrap) {
  28. position: relative;
  29. display: table-cell;
  30. padding: 0 5px;
  31. }
  32. @include e(time-header) {
  33. position: relative;
  34. border-bottom: 1px solid getCssVar('datepicker-inner-border-color');
  35. font-size: 12px;
  36. padding: 8px 5px 5px;
  37. display: table;
  38. width: 100%;
  39. box-sizing: border-box;
  40. }
  41. @include e(header) {
  42. padding: 12px 12px 0;
  43. text-align: center;
  44. @include m(bordered) {
  45. margin-bottom: 0;
  46. padding-bottom: 12px;
  47. border-bottom: solid 1px getCssVar('border-color-lighter');
  48. & + .#{$namespace}-picker-panel__content {
  49. margin-top: 0;
  50. }
  51. }
  52. }
  53. @include e(header-label) {
  54. font-size: 16px;
  55. font-weight: 500;
  56. padding: 0 5px;
  57. line-height: 22px;
  58. text-align: center;
  59. cursor: pointer;
  60. color: getCssVar('text-color', 'regular');
  61. &:hover {
  62. color: getCssVar('datepicker-hover-text-color');
  63. }
  64. &:focus-visible {
  65. outline: none;
  66. color: getCssVar('datepicker-hover-text-color');
  67. }
  68. &.active {
  69. color: getCssVar('datepicker-active-color');
  70. }
  71. }
  72. @include e(prev-btn) {
  73. float: left;
  74. }
  75. @include e(next-btn) {
  76. float: right;
  77. }
  78. @include e(time-wrap) {
  79. padding: 10px;
  80. text-align: center;
  81. }
  82. @include e(time-label) {
  83. float: left;
  84. cursor: pointer;
  85. line-height: 30px;
  86. margin-left: 10px;
  87. }
  88. .#{$namespace}-time-panel {
  89. position: absolute;
  90. }
  91. @include when(disabled) {
  92. @include e(header-label) {
  93. @include disable;
  94. }
  95. }
  96. }