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 Menu\Pagination\PageHeader (#22271)

Browse Source
This commit is contained in:
xrkffgg 2020-03-16 21:56:05 +08:00 committed by GitHub
parent 9df7b38673
commit 5dde517836
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 291 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
components/menu/style/index.less
View File

@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './rtl';
@menu-prefix-cls: ~'@{ant-prefix}-menu';
@ -35,10 +36,6 @@
font-size: @font-size-base;
line-height: @line-height-base;
transition: all 0.3s;
.@{menu-prefix-cls}-rtl & {
text-align: right;
}
}
&-submenu,
@ -132,14 +129,6 @@
border-right: @border-width-base @border-style-base @border-color-split;
}
&-inline,
&-vertical {
.@{menu-prefix-cls}-rtl& {
border-right: none;
border-left: @border-width-base @border-style-base @border-color-split;
}
}
&-vertical-right {
border-left: @border-width-base @border-style-base @border-color-split;
}
@ -160,10 +149,6 @@
overflow-y: auto;
}
.@{menu-prefix-cls}-rtl& {
transform-origin: top right;
}
.@{menu-prefix-cls}-item {
left: 0;
margin-left: 0;
@ -175,10 +160,6 @@
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu {
transform-origin: 0 0;
.@{menu-prefix-cls}-rtl& {
transform-origin: top right;
}
}
}
@ -205,20 +186,11 @@
opacity: 1;
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
}
.@{menu-prefix-cls}-rtl & {
margin-right: auto;
margin-left: 10px;
}
}
&.@{menu-prefix-cls}-item-only-child {
> .@{iconfont-css-prefix} {
margin-right: 0;
.@{menu-prefix-cls}-rtl & {
margin-left: 0;
}
}
}
}
@ -240,11 +212,6 @@
.submenu-title-wrapper {
padding-right: 20px;
.@{menu-prefix-cls}-submenu-rtl& {
padding-right: 0;
padding-left: 20px;
}
}
&::before {
@ -281,11 +248,6 @@
width: 10px;
transition: transform 0.3s @ease-in-out;
.@{menu-prefix-cls}-rtl & {
right: auto;
left: 16px;
}
&::before,
&::after {
position: absolute;
@ -320,15 +282,9 @@
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
&::before {
transform: rotate(45deg) translateY(-2px);
.@{menu-prefix-cls}-rtl & {
transform: rotate(-45deg) translateY(-2px);
}
}
&::after {
transform: rotate(-45deg) translateY(2px);
.@{menu-prefix-cls}-rtl & {
transform: rotate(45deg) translateY(2px);
}
}
}
}
@ -432,11 +388,6 @@
opacity: 0;
transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
content: '';
.@{menu-prefix-cls}-rtl& {
right: auto;
left: 0;
}
}
}
@ -450,10 +401,6 @@
font-size: @menu-item-font-size;
line-height: @menu-item-height;
text-overflow: ellipsis;
.@{menu-prefix-cls}-rtl& {
text-align: right;
}
}
// disable margin collapsed
@ -490,11 +437,6 @@
.@{menu-prefix-cls}-submenu-title {
padding-right: 34px;
.@{menu-prefix-cls}-rtl& {
padding-right: 0;
padding-left: 34px;
}
}
}
@ -556,10 +498,6 @@
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
padding: 0 16px 0 28px;
.@{menu-prefix-cls}-rtl & {
padding: 0 28px 0 16px;
}
}
}
@ -585,11 +523,6 @@
& .@{menu-prefix-cls}-item-group-title {
padding-left: 32px;
.@{menu-prefix-cls}-rtl& {
padding-right: 32px;
padding-left: 0;
}
}
}

141
components/menu/style/rtl.less Normal file
View File

