[#64040] Styles généraux pour le layout de la structure principale.

app/assets/sass/global/_default.scss

@@ -1,9 +1,220 @@
 //----------------------------------*\
-// APP DEFAULT VALUES
+// APP DEFAULT VALUES + NORMALIZE
 //----------------------------------*/
 
+::selection{
+    background:#333;
+    color:#fff;
+    text-shadow:none;
+}
+
+::-moz-selection{
+    background:#333;
+    color:#fff;
+    text-shadow:none;
+}
+
+::-webkit-selection{
+    background:#333;
+    color:#fff;
+    text-shadow:none;
+}
+
+html,
+button,
+input,
+select,
+textarea {/* color:$_color_text; */}
+
 html,
 body {
+    &.color-scheme--dark {background:$_color_dark_alpha;}
+
     height:100%;
     min-height:100%;
+}
+
+html {
+    //@include line-height($_base_font_size, $_base_line_height);
+    font-size:em($_base_font_size);
+    font-family:$_font_family_alpha;
+    -ms-text-size-adjust:100%;
+    -webkit-text-size-adjust:100%;
+}
+
+body {
+    font-size:inherit;
+    line-height:inherit;
+    margin:0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {display:block;}
+
+audio,
+canvas,
+video {display:inline-block;}
+
+audio:not([controls]) {
+    display:none;
+    height:0;
+}
+
+
+[hidden],
+template {display:none;}
+
+a {background:transparent;}
+
+a:focus {outline:thin dotted;}
+
+a:active,
+a:hover {outline:0;}
+
+h1 {
+    font-size:2em;
+    margin:0.67em 0;
+}
+
+abbr[title] {border-bottom:1px dotted;}
+
+b,
+strong {font-weight:bold;}
+
+dfn {font-style:italic;}
+
+hr {
+    -moz-box-sizing:content-box;
+    box-sizing:content-box;
+    height:0;
+}
+
+mark {
+    background:#ff0;
+    color:#000;
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family:monospace, serif;
+    font-size:1em;
+}
+
+pre {white-space:pre-wrap;}
+
+q {quotes:"\201C" "\201D" "\2018" "\2019";}
+
+small {font-size:80%;}
+
+sub,
+sup {
+    font-size:1em;
+    line-height:0;
+    position:relative;
+    vertical-align:baseline;
+}
+
+sup {top:-0.15em;}
+
+sub {bottom:-0.25em;}
+
+img {border:0;}
+
+svg:not(:root) {overflow:hidden;}
+
+figure {margin:0;}
+
+fieldset {
+    border:1px solid #c0c0c0;
+    margin:0 2px;
+    padding:0.35em 0.625em 0.75em;
+}
+
+legend {
+    border:0;
+    padding:0;
+}
+
+button,
+input,
+select,
+textarea {
+    font-family:inherit;
+    font-size:100%;
+    margin:0;
+}
+
+button,
+input {line-height:normal;}
+
+button,
+select {text-transform:none;}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance:button;
+    cursor:pointer;
+}
+
+button[disabled],
+html input[disabled] {cursor:default;}
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing:border-box;
+    padding:0;
+}
+
+input[type="search"] {
+    -webkit-appearance:textfield;
+    -moz-box-sizing:content-box;
+    -webkit-box-sizing:content-box;
+    box-sizing:content-box;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border:0;
+    padding:0;
+}
+
+textarea {
+    overflow:auto;
+    vertical-align:top;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+menu,
+nav {
+    a {text-decoration:none;}
+    
+    ol,
+    ul {
+        list-style-type:none;
+        margin:0;
+        padding:0;
+    }
+
+    li {margin:0;}
 }

app/assets/sass/global/_layout.scss

@@ -1,61 +1,84 @@
 //----------------------------------*\
 // LAYOUT MODULE
 //----------------------------------*/
-
 .layout {
-    background:yellowgreen;    
+    display:table;
+    min-height:100%;
+    width:100%;
 
     .flexbox & {
-        display:flex; 
+        display:flex;
-        min-height:100vh; 
+        min-height:100vh;
         flex-direction:column;
     }
-
-    
-
-    .no-flexbox & {
-        display:table;
-        min-height:100%;
-        width:100%;
-    }
 }
 
 .layout__container {
-    
+    //background:yellow;
+    display:table-row;
+    min-height:100%;
+
     .flexbox & {
         display:block; /* IE fix */
         display:flex;
-        flex: 1;
+        flex:1;
         flex-direction:row;
     }
-
-    .no-flexbox & {
-        display:table-row;
-        min-height:100%;
-    }
 }
 
-.layout__main {    
+.layout__main {
-    background:yellow;
+    display:table-cell;
+    //min-width:320px;
+    vertical-align:top;
+    width:100%;
 
     .flexbox & {
         display:block; /* IE fix */
         flex:1;
     }
-
-    .no-flexbox & {
-        display:table-cell;
-        vertical-align:top;
-        width:100%;
-    }
 }
 
 .layout__aside {
-    background:aquamarine;
+    //background:red;
-    width:250px;
+    display:table-cell;
+    min-height:100%;
+    min-width:320px;
+    vertical-align:top;
+    width:320px;
 
-    .no-flexbox & {
+    .flexbox & {
-        display:table-cell;
+        display:block;
-        vertical-align:top;
     }
-}
+
+    @include large-xlarge-screen {
+        min-width:250px;
+        width:250px;
+    }
+    /*  */
+    &.collapse {
+        display:none;
+        visibility:hidden;
+
+        &.in {
+            display:block;
+            visibility:visible;
+        }
+    }
+}
+
+.layout__row {
+    /* background:black; */
+    margin-bottom:1em;
+}
+
+.layout__flexrow {
+    /* background:yellow; */
+
+    /* > :nth-child(even) {background-color:aquamarine;} */
+    /* > :nth-child(odd) {background-color:pink;} */
+
+    .flexbox & {
+        display:flex;
+        flex-direction:row;
+    }
+}