diff options
Diffstat (limited to 'source/bower_components/foundation/scss/foundation/components/_clearing.scss')
| -rw-r--r-- | source/bower_components/foundation/scss/foundation/components/_clearing.scss | 247 |
1 files changed, 247 insertions, 0 deletions
diff --git a/source/bower_components/foundation/scss/foundation/components/_clearing.scss b/source/bower_components/foundation/scss/foundation/components/_clearing.scss new file mode 100644 index 0000000..737af29 --- /dev/null +++ b/source/bower_components/foundation/scss/foundation/components/_clearing.scss @@ -0,0 +1,247 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +@import "global"; + +// +// @variables +// +$include-html-clearing-classes: $include-html-classes !default; + +// We use these to set the background colors for parts of Clearing. +$clearing-bg: $oil !default; +$clearing-caption-bg: $clearing-bg !default; +$clearing-carousel-bg: rgba(51,51,51,0.8) !default; +$clearing-img-bg: $clearing-bg !default; + +// We use these to style the close button +$clearing-close-color: $iron !default; +$clearing-close-size: 30px !default; + +// We use these to style the arrows +$clearing-arrow-size: 12px !default; +$clearing-arrow-color: $clearing-close-color !default; + +// We use these to style captions +$clearing-caption-font-color: $iron !default; +$clearing-caption-font-size: 0.875em !default; +$clearing-caption-padding: 10px 30px 20px !default; + +// We use these to make the image and carousel height and style +$clearing-active-img-height: 85% !default; +$clearing-carousel-height: 120px !default; +$clearing-carousel-thumb-width: 120px !default; +$clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; + +@include exports("clearing") { + @if $include-html-clearing-classes { + // We decided to not create a mixin for Clearing because it relies + // on predefined classes and structure to work properly. + // The variables above should give enough control. + + /* Clearing Styles */ + .clearing-thumbs, #{data('clearing')} { + @include clearfix; + margin-bottom: 0; + margin-#{$default-float}: 0; + list-style: none; + + li { + float: $default-float; + margin-#{$opposite-direction}: 10px; + } + + &[class*="block-grid-"] li { + margin-#{$opposite-direction}: 0; + } + } + + .clearing-blackout { + background: $clearing-bg; + position: fixed; + width: 100%; + height: 100%; + top: 0; + #{$default-float}: 0; + z-index: 998; + + .clearing-close { display: block; } + } + + .clearing-container { + position: relative; + z-index: 998; + height: 100%; + overflow: hidden; + margin: 0; + } + + .clearing-touch-label { + position: absolute; + top: 50%; + left: 50%; + color: $base; + font-size: 0.6em; + } + + .visible-img { + height: 95%; + position: relative; + + img { + position: absolute; + #{$default-float}: 50%; + top: 50%; + margin-#{$default-float}: -50%; + max-height: 100%; + max-width: 100%; + } + } + + .clearing-caption { + color: $clearing-caption-font-color; + font-size: $clearing-caption-font-size; + line-height: 1.3; + margin-bottom: 0; + text-align: center; + bottom: 0; + background: $clearing-caption-bg; + width: 100%; + padding: $clearing-caption-padding; + position: absolute; + #{$default-float}: 0; + } + + .clearing-close { + z-index: 999; + padding-#{$default-float}: 20px; + padding-top: 10px; + font-size: $clearing-close-size; + line-height: 1; + color: $clearing-close-color; + display: none; + + &:hover, + &:focus { color: $iron; } + } + + .clearing-assembled .clearing-container { height: 100%; + .carousel > ul { display: none; } + } + + // If you want to show a lightbox, but only have a single image come through as the thumbnail + .clearing-feature li { + display: none; + &.clearing-featured-img { + display: block; + } + } + + // Large screen overrides + @media #{$medium-up} { + .clearing-main-prev, + .clearing-main-next { + position: absolute; + height: 100%; + width: 40px; + top: 0; + & > span { + position: absolute; + top: 50%; + display: block; + width: 0; + height: 0; + border: solid $clearing-arrow-size; + &:hover { opacity: 0.8; } + } + } + .clearing-main-prev { + #{$default-float}: 0; + & > span { + #{$default-float}: 5px; + border-color: transparent; + border-#{$opposite-direction}-color: $clearing-arrow-color; + } + } + .clearing-main-next { + #{$opposite-direction}: 0; + & > span { + border-color: transparent; + border-#{$default-float}-color: $clearing-arrow-color; + } + } + + .clearing-main-prev.disabled, + .clearing-main-next.disabled { opacity: 0.3; } + + .clearing-assembled .clearing-container { + + .carousel { + background: $clearing-carousel-bg; + height: $clearing-carousel-height; + margin-top: 10px; + text-align: center; + + & > ul { + display: inline-block; + z-index: 999; + height: 100%; + position: relative; + float: none; + + li { + display: block; + width: $clearing-carousel-thumb-width; + min-height: inherit; + float: $default-float; + overflow: hidden; + margin-#{$opposite-direction}: 0; + padding: 0; + position: relative; + cursor: $cursor-pointer-value; + opacity: 0.4; + clear: none; + + &.fix-height { + img { + height: 100%; + max-width: none; + } + } + + a.th { + border: none; + box-shadow: none; + display: block; + } + + img { + cursor: $cursor-pointer-value !important; + width: 100% !important; + } + + &.visible { opacity: 1; } + &:hover { opacity: 0.8; } + } + } + } + + .visible-img { + background: $clearing-img-bg; + overflow: hidden; + height: $clearing-active-img-height; + } + } + + .clearing-close { + position: absolute; + top: 10px; + #{$opposite-direction}: 20px; + padding-#{$default-float}: 0; + padding-top: 0; + } + } + + } +} |