- 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
This commit is contained in:
akarl
parent
f39c8e5875
commit
a7a28b7cd0
@ -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;
|
||||
width: 28px;
|
||||
.unitize(margin-left,5);
|
||||
.unitize-width(28);
|
||||
background: url("@{baseUrlIcon}loeffel.svg") center 36px no-repeat; }
|
||||
&.wbn-messer {
|
||||
margin-left: 5px;
|
||||
width: 18px;
|
||||
.unitize(margin-left,5);
|
||||
.unitize-width(18);
|
||||
background: url("@{baseUrlIcon}messer.svg") bottom center no-repeat; }
|
||||
&.wbn-pfannenwender {
|
||||
margin-left: 40px;
|
||||
width: 48px;
|
||||
.unitize(margin-left,40);
|
||||
.unitize-width(48);
|
||||
background: url("@{baseUrlIcon}pfannenwender.svg") bottom center no-repeat; }
|
||||
&.wbn-kanne {
|
||||
margin-left: 40px;
|
||||
width: 84px;
|
||||
.unitize(margin-left,40);
|
||||
.unitize-width(84);
|
||||
background: url("@{baseUrlIcon}kanne.svg") bottom center no-repeat; }
|
||||
&.wbn-mikrowelle {
|
||||
margin-left: 40px;
|
||||
width: 142px;
|
||||
.unitize(margin-left,40);
|
||||
.unitize-width(142);
|
||||
background: url("@{baseUrlIcon}mikrowelle.svg") bottom center no-repeat; }
|
||||
&.wbn-mixer {
|
||||
margin-right: 40px;
|
||||
width: 75px;
|
||||
.unitize(margin-right,40);
|
||||
.unitize-width(75);
|
||||
background: url("@{baseUrlIcon}mixer.svg") bottom center no-repeat; }
|
||||
&.wbn-toaster {
|
||||
margin-right: 40px;
|
||||
width: 120px;
|
||||
.unitize(margin-right,40);
|
||||
.unitize-width(120);
|
||||
background: url("@{baseUrlIcon}toaster.svg") center 61px no-repeat; }
|
||||
&.wbn-wein {
|
||||
margin-right: 5px;
|
||||
width: 59px;
|
||||
.unitize(margin-right,5);
|
||||
.unitize-width(59);
|
||||
background: url("@{baseUrlIcon}wein.svg") center 53px no-repeat; }
|
||||
&.wbn-sekt {
|
||||
margin-right: 40px;
|
||||
width: 46px;
|
||||
.unitize(margin-right,40);
|
||||
.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;
|
||||
height: 150px;
|
||||
.unitize-width(800);
|
||||
.unitize-height(150);
|
||||
.first--headline {
|
||||
margin-top: 35px;
|
||||
font-size: 35px; }
|
||||
.unitize(margin-top, 35);
|
||||
.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;
|
||||
padding: 0;
|
||||
.unitize-margin(0,0,20,0);
|
||||
.unitize-padding(0);
|
||||
span {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 5px;
|
||||
.unitize-width(60);
|
||||
.unitize-height(5);
|
||||
background: #fff; } }
|
||||
.footer--phone-link {
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
&:before {
|
||||
content: 'Telefon'; } }
|
||||
.footer--mail-link {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
&:before {
|
||||
content: 'Kuvert'; } }
|
||||
.footer--address-link {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
&:before {
|
||||
content: 'Haus'; } }
|
||||
} } }
|
||||
.column--desc{
|
||||
.sw-icon-footer{
|
||||
display: inline-block;
|
||||
.unitize-height(30);
|
||||
.unitize-width(25);
|
||||
.unitize(margin-right,3);
|
||||
float: left;
|
||||
i {
|
||||
display: inline-block;
|
||||
&.icon--phone:before {
|
||||
.unitize(font-size,26);
|
||||
transform: scaleX(-1); }
|
||||
&.icon--mail:before {
|
||||
.unitize(font-size,14); }
|
||||
&.icon--house:before {
|
||||
.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; } } } } } }
|
||||
}
|
||||
@ -1,30 +1,27 @@
|
||||
/* *** PAGE / BASICS ************************************************************************************************ */
|
||||
|
||||
#pageAnker {
|
||||
color: red; }
|
||||
|
||||
.header--navigation {
|
||||
width: 100%; }
|
||||
/* *** Global ******************************************************************************************************* */
|
||||
|
||||
.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; }
|
||||
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.header--navigation {
|
||||
min-width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.cds--clearfix {
|
||||
clear: both;
|
||||
display: table;
|
||||
height: 0; }
|
||||
@ -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;
|
||||
padding: .5em 1em 0 0;
|
||||
.unitize-width(70);
|
||||
.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;
|
||||
padding-bottom: 0.2em!important;
|
||||
height: 2em!important; }
|
||||
.unitize(padding-top, 3);
|
||||
.unitize(padding-bottom, 3);
|
||||
.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;
|
||||
padding: 0 5px;
|
||||
margin: 0 0 0 10px;
|
||||
.unitize-height(90);
|
||||
.unitize-padding(0,5);
|
||||
.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;
|
||||
padding: 2px 5px!important; }
|
||||
font-weight: @font-light-weight;
|
||||
.unitize-padding(2,5); };
|
||||
.wbn-icon-set {
|
||||
display: block;
|
||||
height: 35px!important;
|
||||
margin-bottom: 3px;
|
||||
.unitize-height(35);
|
||||
.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;
|
||||
padding: 3px 5px 0 5px!important; }
|
||||
font-weight: @font-light-weight;
|
||||
.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;
|
||||
margin-bottom: 3px;
|
||||
.unitize-height(35);
|
||||
.unitize(margin-bottom,3);
|
||||
&:before {
|
||||
font-size: 30px;
|
||||
.unitize(font-size,30);
|
||||
color: #fff; }
|
||||
&.icon--truck {
|
||||
transform: scaleX(-1);
|
||||
min-height: 45px;
|
||||
padding-top: 0;
|
||||
margin: -4px 0 8px 0;
|
||||
.unitize-min-height(45);
|
||||
.unitize(padding-top,0);
|
||||
.unitize-margin(-4,0,8,0);
|
||||
&:before {
|
||||
font-size: 50px; } }
|
||||
.unitize(font-size,50); } }
|
||||
&.icon--phone {
|
||||
transform: scaleX(-1);
|
||||
min-height: 45px;
|
||||
padding-top: 8px;
|
||||
.unitize-min-height(45);
|
||||
.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;
|
||||
margin-bottom: 0.5em;
|
||||
.unitize-min-height(35);
|
||||
.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; } } } } }
|
||||
|
||||
|
||||
.cssAnker {}
|
||||
font-weight: @font-bold-weight; } } } } }
|
||||
|
||||
@ -11,3 +11,4 @@
|
||||
@baseUrlIcon : "../../img/icons/";
|
||||
@baseUrlLogo : "../../img/logos/";
|
||||
@baseUrlFonts : "../../fonts/";
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "_modules/page";
|
||||
@import "_modules/global";
|
||||
@import "_modules/header";
|
||||
@import "_modules/footer";
|
||||
//@import "_modules/listing";
|
||||
|
||||
@ -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}
|
||||
{s name="sFooterEmail"}{/s}
|
||||
{s name="sFooterAdress"}{/s}
|
||||
<span class="sw-icon-footer sw-icon-phone">
|
||||
<i class="icon--phone"></i>
|
||||
</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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user