add to cart links for products in home

This commit is contained in:
2021-06-09 13:06:52 +02:00
parent d9d2180f94
commit 352223500f
25 changed files with 561 additions and 249 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,8 +1,83 @@
.overlay[data-v-b98ce164]{background-color:rgba(0,0,0,0.8);position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999}.modal[data-v-b98ce164]{background-color:#fff;position:absolute;box-sizing:border;max-width:80vw;max-height:70vh;top:0;right:0;bottom:0;left:0;margin:auto;padding:1em;border-radius:3px;box-shadow:2px 2px}
.overlay[data-v-b98ce164] {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
}
.modal[data-v-b98ce164] {
background-color: #fff;
position: absolute;
box-sizing: border;
max-width: 80vw;
max-height: 70vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 1em;
border-radius: 3px;
box-shadow: 2px 2px;
}
.form-item[data-v-7bb795f8],.form-actions[data-v-7bb795f8]{display:inline-block;max-width:32%;margin:0}input[data-v-7bb795f8]{box-sizing:border-box;max-width:100%}div.description[data-v-7bb795f8]{display:none}.form-item-persistent-login[data-v-7bb795f8]{display:none}
.form-item[data-v-7bb795f8],
.form-actions[data-v-7bb795f8] {
display: inline-block;
max-width: 32%;
margin: 0;
}
input[data-v-7bb795f8] {
box-sizing: border-box;
max-width: 100%;
}
div.description[data-v-7bb795f8] {
display: none;
}
.form-item-persistent-login[data-v-7bb795f8] {
display: none;
}
.form-type-email[data-v-2acc57a0],.form-type-password-confirm[data-v-2acc57a0]{max-width:30%;margin:0}.form-type-password input.weak[data-v-2acc57a0]{border-width:2px;border-color:red !important}.form-type-password input.weak[data-v-2acc57a0]:focus{outline:none}.form-type-password input.medium[data-v-2acc57a0]{border-width:2px;border-color:orange !important}.form-type-password input.medium[data-v-2acc57a0]:focus{outline:none}.form-type-password input.strong[data-v-2acc57a0]{border-width:2px;border-color:green !important}.form-type-password input.strong[data-v-2acc57a0]:focus{outline:none}input[data-v-2acc57a0]{box-sizing:content-box;max-width:100%}label[data-v-2acc57a0],div.description[data-v-2acc57a0]{display:none}
.form-type-email[data-v-2acc57a0],
.form-type-password-confirm[data-v-2acc57a0] {
max-width: 30%;
margin: 0;
}
.form-type-password input.weak[data-v-2acc57a0] {
border-width: 2px;
border-color: red !important;
}
.form-type-password input.weak[data-v-2acc57a0]:focus {
outline: none;
}
.form-type-password input.medium[data-v-2acc57a0] {
border-width: 2px;
border-color: orange !important;
}
.form-type-password input.medium[data-v-2acc57a0]:focus {
outline: none;
}
.form-type-password input.strong[data-v-2acc57a0] {
border-width: 2px;
border-color: green !important;
}
.form-type-password input.strong[data-v-2acc57a0]:focus {
outline: none;
}
input[data-v-2acc57a0] {
box-sizing: content-box;
max-width: 100%;
}
label[data-v-2acc57a0],
div.description[data-v-2acc57a0] {
display: none;
}
fieldset[data-v-340aa566]{padding:0;margin:0;border:none}
fieldset[data-v-340aa566] {
padding: 0;
margin: 0;
border: none;
}

File diff suppressed because one or more lines are too long

View File

@@ -1239,37 +1239,22 @@ article.node--type-frontpage{
.field--name-computed-products-reference{
display: flex;
flex-flow: row nowrap;
@include col-mediaquery-max(3){
@include col-mediaquery-max(5){
flex-flow: column;
justify-content: flex-start;
}
>.field__item{
flex:0 0 50%;
flex:0 0 33%;
text-align: center;
padding: 2em 0;
a.btn{
@include btn;
background-color: #fff;
}
&:nth-child(1){
background-color: $color-base;
a.btn{
color: $color-base;
}
}
&:nth-child(2){
background-color: $color-webshowroom;
a.btn{
color: $color-webshowroom;
}
}
color: #fff;
color: #fff;
position: relative;
height:18em;
height:23em;
>article{
position: absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
width:80%;
}
.field--name-title{
@extend %front-col-field__label;
@@ -1286,8 +1271,77 @@ article.node--type-frontpage{
margin: 0;
}
}
.field--name-variations{
.field__item{
>div{
display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
.form-actions,p{
margin:0;
}
.field--name-field-description{
margin-right: 0.5em;
p{
font-size: 1.512em;
font-weight: 800;
color: #fff;
white-space: nowrap;
text-align: right;
}
}
input.button--add-to-cart{
@include btn;
}
}
}
}
a.btn{
@include btn;
background-color: #fff;
}
&:nth-child(1){
background-color: $color-base;
a.btn{
color: $color-base;
}
.field--name-variations{
.field__item{
>div{
input.button--add-to-cart{
color: $color-base;
}
}
}
}
}
&:nth-child(2){
background-color: $color-webshowroom;
a.btn{
color: $color-webshowroom;
}
.field--name-variations{
.field__item{
>div{
input.button--add-to-cart{
color: $color-webshowroom;
}
}
}
}
}
&:nth-child(3){
background-color: $color-showrooms;
a.btn{
color: $color-showrooms;
}
>article{
max-width: 345px;
}
}
@include col-mediaquery-max(3){
@include col-mediaquery-max(5){
flex: 0 0 auto;
padding:0;
// height: auto;
@@ -2176,7 +2230,7 @@ article.card{
article.product,
.views-row{
flex:0 0 50%;
flex:0 0 33%;
text-align: center;
padding: 2em 0;
>header{
@@ -2233,6 +2287,12 @@ article.card{
aside .variation button{
color: $color-webshowroom;
}
}
&:nth-child(3){
background-color: $color-showrooms;
aside .variation button{
color: $color-showrooms;
}
}
}
@include col-mediaquery-max(3){
@@ -2247,99 +2307,128 @@ article.card{
.modal{
position: relative;
}
#pricing-modal-login-register{
position: relative;
width: 100%;
text-align: left;
h2{
margin: 0.4em 0 1.1em;
padding-right: 4em;
font-size: 1.2em;
font-weight: 300;
}
// #pricing-modal-login-register{
// position: relative;
// width: 100%;
// text-align: left;
//
// .vm--modale-loginregister{
// }
#login-register{
width: 100%;
display: flex;
flex-flow: row nowrap;
>section{
flex:0 0 250px;
form{
.form-item, .form-actions {
margin: 0.5em 0;
max-width: none;
}
.form-type-email,
.form-type-password,
.form-actions{
display:block;
}
input[type="email"],
input[type="password"]{
max-width: 11em;
}
&#user-login-form #edit-pass--description,
#edit-pass-pass1--description{
display: block;
max-width: 16em;
font-size: 0.693em;
}
span.login-message,
span.register-message{
color: red;
font-size: 0.693em;
line-height: 1.2;
display: block;
padding: 0.8em 0 0 0;
}
span.login-message[v-if="loginMessage"],
span.register-message[v-if="registerMessage"]{
display: none;
}
}
}
section.login{
form{
>div{
// display: block;
}
}
}
section.register{
}
}
@include col-mediaquery-max(3){
height:100%;
overflow-y: auto;
#login-register{
flex-flow: column;
padding: 1em;
box-sizing: content-box;
width: 100%;
h2{
margin: 0.4em 0 1.1em;
padding-right: 4em;
font-size: 1.2em;
font-weight: 300;
}
>div.wrapper{
display: flex;
flex-flow: row nowrap;
>section{
flex:0 0 auto;
form{
input[type="email"],
flex:0 0 50%;
form{
.form-item, .form-actions {
margin: 0.5em 0;
max-width: none;
}
.form-type-email,
.form-type-password,
.form-actions{
display:block;
}
input[type="email"],
input[type="password"]{
max-width: 90%;
width: 90%;
max-width: 11em;
}
&#user-login-form #edit-pass--description,
#edit-pass-pass1--description{
max-width: 90%;
width: 90%;
display: block;
max-width: 16em;
font-size: 0.693em;
}
}
&.login{
padding-bottom: 0.5em;
span.login-message,
span.register-message{
color: red;
font-size: 0.693em;
line-height: 1.2;
display: block;
padding: 0.8em 0 0 0;
}
span.login-message[v-if="loginMessage"],
span.register-message[v-if="registerMessage"]{
display: none;
}
}
}
section.login{
form{
>div{
// display: block;
}
}
}
section.register{
}
@include col-mediaquery-max(3){
flex-flow: column;
>section{
flex:0 0 auto;
form{
input[type="email"],
input[type="password"]{
max-width: 90%;
width: 90%;
}
&#user-login-form #edit-pass--description,
#edit-pass-pass1--description{
max-width: 90%;
width: 90%;
}
}
&.login{
padding-bottom: 0.5em;
}
}
}
}
}
@include col-mediaquery-max(4, landscape){
h2{
margin: 0 0 0.5em;
}
}
}
// @include col-mediaquery-max(3){
// height:100%;
// overflow-y: auto;
// #login-register{
// flex-flow: column;
// >section{
// flex:0 0 auto;
// form{
// input[type="email"],
// input[type="password"]{
// max-width: 90%;
// width: 90%;
// }
// &#user-login-form #edit-pass--description,
// #edit-pass-pass1--description{
// max-width: 90%;
// width: 90%;
// }
// }
// &.login{
// padding-bottom: 0.5em;
// }
// }
// }
// }
// @include col-mediaquery-max(4, landscape){
// h2{
// margin: 0 0 0.5em;
// }
// }
// }
#pricing{
@include col-mediaquery-max(3){
.overlay > .modal{