mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-05-23 16:44:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve rtl styling

Browse Source
This commit is contained in:
Rene
2022-07-27 22:36:22 +02:00
parent c8de9c736d
commit 54083dc661
3 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/classnames.ts
+1
View File
@@ -25,6 +25,7 @@ export const classNameSizeObserverListenerItemFinal = `${classNameSizeObserverLi
export const classNameTrinsicObserver = 'os-trinsic-observer';
export const classNameScrollbar = 'os-scrollbar';
export const classNameScrollbarRtl = `${classNameScrollbar}-rtl`;
export const classNameScrollbarHorizontal = `${classNameScrollbar}-horizontal`;
export const classNameScrollbarVertical = `${classNameScrollbar}-vertical`;
export const classNameScrollbarTrack = `${classNameScrollbar}-track`;
packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts
+3 -1
View File
@@ -24,6 +24,7 @@ import {
classNamesScrollbarAutoHidden,
classNamesScrollbarHandleInteractive,
classNamesScrollbarTrackInteractive,
classNameScrollbarRtl,
} from 'classnames';
import type { StructureSetupUpdateHints } from 'setups/structureSetup/structureSetup.update';
import type {
@@ -181,7 +182,7 @@ export const createScrollbarsSetup = (
} = structureUpdateHints;
const checkOption = createOptionCheck(options, changedOptions, force);
const currStructureSetupState = structureSetupState();
const { _overflowAmount, _overflowStyle } = currStructureSetupState;
const { _overflowAmount, _overflowStyle, _directionIsRTL } = currStructureSetupState;
const [theme, themeChanged] = checkOption<string | null>('scrollbars.theme');
const [visibility, visibilityChanged] =
checkOption<ScrollbarVisibilityBehavior>('scrollbars.visibility');
@@ -234,6 +235,7 @@ export const createScrollbarsSetup = (
scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.x, true);
scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.y, false);
scrollbarsAddRemoveClass(classNameScrollbarRtl, _directionIsRTL);
}
},
scrollbarsSetupState,
packages/overlayscrollbars/src/styles/scrollbars.scss
+6 -6
View File
@@ -44,10 +44,10 @@ body > .os-scrollbar {
top: 0;
right: 0;
}
.os-scrollbar-horizontal-rtl {
.os-scrollbar-rtl.os-scrollbar-horizontal {
right: 0;
}
.os-scrollbar-vertical-rtl {
.os-scrollbar-rtl.os-scrollbar-vertical {
right: auto;
left: 0;
}
@@ -95,8 +95,8 @@ THEMES:
bottom: 10px;
width: 10px;
}
.os-theme-dark.os-scrollbar-horizontal-rtl,
.os-theme-light.os-scrollbar-horizontal-rtl {
.os-theme-dark.os-scrollbar-rtl.os-scrollbar-horizontal,
.os-theme-light.os-scrollbar-rtl.os-scrollbar-horizontal {
left: 10px;
right: 0;
}
@@ -175,8 +175,8 @@ THEMES:
left: -6px;
right: -2px;
}
.os-theme-dark.os-scrollbar-vertical-rtl .os-scrollbar-handle:before,
.os-theme-light.os-scrollbar-vertical-rtl .os-scrollbar-handle:before {
.os-theme-dark.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before,
.os-theme-light.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before {
right: -6px;
left: -2px;
}