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

improve flex-table logic, with accompanying period list template

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-08-01 18:38:31 +02:00
parent d34a00b2c0
commit ee819e7767
10 changed files with 180 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
View File

@@ -1,59 +1,80 @@
/*
* FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
*/
div.flex-bloc,
div.flex-table {
display: flex;
align-items: stretch;
align-content: stretch;
box-sizing: border-box;
margin: 1.5em 0;
div.item-bloc {
display: flex;
@include border-collapse;
padding: 1em;
div.item-row {
display: flex;
div.item-col:last-child {
display: flex;
}
}
}
h2, h3, h4, dl, p {
margin: 0;
}
h2, h3, h4 {
color: $blue;
}
div.item-bloc {
@include border-collapse;
ul.record_actions {
margin: 0;
li {
margin-right: 5px;
}
}
}
/*
* 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;
margin: 0;
div.item-row {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
flex-direction: column;
div.item-col {
&.separator {
margin-top: 0.5em;
border-top: 1px dotted $gray-900;
padding-top: 0.5em;
}
&:first-child {
flex-grow: 0; flex-shrink: 0; flex-basis: auto;
padding-bottom: 0.5em;
border-bottom: 1px dotted $gray-900;
margin-bottom: 0.5em;
}
&:last-child {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
ul.record_actions {
margin: 0;
align-self: flex-end;
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
margin: 0;
li {
margin-right: 5px;
}
@@ -67,53 +88,47 @@ div.flex-bloc {
/*
* 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;
.chill-user-quote {
background-color: shade-color($gray-200, 5%)
}
}
div.item-row {
display: flex;
flex-direction: row;
&:not(:first-child) {
&.separator {
margin-top: 0.5em;
border-top: 1px dotted $gray-900;
padding-top: 0.5em;
flex-direction: column;
//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;
justify-content: flex-end;
ul.record_actions {
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
align-self: flex-start;
margin: 0;
li {
margin-right: 5px;
}
}
}
}
@media only screen and (max-width: 900px) {
flex-direction: column;
div.item-col {
@@ -124,7 +139,6 @@ div.flex-table {
}
}
}
}
}
}

2
src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss
View File

@@ -1,6 +1,6 @@
//
//
// Titles in forms
//
@mixin title_in_form {