Header finalisiert. Aufteilung optimiert.

ToDo: SubNavi mit Bildern (nur 2te Ebene)

frontend/_public/src/less/_mixin/fonts.less

@@ -1,3 +1,8 @@
+/* *** FONTS / BASICS *********************************************************************************************** */
+
+#fontsAnker {
+  color: red; }
+
 @font-face {
   font-family: 'wbn-icon';
   src:  url('../../fonts/wbn-icon.eot?ix8d2v');

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

@@ -1,8 +1,15 @@
 /* *** HEADER / BASICS ********************************************************************************************** */
 
+#headerAnker {
+  color: red; }
+
 /* Header */
 .header-main {
   background: @brand-primary;
+  .logo-main {
+    width: 20%; }
+  .shop--navigation {
+    width: 80%; }
   > div {
     background: @brand-primary; }
   .header--navigation {
@@ -15,16 +22,19 @@
 
 /* Suche */
 .entry--search {
+  margin-top: 1.5em!important;
   background: @brand-primary!important;
   .main-search--form {
+    padding-top: 1em;
     box-shadow: none!important;
     label{
-      display: block;
-      width: 10%;
-      padding: 0.7em 0.5em 0 0;
+      display: inline-block;
+      width: auto;
+      padding: .5em 1em 0 0;
       float: left;
       text-transform: uppercase;
       font-weight: 700;
+      font-size: 16px;
       color: #fff; }
     input{
       width: 80%!important;
@@ -38,8 +48,9 @@
       padding-bottom: 0.2em!important;
       height: 2em!important; }
     button{
-      width: 10%!important;
+      width: 8% !important;
       float: left;
+      right: 4%!important;
       i{
         color: #fff; } } } }
 
@@ -64,8 +75,14 @@
             font-size: 35px; } } } } } }
 
 /* Service Navigation */
+
+.shop--navigation {
   .navigation--list {
     .navigation--entry {
+      height: 90px;
+      overflow: hidden;
+      padding: 0 5px;
+      margin: 0 0 0 10px;
       .account--link {
         text-align: center;
         background: transparent;
@@ -98,6 +115,31 @@
           height: 35px!important;
           &:before {
             font-size: 35px;
-          color: #fff; } } } } }
+            color: #fff; } } }
+      .cds--info-block {
+        text-align: center;
+        color: #fff;
+        .sw-icon-set {
+          display: block;
+          height: 35px!important;
+          margin-bottom: 2px;
+          &:before {
+            font-size: 30px;
+            color: #fff; }
+          &.icon--truck {
+            transform: scaleX(-1);
+            min-height: 45px;
+            padding-top: 0;
+            margin: -10px 0 12px 0;
+            &:before {
+              font-size: 60px; } }
+          &.icon--phone {
+            transform: scaleX(-1);
+            min-height: 45px;
+            padding-top: 5px;
+          &:before {
+            font-size: 30px; } } } }
+      &.entry--delivery {
+        margin-right: 1%; } } } }
 
 .cssAnker {}

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

@@ -1,6 +1,21 @@
+/* *** PAGE / BASICS ************************************************************************************************ */
+
+#pageAnker {
+  color: red; }
+
 .container {
-  width: 100%;
-}
+  width: 100%; }
+
+.cds--block {
+  display: block; }
+.cds--bold {
+  font-weight: bold; }
+.cds--upper {
+  text-transform: uppercase; }
+.cds--justify {
+  text-align: justify; }
+
+
 @media (min-width: 48em) {
   .container {
     max-width: calc(~"100% - 24em");

widgets/checkout/info.tpl

@@ -3,15 +3,20 @@
 {* Notepad entry *}
 {block name="frontend_index_checkout_actions_notepad"}
     <li class="navigation--entry entry--delivery">
-        <span class="wbn-icon-set wbn-icon-truck"></span>
+        <span class="cds--info-block">
+            <span class="sw-icon-set icon--truck"></span>
             <span class="info--delivery">
-            {s name="DeliveryGermanyHead" namespace="frontend/widgets/info"}{/s}
+                <span class="cds--upper cds--bold cds--block cds--justify">{s name="DeliveryGermanyHead" namespace="widgets/checkout/info"}{/s}</span>
+                <span class="cds--block cds--justify">{s name="DeliveryGermanyHead2" namespace="widgets/checkout/info"}{/s}</span>
+            </span>
         </span>
     </li>
     <li class="navigation--entry entry--support">
-        <span class="wbn-icon-set wbn-icon-phone"></span>
+        <span class="cds--info-block">
+            <span class="sw-icon-set icon--phone"></span>
             <span class="info--support">
-            {s name="PhoneNumberSupport" namespace="frontend/widgets/info"}{/s}
+                {s name="PhoneNumberSupport" namespace="widgets/checkout/info"}{/s}
+            </span>
         </span>
     </li>
 {/block}