test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

style: add rtl.less of button\typography\grid (#22252)

Browse Source
This commit is contained in:
xrkffgg 2020-03-16 15:16:05 +08:00 committed by GitHub
parent 442a4e4769
commit 839a19af58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 244 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/button/style/index.less
View File

@ -1,6 +1,7 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';
@import './rtl';
@btn-prefix-cls: ~'@{ant-prefix}-btn';
@ -22,10 +23,6 @@
line-height: @line-height-base;
.btn;
.btn-default;
&-rtl {
direction: rtl;
}
// Make sure that the target of Button's click event always be `button`
// Ref: https://github.com/ant-design/ant-design/issues/7034
> i,
@ -61,17 +58,8 @@
.@{btn-prefix-cls}-group & + & {
border-left-color: @btn-group-border;
.@{btn-prefix-cls}-group-rtl& {
border-right-color: @btn-group-border;
border-left-color: @btn-default-border;
}
&[disabled] {
border-left-color: @btn-default-border;
.@{btn-prefix-cls}-group-rtl& {
border-right-color: @btn-default-border;
border-left-color: @btn-group-border;
}
}
}
}
@ -169,36 +157,16 @@
&&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
padding-left: 29px;
.@{btn-prefix-cls}-rtl& {
padding-right: 29px;
padding-left: @padding-md - 1px;
}
.@{iconfont-css-prefix}:not(:last-child) {
margin-left: -14px;
.@{btn-prefix-cls}-rtl& {
margin-right: -14px;
margin-left: 0;
}
}
}
&-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
padding-left: 24px;
.@{btn-prefix-cls}-rtl& {
padding-right: 24px;
padding-left: @padding-xs - 1px;
}
.@{iconfont-css-prefix} {
margin-left: -17px;
.@{btn-prefix-cls}-rtl& {
margin-right: -17px;
margin-left: 0;
}
}
}
@ -216,11 +184,6 @@
> .@{iconfont-css-prefix} + span,
> span + .@{iconfont-css-prefix} {
margin-left: 8px;
.@{btn-prefix-cls}-rtl& {
margin-right: 8px;
margin-left: 0;
}
}
&-background-ghost {

33
components/button/style/mixin.less
View File

@ -1,3 +1,5 @@
@import './mixin.rtl.less';
// mixins for button
// ------------------------
.button-size(@height; @padding-horizontal; @font-size; @border-radius) {
@ -408,10 +410,6 @@
& + .@{btnClassName},
& + & {
margin-left: -1px;
.@{btnClassName}-rtl& {
margin-right: -1px;
margin-left: auto;
}
}
.@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
border-left-color: transparent;
@ -419,9 +417,6 @@
.@{btnClassName} {
border-radius: 0;
}
&.@{btnClassName}-group-rtl {
direction: rtl;
}
> .@{btnClassName}:first-child,
> span:first-child > .@{btnClassName} {
margin-left: 0;
@ -436,23 +431,11 @@
> span:first-child:not(:last-child) > .@{btnClassName} {
border-top-left-radius: @btn-border-radius-base;
border-bottom-left-radius: @btn-border-radius-base;
.@{btnClassName}-group-rtl& {
border-top-left-radius: 0;
border-top-right-radius: @btn-border-radius-base;
border-bottom-right-radius: @btn-border-radius-base;
border-bottom-left-radius: 0;
}
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
border-top-right-radius: @btn-border-radius-base;
border-bottom-right-radius: @btn-border-radius-base;
.@{btnClassName}-group-rtl& {
border-top-left-radius: @btn-border-radius-base;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: @btn-border-radius-base;
}
}
&-sm {
> .@{btnClassName}:only-child {
@ -465,23 +448,11 @@
> span:first-child:not(:last-child) > .@{btnClassName} {
border-top-left-radius: @btn-border-radius-sm;
border-bottom-left-radius: @btn-border-radius-sm;
.@{btnClassName}-group-rtl& {
border-top-left-radius: 0;
border-top-right-radius: @btn-border-radius-sm;
border-bottom-right-radius: @btn-border-radius-sm;
border-bottom-left-radius: 0;
}
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
border-top-right-radius: @btn-border-radius-sm;
border-bottom-right-radius: @btn-border-radius-sm;
.@{btnClassName}-group-rtl& {
border-top-left-radius: @btn-border-radius-sm;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: @btn-border-radius-sm;
}
}
}
& > & {

54
components/button/style/mixin.rtl.less Normal file
View File

@ -0,0 +1,54 @@
.btn-group(@btnClassName: btn) {
& + & {
.@{btnClassName}-rtl& {
margin-right: -1px;
margin-left: auto;
}
}
&.@{btnClassName}-group-rtl {
direction: rtl;
}
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& {
border-top-left-radius: 0;
border-top-right-radius: @btn-border-radius-base;
border-bottom-right-radius: @btn-border-radius-base;
border-bottom-left-radius: 0;
}
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& {
border-top-left-radius: @btn-border-radius-base;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: @btn-border-radius-base;
}
}
&-sm {
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& {
border-top-left-radius: 0;
border-top-right-radius: @btn-border-radius-sm;
border-bottom-right-radius: @btn-border-radius-sm;
border-bottom-left-radius: 0;
}
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& {
border-top-left-radius: @btn-border-radius-sm;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: @btn-border-radius-sm;
}
}
}
}

62
components/button/style/rtl.less Normal file
View File

@ -0,0 +1,62 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@btn-prefix-cls: ~'@{ant-prefix}-btn';
.@{btn-prefix-cls} {
&-rtl {
direction: rtl;
}
&-primary {
.@{btn-prefix-cls}-group &:last-child:not(:first-child),
.@{btn-prefix-cls}-group & + & {
.@{btn-prefix-cls}-group-rtl& {
border-right-color: @btn-group-border;
border-left-color: @btn-default-border;
}
&[disabled] {
.@{btn-prefix-cls}-group-rtl& {
border-right-color: @btn-default-border;
border-left-color: @btn-group-border;
}
}
}
}
&&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
.@{btn-prefix-cls}-rtl& {
padding-right: 29px;
padding-left: @padding-md - 1px;
}
.@{iconfont-css-prefix}:not(:last-child) {
.@{btn-prefix-cls}-rtl& {
margin-right: -14px;
margin-left: 0;
}
}
}
&-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
.@{btn-prefix-cls}-rtl& {
padding-right: 24px;
padding-left: @padding-xs - 1px;
}
.@{iconfont-css-prefix} {
.@{btn-prefix-cls}-rtl& {
margin-right: -17px;
margin-left: 0;
}
}
}
> .@{iconfont-css-prefix} + span,
> span + .@{iconfont-css-prefix} {
.@{btn-prefix-cls}-rtl& {
margin-right: 8px;
margin-left: 0;
}
}
}

9
components/grid/style/index.less
View File

@ -1,6 +1,7 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';
@import './rtl';
// Grid system
.@{ant-prefix}-row {
@ -11,10 +12,6 @@
&::after {
display: flex;
}
&-rtl {
direction: rtl;
}
}
// x轴原点
@ -63,10 +60,6 @@
max-width: 100%;
// Prevent columns from collapsing when empty
min-height: 1px;
&&-rtl {
float: right;
}
}
.make-grid();

