| @@ -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. | Because of the !default flags, theme variable overrides have to be declared beforehand. | ||||
| https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults | 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> | </span> | ||||
| {% endif %} | {% endif %} | ||||
| </span> | </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> | </div> | ||||
| {% if product.translated.customFields.deposittype %} | {% if product.translated.customFields.deposittype %} | ||||
| <div class="product-deposittype"> | <div class="product-deposittype"> | ||||