habiller-bebe/assets/css/compositions/sidebar.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%);
}