mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-12 21:34:25 +00:00
split sass sheets, move style cascades
This commit is contained in:
parent
81752befcf
commit
42784cf584
@ -1,9 +1,16 @@
|
||||
// Need to access bootstrap variables
|
||||
// TO CHECK: load all bootstrap in chill entrypoint ??!
|
||||
@import '~ChillMainAssets/module/bootstrap/bootstrap';
|
||||
|
||||
// Chill mixins
|
||||
@import './scss/mixins';
|
||||
|
||||
// Chill entity render box system
|
||||
@import './scss/render_box';
|
||||
|
||||
// Chill flex responsive table/block presentation
|
||||
@import './scss/flex_table';
|
||||
|
||||
/*
|
||||
* Specific rules
|
||||
*/
|
||||
@ -51,133 +58,3 @@ div.banner {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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: #e6e6e6;
|
||||
}
|
||||
|
||||
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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
// generic rules
|
||||
section.chill-entity {
|
||||
|
||||
// display inline for render raw
|
||||
// have no effect for render label, row, bloc !
|
||||
display: inline;
|
||||
|
||||
// don't break flex cascade with section tag
|
||||
div.flex-bloc & {
|
||||
display: flex;
|
||||
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
|
||||
}
|
||||
}
|
||||
@ -1,35 +1,22 @@
|
||||
@import '~ChillMainAssets/module/bootstrap/bootstrap';
|
||||
@import '~ChillMainAssets/chill/scss/mixins';
|
||||
|
||||
section.chill-entity {
|
||||
// have no effect for render label, row, bloc
|
||||
display: inline;
|
||||
|
||||
&.entity-person {
|
||||
div.entity-label {
|
||||
div.denomination {
|
||||
&.h3 {
|
||||
font-size: 1.3em;
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
span.firstname, span.lastname, span.altname {}
|
||||
span.badge {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
section.chill-entity.entity-person {
|
||||
div.entity-label {
|
||||
div.denomination {
|
||||
&.h3 {
|
||||
font-size: 1.3em;
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
span.firstname, span.lastname, span.altname {}
|
||||
span.badge {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
p.moreinfo {}
|
||||
}
|
||||
div.entity-row {}
|
||||
div.entity-bloc {}
|
||||
}
|
||||
|
||||
// don't break flex cascade with section tag
|
||||
div.flex-bloc & {
|
||||
display: flex;
|
||||
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
|
||||
p.moreinfo {}
|
||||
}
|
||||
div.entity-row {}
|
||||
div.entity-bloc {}
|
||||
}
|
||||
|
||||
|
||||
@ -1,30 +1,29 @@
|
||||
@import '~ChillMainAssets/chill/scss/mixins';
|
||||
|
||||
section.chill-entity {
|
||||
&.entity-thirdparty {
|
||||
div.entity-label {
|
||||
div.denomination {
|
||||
&.h3 {
|
||||
font-size: 1.3em;
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
span.name {}
|
||||
span.badge {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
/// render_box
|
||||
section.chill-entity.entity-thirdparty {
|
||||
div.entity-label {
|
||||
div.denomination {
|
||||
&.h3 {
|
||||
font-size: 1.3em;
|
||||
font-weight: 700;
|
||||
}
|
||||
p.moreinfo {
|
||||
span.company, span.acronym {}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
span.name {}
|
||||
span.badge {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
}
|
||||
div.entity-row {}
|
||||
div.entity-bloc {}
|
||||
p.moreinfo {
|
||||
span.company, span.acronym {}
|
||||
}
|
||||
}
|
||||
div.entity-row {}
|
||||
div.entity-bloc {}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
/* AVANT
|
||||
border: 1px solid black;
|
||||
background-color: rgba(255, 255, 255, 0.65);
|
||||
padding: 1em;
|
||||
@ -80,6 +79,3 @@ section.chill-entity {
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user