mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-20 11:20:35 +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 classNameTrinsicObserver = 'os-trinsic-observer';
export const classNameScrollbar = 'os-scrollbar'; export const classNameScrollbar = 'os-scrollbar';
export const classNameScrollbarRtl = `${classNameScrollbar}-rtl`;
export const classNameScrollbarHorizontal = `${classNameScrollbar}-horizontal`; export const classNameScrollbarHorizontal = `${classNameScrollbar}-horizontal`;
export const classNameScrollbarVertical = `${classNameScrollbar}-vertical`; export const classNameScrollbarVertical = `${classNameScrollbar}-vertical`;
export const classNameScrollbarTrack = `${classNameScrollbar}-track`; export const classNameScrollbarTrack = `${classNameScrollbar}-track`;
packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts
+3 -1
View File
@@ -24,6 +24,7 @@ import {
classNamesScrollbarAutoHidden, classNamesScrollbarAutoHidden,
classNamesScrollbarHandleInteractive, classNamesScrollbarHandleInteractive,
classNamesScrollbarTrackInteractive, classNamesScrollbarTrackInteractive,
classNameScrollbarRtl,
} from 'classnames'; } from 'classnames';
import type { StructureSetupUpdateHints } from 'setups/structureSetup/structureSetup.update'; import type { StructureSetupUpdateHints } from 'setups/structureSetup/structureSetup.update';
import type { import type {
@@ -181,7 +182,7 @@ export const createScrollbarsSetup = (
} = structureUpdateHints; } = structureUpdateHints;
const checkOption = createOptionCheck(options, changedOptions, force); const checkOption = createOptionCheck(options, changedOptions, force);
const currStructureSetupState = structureSetupState(); const currStructureSetupState = structureSetupState();
const { _overflowAmount, _overflowStyle } = currStructureSetupState; const { _overflowAmount, _overflowStyle, _directionIsRTL } = currStructureSetupState;
const [theme, themeChanged] = checkOption<string | null>('scrollbars.theme'); const [theme, themeChanged] = checkOption<string | null>('scrollbars.theme');
const [visibility, visibilityChanged] = const [visibility, visibilityChanged] =
checkOption<ScrollbarVisibilityBehavior>('scrollbars.visibility'); checkOption<ScrollbarVisibilityBehavior>('scrollbars.visibility');
@@ -234,6 +235,7 @@ export const createScrollbarsSetup = (
scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.x, true); scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.x, true);
scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.y, false); scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.y, false);
scrollbarsAddRemoveClass(classNameScrollbarRtl, _directionIsRTL);
} }
}, },
scrollbarsSetupState, scrollbarsSetupState,
packages/overlayscrollbars/src/styles/scrollbars.scss
+6 -6
View File
@@ -44,10 +44,10 @@ body > .os-scrollbar {
top: 0; top: 0;
right: 0; right: 0;
} }
.os-scrollbar-horizontal-rtl { .os-scrollbar-rtl.os-scrollbar-horizontal {
right: 0; right: 0;
} }
.os-scrollbar-vertical-rtl { .os-scrollbar-rtl.os-scrollbar-vertical {
right: auto; right: auto;
left: 0; left: 0;
} }
@@ -95,8 +95,8 @@ THEMES:
bottom: 10px; bottom: 10px;
width: 10px; width: 10px;
} }
.os-theme-dark.os-scrollbar-horizontal-rtl, .os-theme-dark.os-scrollbar-rtl.os-scrollbar-horizontal,
.os-theme-light.os-scrollbar-horizontal-rtl { .os-theme-light.os-scrollbar-rtl.os-scrollbar-horizontal {
left: 10px; left: 10px;
right: 0; right: 0;
} }
@@ -175,8 +175,8 @@ THEMES:
left: -6px; left: -6px;
right: -2px; right: -2px;
} }
.os-theme-dark.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-vertical-rtl .os-scrollbar-handle:before { .os-theme-light.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before {
right: -6px; right: -6px;
left: -2px; left: -2px;
} }