Nouveau template default2020 avec nouveau look finalisé

templates/frontOffice/default2020/assets/src/less/custom.less

@@ -1,4 +1,6 @@
 @couleur-onglets: #303C6E;
+@couleur-onglets-clair: #305587;
+
 @couleur-fond-banniere: #F29D39;
 @largeurLogo: 250px;
 @hauteur-ligne-1: 50px;
@@ -10,32 +12,28 @@
 }
 
 
-/*  Nouveau menu supérieur  */
-
-#barre-superieure {
-  display: none;
-}
-
 header {
 
+  a {
+    color: @couleur-onglets;
+  }
+
   .header {
     margin-top: 30px;
   }
-
   .header-custom {
     height: 1%;
     min-width: 100%;
     display: grid;
     grid-gap: 0.5rem;
-    grid-template-areas: "logo content" "footer footer";
     align-items: center;
     justify-items: left;
-
-    @media screen and (max-width: @screen-md-min) {
-      margin-bottom: 20px;
+    margin-bottom: 0px;
+    @media screen and (min-width: @screen-md-min) {  // Grand écran
+      grid-template-areas: "logo content" "footer footer";
     }
-    @media screen and (min-width: @screen-md-min) {
-      margin-bottom: 0px;
+    @media screen and (max-width: @screen-md-min) { // Petit écran
+      grid-template-areas: "logo" "content" "footer";
     }
   }
 
@@ -49,13 +47,34 @@ header {
   .secondary-custom {
     grid-area: content;
     height: @hauteur-ligne-2;
-    align-content: left;
+    @media screen and (max-width: @screen-md-min) { // Petit écran
+      width: 100%;
+      height: auto;
+      margin-bottom: 0px;
+      display: grid;
+
+      div.search-container {
+        padding: 0px;
+      }
+
+      > nav > ul, > nav > div {
+          width: fit-content;
+          float: left;
+          margin-right: 40px;
+      }
+    }
   }
 
+
   .primary-custom {
     grid-area: footer;
-    height: 25px;
     width: 100%;
+    @media screen and (max-width: @screen-md-min) { // Petit écran
+      z-index: 1;
+    }
+    @media screen and (min-width: @screen-md-min) { // Grand écran
+      height: 25px;
+    }
   }
 
   .row {
@@ -70,38 +89,73 @@ header {
     .container-fluid {
       background-color: @couleur-fond-banniere;
 
-      .navbar-collapse {
-        padding-left: 0;
+      @media screen and (min-width: @screen-md-min) { // Grand écran
+        .navbar-collapse {
+          padding-left: 0;
+        }
       }
     }
 
-    li {
-      margin-right: 10px;
-    }
-
     li.dropdown, li.top-tab {
       background-color: @couleur-onglets;
-      border-top-left-radius: 12px;
-      border-top-right-radius: 12px;
 
       > a {
         padding: 5px 10px;
         color: white;
       }
     }
+
+    @media screen and (max-width: @screen-md-min) { // Petit écran
+      .dropdown-custom {
+        color: white !important;
+        background-color: @couleur-onglets-clair !important;
+
+        &:hover, &:focus {
+          background-color: @couleur-fond-banniere !important;
+        }
+      }
+    }
+
+    .navbar-nav>.open>a, .navbar-nav>.open>a:hover, #navbar-primary > ul > li.top-tab > a:hover {
+      background-color: @couleur-onglets-clair;
+      @media screen and (min-width: @screen-md-min) { // Grand écran
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+      }
+    }
+
+    @media screen and (min-width: @screen-md-min) { // Grand écran
+      li { margin-right: 10px; }
+
+      li.dropdown, li.top-tab {
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+      }
+    }
+
+  }
+
+}
+
+// navbar-secondary
+#barre-superieure {
+  @media screen and (min-width: @screen-xs-min) {  // Grand écran
+    display: none;
   }
 }
 
-header a {
-  color: @couleur-onglets;
+div.secondary-custom > nav.nav-secondary {
+  @media screen and (min-width: @screen-xs-min) and (max-width: @screen-md-min) { // Petit écran
+    display: block;
+  }
 }
 
-/* navbar-secondary */
+
 .navbar li > a.login:before, .navbar li.cart-not-empty > a.cart:before {
   color: @couleur-onglets;
 }
 
-.dropdown > a:after {
+.navbar-secondary .dropdown > a:after {
   color: @couleur-onglets;
 }
 
@@ -114,11 +168,23 @@ header a {
 }
 
 .navbar li.cart-not-empty>a.cart {
-  color: @couleur-onglets;
+  background-color: @couleur-onglets !important;
+}
+
+@media screen and (max-width: @screen-md-min) {
+  // Petit écran
+  #barre-superieure button.navbar-toggle {
+    top: 88px;
+  }
+
+  .navbar-nav {
+    margin:0px;
+  }
 }
 
 // -------------------------- Fin Header ----------------
 
+
 // -------------------------- Footer --------------------
 .footer-container .footer-info {
   background-color: @couleur-fond-banniere;