formstone
Version:
Library of modular front end components.
331 lines (248 loc) • 6.95 kB
text/less
/**
* @theme
* @name Light
* @component Viewer
*/
.fs-viewer {
@import "_config.less";
@theme_name: fs-light;
// Config
@fs-viewer-z-index: 1;
@fs-viewer-transition-duration: 0.25s;
@fs-viewer-transition-timing: ease;
// Viewport
@fs-viewer-viewport-position: 30px;
// Wrapper
@fs-viewer-wrapper-background: @fs-light-primary_50;
// Container
// Controls
@fs-viewer-controls-background: @fs-light-white;
@fs-viewer-controls-border-radius: 4px;
@fs-viewer-controls-box-shadow: 0 0 5px fade(@fs-light-black, 25);
@fs-viewer-controls-padding: 5px;
// Control
@fs-viewer-control-size: 30px;
@fs-viewer-control-color: @fs-light-primary_600;
@fs-viewer-control-background: @fs-light-white;
@fs-viewer-control-border-radius: 2px;
@fs-viewer-control-hover-background: @fs-light-primary_100;
@fs-viewer-control-hover-color: @fs-light-primary_900;
// Caret
@fs-viewer-control-caret-size: 6px;
@fs-viewer-control-caret-width: (@fs-viewer-control-caret-size * 1.4);
@fs-viewer-control-caret-margin: (@fs-viewer-control-size - (@fs-viewer-control-caret-size * 1.7)) / 2;
// Zoom
@fs-viewer-control-zoom-width: 11px;
@fs-viewer-control-zoom-height: 3px;
// Loading Icons
@fs-viewer-loading-width: 50px;
@fs-viewer-loading-height: 50px;
@fs-viewer-loading-color: @fs-light-primary_900;
@fs-viewer-loading-size: 5px;
@fs-viewer-loading-animation-duration: 0.75s;
// Element
position: relative;
&.@{theme_name} &-source {
display: none ;
}
&.@{theme_name} &-wrapper {
position: relative;
background: @fs-viewer-wrapper-background;
overflow: hidden;
transition: none;
height: 300px;
}
&.@{theme_name} &-viewport {
position: absolute;
top: @fs-viewer-viewport-position;
right: @fs-viewer-viewport-position;
bottom: @fs-viewer-viewport-position;
left: @fs-viewer-viewport-position;
}
&.@{theme_name} &-container {
width: 1px;
height: 1px;
position: absolute;
z-index: @fs-viewer-z-index;
margin: 0;
opacity: 1;
transform: translate3D(0, 0, 0);
transition: opacity @fs-viewer-transition-duration @fs-viewer-transition-timing;
}
// Loading
&.@{theme_name}&-loading &-container {
opacity: 0;
}
&.@{theme_name}&-image {
position: absolute;
}
// Animating
&.@{theme_name}&-scaling &-container {
transition: none ;
}
&.@{theme_name}&-scaling &-image {
transition: none ;
}
// Controls
&.@{theme_name} &-controls {
width: (@fs-viewer-control-size * 2) + (@fs-viewer-controls-padding * 2);
height: @fs-viewer-control-size + (@fs-viewer-controls-padding * 2);
position: absolute;
right: 0;
bottom: 10px;
left: 0;
z-index: (@fs-viewer-z-index + 3);
background: @fs-viewer-controls-background;
border-radius: @fs-viewer-controls-border-radius;
box-shadow: @fs-viewer-controls-box-shadow;
display: flex;
flex-wrap: nowrap;
margin: 0 auto;
padding: @fs-viewer-controls-padding;
}
&.@{theme_name} &-control {
width: @fs-viewer-control-size;
height: @fs-viewer-control-size;
position: relative;
background: @fs-viewer-control-background;
border: none;
border-radius: @fs-viewer-control-border-radius;
color: @fs-viewer-control-color;
display: block;
overflow: hidden;
text-indent: 200%;
white-space: nowrap;
&:before,
&:after {
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
margin: auto;
}
.no-touchevents &:hover {
background: @fs-viewer-control-hover-background;
color: @fs-viewer-control-hover-color;
&:after {
}
}
}
.no-touchevents &.@{theme_name} &-control_disabled,
.no-touchevents &.@{theme_name}:hover &-control_disabled {
opacity: 0;
cursor: default;
visibility: hidden;
}
&.@{theme_name} &-control_previous,
&.@{theme_name} &-control_next {
display: none;
font-size: 10px;
&:after {
display: none;
}
}
&.@{theme_name} &-control_previous {
&:before {
border-top: @fs-viewer-control-caret-size solid transparent;
border-bottom: @fs-viewer-control-caret-size solid transparent;
border-right: @fs-viewer-control-caret-width solid @fs-viewer-control-color;
margin-left: @fs-viewer-control-caret-margin;
}
}
&.@{theme_name} &-control_next {
&:before {
border-top: @fs-viewer-control-caret-size solid transparent;
border-bottom: @fs-viewer-control-caret-size solid transparent;
border-left: @fs-viewer-control-caret-width solid @fs-viewer-control-color;
margin-right: @fs-viewer-control-caret-margin;
}
}
&.@{theme_name} &-control_zoom_in,
&.@{theme_name} &-control_zoom_out {
font-size: 20px;
&:before,
&:after {
background: @fs-viewer-control-color;
}
&:before {
width: @fs-viewer-control-zoom-width;
height: @fs-viewer-control-zoom-height;
}
}
&.@{theme_name} &-control_zoom_out {
&:after {
display: none;
}
}
&.@{theme_name} &-control_zoom_in {
// Vertical
&:after {
width: @fs-viewer-control-zoom-height;
height: @fs-viewer-control-zoom-width;
background: @fs-viewer-control-color;
}
}
// Gallery
&.@{theme_name}&-gallery &-controls {
width: (@fs-viewer-control-size * 4) + (@fs-viewer-controls-padding * 2);
}
&.@{theme_name}&-gallery &-control_previous,
&.@{theme_name}&-gallery &-control_next {
display: block;
}
// Loading icon
&.@{theme_name} &-loading_icon {
width: @fs-viewer-loading-width;
height: @fs-viewer-loading-height;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: (@fs-viewer-z-index + 5);
display: block;
margin: auto;
opacity: 0;
transition:
opacity @fs-viewer-transition-duration linear,
visibility @fs-viewer-transition-duration linear;
visibility: hidden;
&:before,
&:after {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 110%;
content: '';
display: block;
}
&:before {
border: @fs-viewer-loading-size solid fade(@fs-viewer-loading-color, 25);
}
&:after {
animation: fs-lightbox-loading-spin @fs-viewer-loading-animation-duration linear infinite;
border: @fs-viewer-loading-size solid transparent;
border-top-color: @fs-viewer-loading-color;
}
}
@keyframes fs-lightbox-loading-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.@{theme_name}&-loading &-loading_icon {
opacity: 1;
visibility: visible;
}
}