date-picker.scss 2.0 KB

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