product detail page styles

neuland · Feb 20, 2024 · ec680e5 · ec680e5
1 parent 1ef9506
commit ec680e5
Show file tree

Hide file tree

Showing 12 changed files with 246 additions and 74 deletions.
diff --git a/src/checkout/components/AddToCart.css b/src/checkout/components/AddToCart.css
@@ -1,5 +1,5 @@
 .c_AddToCart {
-  padding: 2rem;
+  padding: 2rem 0;
 }
 
 .c_AddToCart__stock {
@@ -13,3 +13,92 @@
 .c_AddToCart__stock--empty {
   color: red;
 }
+
+.c_AddToCart__button {
+  --accent-color: #ff5a55;
+  display: block;
+  height: 50px;
+  width: 100%;
+  border-radius: 25px;
+  padding: 2px;
+  border: 0;
+  background: linear-gradient(180deg, rgb(168, 168, 168), rgb(255, 255, 255)),
+    var(--accent-color);
+  box-shadow:
+    0 -2px 3px rgb(229, 229, 229),
+    0 2px 3px 2px rgb(255, 255, 255),
+    0 0 25px rgba(0, 0, 0, 0.05),
+    0 -10px 5px rgb(255, 255, 255) inset;
+  position: relative;
+  text-transform: uppercase;
+  letter-spacing: 0.3em;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: all 0.3s;
+  text-decoration: none;
+  color: #fff;
+  font-size: 16px;
+}
+
+.c_AddToCart__button::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  left: 0;
+  background: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.19),
+      rgba(255, 255, 255, 0.3)
+    ),
+    var(--accent-color);
+  content: "";
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1);
+  display: block;
+  transition:
+    all 0.3s,
+    background 0.1s 0.2s;
+}
+
+.c_AddToCart__inner {
+  position: relative;
+  padding-left: 20px;
+  padding-right: 20px;
+  background-color: var(--accent-color);
+  height: 46px;
+  border-radius: inherit;
+  display: grid;
+  place-content: center;
+  transition: all 0.3s;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none;
+  white-space: nowrap;
+}
+
+.c_AddToCart__button:hover .c_AddToCart__inner {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
+    var(--accent-color);
+}
+
+.c_AddToCart__button:active::before {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.16)),
+    var(--accent-color);
+  box-shadow:
+    0 0 3px rgba(0, 0, 0, 0.6) inset,
+    0 2px 1px -1px rgba(0, 0, 0, 0.1);
+  transform: scale(0.97);
+  transition:
+    all 0.1s,
+    background 0.05s;
+}
+
+.c_AddToCart__button:active .c_AddToCart__inner {
+  transform: scale(0.97);
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+    var(--accent-color);
+  transition: all 0.1s;
+  box-shadow:
+    0 5px 5px rgba(0, 0, 0, 0.2) inset,
+    0 -3px 3px rgba(255, 255, 255, 0.2) inset;
+}
diff --git a/src/checkout/components/AddToCart.js b/src/checkout/components/AddToCart.js
@@ -11,14 +11,18 @@ export default ({ sku }) => {
     data-boundary="checkout-button"
   >
     <input type="hidden" name="sku" value="${sku}" />
-    <p>price: ${product.price} Øcken</p>
-    <button ${outOfStock ? "disabled" : ""}>add to cart</button>
-    ${product.inventory > 0
-      ? html`<p class="c_AddToCart__stock c_AddToCart__stock--ok">
-          ${product.inventory} in stock, free shipping
-        </p>`
-      : html`<p class="c_AddToCart__stock c_AddToCart__stock--empty">
-          out of stock
-        </p>`}
+    <div>
+      <p>price: ${product.price} Øcken</p>
+      ${product.inventory > 0
+        ? html`<p class="c_AddToCart__stock c_AddToCart__stock--ok">
+            ${product.inventory} in stock, free shipping
+          </p>`
+        : html`<p class="c_AddToCart__stock c_AddToCart__stock--empty">
+            out of stock
+          </p>`}
+    </div>
+    <button ${outOfStock ? "disabled" : ""} class="c_AddToCart__button">
+      <div class="c_AddToCart__inner">add to basket</div>
+    </button>
   </form>`;
 };
diff --git a/src/checkout/components/MiniCart.css b/src/checkout/components/MiniCart.css
@@ -2,16 +2,16 @@
   position: relative;
 }
 
-.c_MiniCart__icon {
+.c_MiniCart__button {
   display: block;
   height: 66px;
   border-radius: 33px;
   padding: 2px;
   border: 0;
   background: linear-gradient(180deg, rgb(168, 168, 168), rgb(255, 255, 255));
-  box-shadow: 
-    0 -2px 3px rgb(229, 229, 229), 
-    0 2px 3px 2px rgb(255, 255, 255), 
+  box-shadow:
+    0 -2px 3px rgb(229, 229, 229),
+    0 2px 3px 2px rgb(255, 255, 255),
     0 0 25px rgba(0, 0, 0, 0.05),
     0 -10px 5px rgb(255, 255, 255) inset;
   position: relative;
@@ -23,7 +23,7 @@
   text-decoration: none;
 }
 
-.c_MiniCart__icon::before {
+.c_MiniCart__button::before {
   position: absolute;
   top: 0;
   right: 0;
@@ -34,10 +34,12 @@
   content: "";
   box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1);
   display: block;
-  transition: all 0.3s, background 0.1s 0.2s;
+  transition:
+    all 0.3s,
+    background 0.1s 0.2s;
 }
 
-.c_MiniCart__icon__content {
+.c_MiniCart__inner {
   position: relative;
   padding-left: 25px;
   padding-right: 25px;
@@ -53,56 +55,81 @@
   white-space: nowrap;
 }
 
-.c_MiniCart__icon:hover .c_MiniCart__icon__content {
-  background-color: rgb(250, 250, 250)
+.c_MiniCart__button:hover .c_MiniCart__inner {
+  background-color: rgb(250, 250, 250);
 }
 
-
-.c_MiniCart__icon:active::before {
+.c_MiniCart__button:active::before {
   background: linear-gradient(0deg, rgb(220, 220, 220), rgb(205, 205, 205));
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6) inset, 0 2px 1px -1px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 0 3px rgba(0, 0, 0, 0.6) inset,
+    0 2px 1px -1px rgba(0, 0, 0, 0.1);
   transform: scale(0.97);
-  transition: all 0.1s, background 0.05s;
+  transition:
+    all 0.1s,
+    background 0.05s;
 }
 
-.c_MiniCart__icon:active .c_MiniCart__icon__content {
+.c_MiniCart__button:active .c_MiniCart__inner {
   transform: scale(0.97);
   background-color: rgb(240, 240, 240);
   transition: all 0.1s;
-  box-shadow: 
-    0 5px 5px rgba(0, 0, 0, 0.2) inset, 
+  box-shadow:
+    0 5px 5px rgba(0, 0, 0, 0.2) inset,
     0 -3px 3px rgba(255, 255, 255, 0.2) inset;
 }
 
-.c_MiniCart__button {
-  display: none;
+.c_MiniCart__quantity {
   position: absolute;
-  top: 100%;
-  width: 200px;
-  right: 0;
-  backdrop-filter: blur(10px);
-  border-right: 1px solid #eeebe2;
-  border-bottom: 1px solid #eeebe2;
-  border-left: 1px solid #eeebe2;
-  box-shadow: 0 20px 20px -10px #eb5b5920;
-  padding: 1rem;
+  top: 0px;
+  right: 0px;
+  background-color: #ff5a55;
+  color: rgb(255, 255, 255);
+  border-radius: 10px;
+  letter-spacing: normal;
+  height: 20px;
+  min-width: 20px;
+  display: grid;
+  place-content: center;
   text-align: center;
-  transform: translateY(1rem);
-  border-radius: 0 0 33px 33px;
+  font-size: 12px;
+  font-weight: bold;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s;
+  font-variant-numeric: tabular-nums;
+  /* transform: scale(0);
+  opacity: 0; */
 }
 
-.c_MiniCart__button::before {
-  display: block;
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 1rem;
-  top: -1rem;
-  left: 0;
+@keyframes bounce {
+  0% {
+    transform: translateY(0px);
+  }
+  33% {
+    transform: translateY(6px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
 }
 
-.c_MiniCart:hover .c_MiniCart__button,
-.c_MiniCart--highlight .c_MiniCart__button {
-  background: rgb(255, 255, 255);
-  display: block;
+.c_MiniCart--highlight .c_MiniCart__inner svg {
+  animation: bounce 0.2s ease-out;
+}
+
+@keyframes shake {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(6deg);
+  }
+  100% {
+    transform: rotate(-6deg);
+  }
+}
+
+.c_MiniCart--highlight .c_MiniCart__inner svg g {
+  transform-origin: center 7px;
+  animation: shake 0.2s infinite ease-in-out;
 }
diff --git a/src/checkout/components/MiniCart.js b/src/checkout/components/MiniCart.js
@@ -5,9 +5,26 @@ export default ({ req }) => {
   const lineItems = readFromCookie(req);
   const quantity = lineItems.reduce((t, { quantity }) => t + quantity, 0);
   return html`<div class="c_MiniCart" data-boundary="checkout-minicart">
-    <a href="/checkout/cart" class="c_MiniCart__icon" ontouchstart>
-      <div class="c_MiniCart__icon__content">🛒 ${quantity}</div>
+    <a href="/checkout/cart" class="c_MiniCart__button" ontouchstart>
+      <div class="c_MiniCart__inner">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="33"
+          height="33"
+          fill="none"
+        >
+          <g clip-path="url(#a)">
+            <path
+              fill="#000"
+              d="M2.75 27.5c0 1.5125 1.2375 2.75 2.75 2.75h22c1.5125 0 2.75-1.2375 2.75-2.75V9.625h-6.3188c-.649-3.5145-3.7311-6.1875-7.4312-6.1875-3.7001 0-6.78219 2.673-7.43119 6.1875H2.75V27.5ZM16.5 4.8125c2.9391 0 5.4003 2.06113 6.028 4.8125H10.472c.6277-2.75137 3.0889-4.8125 6.028-4.8125ZM8.9375 11v4.125h1.375V11h12.375v4.125h1.375V11h4.8125v16.5c0 .7583-.6167 1.375-1.375 1.375h-22c-.75831 0-1.375-.6167-1.375-1.375V11h4.8125Z"
+            />
+          </g>
+          <defs>
+            <clipPath id="a"><path fill="#fff" d="M0 0h33v33H0z" /></clipPath>
+          </defs>
+        </svg>
+        <div class="c_MiniCart__quantity">${quantity}</div>
+      </div>
     </a>
-    <a href="/checkout/cart" class="c_MiniCart__button">go to cart</a>
   </div>`;
 };
diff --git a/src/checkout/pages/CartPage.css b/src/checkout/pages/CartPage.css
@@ -1,6 +1,6 @@
 .c_CartPage {
   margin: 0 auto;
-  max-width: 800px;
+  max-width: 1000px;
 }
 
 .c_CartPage__lineItems {

diff --git a/src/checkout/scripts.js b/src/checkout/scripts.js
@@ -27,7 +27,7 @@ document.addEventListener("checkout:cart-updated", async function () {
     $newMiniCart.classList.add("c_MiniCart--highlight");
     setTimeout(() => {
       $newMiniCart.classList.remove("c_MiniCart--highlight");
-    }, 5000);
+    }, 600);
   }
 });
 

diff --git a/src/decide/pages/ProductPage.css b/src/decide/pages/ProductPage.css
@@ -1,9 +1,36 @@
 .d_ProductPage {
   margin: 0 auto;
-  max-width: 800px;
+  max-width: 1000px;
 }
 
 .d_ProductPage_details {
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
+}
+
+.d_ProductPage__title {
+  margin: 0;
+  font-size: 40px;
+}
+
+.d_ProductPage__highlights {
+  padding: 0;
+  list-style: none;
+}
+
+.d_ProductPage__highlights li {
+  margin-bottom: 1rem;
+}
+
+.d_ProductPage__variants {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+}
+
+.d_ProductPage__variants li {
+  white-space: nowrap;
+  padding: 0 0.5rem 0 0;
 }