40
components/grid/style/mixin.less
View File

@ -1,4 +1,5 @@
@import '../../style/mixins/index';
@import './mixin.rtl.less';
// mixins for grid system
// ------------------------
@ -11,30 +12,12 @@
}
.@{ant-prefix}-col@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
right: percentage((@index / @grid-columns));
left: auto;
}
}
.@{ant-prefix}-col@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
right: auto;
left: percentage((@index / @grid-columns));
}
}
.@{ant-prefix}-col@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
margin-right: percentage((@index / @grid-columns));
margin-left: 0;
}
}
.@{ant-prefix}-col@{class}-order-@{index} {
order: @index;
@ -48,39 +31,18 @@
}
.@{ant-prefix}-col-push-@{index} {
left: auto;
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
right: auto;
}
}
.@{ant-prefix}-col-pull-@{index} {
right: auto;
&.@{ant-prefix}-col-rtl {
left: auto;
}
}
.@{ant-prefix}-col@{class}-push-@{index} {
left: auto;
&.@{ant-prefix}-col-rtl {
right: auto;
}
}
.@{ant-prefix}-col@{class}-pull-@{index} {
right: auto;
&.@{ant-prefix}-col-rtl {
left: auto;
}
}
.@{ant-prefix}-col@{class}-offset-@{index} {
margin-left: 0;
&.@{ant-prefix}-col-rtl {
margin-right: 0;
}
}
.@{ant-prefix}-col@{class}-order-@{index} {
order: 0;

60
components/grid/style/mixin.rtl.less Normal file
View File

@ -0,0 +1,60 @@
@import '../../style/mixins/index';
.loop-grid-columns(@index, @class) when (@index > 0) {
.@{ant-prefix}-col@{class}-push-@{index} {
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
right: percentage((@index / @grid-columns));
left: auto;
}
}
.@{ant-prefix}-col@{class}-pull-@{index} {
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
right: auto;
left: percentage((@index / @grid-columns));
}
}
.@{ant-prefix}-col@{class}-offset-@{index} {
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
margin-right: percentage((@index / @grid-columns));
margin-left: 0;
}
}
}
.loop-grid-columns(@index, @class) when (@index = 0) {
.@{ant-prefix}-col-push-@{index} {
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
right: auto;
}
}
.@{ant-prefix}-col-pull-@{index} {
&.@{ant-prefix}-col-rtl {
left: auto;
}
}
.@{ant-prefix}-col@{class}-push-@{index} {
&.@{ant-prefix}-col-rtl {
right: auto;
}
}
.@{ant-prefix}-col@{class}-pull-@{index} {
&.@{ant-prefix}-col-rtl {
left: auto;
}
}
.@{ant-prefix}-col@{class}-offset-@{index} {
&.@{ant-prefix}-col-rtl {
margin-right: 0;
}
}
}

