GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

style: optimize datepicker rtl style (#22595) 

* style: optimization datepicker rtl style

* fix icon in rtl

* fix: opt rtl
pull/23076/head
xrkffgg 5 years ago
committed by GitHub
parent
b6829a0a92
commit
4d31ed8994
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 127 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      components/date-picker/style/panel.less
  2. 125
      components/date-picker/style/rtl.less

53
components/date-picker/style/panel.less
View File

@ -1,4 +1,6 @@
@import './index';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';
@ -226,19 +228,10 @@
&-in-view&-range-start::before {
left: 50%;
.@{picker-prefix-cls}-panel-rtl & {
right: 50%;
left: 0;
}
}
&-in-view&-range-end::before {
right: 50%;
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: 50%;
}
}
// >>> Range Hover
@ -308,38 +301,18 @@
.@{cellClassName}::after {
right: -6px - @border-width-base;
left: 0;
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: -6px - @border-width-base;
}
}
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
right: 0;
left: -6px - @border-width-base;
.@{picker-prefix-cls}-panel-rtl & {
right: -6px - @border-width-base;
left: 0;
}
}
// Hover with range start & end
&-range-hover&-range-start::after {
right: 50%;
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: 50%;
}
}
&-range-hover&-range-end::after {
left: 50%;
.@{picker-prefix-cls}-panel-rtl & {
right: 50%;
left: 0;
}
}
// Edge start
@ -351,15 +324,6 @@
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
.@{picker-prefix-cls}-panel-rtl & {
right: 6px;
left: 0;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-left: none;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
}
// Edge end
@ -371,15 +335,6 @@
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: 6px;
border-right: none;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
}
// >>> Disabled

125
components/date-picker/style/rtl.less
View File

@ -3,6 +3,7 @@
@import '../../input/style/mixin';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';
.@{picker-prefix-cls} {
&-rtl {
@ -26,7 +27,19 @@
&-separator {
.@{picker-prefix-cls}-rtl & {
transform: rotate(180deg);
transform-origin: 50% 60%;
}
}
&-header {
&-view {
button {
&:not(:first-child) {
.@{picker-prefix-cls}-panel-rtl & {
margin-right: @padding-xs;
margin-left: 0;
}
}
}
}
}
@ -77,7 +90,115 @@
}
}
// ::before and ::after is not recommended for splitting
&-cell {
.picker-cell-inner(~'@{picker-cell-inner-cls}');
}
.picker-cell-inner(@cellClassName) {
.@{cellClassName} {
position: relative;
z-index: 2;
display: inline-block;
min-width: 24px;
height: 24px;
line-height: 24px;
border-radius: @border-radius-base;
transition: background @animation-duration-slow, border @animation-duration-slow;
}
&-in-view&-range-start::before {
.@{picker-prefix-cls}-panel-rtl & {
right: 50%;
left: 0;
}
}
&-in-view&-range-end::before {
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: 50%;
}
}
.@{picker-prefix-cls}-date-panel
&-in-view&-in-range&-range-hover-start
.@{cellClassName}::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: -6px - @border-width-base;
}
}
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
.@{picker-prefix-cls}-panel-rtl & {
right: -6px - @border-width-base;
left: 0;
}
}
// Hover with range start & end
&-range-hover&-range-start::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: 50%;
}
}
&-range-hover&-range-end::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 50%;
left: 0;
}
}
// Edge start
tr > &-in-view&-range-hover:first-child::after,
tr > &-in-view&-range-hover-end:first-child::after,
&-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
&-in-view&-range-hover-start::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 6px;
left: 0;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-left: none;
border-top-left-radius: 0;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
border-bottom-left-radius: 0;
}
}
// Edge end
tr > &-in-view&-range-hover:last-child::after,
tr > &-in-view&-range-hover-start:last-child::after,
&-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
&-in-view&-range-hover-end::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: 6px;
border-right: none;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-left-radius: @border-radius-base;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: @border-radius-base;
}
}
tr > &-in-view&-range-hover-start:last-child::after,
&-in-view&-range-hover-start&-in-view&-range-hover-end::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 6px;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
}
tr > &-in-view&-range-hover-end:first-child::after {
.@{picker-prefix-cls}-panel-rtl & {
left: 6px;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
}
}
&-time-panel {
.@{picker-prefix-cls}-panel-rtl & {

Write Preview
Loading…
Cancel
Save