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

flex table (row) design

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-05-25 20:40:05 +02:00
parent ce9070e641
commit 2f27674e05
2 changed files with 72 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
View File

@@ -68,7 +68,11 @@ div#header-accompanying_course-details {
padding-bottom: 1em;
}
/*
* FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
*/
/// 1. bloc appearance
div.flex-bloc {
display: flex;
flex-direction: row;
@@ -77,16 +81,22 @@ div.flex-bloc {
align-content: stretch;
&.right {
justify-content: flex-end;
div.item-bloc {
margin-left: 1em;
margin-right: 0;
}
}
div.item-bloc {
border: 1px solid #000;
margin: 0 1em 1em 0;
margin-bottom: 1em;
margin-right: 1em;
margin-left: 0;
padding: 1em;
padding-bottom: 0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 30%;
background-color: #e6e6e6;
display: flex;
flex-direction: column;
h5 {
@@ -114,5 +124,61 @@ div.flex-bloc {
}
@media only screen and (max-width: 768px) {
flex-direction: column;
div.item-bloc {
margin-right: 0;
}
&.right div.item-bloc {
margin-left: 0;
}
}
}
/// 2. table appearance
div.flex-table {
display: flex;
flex-direction: column;
align-items: stretch;
align-content: stretch;
div.item-bloc {
border: 1px solid #000;
border-top: 0;
&:first-child {
border-top: 1px solid #000;
}
&:nth-child(even) {
background-color: #e6e6e6;
}
padding: 1em;
display: flex;
flex-direction: row;
& > h5 {
margin-top: 0;
margin-bottom: 0.3em;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 33%;
}
& > .content-bloc {
margin: 0;
font-size: 80%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 50%;
dd {
margin: 0.67em auto;
}
}
& > ul.record_actions {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;
margin-top: auto;
margin-bottom: 0;
}
}
@media only screen and (max-width: 768px) {
div.item-bloc {
flex-direction: column;
}
}
}