UNPKG

formstone

Version:

Library of modular front end components.

966 lines (744 loc) 17 kB
/** * @component * @name Number */ @import "imports/utils.less"; // Overlay @fs-lightbox-overlay-background: #000; @fs-lightbox-overlay-opacity: 0.75; // Transition @fs-lightbox-transition-duration: 0.25s; @fs-lightbox-transition-timing: ease; // Lightbox @fs-lightbox-background: #fff; @fs-lightbox-z-index: 100; // Container @fs-lightbox-container-background: #fff; // Content @fs-lightbox-content-background: #fff; // Controls @fs-lightbox-control-previous-left: 0; @fs-lightbox-control-next-right: 0; // Mobile @fs-lightbox-mobile-background: #111; // Mobile Container @fs-lightbox-mobile-container-background: #111; // Mobile Content @fs-lightbox-mobile-content-background: #111; // Mobile Meta @fs-lightbox-mobile-meta-background: #111; @fs-lightbox-mobile-meta-padding: 15px; // Mobile Position @fs-lightbox-mobile-position-text-color: #999; // Mobile Caption @fs-lightbox-mobile-caption-text-color: #eee; @fs-lightbox-mobile-caption-background: #222; @fs-lightbox-mobile-caption-button-text-color: #999; // Mobile Thumbnails @fs-lightbox-thumbnail-size: 50px; @fs-lightbox-thumbnail-margin: 0 10px 0 0; @fs-lightbox-thumbnail-opacity: 0.25; @fs-lightbox-thumbnail-padding: 10px; @fs-lightbox-thumbnail-scrollbar-size: 30px; @fs-lightbox-mobile-thumbnail-background: #111; /** * @class * @name .fs-lightbox-element * @type element * @description Target elmement */ /** * @class * @name .fs-lightbox * @type element * @description Base widget class */ /** * @class * @name .fs-lightbox.fs-lightbox-open * @type modifier * @description Indicates open state */ /** * @class * @name .fs-lightbox.fs-lightbox-loading * @type modifier * @description Indicates loading state */ /** * @class * @name .fs-lightbox.fs-lightbox-animating * @type modifier * @description Indicates animating state */ /** * @class * @name .fs-lightbox.fs-lightbox-mobile * @type modifier * @description Indicates mobile display */ /** * @class * @name .fs-lightbox.fs-lightbox-fixed * @type modifier * @description Indicates fixed positioning */ /** * @class * @name .fs-lightbox.fs-lightbox-inline * @type modifier * @description Indicates inline content */ /** * @class * @name .fs-lightbox.fs-lightbox-iframed * @type modifier * @description Indicates iFrame content */ /** * @class * @name .fs-lightbox.fs-lightbox-has_caption * @type modifier * @description Indicates caption is present */ /** * @class * @name .fs-lightbox.fs-lightbox-has_controls * @type modifier * @description Indicates controls are present */ .fs-lightbox { width: 200px; height: 200px; position: absolute; right: 0; left: 0; z-index: (@fs-lightbox-z-index + 1); background: @fs-lightbox-background; opacity: 0; margin: 0 auto; transform: translateZ(0); &, *:not(input):not(textarea) { box-sizing: border-box; user-select: none !important; } // fixed &-fixed { position: fixed; top: 0; bottom: 0; margin: auto; } // inline &-inline { } // animating &-animating { transition: height @fs-lightbox-transition-duration @fs-lightbox-transition-timing, width @fs-lightbox-transition-duration @fs-lightbox-transition-timing, opacity @fs-lightbox-transition-duration linear, top @fs-lightbox-transition-duration @fs-lightbox-transition-timing; } // &-animating &-container { &-animating &-content, &-animating &-thumbnails, &-animating &-tools, &-animating &-meta, &-animating &-control { transition: opacity @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration, visibility @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration; } // &-mobile &-image_container { // transition: // top @fs-lightbox-transition-duration @fs-lightbox-transition-timing, // left @fs-lightbox-transition-duration @fs-lightbox-transition-timing; // } // // &-mobile &-image { // transition: // height @fs-lightbox-transition-duration @fs-lightbox-transition-timing, // width @fs-lightbox-transition-duration @fs-lightbox-transition-timing, // top @fs-lightbox-transition-duration @fs-lightbox-transition-timing, // left @fs-lightbox-transition-duration @fs-lightbox-transition-timing; // } // // Scaling // // &-mobile&-scaling &-image_container { // transition: none !important; // } // // &-mobile&-scaling &-image { // transition: none !important; // } // // Zooming // // &-mobile&-zooming &-image_container { // transition: // top @fs-lightbox-transition-duration @fs-lightbox-transition-timing, // left @fs-lightbox-transition-duration @fs-lightbox-transition-timing !important; // } // // &-mobile&-zooming &-image { // transition: // height @fs-lightbox-transition-duration @fs-lightbox-transition-timing, // width @fs-lightbox-transition-duration @fs-lightbox-transition-timing, // top @fs-lightbox-transition-duration @fs-lightbox-transition-timing, // left @fs-lightbox-transition-duration @fs-lightbox-transition-timing !important; // } /** * @class * @name .fs-lightbox-overlay * @type element * @description Overlay element */ &-overlay { width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: @fs-lightbox-z-index; background: @fs-lightbox-overlay-background; opacity: 0; transition: opacity @fs-lightbox-transition-duration linear; } // open &-open { opacity: 1; } &-overlay&-open { opacity: @fs-lightbox-overlay-opacity; } /** * @class * @name .fs-lightbox-close * @type element * @description Close element */ &-close { .fs_button; position: absolute; top: 0; right: 0; z-index: (@fs-lightbox-z-index + 5); cursor: pointer; display: block; overflow: hidden; padding: 0; } /** * @class * @name .fs-lightbox-loading_icon * @type element * @description Loading icon element */ &-loading_icon { } /** * @class * @name .fs-lightbox-container * @type element * @description Container element */ &-container { .fs_clearfix(); width: 100%; height: 100%; position: relative; z-index: (@fs-lightbox-z-index + 3); background: @fs-lightbox-container-background; overflow: hidden; } /** * @class * @name .fs-lightbox-content * @type element * @description Content element */ &-content { .fs_clearfix(); width: 100%; background: @fs-lightbox-content-background; opacity: 1; overflow: hidden; padding: 0; visibility: visible; } // inline content &-inline &-content { width: auto; overflow: auto; -webkit-overflow-scrolling: touch; } // iframed content &-iframed &-content { width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } &-mobile &-image_container { width: 1px; height: 1px; position: absolute; margin: 0; transform: translate3D(0, 0, 0); } /** * @class * @name .fs-lightbox-image * @type element * @description Image element */ &-image { display: block; } &-mobile &-image { position: relative; } /** * @class * @name .fs-lightbox-video * @type element * @description Video element */ &-video { width: 100%; height: 100%; } /** * @class * @name .fs-lightbox-iframe * @type element * @description iFrame element */ &-iframe { width: 100%; height: 100%; border: none; overflow: auto; } /** * @class * @name .fs-lightbox-tools * @type element * @description Tools element */ &-tools { } /** * @class * @name .fs-lightbox-meta * @type element * @description Meta info element */ &-meta { opacity: 1; clear: both; visibility: visible; } /** * @class * @name .fs-lightbox-controls * @type element * @description Controls container element */ &-controls { } /** * @class * @name .fs-lightbox-control * @type element * @description Control element */ &-control { .fs_button; position: absolute; top: 0; z-index: (@fs-lightbox-z-index + 5); cursor: pointer; display: block; margin-right: auto; margin-left: auto; opacity: 1; visibility: visible; white-space: nowrap; } /** * @class * @name .fs-lightbox-control.fs-lightbox-control_previous * @type modifier * @description Indicates previous control */ &-control_previous { left: @fs-lightbox-control-previous-left; } /** * @class * @name .fs-lightbox-control.fs-lightbox-control_next * @type modifier * @description Indicates next control */ &-control_next { right: @fs-lightbox-control-next-right; } /** * @class * @name .fs-lightbox-control.fs-lightbox-control_disabled * @type modifier * @description Indicates disbaled state */ &-control_disabled { opacity: 0; visibility: hidden; } // controls hovers .no-touchevents & &-control { } .no-touchevents &:hover &-control { } .no-touchevents & &-control_disabled, .no-touchevents &:hover &-control_disabled { opacity: 0; visibility: hidden; } /** * @class * @name .fs-lightbox-position * @type element * @description Position element */ /** * @class * @name .fs-lightbox-position_current * @type element * @description Current position element */ /** * @class * @name .fs-lightbox-position_total * @type element * @description Total position element */ &-position { } /** * @class * @name .fs-lightbox-caption * @type element * @description Caption element */ &-caption { .fs_clearfix(); & p { } } &-toggle { .fs_button; display: none; } /** * @class * @name .fs-lightbox-error * @type element * @description Error message element */ &-error { p { } } // Thumbnails /** * @class * @name .fs-lightbox-thumbnails * @type element * @description */ &-thumbnails { height: @fs-lightbox-thumbnail-size + @fs-lightbox-thumbnail-padding; clear: both; overflow: hidden; padding: 0; } /** * @class * @name .fs-lightbox-thumbnail_container * @type element * @description */ &-thumbnail_container { height: @fs-lightbox-thumbnail-size + @fs-lightbox-thumbnail-scrollbar-size; position: relative; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 0 0 @fs-lightbox-thumbnail-scrollbar-size; text-align: center; white-space: nowrap; } /** * @class * @name .fs-lightbox-thumbnail_item * @type element * @description */ &-thumbnail_item { width: @fs-lightbox-thumbnail-size; height: @fs-lightbox-thumbnail-size; position: relative; background: none; border: none; display: inline-block; margin: @fs-lightbox-thumbnail-margin; opacity: @fs-lightbox-thumbnail-opacity; overflow: hidden; padding: 0; transition: opacity @fs-lightbox-transition-duration linear; &:last-child { margin: 0; } img { width: 100%; height: auto; position: absolute; top: 50%; display: block; transform: translateY(-50%); } } &-thumbnail_item&-active, .no-touchevents &-thumbnail_item:hover { opacity: 1; } // loading // &-loading &-container { &-loading &-content, &-loading &-thumbnails, &-loading &-tools, &-loading &-meta, &-loading &-control { opacity: 0; transition: opacity @fs-lightbox-transition-duration linear, visibility @fs-lightbox-transition-duration linear; visibility: hidden; } &-loading &-loading_icon, &-ready&-loading &-thumbnails, &-ready&-loading &-tools { opacity: 1; visibility: visible; } // mobile &-mobile { width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: @fs-lightbox-mobile-background; border-radius: 0; } // close &-mobile &-close { } &-mobile &-close:before { } // loading &-mobile &-loading_icon { } &-mobile &-loading_icon:before { } &-mobile &-loading_icon:after { } // container &-mobile &-container { position: static; background: @fs-lightbox-mobile-container-background; } // content &-mobile &-content { height: 100%; background-color: @fs-lightbox-mobile-content-background; } // tools &-mobile &-tools { width: 100%; position: fixed; right: 0; bottom: 0; left: 0; background-color: @fs-lightbox-mobile-meta-background; } // controls &-mobile &-controls { text-align: center; } // control &-mobile &-control { opacity: 1; visibility: visible; } &-mobile &-control_previous { } &-mobile &-control_next { } // controls hovers .no-touchevents &-mobile &-control, .no-touchevents &-mobile:hover &-control { visibility: visible; } &-mobile &-control_disabled, .no-touchevents &-mobile &-control_disabled, .no-touchevents &-mobile:hover &-control_disabled { cursor: default !important; opacity: 0; visibility: hidden; } // meta &-mobile &-meta { } // position &-mobile &-position { color: @fs-lightbox-mobile-position-text-color; } // caption &-mobile &-caption { p { color: @fs-lightbox-mobile-caption-text-color; } } // image &-mobile &-image { transform: translate(0, 0); // transition: none !important; } // inline / iframe content &-mobile&-inline &-content, &-mobile&-iframe &-content { height: 100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } // touch captions &-mobile&-touch &-tools { width: auto; position: static; background: transparent; } &-mobile&-touch &-controls { position: fixed; right: 0; bottom: 0; left: 0; z-index: (@fs-lightbox-z-index + 5); background-color: @fs-lightbox-mobile-meta-background; } &-mobile&-touch &-toggle { display: inline-block; margin: 0 5px; } &-mobile&-touch &-meta { width: 100%; height: 80%; position: fixed; right: 0; bottom: 0; left: 0; z-index: (@fs-lightbox-z-index + 4); background: @fs-lightbox-mobile-caption-background; transform: translate(0, 100%); transition: transform @fs-lightbox-transition-duration @fs-lightbox-transition-timing, opacity @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration, visibility @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration; } // caption open &-touch&-caption_open &-meta { transform: translate(0, 0); } // thumbnails &-mobile&-touch &-thumbnails { width: 100%; height: @fs-lightbox-thumbnail-size + 20px; position: fixed; right: 0; bottom: 0; left: 0; z-index: (@fs-lightbox-z-index + 4); background: @fs-lightbox-mobile-thumbnail-background; transform: translate(0, 100%); transition: transform @fs-lightbox-transition-duration @fs-lightbox-transition-timing, opacity @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration, visibility @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration; } &-mobile&-touch &-thumbnail_container { height: (@fs-lightbox-thumbnail-size * 2); } // thumbnails open &-touch&-thumbnails_open &-thumbnails { transform: translate(0, 0); } /** * @class * @name .fs-lightbox-lock * @type modifier * @description Indicates locked state; Applied to body element */ &-lock { overflow: hidden !important; } // Viewer support &-mobile&-touch &-container, &-mobile&-touch &-content { overflow: visible; } &-mobile&-touch &-content { position: relative; } .fs-viewer { top: 0; bottom: 0; &, .fs-viewer-wrapper { height: auto; width: auto; position: absolute; right: 0; left: 0; background: @fs-lightbox-mobile-background; } .fs-viewer-wrapper { top: 0; bottom: 0; } .fs-viewer-loading_icon { display: none !important; } .fs-viewer-viewport { top: 5px; right: 15px; bottom: 15px; left: 15px; } .fs-viewer-controls { position: absolute; // top: 0; bottom: 10px; } .fs-viewer-control, .no-touchevents & .fs-viewer-control:hover { } .fs-viewer-control { } } }