mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

style: add rtl.less of DatePicker (#22414)

Browse Source 
* style: add rtl.less of DatePicker

* fix: remove var

* fix: add
This commit is contained in:
xrkffgg 2020-03-20 11:58:57 +08:00 committed by GitHub
parent 5bf2b0df8d
commit 7da82dc196
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 89 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/date-picker/style/index.less
View File

@ -33,10 +33,6 @@
border-radius: @border-radius-base;
transition: border @animation-duration-slow, box-shadow @animation-duration-slow;
&-rtl {
direction: rtl;
}
&:hover,
&-focused {
.hover();
@ -111,11 +107,6 @@
margin-left: @padding-xs / 2;
color: @disabled-color;
pointer-events: none;
.@{picker-prefix-cls}-rtl & {
margin-right: @padding-xs / 2;
margin-left: 0;
}
}
&-clear {
@ -132,11 +123,6 @@
&:hover {
color: @text-color-secondary;
}
.@{picker-prefix-cls}-rtl & {
right: auto;
left: 0;
}
}
&-separator {
@ -149,11 +135,6 @@
line-height: @font-size-lg;
text-align: center;
cursor: default;
.@{picker-prefix-cls}-rtl & {
transform: rotate(180deg);
transform-origin: 50% 60%;
}
}
// ======================== Range =========================
@ -164,11 +145,6 @@
// Clear
.@{picker-prefix-cls}-clear {
right: @input-padding-horizontal-base;
.@{picker-prefix-cls}-rtl& {
right: auto;
left: @input-padding-horizontal-base;
}
}
&:hover {
@ -244,10 +220,6 @@
text-align: left;
list-style: none;
.@{picker-prefix-cls}-dropdown-rtl & {
text-align: right;
}
> li {
display: inline-block;
}
@ -259,12 +231,6 @@
.@{picker-prefix-cls}-ok {
float: right;
margin-left: @padding-xs;
.@{picker-prefix-cls}-dropdown-rtl & {
float: left;
margin-right: @padding-xs;
margin-left: 0;
}
}
}
@ -319,3 +285,5 @@
}
}
}
@import './rtl';

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

@ -15,10 +15,6 @@
border-radius: @border-radius-base;
outline: none;
&-rtl {
direction: rtl;
}
&-focused {
border-color: @primary-color;
}
@ -129,19 +125,11 @@
&-prev-icon,
&-super-prev-icon {
transform: rotate(-45deg);
.@{picker-prefix-cls}-panel-rtl & {
transform: rotate(135deg);
}
}
&-next-icon,
&-super-next-icon {
transform: rotate(135deg);
.@{picker-prefix-cls}-panel-rtl & {
transform: rotate(-45deg);
}
}
// ======================== Body ========================
@ -627,10 +615,6 @@
width: auto;
min-width: auto;
.@{picker-prefix-cls}-panel-rtl & {
direction: ltr;
}
.@{picker-prefix-cls}-content {
display: flex;
flex: auto;

87
components/date-picker/style/rtl.less Normal file
View File

@ -0,0 +1,87 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
.@{picker-prefix-cls} {
&-rtl {
direction: rtl;
}
&-suffix {
.@{picker-prefix-cls}-rtl & {
margin-right: @padding-xs / 2;
margin-left: 0;
}
}
&-clear {
.@{picker-prefix-cls}-rtl & {
right: auto;
left: 0;
}
}
&-separator {
.@{picker-prefix-cls}-rtl & {
transform: rotate(180deg);
transform-origin: 50% 60%;
}
}
// ======================== Range =========================
&-range {
// Clear
.@{picker-prefix-cls}-clear {
.@{picker-prefix-cls}-rtl& {
right: auto;
left: @input-padding-horizontal-base;
}
}
}
// ======================== Ranges ========================
&-ranges {
.@{picker-prefix-cls}-dropdown-rtl & {
text-align: right;
}
.@{picker-prefix-cls}-ok {
.@{picker-prefix-cls}-dropdown-rtl & {
float: left;
margin-right: @padding-xs;
margin-left: 0;
}
}
}
// ======================== Panel ========================
&-panel {
&-rtl {
direction: rtl;
}
}
&-prev-icon,
&-super-prev-icon {
.@{picker-prefix-cls}-panel-rtl & {
transform: rotate(135deg);
}
}
&-next-icon,
&-super-next-icon {
.@{picker-prefix-cls}-panel-rtl & {
transform: rotate(-45deg);
}
}
// ::before and ::after is not recommended for splitting
&-time-panel {
.@{picker-prefix-cls}-panel-rtl & {
direction: ltr;
}
}
}