| @@ -1,99 +1,101 @@ | |||
| #collapseFooterCustom { | |||
| p { | |||
| margin-bottom: 5px; | |||
| img { | |||
| margin-bottom: 8px; | |||
| p { | |||
| margin-bottom: 5px; | |||
| img { | |||
| margin-bottom: 8px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .footer-newsletter { | |||
| .newsletter-inner-text { | |||
| font-size: 18px; | |||
| line-height: 24px; | |||
| } | |||
| .footer-newsletter-column-input-email { | |||
| border-bottom: 2px solid $sw-color-brand-primary; | |||
| margin: 0 15px; | |||
| padding: 0; | |||
| } | |||
| .form-control, | |||
| .input-group-append .btn { | |||
| border: none; | |||
| } | |||
| .form-control { | |||
| padding-top: 0; | |||
| padding-left: 0; | |||
| padding-bottom: 0; | |||
| font-size: 18px; | |||
| line-height: 24px; | |||
| } | |||
| .newsletter-inner-text { | |||
| font-size: 18px; | |||
| line-height: 24px; | |||
| } | |||
| .footer-newsletter-column-input-email { | |||
| border-bottom: 2px solid $sw-color-brand-primary; | |||
| margin: 0 15px; | |||
| padding: 0; | |||
| } | |||
| .form-control, | |||
| .input-group-append .btn { | |||
| border: none; | |||
| } | |||
| .form-control { | |||
| padding-top: 0; | |||
| padding-left: 0; | |||
| padding-bottom: 0; | |||
| font-size: 18px; | |||
| line-height: 24px; | |||
| } | |||
| } | |||
| .footer-hotline-column { | |||
| .footer-contact-hotline { | |||
| margin-bottom: 8px; | |||
| a:not(.btn) { | |||
| margin-top: 16px; | |||
| margin-bottom: 0; | |||
| line-height: 15px; | |||
| .footer-contact-hotline { | |||
| margin-bottom: 8px; | |||
| a:not(.btn) { | |||
| margin-top: 16px; | |||
| margin-bottom: 0; | |||
| line-height: 15px; | |||
| } | |||
| } | |||
| } | |||
| .footer-contact-form { | |||
| margin-top: 0; | |||
| a { | |||
| color: #222; | |||
| text-decoration: underline; | |||
| &:hover { | |||
| color: #222; | |||
| text-decoration: none; | |||
| } | |||
| .footer-contact-form { | |||
| margin-top: 0; | |||
| a { | |||
| color: #222; | |||
| text-decoration: underline; | |||
| &:hover { | |||
| color: #222; | |||
| text-decoration: none; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .footer-column-headline { | |||
| margin-bottom: 0; | |||
| &:before { | |||
| display: none; | |||
| } | |||
| margin-bottom: 0; | |||
| &:before { | |||
| display: none; | |||
| } | |||
| } | |||
| .footer-link-item { | |||
| a { | |||
| &:after { | |||
| top: 75%; | |||
| a { | |||
| &:after { | |||
| top: 75%; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .footer-stores { | |||
| margin-top: 15px; | |||
| ; | |||
| } | |||
| @media (min-width: 768px) { | |||
| .footer-link-item { | |||
| padding: 0; | |||
| } | |||
| .footer-link-item { | |||
| padding: 0; | |||
| } | |||
| } | |||
| .social-icons { | |||
| display: flex; | |||
| justify-content: center; | |||
| margin-bottom: 10px; | |||
| .icon { | |||
| border: 2px solid $sw-color-brand-primary; | |||
| border-radius: 50%; | |||
| width: 40px; | |||
| height: 40px; | |||
| margin: 0 8px; | |||
| &.icon-facebook { | |||
| padding: 8px; | |||
| display: flex; | |||
| justify-content: center; | |||
| margin-bottom: 10px; | |||
| .icon { | |||
| border: 2px solid $sw-color-brand-primary; | |||
| border-radius: 50%; | |||
| width: 40px; | |||
| height: 40px; | |||
| margin: 0 8px; | |||
| &.icon-facebook { | |||
| padding: 8px; | |||
| } | |||
| &.icon-instagram { | |||
| padding: 5px; | |||
| } | |||
| } | |||
| &.icon-instagram { | |||
| padding: 5px; | |||
| svg { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| svg { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| @@ -28,6 +28,13 @@ | |||
| background: transparent; | |||
| } | |||
| } | |||
| .header-hotline-btn:hover { | |||
| svg { | |||
| path { | |||
| stroke: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .header-actions-col { | |||
| @@ -41,6 +41,10 @@ h6 { | |||
| font-family: $sw-font-family-base !important; | |||
| } | |||
| .breadcrumb-container { | |||
| display: none; | |||
| } | |||
| .cms-block { | |||
| .category { | |||
| font-size: 16px; | |||
| @@ -1,5 +1,25 @@ | |||
| {% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %} | |||
| {% block zen_layout_footer_navigation_hotline_content %} | |||
| <div id="collapseFooterHotline" | |||
| class="footer-column-content collapse js-footer-column-content {{ hotlineShowClass }}" | |||
| aria-labelledby="collapseFooterHotlineTitle"> | |||
| <div class="footer-column-content-inner"> | |||
| <p class="footer-contact-hotline"> | |||
| {{ 'footer.serviceHotline'|trans|sw_sanitize }} | |||
| </p> | |||
| </div> | |||
| <div class="footer-contact-form"> | |||
| {{ 'footer.serviceContactLink'|trans({ | |||
| '%url%': path('frontend.cms.page', { id: config('core.basicInformation.contactPage') }) | |||
| })|raw }} | |||
| </div> | |||
| <div class="footer-stores"> | |||
| {{ 'footer.serviceStore'|trans|sw_sanitize }} | |||
| </div> | |||
| </div> | |||
| {% endblock %} | |||
| {% block layout_footer_payment_shipping_logos %} | |||
| {% endblock %} | |||
| @@ -33,7 +33,7 @@ | |||
| {% block layout_header_hotline %} | |||
| <div class="col-auto"> | |||
| <div class="phone-icon"> | |||
| <a href="{{ 'header.hotline'|trans|striptags }}" title="Hotline"> | |||
| <a class="header-hotline-btn header-actions-btn" href="{{ 'header.hotline'|trans|striptags }}" aria-label="{{ 'header.hotlineLabel'|trans|striptags }}" title="{{ 'header.hotlineLabel'|trans|striptags }}"> | |||
| <svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
| <g id="Startseite" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
| <g id="D-DIAEKO-Startseite-z1-v7" transform="translate(-1093.000000, -16.000000)"> | |||
| @@ -1,108 +1,133 @@ | |||
| #collapseFooterCustom { | |||
| p { | |||
| margin-bottom: 5px; | |||
| img { | |||
| margin-bottom: 8px; | |||
| p { | |||
| margin-bottom: 5px; | |||
| img { | |||
| margin-bottom: 8px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .footer-newsletter { | |||
| .footer-logo { | |||
| max-width: 170px; | |||
| } | |||
| .newsletter-inner-text { | |||
| font-size: 18px; | |||
| line-height: 24px; | |||
| } | |||
| .footer-newsletter-column-input-email { | |||
| border-bottom: 2px solid #FFF; | |||
| margin: 0 15px; | |||
| padding: 0; | |||
| } | |||
| .form-control, | |||
| .input-group-append .btn { | |||
| border: none; | |||
| .icon { | |||
| color: #FFF; | |||
| width: 100vw; | |||
| position: relative; | |||
| left: 50%; | |||
| right: 50%; | |||
| margin-left: -50vw; | |||
| margin-right: -50vw; | |||
| .container { | |||
| padding-left: 40px; | |||
| padding-right: 40px; | |||
| @media (min-width: 768px) { | |||
| padding-left: 70px; | |||
| } | |||
| @media (min-width: 1260px) { | |||
| padding-left: 110px; | |||
| } | |||
| .footer-logo { | |||
| max-width: 170px; | |||
| } | |||
| .newsletter-inner-text { | |||
| font-size: 18px; | |||
| line-height: 24px; | |||
| max-width: 450px; | |||
| } | |||
| .footer-newsletter-column-input-email { | |||
| border-bottom: 2px solid #FFF; | |||
| margin: 0 15px; | |||
| padding: 0; | |||
| } | |||
| .form-control, | |||
| .input-group-append .btn { | |||
| border: none; | |||
| .icon { | |||
| color: #FFF; | |||
| } | |||
| } | |||
| .form-control::-webkit-input-placeholder { | |||
| color: #FFF; | |||
| } | |||
| .form-control { | |||
| padding-top: 0; | |||
| padding-left: 0; | |||
| padding-bottom: 0; | |||
| font-size: 18px; | |||
| line-height: 24px; | |||
| } | |||
| } | |||
| } | |||
| .form-control::-webkit-input-placeholder { | |||
| color: #FFF; | |||
| } | |||
| .form-control { | |||
| padding-top: 0; | |||
| padding-left: 0; | |||
| padding-bottom: 0; | |||
| font-size: 18px; | |||
| line-height: 24px; | |||
| } | |||
| } | |||
| .footer-hotline-column { | |||
| .footer-contact-hotline { | |||
| margin-bottom: 8px; | |||
| a:not(.btn) { | |||
| margin-top: 16px; | |||
| margin-bottom: 0; | |||
| line-height: 15px; | |||
| .footer-contact-hotline { | |||
| margin-bottom: 8px; | |||
| a:not(.btn) { | |||
| margin-top: 16px; | |||
| margin-bottom: 0; | |||
| line-height: 15px; | |||
| } | |||
| } | |||
| } | |||
| .footer-contact-form { | |||
| margin-top: 0; | |||
| a { | |||
| color: #222; | |||
| text-decoration: underline; | |||
| &:hover { | |||
| color: #222; | |||
| text-decoration: none; | |||
| } | |||
| .footer-contact-form { | |||
| margin-top: 0; | |||
| a { | |||
| color: #222; | |||
| text-decoration: underline; | |||
| &:hover { | |||
| color: #222; | |||
| text-decoration: none; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .footer-stores { | |||
| margin-top: 15px; | |||
| ; | |||
| } | |||
| .footer-column-headline { | |||
| margin-bottom: 0; | |||
| &:before { | |||
| display: none; | |||
| } | |||
| margin-bottom: 0; | |||
| &:before { | |||
| display: none; | |||
| } | |||
| } | |||
| .footer-link-item { | |||
| a { | |||
| &:after { | |||
| top: 75%; | |||
| a { | |||
| &:after { | |||
| top: 75%; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @media (min-width: 768px) { | |||
| .footer-link-item { | |||
| padding: 0; | |||
| } | |||
| .footer-link-item { | |||
| padding: 0; | |||
| } | |||
| } | |||
| .social-icons { | |||
| display: flex; | |||
| justify-content: center; | |||
| margin-bottom: 10px; | |||
| .icon { | |||
| border: 2px solid $sw-color-brand-primary; | |||
| border-radius: 50%; | |||
| width: 40px; | |||
| height: 40px; | |||
| margin: 0 8px; | |||
| &.icon-facebook { | |||
| padding: 8px; | |||
| } | |||
| &.icon-instagram { | |||
| padding: 5px; | |||
| display: flex; | |||
| justify-content: center; | |||
| margin-bottom: 10px; | |||
| .icon { | |||
| border: 2px solid $sw-color-brand-primary; | |||
| background-color: $sw-color-brand-primary; | |||
| border-radius: 50%; | |||
| width: 40px; | |||
| height: 40px; | |||
| margin: 0 8px; | |||
| &.icon-facebook { | |||
| padding: 8px; | |||
| } | |||
| &.icon-instagram { | |||
| padding: 5px; | |||
| } | |||
| svg { | |||
| color: #fff; | |||
| } | |||
| &:hover { | |||
| svg { | |||
| color: #222; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| svg { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| @@ -23,7 +23,6 @@ | |||
| @media (min-width: 992px) { | |||
| .header-main .header-inner { | |||
| padding-top: 15px; | |||
| padding-bottom: 25px; | |||
| background: #fff; | |||
| border-bottom: 1px solid #ACCD93; | |||
| } | |||
| @@ -31,7 +30,6 @@ | |||
| .header-row { | |||
| padding-top: 10px; | |||
| padding-bottom: 15px; | |||
| } | |||
| .header-main { | |||
| @@ -48,6 +46,13 @@ | |||
| background: transparent; | |||
| } | |||
| } | |||
| .header-hotline-btn:hover { | |||
| svg { | |||
| path { | |||
| stroke: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .header-nav-col { | |||
| @@ -67,6 +72,10 @@ | |||
| } | |||
| } | |||
| .is-lo-full-width .container { | |||
| max-width: 1120px; | |||
| } | |||
| .nav-header>.container { | |||
| padding-left: 0; | |||
| padding-right: 0; | |||
| @@ -125,14 +134,18 @@ | |||
| } | |||
| } | |||
| .navigation-flyout-categories.is-level-0 > .navigation-flyout-col { | |||
| margin-bottom: 10px; | |||
| } | |||
| a.navigation-flyout-link[title~="Sale"] { | |||
| font-weight: 700; | |||
| text-transform: uppercase; | |||
| } | |||
| .navigation-flyout .container>.navigation-flyout-content:first-child { | |||
| padding-top: 60px; | |||
| padding-bottom: 30px; | |||
| padding-top: 30px; | |||
| padding-bottom: 15px; | |||
| } | |||
| .navigation-flyout-categories:not(.is-level-0) { | |||
| @@ -44,6 +44,10 @@ h6 { | |||
| font-family: $sw-font-family-base !important; | |||
| } | |||
| .breadcrumb-container { | |||
| display: none; | |||
| } | |||
| .cms-block { | |||
| .category { | |||
| font-size: 16px; | |||
| @@ -67,14 +71,14 @@ h6 { | |||
| .btn-outline-primary { | |||
| border: 2px solid #86B04B !important; | |||
| border-radius: 3px; | |||
| font-size: 16px; | |||
| font-size: 18px; | |||
| font-weight: 600; | |||
| letter-spacing: 1px; | |||
| text-transform: uppercase; | |||
| padding: 5px 32px !important; | |||
| } | |||
| .aku-cms-factory-element { | |||
| .aku-cms-factory-element, | |||
| .cms-element-text { | |||
| .btn-outline-primary { | |||
| background-color: $sw-color-brand-primary; | |||
| color: #fff; | |||
| @@ -1,5 +1,25 @@ | |||
| {% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %} | |||
| {% block zen_layout_footer_navigation_hotline_content %} | |||
| <div id="collapseFooterHotline" | |||
| class="footer-column-content collapse js-footer-column-content {{ hotlineShowClass }}" | |||
| aria-labelledby="collapseFooterHotlineTitle"> | |||
| <div class="footer-column-content-inner"> | |||
| <p class="footer-contact-hotline"> | |||
| {{ 'footer.serviceHotline'|trans|sw_sanitize }} | |||
| </p> | |||
| </div> | |||
| <div class="footer-contact-form"> | |||
| {{ 'footer.serviceContactLink'|trans({ | |||
| '%url%': path('frontend.cms.page', { id: config('core.basicInformation.contactPage') }) | |||
| })|raw }} | |||
| </div> | |||
| <div class="footer-stores"> | |||
| {{ 'footer.serviceStore'|trans|sw_sanitize }} | |||
| </div> | |||
| </div> | |||
| {% endblock %} | |||
| {% block layout_footer_payment_shipping_logos %} | |||
| {% endblock %} | |||
| @@ -33,7 +33,7 @@ | |||
| {% block layout_header_hotline %} | |||
| <div class="col-auto"> | |||
| <div class="phone-icon"> | |||
| <a href="{{ 'header.hotline'|trans|striptags }}" title="Hotline"> | |||
| <a class="header-hotline-btn header-actions-btn" href="{{ 'header.hotline'|trans|striptags }}" aria-label="{{ 'header.hotlineLabel'|trans|striptags }}" title="{{ 'header.hotlineLabel'|trans|striptags }}"> | |||
| <svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
| <g id="Startseite" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
| <g id="D-DIAEKO-Startseite-z1-v7" transform="translate(-1093.000000, -16.000000)"> | |||