| @@ -1,99 +1,101 @@ | |||||
| #collapseFooterCustom { | #collapseFooterCustom { | ||||
| p { | |||||
| margin-bottom: 5px; | |||||
| img { | |||||
| margin-bottom: 8px; | |||||
| p { | |||||
| margin-bottom: 5px; | |||||
| img { | |||||
| margin-bottom: 8px; | |||||
| } | |||||
| } | } | ||||
| } | |||||
| } | } | ||||
| .footer-newsletter { | .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-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 { | .footer-column-headline { | ||||
| margin-bottom: 0; | |||||
| &:before { | |||||
| display: none; | |||||
| } | |||||
| margin-bottom: 0; | |||||
| &:before { | |||||
| display: none; | |||||
| } | |||||
| } | } | ||||
| .footer-link-item { | .footer-link-item { | ||||
| a { | |||||
| &:after { | |||||
| top: 75%; | |||||
| a { | |||||
| &:after { | |||||
| top: 75%; | |||||
| } | |||||
| } | } | ||||
| } | |||||
| } | } | ||||
| .footer-stores { | |||||
| margin-top: 15px; | |||||
| ; | |||||
| } | |||||
| @media (min-width: 768px) { | @media (min-width: 768px) { | ||||
| .footer-link-item { | |||||
| padding: 0; | |||||
| } | |||||
| .footer-link-item { | |||||
| padding: 0; | |||||
| } | |||||
| } | } | ||||
| .social-icons { | .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; | background: transparent; | ||||
| } | } | ||||
| } | } | ||||
| .header-hotline-btn:hover { | |||||
| svg { | |||||
| path { | |||||
| stroke: $sw-color-brand-primary; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | } | ||||
| .header-actions-col { | .header-actions-col { | ||||
| @@ -41,6 +41,10 @@ h6 { | |||||
| font-family: $sw-font-family-base !important; | font-family: $sw-font-family-base !important; | ||||
| } | } | ||||
| .breadcrumb-container { | |||||
| display: none; | |||||
| } | |||||
| .cms-block { | .cms-block { | ||||
| .category { | .category { | ||||
| font-size: 16px; | font-size: 16px; | ||||
| @@ -1,5 +1,25 @@ | |||||
| {% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %} | {% 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 %} | {% block layout_footer_payment_shipping_logos %} | ||||
| {% endblock %} | {% endblock %} | ||||
| @@ -33,7 +33,7 @@ | |||||
| {% block layout_header_hotline %} | {% block layout_header_hotline %} | ||||
| <div class="col-auto"> | <div class="col-auto"> | ||||
| <div class="phone-icon"> | <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"> | <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="Startseite" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||
| <g id="D-DIAEKO-Startseite-z1-v7" transform="translate(-1093.000000, -16.000000)"> | <g id="D-DIAEKO-Startseite-z1-v7" transform="translate(-1093.000000, -16.000000)"> | ||||
| @@ -1,108 +1,133 @@ | |||||
| #collapseFooterCustom { | #collapseFooterCustom { | ||||
| p { | |||||
| margin-bottom: 5px; | |||||
| img { | |||||
| margin-bottom: 8px; | |||||
| p { | |||||
| margin-bottom: 5px; | |||||
| img { | |||||
| margin-bottom: 8px; | |||||
| } | |||||
| } | } | ||||
| } | |||||
| } | } | ||||
| .footer-newsletter { | .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-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 { | .footer-column-headline { | ||||
| margin-bottom: 0; | |||||
| &:before { | |||||
| display: none; | |||||
| } | |||||
| margin-bottom: 0; | |||||
| &:before { | |||||
| display: none; | |||||
| } | |||||
| } | } | ||||
| .footer-link-item { | .footer-link-item { | ||||
| a { | |||||
| &:after { | |||||
| top: 75%; | |||||
| a { | |||||
| &:after { | |||||
| top: 75%; | |||||
| } | |||||
| } | } | ||||
| } | |||||
| } | } | ||||
| @media (min-width: 768px) { | @media (min-width: 768px) { | ||||
| .footer-link-item { | |||||
| padding: 0; | |||||
| } | |||||
| .footer-link-item { | |||||
| padding: 0; | |||||
| } | |||||
| } | } | ||||
| .social-icons { | .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) { | @media (min-width: 992px) { | ||||
| .header-main .header-inner { | .header-main .header-inner { | ||||
| padding-top: 15px; | padding-top: 15px; | ||||
| padding-bottom: 25px; | |||||
| background: #fff; | background: #fff; | ||||
| border-bottom: 1px solid #ACCD93; | border-bottom: 1px solid #ACCD93; | ||||
| } | } | ||||
| @@ -31,7 +30,6 @@ | |||||
| .header-row { | .header-row { | ||||
| padding-top: 10px; | padding-top: 10px; | ||||
| padding-bottom: 15px; | |||||
| } | } | ||||
| .header-main { | .header-main { | ||||
| @@ -48,6 +46,13 @@ | |||||
| background: transparent; | background: transparent; | ||||
| } | } | ||||
| } | } | ||||
| .header-hotline-btn:hover { | |||||
| svg { | |||||
| path { | |||||
| stroke: $sw-color-brand-primary; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | } | ||||
| .header-nav-col { | .header-nav-col { | ||||
| @@ -67,6 +72,10 @@ | |||||
| } | } | ||||
| } | } | ||||
| .is-lo-full-width .container { | |||||
| max-width: 1120px; | |||||
| } | |||||
| .nav-header>.container { | .nav-header>.container { | ||||
| padding-left: 0; | padding-left: 0; | ||||
| padding-right: 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"] { | a.navigation-flyout-link[title~="Sale"] { | ||||
| font-weight: 700; | font-weight: 700; | ||||
| text-transform: uppercase; | text-transform: uppercase; | ||||
| } | } | ||||
| .navigation-flyout .container>.navigation-flyout-content:first-child { | .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) { | .navigation-flyout-categories:not(.is-level-0) { | ||||
| @@ -44,6 +44,10 @@ h6 { | |||||
| font-family: $sw-font-family-base !important; | font-family: $sw-font-family-base !important; | ||||
| } | } | ||||
| .breadcrumb-container { | |||||
| display: none; | |||||
| } | |||||
| .cms-block { | .cms-block { | ||||
| .category { | .category { | ||||
| font-size: 16px; | font-size: 16px; | ||||
| @@ -67,14 +71,14 @@ h6 { | |||||
| .btn-outline-primary { | .btn-outline-primary { | ||||
| border: 2px solid #86B04B !important; | border: 2px solid #86B04B !important; | ||||
| border-radius: 3px; | border-radius: 3px; | ||||
| font-size: 16px; | |||||
| font-size: 18px; | |||||
| font-weight: 600; | font-weight: 600; | ||||
| letter-spacing: 1px; | letter-spacing: 1px; | ||||
| text-transform: uppercase; | |||||
| padding: 5px 32px !important; | padding: 5px 32px !important; | ||||
| } | } | ||||
| .aku-cms-factory-element { | |||||
| .aku-cms-factory-element, | |||||
| .cms-element-text { | |||||
| .btn-outline-primary { | .btn-outline-primary { | ||||
| background-color: $sw-color-brand-primary; | background-color: $sw-color-brand-primary; | ||||
| color: #fff; | color: #fff; | ||||
| @@ -1,5 +1,25 @@ | |||||
| {% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %} | {% 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 %} | {% block layout_footer_payment_shipping_logos %} | ||||
| {% endblock %} | {% endblock %} | ||||
| @@ -33,7 +33,7 @@ | |||||
| {% block layout_header_hotline %} | {% block layout_header_hotline %} | ||||
| <div class="col-auto"> | <div class="col-auto"> | ||||
| <div class="phone-icon"> | <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"> | <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="Startseite" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||
| <g id="D-DIAEKO-Startseite-z1-v7" transform="translate(-1093.000000, -16.000000)"> | <g id="D-DIAEKO-Startseite-z1-v7" transform="translate(-1093.000000, -16.000000)"> | ||||