Use an atom for the Cart button
This commit is contained in:
27
src/style/atoms/_cart-button.scss
Normal file
27
src/style/atoms/_cart-button.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
// Cart
|
||||
.cart-button {
|
||||
display: none;
|
||||
position: relative;
|
||||
|
||||
@include bp (sm) {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -12px;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: rem(11px);
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background-color: $color-secondary;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
@@ -77,34 +77,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cart
|
||||
&__cart {
|
||||
display: none;
|
||||
position: relative;
|
||||
|
||||
@include bp (sm) {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -12px;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: rem(11px);
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background-color: $color-secondary;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Intro
|
||||
|
||||
@@ -43,6 +43,7 @@
|
||||
@import "atoms/box-cta";
|
||||
@import "atoms/site-title";
|
||||
@import "atoms/photo";
|
||||
@import "atoms/cart-button";
|
||||
|
||||
// Molecules
|
||||
@import "molecules/photo-card";
|
||||
|
||||
Reference in New Issue
Block a user