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

render_box with 'bloc'

Browse Source 
use bootstrap responsive breakpoints for columns,
mixed with flex-bloc cascade for growing and vertical align blocs.
This commit is contained in:
Mathieu Jaumotte
2021-07-28 14:15:27 +02:00
parent 50e9a06e49
commit 81752befcf
8 changed files with 121 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
View File

@@ -1,13 +1,9 @@
/*
* NOTE 2021.04
* scss/chillmain.scss is the main sass file for the new chill.2
* scratch will be replaced by bootstrap, please avoid to edit in modules/scratch/_custom.scss
*
* when possible, try to use bootstrap html class
*/
// Need to access bootstrap variables
@import '~ChillMainAssets/module/bootstrap/bootstrap';
// Chill mixins
@import './scss/mixins';
/*
* Specific rules
*/
@@ -68,23 +64,13 @@ div.flex-table {
color: var(--bs-chill-blue);
}
div.item-bloc {
// We use box-shadow instead of border
// to avoid to manage border double-width
// when blocs are resized for small screen !
// Then we can simulate border-collapse: collapse (table)
box-shadow:
1px 0 0 0 var(--bs-dark),
0 1px 0 0 var(--bs-dark),
1px 1px 0 0 var(--bs-dark), /* fix the corner */
1px 0 0 0 var(--bs-dark) inset,
0 1px 0 0 var(--bs-dark) inset;
@include border-collapse;
}
}
/*
* Bloc appearance
*/
/*
div.flex-bloc {
box-sizing: border-box;
display: flex;
@@ -94,7 +80,7 @@ div.flex-bloc {
align-content: stretch;
div.item-bloc {
flex-grow: 0; flex-shrink: 1; flex-basis: 33%;
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
margin: 0;
padding: 1em;
display: flex;
@@ -127,15 +113,8 @@ div.flex-bloc {
}
}
}
@media only screen and (max-width: 945px) { margin: auto -0.2em; }
@media only screen and (max-width: 935px) { margin: auto -0.5em; }
@media only screen and (max-width: 920px) { margin: auto -0.9em; }
@media only screen and (max-width: 900px) {
flex-direction: column;
margin: auto 0;
}
}
*/
/*

14
src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss Normal file
View File

@@ -0,0 +1,14 @@
// We use box-shadow instead of border
// to avoid to manage border double-width
// Then we can simulate border-collapse: collapse (table)
@mixin border-collapse {
box-shadow:
1px 0 0 0 var(--bs-dark),
0 1px 0 0 var(--bs-dark),
1px 1px 0 0 var(--bs-dark), /* fix the corner */
1px 0 0 0 var(--bs-dark) inset,
0 1px 0 0 var(--bs-dark) inset;
}