179 lines
2.8 KiB
SCSS
179 lines
2.8 KiB
SCSS
//
|
|
// Lightbox Styles //
|
|
//
|
|
.lightbox-image-box,
|
|
.lightbox-media-box {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: block;
|
|
&[class*=' border-radius-'], &[class^='border-radius-'] {
|
|
@include transform(translate3d(0,0,0));
|
|
}
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
background: $color-black-01;
|
|
@include transition(ease-out 0.12s);
|
|
}
|
|
img {
|
|
@include transform(scale(1));
|
|
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
}
|
|
i {
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
@include transform(translate(-50%, -50%));
|
|
background: $color-black-06;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
color: $color-white-09;
|
|
@include transition(ease-out 0.16s);
|
|
}
|
|
&.icon-xl, &.icon-2xl {
|
|
i {
|
|
width: 70px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
}
|
|
}
|
|
&.icon-3xl, &.icon-4xl, &.icon-5xl {
|
|
i {
|
|
width: 80px;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
}
|
|
}
|
|
&:hover {
|
|
&:after {
|
|
opacity: 1;
|
|
}
|
|
img {
|
|
@include transform(scale(1.04));
|
|
}
|
|
i {
|
|
@include transform(translate(-50%, -50%) scale(0.94));
|
|
}
|
|
}
|
|
}
|
|
|
|
.mfp-bg {
|
|
background: $color-black;
|
|
}
|
|
.mfp-container,
|
|
.mfp-bg {
|
|
opacity: 0;
|
|
-webkit-backface-visibility: hidden;
|
|
@include transition(ease-out 0.16s);
|
|
}
|
|
.mfp-container {
|
|
@include transform(scale(0.98));
|
|
padding: 0 20px;
|
|
}
|
|
.mfp-ready {
|
|
.mfp-container {
|
|
@include transform(scale(1));
|
|
opacity: 1;
|
|
}
|
|
&.mfp-bg {
|
|
opacity: 0.97;
|
|
}
|
|
}
|
|
.mfp-removing {
|
|
.mfp-container,
|
|
&.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
.mfp-container {
|
|
@include transform(scale(0.98));
|
|
}
|
|
}
|
|
|
|
button {
|
|
&.mfp-close {
|
|
display: block;
|
|
top: -5px;
|
|
opacity: 1;
|
|
width: auto;
|
|
height: auto;
|
|
line-height: auto;
|
|
font-size: 24px;
|
|
@include transition(linear 0.1s);
|
|
&:hover {
|
|
top: -5px;
|
|
opacity: 1;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.mfp-iframe-holder {
|
|
.mfp-close {
|
|
top: -45px;
|
|
&:hover { top: -45px; }
|
|
}
|
|
}
|
|
.mfp-close-btn-in {
|
|
.mfp-close {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
}
|
|
|
|
.mfp-arrow {
|
|
@include transition(linear 0.1s);
|
|
}
|
|
.mfp-arrow-left {
|
|
&:before { border-right: 0; }
|
|
}
|
|
.mfp-arrow-right {
|
|
&:before { border-left: 0; }
|
|
}
|
|
|
|
@include breakpoint-less(xs) {
|
|
button.mfp-arrow {
|
|
background: $color-black-05;
|
|
width: 70px;
|
|
height: 70px;
|
|
margin-top: -35px;
|
|
&:active {
|
|
margin-top: -35px;
|
|
}
|
|
}
|
|
button.mfp-arrow-left {
|
|
margin-left: 20px;
|
|
&:before, &:after {
|
|
margin-top: 15px;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
button.mfp-arrow-right {
|
|
margin-right: 20px;
|
|
&:before, &:after {
|
|
margin-top: 15px;
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mfp-bottom-bar {
|
|
margin-top: -30px;
|
|
.mfp-title {
|
|
color: $color-white-07;
|
|
}
|
|
.mfp-counter {
|
|
color: $color-white-06;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.mfp-iframe-scaler iframe, .mfp-figure::after {
|
|
@include box-shadow(0 0 14px 0 rgba(0,0,0,0.3));
|
|
} |