| @@ -0,0 +1,13 @@ | |||
| @import 'layout/header'; | |||
| @import 'layout/header-minimal'; | |||
| @import 'layout/footer'; | |||
| @import 'component/card'; | |||
| @import 'component/cms-block'; | |||
| @import 'component/cms-element'; | |||
| @import 'component/filter-multi-select'; | |||
| @import 'component/product-box'; | |||
| @import 'component/forms'; | |||
| @import 'page/content/breadcrumb'; | |||
| @import 'page/checkout/register'; | |||
| @import 'page/checkout/cart'; | |||
| @import 'page/product-detail/product-detail'; | |||
| @@ -0,0 +1,195 @@ | |||
| .card-title:not(.cart-table-header) { | |||
| font-size: 22px; | |||
| line-height: 24px; | |||
| color: #222; | |||
| font-weight: 500; | |||
| border: none; | |||
| } | |||
| .cart-table-header { | |||
| color: #222; | |||
| } | |||
| .card-actions { | |||
| .btn { | |||
| font-size: 16px; | |||
| line-height: 18px; | |||
| color: $sw-color-brand-primary; | |||
| border: 2px solid $sw-color-brand-primary; | |||
| text-transform: uppercase; | |||
| letter-spacing: 1px; | |||
| padding: 14px 30px; | |||
| &:hover { | |||
| background-color: $sw-color-brand-primary; | |||
| color: #fff; | |||
| } | |||
| } | |||
| } | |||
| .cart-item-img { | |||
| border: none; | |||
| padding: 0; | |||
| object-fit: cover; | |||
| } | |||
| .cart-item-remove { | |||
| .btn { | |||
| background-color: transparent; | |||
| border: none; | |||
| transform: translateY(-8px); | |||
| .icon { | |||
| width: 21px; | |||
| height: 21px; | |||
| svg { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .cart-offcanvas { | |||
| .offcanvas-close { | |||
| min-height: 54px; | |||
| background: #E9F4FC; | |||
| border-color: #E9F4FC; | |||
| color: $sw-color-brand-primary; | |||
| font-size: 16px; | |||
| font-weight: 600; | |||
| letter-spacing: 1.6px; | |||
| line-height: 18px; | |||
| text-transform: uppercase; | |||
| .icon { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| .offcanvas-cart-header { | |||
| font-size: 44px; | |||
| font-weight: bold; | |||
| letter-spacing: 0; | |||
| line-height: 44px; | |||
| font-weight: normal; | |||
| .offcanvas-cart-header-count { | |||
| color: #222222; | |||
| font-family: $sw-font-family-base; | |||
| font-size: 15px; | |||
| letter-spacing: 0; | |||
| line-height: 20px; | |||
| font-weight: normal; | |||
| } | |||
| } | |||
| .offcanvas-cart-items { | |||
| .spwn-customized-products { | |||
| margin-bottom: 20px; | |||
| display: flex; | |||
| grid-gap: 15px; | |||
| padding: 14px 18px 1px; | |||
| border-radius: 3px; | |||
| background: rgba(#86B04B, 0.15); | |||
| color: #86B04B; | |||
| .icon { | |||
| min-width: 22px; | |||
| align-self: auto; | |||
| color: #86B04B; | |||
| } | |||
| } | |||
| .cart-item { | |||
| &.is-discountable-item { | |||
| border-radius: 3px; | |||
| background-color: #E9F4FC; | |||
| } | |||
| .cart-item-img { | |||
| border: none; | |||
| } | |||
| .cart-item-remove { | |||
| .btn-light { | |||
| border: none; | |||
| background: transparent; | |||
| transform: translateY(6px); | |||
| .icon { | |||
| width: 24px; | |||
| height: 24px; | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .spwn-add-customized-products { | |||
| .spwn-add-customized-products-detail { | |||
| position: relative; | |||
| margin: 55px 20px 0; | |||
| padding: 16px 21px; | |||
| border: 2px solid $sw-color-brand-primary; | |||
| border-radius: 3px; | |||
| font-size: 16px; | |||
| font-weight: 500; | |||
| letter-spacing: 1.6px; | |||
| line-height: 18px; | |||
| text-align: center; | |||
| text-transform: uppercase; | |||
| color: $sw-color-brand-primary; | |||
| display: block; | |||
| &:hover { | |||
| text-decoration: none; | |||
| background-color: $sw-color-brand-primary; | |||
| color: #fff; | |||
| } | |||
| &:before { | |||
| position: absolute; | |||
| top: -55px; | |||
| left: 50%; | |||
| transform: translateX(-50%); | |||
| content: ''; | |||
| display: inline-block; | |||
| width: 50px; | |||
| height: 50px; | |||
| background: linear-gradient($sw-color-brand-primary 0 0), linear-gradient($sw-color-brand-primary 0 0); | |||
| background-position: center; | |||
| background-size: 50% 2px, 2px 50%; | |||
| background-repeat: no-repeat; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .offcanvas-cart-actions { | |||
| .js-offcanvas-cart-promotion { | |||
| .form-control { | |||
| padding-left: 0; | |||
| border-bottom: 2px solid $sw-color-brand-primary; | |||
| } | |||
| .btn { | |||
| background: transparent; | |||
| border: none; | |||
| border-bottom: 2px solid $sw-color-brand-primary; | |||
| padding-right: 0; | |||
| .icon { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| } | |||
| .btn-primary { | |||
| margin-top: 36px; | |||
| background: transparent; | |||
| color: $sw-color-brand-primary; | |||
| font-size: 16px; | |||
| font-weight: 600; | |||
| letter-spacing: 1px; | |||
| line-height: 18px; | |||
| text-align: center; | |||
| text-transform: uppercase; | |||
| border: 2px solid $sw-color-brand-primary; | |||
| padding: 12px 12px; | |||
| &:hover { | |||
| background: $sw-color-brand-primary; | |||
| color: #fff; | |||
| } | |||
| } | |||
| .btn-link { | |||
| margin-top: 20px; | |||
| font-size: 16px; | |||
| font-weight: 600; | |||
| letter-spacing: 1.6px; | |||
| line-height: 18px; | |||
| text-transform: uppercase; | |||
| } | |||
| } | |||
| } | |||
| @@ -0,0 +1,46 @@ | |||
| .aku-cms-factory-element { | |||
| height: 100%; | |||
| font-size: 18px; | |||
| line-height: 24px; | |||
| .hero-icons { | |||
| display: flex; | |||
| justify-content: center; | |||
| grid-gap: 50px; | |||
| .dicon { | |||
| width: 100%; | |||
| max-width: 120px; | |||
| text-align: center; | |||
| .icon-title { | |||
| position: relative; | |||
| display: inline-block; | |||
| border: 2px solid #222; | |||
| padding: 10px 12px; | |||
| text-align: center; | |||
| &:before { | |||
| content: ''; | |||
| position: absolute; | |||
| width: 0; | |||
| height: 0; | |||
| border-left: 10px solid transparent; | |||
| border-right: 10px solid transparent; | |||
| border-top: 10px solid #222; | |||
| border-bottom: 10px solid transparent; | |||
| right: 11%; | |||
| bottom: -21px; | |||
| } | |||
| &:after { | |||
| content: ""; | |||
| width: 0px; | |||
| height: 0px; | |||
| position: absolute; | |||
| border-left: 10px solid transparent; | |||
| border-right: 10px solid transparent; | |||
| border-top: 10px solid #fff; | |||
| border-bottom: 10px solid transparent; | |||
| right: 11%; | |||
| bottom: -18px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @@ -0,0 +1,76 @@ | |||
| .cms-element-product-listing-actions { | |||
| .custom-select { | |||
| border-bottom-color: $sw-color-brand-primary; | |||
| border-bottom-width: 2px; | |||
| font-size: 18px; | |||
| } | |||
| } | |||
| .cms-element-product-listing { | |||
| .textbox { | |||
| background-color: #E9F4FC; | |||
| border-radius: 3px; | |||
| padding-top: 40px; | |||
| padding-left: 40px; | |||
| padding-right: 15%; | |||
| padding-bottom: 40px; | |||
| height: 100%; | |||
| h2 { | |||
| margin-bottom: 24px; | |||
| } | |||
| a.btn { | |||
| margin: 20px 0; | |||
| } | |||
| } | |||
| } | |||
| .cms-element-title-paragraph { | |||
| font-size: 44px; | |||
| font-weight: bold; | |||
| letter-spacing: 0; | |||
| line-height: 44px; | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| .cms-element-text { | |||
| font-size: 18px; | |||
| line-height: 24px; | |||
| h2 { | |||
| font-size: 60px; | |||
| line-height: 54px; | |||
| } | |||
| } | |||
| .cms-block.bildlink .cms-element-image { | |||
| .cms-image-link { | |||
| position: relative; | |||
| &:after { | |||
| position: absolute; | |||
| bottom: 20%; | |||
| left: 50%; | |||
| z-index: 999; | |||
| transform: translateX(-50%); | |||
| display: inline-block; | |||
| content: 'alle ansehen'; | |||
| text-align: center; | |||
| font-size: .9375rem; | |||
| line-height: 34px; | |||
| letter-spacing: 1px; | |||
| text-transform: uppercase; | |||
| padding: 5px 32px; | |||
| font-weight: 600; | |||
| background: $sw-color-brand-primary; | |||
| color: #fff; | |||
| border: 2px solid $sw-color-brand-primary; | |||
| border-radius: 3px; | |||
| transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; | |||
| } | |||
| &:hover { | |||
| &:after { | |||
| background: #E9F4FC; | |||
| border-color: #E9F4FC; | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @@ -0,0 +1,24 @@ | |||
| .filter-panel-items-container { | |||
| display: block; | |||
| } | |||
| .filter-panel-item { | |||
| margin-right: 0; | |||
| } | |||
| .filter-multi-select-list { | |||
| display: flex; | |||
| justify-content: center; | |||
| } | |||
| .filter-multi-select-list-item { | |||
| background-color: transparent; | |||
| border-bottom: none; | |||
| &:hover { | |||
| background-color: transparent; | |||
| } | |||
| } | |||
| .filter-multi-select-item-label { | |||
| color: #222; | |||
| } | |||
| @@ -0,0 +1,48 @@ | |||
| .form-control, | |||
| .custom-select { | |||
| border-bottom: 2px solid $sw-color-brand-primary; | |||
| padding-left: 0; | |||
| } | |||
| .form-text { | |||
| &.privacy-notice { | |||
| strong { | |||
| display: block; | |||
| font-size: 22px; | |||
| line-height: 24px; | |||
| font-weight: 500; | |||
| } | |||
| } | |||
| } | |||
| .js-label-floating label { | |||
| font-size: 18px; | |||
| left: calc(0rem + ( 10px / 2)); | |||
| } | |||
| .js-floated label { | |||
| font-size: 10px; | |||
| } | |||
| .custom-control-label { | |||
| &:before { | |||
| top: 0; | |||
| width: 18px; | |||
| height: 18px; | |||
| border: 2px solid $sw-color-brand-primary; | |||
| border-radius: 3px; | |||
| } | |||
| &:after { | |||
| top: 0; | |||
| width: 18px; | |||
| height: 18px; | |||
| } | |||
| a { | |||
| color: #222; | |||
| text-decoration: underline; | |||
| &:hover { | |||
| color: $sw-color-brand-primary; | |||
| text-decoration: none; | |||
| } | |||
| } | |||
| } | |||
| @@ -0,0 +1,47 @@ | |||
| .product-box { | |||
| &.highlight { | |||
| background-color: #E9F4FC; | |||
| } | |||
| .brandLogo { | |||
| max-width: 60px; | |||
| margin: 8px 0 0 0; | |||
| } | |||
| .product-name { | |||
| font-size: 18px; | |||
| line-height: 20px; | |||
| height: auto; | |||
| overflow: visible; | |||
| } | |||
| .product-info { | |||
| min-height: 110px; | |||
| } | |||
| .product-price-info { | |||
| position: absolute; | |||
| width: 100%; | |||
| bottom: 16px; | |||
| margin: 0; | |||
| line-height: 16px; | |||
| .product-price-wrapper { | |||
| font-size: 15px; | |||
| .product-price { | |||
| color: $sw-color-brand-primary; | |||
| font-size: 18px; | |||
| } | |||
| } | |||
| } | |||
| .product-description { | |||
| height: auto; | |||
| } | |||
| .product-price-unit, | |||
| .product-cheapest-price { | |||
| display: none; | |||
| } | |||
| } | |||
| .cms-block.easyfit { | |||
| .product-box { | |||
| .product-info { | |||
| min-height: 135px; | |||
| } | |||
| } | |||
| } | |||
| @@ -0,0 +1,99 @@ | |||
| #collapseFooterCustom { | |||
| 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; | |||
| } | |||
| } | |||
| .footer-hotline-column { | |||
| .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-column-headline { | |||
| margin-bottom: 0; | |||
| &:before { | |||
| display: none; | |||
| } | |||
| } | |||
| .footer-link-item { | |||
| a { | |||
| &:after { | |||
| top: 75%; | |||
| } | |||
| } | |||
| } | |||
| @media (min-width: 768px) { | |||
| .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; | |||
| } | |||
| } | |||
| svg { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| @@ -0,0 +1,29 @@ | |||
| @media (min-width: 768px) { | |||
| .header-minimal-contact { | |||
| span { | |||
| display: block; | |||
| margin-bottom: 12px; | |||
| } | |||
| strong { | |||
| font-size: 22px; | |||
| line-height: 24px; | |||
| font-weight: 500; | |||
| margin-right: 15px; | |||
| } | |||
| } | |||
| } | |||
| .header-minimal-back-to-shop { | |||
| .icon { | |||
| display: none; | |||
| } | |||
| .btn { | |||
| font-size: 16px; | |||
| text-transform: uppercase; | |||
| letter-spacing: 1.6px; | |||
| color: $sw-color-brand-primary; | |||
| &:hover { | |||
| background: transparent; | |||
| } | |||
| } | |||
| } | |||
| @@ -0,0 +1,107 @@ | |||
| .top-bar-country { | |||
| transform: translateY(4px); | |||
| .top-bar-nav-btn.btn { | |||
| color: #222; | |||
| &:hover { | |||
| background: transparent; | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| } | |||
| .header-row { | |||
| padding-top: 10px; | |||
| border-bottom: 1px solid #B1C3D9; | |||
| } | |||
| .header-main { | |||
| .header-actions-btn { | |||
| &:hover { | |||
| background: transparent; | |||
| } | |||
| } | |||
| .header-cart-btn { | |||
| .header-cart-total { | |||
| margin-right: 0; | |||
| } | |||
| &:hover { | |||
| background: transparent; | |||
| } | |||
| } | |||
| } | |||
| .header-actions-col { | |||
| @media (min-width: 992px) { | |||
| position: absolute; | |||
| top: 0; | |||
| right: 0; | |||
| z-index: 10; | |||
| } | |||
| } | |||
| .header-nav-col { | |||
| max-width: 950px; | |||
| margin-top: 45px; | |||
| margin-left: auto; | |||
| } | |||
| .header-single-line { | |||
| .navigation-flyout { | |||
| top: 36px; | |||
| &.is-open { | |||
| @media (min-width: 992px) { | |||
| padding-top: 0; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .nav-header > .container { | |||
| padding-left: 0; | |||
| padding-right: 0; | |||
| } | |||
| .main-navigation-menu { | |||
| justify-content: space-between; | |||
| } | |||
| .main-navigation-divider { | |||
| display: none; | |||
| } | |||
| .main-navigation-link { | |||
| font-size: 16px; | |||
| font-weight: 500; | |||
| letter-spacing: 1.6px; | |||
| line-height: 18px; | |||
| text-transform: uppercase; | |||
| padding: 0; | |||
| .main-navigation-link-text { | |||
| &:after { | |||
| height: 3px; | |||
| left: 0; | |||
| right: 0; | |||
| bottom: -18px; | |||
| } | |||
| } | |||
| &.active { | |||
| .main-navigation-link-text { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| } | |||
| .navigation-offcanvas-actions { | |||
| .top-bar-country { | |||
| z-index: 10; | |||
| } | |||
| } | |||
| .navigation-offcanvas-link { | |||
| &.is-home-link, | |||
| &.is-current-category { | |||
| background: #f3f4f5; | |||
| color: #222; | |||
| } | |||
| } | |||
| @@ -5,4 +5,77 @@ This file is used to override default SCSS variables from the Shopware Storefron | |||
| Because of the !default flags, theme variable overrides have to be declared beforehand. | |||
| https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults | |||
| */ | |||
| */ | |||
| html { | |||
| scroll-behavior: smooth; | |||
| } | |||
| body { | |||
| background: #fff; | |||
| } | |||
| h1 { | |||
| line-height: 54px !important; | |||
| } | |||
| .cms-block { | |||
| .category { | |||
| font-size: 16px; | |||
| font-weight: 500; | |||
| letter-spacing: 1.6px; | |||
| line-height: 18px; | |||
| text-transform: uppercase; | |||
| ; | |||
| } | |||
| } | |||
| .sv-vbadge-vb3fx { | |||
| z-index: 999 !important; | |||
| } | |||
| .product-image.is-standard { | |||
| object-fit: cover !important; | |||
| font-family: "object-fit: cover;" !important; | |||
| } | |||
| .btn-outline-primary { | |||
| border: 2px solid #33548C !important; | |||
| border-radius: 3px; | |||
| font-size: 16px; | |||
| font-weight: 600; | |||
| letter-spacing: 1px; | |||
| text-transform: uppercase; | |||
| padding: 5px 32px !important; | |||
| } | |||
| input.custom-number[type=number] { | |||
| border-bottom: 2px solid $sw-color-brand-primary; | |||
| } | |||
| .product-wishlist .icon-wishlist svg { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| @media (min-width: 992px) { | |||
| .is-act-confirmpage { | |||
| .checkout { | |||
| .checkout-main { | |||
| margin-left: 0 !important; | |||
| flex: 0 0 100% !important; | |||
| max-width: 100% !important; | |||
| } | |||
| .checkout-additional { | |||
| margin-left: 0 !important; | |||
| flex: 0 0 66.6666666667% !important; | |||
| max-width: 66.6666666667% !important; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @media (min-width: 576px) { | |||
| .modal-dialog { | |||
| max-width: 800px !important; | |||
| } | |||
| } | |||
| @@ -0,0 +1,124 @@ | |||
| .is-act-cartpage { | |||
| .checkout { | |||
| .spwn-add-customized-products { | |||
| width: 100%; | |||
| .spwn-add-customized-products-detail { | |||
| position: relative; | |||
| margin: 55px 20px 0; | |||
| padding: 26px 21px; | |||
| border: 2px solid $sw-color-brand-primary; | |||
| border-radius: 3px; | |||
| font-size: 16px; | |||
| font-weight: 500; | |||
| letter-spacing: 1.6px; | |||
| line-height: 18px; | |||
| text-align: center; | |||
| text-transform: uppercase; | |||
| color: $sw-color-brand-primary; | |||
| display: block; | |||
| span { | |||
| display: block; | |||
| max-width: 415px; | |||
| margin: 0 auto; | |||
| } | |||
| &:hover { | |||
| text-decoration: none; | |||
| background-color: $sw-color-brand-primary; | |||
| color: #fff; | |||
| } | |||
| &:before { | |||
| position: absolute; | |||
| top: -55px; | |||
| left: 50%; | |||
| transform: translateX(-50%); | |||
| content: ''; | |||
| display: inline-block; | |||
| width: 50px; | |||
| height: 50px; | |||
| background: linear-gradient($sw-color-brand-primary 0 0), linear-gradient($sw-color-brand-primary 0 0); | |||
| background-position: center; | |||
| background-size: 50% 2px, 2px 50%; | |||
| background-repeat: no-repeat; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .checkout-aside-container { | |||
| background-color: #E9F4FC; | |||
| padding-top: 1rem; | |||
| padding-bottom: 2rem; | |||
| a[data-toggle="modal"] { | |||
| color: #222; | |||
| text-decoration: underline; | |||
| &:hover { | |||
| text-decoration: none; | |||
| } | |||
| } | |||
| .checkout-aside-summary-label { | |||
| span { | |||
| display: block; | |||
| color: #71819C; | |||
| } | |||
| } | |||
| .checkout-aside-summary-total { | |||
| border-top: 1px solid #B1C3D9; | |||
| } | |||
| dd.checkout-aside-summary-total { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| .checkout-aside-action { | |||
| padding-left: 1rem; | |||
| padding-right: 1rem; | |||
| .cart-add-promotion { | |||
| padding-left: 0; | |||
| border-bottom: 2px solid $sw-color-brand-primary; | |||
| .form-control { | |||
| font-size: 18px; | |||
| padding-left: 0; | |||
| &::-webkit-input-placeholder { | |||
| color: #222; | |||
| } | |||
| } | |||
| } | |||
| .btn { | |||
| background: transparent; | |||
| border: none; | |||
| padding-right: 0; | |||
| .icon { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| } | |||
| .btn-primary { | |||
| margin-top: 36px; | |||
| background: transparent; | |||
| color: $sw-color-brand-primary; | |||
| font-size: 16px; | |||
| font-weight: 600; | |||
| letter-spacing: 1px; | |||
| line-height: 18px; | |||
| text-align: center; | |||
| text-transform: uppercase; | |||
| border: 2px solid $sw-color-brand-primary; | |||
| padding: 12px 12px; | |||
| &:hover { | |||
| background: $sw-color-brand-primary; | |||
| color: #fff; | |||
| } | |||
| } | |||
| } | |||
| .checkout-aside-item-image { | |||
| padding-left: 0; | |||
| padding-right: 0; | |||
| max-width: 62px; | |||
| } | |||
| } | |||
| @media (min-width: 1260px) { | |||
| .is-act-checkoutregisterpage .checkout .checkout-aside { | |||
| margin-left: 0; | |||
| flex: 0 0 33.3333333333%; | |||
| max-width: 33.3333333333%; | |||
| } | |||
| } | |||
| @@ -0,0 +1,17 @@ | |||
| .register-login-collapse-toogle { | |||
| margin: 15px 0 50px; | |||
| svg { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| a { | |||
| font-size: 15px; | |||
| color: #222; | |||
| strong { | |||
| font-weight: 400; | |||
| } | |||
| } | |||
| } | |||
| .register-address { | |||
| margin-top: 3rem; | |||
| } | |||
| @@ -0,0 +1,13 @@ | |||
| .breadcrumb-wrap { | |||
| a { | |||
| &.is-active { | |||
| font-weight: 700; | |||
| border-bottom: 0; | |||
| } | |||
| } | |||
| .breadcrumb-placeholder { | |||
| svg { | |||
| color: #222; | |||
| } | |||
| } | |||
| } | |||
| @@ -0,0 +1,110 @@ | |||
| .is-ctl-product { | |||
| .product-detail-media { | |||
| padding-right: 40px; | |||
| .gallery-slider-image { | |||
| width: 100%; | |||
| } | |||
| .aku-cms-factory-element { | |||
| display: flex; | |||
| position: relative; | |||
| margin-left: 100px; | |||
| .thumbnail-container { | |||
| width: 75px; | |||
| margin-right: 25px; | |||
| position: absolute; | |||
| top: 0; | |||
| margin-left: -100px; | |||
| figure { | |||
| border: 1px solid transparent; | |||
| border-radius: 3px; | |||
| padding: 9px 9px 6px 9px; | |||
| transition: border 0.2s ease-in-out; | |||
| &.active { | |||
| border-color: #b1c3d9; | |||
| } | |||
| img { | |||
| width: 55px; | |||
| margin-bottom: 4px; | |||
| } | |||
| figcaption { | |||
| font-family: $sw-font-family-base; | |||
| font-size: 15px; | |||
| line-height: 20px; | |||
| color: #222; | |||
| text-align: center; | |||
| } | |||
| } | |||
| } | |||
| .product-info { | |||
| width: 100%; | |||
| figure { | |||
| position: relative; | |||
| margin-top: 50px; | |||
| img { | |||
| width: 100%; | |||
| } | |||
| figcaption { | |||
| position: absolute; | |||
| left: 10px; | |||
| bottom: 10px; | |||
| background-color: #fff; | |||
| font-family: $sw-font-family-headline; | |||
| font-size: 60px; | |||
| line-height: 54px; | |||
| color: $sw-color-brand-primary; | |||
| padding: 15px 20px; | |||
| } | |||
| &:first-child { | |||
| margin-top: 0; | |||
| } | |||
| } | |||
| p { | |||
| margin-bottom: 0.5rem; | |||
| } | |||
| a[data-toggle="modal"] { | |||
| text-decoration: underline; | |||
| cursor: pointer; | |||
| &:hover { | |||
| text-decoration: none; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .product-detail-buy { | |||
| border-radius: 3px; | |||
| background-color: #E9F4FC; | |||
| padding-top: 40px; | |||
| .product-detail-name { | |||
| font-size: 60px; | |||
| line-height: 54px; | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| .product-detail-price { | |||
| color: $sw-color-brand-primary; | |||
| } | |||
| .product-detail-tax-link { | |||
| color: #222; | |||
| text-decoration: underline; | |||
| &:hover { | |||
| text-decoration: none; | |||
| } | |||
| } | |||
| .btn-primary { | |||
| background: transparent; | |||
| color: $sw-color-brand-primary; | |||
| font-size: 16px; | |||
| font-weight: 600; | |||
| letter-spacing: 1px; | |||
| line-height: 18px; | |||
| text-align: center; | |||
| text-transform: uppercase; | |||
| border: 2px solid $sw-color-brand-primary; | |||
| padding: 12px 12px; | |||
| &:hover { | |||
| background: $sw-color-brand-primary; | |||
| color: #fff; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @@ -35,7 +35,16 @@ | |||
| </span> | |||
| {% endif %} | |||
| </span> | |||
| <span>{{ product.customFields.custom_productteaser_price|trans }} € pro Tag</span> | |||
| {% set weekProductCount = 0 %} | |||
| {% if (product.customFields.custom_weightlossplan_day1_image != null) %}{% set weekProductCount = weekProductCount + 1 %}{% endif %} | |||
| {% if (product.customFields.custom_weightlossplan_day2_image != null) %}{% set weekProductCount = weekProductCount + 1 %}{% endif %} | |||
| {% if (product.customFields.custom_weightlossplan_day3_image != null) %}{% set weekProductCount = weekProductCount + 1 %}{% endif %} | |||
| {% if (product.customFields.custom_weightlossplan_day4_image != null) %}{% set weekProductCount = weekProductCount + 1 %}{% endif %} | |||
| {% if (product.customFields.custom_weightlossplan_day5_image != null) %}{% set weekProductCount = weekProductCount + 1 %}{% endif %} | |||
| {% if (product.customFields.custom_weightlossplan_day6_image != null) %}{% set weekProductCount = weekProductCount + 1 %}{% endif %} | |||
| {% if weekProductCount >= 1 %} | |||
| <span>{{ (price.unitPrice / weekProductCount) | json_encode() | round(2) | replace({'.': ','}) }} € pro Tag</span> | |||
| {% endif %} | |||
| </div> | |||
| {% if product.translated.customFields.deposittype %} | |||
| <div class="product-deposittype"> | |||