55 lines
1.1 KiB
CSS
55 lines
1.1 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-inline-size: var(--sidebar-content-min-width, 50%);
|
|
}
|
|
|
|
/*
|
|
A flipped version where the sidebar is on the right
|
|
*/
|
|
.sidebar[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: 1;
|
|
}
|
|
|
|
.sidebar-reverse > :first-child {
|
|
flex-basis: 0;
|
|
flex-grow: 999;
|
|
min-inline-size: var(--sidebar-content-min-width, 50%);
|
|
}
|