bundle css

2023-11-16 23:59:06 +00:00
parent 857e677a0b
commit 7e88f4b71e
9 changed files with 3 additions and 11 deletions
@@ -0,0 +1,83 @@
+: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%);
+}