Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-30 19:43:49 +00:00
Code Issues Actions Projects Releases Wiki Activity

split sass sheets, move style cascades

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-07-28 16:33:36 +02:00
parent 81752befcf
commit 42784cf584
5 changed files with 184 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss Normal file
View File

@@ -0,0 +1,127 @@
/*
* FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
*/
div.flex-bloc,
div.flex-table {
h2, h3, h4, dl, p {
margin: 0;
}
h2, h3, h4 {
color: var(--bs-chill-blue);
}
div.item-bloc {
@include border-collapse;
}
}
/*
* Bloc appearance
*/
div.flex-bloc {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
align-content: stretch;
div.item-bloc {
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
margin: 0;
padding: 1em;
display: flex;
flex-direction: column;
div.item-row {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
flex-direction: column;
div.item-col {
&:first-child {
flex-grow: 0; flex-shrink: 0; flex-basis: auto;
}
&:last-child {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
.list-content { // ul, dl, or div
}
ul.record_actions {
margin: 0;
align-self: flex-end;
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
li {
margin-right: 5px;
}
}
}
}
}
}
}
/*
* Table appearance
*/
div.flex-table {
display: flex;
flex-direction: column;
align-items: stretch;
align-content: stretch;
div.item-bloc {
display: flex;
flex-direction: column;
padding: 1em;
&:nth-child(even) {
background-color: $gray-200;
}
div.item-row {
display: flex;
flex-direction: row;
&:not(:first-child) {
margin-top: 0.5em;
border-top: 1px dotted #0000004f;
padding-top: 0.5em;
flex-direction: column;
}
div.item-col {
&:first-child {
flex-grow: 0; flex-shrink: 0; flex-basis: 33%;
}
&:last-child {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
justify-content: flex-end;
.list-content { // ul, dl, or div
}
ul.record_actions {
margin: 0;
align-self: flex-start;
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
li {
margin-right: 5px;
}
}
}
}
@media only screen and (max-width: 900px) {
flex-direction: column;
div.item-col {
&:last-child {
ul.record_actions {
align-self: flex-end;
}
}
}
}
// neutralize
div.chill_address div.chill_address_address p { text-indent: 0; }
}
}
}