You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.6 KiB
SCSS
69 lines
1.6 KiB
SCSS
.lg-outer {
|
|
// reset transition duration
|
|
&.lg-css3.lg-zoom-dragging {
|
|
.lg-item.lg-complete.lg-zoomable {
|
|
.lg-img-wrap, .lg-image {
|
|
@include transition-duration(0s);
|
|
}
|
|
}
|
|
}
|
|
&.lg-use-transition-for-zoom {
|
|
.lg-item.lg-complete.lg-zoomable {
|
|
.lg-img-wrap {
|
|
@include transitionCustom(transform $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s);
|
|
}
|
|
}
|
|
}
|
|
&.lg-use-left-for-zoom {
|
|
.lg-item.lg-complete.lg-zoomable {
|
|
.lg-img-wrap {
|
|
@include transitionCustom(left $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s, top $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s);
|
|
}
|
|
}
|
|
}
|
|
|
|
.lg-item.lg-complete.lg-zoomable{
|
|
|
|
.lg-img-wrap {
|
|
@include translate3d(0, 0, 0);
|
|
@include backface-visibility(hidden);
|
|
}
|
|
|
|
.lg-image {
|
|
// Translate required for zoom
|
|
@include scale3d(1, 1, 1);
|
|
@include transitionCustom(transform $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important);
|
|
@include transform-origin(0 0);
|
|
@include backface-visibility(hidden);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// zoom buttons
|
|
#lg-zoom-in {
|
|
&:after {
|
|
content: "\e311";
|
|
}
|
|
}
|
|
|
|
#lg-actual-size {
|
|
font-size: 20px;
|
|
&:after {
|
|
content: "\e033";
|
|
}
|
|
}
|
|
|
|
#lg-zoom-out {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
|
|
&:after {
|
|
content: "\e312";
|
|
}
|
|
|
|
.lg-zoomed & {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
} |