Skip to content

Commit

Permalink
style: add rtl.less of Badge\Comment\Collapse (ant-design#22320)
Browse files Browse the repository at this point in the history
  • Loading branch information
xrkffgg authored Mar 18, 2020
1 parent f9b46bf commit 09a2567
Show file tree
Hide file tree
Showing 6 changed files with 166 additions and 99 deletions.
52 changes: 1 addition & 51 deletions components/badge/style/index.less
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './rtl';

@badge-prefix-cls: ~'@{ant-prefix}-badge';
@number-prefix-cls: ~'@{ant-prefix}-scroll-number';
Expand All @@ -12,10 +13,6 @@
color: unset;
line-height: 1;

&-rtl {
direction: rtl;
}

&-count {
z-index: @zindex-badge;
min-width: @badge-height;
Expand Down Expand Up @@ -57,20 +54,6 @@
right: 0;
transform: translate(50%, -50%);
transform-origin: 100% 0%;

.@{badge-prefix-cls}-rtl & {
right: auto;
left: 0;
transform: translate(-50%, -50%);
transform-origin: 0% 0%;
}
}

.@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
right: auto;
left: 0;
transform: translate(-50%, -50%);
transform-origin: 0% 0%;
}

&-status {
Expand Down Expand Up @@ -129,31 +112,18 @@
margin-left: 8px;
color: @text-color;
font-size: @font-size-base;

.@{badge-prefix-cls}-rtl & {
margin-right: 8px;
margin-left: 0;
}
}
}

&-zoom-appear,
&-zoom-enter {
animation: antZoomBadgeIn 0.3s @ease-out-back;
animation-fill-mode: both;

.@{badge-prefix-cls}-rtl & {
animation-name: antZoomBadgeInRtl;
}
}

&-zoom-leave {
animation: antZoomBadgeOut 0.3s @ease-in-back;
animation-fill-mode: both;

.@{badge-prefix-cls}-rtl & {
animation-name: antZoomBadgeOutRtl;
}
}

&-not-a-wrapper {
Expand Down Expand Up @@ -220,23 +190,3 @@
opacity: 0;
}
}

@keyframes antZoomBadgeInRtl {
0% {
transform: scale(0) translate(-50%, -50%);
opacity: 0;
}
100% {
transform: scale(1) translate(-50%, -50%);
}
}

@keyframes antZoomBadgeOutRtl {
0% {
transform: scale(1) translate(-50%, -50%);
}
100% {
transform: scale(0) translate(-50%, -50%);
opacity: 0;
}
}
71 changes: 71 additions & 0 deletions components/badge/style/rtl.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';

@badge-prefix-cls: ~'@{ant-prefix}-badge';
@number-prefix-cls: ~'@{ant-prefix}-scroll-number';

.@{badge-prefix-cls} {
&-rtl {
direction: rtl;
}

&-count,
&-dot,
.@{number-prefix-cls}-custom-component {
.@{badge-prefix-cls}-rtl & {
right: auto;
left: 0;
transform: translate(-50%, -50%);
transform-origin: 0% 0%;
}
}

.@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
right: auto;
left: 0;
transform: translate(-50%, -50%);
transform-origin: 0% 0%;
}

&-status {
&-text {
.@{badge-prefix-cls}-rtl & {
margin-right: 8px;
margin-left: 0;
}
}
}

&-zoom-appear,
&-zoom-enter {
.@{badge-prefix-cls}-rtl & {
animation-name: antZoomBadgeInRtl;
}
}

&-zoom-leave {
.@{badge-prefix-cls}-rtl & {
animation-name: antZoomBadgeOutRtl;
}
}
}

@keyframes antZoomBadgeInRtl {
0% {
transform: scale(0) translate(-50%, -50%);
opacity: 0;
}
100% {
transform: scale(1) translate(-50%, -50%);
}
}

@keyframes antZoomBadgeOutRtl {
0% {
transform: scale(1) translate(-50%, -50%);
}
100% {
transform: scale(0) translate(-50%, -50%);
opacity: 0;
}
}
23 changes: 1 addition & 22 deletions components/collapse/style/index.less
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './rtl';

@collapse-prefix-cls: ~'@{ant-prefix}-collapse';

Expand All @@ -11,10 +12,6 @@
border-bottom: 0;
border-radius: @collapse-panel-border-radius;

&-rtl {
direction: rtl;
}

