split sass sheets, move style cascades

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; }
-      }
-   }
-}

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; }
+        }
+    }
+}

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;
+    }
+}

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 {
+section.chill-entity.entity-person {
-    // have no effect for render label, row, bloc
+    div.entity-label {
-    display: inline;
+        div.denomination {
-
+            &.h3 {
-    &.entity-person {
+                font-size: 1.3em;
-        div.entity-label {
+                font-weight: 700;
-            div.denomination {
+            }
-                &.h3 {
+            a {
-                    font-size: 1.3em;
+                text-decoration: none;
-                    font-weight: 700;
+            }
-                }
+            span.firstname, span.lastname, span.altname {}
-                a {
+            span.badge {
-                    text-decoration: none;
+                margin-left: 0.3em;
-                }
-                span.firstname, span.lastname, span.altname {}
-                span.badge {
-                    margin-left: 0.3em;
-                }
             }
-            p.moreinfo {}
         }
-        div.entity-row {}
+        p.moreinfo {}
-        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;
     }
+    div.entity-row {}
+    div.entity-bloc {}
 }
 

src/Bundle/ChillThirdPartyBundle/Resources/public/chill/thirdparty.scss

@@ -1,30 +1,29 @@
-@import '~ChillMainAssets/chill/scss/mixins';
 
-section.chill-entity {
+/// render_box
-    &.entity-thirdparty {
+section.chill-entity.entity-thirdparty {
-        div.entity-label {
+    div.entity-label {
-            div.denomination {
+        div.denomination {
-                &.h3 {
+            &.h3 {
-                    font-size: 1.3em;
+                font-size: 1.3em;
-                    font-weight: 700;
+                font-weight: 700;
-                }
-                a {
-                    text-decoration: none;
-                }
-                span.name {}
-                span.badge {
-                    margin-left: 0.3em;
-                }
             }
-            p.moreinfo {
+            a {
-                span.company, span.acronym {}
+                text-decoration: none;
+            }
+            span.name {}
+            span.badge {
+                margin-left: 0.3em;
             }
         }
-        div.entity-row {}
+        p.moreinfo {
-        div.entity-bloc {}
+            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 {
             }
         }
  */
-
-    }
-}