133 lines
3.7 KiB
SCSS
133 lines
3.7 KiB
SCSS
//
|
|
// Gallery
|
|
// based on https://github.com/sachinchoolur/lightgallery.js
|
|
// --------------------------------------------------
|
|
|
|
|
|
.gallery {
|
|
--#{$prefix}gallery-overlay-bg: #{$gallery-overlay-bg};
|
|
--#{$prefix}gallery-indicator-size: #{$gallery-indicator-size};
|
|
--#{$prefix}gallery-image-indicator-color: #{$gallery-image-indicator-color};
|
|
--#{$prefix}gallery-image-indicator-font-size: #{$gallery-image-indicator-font-size};
|
|
--#{$prefix}gallery-video-indicator-bg: #{$gallery-video-indicator-bg};
|
|
--#{$prefix}gallery-video-indicator-color: #{$gallery-video-indicator-color};
|
|
--#{$prefix}gallery-video-indicator-font-size: #{$gallery-video-indicator-font-size};
|
|
--#{$prefix}gallery-video-indicator-box-shadow: #{$gallery-video-indicator-box-shadow};
|
|
--#{$prefix}gallery-video-indicator-hover-bg: #{$gallery-video-indicator-hover-bg};
|
|
--#{$prefix}gallery-video-indicator-hover-color: #{$gallery-video-indicator-hover-color};
|
|
--#{$prefix}gallery-video-indicator-hover-box-shadow: #{$gallery-video-indicator-hover-box-shadow};
|
|
|
|
|
|
}
|
|
.gallery-item {
|
|
display: block;
|
|
position: relative;
|
|
text-decoration: none !important;
|
|
overflow: hidden;
|
|
-webkit-mask-image: -webkit-radial-gradient(white, black);
|
|
|
|
> img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
// Overlay
|
|
&::before {
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: opacity .3s ease-in-out;
|
|
background-color: var(--#{$prefix}gallery-overlay-bg);
|
|
content: '';
|
|
opacity: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
// Indicator
|
|
&::after {
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: var(--#{$prefix}gallery-indicator-size);
|
|
height: var(--#{$prefix}gallery-indicator-size);
|
|
margin: {
|
|
top: calc(var(--#{$prefix}gallery-indicator-size) * -.5);
|
|
left: calc(var(--#{$prefix}gallery-indicator-size) * -.5);
|
|
}
|
|
transform: scale(.3);
|
|
color: var(--#{$prefix}gallery-image-indicator-color);
|
|
font: {
|
|
family: 'boxicons';
|
|
size: var(--#{$prefix}gallery-image-indicator-font-size);
|
|
}
|
|
text-align: center;
|
|
line-height: var(--#{$prefix}gallery-indicator-size);
|
|
content: '\ec90';
|
|
z-index: 5;
|
|
}
|
|
|
|
// Item caption
|
|
.gallery-item-caption {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
padding: $spacer;
|
|
transform: translateY(.5rem);
|
|
color: $gallery-caption-color;
|
|
z-index: 5;
|
|
}
|
|
|
|
&::after,
|
|
.gallery-item-caption {
|
|
transition: all .3s ease-in-out;
|
|
opacity: 0;
|
|
}
|
|
|
|
// Hover state
|
|
&:hover, &.is-hovered {
|
|
&::before, &::after,
|
|
.gallery-item-caption {
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Video item
|
|
&.video-item {
|
|
&::after {
|
|
padding: {
|
|
top: .0625rem;
|
|
left: .25rem;
|
|
}
|
|
transform: none;
|
|
border-radius: 50%;
|
|
background-color: var(--#{$prefix}gallery-video-indicator-bg);
|
|
color:var(--#{$prefix}gallery-video-indicator-color);
|
|
font-size: var(--#{$prefix}gallery-video-indicator-font-size);
|
|
opacity: 1;
|
|
@include box-shadow(var(--#{$prefix}gallery-video-indicator-box-shadow));
|
|
content: '\ebbd';
|
|
}
|
|
&:hover::after {
|
|
background-color: var(--#{$prefix}gallery-video-indicator-hover-bg);
|
|
color: var(--#{$prefix}gallery-video-indicator-hover-color);
|
|
@include box-shadow(var(--#{$prefix}gallery-video-indicator-hover-box-shadow));
|
|
}
|
|
}
|
|
}
|
|
.lg-backdrop { z-index: $zindex-modal-backdrop + 5; }
|
|
.lg-outer {
|
|
z-index: $zindex-modal + 5;
|
|
.lg-thumb-item:hover,
|
|
.lg-thumb-item.active {
|
|
border-color: var(--#{$prefix}primary);
|
|
}
|
|
}
|
|
.lg-on { overflow: hidden; }
|
|
.lg-item:focus, .lg:focus, .lg-outer:focus,
|
|
.lg-inner:focus { outline: none; }
|