14
components/grid/style/rtl.less Normal file
View File

@ -0,0 +1,14 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
.@{ant-prefix}-row {
&-rtl {
direction: rtl;
}
}
.@{ant-prefix}-col {
&&-rtl {
float: right;
}
}

25
components/typography/style/index.less
View File

@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './rtl';
@typography-prefix-cls: ~'@{ant-prefix}-typography';
@ -7,10 +8,6 @@
.@{typography-prefix-cls} {
color: @text-color;
&-rtl {
direction: rtl;
}
&&-secondary {
color: @text-color-secondary;
}
@ -132,11 +129,6 @@
.operation-unit();
margin-left: 8px;
.@{typography-prefix-cls}-rtl & {
margin-right: 8px;
margin-left: 0;
}
}
&-copy-success {
@ -156,11 +148,6 @@
margin-top: -@input-padding-vertical-base - 1px;
// stylelint-disable-next-line function-calc-no-invalid
margin-bottom: calc(1em - @input-padding-vertical-base - 2px);
&.@{typography-prefix-cls}-rtl {
right: -@input-padding-horizontal - 1px;
left: auto;
}
}
&-confirm {
@ -169,11 +156,6 @@
bottom: 8px;
color: @text-color-secondary;
pointer-events: none;
.@{typography-prefix-cls}-rtl & {
right: auto;
left: 10px;
}
}
// Fix Editable Textarea flash in Firefox
@ -191,11 +173,6 @@
li {
margin: 0 0 0 20px;
padding: 0 0 0 4px;
.@{typography-prefix-cls}-rtl& {
margin: 0 20px 0 0;
padding: 0 4px 0 0;
}
}
}

48
components/typography/style/rtl.less Normal file
View File

@ -0,0 +1,48 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@typography-prefix-cls: ~'@{ant-prefix}-typography';
.@{typography-prefix-cls} {
&-rtl {
direction: rtl;
}
// Operation
&-expand,
&-edit,
&-copy {
.@{typography-prefix-cls}-rtl & {
margin-right: 8px;
margin-left: 0;
}
}
// Text input area
&-edit-content {
div& {
&.@{typography-prefix-cls}-rtl {
right: -@input-padding-horizontal - 1px;
left: auto;
}
}
&-confirm {
.@{typography-prefix-cls}-rtl & {
right: auto;
left: 10px;
}
}
}
// list
ul,
ol {
li {
.@{typography-prefix-cls}-rtl& {
margin: 0 20px 0 0;
padding: 0 4px 0 0;
}
}
}
}