@if not-imported("import_once_func") { @import "import_once_func"; }
@if not-imported("framework") { @import "framework"; }
.mod_iso_productlist {
$gutter-width: floor((1 / 1200) * 1000000) / 1000000 * 60;
.product_list {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-left: -#{$gutter-width * 100%};
margin-top: -#{$gutter-width * 100%};
margin-bottom: 1.5rem;
}
.product {
flex: 0;
min-width: 0;
margin-top: $gutter-width * 100%;
margin-left: $gutter-width * 100%;
flex-basis: 33.333% - ($gutter-width * 100%);
max-width: 33.333% - ($gutter-width * 100%);
@include font-size(15px,$mm:1,$tm:1);
position: relative;
padding-bottom: 35px;
@include for-tablet {
flex-basis: 50% - ($gutter-width * 100%);
max-width: 50% - ($gutter-width * 100%);
}
@include for-mobile {
flex-basis: 100% - ($gutter-width * 100%);
max-width: 100% - ($gutter-width * 100%);
}
}
.product_content {
//position: relative;
transition: all 0.75s cubic-bezier(0.5, 1, 0.89, 1);
height: 8em;
overflow: hidden;
&:not(.expanded) {
.product_content_inner {
height: 100%;
-webkit-mask-image: -webkit-gradient(linear, left 60%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0));
}
}
.expand-toggle {
cursor: pointer;
content: '';
position: absolute;
left: 0;
bottom: 0;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 123 62' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M57.548,60.943c2.509,1.409 5.581,1.409 8.09,0l54.92,-36.13c2.31,-1.41 3.18,-5.08 1.74,-7.05l-7,-15c-1.39,-2.22 -5.14,-2.78 -7.46,-1.37l-46.24,30.23l-45.67,-29.95c-2.6,-1.69 -6.36,-0.84 -7.52,0.85l-7.22,15.24c-1.45,2.25 -0.29,5.64 1.73,7.05l54.63,36.13Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 123 62' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M57.548,60.943c2.509,1.409 5.581,1.409 8.09,0l54.92,-36.13c2.31,-1.41 3.18,-5.08 1.74,-7.05l-7,-15c-1.39,-2.22 -5.14,-2.78 -7.46,-1.37l-46.24,30.23l-45.67,-29.95c-2.6,-1.69 -6.36,-0.84 -7.52,0.85l-7.22,15.24c-1.45,2.25 -0.29,5.64 1.73,7.05l54.63,36.13Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
width: 30px;
height: 15px;
background-color: $color-bg-secondary;
@include transition(all 0.25s ease);
}
&.expanded {
.expand-toggle {
@include transform(rotate(180deg));
@include transform(scaleY(-1));
}
}
}
.image_container {
margin-bottom: 1.5em;
}
.datum {
font-family: $font-family-alternate;
letter-spacing: 0.125em;
font-weight: 700;
font-size: font-size(17px);
}
.shopping_container {
margin-top: 1.5em;
display: flex;
> * {
flex: 1 0 auto;
}
.offer {
flex: 0 0 auto;
}
}
.actions {
align-self: center;
padding-left: 15px;
text-align: right;
.quantity_container {
display: inline;
vertical-align: top;
input {
width: 45px;
height: 38px;
}
}
}
.not_buyable {
margin-top: 0.25em;
span {
display: inline-block;
@include border-radius(3px);
background-color: $color-bg-tertiary;
font-family: $font-family-alternate;
letter-spacing: 0.125em;
font-weight: 700;
font-size: font-size(12px);
color: $color-bg-primary;
padding: 4px 5px 2px;
text-transform: uppercase;
}
}
button {
&.add_to_cart {
background-color: $color-bg-secondary;
border-color: $color-bg-secondary;
height: 38px;
line-height: 30px;
text-align: center;
padding: 3px 5px;
position: relative;
&:hover {
background-color: mix(#fff,$color-bg-secondary,20%);
border-color: mix(#fff,$color-bg-secondary,20%);
}
svg.cart-image {
height: 30px;
fill: white;
}
svg.plus {
fill: #fff;
position: absolute;
top: 1px;
right: 1px;
height: 10px;
width: 10px;
}
}
}
.price {
font-family: $font-family-alternate;
letter-spacing: 0.125em;
font-weight: 700;
font-size: font-size(17px);
color: $color-bg-secondary;
&:after {
content: 'Preis pro Person';
font-family: $font-family;
font-size: font-size(15px);
font-weight: 700;
letter-spacing: normal;
color: $color-text;
margin-left: 0.5ex;
}
}
h3 {
font-size: font-size(17px);
}
.registration_info {
margin-top: 1.5em;
}
}
.mod_iso_cumulativefilter {
position: relative;
z-index: 1;
margin-bottom: 40px;
.clearall {
position: relative;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
font-size: font-size(14px);
line-height: 1.5;
font-weight: 700;
vertical-align: baseline;
cursor: pointer;
@include text-overflow-ellipsis;
color: $color-bg-secondary;
border-bottom: 1px $color-bg-secondary solid;
@include transition(all 0.25s);
&:hover {
color: $color-bg-primary;
border-bottom-color: $color-bg-primary;
}
/*&:before {
@include transition(all 0.25s);
display: block;
content: '';
width: 1.25em;
height: 1.25em;
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23000000" viewBox="0 0 32 32"%3E%3Cpath d="M6.393 26.806l10.192-10.192c0.327-0.327 0.327-0.859 0-1.186s-0.859-0.327-1.186 0l-10.192 10.192c-0.327 0.327-0.327 0.859 0 1.186s0.859 0.327 1.186 0z"%3E%3C/path%3E%3Cpath d="M5.165 6.38l10.235 10.235c0.327 0.327 0.859 0.327 1.186 0s0.327-0.859 0-1.186l-10.235-10.235c-0.327-0.327-0.859-0.327-1.186 0s-0.327 0.859 0 1.186z"%3E%3C/path%3E%3Cpath d="M25.607 26.806l-10.192-10.192c-0.327-0.327-0.327-0.859 0-1.186s0.859-0.327 1.186 0l10.192 10.192c0.327 0.327 0.327 0.859 0 1.186s-0.859 0.327-1.186 0z"%3E%3C/path%3E%3Cpath d="M26.835 6.38l-10.235 10.235c-0.327 0.327-0.859 0.327-1.186 0s-0.327-0.859 0-1.186l10.235-10.235c0.327-0.327 0.859-0.327 1.186 0s0.327 0.859 0 1.186z"%3E%3C/path%3E%3C/svg%3E');
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23000000" viewBox="0 0 32 32"%3E%3Cpath d="M6.393 26.806l10.192-10.192c0.327-0.327 0.327-0.859 0-1.186s-0.859-0.327-1.186 0l-10.192 10.192c-0.327 0.327-0.327 0.859 0 1.186s0.859 0.327 1.186 0z"%3E%3C/path%3E%3Cpath d="M5.165 6.38l10.235 10.235c0.327 0.327 0.859 0.327 1.186 0s0.327-0.859 0-1.186l-10.235-10.235c-0.327-0.327-0.859-0.327-1.186 0s-0.327 0.859 0 1.186z"%3E%3C/path%3E%3Cpath d="M25.607 26.806l-10.192-10.192c-0.327-0.327-0.327-0.859 0-1.186s0.859-0.327 1.186 0l10.192 10.192c0.327 0.327 0.327 0.859 0 1.186s-0.859 0.327-1.186 0z"%3E%3C/path%3E%3Cpath d="M26.835 6.38l-10.235 10.235c-0.327 0.327-0.859 0.327-1.186 0s-0.327-0.859 0-1.186l10.235-10.235c0.327-0.327 0.859-0.327 1.186 0s0.327 0.859 0 1.186z"%3E%3C/path%3E%3C/svg%3E');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
position: absolute;
right: 10px;
top: 50%;
@include transform(translate(0,-50%));
background-color: $color-bg-primary;
}
&:hover {
&:before {
@include transform(translate(0,-50%) scale(1.25,1.25));
}
}*/
}
ul {
margin: 0;
}
> .level_1 {
z-index: 1;
height: 2.5em;
opacity: 1;
visibility: visible;
margin-bottom: 1.25em;
@include for-tablet {
min-height: 2.5em;
height: auto;
}
/*height: 0;
opacity: 0;
visibility: hidden;*/
font-weight: 700;
font-size: font-size(14px);
letter-spacing: 0.125em;
text-transform: uppercase;
font-family: $font-family-alternate;
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
> li {
background-color: $color-bg-secondary;
@include border-radius(3px);
color: $color-text-invert;flex: 0 0 auto;
@include transition(all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94));
text-align: left;
position: relative;
padding: 0 15px;
margin: 0 15px;
width: 200px;
max-width: 100%;
height: 100%;
.label {
display: block;
padding-right: 1.43em;
position: relative;
line-height: 2.5em;
@include transition(all 0.25s);
&:after {
content: '';
width: .8em;
height: 1.12em;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 123 175' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M57.548,1.057c2.509,-1.409 5.581,-1.409 8.09,-0l54.92,36.13c2.31,1.41 3.18,5.08 1.74,7.05l-7,15c-1.39,2.22 -5.14,2.78 -7.46,1.37l-46.24,-30.23l-45.67,29.95c-2.6,1.69 -6.36,0.84 -7.52,-0.85l-7.22,-15.24c-1.45,-2.25 -0.29,-5.64 1.73,-7.05l54.63,-36.13Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M57.548,173.908c2.509,1.409 5.581,1.409 8.09,-0l54.92,-36.13c2.31,-1.41 3.18,-5.08 1.74,-7.05l-7,-15c-1.39,-2.22 -5.14,-2.78 -7.46,-1.37l-46.24,30.23l-45.67,-29.95c-2.6,-1.69 -6.36,-0.84 -7.52,0.85l-7.22,15.24c-1.45,2.25 -0.29,5.64 1.73,7.05l54.63,36.13Z' style='fill-rule:nonzero;'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 123 175' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M57.548,1.057c2.509,-1.409 5.581,-1.409 8.09,-0l54.92,36.13c2.31,1.41 3.18,5.08 1.74,7.05l-7,15c-1.39,2.22 -5.14,2.78 -7.46,1.37l-46.24,-30.23l-45.67,29.95c-2.6,1.69 -6.36,0.84 -7.52,-0.85l-7.22,-15.24c-1.45,-2.25 -0.29,-5.64 1.73,-7.05l54.63,-36.13Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M57.548,173.908c2.509,1.409 5.581,1.409 8.09,-0l54.92,-36.13c2.31,-1.41 3.18,-5.08 1.74,-7.05l-7,-15c-1.39,-2.22 -5.14,-2.78 -7.46,-1.37l-46.24,30.23l-45.67,-29.95c-2.6,-1.69 -6.36,-0.84 -7.52,0.85l-7.22,15.24c-1.45,2.25 -0.29,5.64 1.73,7.05l54.63,36.13Z' style='fill-rule:nonzero;'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
//width: 40px;
//height: 20px;
background-color: $color-white;
position: absolute;
right: 0;
top: 50%;
@include transform(translate(0,-50%));
pointer-events: none;
@include transition(all 0.25s);
}
}
&,
.label {
cursor: pointer;
}
&.trail {
color: $color-nav-hover;
background-color: mix($color-bg-secondary,#fff,60%);
.label {
&:after {
background-color: $color-bg-primary;
@include transform(translate(0,-50%) rotate(90deg));
}
}
}
&:hover { /** IE compatibility **/
background-color: mix($color-bg-secondary,#fff,60%);
.label {
color: $color-nav-hover;
&:after {
background-color: $color-bg-primary;
}
}
}
&:hover,
&:focus-within {
background-color: mix($color-bg-secondary,#fff,60%);
.label {
color: $color-nav-hover;
&:after {
background-color: $color-bg-primary;
}
}
}
&:focus-within a {
outline: none;
}
&:hover { /** IE compatibility **/
> .dropdown {
visibility: visible;
opacity: 1;
display: block;
}
}
&:hover,
&:focus-within {
> .dropdown {
visibility: visible;
opacity: 1;
display: block;
}
}
&:first-child {
margin-left: 0;
.dropdown {
left: 0;
@include transform(none);
}
}
&:last-child {
margin-right: 0;
.dropdown {
left: auto;
right: 0;
@include transform(none);
}
}
.dropdown {
@include transition(all 0.25s);
min-width: 100%;
max-width: 350px;
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
left: 50%;
@include transform(translate(-50%,0));
cursor: default;
&.-large {
width: 350px;
max-width: calc(100vw - 40px);
}
ul {
margin-top: 2px;
padding: 5px 20px;
background-color: $color-bg-secondary;
background-color: mix($color-bg-secondary,#fff,60%);
@include border-radius(3px);
li {
text-align: left;
padding: 5px 0;
&.active {
a {
color: $color-nav-hover;
&:after {
opacity: 1;
//visibility: visible;
}
}
strong {
color: $color-link-alt;
}
}
}
}
a,
strong {
@include transition(all 0.25s);
display: block;
color: $color-text-invert;
text-transform: uppercase;
font-weight: 600;
font-size: font-size(12px);
letter-spacing: 0.2em;
line-height: 1.5;
position: relative;
padding-left: 30px;
@include text-overflow-ellipsis;
&:not(strong) {
&:before,
&:after {
position: absolute;
top: 0.75em;
left: 10px;
width: 18px;
height: 18px;
content: '';
@include transform(translate(-50%, -50%));
@include border-radius(2px);
@include box-sizing(border-box);
}
&:before {
border: 1px $color-text-invert solid;
}
&:after {
@include transition(all 0.25s);
width: 10px;
height: 10px;
background-color: $color-white;
opacity: 0;
/*visibility: hidden;*/
}
}
&:hover {
color: $color-nav-hover;
&:after {
opacity: 0.7;
/*visibility: visible;*/
}
}
}
}
&.nav {
.dropdown {
max-width: none;
.list-wrapper {
margin-top: 2px;
padding: 5px 20px;
background-color: $color-bg-secondary;
@include border-radius(3px);
overflow: hidden;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
position: relative
}
ul {
margin-top: 0;
padding: 0;
background: none;
@include border-radius(unset);
> li {
width: 170px;
&:nth-child(1n+6) {
margin-left: 30px;
}
}
}
a,
strong {
padding-left: 0;
&:before,
&:after {
display: none;
}
}
}
}
}
@include for-tablet {
font-size: font-size(12px);
> li {
padding: 0 10px;
}
}
@include for-max-size(820px) {
flex-direction: column;
> li {
margin: 15px 0 0;
padding: 0 20px;
width: 100%;
text-align: left;
@include box-sizing(border-box);
> .dropdown {
height: auto;
max-height: 0;
position: relative;
left: auto;
right: auto;
bottom: auto;
top: auto;
min-width: 0;
max-width: none;
overflow-y: auto;
@include transform(none);
@include transition(all 0.25s 0.25s);
&.-large {
width: auto;
max-width: none;
}
a {
pointer-events: none;
}
}
&:hover,
&:focus-within {
> .dropdown {
height: auto;
max-height: 45em;
visibility: visible;
opacity: 1;
display: block;
a {
pointer-events: unset;
}
}
}
}
}
}
}
/**
* CART-BUTTON
*/
#cart-button {
position: fixed;
top: 33.333%;
right: 0;
margin-top: -33px;
height: 66px;
width: 66px;
z-index: 10;
a {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
display: block;
background-color: $color-bg-primary;
color: $color-bg-secondary;
text-align: center;
line-height: 66px;
//@include border-radius(60px);
/*-webkit-box-shadow: 2px 2px 10px -2px rgba(0,0,0,.7);
-moz-box-shadow: 2px 2px 10px -2px rgba(0,0,0,.7);
box-shadow: 2px 2px 10px -2px rgba(0,0,0,.7);*/
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
text-decoration: none;
&:hover {
background-color: mix($color-bg-primary,#fff,90%);
color: $color-text-invert;
.ico {
path {
fill: $color-text-invert;
}
}
}
}
.ico {
vertical-align: 0;
width: 36px;
height: 36px;
path {
@include transition(all 0.2s ease);
fill: $color-bg-secondary;
}
}
.title {
@include font-alt;
display: block;
text-align: center;
line-height: 20px;
font-size: font-size(7px);
margin-top: -20px;
}
.amount {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
font-size: font-size(12px);
background-color: $color-bg-secondary;
color: $color-text-invert;
display: block;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border-radius: 99em;
position: absolute;
left: -12px;
top: -12px;
border: $color-bg-primary 1px solid;
}
}
// Cart
#cart,
.mod_iso_checkout .orderproducts,
.mod_iso_orderdetails {
.collection {
position: relative;
margin-bottom: $gutter-default;
.product {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
//margin: 0 -#{$gutter-default/2};
padding: $gutter-default/2 0;
border-top: 1px $color-bg-secondary solid;
&.row_first {
border-top: none;
}
> * {
flex: 1;
margin: 0 $gutter-default/2;
}
.image {
flex: 0 0 75px;
text-align: center;
}
.name {
align-self: flex-start;
flex-grow: 4;
ul {
font-size: font-size(14px);
}
}
.quantity {
label {
font-size: font-size(12px);
text-align: center;
}
flex: 0 0 3em;
}
.actions {
text-align: right;
}
.remove {
vertical-align: text-bottom;
text-indent: -999em;
overflow: hidden;
width: 18px;
height: 1.5em;
display: inline-block;
color: #900;
text-align: right;
&:before {
//@include iconfont;
content: "×";
line-height: 30px;
font-size: 30px;
display: block;
}
}
}
.price {
text-align: right;
font-weight: 400;
}
.summary {
display: flex;
align-items: flex-start;
//margin: 0 -#{$gutter-default/2};
&.foot_0 {
padding-top: $gutter-default/2;
border-top: 2px $color-bg-secondary solid;
}
&.total {
padding-top: $gutter-default/2;
font-weight: 700;
}
> * {
flex: 1;
margin: 0 $gutter-default/2;
}
.col_0 {
flex: 0 0 75px;
}
.name {
flex: 4 1 3em;
margin-left: $gutter-default*1.5;
text-align: right;
}
}
}
.submit_container {
display: flex;
align-items: center;
> {
.button_update {
margin-right: auto;
}
.button_checkout,
.next {
margin-left: auto;
}
}
button {
&.button_update {
@include button;
}
&.button_checkout,
&.next {
@include button;
margin-left: auto;
border-color: $color-bg-primary;
background: $color-bg-primary;
color: $color-text-invert;
&:after {
display: none;
}
}
}
@include for-max-size(500px) {
flex-wrap: wrap;
> * {
flex-basis: 100%;
flex-shrink: 0;
margin: 20px 0 0;
button.submit {
max-width: none;
display: block;
width: 100%;
margin: 0;
}
}
}
}
@media screen and (max-width:699px)
{
.collection {
.product {
> div {
order: 6;
}
.image {
order: 1;
}
.name {
flex: 0 1 calc(100% - (6 * #{$gutter-default} / 2) - 93px);
align-self: center;
order: 2;
}
.quantity {
//margin-left: calc(75px + (3 * 1.25%));
margin-left: auto;
}
.price:not(.total) {
flex: 0 0 5.25em;
text-align: right;
}
//.quantity,
.price.total {
flex: 0 0 100%-$gutter-default;
text-align: right;
}
.actions {
order: 3;
}
}
.summary {
.col_0 {
display: none;
}
.price.total {
flex: 0 0 5.25em;
}
.remove {
display: none;
}
}
}
}
}
.mod_iso_checkout {
.steps {
margin-top: auto;
margin-bottom: 40px;
ul {
display: flex;
justify-content: space-between;
li {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
&::before {
position: absolute;
content: "";
border-bottom: 2px solid $color-bg-primary;
width: 100%;
top: 20px;
left: -50%;
z-index: 2;
}
&::after {
position: absolute;
content: "";
border-bottom: 2px solid $color-bg-primary;
width: 100%;
top: 20px;
left: 50%;
z-index: 2;
}
&:first-child {
&::before {
content: none;
}
}
&:last-child {
&::after {
content: none;
}
}
&.active {
.counter {
background: $color-bg-primary;
color: $color-text-invert;
}
}
&.passed {
.counter {
background: $color-bg-secondary;
color: $color-text-invert;
}
}
&:not(.passed):not(.active) {
.label {
color: $color-bg-tertiary;
}
}
}
.counter {
position: relative;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: $color-bg-tertiary;
color: $color-text;
margin-bottom: 6px;
}
.label {
@include font-alt;
font-size: font-size(12px);
}
}
}
.address_new .grid-holder {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;
row-gap: 1.5rem;
.widget {
margin-bottom: 0;
}
@include for-tablet {
grid-template-columns: repeat(2, 1fr);
}
@include for-mobile {
grid-template-columns: repeat(1, 1fr);
}
}
.widget-checkbox,
.widget-radio {
> fieldset {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
column-gap: 10px;
row-gap: 10px;
> span {
background-color: $color-bg-lightplatin;
padding: 1em 1em 1em 2.75em;
@include box-sizing(content-box);
}
}
input[type="radio"],
input[type="checkbox"] {
top: 1.125em;
left: 1em;
}
}
.submit_container {
margin-top: 1.5em;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
column-gap: 10px;
row-gap: 10px;
> * {
text-align: center;
&:first-child {
text-align: left;
}
&:last-child {
text-align: right;
}
}
button {
&.next {
border-color: $color-bg-primary;
background: $color-bg-primary;
color: $color-text-invert;
}
}
}
.info_containers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
column-gap: 10px;
row-gap: 10px;
align-items: stretch;
padding: 0;
margin-bottom: $gutter-default;
> * {
background-color: $color-bg-lightplatin;
display: block;
position: relative;
text-transform: none;
font-size: font-size(14px);
font-weight: 400;
padding: 15px;
}
h4 {
font-family: $font-family;
font-size: font-size(14px);
line-height: 1.3;
font-weight: 600;
text-transform: uppercase;
padding: 0;
display: block;
min-height: 2*1.3em;
}
@include for-tablet {
flex-direction: column;
> * {
margin-left: 0;
margin-top: 10px;
&:first-child {
margin-top: 0;
}
}
}
}
.edit {
margin-left: 10px;
float: right;
font-size: font-size(10px);
text-transform: uppercase;
letter-spacing: 0.1em;
color: $color-text;
font-weight: 600;
line-height: 16px;
svg {
font-size: 16px;
vertical-align: bottom;
@include transition(all 0.25s);
use {
--color1: currentColor;
--color2: currentColor;
}
}
&:hover {
svg {
color: $color-link;
use {
--color1: currentColor;
--color2: currentColor;
}
}
}
}
.orderproducts {
background-color: $color-bg-lightplatin;
position: relative;
padding: 15px;
margin-bottom: $gutter-default;
.boxed {
margin-bottom: 1.5em;
}
.edit {
line-height: 1.5*font-size(18px);
svg {
height: 1.5*font-size(18px);
}
}
.collection-header {
margin-bottom: 20px;
}
}
}
.mod_iso_orderdetails {
.info_containers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
column-gap: 10px;
row-gap: 10px;
align-items: stretch;
padding: 0;
margin-bottom: $gutter-default;
> * {
background-color: $color-bg-lightplatin;
display: block;
position: relative;
text-transform: none;
font-size: font-size(14px);
font-weight: 400;
padding: 15px;
}
h4 {
font-family: $font-family;
font-size: font-size(14px);
line-height: 1.3;
font-weight: 600;
text-transform: uppercase;
padding: 0;
display: block;
min-height: 2*1.3em;
}
@include for-tablet {
flex-direction: column;
> * {
margin-left: 0;
margin-top: 10px;
&:first-child {
margin-top: 0;
}
}
}
}
}