@ -0,0 +1,141 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@menu-prefix-cls: ~'@{ant-prefix}-menu';
.@{menu-prefix-cls} {
&-item-group-title {
.@{menu-prefix-cls}-rtl & {
text-align: right;
}
}
&-inline,
&-vertical {
.@{menu-prefix-cls}-rtl& {
border-right: none;
border-left: @border-width-base @border-style-base @border-color-split;
}
}
&-vertical&-sub,
&-vertical-left&-sub,
&-vertical-right&-sub {
.@{menu-prefix-cls}-rtl& {
transform-origin: top right;
}
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu {
.@{menu-prefix-cls}-rtl& {
transform-origin: top right;
}
}
}
&-item,
&-submenu-title {
.@{iconfont-css-prefix} {
.@{menu-prefix-cls}-rtl & {
margin-right: auto;
margin-left: 10px;
}
}
&.@{menu-prefix-cls}-item-only-child {
> .@{iconfont-css-prefix} {
.@{menu-prefix-cls}-rtl & {
margin-left: 0;
}
}
}
}
&-submenu {
&-popup {
.submenu-title-wrapper {
.@{menu-prefix-cls}-submenu-rtl& {
padding-right: 0;
padding-left: 20px;
}
}
}
&-vertical,
&-vertical-left,
&-vertical-right,
&-inline {
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
.@{menu-prefix-cls}-rtl & {
right: auto;
left: 16px;
}
}
}
&-vertical,
&-vertical-left,
&-vertical-right {
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
&::before {
.@{menu-prefix-cls}-rtl & {
transform: rotate(-45deg) translateY(-2px);
}
}
&::after {
.@{menu-prefix-cls}-rtl & {
transform: rotate(45deg) translateY(2px);
}
}
}
}
}
&-vertical,
&-vertical-left,
&-vertical-right,
&-inline {
.@{menu-prefix-cls}-item {
&::after {
.@{menu-prefix-cls}-rtl& {
right: auto;
left: 0;
}
}
}
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
.@{menu-prefix-cls}-rtl& {
text-align: right;
}
}
}
&-inline {
.@{menu-prefix-cls}-submenu-title {
.@{menu-prefix-cls}-rtl& {
padding-right: 0;
padding-left: 34px;
}
}
}
&-item-group-list {
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
.@{menu-prefix-cls}-rtl & {
padding: 0 28px 0 16px;
}
}
}
&-sub&-inline {
& .@{menu-prefix-cls}-item-group-title {
.@{menu-prefix-cls}-rtl& {
padding-right: 32px;
padding-left: 0;
}
}
}
}

50
components/page-header/style/index.less
View File

