Fix(scss): r-engineering vol.10, migrazione header su bootstrap-italia 2

src/scss/_bootstrap-italia.scss

@@ -24,6 +24,8 @@
 @import 'bootstrap/scss/maps';
 @import 'bootstrap/scss/utilities';
 
+@import "custom/boostrap-configuration";
+
 // BS5: layout & components.
 @import 'bootstrap/scss/root';
 @import 'bootstrap/scss/reboot';

src/scss/custom/_boostrap-configuration.scss

@@ -0,0 +1,13 @@
+// ##### HEADER #####
+
+// Header Slim
+$header-slim-bg-color: $petrol;
+$header-slim-text-color: $white;
+$header-slim-brand-text-size: .875rem;
+
+// Header center
+$header-center-text-color: $gray-primary;
+$header-center-h2-size: 1.313rem;
+$header-center-h2-size-mob: 0.875rem;
+$header-center-h2-weight: 700;
+$header-center-h3-size: 1.313rem;

src/scss/custom/_custom.scss

@@ -67,13 +67,12 @@
 //@import 'design-scuole-pagine-statiche-src/src/scss/main/type';
 @import "r-engineering/main/type";
 
-// Da completare 2.3.8
+// Reverse effettuato, restano alcune cose da migrare, cmq da rivedere. v2.3.0
 //@import 'design-scuole-pagine-statiche-src/src/scss/main/header/header';
-@import "r-engineering/main/header/header";
+//@import "r-engineering/main/header/header";
 
-// Da completare 2.3.0
+// Reverse effettuato, migrato su bootstrap-italia 2. v2.3.0
 //@import 'design-scuole-pagine-statiche-src/src/scss/main/header/logo-header';
-@import "r-engineering/main/header/logo-header";
 
 //@import 'design-scuole-pagine-statiche-src/src/scss/main/header/sub-nav';
 //@import 'design-scuole-pagine-statiche-src/src/scss/main/header/dropdown';
@@ -104,18 +103,11 @@
 //@import 'design-scuole-pagine-statiche-src/src/scss/parts/social-buttons';
 // scss-docs-end r-engineering
 
-// Colori delle sezioni
-$bi-learning: $blue !default;
-$bi-services: $pink !default;
-$bi-school: $red !default;
-$bi-news: $green !default;
-
 
 h1 {@extend .fw-semibold;}
-.scuola {color: $bi-school;}
-.servizi {color: $bi-services;}
-.novita {color: $bi-news;}
-.didattica {color: $bi-learning;}
+.bd-example {
+  background-color: rgba($petrol, 0.1) !important;
+}
 
 @import "components/chip";
 

src/scss/custom/_variables.scss

@@ -42,3 +42,14 @@ $secondary:     #5c6f82 !default;
 $light:         $gray-100 !default;
 $dark:          #17324d !default;
 // scss-docs-end theme-color-variables
+
+// Colori delle sezioni
+$bi-school: $redbrown !default;
+$bi-services: $purplelight !default;
+$bi-news: $greendark !default;
+$bi-learning: $bluelectric !default;
+
+.scuola {color: $bi-school;}
+.servizi {color: $bi-services;}
+.novita {color: $bi-news;}
+.didattica {color: $bi-learning;}

src/scss/custom/layout/_header.scss

