bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add to cart links for products in home

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-06-09 13:06:52 +02:00
parent d9d2180f94
commit 352223500f
25 changed files with 561 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
web/themes/custom/materiotheme/assets/styles/main.scss
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{