123 lines
2.5 KiB
SCSS
123 lines
2.5 KiB
SCSS
section.woocommerce-wrapper {
|
|
margin-top: 4rem;
|
|
|
|
ul.products {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
|
|
div.product-tile {
|
|
border-radius: 15px;
|
|
box-shadow: 0 0 20px rgba($c-black, 0.1);
|
|
padding: 1rem;
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
a.add_to_cart_button {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
width: 35px;
|
|
height: 35px;
|
|
padding: 0 !important;
|
|
display: flex !important;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0 !important;
|
|
// opacity: 0;
|
|
transition: all $transition-time ease;
|
|
border-radius: 50%;
|
|
|
|
img {
|
|
margin: 0 !important;
|
|
width: 20px !important;
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
left: 80%;
|
|
margin: 0 !important;
|
|
top: -20%;
|
|
}
|
|
}
|
|
|
|
a.added_to_cart {
|
|
@extend .montserrat;
|
|
padding-top: 0;
|
|
position: absolute;
|
|
display: block;
|
|
color: $c-brightRed;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
|
|
&::after {
|
|
@extend .change-black-to-red;
|
|
content:"";
|
|
width: 13px;
|
|
height: 14px;
|
|
display: block;
|
|
background-image: url("/wp-content/themes/mccans-theme/assets/chevron-right.svg");
|
|
position: absolute;
|
|
left: 103%;
|
|
top: 3px;
|
|
background-size: contain;
|
|
}
|
|
|
|
&:hover {
|
|
&::after {
|
|
left: 105%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.add_to_cart_button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
line-height: 26px;
|
|
text-align: center;
|
|
|
|
a {
|
|
color: $c-black;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: $c-brightRed;
|
|
}
|
|
}
|
|
}
|
|
|
|
p.price {
|
|
color: $c-brightRed !important;
|
|
font-size: 25px !important;
|
|
line-height: 26px;
|
|
text-align: center;
|
|
margin: 2rem 0 0 !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
p.msrp {
|
|
color: $c-midGrey !important;
|
|
font-size: 15px !important;
|
|
line-height: 21px;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
p.savings {
|
|
color: $c-brightRed !important;
|
|
font-size: 16px !important;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
}
|