@@ -1,35 +1,83 @@
-.it-header-slim-wrapper {
-  @extend .bg-petrol;
-}
+.it-header-wrapper {
+  color: $gray-primary;
+
+  .it-header-slim-wrapper {
+    .it-header-slim-wrapper-content {
+      .navbar-brand {
+        font-weight: 700;
+      }
+    }
+  }
+
+  &.shadow {
+    box-shadow: 0 0.1rem 1.55rem rgba($black, .1) !important;
+  }
+
+  &.it-header-sticky {
+    &.is-sticky {
+      @include media-breakpoint-up(lg) {
+        .it-header-navbar-wrapper {
+          .menu-wrapper {
+            .it-brand-wrapper {
+              &.cloned-element {
+                .it-brand-text {
+                  display: block;
+                  font-size: $header-center-h2-size-mob;
+                  .it-brand-title {
+                    font-weight: $header-center-h2-weight;
+                  }
+                }
+              }
+            }
 
-.it-header-center-wrapper {
-  .it-header-center-content-wrapper {
-    .it-brand-wrapper {
+            .it-search-wrapper {
+              font-weight: 600;
+              a {
+                &.rounded-icon {
+                  background-color: transparent;
+                  &:hover {
+                    background: inherit;
+                  }
+                }
+              }
+            }
 
-      .h1 {
-        display: block;
-        color: $dark;
-        font-weight: 400 !important;
-        font-size: 1.17rem;
-        line-height: 1.29;
-        letter-spacing: 0;
-        margin: 0 0 0 25px;
-        span {
-          display: block;
-          strong {
-            font-weight: 700;
           }
         }
       }
 
-      a .icon {
-        @extend .me-0;
+      .it-header-navbar-wrapper {
+        .menu-wrapper {
+          @extend .pt-3;
+          @extend .pb-3;
+        }
       }
+
     }
   }
-}
 
-.it-header-sticky {
+  .it-header-center-wrapper {
+    .it-header-center-content-wrapper {
+      .it-brand-wrapper {
+        .it-brand-text {
+          .it-brand-title {
+            font-weight: $header-center-h2-weight;
+          }
+          .it-brand-tagline,
+          .it-brand-comune {
+            font-size: $header-center-h2-size-mob;
+          }
+
+          @include media-breakpoint-up(lg) {
+            .it-brand-tagline,
+            .it-brand-comune {
+              font-size: $header-center-h3-size;
+            }
+          }
+        }
+      }
+    }
+  }
 
   .it-header-navbar-wrapper.theme-light-desk .navbar .navbar-collapsable .navbar-nav {
     li a.nav-link {
@@ -50,35 +98,5 @@
     }
   }
 
-  &.it-header-sticky.is-sticky {
-
-    .it-brand-wrapper {
-      h1 {
-        font-size: 0.779rem;
-        color: $dark;
-        margin: 4px 0 0 0;
-      }
-    }
-
-
-    .it-header-navbar-wrapper {
-      .menu-wrapper {
-        @extend .pt-3;
-        @extend .pb-3;
-
-        .it-brand-wrapper.cloned-element a {
-          text-decoration: none;
-
-          .icon {
-            fill: $dark;
-            width: 41px;
-            height: 41px;
-            margin-right: 16px;
-            flex-shrink: 0;
-            @extend .mt-2;
-          }
-        }
-      }
-    }
-  }
 }
+

src/scss/custom/r-engineering/main/header/_header.scss

@@ -1,23 +1,12 @@
 //
 // Header
 // https://github.com/italia/design-scuole-pagine-statiche/blob/main/src/assets/css/scuole.css#L15262
+// Note: una parte di questo codice è stato migrato verso bootstrap-italia 2,
+//       quindi poi rimosso per praticità, ciò che rimane va ancora migrato,
+//       successivamente questo file verrà eliminato.
 // --------------------------------------------------
 
-.it-header-wrapper { // ex #main-header {
-  //@include clearfix;
-  color: $gray-primary;
-  //position: relative;
-  //z-index: 1;
-  //width: 100%;
-  //box-shadow: 0 0.1rem 1.55rem rgba($black, .1);
-  //&.is-sticky {
-  //  position: fixed;
-  //  top: 0;
-  //  left: 0;
-  //  z-index: 5;
-  //}
-}
-/*
+
 .header-utils {
   display: flex;
   flex-direction: row;
@@ -93,45 +82,32 @@
     }
   }
 }
-*/
-.it-header-slim-wrapper { // ec #pre-header {
-  //@include clearfix;
-  // height: 40px;
-  //padding: 0;
-  //margin: 0;
-  font-weight: 700;
-  //line-height: 40px;
-  color: #ffffff;
-  font-size: 1.1rem; // ex 0.875
-/*  a {
+
+
+#pre-header {
+
+  a {
     color: #ffffff;
-  }*/
-  //.header-utils {
-  //  .header-notification-alert {
-  //    svg {
-  //      fill: $white;
-  //    }
-  //  }
-  //  .icon-wrapper {
-  //    svg, img {
-  //      fill: $white;
-  //    }
-  //  }
-  //  .avatar-wrapper {
-  //    border: 2px solid #ffffff;
-  //  }
-  //}
-}
-.it-header-center-wrapper {
-  height: auto;
-  .it-header-center-content-wrapper > div { // ex .header-top {
-    //@include clearfix;
-    padding-top: 20px;
-    padding-bottom: 20px;
   }
+  .header-utils {
+    .header-notification-alert {
+      svg {
+        fill: $white;
+      }
+    }
+    .icon-wrapper {
+      svg, img {
+        fill: $white;
+      }
+    }
+    .avatar-wrapper {
+      border: 2px solid #ffffff;
+    }
+  }
+
 }
-/*
-.header-search {
+
+.header-search { // da considerare la migrazione di .header-search
   @include clearfix;
   margin: 0 20px 0 0;
   @include media-breakpoint-down(md) {
@@ -229,8 +205,6 @@
   }
 }
 
-
-
 .header-user-logged {
   position: relative;
   z-index: 2;
@@ -341,4 +315,3 @@
     }
   }
 }
-*/