mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
style: add rtl.less of Table (#22402)
This commit is contained in:
xrkffgg
GitHub
parent
e3b7c9a514
commit
10d97bf346
@ -5,7 +5,6 @@
|
||||
|
||||
@table-prefix-cls: ~'@{ant-prefix}-table';
|
||||
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
|
||||
@table-wrapepr-rtl-cls: ~'@{table-prefix-cls}-wrapper-rtl';
|
||||
@table-header-icon-color: #bfbfbf;
|
||||
@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
|
||||
@table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);
|
||||
@ -14,9 +13,6 @@
|
||||
|
||||
.@{table-prefix-cls}-wrapper {
|
||||
.clearfix;
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
.@{table-prefix-cls} {
|
||||
@ -33,10 +29,6 @@
|
||||
border-radius: @table-border-radius-base @table-border-radius-base 0 0;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================= Cell =============================
|
||||
@ -93,14 +85,6 @@
|
||||
|
||||
&[colspan]:not([colspan='1']) {
|
||||
text-align: center;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -143,9 +127,6 @@
|
||||
margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal +
|
||||
ceil(@font-size-sm * 1.4));
|
||||
|
||||
&.@{table-prefix-cls}-rtl {
|
||||
margin: -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)) -@table-padding-vertical -@table-padding-horizontal;
|
||||
}
|
||||
td {
|
||||
background: transparent;
|
||||
}
|
||||
@ -176,10 +157,6 @@
|
||||
&-pagination.@{ant-prefix}-pagination {
|
||||
float: right;
|
||||
margin: 16px 0;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
// ================================================================
|
||||
@ -218,11 +195,6 @@
|
||||
margin-left: @padding-xs;
|
||||
color: @table-header-icon-color;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
margin-right: @padding-xs;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-full {
|
||||
margin-top: -0.2em;
|
||||
margin-bottom: 0;
|
||||
@ -258,10 +230,6 @@
|
||||
&-filter-column-title {
|
||||
flex: auto;
|
||||
padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
padding: @table-padding-vertical @table-padding-horizontal @table-padding-vertical 2.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&-filter-trigger-container {
|
||||
@ -276,11 +244,6 @@
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-open,
|
||||
&:hover,
|
||||
thead th.@{table-prefix-cls}-column-has-sorters:hover &:hover {
|
||||
@ -343,11 +306,6 @@
|
||||
&-submenu {
|
||||
.@{ant-prefix}-checkbox-wrapper + span {
|
||||
padding-left: 8px;
|
||||
|
||||
.@{ant-prefix}-dropdown-rtl & {
|
||||
padding-right: 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -381,22 +339,12 @@
|
||||
&-selection {
|
||||
position: relative;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-extra {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translate(100%, -50%);
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
.iconfont-size-under-12px(10px);
|
||||
color: @table-header-icon-color;
|
||||
@ -420,10 +368,6 @@
|
||||
&-row-indent {
|
||||
float: left;
|
||||
height: 1px;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&-row-expand-icon {
|
||||
@ -446,10 +390,6 @@
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
@ -500,11 +440,6 @@
|
||||
.@{table-prefix-cls}-row-indent + & {
|
||||
margin-top: (@font-size-base * @line-height-base - ceil(@font-size-sm * 1.4)) / 2;
|
||||
margin-right: @padding-xs;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
margin-right: 0;
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -633,3 +568,4 @@
|
||||
}
|
||||
|
||||
@import './radius.less';
|
||||
@import './rtl';
|
||||
|
||||
130
components/table/style/rtl.less
Normal file
130
components/table/style/rtl.less
Normal file
@ -0,0 +1,130 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@table-prefix-cls: ~'@{ant-prefix}-table';
|
||||
@table-wrapepr-rtl-cls: ~'@{table-prefix-cls}-wrapper-rtl';
|
||||
|
||||
.@{table-prefix-cls}-wrapper {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
.@{table-prefix-cls} {
|
||||
table {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================ Header ============================
|
||||
thead {
|
||||
> tr {
|
||||
> th {
|
||||
&[colspan]:not([colspan='1']) {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================= Body =============================
|
||||
tbody {
|
||||
> tr {
|
||||
// ========================= Nest Table ===========================
|
||||
.@{table-prefix-cls} {
|
||||
&.@{table-prefix-cls}-rtl {
|
||||
margin: -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)) -@table-padding-vertical -@table-padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Pagination ==========================
|
||||
&-pagination.@{ant-prefix}-pagination {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
// ================================================================
|
||||
// = Function =
|
||||
// ================================================================
|
||||
|
||||
// ============================ Sorter ============================
|
||||
&-column-sorter {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
margin-right: @padding-xs;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================ Filter ============================
|
||||
&-filter-column-title {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
padding: @table-padding-vertical @table-padding-horizontal @table-padding-vertical 2.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&-filter-trigger-container {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown
|
||||
&-filter-dropdown {
|
||||
// Checkbox
|
||||
&,
|
||||
&-submenu {
|
||||
.@{ant-prefix}-checkbox-wrapper + span {
|
||||
.@{ant-prefix}-dropdown-rtl & {
|
||||
padding-right: 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Selections ==========================
|
||||
&-selection {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-extra {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Expandable ==========================
|
||||
&-row-indent {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&-row-expand-icon {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-row-indent + & {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
margin-right: 0;
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user