- Anpassung Footer // Kontaktspalte

- Eliminierung page.less
- Erstellung global.less und Übertrag der inidividuelle CSS-Klassen
- Überarbeitung LESS durch Verwendung der SW - Mixins
- Reduzierung der Important-Kennzeichnungen

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

@@ -3,7 +3,7 @@ footer {
   .footer-ribbon {
     display: none; } }
 
-@media screen and (min-width: 48em) {
+@media screen and (min-width: @tabletViewportWidth) {
   footer {
     .footer-ribbon {
       display: block;
@@ -15,64 +15,64 @@ footer {
         display: table; }
       .img--area {
         width: calc(~'50% - 400px');
-        height: 150px;
+        .unitize-height(150);
         .wbn--foot-img{
           display: inline-block;
           height: 100%;
           &.wbn-gabel {
-            width: 28px;
+            .unitize-width(28);
             background: url("@{baseUrlIcon}gabel.svg") bottom center no-repeat; }
           &.wbn-loeffel {
-            margin-left: 5px;
+            .unitize(margin-left,5);
-            width: 28px;
+            .unitize-width(28);
             background: url("@{baseUrlIcon}loeffel.svg") center 36px no-repeat; }
           &.wbn-messer {
-            margin-left: 5px;
+            .unitize(margin-left,5);
-            width: 18px;
+            .unitize-width(18);
             background: url("@{baseUrlIcon}messer.svg") bottom center no-repeat; }
           &.wbn-pfannenwender {
-            margin-left: 40px;
+            .unitize(margin-left,40);
-            width: 48px;
+            .unitize-width(48);
             background: url("@{baseUrlIcon}pfannenwender.svg") bottom center no-repeat; }
           &.wbn-kanne {
-            margin-left: 40px;
+            .unitize(margin-left,40);
-            width: 84px;
+            .unitize-width(84);
             background: url("@{baseUrlIcon}kanne.svg") bottom center no-repeat; }
           &.wbn-mikrowelle {
-            margin-left: 40px;
+            .unitize(margin-left,40);
-            width: 142px;
+            .unitize-width(142);
             background: url("@{baseUrlIcon}mikrowelle.svg") bottom center no-repeat; }
           &.wbn-mixer {
-            margin-right: 40px;
+            .unitize(margin-right,40);
-            width: 75px;
+            .unitize-width(75);
             background: url("@{baseUrlIcon}mixer.svg") bottom center no-repeat; }
           &.wbn-toaster {
-            margin-right: 40px;
+            .unitize(margin-right,40);
-            width: 120px;
+            .unitize-width(120);
             background: url("@{baseUrlIcon}toaster.svg") center 61px no-repeat; }
           &.wbn-wein {
-            margin-right: 5px;
+            .unitize(margin-right,5);
-            width: 59px;
+            .unitize-width(59);
             background: url("@{baseUrlIcon}wein.svg") center 53px no-repeat; }
           &.wbn-sekt {
-            margin-right: 40px;
+            .unitize(margin-right,40);
-            width: 46px;
+            .unitize-width(46);
             background: url("@{baseUrlIcon}sekt.svg") center 47px no-repeat; }
           &.wbn-tasse {
-            width: 82px;
+            .unitize-width(82);
             background: url("@{baseUrlIcon}tasse.svg") bottom center no-repeat; } } }
       .left--box,
       .right--box {
         float: left; }
       .center--box {
         float: left;
-        width: 800px;
+        .unitize-width(800);
-        height: 150px;
+        .unitize-height(150);
         .first--headline {
-          margin-top: 35px;
+          .unitize(margin-top, 35);
-          font-size: 35px; }
+          .unitize(font-size, 35); }
         .second--headline {
-          font-size: 17.8px; }
+          .unitize(font-size, 17.8); }
       }
     }
 
@@ -96,28 +96,35 @@ footer {
       .footer--column {
         width: 33%;
         .border--headline {
-          margin: 0 0 20px 0;
+          .unitize-margin(0,0,20,0);
-          padding: 0;
+          .unitize-padding(0);
           span {
             display: block;
-            width: 60px;
+            .unitize-width(60);
-            height: 5px;
+            .unitize-height(5);
             background: #fff; } }
-        .footer--phone-link {
+        .column--desc{
-          font-weight: 300;
+          .sw-icon-footer{
-          display: block;
+            display: inline-block;
-          padding-left: 30px;
+            .unitize-height(30);
-          &:before {
+            .unitize-width(25);
-            content: 'Telefon'; } }
+            .unitize(margin-right,3);
-        .footer--mail-link {
+            float: left;
-          display: block;
+            i {
-          padding-left: 30px;
+              display: inline-block;
-          &:before {
+            &.icon--phone:before {
-            content: 'Kuvert'; } }
+              .unitize(font-size,26);
-        .footer--address-link {
+              transform: scaleX(-1); }
-          display: block;
+            &.icon--mail:before {
-          padding-left: 30px;
+              .unitize(font-size,14); }
-          &:before {
+            &.icon--house:before {
-            content: 'Haus'; } }
+              .unitize(font-size,22); } } }
-      } } }
+
+          .footer--vars {
+            display: inline-block;
+            width: calc(~'100% - 28px');
+            .unitize(padding-left,30);
+            float: left;
+            .footer--phone-link {
+              font-weight: @font-light-weight; } } } } } }
 }

