snippetize js and css and refactor builder

mattiadragone · May 6, 2024 · 9d58a8d · 9d58a8d
1 parent 12c8d33
commit 9d58a8d
Show file tree

Hide file tree

Showing 3 changed files with 566 additions and 377 deletions.
diff --git a/assets/section-bundle-builder.css b/assets/section-bundle-builder.css
@@ -0,0 +1,162 @@
+.bundle-builder {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  align-items: start;
+  column-gap: calc(var(--grid-desktop-vertical-spacing) * 6);
+  width: 100%;
+}
+
+.bundle-builder .underline-links-hover:hover a {
+	text-decoration: none !important;
+}
+
+.product-list .product-list--title {
+  padding: calc(var(--grid-desktop-vertical-spacing) * 2)
+}
+
+.product-list .product-list--product {
+  margin: 0;
+  padding: 0.75rem 1rem;
+}
+.product-list--button-container {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+  align-items: center;
+	z-index: 1;
+	width: 100%;
+	height: 100%;
+}
+
+.product-list--button-container > button {
+	display: flex;
+  justify-content: space-around;
+  column-gap: 1rem;
+}
+
+.product-list--button-container > button > svg {
+	height: 2rem;
+	width: 2rem;
+}
+
+.grid__item.added {
+  position: relative;
+}
+
+.grid__item.added::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(var(--color-foreground), 1);
+	background: #ffffffcc;
+}
+.bundle-builder--left {
+	max-width: 100rem;
+}
+
+.bundle-builder-aside {
+  position: sticky;
+  top: 20vh;
+  padding: calc(var(--grid-desktop-vertical-spacing) * 3);
+	margin: calc(var(--grid-desktop-vertical-spacing) * 3);
+  z-index: 99;
+	max-width: 45rem;
+}
+
+.bundle-builder .bundle-builder--description,
+.bundle-builder .bundle-builder-aside--description,
+.bundle-builder-aside--products--no-products {
+  padding: var(--grid-desktop-vertical-spacing) 0;
+}
+
+.bundle-builder-aside--product,
+.bundle-builder-aside--totals {
+  display: flex;
+  padding: var(--grid-desktop-vertical-spacing) 0;
+  column-gap: var(--grid-desktop-vertical-spacing);
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(var(--color-foreground), 0.4);
+}
+.bundle-builder-aside--totals {
+	border: 0;
+}
+
+.bundle-builder-aside--product p {
+  padding: 0;
+}
+
+.bundle-builder-aside--product .price {
+  display: flex;
+  align-items: center;
+}
+
+.bundle-builder-aside--product * {
+  font-size: 14px;
+}
+
+.bundle-builder-aside--product .price--on-sale .price__sale {
+  display: flex;
+  flex-direction: column;
+}
+
+form .bundle-builder-aside--product {
+  display: none;
+}
+
+.bundle-builder-aside--product img {
+  width: 100%;
+}
+
+@media (min-width: 750px) {
+  .bundle-builder-aside .totals {
+    padding: calc(var(--grid-desktop-vertical-spacing) * 2) 0;
+    justify-content: space-between;
+  }
+}
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px 20px;
+  background-color: #333;
+  color: #fff;
+  border-radius: 5px;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+}
+
+.toast-message {
+  margin-right: 10px;
+}
+
+.close-btn {
+  cursor: pointer;
+}
+
+.bundle-builder-aside--element {
+  display: flex;
+  align-items: center;
+  column-gap: 2rem;
+  padding: .5rem 0;
+}
+
+.bundle-builder-aside--element-icon {
+  display: flex;
+  padding: var(--grid-desktop-vertical-spacing);
+  background-color: rgba(var(--color-foreground), .1);
+  border-radius: 100%;
+}
+
+.bundle-builder-form--group {
+	display: flex;
+	flex-direction: column;
+  padding: var(--grid-desktop-vertical-spacing) 0;
+  justify-content: space-between;
+}