GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

style: add rtl.less of Tree\Tooltip\Timeline

pull/22335/head
xrkffgg 5 years ago
parent
09a2567eb1
commit
ef86892651
6 changed files with 189 additions and 92 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 68
      components/timeline/style/index.less
  2. 119
      components/timeline/style/rtl.less
  3. 10
      components/tooltip/style/index.less
  4. 14
      components/tooltip/style/rtl.less
  5. 20
      components/tree/style/index.less
  6. 50
      components/tree/style/rtl.less

68
components/timeline/style/index.less
View File

@ -10,10 +10,6 @@
padding: 0;
list-style: none;
&-rtl {
direction: rtl;
}
&-item {
position: relative;
margin: 0;
@ -27,13 +23,6 @@
left: 4px;
height: calc(100% - 10px);
border-left: @timeline-width solid @timeline-color;
.@{timeline-prefix-cls}-rtl & {
right: 4px;
left: auto;
border-right: @timeline-width solid @timeline-color;
border-left: none;
}
}
&-pending &-head {
@ -87,12 +76,6 @@
border: 0;
border-radius: 0;
transform: translate(-50%, -50%);
.@{timeline-prefix-cls}-rtl & {
right: 5px;
left: auto;
transform: translate(50%, -50%);
}
}
&-content {
@ -100,10 +83,6 @@
top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
margin: 0 0 0 18px;
word-break: break-word;
.@{timeline-prefix-cls}-rtl & {
margin: 0 18px 0 0;
}
}
&-last {
@ -124,27 +103,13 @@
&-head,
&-head-custom {
left: 50%;
.@{timeline-prefix-cls}-rtl& {
right: 50%;
left: auto;
}
}
&-head {
margin-left: -4px;
.@{timeline-prefix-cls}-rtl& {
margin-right: -4px;
margin-left: 0;
}
&-custom {
margin-left: 1px;
.@{timeline-prefix-cls}-rtl& {
margin-right: 1px;
margin-left: 0;
}
}
}
@ -153,12 +118,6 @@
left: calc(50% - 4px);
width: calc(50% - 14px);
text-align: left;
.@{timeline-prefix-cls}-rtl& {
right: calc(50% - 4px);
left: auto;
text-align: right;
}
}
}
@ -167,10 +126,6 @@
width: calc(50% - 12px);
margin: 0;
text-align: right;
.@{timeline-prefix-cls}-rtl& {
text-align: left;
}
}
}
}
@ -183,20 +138,9 @@
.@{timeline-prefix-cls}-item-head-custom {
// stylelint-disable-next-line function-calc-no-invalid
left: calc(100% - 4px - @timeline-width);
.@{timeline-prefix-cls}-rtl& {
right: 0;
left: auto;
}
}
.@{timeline-prefix-cls}-item-content {
width: calc(100% - 18px);
.@{timeline-prefix-cls}-rtl& {
width: 100%;
margin-right: 18px;
text-align: right;
}
}
}
}
@ -205,11 +149,6 @@
display: block;
height: calc(100% - 14px);
border-left: 2px dotted @timeline-color;
.@{timeline-prefix-cls}-rtl& {
border-right: 2px dotted @timeline-color;
border-left: none;
}
}
&&-reverse &-item-last &-item-tail {
@ -222,11 +161,6 @@
display: block;
height: calc(100% - 15px);
border-left: 2px dotted @timeline-color;
.@{timeline-prefix-cls}-rtl& {
border-right: 2px dotted @timeline-color;
border-left: none;
}
}
.@{timeline-prefix-cls}-item-content {
min-height: 48px;
@ -248,3 +182,5 @@
}
}
}
@import './rtl.less';

119
components/timeline/style/rtl.less
View File