frontend/_public/src/less/_modules/global.less

@@ -1,30 +1,27 @@
-/* *** PAGE / BASICS ************************************************************************************************ */
+/* *** Global ******************************************************************************************************* */
-
-#pageAnker {
-  color: red; }
-
-.header--navigation {
-  width: 100%; }
 
 .cds--block {
   display: block; }
+
 .cds--bold {
   font-weight: bold; }
+
 .cds--upper {
   text-transform: uppercase; }
+
 .cds--align-justify {
   text-align: justify; }
+
 .cds--align-left {
   text-align: left; }
+
 .cds--align-right {
   text-align: right; }
+
 .cds--align-center {
   text-align: center; }
 
-
+.cds--clearfix {
-@media (min-width: 48em) {
+  clear: both;
-  .header--navigation {
+  display: table;
-    min-width: 90%;
+  height: 0; }
-    margin: 0 auto;
-  }
-}

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

@@ -13,27 +13,36 @@
   > div {
     background: @brand-primary; }
   .header--navigation {
-    min-height: 100px!important;
+    width: 100%;
+    .unitize(min-height,100);
     .logo--shop {
       a {
-        padding: 5px 0;
+        .unitize-padding(5,0);
         img {
-          min-height: 70px; } } } } }
+          .unitize(min-height,70); } } } } }
+
+@media (min-width: @tabletViewportWidth) {
+  .header--navigation {
+    min-width: 90%;
+    margin: 0 auto;
+  }
+}
+
 
 /* Suche */
 .entry--search {
   width: 60%!important;
-  margin-top: 1.5em!important;
+  .unitize(margin-top, 24);
   background: @brand-primary!important;
   .main-search--form {
     box-shadow: none!important;
     label{
       display: inline-block;
-      width: 70px;
+      .unitize-width(70);
-      padding: .5em 1em 0 0;
+      .unitize-padding(8,16,0,0);
       float: left;
       text-transform: uppercase;
-      font-weight: 700;
+      font-weight: @font-bold-weight;
       font-size: 16px;
       color: #fff; }
     input{
@@ -44,13 +53,13 @@
       box-shadow: none;
       background: #fff!important;
       margin-top: 0.4em!important;
-      padding-top: 0.2em!important;
+      .unitize(padding-top, 3);
-      padding-bottom: 0.2em!important;
+      .unitize(padding-bottom, 3);
-      height: 2em!important; }
+      .unitize-height(32); }
     button{
-      width: 40px!important;
+      .unitize-width(40);
       float: left;
-      right: 25px!important;
+      .unitize(right,25);
       i{
         color: #fff; } } } }
 
@@ -59,41 +68,41 @@
 .shop--navigation {
   .navigation--list {
     .navigation--entry {
-      height: 90px;
+      .unitize-height(90);
-      padding: 0 5px;
+      .unitize-padding(0,5);
-      margin: 0 0 0 10px;
+      .unitize-margin(0,0,0,10);
       .account--link {
         text-align: center;
         background: transparent;
-        padding: 0 5px;
+        .unitize-padding(0,5);
         border-color: transparent;
         .account--display {
           display: block;
           color: #fff;
-          font-weight: 300;
+          font-weight: @font-light-weight;
-          padding: 2px 5px!important; }
+          .unitize-padding(2,5); }; 
         .wbn-icon-set {
           display: block;
-          height: 35px!important;
+          .unitize-height(35);
-          margin-bottom: 3px;
+          .unitize(margin-bottom, 3);
           &:before {
-            font-size: 35px;
+            .unitize(font-size,35);
             color: #fff; } } }
       .cart--link {
         text-align: center;
         background: transparent;
-        padding: 2px 5px;
+        .unitize-padding(2,5);
         border-color: transparent;
         .cart--amount {
           display: block;
           color: #fff;
-          font-weight: 300;
+          font-weight: @font-light-weight;
-          padding: 3px 5px 0 5px!important; }
+          .unitize-padding(3,5,0,5); }
         .wbn-icon-set {
           display: block;
-          height: 35px!important;
+          .unitize-height(35);
           &:before {
-            font-size: 35px;
+            .unitize(font-size,35);
             color: #fff; } } }
       .cds--info-block {
         text-align: center;
@@ -102,26 +111,26 @@
           color: #fff; }
         .sw-icon-set {
           display: block;
-          height: 35px!important;
+          .unitize-height(35);
-          margin-bottom: 3px;
+          .unitize(margin-bottom,3);
           &:before {
-            font-size: 30px;
+            .unitize(font-size,30);
             color: #fff; }
           &.icon--truck {
             transform: scaleX(-1);
-            min-height: 45px;
+            .unitize-min-height(45);
-            padding-top: 0;
+            .unitize(padding-top,0);
-            margin: -4px 0 8px 0;
+            .unitize-margin(-4,0,8,0);
             &:before {
-              font-size: 50px; } }
+              .unitize(font-size,50); } }
           &.icon--phone {
             transform: scaleX(-1);
-            min-height: 45px;
+            .unitize-min-height(45);
-            padding-top: 8px;
+            .unitize(padding-top,8);
           &:before {
-            font-size: 30px; } } }
+            .unitize(font-size,30); } } }
         .info--delivery {
-          font-size: 12px; } }
+          .unitize(font-size,12); } }
       &.entry--delivery {
         margin-right: 1%; }
     &.entry--search {
@@ -163,12 +172,12 @@
         span{
           display: block;
           text-transform: uppercase;
-          font-weight: 700; }
+          font-weight: @font-bold-weight; }
         .wbn-icon-set {
-          min-height: 35px;
+          .unitize-min-height(35);
-          margin-bottom: 0.5em;
+          .unitize(margin-bottom,8);
           &:before {
-            font-size: 35px; } } } } } }
+            .unitize(font-size,35); } } } } } }
 
 .navigation-main {
   .navigation--link:hover,
@@ -176,7 +185,7 @@
   .is--hovered .navigation--link,
   .is--active .navigation--link:hover {
     background: #fff;
-    font-weight: 700;
+    font-weight: @font-bold-weight;
     color: @link-red;
     .wbn-icon-set:before {
       color: @link-red; } } }
