84 lines
1.9 KiB
CSS
84 lines
1.9 KiB
CSS
:root{
|
|
--cl-color-primary: var(--tertiary);
|
|
--cl-color-white: var(--content);
|
|
}
|
|
|
|
cl-availability-status[aria-disabled=true],cl-identity-status[aria-disabled=true]{
|
|
display:none
|
|
}
|
|
|
|
cl-price-amount{
|
|
color: var(--purple);
|
|
font-size:1em;
|
|
font-weight:600;
|
|
line-height:1.5em
|
|
}
|
|
|
|
cl-price-amount[type=compare-at]{
|
|
color: var(--content);
|
|
font-size:.875em;
|
|
font-weight:300;
|
|
line-height:1.25em;
|
|
text-decoration:line-through
|
|
}
|
|
|
|
cl-price-amount[type=compare-at]::part(strikethrough){
|
|
text-decoration:none
|
|
}
|
|
|
|
cl-add-to-cart{
|
|
display:inline-block;
|
|
background-image:none;
|
|
border:none;
|
|
font-weight:600;
|
|
color:var(--cl-color-white);
|
|
padding:.75rem 1rem .75rem 1rem;
|
|
border-radius: var(--radius);
|
|
background-color: var(--cl-color-primary);
|
|
cursor:default;
|
|
position: relative;
|
|
bottom: 0;
|
|
}
|
|
|
|
cl-add-to-cart:not([aria-disabled=true]){
|
|
background-color:var(--cl-color-primary);
|
|
cursor:pointer;
|
|
}
|
|
|
|
cl-cart-link,.cl-cart-link{
|
|
position:relative;
|
|
display:inline-block;
|
|
cursor:pointer;
|
|
}
|
|
|
|
cl-cart-link cl-cart-count,.cl-cart-link cl-cart-count{
|
|
position:absolute;
|
|
bottom:0;
|
|
right:0;
|
|
font-size:.5rem;
|
|
border-radius:50%;
|
|
background-color:var(--cl-color-primary);
|
|
min-width:1rem;
|
|
height:1rem;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
color:var(--cl-color-white);
|
|
transform:translate(120%, 0%);
|
|
padding:.2rem;
|
|
}
|
|
|
|
cl-cart-link cl-cart-count[hide-when-empty=""],cl-cart-link cl-cart-count[hide-when-empty=true],.cl-cart-link cl-cart-count[hide-when-empty=""],.cl-cart-link cl-cart-count[hide-when-empty=true]{
|
|
opacity:0
|
|
}
|
|
|
|
cl-cart-link cl-cart-count[quantity],.cl-cart-link cl-cart-count[quantity]{
|
|
transition:opacity .3s;opacity:1
|
|
}
|
|
|
|
cl-cart-link svg~cl-cart-count,.cl-cart-link svg~cl-cart-count{
|
|
bottom:0%;
|
|
right:0%;
|
|
transform:translate(30%, 0%);
|
|
}
|