Abschluss Header (exklusive mobiles Design)

Beginn Überarbeitung Footer

frontend/_public/src/less/_modules/footer.less

@@ -0,0 +1,15 @@
+
+
+
+
+
+
+@media screen and (min-width: 48em) {
+  .footer-main {
+    background: @brand-footer;
+  }
+
+  .footer-main .footer--column {
+    width: 33%;
+  }
+}

frontend/_public/src/less/_modules/header.less

@@ -22,13 +22,14 @@
 
 /* Suche */
 .entry--search {
+  width: 60%!important;
   margin-top: 1.5em!important;
   background: @brand-primary!important;
   .main-search--form {
     box-shadow: none!important;
     label{
       display: inline-block;
-      width: auto;
+      width: 70px;
       padding: .5em 1em 0 0;
       float: left;
       text-transform: uppercase;
@@ -36,7 +37,7 @@
       font-size: 16px;
       color: #fff; }
     input{
-      width: 80%!important;
+      width: calc(~'100% - 140px')!important;
       float: left;
       border: none;
       border-radius: 0;
@@ -47,32 +48,12 @@
       padding-bottom: 0.2em!important;
       height: 2em!important; }
     button{
-      width: 8% !important;
+      width: 40px!important;
       float: left;
-      right: 3%!important;
+      right: 25px!important;
       i{
         color: #fff; } } } }
 
-/* Main Navigation */
-.navigation--list-wrapper {
-  padding: 0;
-  text-align: center;
-  .navigation--list{
-    width: auto;
-    display: inline-block;
-    .is--home{
-      display: none; }
-    li {
-      .navigation--link {
-        span{
-          display: block;
-          text-transform: uppercase;
-          font-weight: 700; }
-        .wbn-icon-set {
-          margin-bottom: 0.5em;
-          &:before {
-            font-size: 35px; } } } } } }
-
 /* Service Navigation */
 
 .shop--navigation {
@@ -142,7 +123,9 @@
         .info--delivery {
           font-size: 12px; } }
       &.entry--delivery {
-        margin-right: 1%; } } }
+        margin-right: 1%; }
+    &.entry--search {
+      height: auto; } } }
   .entry--delivery,
   .entry--support,
   .entry--account,
@@ -160,4 +143,65 @@
       .navigation--entry {
         height: auto; } } } }
 
+
+/* Main Navigation */
+.navigation--list-wrapper {
+  padding: 0;
+  text-align: center;
+  .navigation--list{
+    top: 5px;
+    width: auto;
+    display: inline-block;
+    .is--home{
+      display: none; }
+    li {
+      .navigation--link {
+        border-radius: 0;
+        border-color: #fff;
+        border-width: 0 1px;
+        border-style: solid;
+        span{
+          display: block;
+          text-transform: uppercase;
+          font-weight: 700; }
+        .wbn-icon-set {
+          min-height: 35px;
+          margin-bottom: 0.5em;
+          &:before {
+            font-size: 35px; } } } } } }
+
+.navigation-main {
+  .navigation--link:hover,
+  .is--active .navigation--link,
+  .is--hovered .navigation--link,
+  .is--active .navigation--link:hover {
+    background-image: linear-gradient(to bottom, #fff 0%, #fff 40%, @brand-primary 80%, @brand-primary 100%)!important;
+    font-weight: 700;
+    color: #fff } }
+
+.advanced-menu {
+  border-top: 1px solid #12428e;
+  .button-container {
+    background-color: @brand-primary!important; }
+  .menu--list {
+    width: 100%;
+    display: block!important;
+    .menu--list-item {
+      display: block;
+      float: left;
+      width: 16.6666%;
+      padding: 0 0 1em 0;
+      a {
+        display: block;
+        padding: 0.5em 1.5em;
+        .sub--nav-image {
+          width: 100%;
+          height: auto; }
+        .sub--nav-title{
+          display: block;
+          width: 100%;
+          text-align: center;
+          font-weight: 700; } } } } }
+
+
 .cssAnker {}

frontend/_public/src/less/_modules/page.less

@@ -18,7 +18,7 @@
 
 @media (min-width: 48em) {
   .header--navigation {
-    max-width: calc(~"100% - 24em");
-    margin: 0 12em;
+    min-width: 90%;
+    margin: 0 auto;
   }
 }

frontend/_public/src/less/_variables/variables.less

@@ -0,0 +1,5 @@
+/* *** COLORS ******************************************************************************************************* */
+
+@brand-footer:    #1D4788;
+@brand-payment:   #1A3764;
+

frontend/_public/src/less/all.less

@@ -1,12 +1,6 @@
 @import "_modules/page";
-//@import "_modules/account";
-//@import "_modules/cart";
-//@import "_modules/confirm";
-//@import "_modules/emotion";
-//@import "_modules/finish";
-//@import "_modules/footer";
-//@import "_modules/global";
 @import "_modules/header";
+@import "_modules/footer";
 //@import "_modules/listing";
 //@import "_modules/main-navigation";
 //@import "_modules/product-box";
@@ -16,14 +10,11 @@
 //@import "_components/offcanvas-menu";
 //@import "_components/product-slider";
 
-//@import "_mixins/background";
-//@import "_mixins/clear";
-//@import "_mixins/css_class";
-//@import "_mixins/flexbox";
 @import "_mixin/fonts";
 //@import "_mixins/functions";
 //@import "_mixins/margin";
 
+@import "_variables/variables";
 //@import "_variables/font-sizes";
 //@import "_variables/structure";
 //@import "_variables/typography";