diff options
Diffstat (limited to 'static/css/sass/vendor/magnific-popup/magnific-popup.scss')
| -rw-r--r-- | static/css/sass/vendor/magnific-popup/magnific-popup.scss | 645 |
1 files changed, 645 insertions, 0 deletions
diff --git a/static/css/sass/vendor/magnific-popup/magnific-popup.scss b/static/css/sass/vendor/magnific-popup/magnific-popup.scss new file mode 100644 index 0000000..e956385 --- /dev/null +++ b/static/css/sass/vendor/magnific-popup/magnific-popup.scss @@ -0,0 +1,645 @@ +/* Magnific Popup CSS */ + +@import "settings"; + +//////////////////////// +// +// Contents: +// +// 1. Default Settings +// 2. General styles +// - Transluscent overlay +// - Containers, wrappers +// - Cursors +// - Helper classes +// 3. Appearance +// - Preloader & text that displays error messages +// - CSS reset for buttons +// - Close icon +// - "1 of X" counter +// - Navigation (left/right) arrows +// - Iframe content type styles +// - Image content type styles +// - Media query where size of arrows is reduced +// - IE7 support +// +//////////////////////// + + + +//////////////////////// +// 1. Default Settings +//////////////////////// + +$mfp-overlay-color: #0b0b0b !default; +$mfp-overlay-opacity: 0.8 !default; +$mfp-shadow: 0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow on image or iframe +$mfp-popup-padding-left: 8px !default; // Padding from left and from right side +$mfp-popup-padding-left-mobile: 6px !default; // Same as above, but is applied when width of window is less than 800px + +$mfp-z-index-base: 1040 !default; // Base z-index of popup +$mfp-include-arrows: true !default; // include styles for nav arrows +$mfp-controls-opacity: 0.65 !default; +$mfp-controls-color: #FFF !default; +$mfp-controls-border-color: #3F3F3F !default; +$mfp-inner-close-icon-color: #333 !default; +$mfp-controls-text-color: #CCC !default; // Color of preloader and "1 of X" indicator +$mfp-controls-text-color-hover: #FFF !default; +$mfp-IE7support: true !default; // Very basic IE7 support + +// Iframe-type options +$mfp-include-iframe-type: true !default; +$mfp-iframe-padding-top: 40px !default; +$mfp-iframe-background: #000 !default; +$mfp-iframe-max-width: 900px !default; +$mfp-iframe-ratio: 9/16 !default; + +// Image-type options +$mfp-include-image-type: true !default; +$mfp-image-background: #444 !default; +$mfp-image-padding-top: 40px !default; +$mfp-image-padding-bottom: 40px !default; +$mfp-include-mobile-layout-for-image: true !default; // Removes paddings from top and bottom + +// Image caption options +$mfp-caption-title-color: #F3F3F3 !default; +$mfp-caption-subtitle-color: #BDBDBD !default; + +// A11y +$mfp-use-visuallyhidden: false !default; // Hide content from browsers, but make it available for screen readers + + + +//////////////////////// +// 2. General styles +//////////////////////// + +// Transluscent overlay +.mfp-bg { + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: $mfp-z-index-base + 2; + overflow: hidden; + position: fixed; + + background: $mfp-overlay-color; + opacity: $mfp-overlay-opacity; + @if $mfp-IE7support { + filter: unquote("alpha(opacity=#{$mfp-overlay-opacity*100})"); + } +} + +// Wrapper for popup +.mfp-wrap { + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: $mfp-z-index-base + 3; + position: fixed; + outline: none !important; + -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar +} + +// Root container +.mfp-container { + text-align: center; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + padding: 0 $mfp-popup-padding-left; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +// Vertical centerer helper +.mfp-container { + &:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + } +} + +// Remove vertical centering when popup has class `mfp-align-top` +.mfp-align-top { + .mfp-container { + &:before { + display: none; + } + } +} + +// Popup content holder +.mfp-content { + position: relative; + display: inline-block; + vertical-align: middle; + margin: 0 auto; + text-align: left; + z-index: $mfp-z-index-base + 5; +} +.mfp-inline-holder, +.mfp-ajax-holder { + .mfp-content { + width: 100%; + cursor: auto; + } +} + +// Cursors +.mfp-ajax-cur { + cursor: progress; +} +.mfp-zoom-out-cur { + &, .mfp-image-holder .mfp-close { + cursor: -moz-zoom-out; + cursor: -webkit-zoom-out; + cursor: zoom-out; + } +} +.mfp-zoom { + cursor: pointer; + cursor: -webkit-zoom-in; + cursor: -moz-zoom-in; + cursor: zoom-in; +} +.mfp-auto-cursor { + .mfp-content { + cursor: auto; + } +} + +.mfp-close, +.mfp-arrow, +.mfp-preloader, +.mfp-counter { + -webkit-user-select:none; + -moz-user-select: none; + user-select: none; +} + +// Hide the image during the loading +.mfp-loading { + &.mfp-figure { + display: none; + } +} + +// Helper class that hides stuff +@if $mfp-use-visuallyhidden { + // From HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/css.md#visuallyhidden + .mfp-hide { + border: 0 !important; + clip: rect(0 0 0 0) !important; + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + } +} @else { + .mfp-hide { + display: none !important; + } +} + + +//////////////////////// +// 3. Appearance +//////////////////////// + +// Preloader and text that displays error messages +.mfp-preloader { + color: $mfp-controls-text-color; + position: absolute; + top: 50%; + width: auto; + text-align: center; + margin-top: -0.8em; + left: 8px; + right: 8px; + z-index: $mfp-z-index-base + 4; + a { + color: $mfp-controls-text-color; + &:hover { + color: $mfp-controls-text-color-hover; + } + } +} + +// Hide preloader when content successfully loaded +.mfp-s-ready { + .mfp-preloader { + display: none; + } +} + +// Hide content when it was not loaded +.mfp-s-error { + .mfp-content { + display: none; + } +} + +// CSS-reset for buttons +button { + &.mfp-close, + &.mfp-arrow { + overflow: visible; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + display: block; + outline: none; + padding: 0; + z-index: $mfp-z-index-base + 6; + -webkit-box-shadow: none; + box-shadow: none; + } + &::-moz-focus-inner { + padding: 0; + border: 0 + } +} + + +// Close icon +.mfp-close { + width: 44px; + height: 44px; + line-height: 44px; + + position: absolute; + right: 0; + top: 0; + text-decoration: none; + text-align: center; + opacity: $mfp-controls-opacity; + @if $mfp-IE7support { + filter: unquote("alpha(opacity=#{$mfp-controls-opacity*100})"); + } + padding: 0 0 18px 10px; + color: $mfp-controls-color; + + font-style: normal; + font-size: 28px; + font-family: Arial, Baskerville, monospace; + + &:hover, + &:focus { + opacity: 1; + @if $mfp-IE7support { + filter: unquote("alpha(opacity=#{1*100})"); + } + } + + &:active { + top: 1px; + } +} +.mfp-close-btn-in { + .mfp-close { + color: $mfp-inner-close-icon-color; + } +} +.mfp-image-holder, +.mfp-iframe-holder { + .mfp-close { + color: $mfp-controls-color; + right: -6px; + text-align: right; + padding-right: 6px; + width: 100%; + } +} + +// "1 of X" counter +.mfp-counter { + position: absolute; + top: 0; + right: 0; + color: $mfp-controls-text-color; + font-size: 12px; + line-height: 18px; +} + +// Navigation arrows +@if $mfp-include-arrows { + .mfp-arrow { + position: absolute; + opacity: $mfp-controls-opacity; + @if $mfp-IE7support { + filter: unquote("alpha(opacity=#{$mfp-controls-opacity*100})"); + } + margin: 0; + top: 50%; + margin-top: -55px; + padding: 0; + width: 90px; + height: 110px; + -webkit-tap-highlight-color: rgba(0,0,0,0); + &:active { + margin-top: -54px; + } + &:hover, + &:focus { + opacity: 1; + @if $mfp-IE7support { + filter: unquote("alpha(opacity=#{1*100})"); + } + } + &:before, + &:after, + .mfp-b, + .mfp-a { + content: ''; + display: block; + width: 0; + height: 0; + position: absolute; + left: 0; + top: 0; + margin-top: 35px; + margin-left: 35px; + border: medium inset transparent; + } + + &:after, + .mfp-a { + + border-top-width: 13px; + border-bottom-width: 13px; + top:8px; + } + + &:before, + .mfp-b { + border-top-width: 21px; + border-bottom-width: 21px; + opacity: 0.7; + } + + } + + .mfp-arrow-left { + left: 0; + + &:after, + .mfp-a { + border-right: 17px solid $mfp-controls-color; + margin-left: 31px; + } + &:before, + .mfp-b { + margin-left: 25px; + border-right: 27px solid $mfp-controls-border-color; + } + } + + .mfp-arrow-right { + right: 0; + &:after, + .mfp-a { + border-left: 17px solid $mfp-controls-color; + margin-left: 39px + } + &:before, + .mfp-b { + border-left: 27px solid $mfp-controls-border-color; + } + } +} + + + +// Iframe content type +@if $mfp-include-iframe-type { + .mfp-iframe-holder { + padding-top: $mfp-iframe-padding-top; + padding-bottom: $mfp-iframe-padding-top; + .mfp-content { + line-height: 0; + width: 100%; + max-width: $mfp-iframe-max-width; + } + .mfp-close { + top: -40px; + } + } + .mfp-iframe-scaler { + width: 100%; + height: 0; + overflow: hidden; + padding-top: $mfp-iframe-ratio * 100%; + iframe { + position: absolute; + display: block; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-shadow: $mfp-shadow; + background: $mfp-iframe-background; + } + } +} + + + +// Image content type +@if $mfp-include-image-type { + + /* Main image in popup */ + img { + &.mfp-img { + width: auto; + max-width: 100%; + height: auto; + display: block; + line-height: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: $mfp-image-padding-top 0 $mfp-image-padding-bottom; + margin: 0 auto; + } + } + + /* The shadow behind the image */ + .mfp-figure { + line-height: 0; + &:after { + content: ''; + position: absolute; + left: 0; + top: $mfp-image-padding-top; + bottom: $mfp-image-padding-bottom; + display: block; + right: 0; + width: auto; + height: auto; + z-index: -1; + box-shadow: $mfp-shadow; + background: $mfp-image-background; + } + small { + color: $mfp-caption-subtitle-color; + display: block; + font-size: 12px; + line-height: 14px; + } + figure { + margin: 0; + } + } + .mfp-bottom-bar { + margin-top: -$mfp-image-padding-bottom + 4; + position: absolute; + top: 100%; + left: 0; + width: 100%; + cursor: auto; + } + .mfp-title { + text-align: left; + line-height: 18px; + color: $mfp-caption-title-color; + word-wrap: break-word; + padding-right: 36px; // leave some space for counter at right side + } + + .mfp-image-holder { + .mfp-content { + max-width: 100%; + } + } + + .mfp-gallery { + .mfp-image-holder { + .mfp-figure { + cursor: pointer; + } + } + } + + + @if $mfp-include-mobile-layout-for-image { + @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) { + /** + * Remove all paddings around the image on small screen + */ + .mfp-img-mobile { + .mfp-image-holder { + padding-left: 0; + padding-right: 0; + } + img { + &.mfp-img { + padding: 0; + } + } + .mfp-figure { + // The shadow behind the image + &:after { + top: 0; + bottom: 0; + } + small { + display: inline; + margin-left: 5px; + } + } + .mfp-bottom-bar { + background: rgba(0,0,0,0.6); + bottom: 0; + margin: 0; + top: auto; + padding: 3px 5px; + position: fixed; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + &:empty { + padding: 0; + } + } + .mfp-counter { + right: 5px; + top: 3px; + } + .mfp-close { + top: 0; + right: 0; + width: 35px; + height: 35px; + line-height: 35px; + background: rgba(0, 0, 0, 0.6); + position: fixed; + text-align: center; + padding: 0; + } + } + } + } +} + + + +// Scale navigation arrows and reduce padding from sides +@media all and (max-width: 900px) { + .mfp-arrow { + -webkit-transform: scale(0.75); + transform: scale(0.75); + } + .mfp-arrow-left { + -webkit-transform-origin: 0; + transform-origin: 0; + } + .mfp-arrow-right { + -webkit-transform-origin: 100%; + transform-origin: 100%; + } + .mfp-container { + padding-left: $mfp-popup-padding-left-mobile; + padding-right: $mfp-popup-padding-left-mobile; + } +} + + + +// IE7 support +// Styles that make popup look nicier in old IE +@if $mfp-IE7support { + .mfp-ie7 { + .mfp-img { + padding: 0; + } + .mfp-bottom-bar { + width: 600px; + left: 50%; + margin-left: -300px; + margin-top: 5px; + padding-bottom: 5px; + } + .mfp-container { + padding: 0; + } + .mfp-content { + padding-top: 44px; + } + .mfp-close { + top: 0; + right: 0; + padding-top: 0; + } + } +} |