455 lines
12 KiB
SCSS
455 lines
12 KiB
SCSS
$gallery: ".wc-block-product-gallery";
|
|
$large-image: "#{$gallery}-large-image";
|
|
$thumbnails: "#{$gallery}-thumbnails";
|
|
$next-previous: "#{$large-image}-next-previous";
|
|
$next-previous-left-off: "#{$next-previous}-left--off";
|
|
$next-previous-right-off: "#{$next-previous}-right--off";
|
|
$gallery-next-previous-outside-image: "#{$gallery}[data-next-previous-buttons-position='outsideTheImage']:not(.is-single-product-gallery-image)";
|
|
$gallery-next-previous-inside-image: "#{$gallery}:not([data-next-previous-buttons-position='outsideTheImage']:not(.is-single-product-gallery-image))";
|
|
|
|
$outside-image-offset: 30px;
|
|
$outside-image-max-width: calc(100% - (2 * $outside-image-offset));
|
|
$thumbnails-gap: 15px;
|
|
$default-number-of-thumbnails: 3;
|
|
$dialog-header-height: 29px;
|
|
$dialog-header-padding-top: calc(30px / 2);
|
|
$admin-bar-desktop-height: 32px;
|
|
$admin-bar-mobile-height: 46px;
|
|
|
|
// Product Gallery
|
|
#{$gallery} {
|
|
.wc-block-product-gallery-dialog__overlay {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #808080;
|
|
z-index: 9999;
|
|
}
|
|
|
|
dialog {
|
|
position: fixed;
|
|
border: none;
|
|
top: 0;
|
|
z-index: 9999;
|
|
padding-top: 0;
|
|
height: 100vh;
|
|
|
|
.admin-bar & {
|
|
margin-top: $admin-bar-desktop-height;
|
|
height: calc(100vh - $admin-bar-desktop-height);
|
|
}
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.admin-bar & {
|
|
margin-top: $admin-bar-mobile-height;
|
|
height: calc(100vh - $admin-bar-mobile-height);
|
|
}
|
|
}
|
|
|
|
.wc-block-product-gallery-dialog__header {
|
|
padding-top: $dialog-header-padding-top;
|
|
}
|
|
|
|
.wc-block-product-galler-dialog__header-right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.wc-block-product-gallery-dialog__close {
|
|
border: none;
|
|
background-color: transparent;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
#{$large-image} {
|
|
height: calc(100vh - $dialog-header-height - $dialog-header-padding-top);
|
|
|
|
.admin-bar & {
|
|
height: calc(100vh - $admin-bar-desktop-height - $dialog-header-height - $dialog-header-padding-top);
|
|
}
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.admin-bar & {
|
|
height: calc(100vh - $admin-bar-mobile-height - $dialog-header-height - $dialog-header-padding-top);
|
|
}
|
|
}
|
|
|
|
img {
|
|
object-fit: unset;
|
|
aspect-ratio: unset;
|
|
max-height: calc(100vh - (2 * $dialog-header-height) - $dialog-header-padding-top);
|
|
width: auto;
|
|
|
|
.admin-bar & {
|
|
max-height: calc(100vh - $admin-bar-desktop-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
|
|
}
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.admin-bar & {
|
|
max-height: calc(100vh - $admin-bar-mobile-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
|
|
}
|
|
}
|
|
}
|
|
|
|
.wc-block-product-gallery-large-image__wrapper {
|
|
align-items: center;
|
|
aspect-ratio: unset;
|
|
}
|
|
|
|
.wc-block-product-gallery-large-image__container {
|
|
height: calc(100vh - (2 * $dialog-header-height) - $dialog-header-padding-top);
|
|
overflow: hidden;
|
|
|
|
.admin-bar & {
|
|
height: calc(100vh - $admin-bar-desktop-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
|
|
}
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.admin-bar & {
|
|
height: calc(100vh - $admin-bar-mobile-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#{$next-previous} {
|
|
height: calc(100vh - $dialog-header-height - $dialog-header-padding-top);
|
|
|
|
.admin-bar & {
|
|
height: calc(100vh - $admin-bar-desktop-height - $dialog-header-height - $dialog-header-padding-top);
|
|
}
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.admin-bar & {
|
|
height: calc(100vh - $admin-bar-mobile-height - $dialog-header-height - $dialog-header-padding-top);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Large Image
|
|
#{$large-image} {
|
|
width: 100%;
|
|
height: fit-content;
|
|
position: relative;
|
|
overflow: hidden;
|
|
flex-grow: 1;
|
|
|
|
// Restrict the width of the Large Image when the Next/Previous buttons are outside the image.
|
|
#{$gallery-next-previous-outside-image} & .wc-block-product-gallery-large-image__image-element {
|
|
overflow: hidden;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
max-width: $outside-image-max-width;
|
|
}
|
|
|
|
.wc-block-product-gallery-large-image__wrapper {
|
|
aspect-ratio: 1 / 1;
|
|
flex-shrink: 0;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
scroll-snap-align: none center;
|
|
}
|
|
|
|
.wc-block-product-gallery-large-image__container {
|
|
display: flex;
|
|
overflow-x: hidden;
|
|
scroll-snap-type: x mandatory;
|
|
scroll-behavior: auto;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
align-items: center;
|
|
}
|
|
|
|
#{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element {
|
|
width: fit-content;
|
|
overflow: hidden;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
|
|
img {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
z-index: 1;
|
|
transition: all 0.1s linear;
|
|
aspect-ratio: 1 / 1;
|
|
object-fit: contain;
|
|
|
|
// Keep the order in this way. The hoverZoom class should override the full-screen-on-click class when both are applied.
|
|
&.wc-block-woocommerce-product-gallery-large-image__image--full-screen-on-click {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.wc-block-woocommerce-product-gallery-large-image__image--hoverZoom {
|
|
cursor: zoom-in;
|
|
}
|
|
}
|
|
|
|
.wc-block-product-gallery-large-image__inner-blocks {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
|
|
// Reset the margin of the inner blocks when the Next/Previous buttons are outside the image.
|
|
#{$gallery-next-previous-outside-image} & > * {
|
|
margin-left: $outside-image-offset;
|
|
margin-right: $outside-image-offset;
|
|
}
|
|
|
|
// Unset the margin of the inner blocks when the Next/Previous buttons are inside the image.
|
|
#{$gallery-next-previous-inside-image} & > * {
|
|
margin-left: unset;
|
|
margin-right: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Next/Previous Buttons
|
|
#{$next-previous} {
|
|
display: flex;
|
|
position: absolute;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
button {
|
|
cursor: pointer;
|
|
z-index: 3;
|
|
pointer-events: all;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.is-vertically-aligned-top {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.is-vertically-aligned-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.is-vertically-aligned-bottom {
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
|
|
// Next/Previous Buttons Settings
|
|
.wc-block-product-gallery-large-image-next-previous-settings {
|
|
width: 100%;
|
|
}
|
|
|
|
// Next/Previous Buttons Off Setting
|
|
#{$next-previous-left-off},
|
|
#{$next-previous-right-off} {
|
|
display: none;
|
|
}
|
|
|
|
// Next/Previous Buttons Inside the Image Settings
|
|
.wc-block-product-gallery-large-image-next-previous-left--inside-image {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.wc-block-product-gallery-large-image-next-previous-right--inside-image {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
// Next/Previous Buttons Outside the Image Settings
|
|
#{$gallery-next-previous-outside-image} .wc-block-product-gallery-large-image-next-previous-left--outside-image {
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
#{$gallery-next-previous-outside-image} .wc-block-product-gallery-large-image-next-previous-right--outside-image {
|
|
bottom: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
#{$gallery-next-previous-outside-image} #{$large-image} #{$next-previous} {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.wc-block-product-gallery-large-image-next-previous-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
width: 100%;
|
|
|
|
&.wc-block-product-gallery-large-image-next-previous--inside-image {
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
// Pager
|
|
.wc-block-product-gallery-pager__pager {
|
|
display: flex;
|
|
justify-content: center;
|
|
list-style: none;
|
|
gap: $gap-small;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.wc-block-product-gallery-pager__pager-item {
|
|
@include font-size(regular);
|
|
color: $gray-600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wc-block-product-gallery-pager__pager-item--is-active {
|
|
font-weight: bold;
|
|
color: $black;
|
|
}
|
|
|
|
// Thumbnails
|
|
#{$thumbnails} {
|
|
display: flex;
|
|
|
|
img {
|
|
cursor: pointer;
|
|
height: auto;
|
|
width: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
#{$gallery}[data-thumbnails-position='bottom'] & {
|
|
flex-direction: row;
|
|
gap: 0 15px;
|
|
}
|
|
|
|
#{$gallery}:not([data-thumbnails-position='bottom']) & {
|
|
flex-direction: column;
|
|
gap: 15px 0;
|
|
|
|
// Calculate the total width occupied by the gaps between thumbnails.
|
|
$gap-width: $thumbnails-gap * ($default-number-of-thumbnails - 1);
|
|
|
|
// Calculate the border width, which is multiplied by 2 to account for both sides of each thumbnail.
|
|
$border-width: #{$default-number-of-thumbnails * 1px * 2};
|
|
|
|
// Calculate the width of each thumbnail by accounting for the gap, border, and additional space.
|
|
flex-basis: calc((100% - #{$gap-width} - #{$border-width} - 4px) / #{$default-number-of-thumbnails});
|
|
}
|
|
|
|
@for $i from 3 through 8 {
|
|
#{$gallery}[data-thumbnails-number-of-thumbnails='#{$i}']:not([data-thumbnails-position='bottom']) & {
|
|
// Calculate the total width occupied by the gaps between thumbnails.
|
|
$gap-width: $thumbnails-gap * ($i - 1);
|
|
|
|
// Calculate the border width, which is multiplied by 2 to account for both sides of each thumbnail.
|
|
$border-width: $i * 1px * 2;
|
|
|
|
flex-basis: calc((100% - #{$gap-width} - #{$border-width}) / $i);
|
|
}
|
|
}
|
|
|
|
.wc-block-product-gallery-thumbnails__thumbnail {
|
|
border: 1px solid rgba($color: #000, $alpha: 0.1);
|
|
height: auto;
|
|
width: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
aspect-ratio: 1 / 1;
|
|
position: relative;
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
|
|
img {
|
|
aspect-ratio: 1 / 1;
|
|
object-fit: contain;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
padding-top: 100%;
|
|
}
|
|
|
|
@for $i from 3 through 8 {
|
|
#{$gallery}[data-thumbnails-number-of-thumbnails='#{$i}'][data-thumbnails-position="bottom"] & {
|
|
// Calculate the total width occupied by the gaps between thumbnails.
|
|
$gap-width: $thumbnails-gap * ($i - 1);
|
|
|
|
// Calculate the border width, which is multiplied by 2 to account for both sides of each thumbnail.
|
|
$border-width: $i * 1px * 2;
|
|
|
|
$thumbnail-width: calc((100% - #{$gap-width} - #{$border-width}) / $i);
|
|
|
|
flex: 0 0 $thumbnail-width;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wc-block-product-gallery-thumbnails__thumbnail__overlay {
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.wc-block-product-gallery-thumbnails__thumbnail__view-all {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count,
|
|
.wc-block-product-gallery-thumbnails__thumbnail__view-all {
|
|
color: #fff;
|
|
}
|
|
|
|
@mixin thumbnail-overlay-text-font-size($remaining-count-size, $view-all-size, $view-all-display: block) {
|
|
.wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
|
|
font-size: $remaining-count-size;
|
|
}
|
|
|
|
.wc-block-product-gallery-thumbnails__thumbnail__view-all {
|
|
font-size: $view-all-size;
|
|
display: $view-all-display;
|
|
}
|
|
}
|
|
|
|
@include thumbnail-overlay-text-font-size(clamp(1rem, 1.5vw, 2rem), clamp(0.75rem, 0.5vw, 2rem));
|
|
|
|
@for $i from 3 through 8 {
|
|
#{$gallery}[data-thumbnails-number-of-thumbnails='#{$i}'] & {
|
|
@if $i == 3 {
|
|
@include thumbnail-overlay-text-font-size(clamp(1rem, 1.5vw, 2rem), clamp(0.75rem, 0.5vw, 2rem));
|
|
} @else if $i == 4 or $i == 5 {
|
|
@include thumbnail-overlay-text-font-size(clamp(1rem, 1.25vw, 2rem), clamp(0.75rem, 0.25vw, 2rem));
|
|
} @else { // For 6, 7, and 8
|
|
@include thumbnail-overlay-text-font-size(clamp(1rem, 1.25vw, 2rem), null, none);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|