From 42784cf584187f60773a55b2d8e425bb7f2bc6b7 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Wed, 28 Jul 2021 16:33:36 +0200 Subject: [PATCH] split sass sheets, move style cascades --- .../Resources/public/chill/chillmain.scss | 137 +----------------- .../public/chill/scss/flex_table.scss | 127 ++++++++++++++++ .../public/chill/scss/render_box.scss | 13 ++ .../public/chill/scss/render_box.scss | 45 ++---- .../Resources/public/chill/thirdparty.scss | 46 +++--- 5 files changed, 184 insertions(+), 184 deletions(-) create mode 100644 src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss create mode 100644 src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss index a42d1dae0..09f1ee84a 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss @@ -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; } - } - } -} diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss new file mode 100644 index 000000000..3e6cc1fc1 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss @@ -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; } + } + } +} diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss new file mode 100644 index 000000000..b26cfbc4a --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss @@ -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; + } +} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss index 2ea115517..a68b10c0b 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss @@ -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 {} } diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/thirdparty.scss b/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/thirdparty.scss index 67cb9a995..b744f7edc 100644 --- a/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/thirdparty.scss +++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/thirdparty.scss @@ -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 { } } */ - - } -}