Skip to content

Commit

Permalink
feat: added CSS custom properties for RTL
Browse files Browse the repository at this point in the history
  • Loading branch information
atroynikov committed Dec 26, 2023
1 parent 648b253 commit 9b97207
Show file tree
Hide file tree
Showing 8 changed files with 23 additions and 37 deletions.
11 changes: 3 additions & 8 deletions src/components/Dialog/Dialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,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-is-ltr))
var(--yc-dialog-header-padding-bottom)
calc(var(--yc-dialog-side-padding) + 28px * var(--g-is-rtl));
}
}

Expand Down
6 changes: 0 additions & 6 deletions src/components/Progress/Progress.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,6 @@ $progress-xs-height: 4px;

text-align: center;

--_--flow-direction: 1;

[dir='rtl'] & {
--_--flow-direction: -1;
}

&__text {
@include progress-text;

Expand Down
6 changes: 3 additions & 3 deletions src/components/Progress/Progress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export class Progress extends React.Component<ProgressProps> {
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 (
Expand All @@ -164,7 +164,7 @@ export class Progress extends React.Component<ProgressProps> {
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;
Expand Down Expand Up @@ -226,7 +226,7 @@ export class Progress extends React.Component<ProgressProps> {
}

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 (
<div className={className} style={style}>
Expand Down
7 changes: 2 additions & 5 deletions src/components/Sheet/Sheet.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
12 changes: 3 additions & 9 deletions src/components/Skeleton/Skeleton.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
7 changes: 2 additions & 5 deletions src/components/Switch/Switch.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Toaster/ToastList/ToastAnimation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand Down
9 changes: 9 additions & 0 deletions styles/themes/common/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,13 @@
--g-border-radius-xl: 10px;

--g-focus-border-radius: 2px;

--g-flow-direction: 1;
--g-is-ltr: 1;
--g-is-rtl: 0;
&[dir='rtl'] {
--g-flow-direction: -1;
--g-is-ltr: 0;
--g-is-rtl: 1;
}
}

0 comments on commit 9b97207

Please sign in to comment.