Nicolas/liste-bebe-macia-capde-front
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Nico 2023-11-02 15:42:34 +01:00
commit e1362c0d36
25 changed files with 13100 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

55
assets/css/compositions/sidebar.css Normal file
View file

@ -0,0 +1,55 @@
/*
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%);
}