From 9f1a5761f4b38bc778616187ec9d995e563ba3da Mon Sep 17 00:00:00 2001 From: Aleksey Troynikov Date: Tue, 26 Dec 2023 20:28:45 +0300 Subject: [PATCH] feat: added CSS custom properties for RTL --- src/components/Dialog/Dialog.scss | 11 +++-------- src/components/Progress/Progress.scss | 6 ------ src/components/Progress/Progress.tsx | 6 +++--- src/components/Sheet/Sheet.scss | 7 ++----- src/components/Skeleton/Skeleton.scss | 12 +++--------- src/components/Switch/Switch.scss | 7 ++----- src/components/Toaster/ToastList/ToastAnimation.scss | 2 +- styles/themes/common/_index.scss | 9 +++++++++ 8 files changed, 23 insertions(+), 37 deletions(-) diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 52b38b13ec..0af9dbbedc 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -30,14 +30,9 @@ $block: '.#{variables.$ns}dialog'; &_has-close { --yc-dialog-header-padding: var(--yc-dialog-header-padding-top) - calc(var(--yc-dialog-side-padding) + 28px) var(--yc-dialog-header-padding-bottom) - var(--yc-dialog-side-padding); - - [dir='rtl'] & { - --yc-dialog-header-padding: var(--yc-dialog-header-padding-top) - var(--yc-dialog-side-padding) var(--yc-dialog-header-padding-bottom) - calc(var(--yc-dialog-side-padding) + 28px); - } + calc(var(--yc-dialog-side-padding) + 28px * var(--g-flow-is-ltr)) + var(--yc-dialog-header-padding-bottom) + calc(var(--yc-dialog-side-padding) + 28px * var(--g-flow-is-rtl)); } } diff --git a/src/components/Progress/Progress.scss b/src/components/Progress/Progress.scss index 2ba1cafaff..285fd7c1f3 100644 --- a/src/components/Progress/Progress.scss +++ b/src/components/Progress/Progress.scss @@ -31,12 +31,6 @@ $progress-xs-height: 4px; text-align: center; - --_--flow-direction: 1; - - [dir='rtl'] & { - --_--flow-direction: -1; - } - &__text { @include progress-text; diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx index 102f273e26..06f03f487b 100644 --- a/src/components/Progress/Progress.tsx +++ b/src/components/Progress/Progress.tsx @@ -145,7 +145,7 @@ export class Progress extends React.Component { const className = b('item', {theme: this.getTheme(), loading: this.props.loading}); const offset = Progress.getOffset(value); - const style = {transform: `translateX(calc(var(--_--flow-direction) * ${offset}%))`}; + const style = {transform: `translateX(calc(var(--g-flow-direction) * ${offset}%))`}; if (Progress.isFiniteNumber(value)) { return ( @@ -164,7 +164,7 @@ export class Progress extends React.Component { const className = b('stack', stackClassName); const value = props.value || Progress.getValueFromStack(stack); const offset = Progress.getOffset(value); - const style = {transform: `translateX(calc(var(--_--flow-direction) * ${offset}%))`}; + const style = {transform: `translateX(calc(var(--g-flow-direction) * ${offset}%))`}; interface ItemStyle { width: string; @@ -226,7 +226,7 @@ export class Progress extends React.Component { } const className = b('text-inner'); - const style = {transform: `translateX(calc(var(--_--flow-direction) * ${-offset}%))`}; + const style = {transform: `translateX(calc(var(--g-flow-direction) * ${-offset}%))`}; return (
diff --git a/src/components/Sheet/Sheet.scss b/src/components/Sheet/Sheet.scss index a62b0fdc49..651cfc7fd7 100644 --- a/src/components/Sheet/Sheet.scss +++ b/src/components/Sheet/Sheet.scss @@ -59,18 +59,15 @@ $block: '.#{variables.$ns}sheet'; } &__sheet-top-resizer { + --_--translate-x: calc(-50% * var(--g-flow-direction)); position: absolute; inset-block-start: 50%; inset-inline-start: 50%; - transform: translateX(-50%) translateY(-50%); + transform: translateX(var(--_--translate-x)) translateY(-50%); width: 40px; height: 4px; border-radius: 4px; background-color: var(--g-color-line-generic); - - [dir='rtl'] & { - transform: translateX(50%) translateY(-50%); - } } &__sheet-content { diff --git a/src/components/Skeleton/Skeleton.scss b/src/components/Skeleton/Skeleton.scss index f5de124be3..7a44a5c038 100644 --- a/src/components/Skeleton/Skeleton.scss +++ b/src/components/Skeleton/Skeleton.scss @@ -3,9 +3,9 @@ $block: '.#{variables.$ns}skeleton'; #{$block} { - --_--animation-from: -100%; - --_--animation-to: 100%; - --_--gradient-deg: 90deg; + --_--animation-from: calc(-100% * var(--g-flow-direction)); + --_--animation-to: calc(100% * var(--g-flow-direction)); + --_--gradient-deg: calc(90deg * var(--g-flow-direction)); display: inline-block; position: relative; @@ -16,12 +16,6 @@ $block: '.#{variables.$ns}skeleton'; background-color: var(--g-color-base-generic); - [dir='rtl'] & { - --_--animation-from: 100%; - --_--animation-to: -100%; - --_--gradient-deg: -90deg; - } - &::after { position: absolute; inset: 0; diff --git a/src/components/Switch/Switch.scss b/src/components/Switch/Switch.scss index f97185e252..d3755bf7f1 100644 --- a/src/components/Switch/Switch.scss +++ b/src/components/Switch/Switch.scss @@ -102,11 +102,8 @@ $block: '.#{variables.$ns}switch'; } &_checked &__slider { - transform: translateX(100%); - - [dir='rtl'] & { - transform: translateX(-100%); - } + --_--translate-x: calc(100% * var(--g-flow-direction)); + transform: translateX(var(--_--translate-x)); } &_checked, diff --git a/src/components/Toaster/ToastList/ToastAnimation.scss b/src/components/Toaster/ToastList/ToastAnimation.scss index 0915b15284..d996186453 100644 --- a/src/components/Toaster/ToastList/ToastAnimation.scss +++ b/src/components/Toaster/ToastList/ToastAnimation.scss @@ -20,7 +20,7 @@ $animation-duration: 0.6s; @if ($platform == 'mobile') { transform: translateY($transition-distance); } @else { - transform: translateX($transition-distance); + transform: translateX(calc(var(--g-flow-direction) * $transition-distance)); } } diff --git a/styles/themes/common/_index.scss b/styles/themes/common/_index.scss index 04399d6490..59060be784 100644 --- a/styles/themes/common/_index.scss +++ b/styles/themes/common/_index.scss @@ -14,4 +14,13 @@ --g-border-radius-xl: 10px; --g-focus-border-radius: 2px; + + --g-flow-direction: 1; + --g-flow-is-ltr: 1; + --g-flow-is-rtl: 0; + &[dir='rtl'] { + --g-flow-direction: -1; + --g-flow-is-ltr: 0; + --g-flow-is-rtl: 1; + } }