56 lines
1.2 KiB
CSS
56 lines
1.2 KiB
CSS
|
/*
|
||
|
|
CUSTOM PROPERTIES AND CONFIGURATION
|
||
|
|
--gutter (var(--space-size-1)): This defines the space
|
||
|
|
between the sidebar and main content.
|
||
|
|
|
||
|
|
--sidebar-target-width (20rem): How large the sidebar should be
|
||
|
|
|
||
|
|
--sidebar-content-min-width(50%): The minimum size of the main content area
|
||
|
|
|
||
|
|
EXCEPTIONS
|
||
|
|
.sidebar[data-direction='rtl']: flips the sidebar to be on the right
|
||
|
|
*/
|
||
|
|
.sidebar {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: var(--gutter, var(--space-xs-s));
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar > :first-child {
|
||
|
|
flex-basis: var(--sidebar-target-width, 20rem);
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar > :last-child {
|
||
|
|
flex-basis: 0;
|
||
|
|
flex-grow: 999;
|
||
|
|
min-width: var(--sidebar-content-min-width, 50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
A flipped version where the sidebar is on the right
|
||
|
|
*/
|
||
|
|
.sidebar[data-direction="rtl"],
|
||
|
|
.sidebar--reverse[data-direction="rtl"] {
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* REVERSE sidebar on right*/
|
||
|
|
|
||
|
|
.sidebar--reverse {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: var(--gutter, var(--space-xs-s));
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar--reverse > :last-child {
|
||
|
|
flex-basis: var(--sidebar-target-width, 20rem);
|
||
|
|
flex-grow: var(--sidebar-target-grow, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar--reverse > :first-child {
|
||
|
|
flex-basis: 0;
|
||
|
|
flex-grow: 999;
|
||
|
|
min-width: var(--sidebar-content-min-width, 50%);
|
||
|
|
}
|