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

style: add rtl.less of Rate\Switch\Slider (#22294)

Browse Source
This commit is contained in:
xrkffgg 2020-03-17 14:22:09 +08:00 committed by GitHub
parent 4b2e88caaf
commit 0755b2b7c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 180 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/rate/style/index.less
View File

@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './rtl';
@rate-prefix-cls: ~'@{ant-prefix}-rate';
@ -15,10 +16,6 @@
list-style: none;
outline: none;
&-rtl {
direction: rtl;
}
&-disabled &-star {
cursor: default;
&:hover {
@ -37,11 +34,6 @@
&:not(:last-child) {
margin-right: 8px;
.@{rate-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
}
> div {
@ -73,11 +65,6 @@
height: 100%;
overflow: hidden;
opacity: 0;
.@{rate-prefix-cls}-rtl & {
right: 0;
left: auto;
}
}
&-half &-first,
@ -95,10 +82,5 @@
display: inline-block;
margin-left: 8px;
font-size: @font-size-base;
.@{rate-prefix-cls}-rtl & {
margin-right: 8px;
margin-left: 0;
}
}
}

33
components/rate/style/rtl.less Normal file
View File

@ -0,0 +1,33 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@rate-prefix-cls: ~'@{ant-prefix}-rate';
.@{rate-prefix-cls} {
&-rtl {
direction: rtl;
}
&-star {
&:not(:last-child) {
.@{rate-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
}
&-first {
.@{rate-prefix-cls}-rtl & {
right: 0;
left: auto;
}
}
}
&-text {
.@{rate-prefix-cls}-rtl & {
margin-right: 8px;
margin-left: 0;
}
}
}

44
components/slider/style/index.less
View File

@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './rtl';
@slider-prefix-cls: ~'@{ant-prefix}-slider';
@ -15,10 +16,6 @@
.vertical();
&-rtl {
direction: rtl;
}
&-with-marks {
margin-bottom: 28px;
}
@ -87,11 +84,6 @@
left: 0;
width: 100%;
font-size: @font-size-base;
.@{slider-prefix-cls}-rtl & {
right: 0;
left: auto;
}
}
&-mark-text {
@ -125,25 +117,11 @@
border-radius: 50%;
cursor: pointer;
.@{slider-prefix-cls}-rtl & {
margin-right: -4px;
margin-left: 0;
}
&:first-child {
margin-left: -4px;
.@{slider-prefix-cls}-rtl & {
margin-right: -4px;
margin-left: 0;
}
}
&:last-child {
margin-left: -4px;
.@{slider-prefix-cls}-rtl & {
margin-right: -4px;
margin-left: 0;
}
}
&-active {
border-color: @slider-dot-border-color-active;
@ -191,11 +169,6 @@
.@{slider-prefix-cls}-handle {
margin-top: -6px; // we chould consider border width as well: (10 + 2 ) / 2
margin-left: -5px;
.@{slider-prefix-cls}-rtl& {
margin-right: -5px;
margin-left: 0;
}
}
.@{slider-prefix-cls}-mark {
@ -203,21 +176,11 @@
left: 12px;
width: 18px;
height: 100%;
.@{slider-prefix-cls}-rtl& {
right: 12px;
left: auto;
}
}
.@{slider-prefix-cls}-mark-text {
left: 4px;
white-space: nowrap;
.@{slider-prefix-cls}-rtl& {
right: 4px;
left: auto;
}
}
.@{slider-prefix-cls}-step {
@ -229,11 +192,6 @@
top: auto;
left: 2px;
margin-bottom: -4px;
.@{slider-prefix-cls}-rtl& {
right: 2px;
left: auto;
}
}
}

70
components/slider/style/rtl.less Normal file
View File

@ -0,0 +1,70 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@slider-prefix-cls: ~'@{ant-prefix}-slider';
.@{slider-prefix-cls} {
&-rtl {
direction: rtl;
}
&-mark {
.@{slider-prefix-cls}-rtl & {
right: 0;
left: auto;
}
}
&-dot {
.@{slider-prefix-cls}-rtl & {
margin-right: -4px;
margin-left: 0;
}
&:first-child {
.@{slider-prefix-cls}-rtl & {
margin-right: -4px;
margin-left: 0;
}
}
&:last-child {
.@{slider-prefix-cls}-rtl & {
margin-right: -4px;
margin-left: 0;
}
}
}
}
.vertical() {
&-vertical {
.@{slider-prefix-cls}-handle {
.@{slider-prefix-cls}-rtl& {
margin-right: -5px;
margin-left: 0;
}
}
.@{slider-prefix-cls}-mark {
.@{slider-prefix-cls}-rtl& {
right: 12px;
left: auto;
}
}
.@{slider-prefix-cls}-mark-text {
.@{slider-prefix-cls}-rtl& {
right: 4px;
left: auto;
}
}
.@{slider-prefix-cls}-dot {
.@{slider-prefix-cls}-rtl& {
right: 2px;
left: auto;
}
}
}
}

45
components/switch/style/index.less
View File

@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './rtl';
@switch-prefix-cls: ~'@{ant-prefix}-switch';
@switch-duration: 0.36s;
@ -20,20 +21,13 @@
cursor: pointer;
transition: all @switch-duration;
user-select: none;
&-rtl {
direction: rtl;
}
&-inner {
display: block;
margin-right: 6px;
margin-left: 24px;
color: @text-color-inverse;
font-size: @font-size-sm;
.@{switch-prefix-cls}-rtl & {
margin-right: 24px;
margin-left: 6px;
}
}
&-loading-icon,
@ -48,12 +42,6 @@
cursor: pointer;
transition: all @switch-duration @ease-in-out-circ;
content: ' ';
.@{switch-prefix-cls}-rtl& {
left: 100%;
margin-left: -1px;
transform: translateX(-100%);
}
}
&::after {
@ -109,11 +97,6 @@
margin-right: 3px;
margin-left: 18px;
font-size: @font-size-sm;
.@{switch-prefix-cls}-rtl& {
margin-right: 18px;
margin-left: 3px;
}
}
&::after {
@ -130,21 +113,12 @@
&-small &-loading-icon {
width: @switch-sm-height - 4px;
height: @switch-sm-height - 4px;
.@{switch-prefix-cls}-rtl& {
margin-left: 12px;
}
}
&-small&-checked {
.@{switch-prefix-cls}-inner {
margin-right: 18px;
margin-left: 3px;
.@{switch-prefix-cls}-rtl& {
margin-right: 3px;
margin-left: 18px;
}
}
}
@ -165,33 +139,18 @@
.@{switch-prefix-cls}-inner {
margin-right: 24px;
margin-left: 6px;
.@{switch-prefix-cls}-rtl& {
margin-right: 6px;
margin-left: 24px;
}
}
&::after {
left: 100%;
margin-left: -1px;
transform: translateX(-100%);
.@{switch-prefix-cls}-rtl& {
left: 1px;
margin-left: 0;
transform: translateX(0);
}
}
}
&-checked &-loading-icon {
left: 100%;
margin-left: -19px;
.@{switch-prefix-cls}-rtl& {
margin-left: -41px;
}
}
&-loading,

73
components/switch/style/rtl.less Normal file
View File

@ -0,0 +1,73 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@switch-prefix-cls: ~'@{ant-prefix}-switch';
.@{switch-prefix-cls} {
&-rtl {
direction: rtl;
}
&-inner {
.@{switch-prefix-cls}-rtl & {
margin-right: 24px;
margin-left: 6px;
}
}
&-loading-icon,
&::after {
.@{switch-prefix-cls}-rtl& {
left: 100%;
margin-left: -1px;
transform: translateX(-100%);
}
}
&-small {
.@{switch-prefix-cls}-inner {
.@{switch-prefix-cls}-rtl& {
margin-right: 18px;
margin-left: 3px;
}
}
}
&-small &-loading-icon {
.@{switch-prefix-cls}-rtl& {
margin-left: 12px;
}
}
&-small&-checked {
.@{switch-prefix-cls}-inner {
.@{switch-prefix-cls}-rtl& {
margin-right: 3px;
margin-left: 18px;
}
}
}
&-checked {
.@{switch-prefix-cls}-inner {
.@{switch-prefix-cls}-rtl& {
margin-right: 6px;
margin-left: 24px;
}
}
&::after {
.@{switch-prefix-cls}-rtl& {
left: 1px;
margin-left: 0;
transform: translateX(0);
}
}
}
&-checked &-loading-icon {
.@{switch-prefix-cls}-rtl& {
margin-left: -41px;
}
}
}