& > &-item {
border-bottom: @border-width-base @border-style-base @border-color-base;

Expand All @@ -35,11 +32,6 @@
transition: all 0.3s;
.clearfix;

.@{collapse-prefix-cls}-rtl & {
padding: @collapse-header-padding;
padding-right: @collapse-header-padding-extra;
}

.@{collapse-prefix-cls}-arrow {
.iconfont-mixin();

Expand All @@ -52,19 +44,11 @@

& svg {
transition: transform 0.24s;

.@{collapse-prefix-cls}-rtl& {
transform: rotate(180deg);
}
}
}

.@{collapse-prefix-cls}-extra {
float: right;

.@{collapse-prefix-cls}-rtl& {
float: left;
}
}

&:focus {
Expand All @@ -75,11 +59,6 @@
&.@{collapse-prefix-cls}-no-arrow {
> .@{collapse-prefix-cls}-header {
padding-left: 12px;

.@{collapse-prefix-cls}-rtl& {
padding-right: 12px;
padding-left: 0;
}
}
}
}
Expand Down
42 changes: 42 additions & 0 deletions components/collapse/style/rtl.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';

@collapse-prefix-cls: ~'@{ant-prefix}-collapse';

.@{collapse-prefix-cls} {
&-rtl {
direction: rtl;
}

& > &-item {
> .@{collapse-prefix-cls}-header {
.@{collapse-prefix-cls}-rtl & {
padding: @collapse-header-padding;
padding-right: @collapse-header-padding-extra;
}

.@{collapse-prefix-cls}-arrow {
& svg {
.@{collapse-prefix-cls}-rtl& {
transform: rotate(180deg);
}
}
}

.@{collapse-prefix-cls}-extra {
.@{collapse-prefix-cls}-rtl& {
float: left;
}
}
}

&.@{collapse-prefix-cls}-no-arrow {
> .@{collapse-prefix-cls}-header {
.@{collapse-prefix-cls}-rtl& {
padding-right: 12px;
padding-left: 0;
}
}
}
}
}
27 changes: 1 addition & 26 deletions components/comment/style/index.less
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './rtl';

@comment-prefix-cls: ~'@{ant-prefix}-comment';

.@{comment-prefix-cls} {
position: relative;
background-color: @comment-bg;

&-rtl {
direction: rtl;
}

&-inner {
display: flex;
padding: @comment-padding-base;
Expand All @@ -22,10 +19,6 @@
margin-right: 12px;
cursor: pointer;

.@{comment-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 12px;
}
img {
width: 32px;
height: 32px;
Expand All @@ -51,11 +44,6 @@
padding-right: 8px;
font-size: @comment-font-size-sm;
line-height: 18px;

.@{comment-prefix-cls}-rtl & {
padding-right: 0;
padding-left: 8px;
}
}

&-name {
Expand Down Expand Up @@ -86,9 +74,6 @@
margin-top: 12px;
padding-left: 0;

.@{comment-prefix-cls}-rtl & {
padding-right: 0;
}
> li {
display: inline-block;
color: @comment-action-color;
Expand All @@ -100,11 +85,6 @@
transition: color 0.3s;
user-select: none;

.@{comment-prefix-cls}-rtl & {
padding-right: 0;
padding-left: 10px;
}

&:hover {
color: @comment-action-hover-color;
}
Expand All @@ -114,10 +94,5 @@

&-nested {
margin-left: @comment-nest-indent;

.@{comment-prefix-cls}-rtl & {
margin-right: @comment-nest-indent;
margin-left: 0;
}
}
}
50 changes: 50 additions & 0 deletions components/comment/style/rtl.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';

@comment-prefix-cls: ~'@{ant-prefix}-comment';

.@{comment-prefix-cls} {
&-rtl {
direction: rtl;
}

&-avatar {
.@{comment-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 12px;
}
}

&-content {
&-author {
& > a,
& > span {
.@{comment-prefix-cls}-rtl & {
padding-right: 0;
padding-left: 8px;
}
}
}
}

&-actions {
.@{comment-prefix-cls}-rtl & {
padding-right: 0;
}
> li {
> span {
.@{comment-prefix-cls}-rtl & {
padding-right: 0;
padding-left: 10px;
}
}
}
}

&-nested {
.@{comment-prefix-cls}-rtl & {
margin-right: @comment-nest-indent;
margin-left: 0;
}
}
}

0 comments on commit 09a2567

Please sign in to comment.