@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './rtl';
@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';
@ -9,10 +10,6 @@
padding: @page-header-padding-vertical @page-header-padding;
background-color: @component-background;
&-rtl {
direction: rtl;
}
&-ghost {
background-color: @page-header-ghost-bg;
}
@ -32,12 +29,6 @@
font-size: 16px;
line-height: 1;
.@{pageheader-prefix-cls}-rtl & {
float: right;
margin-right: 0;
margin-left: 16px;
}
&-button {
.operation-unit();
color: @page-header-back-color;
@ -68,23 +59,11 @@
font-weight: 600;
font-size: @heading-4-size;
line-height: 32px;
.@{pageheader-prefix-cls}-rtl & {
float: right;
padding-right: 0;
padding-left: 12px;
}
}
.@{ant-prefix}-avatar {
float: left;
margin-right: 12px;
.@{pageheader-prefix-cls}-rtl & {
float: right;
margin-right: 0;
margin-left: 12px;
}
}
&-sub-title {
@ -94,44 +73,21 @@
color: @text-color-secondary;
font-size: 14px;
line-height: 22px;
.@{pageheader-prefix-cls}-rtl & {
float: right;
margin-right: 0;
margin-left: 12px;
}
}
&-tags {
float: left;
margin: 4px 0;
.@{pageheader-prefix-cls}-rtl & {
float: right;
}
}
&-extra {
float: right;
.@{pageheader-prefix-cls}-rtl & {
float: left;
}
> * {
margin-left: 8px;
.@{pageheader-prefix-cls}-rtl & {
margin-right: 8px;
margin-left: 0;
}
}
> *:first-child {
margin-left: 0;
.@{pageheader-prefix-cls}-rtl & {
margin-right: 0;
}
}
}
}
@ -146,10 +102,6 @@
margin-bottom: 1px;
border-bottom: 0;
.@{ant-prefix}-tabs-nav {
.@{pageheader-prefix-cls}-rtl & {
float: right;
}
.@{ant-prefix}-tabs-tab {
padding: @tabs-horizontal-padding-sm;
font-size: 16px;

78
components/page-header/style/rtl.less Normal file
View File

@ -0,0 +1,78 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';
.@{pageheader-prefix-cls} {
&-rtl {
direction: rtl;
}
&-back {
.@{pageheader-prefix-cls}-rtl & {
float: right;
margin-right: 0;
margin-left: 16px;
}
}
&-heading {
&-title {
.@{pageheader-prefix-cls}-rtl & {
float: right;
padding-right: 0;
padding-left: 12px;
}
}
.@{ant-prefix}-avatar {
.@{pageheader-prefix-cls}-rtl & {
float: right;
margin-right: 0;
margin-left: 12px;
}
}
&-sub-title {
.@{pageheader-prefix-cls}-rtl & {
float: right;
margin-right: 0;
margin-left: 12px;
}
}
&-tags {
.@{pageheader-prefix-cls}-rtl & {
float: right;
}
}
&-extra {
.@{pageheader-prefix-cls}-rtl & {
float: left;
}
> * {
.@{pageheader-prefix-cls}-rtl & {
margin-right: 8px;
margin-left: 0;
}
}
> *:first-child {
.@{pageheader-prefix-cls}-rtl & {
margin-right: 0;
}
}
}
}
&-footer {
.@{ant-prefix}-tabs-bar {
.@{ant-prefix}-tabs-nav {
.@{pageheader-prefix-cls}-rtl & {
float: right;
}
}
}
}
}

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

@ -1,16 +1,13 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import './rtl';
@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
.@{pagination-prefix-cls} {
.reset-component;
&-rtl {
direction: rtl;
}
ul,
ol {
margin: 0;
@ -33,11 +30,6 @@
margin-right: 8px;
line-height: @pagination-item-size - 2px;
vertical-align: middle;
.@{pagination-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
}
&-item {
@ -57,11 +49,6 @@
cursor: pointer;
user-select: none;
.@{pagination-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
a {
display: block;
padding: 0 6px;
@ -156,11 +143,6 @@
&-jump-prev,
&-jump-next {
margin-right: 8px;
.@{pagination-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
}
&-prev,
&-next,
@ -235,20 +217,10 @@
margin-left: 16px;
vertical-align: middle;
.@{pagination-prefix-cls}-rtl & {
margin-right: 16px;
margin-left: 0;
}
&-size-changer.@{ant-prefix}-select {
display: inline-block;
width: auto;
margin-right: 8px;
.@{pagination-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
}
&-quick-jumper {
@ -286,11 +258,6 @@
height: @pagination-item-size-sm;
margin-right: 8px;
.@{pagination-prefix-cls}-rtl& {
margin-right: 0;
margin-left: 8px;
}
input {
box-sizing: border-box;
height: 100%;
@ -306,11 +273,6 @@
&:hover {
border-color: @primary-color;
}
.@{pagination-prefix-cls}-rtl& {
margin-right: 0;
margin-left: 8px;
}
}
}
@ -360,11 +322,6 @@
&.mini &-options {
margin-left: 2px;
.@{pagination-prefix-cls}-rtl& {
margin-right: 2px;
margin-left: 0;
}
&-quick-jumper {
height: @pagination-item-size-sm;
line-height: @pagination-item-size-sm;

69
components/pagination/style/rtl.less Normal file
View File

@ -0,0 +1,69 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
.@{pagination-prefix-cls} {
&-rtl {
direction: rtl;
}
&-total-text {
.@{pagination-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
}
&-item {
.@{pagination-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
}
&-prev,
&-jump-prev,
&-jump-next {
.@{pagination-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
}
&-options {
.@{pagination-prefix-cls}-rtl & {
margin-right: 16px;
margin-left: 0;
}
&-size-changer.@{ant-prefix}-select {
.@{pagination-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
}
}
&-simple &-simple-pager {
.@{pagination-prefix-cls}-rtl& {
margin-right: 0;
margin-left: 8px;
}
input {
.@{pagination-prefix-cls}-rtl& {
margin-right: 0;
margin-left: 8px;
}
}
}
&.mini &-options {
.@{pagination-prefix-cls}-rtl& {
margin-right: 2px;
margin-left: 0;
}
}
}