mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
Integrate ScrollArea
This commit is contained in:
domyen
parent
4293b7bbad
commit
c00fd9550b
@ -2535,6 +2535,198 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics|ScrollArea horizontal 1`] = `
|
||||
<div
|
||||
style="width:240px;height:240px;overflow:auto;background:papayawhip;margin:1rem"
|
||||
>
|
||||
<div
|
||||
data-simplebar="true"
|
||||
data-simplebar-auto-hide="false"
|
||||
data-simplebar-force-visible="true"
|
||||
>
|
||||
<div
|
||||
class="simplebar-wrapper"
|
||||
>
|
||||
<div
|
||||
class="simplebar-height-auto-observer-wrapper"
|
||||
>
|
||||
<div
|
||||
class="simplebar-height-auto-observer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-mask"
|
||||
>
|
||||
<div
|
||||
class="simplebar-offset"
|
||||
>
|
||||
<div
|
||||
class="simplebar-content"
|
||||
>
|
||||
<b>
|
||||
HORIZONTAL
|
||||
</b>
|
||||
<span
|
||||
style="white-space:nowrap"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus congue, nulla sed consectetur ornare, nibh dui accumsan risus, vel ullamcorper elit ipsum eget libero. Aenean dictum nisi a rutrum convallis. Nullam id viverra diam. Vivamus ut augue eget urna commodo vulputate. Donec ullamcorper lectus a nulla malesuada, eget suscipit dui molestie. Suspendisse ac nulla in mi dignissim ornare id quis est. Morbi ut condimentum lorem, eu porta mi. Proin lacinia ac neque ultricies dictum. Mauris placerat ornare bibendum. Fusce porttitor quis ante ac consectetur. Sed finibus eu magna eu sollicitudin. Vivamus tellus tortor, tincidunt sed arcu tempus, suscipit feugiat est. Ut sit amet libero eget odio euismod tempor et nec velit.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-track simplebar-horizontal"
|
||||
>
|
||||
<div
|
||||
class="simplebar-scrollbar"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-track simplebar-vertical"
|
||||
>
|
||||
<div
|
||||
class="simplebar-scrollbar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics|ScrollArea vertical 1`] = `
|
||||
<div
|
||||
style="width:240px;height:240px;overflow:auto;background:papayawhip;margin:1rem"
|
||||
>
|
||||
<div
|
||||
data-simplebar="true"
|
||||
data-simplebar-auto-hide="false"
|
||||
data-simplebar-force-visible="true"
|
||||
>
|
||||
<div
|
||||
class="simplebar-wrapper"
|
||||
>
|
||||
<div
|
||||
class="simplebar-height-auto-observer-wrapper"
|
||||
>
|
||||
<div
|
||||
class="simplebar-height-auto-observer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-mask"
|
||||
>
|
||||
<div
|
||||
class="simplebar-offset"
|
||||
>
|
||||
<div
|
||||
class="simplebar-content"
|
||||
>
|
||||
<b>
|
||||
VERTICAL
|
||||
</b>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus congue, nulla sed consectetur ornare, nibh dui accumsan risus, vel ullamcorper elit ipsum eget libero. Aenean dictum nisi a rutrum convallis. Nullam id viverra diam. Vivamus ut augue eget urna commodo vulputate. Donec ullamcorper lectus a nulla malesuada, eget suscipit dui molestie. Suspendisse ac nulla in mi dignissim ornare id quis est. Morbi ut condimentum lorem, eu porta mi. Proin lacinia ac neque ultricies dictum. Mauris placerat ornare bibendum. Fusce porttitor quis ante ac consectetur. Sed finibus eu magna eu sollicitudin. Vivamus tellus tortor, tincidunt sed arcu tempus, suscipit feugiat est. Ut sit amet libero eget odio euismod tempor et nec velit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-track simplebar-horizontal"
|
||||
>
|
||||
<div
|
||||
class="simplebar-scrollbar"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-track simplebar-vertical"
|
||||
>
|
||||
<div
|
||||
class="simplebar-scrollbar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics|ScrollArea verticalCustomStyling 1`] = `
|
||||
.emotion-0 .simplebar-scrollbar:before {
|
||||
background: purple;
|
||||
}
|
||||
|
||||
.emotion-0 .simplebar-track.simplebar-vertical {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.emotion-0 .simplebar-scrollbar:before {
|
||||
background: purple;
|
||||
}
|
||||
|
||||
.emotion-0 .simplebar-track.simplebar-vertical {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
<div
|
||||
style="width:240px;height:240px;overflow:auto;background:papayawhip;margin:1rem"
|
||||
>
|
||||
<div
|
||||
class="emotion-0"
|
||||
data-simplebar="true"
|
||||
data-simplebar-auto-hide="false"
|
||||
data-simplebar-force-visible="true"
|
||||
>
|
||||
<div
|
||||
class="simplebar-wrapper"
|
||||
>
|
||||
<div
|
||||
class="simplebar-height-auto-observer-wrapper"
|
||||
>
|
||||
<div
|
||||
class="simplebar-height-auto-observer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-mask"
|
||||
>
|
||||
<div
|
||||
class="simplebar-offset"
|
||||
>
|
||||
<div
|
||||
class="simplebar-content"
|
||||
>
|
||||
<b>
|
||||
VERTICAL CUSTOM STYLING
|
||||
</b>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus congue, nulla sed consectetur ornare, nibh dui accumsan risus, vel ullamcorper elit ipsum eget libero. Aenean dictum nisi a rutrum convallis. Nullam id viverra diam. Vivamus ut augue eget urna commodo vulputate. Donec ullamcorper lectus a nulla malesuada, eget suscipit dui molestie. Suspendisse ac nulla in mi dignissim ornare id quis est. Morbi ut condimentum lorem, eu porta mi. Proin lacinia ac neque ultricies dictum. Mauris placerat ornare bibendum. Fusce porttitor quis ante ac consectetur. Sed finibus eu magna eu sollicitudin. Vivamus tellus tortor, tincidunt sed arcu tempus, suscipit feugiat est. Ut sit amet libero eget odio euismod tempor et nec velit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-track simplebar-horizontal"
|
||||
>
|
||||
<div
|
||||
class="simplebar-scrollbar"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="simplebar-track simplebar-vertical"
|
||||
>
|
||||
<div
|
||||
class="simplebar-scrollbar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core|Events Force re-render 1`] = `
|
||||
.emotion-0 {
|
||||
border: 0;
|
||||
@ -5117,7 +5309,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.emotion-81 {
|
||||
.emotion-82 {
|
||||
display: block;
|
||||
padding: 16px 20px;
|
||||
border-radius: 10px;
|
||||
@ -5139,7 +5331,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emotion-84 {
|
||||
.emotion-85 {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
@ -5152,6 +5344,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.emotion-80 .simplebar-track.simplebar-vertical {
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -5314,7 +5510,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.emotion-83 {
|
||||
.emotion-84 {
|
||||
position: fixed;
|
||||
display: block;
|
||||
bottom: 20px;
|
||||
@ -5523,7 +5719,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.emotion-81 {
|
||||
.emotion-82 {
|
||||
display: block;
|
||||
padding: 16px 20px;
|
||||
border-radius: 10px;
|
||||
@ -5545,7 +5741,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emotion-84 {
|
||||
.emotion-85 {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
@ -5558,6 +5754,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.emotion-80 .simplebar-track.simplebar-vertical {
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -5720,7 +5920,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.emotion-83 {
|
||||
.emotion-84 {
|
||||
position: fixed;
|
||||
display: block;
|
||||
bottom: 20px;
|
||||
@ -5878,9 +6078,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
}
|
||||
|
||||
<nav
|
||||
class="container emotion-84"
|
||||
class="container emotion-85"
|
||||
>
|
||||
<div
|
||||
class="emotion-80"
|
||||
data-simplebar="true"
|
||||
>
|
||||
<div
|
||||
@ -6335,13 +6536,13 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-83"
|
||||
class="emotion-84"
|
||||
>
|
||||
<div
|
||||
class="emotion-78"
|
||||
>
|
||||
<div
|
||||
class="emotion-81"
|
||||
class="emotion-82"
|
||||
>
|
||||
<div
|
||||
class="emotion-79"
|
||||
@ -6367,7 +6568,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.emotion-52 {
|
||||
.emotion-53 {
|
||||
display: block;
|
||||
padding: 16px 20px;
|
||||
border-radius: 10px;
|
||||
@ -6389,7 +6590,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emotion-55 {
|
||||
.emotion-56 {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
@ -6402,6 +6603,10 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.emotion-51 .simplebar-track.simplebar-vertical {
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -6871,7 +7076,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.emotion-54 {
|
||||
.emotion-55 {
|
||||
position: fixed;
|
||||
display: block;
|
||||
bottom: 20px;
|
||||
@ -6896,7 +7101,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.emotion-52 {
|
||||
.emotion-53 {
|
||||
display: block;
|
||||
padding: 16px 20px;
|
||||
border-radius: 10px;
|
||||
@ -6918,7 +7123,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emotion-55 {
|
||||
.emotion-56 {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
@ -6931,6 +7136,10 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.emotion-51 .simplebar-track.simplebar-vertical {
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -7400,7 +7609,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.emotion-54 {
|
||||
.emotion-55 {
|
||||
position: fixed;
|
||||
display: block;
|
||||
bottom: 20px;
|
||||
@ -7414,9 +7623,10 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
}
|
||||
|
||||
<nav
|
||||
class="container emotion-55"
|
||||
class="container emotion-56"
|
||||
>
|
||||
<div
|
||||
class="emotion-51"
|
||||
data-simplebar="true"
|
||||
>
|
||||
<div
|
||||
@ -7749,13 +7959,13 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-54"
|
||||
class="emotion-55"
|
||||
>
|
||||
<div
|
||||
class="emotion-49"
|
||||
>
|
||||
<div
|
||||
class="emotion-52"
|
||||
class="emotion-53"
|
||||
>
|
||||
<div
|
||||
class="emotion-31"
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { Children } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import SimpleBar from 'simplebar-react';
|
||||
import { ScrollArea } from '../ScrollArea/ScrollArea';
|
||||
|
||||
const Side = styled.div(
|
||||
{
|
||||
@ -63,11 +63,11 @@ export const FlexBar = ({ children, ...rest }) => {
|
||||
return (
|
||||
<Bar {...rest} title="bar">
|
||||
{/* TODO:
|
||||
- Fix vertical scrollbar showing
|
||||
- Add SimpleBar CSS to globalReset styles
|
||||
- Ensure SimpleBar CSS is accessible inside the SB iframe via .storybook/config.js
|
||||
- Fix vertical scrollbar when we only want to see the horizontal bar
|
||||
- Likely caused because we're appending toolbar icons after the initial load
|
||||
- https://github.com/Grsmto/simplebar#notifying-the-plugin-of-content-changes
|
||||
*/}
|
||||
<SimpleBar>
|
||||
<ScrollArea>
|
||||
<BarInner>
|
||||
<Side left title="side left">
|
||||
{left}
|
||||
@ -78,7 +78,7 @@ export const FlexBar = ({ children, ...rest }) => {
|
||||
</Side>
|
||||
) : null}
|
||||
</BarInner>
|
||||
</SimpleBar>
|
||||
</ScrollArea>
|
||||
</Bar>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled, Global } from '@storybook/theming';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import SimpleBar from 'simplebar-react';
|
||||
import { getSimpleBarStyles } from './SidebarSimpleBarStyles';
|
||||
import { ScrollArea } from '@storybook/components';
|
||||
|
||||
import NotificationList, { NotificationListSpacer } from './NotificationList';
|
||||
import SidebarHeading from './SidebarHeading';
|
||||
@ -43,17 +42,22 @@ export const Notifications = styled.div({
|
||||
zIndex: 2,
|
||||
});
|
||||
|
||||
const CustomScrollArea = styled(ScrollArea)({
|
||||
'.simplebar-track.simplebar-vertical': {
|
||||
right: '4px',
|
||||
},
|
||||
});
|
||||
|
||||
const Sidebar = ({ storyId, notifications = [], stories, menu, menuHighlighted, loading }) => (
|
||||
<Container className="container">
|
||||
<Global styles={getSimpleBarStyles} />
|
||||
<SimpleBar>
|
||||
<CustomScrollArea>
|
||||
<Heading menuHighlighted={menuHighlighted} menu={menu} />
|
||||
<Stories stories={stories} storyId={storyId} loading={loading} />
|
||||
|
||||
<Foot>
|
||||
<NotificationListSpacer notifications={notifications} />
|
||||
</Foot>
|
||||
</SimpleBar>
|
||||
</CustomScrollArea>
|
||||
|
||||
<Notifications>
|
||||
<NotificationList notifications={notifications} />
|
||||
|
||||
@ -1,192 +0,0 @@
|
||||
// manually import CSS instead of using "import 'simplebar/dist/simplebar.css';"
|
||||
// customize scrollbar here
|
||||
import { css } from '@storybook/theming';
|
||||
|
||||
// export const simplebarStyles = css`
|
||||
export const getSimpleBarStyles = theme => css`
|
||||
[data-simplebar] {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
max-width: inherit;
|
||||
max-height: inherit;
|
||||
}
|
||||
|
||||
.simplebar-wrapper {
|
||||
overflow: hidden;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
max-width: inherit;
|
||||
max-height: inherit;
|
||||
}
|
||||
|
||||
.simplebar-mask {
|
||||
direction: inherit;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.simplebar-offset {
|
||||
direction: inherit !important;
|
||||
box-sizing: inherit !important;
|
||||
resize: none !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.simplebar-content {
|
||||
direction: inherit;
|
||||
box-sizing: border-box !important;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
|
||||
width: auto;
|
||||
visibility: visible;
|
||||
overflow: scroll; /* Scroll on this element otherwise element can't have a padding applied properly */
|
||||
max-width: 100%; /* Not required for horizontal scroll to trigger */
|
||||
max-height: 100%; /* Needed for vertical scroll to trigger */
|
||||
}
|
||||
|
||||
.simplebar-placeholder {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.simplebar-height-auto-observer-wrapper {
|
||||
box-sizing: inherit !important;
|
||||
height: 100%;
|
||||
width: inherit;
|
||||
max-width: 1px;
|
||||
position: relative;
|
||||
float: left;
|
||||
max-height: 1px;
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
flex-grow: inherit;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.simplebar-height-auto-observer {
|
||||
box-sizing: inherit;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 1000%;
|
||||
width: 1000%;
|
||||
min-height: 1px;
|
||||
min-width: 1px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.simplebar-track {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
width: 6px;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: ${theme.base === 'light' ? theme.color.darkest : theme.color.lightest};
|
||||
border-radius: 6px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
||||
.simplebar-track .simplebar-scrollbar.simplebar-visible:before {
|
||||
/* When hovered, remove all transitions from drag handle */
|
||||
opacity: 0.2;
|
||||
transition: opacity 0s linear;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-vertical {
|
||||
top: 0;
|
||||
width: 10px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal {
|
||||
left: 0;
|
||||
height: 10px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
|
||||
height: 100%;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
|
||||
right: auto;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
height: 6px;
|
||||
min-height: 0;
|
||||
min-width: 10px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Rtl support */
|
||||
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hs-dummy-scrollbar-size {
|
||||
direction: rtl;
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
`;
|
||||
Loading…
x
Reference in New Issue
Block a user