Header finalisiert. Aufteilung optimiert.

ToDo: SubNavi mit Bildern (nur 2te Ebene)
This commit is contained in:
akarl 2020-01-21 17:45:01 +01:00
parent c6136a39c2
commit e79fcc7a52
4 changed files with 112 additions and 45 deletions

View File

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

View File

@ -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,40 +75,71 @@
font-size: 35px; } } } } } }
/* Service Navigation */
.navigation--list {
.navigation--entry {
.account--link {
text-align: center;
background: transparent;
.shop--navigation {
.navigation--list {
.navigation--entry {
height: 90px;
overflow: hidden;
padding: 0 5px;
border-color: transparent;
.account--display {
display: block;
margin: 0 0 0 10px;
.account--link {
text-align: center;
background: transparent;
padding: 0 5px;
border-color: transparent;
.account--display {
display: block;
color: #fff;
font-weight: 300;
padding: 2px 5px!important; }
.wbn-icon-set {
display: block;
height: 35px!important;
margin-bottom: 2px;
&:before {
font-size: 35px;
color: #fff; } } }
.cart--link {
text-align: center;
background: transparent;
padding: 2px 5px;
border-color: transparent;
.cart--amount {
display: block;
color: #fff;
font-weight: 300;
padding: 2px 5px!important; }
.wbn-icon-set {
display: block;
height: 35px!important;
&:before {
font-size: 35px;
color: #fff; } } }
.cds--info-block {
text-align: center;
color: #fff;
font-weight: 300;
padding: 2px 5px!important; }
.wbn-icon-set {
display: block;
height: 35px!important;
margin-bottom: 2px;
&:before {
font-size: 35px;
color: #fff; } } }
.cart--link {
text-align: center;
background: transparent;
padding: 2px 5px;
border-color: transparent;
.cart--amount {
display: block;
color: #fff;
font-weight: 300;
padding: 2px 5px!important; }
.wbn-icon-set {
display: block;
height: 35px!important;
&:before {
font-size: 35px;
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 {}

View File

@ -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");

View File

@ -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="info--delivery">
{s name="DeliveryGermanyHead" namespace="frontend/widgets/info"}{/s}
<span class="cds--info-block">
<span class="sw-icon-set icon--truck"></span>
<span class="info--delivery">
<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="info--support">
{s name="PhoneNumberSupport" namespace="frontend/widgets/info"}{/s}
<span class="cds--info-block">
<span class="sw-icon-set icon--phone"></span>
<span class="info--support">
{s name="PhoneNumberSupport" namespace="widgets/checkout/info"}{/s}
</span>
</span>
</li>
{/block}