@ -0,0 +1,119 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@timeline-prefix-cls: ~'@{ant-prefix}-timeline';
.@{timeline-prefix-cls} {
&-rtl {
direction: rtl;
}
&-item {
&-tail {
.@{timeline-prefix-cls}-rtl & {
right: 4px;
left: auto;
border-right: @timeline-width solid @timeline-color;
border-left: none;
}
}
&-head-custom {
.@{timeline-prefix-cls}-rtl & {
right: 5px;
left: auto;
transform: translate(50%, -50%);
}
}
&-content {
.@{timeline-prefix-cls}-rtl & {
margin: 0 18px 0 0;
}
}
}
&.@{timeline-prefix-cls}-alternate,
&.@{timeline-prefix-cls}-right,
&.@{timeline-prefix-cls}-label {
.@{timeline-prefix-cls}-item {
&-tail,
&-head,
&-head-custom {
.@{timeline-prefix-cls}-rtl& {
right: 50%;
left: auto;
}
}
&-head {
.@{timeline-prefix-cls}-rtl& {
margin-right: -4px;
margin-left: 0;
}
&-custom {
.@{timeline-prefix-cls}-rtl& {
margin-right: 1px;
margin-left: 0;
}
}
}
&-left {
.@{timeline-prefix-cls}-item-content {
.@{timeline-prefix-cls}-rtl& {
right: calc(50% - 4px);
left: auto;
text-align: right;
}
}
}
&-right {
.@{timeline-prefix-cls}-item-content {
.@{timeline-prefix-cls}-rtl& {
text-align: left;
}
}
}
}
}
&.@{timeline-prefix-cls}-right {
.@{timeline-prefix-cls}-item-right {
.@{timeline-prefix-cls}-item-tail,
.@{timeline-prefix-cls}-item-head,
.@{timeline-prefix-cls}-item-head-custom {
.@{timeline-prefix-cls}-rtl& {
right: 0;
left: auto;
}
}
.@{timeline-prefix-cls}-item-content {
.@{timeline-prefix-cls}-rtl& {
width: 100%;
margin-right: 18px;
text-align: right;
}
}
}
}
&&-pending &-item-last &-item-tail {
.@{timeline-prefix-cls}-rtl& {
border-right: 2px dotted @timeline-color;
border-left: none;
}
}
&&-reverse &-item-pending {
.@{timeline-prefix-cls}-item-tail {
.@{timeline-prefix-cls}-rtl& {
border-right: 2px dotted @timeline-color;
border-left: none;
}
}
}
}

10
components/tooltip/style/index.less
View File

@ -21,10 +21,6 @@
max-width: @tooltip-max-width;
visibility: visible;
&-rtl {
direction: rtl;
}
&-hidden {
display: none;
}
@ -65,10 +61,6 @@
background-color: @tooltip-bg;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
.@{tooltip-prefix-cls}-rtl & {
text-align: right;
}
}
// Arrows
@ -193,3 +185,5 @@
right: @tooltip-arrow-offset-horizontal;
}
}
@import './rtl.less';

14
components/tooltip/style/rtl.less
View File

@ -0,0 +1,14 @@
@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
// Base class
.@{tooltip-prefix-cls} {
&-rtl {
direction: rtl;
}
// Wrapper for the tooltip content
&-inner {
.@{tooltip-prefix-cls}-rtl & {
text-align: right;
}
}
}

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

@ -17,10 +17,6 @@
border-radius: @border-radius-base;
transition: background-color 0.3s;
&-rtl {
direction: rtl;
}
&-focused:not(:hover):not(&-active-focused) {
background: @primary-1;
}
@ -47,10 +43,6 @@
align-items: flex-start;
padding: 0 0 (@padding-xs / 2) 0;
outline: none;
&-rtl {
direction: rtl;
}
// Disabled
&-disabled {
// >>> Title
@ -101,10 +93,6 @@
.@{tree-prefix-cls}-switcher-icon {
svg {
transform: rotate(-90deg);
.@{tree-prefix-cls}-rtl& {
transform: rotate(90deg);
}
}
}
}
@ -198,12 +186,6 @@
bottom: -@tree-title-height - 4px;
border-right: 1px solid @border-color-base;
content: '';
.@{tree-prefix-cls}-rtl& {
right: auto;
left: -@tree-title-height / 2;
border-right: none;
border-left: 1px solid @border-color-base;
}
}
&-end {
@ -233,3 +215,5 @@
}
.antTreeFn(@tree-prefix-cls);
@import './rtl.less';

50
components/tree/style/rtl.less
View File

@ -0,0 +1,50 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../checkbox/style/mixin';
@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
.antTreeFn(@tree-prefix-cls) {
.@{tree-prefix-cls} {
&-rtl {
direction: rtl;
}
// ===================== TreeNode =====================
.@{tree-node-prefix-cls} {
&-rtl {
direction: rtl;
}
}
// >>> Switcher
& &-switcher {
&_close {
.@{tree-prefix-cls}-switcher-icon {
svg {
.@{tree-prefix-cls}-rtl& {
transform: rotate(90deg);
}
}
}
}
}
// ==================== Show Line =====================
&-show-line {
// ================ Indent lines ================
.@{tree-prefix-cls}-indent {
&-unit {
&::before {
.@{tree-prefix-cls}-rtl& {
right: auto;
left: -@tree-title-height / 2;
border-right: none;
border-left: 1px solid @border-color-base;
}
}
}
}
}
}
}
Write Preview
Loading…
Cancel
Save