From 609b70e476946569e1dd0550da5cca38c9bfd956 Mon Sep 17 00:00:00 2001 From: Badreddine Ibril Date: Tue, 21 Jan 2025 12:41:01 +0100 Subject: [PATCH] Featured product style migration --- themes/origins/assets/featured-product.css | 190 ++++++++++++++ themes/origins/assets/main.css | 184 -------------- .../origins/sections/featured-product.liquid | 5 +- themes/origins/styles/base/_common.scss | 235 +----------------- themes/origins/styles/featured-product.scss | 234 +++++++++++++++++ 5 files changed, 431 insertions(+), 417 deletions(-) create mode 100644 themes/origins/assets/featured-product.css create mode 100644 themes/origins/styles/featured-product.scss diff --git a/themes/origins/assets/featured-product.css b/themes/origins/assets/featured-product.css new file mode 100644 index 00000000..a83b50c9 --- /dev/null +++ b/themes/origins/assets/featured-product.css @@ -0,0 +1,190 @@ +.single-product{ + --image-border:1px solid color-mix(in srgb, currentColor 5%, transparent); + position:relative; + display:grid; + grid-template-columns:repeat(2, 1fr); + grid-gap:var(--gap-3xl); + gap:var(--gap-3xl); +} +.single-product yc-product-media{ + --main-image-height:550px; + height:-moz-fit-content; + height:fit-content; + display:grid; + grid-gap:var(--gap-sm); + gap:var(--gap-sm); + position:sticky; + inset-block-start:var(--gap-lg); +} +.single-product yc-product-media img{ + -webkit-user-select:none; + -moz-user-select:none; + user-select:none; +} +.single-product yc-product-media .main-image{ + position:relative; + width:100%; + height:var(--main-image-height); + border-radius:var(--media-main-image-border-radius); + border:var(--image-border); + overflow:hidden; +} +.single-product yc-product-media .main-image .count{ + position:absolute; + font-size:var(--text-md); + padding:0.5em 1.5em; + inset-inline-end:1em; + inset-block-end:1em; + border-radius:var(--radius-xl); + color:var(--section-bg-color, var(--color-base-white)); + -webkit-backdrop-filter:var(--overlay-blur); + backdrop-filter:var(--overlay-blur); + background-color:var(--overlay-background); +} +.single-product yc-product-media .main-image img{ + -o-object-fit:cover; + object-fit:cover; +} +.single-product yc-product-media .main-image .placeholder{ + height:100%; + width:100%; + display:flex; + justify-content:center; + align-items:center; + background-color:color-mix(in srgb, currentColor 5%, transparent); + color:color-mix(in srgb, currentColor 20%, transparent); +} +.single-product yc-product-media .gallery .slider-inner{ + padding:0.25em; +} +.single-product yc-product-media .gallery .slider-inner yc-slider-item{ + max-width:100px; +} +.single-product yc-product-media .gallery .slider-inner yc-slider-item .image{ + height:100px; + scroll-snap-align:start; + cursor:pointer; + display:inline-block; + width:100%; + border:var(--image-border); + border-radius:var(--media-gallery-border-radius); + overflow:hidden; + position:relative; + transition:var(--transition-duration-normal); +} +.single-product yc-product-media .gallery .slider-inner yc-slider-item .image::before{ + content:""; + position:absolute; + width:100%; + height:100%; + opacity:0; + border-radius:calc(var(--media-gallery-border-radius) - 1px); + -webkit-backdrop-filter:var(--media-blur); + backdrop-filter:var(--media-blur); + background-color:var(--media-background); + transition:var(--transition-duration-normal); +} +.single-product yc-product-media .gallery .slider-inner yc-slider-item .image:hover::before{ + opacity:1; +} +.single-product yc-product-media .gallery .slider-inner yc-slider-item .image:has(input:checked){ + box-shadow:var(--shadow-dark-focus-sm); +} +.single-product yc-product-media .gallery .slider-inner yc-slider-item .image:has(input:checked)::before{ + opacity:1; +} +.single-product yc-product-media .gallery .slider-inner yc-slider-item .image img{ + -o-object-fit:cover; + object-fit:cover; +} +.single-product yc-product-info{ + display:flex; + flex-direction:column; + gap:var(--gap-md); +} +.single-product yc-product-info .price{ + display:flex; + align-items:center; + gap:var(--gap-md); +} +.single-product yc-product-info .price .current{ + font-weight:550; +} +.single-product yc-product-info .price .compare-at{ + color:color-mix(in srgb, currentColor 70%, transparent); + -webkit-text-decoration:line-through; + text-decoration:line-through; +} +.single-product yc-product-info .description .card-placeholder{ + font-size:var(--text-md); +} +.single-product yc-product-info .inventory{ + display:flex; + align-items:center; + gap:var(--gap-2xs); +} +.single-product yc-product-info .inventory[data-inventory-out-of-stock] .icon{ + color:var(--color-gray-300); +} +.single-product yc-product-info .inventory[data-inventory-in-stock] .icon{ + color:var(--color-success-500); +} +.single-product yc-product-info .inventory[data-inventory-low-stock] .icon{ + color:var(--color-warning-500); +} +.single-product yc-product-info .accordion{ + border:1px solid var(--color-gray-50); + border-radius:var(--accordion-border-radius, var(--radius-md)); + height:-moz-fit-content; + height:fit-content; + color:rgb(var(--accordion-foreground)); +} +.single-product yc-product-info .accordion summary{ + display:flex; + justify-content:space-between; + align-items:center; + padding:12px 15px; + cursor:pointer; +} +.single-product yc-product-info .accordion summary .title{ + font-size:var(--text-md); + font-weight:500; + flex:1; + -webkit-user-select:none; + -moz-user-select:none; + user-select:none; +} +.single-product yc-product-info .accordion summary .icon{ + transition:var(--transition-duration-normal); +} +.single-product yc-product-info .accordion .content{ + font-size:var(--text-md); + padding:12px 15px; + color:color-mix(in srgb, currentColor 70%, transparent); +} +.single-product yc-product-info .accordion[open] summary .icon{ + rotate:180deg; +} + +@media (max-width: 1280px){ + .single-product yc-product-media{ + --main-image-height:450px; + flex-direction:column; + } +} +@media (max-width: 1024px){ + .single-product{ + grid-template-columns:1fr; + } + .single-product yc-product-media{ + position:static; + } +} +@media (max-width: 768px){ + .single-product{ + gap:var(--gap-lg); + } + .single-product yc-product-media .gallery .slider-inner .image{ + height:70px !important; + } +} diff --git a/themes/origins/assets/main.css b/themes/origins/assets/main.css index 984dc034..3edc4e4b 100644 --- a/themes/origins/assets/main.css +++ b/themes/origins/assets/main.css @@ -356,174 +356,6 @@ yc-section yc-section-head p{ color:color-mix(in srgb, currentColor 70%, transparent); } -.single-product{ - --image-border:1px solid color-mix(in srgb, currentColor 5%, transparent); - position:relative; - display:grid; - grid-template-columns:repeat(2, 1fr); - grid-gap:var(--gap-3xl); - gap:var(--gap-3xl); -} -.single-product yc-product-media{ - --main-image-height:550px; - height:-moz-fit-content; - height:fit-content; - display:grid; - grid-gap:var(--gap-sm); - gap:var(--gap-sm); - position:sticky; - inset-block-start:var(--gap-lg); -} -.single-product yc-product-media img{ - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; -} -.single-product yc-product-media .main-image{ - position:relative; - width:100%; - height:var(--main-image-height); - border-radius:var(--media-main-image-border-radius); - border:var(--image-border); - overflow:hidden; -} -.single-product yc-product-media .main-image .count{ - position:absolute; - font-size:var(--text-md); - padding:0.5em 1.5em; - inset-inline-end:1em; - inset-block-end:1em; - border-radius:var(--radius-xl); - color:var(--section-bg-color, var(--color-base-white)); - -webkit-backdrop-filter:var(--overlay-blur); - backdrop-filter:var(--overlay-blur); - background-color:var(--overlay-background); -} -.single-product yc-product-media .main-image img{ - -o-object-fit:cover; - object-fit:cover; -} -.single-product yc-product-media .main-image .placeholder{ - height:100%; - width:100%; - display:flex; - justify-content:center; - align-items:center; - background-color:color-mix(in srgb, currentColor 5%, transparent); - color:color-mix(in srgb, currentColor 20%, transparent); -} -.single-product yc-product-media .gallery .slider-inner{ - padding:0.25em; -} -.single-product yc-product-media .gallery .slider-inner yc-slider-item{ - max-width:100px; -} -.single-product yc-product-media .gallery .slider-inner yc-slider-item .image{ - height:100px; - scroll-snap-align:start; - cursor:pointer; - display:inline-block; - width:100%; - border:var(--image-border); - border-radius:var(--media-gallery-border-radius); - overflow:hidden; - position:relative; - transition:var(--transition-duration-normal); -} -.single-product yc-product-media .gallery .slider-inner yc-slider-item .image::before{ - content:""; - position:absolute; - width:100%; - height:100%; - opacity:0; - border-radius:calc(var(--media-gallery-border-radius) - 1px); - -webkit-backdrop-filter:var(--media-blur); - backdrop-filter:var(--media-blur); - background-color:var(--media-background); - transition:var(--transition-duration-normal); -} -.single-product yc-product-media .gallery .slider-inner yc-slider-item .image:hover::before{ - opacity:1; -} -.single-product yc-product-media .gallery .slider-inner yc-slider-item .image:has(input:checked){ - box-shadow:var(--shadow-dark-focus-sm); -} -.single-product yc-product-media .gallery .slider-inner yc-slider-item .image:has(input:checked)::before{ - opacity:1; -} -.single-product yc-product-media .gallery .slider-inner yc-slider-item .image img{ - -o-object-fit:cover; - object-fit:cover; -} -.single-product .info{ - display:flex; - flex-direction:column; - gap:var(--gap-md); -} -.single-product .info .price{ - display:flex; - align-items:center; - gap:var(--gap-md); -} -.single-product .info .price .current{ - font-weight:550; -} -.single-product .info .price .compare-at{ - color:color-mix(in srgb, currentColor 70%, transparent); - -webkit-text-decoration:line-through; - text-decoration:line-through; -} -.single-product .info .description .card-placeholder{ - font-size:var(--text-md); -} -.single-product .info .inventory{ - display:flex; - align-items:center; - gap:var(--gap-2xs); -} -.single-product .info .inventory[data-inventory-out-of-stock] .icon{ - color:var(--color-gray-300); -} -.single-product .info .inventory[data-inventory-in-stock] .icon{ - color:var(--color-success-500); -} -.single-product .info .inventory[data-inventory-low-stock] .icon{ - color:var(--color-warning-500); -} -.single-product .info .accordion{ - border:1px solid var(--color-gray-50); - border-radius:var(--accordion-border-radius, var(--radius-md)); - height:-moz-fit-content; - height:fit-content; - color:rgb(var(--accordion-foreground)); -} -.single-product .info .accordion summary{ - display:flex; - justify-content:space-between; - align-items:center; - padding:12px 15px; - cursor:pointer; -} -.single-product .info .accordion summary .title{ - font-size:var(--text-md); - font-weight:500; - flex:1; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; -} -.single-product .info .accordion summary .icon{ - transition:var(--transition-duration-normal); -} -.single-product .info .accordion .content{ - font-size:var(--text-md); - padding:12px 15px; - color:color-mix(in srgb, currentColor 70%, transparent); -} -.single-product .info .accordion[open] summary .icon{ - rotate:180deg; -} - .rating{ display:flex; align-items:center; @@ -587,21 +419,11 @@ yc-quantity-control span{ .items-grid:has(> :nth-child(4)){ grid-template-columns:repeat(2, 1fr); } - .single-product yc-product-media{ - --main-image-height:450px; - flex-direction:column; - } } @media (max-width: 1024px){ .items-grid{ grid-template-columns:1fr !important; } - .single-product{ - grid-template-columns:1fr; - } - .single-product yc-product-media{ - position:static; - } } @media (max-width: 768px){ .items-grid{ @@ -613,12 +435,6 @@ yc-quantity-control span{ yc-section yc-section-head p{ font-size:var(--text-sm); } - .single-product{ - gap:var(--gap-lg); - } - yc-product-media .gallery .slider-inner .image{ - height:70px !important; - } } @keyframes showUp{ from{ diff --git a/themes/origins/sections/featured-product.liquid b/themes/origins/sections/featured-product.liquid index de352a73..e65f5add 100644 --- a/themes/origins/sections/featured-product.liquid +++ b/themes/origins/sections/featured-product.liquid @@ -1,4 +1,5 @@ {{ 'component-slider.css' | asset_url | stylesheet_tag }} +{{ 'featured-product.css' | asset_url | stylesheet_tag }} {{ 'component-product-media.js' | asset_url | script_tag_deferred }} {{ 'component-slider.js' | asset_url | script_tag_deferred }} @@ -93,7 +94,7 @@ {% endif %} - + diff --git a/themes/origins/styles/base/_common.scss b/themes/origins/styles/base/_common.scss index 6f364fda..022df1ae 100644 --- a/themes/origins/styles/base/_common.scss +++ b/themes/origins/styles/base/_common.scss @@ -195,6 +195,7 @@ yc-section { transition: var(--transition-duration-normal); } +// Placeholder .card-placeholder { height: 100%; width: 100%; @@ -210,207 +211,7 @@ yc-section { } } -.single-product { - --image-border: 1px solid color-mix(in srgb, currentColor 5%, transparent); - - position: relative; - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: var(--gap-3xl); - - yc-product-media { - --main-image-height: 550px; - - height: fit-content; - display: grid; - gap: var(--gap-sm); - position: sticky; - inset-block-start: var(--gap-lg); - - img { - user-select: none; - } - - .main-image { - position: relative; - width: 100%; - height: var(--main-image-height); - border-radius: var(--media-main-image-border-radius); - border: var(--image-border); - overflow: hidden; - - .count { - position: absolute; - font-size: var(--text-md); - padding: 0.5em 1.5em; - inset-inline-end: 1em; - inset-block-end: 1em; - border-radius: var(--radius-xl); - color: var(--section-bg-color, var(--color-base-white)); - backdrop-filter: var(--overlay-blur); - background-color: var(--overlay-background); - } - - img { - object-fit: cover; - } - - .placeholder { - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - background-color: color-mix(in srgb, currentColor 5%, transparent); - color: color-mix(in srgb, currentColor 20%, transparent); - } - } - - .gallery { - .slider-inner { - padding: 0.25em; - - yc-slider-item { - max-width: 100px; - - .image { - height: 100px; - - scroll-snap-align: start; - cursor: pointer; - display: inline-block; - width: 100%; - border: var(--image-border); - border-radius: var(--media-gallery-border-radius); - overflow: hidden; - position: relative; - transition: var(--transition-duration-normal); - - &::before { - content: ""; - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - border-radius: calc(var(--media-gallery-border-radius) - 1px); - backdrop-filter: var(--media-blur); - background-color: var(--media-background); - transition: var(--transition-duration-normal); - } - - &:hover::before { - opacity: 1; - } - - &:has(input:checked) { - box-shadow: var(--shadow-dark-focus-sm); - - &::before { - opacity: 1; - } - } - - img { - object-fit: cover; - } - } - } - } - } - } - - .info { - display: flex; - flex-direction: column; - gap: var(--gap-md); - - .price { - display: flex; - align-items: center; - gap: var(--gap-md); - - .current { - font-weight: 550; - } - - .compare-at { - color: color-mix(in srgb, currentColor 70%, transparent); - text-decoration: line-through; - } - } - - .description { - .card-placeholder { - font-size: var(--text-md); - } - } - - .inventory { - display: flex; - align-items: center; - gap: var(--gap-2xs); - - &[data-inventory-out-of-stock] { - .icon { - color: var(--color-gray-300); - } - } - - &[data-inventory-in-stock] { - .icon { - color: var(--color-success-500); - } - } - - &[data-inventory-low-stock] { - .icon { - color: var(--color-warning-500); - } - } - } - - .accordion { - border: 1px solid var(--color-gray-50); - border-radius: var(--accordion-border-radius, var(--radius-md)); - height: fit-content; - color: rgb(var(--accordion-foreground)); - - summary { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 15px; - cursor: pointer; - - .title { - font-size: var(--text-md); - font-weight: 500; - flex: 1; - user-select: none; - } - - .icon { - transition: var(--transition-duration-normal); - } - } - - .content { - font-size: var(--text-md); - padding: 12px 15px; - color: color-mix(in srgb, currentColor 70%, transparent); - } - - &[open] { - summary { - .icon { - rotate: 180deg; - } - } - } - } - } -} - +// Rating .rating { display: flex; align-items: center; @@ -460,6 +261,7 @@ yc-section { } } +// Quantity yc-quantity-control { display: flex; align-items: center; @@ -486,28 +288,12 @@ yc-quantity-control { grid-template-columns: repeat(2, 1fr); } } - - .single-product { - yc-product-media { - --main-image-height: 450px; - - flex-direction: column; - } - } } @include breakpoint("lg") { .items-grid { grid-template-columns: 1fr !important; } - - .single-product { - grid-template-columns: 1fr; - - yc-product-media { - position: static; - } - } } @include breakpoint("md") { @@ -517,26 +303,13 @@ yc-quantity-control { yc-section { padding-inline: 1em; + yc-section-head { p { font-size: var(--text-sm); } } } - - .single-product { - gap: var(--gap-lg); - } - - yc-product-media { - .gallery { - .slider-inner { - .image { - height: 70px !important; - } - } - } - } } // Keyframes diff --git a/themes/origins/styles/featured-product.scss b/themes/origins/styles/featured-product.scss new file mode 100644 index 00000000..ba8f8b0a --- /dev/null +++ b/themes/origins/styles/featured-product.scss @@ -0,0 +1,234 @@ +@import "./mixins/breakpoints"; + +.single-product { + --image-border: 1px solid color-mix(in srgb, currentColor 5%, transparent); + + position: relative; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--gap-3xl); + + yc-product-media { + --main-image-height: 550px; + + height: fit-content; + display: grid; + gap: var(--gap-sm); + position: sticky; + inset-block-start: var(--gap-lg); + + img { + user-select: none; + } + + .main-image { + position: relative; + width: 100%; + height: var(--main-image-height); + border-radius: var(--media-main-image-border-radius); + border: var(--image-border); + overflow: hidden; + + .count { + position: absolute; + font-size: var(--text-md); + padding: 0.5em 1.5em; + inset-inline-end: 1em; + inset-block-end: 1em; + border-radius: var(--radius-xl); + color: var(--section-bg-color, var(--color-base-white)); + backdrop-filter: var(--overlay-blur); + background-color: var(--overlay-background); + } + + img { + object-fit: cover; + } + + .placeholder { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: color-mix(in srgb, currentColor 5%, transparent); + color: color-mix(in srgb, currentColor 20%, transparent); + } + } + + .gallery { + .slider-inner { + padding: 0.25em; + + yc-slider-item { + max-width: 100px; + + .image { + height: 100px; + + scroll-snap-align: start; + cursor: pointer; + display: inline-block; + width: 100%; + border: var(--image-border); + border-radius: var(--media-gallery-border-radius); + overflow: hidden; + position: relative; + transition: var(--transition-duration-normal); + + &::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + border-radius: calc(var(--media-gallery-border-radius) - 1px); + backdrop-filter: var(--media-blur); + background-color: var(--media-background); + transition: var(--transition-duration-normal); + } + + &:hover::before { + opacity: 1; + } + + &:has(input:checked) { + box-shadow: var(--shadow-dark-focus-sm); + + &::before { + opacity: 1; + } + } + + img { + object-fit: cover; + } + } + } + } + } + } + + yc-product-info { + display: flex; + flex-direction: column; + gap: var(--gap-md); + + .price { + display: flex; + align-items: center; + gap: var(--gap-md); + + .current { + font-weight: 550; + } + + .compare-at { + color: color-mix(in srgb, currentColor 70%, transparent); + text-decoration: line-through; + } + } + + .description { + .card-placeholder { + font-size: var(--text-md); + } + } + + .inventory { + display: flex; + align-items: center; + gap: var(--gap-2xs); + + &[data-inventory-out-of-stock] { + .icon { + color: var(--color-gray-300); + } + } + + &[data-inventory-in-stock] { + .icon { + color: var(--color-success-500); + } + } + + &[data-inventory-low-stock] { + .icon { + color: var(--color-warning-500); + } + } + } + + .accordion { + border: 1px solid var(--color-gray-50); + border-radius: var(--accordion-border-radius, var(--radius-md)); + height: fit-content; + color: rgb(var(--accordion-foreground)); + + summary { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 15px; + cursor: pointer; + + .title { + font-size: var(--text-md); + font-weight: 500; + flex: 1; + user-select: none; + } + + .icon { + transition: var(--transition-duration-normal); + } + } + + .content { + font-size: var(--text-md); + padding: 12px 15px; + color: color-mix(in srgb, currentColor 70%, transparent); + } + + &[open] { + summary { + .icon { + rotate: 180deg; + } + } + } + } + } +} + +@include breakpoint("xl") { + .single-product { + yc-product-media { + --main-image-height: 450px; + + flex-direction: column; + } + } +} + +@include breakpoint("lg") { + .single-product { + grid-template-columns: 1fr; + + yc-product-media { + position: static; + } + } +} + +@include breakpoint("md") { + .single-product { + gap: var(--gap-lg); + + yc-product-media { + .gallery .slider-inner .image { + height: 70px !important; + } + } + } +}