@@ -195,7 +204,7 @@
       padding: 0 0 1em 0;
       a {
         display: block;
-        padding: 0.5em 1.5em;
+        .unitize-padding(8,24);
         .sub--nav-image {
           width: 100%;
           height: auto; }
@@ -203,7 +212,4 @@
           display: block;
           width: 100%;
           text-align: center;
-          font-weight: 700; } } } } }
+          font-weight: @font-bold-weight; } } } } }
-
-
-.cssAnker {}

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

@@ -10,4 +10,5 @@
 @baseUrlImage   : "../../img/";
 @baseUrlIcon    : "../../img/icons/";
 @baseUrlLogo    : "../../img/logos/";
-@baseUrlFonts   : "../../fonts/";
+@baseUrlFonts   : "../../fonts/";
+

frontend/_public/src/less/all.less

@@ -1,4 +1,4 @@
-@import "_modules/page";
+@import "_modules/global";
 @import "_modules/header";
 @import "_modules/footer";
 //@import "_modules/listing";

frontend/index/footer-navigation.tpl

@@ -54,9 +54,21 @@
         {block name="frontend_index_footer_column_service_hotline_content"}
             <div class="column--content">
                 <p class="column--desc">
-                    {s name="sFooterServiceHotline"}{/s}
+                    <span class="sw-icon-footer sw-icon-phone">
-                    {s name="sFooterEmail"}{/s}
+                        <i class="icon--phone"></i>
-                    {s name="sFooterAdress"}{/s}
+                    </span>
+                    <span class="footer--vars footer--phone-var">{s name="sFooterServiceHotline"}{/s}</span>
+                    <span class="cds--block cds--clearfix"></span>
+                    <span class="sw-icon-footer sw-icon-mail">
+                        <i class="icon--mail"></i>
+                    </span>
+                    <span class="footer--vars footer--mail-var">{s name="sFooterEmail"}{/s}</span>
+                    <span class="cds--block cds--clearfix"></span>
+                    <span class="sw-icon-footer sw-icon-address">
+                        <i class="icon--house"></i>
+                    </span>
+                    <span class="footer--vars footer--address-var">{s name="sFooterAdress"}{/s}</span>
+                    <span class="cds--block cds--clearfix"></span>
                 </p>
             </div>
         {/block}