rtl.scss 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. $module: #{$prefix}-datepicker;
  2. .#{$prefix}-rtl,
  3. .#{$prefix}-portal-rtl {
  4. .#{$module} {
  5. direction: rtl;
  6. &-footer {
  7. padding-right: 0;
  8. padding-left: $spacing-datepicker_footer-paddingRight;
  9. text-align: left;
  10. }
  11. &-day {
  12. &-offsetrange-start {
  13. .#{$module}-day-main {
  14. border-radius: 0 $width-datepicker_day_main-borderRadius $width-datepicker_day_main-borderRadius 0;
  15. }
  16. }
  17. &-offsetrange-end {
  18. .#{$module}-day-main {
  19. border-radius: $width-datepicker_day_main-borderRadius 0 0 $width-datepicker_day_main-borderRadius;
  20. }
  21. }
  22. &-selected-start,
  23. &-hoverday-before-selectedrange,
  24. &-offsetrange-start {
  25. .#{$module}-day-main {
  26. margin-right: $spacing-datepicker_day-marginX;
  27. margin-left: auto;
  28. border-radius: 0 $width-datepicker_day_main-borderRadius $width-datepicker_day_main-borderRadius 0;
  29. }
  30. }
  31. &-selected-end,
  32. &-hoverday-after-selectedrange,
  33. &-offsetrange-end {
  34. .#{$module}-day-main {
  35. margin-left: $spacing-datepicker_day-marginX;
  36. margin-right: auto;
  37. border-radius: $width-datepicker_day_main-borderRadius 0 0 $width-datepicker_day_main-borderRadius;
  38. }
  39. }
  40. }
  41. &-switch {
  42. &-text {
  43. padding-left: 0;
  44. padding-right: $spacing-datepicker_switch_text-paddingLeft;
  45. }
  46. }
  47. &-quick-control {
  48. &-item {
  49. margin-left: 0;
  50. margin-right: $spacing-datepicker_quick_control_item-marginRight;
  51. }
  52. }
  53. &-navigation,
  54. &-yam {
  55. // rtl 对箭头进行翻转
  56. .#{$prefix}-icon-chevron_left,
  57. .#{$prefix}-icon-chevron_right {
  58. transform: scaleX(-1);
  59. }
  60. }
  61. &-range {
  62. &-input {
  63. &-prefix {
  64. padding-left: $spacing-datepicker_range_input_prefix-paddingRight;
  65. padding-right: $spacing-datepicker_range_input_prefix-paddingLeft;
  66. }
  67. &-suffix {
  68. padding-left: $spacing-datepicker_range_input_suffix-paddingRight;
  69. padding-right: $spacing-datepicker_range_input_suffix-paddingLeft;
  70. &-hidden {
  71. display: none;
  72. }
  73. }
  74. &-clearbtn {
  75. padding-left: $spacing-datepicker_range_input_clearbtn-paddingRight;
  76. padding-right: $spacing-datepicker_range_input_clearbtn-paddingLeft;
  77. }
  78. }
  79. }
  80. }
  81. /*
  82. * 小尺寸 DatePicker
  83. */
  84. .#{$module}-compact {
  85. .#{$module}-month-grid {
  86. &[x-type="dateRange"],
  87. &[x-type="dateTimeRange"] {
  88. .#{$module}-month-grid-left {
  89. border-left: $width-datepicker-border solid $color-datepicker_border-bg-default;
  90. border-right: 0;
  91. }
  92. }
  93. .#{$prefix}-scrolllist {
  94. &-item-wheel {
  95. // 去除中间分割线
  96. border-left: 0;
  97. border-right: 0;
  98. }
  99. }
  100. }
  101. .#{$module}-day {
  102. &-offsetrange-start {
  103. .#{$module}-day-main {
  104. border-radius: 0 $width-datepicker_day_compact-borderRadius $width-datepicker_day_compact-borderRadius 0;
  105. }
  106. }
  107. &-offsetrange-end {
  108. .#{$module}-day-main {
  109. border-radius: $width-datepicker_day_compact-borderRadius 0 0 $width-datepicker_day_compact-borderRadius;
  110. }
  111. }
  112. &-selected-start {
  113. .#{$module}-day-main {
  114. margin-left: 0;
  115. margin-right: $spacing-datepicker_day_compact-margin;
  116. border-radius: 0 $width-datepicker_day_compact-borderRadius $width-datepicker_day_compact-borderRadius 0;
  117. }
  118. }
  119. &-selected-end {
  120. .#{$module}-day-main {
  121. margin-right: 0;
  122. margin-left: $spacing-datepicker_day_compact-margin;
  123. border-radius: $width-datepicker_day_compact-borderRadius 0 0 $width-datepicker_day_compact-borderRadius;
  124. }
  125. }
  126. }
  127. .#{$module}-switch {
  128. &-date {
  129. border-left: $width-datepicker-border solid $color-datepicker_border-bg-default;
  130. border-right: 0;
  131. }
  132. &-text {
  133. // 去掉icon后不需要pl
  134. padding-left: auto;
  135. padding-right: 0;
  136. }
  137. }
  138. .#{$module}-footer {
  139. padding-left: $spacing-datepicker_footer_compact-paddintRight;
  140. padding-right: auto;
  141. }
  142. }
  143. }