WIP

2025-05-20 14:15:03 -07:00
parent c074a5ef18
commit edcad561a5
179 changed files with 52733 additions and 4704 deletions
--- a/src/scss/shop.scss
+++ b/src/scss/shop.scss
@@ -0,0 +1,122 @@
+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;
+    }
+}