diff options
Diffstat (limited to 'source/bower_components/foundation/scss/foundation/components/_reveal.scss')
| -rw-r--r-- | source/bower_components/foundation/scss/foundation/components/_reveal.scss | 220 |
1 files changed, 220 insertions, 0 deletions
diff --git a/source/bower_components/foundation/scss/foundation/components/_reveal.scss b/source/bower_components/foundation/scss/foundation/components/_reveal.scss new file mode 100644 index 0000000..8107b19 --- /dev/null +++ b/source/bower_components/foundation/scss/foundation/components/_reveal.scss @@ -0,0 +1,220 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +@import "global"; + +// +// @name _reveal.scss +// @dependencies _global.scss +// + +$include-html-reveal-classes: $include-html-classes !default; + +// We use these to control the style of the reveal overlay. +$reveal-overlay-bg: rgba($black, .45) !default; +$reveal-overlay-bg-old: $black !default; + +// We use these to control the style of the modal itself. +$reveal-modal-bg: $white !default; +$reveal-position-top: rem-calc(100) !default; +$reveal-default-width: 80% !default; +$reveal-max-width: $row-width !default; +$reveal-modal-padding: rem-calc(20) !default; +$reveal-box-shadow: 0 0 10px rgba($black,.4) !default; + +// We use these to style the reveal close button +$reveal-close-font-size: rem-calc(40) !default; +$reveal-close-top: rem-calc(8) !default; +$reveal-close-side: rem-calc(11) !default; +$reveal-close-color: $base !default; +$reveal-close-weight: $font-weight-bold !default; + +// We use this to set the default radius used throughout the core. +$reveal-radius: $global-radius !default; +$reveal-round: $global-rounded !default; + +// We use these to control the modal border +$reveal-border-style: solid !default; +$reveal-border-width: 1px !default; +$reveal-border-color: $steel !default; + +$reveal-modal-class: "reveal-modal" !default; +$close-reveal-modal-class: "close-reveal-modal" !default; + +// +// @mixins +// + +// We use this to create the reveal background overlay styles +@mixin reveal-bg( $include-z-index-value: true ) { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future. + background: $reveal-overlay-bg; + z-index: if( $include-z-index-value, 1004, auto ); + display: none; + #{$default-float}: 0; +} + +// We use this mixin to create the structure of a reveal modal +// +// $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false +// $width - Sets reveal width Default: $reveal-default-width || 80% +// +@mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) { + @if $base-style { + visibility: hidden; + display: none; + position: absolute; + z-index: 1005; + width: 100vw; + top:0; + border-radius: $border-radius; + #{$default-float}: 0; + + @media #{$small-only} { + min-height:100vh; + } + + // Make sure rows don't have a min-width on them + .column, .columns { min-width: 0; } + + // Get rid of margin from first and last element inside modal + & > :first-child { margin-top: 0; } + + & > :last-child { margin-bottom: 0; } + } + + @if $width { + @media #{$medium-up} { + width: $width; + max-width: $max-width; + left: 0; + right: 0; + margin: 0 auto; + } + } +} + +// We use this to style the reveal modal defaults +// +// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white +// $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding. +// $border - Choose whether reveal uses a border. Default: true, Options: false +// $border-style - Set reveal border style. Default: $reveal-border-style || solid +// $border-width - Width of border (i.e. 1px). Default: $reveal-border-width. +// $border-color - Color of border. Default: $reveal-border-color. +// $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false +// $radius - If true, set to modal radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false +// $top-offset - Default: $reveal-position-top || 50px +@mixin reveal-modal-style( + $bg:false, + $padding:false, + $border:false, + $border-style:$reveal-border-style, + $border-width:$reveal-border-width, + $border-color:$reveal-border-color, + $box-shadow:false, + $radius:false, + $top-offset:false) { + + @if $bg { background-color: $bg; } + @if $padding != false { padding: $padding; } + + @if $border { border: $border-style $border-width $border-color; } + + // We can choose whether or not to include the default box-shadow. + @if $box-shadow { + box-shadow: $reveal-box-shadow; + } + + // We can control how much radius is used on the modal + @if $radius == true { @include radius($reveal-radius); } + @else if $radius { @include radius($radius); } + + @if $top-offset { + @media #{$medium-up} { + top: $top-offset; + } + } +} + +// We use this to create a close button for the reveal modal +// +// $color - Default: $reveal-close-color || $base +@mixin reveal-close($color:$reveal-close-color) { + font-size: $reveal-close-font-size; + line-height: 1; + position: absolute; + top: $reveal-close-top; + #{$opposite-direction}: $reveal-close-side; + color: $color; + font-weight: $reveal-close-weight; + cursor: $cursor-pointer-value; +} + +@include exports("reveal") { + @if $include-html-reveal-classes { + + // Reveal Modals + .reveal-modal-bg { @include reveal-bg; } + + .#{$reveal-modal-class} { + @include reveal-modal-base; + @include reveal-modal-style( + $bg:$reveal-modal-bg, + $padding:$reveal-modal-padding, + $border:true, + $box-shadow:true, + $radius:false, + $top-offset:$reveal-position-top + ); + @include reveal-modal-style($padding:$reveal-modal-padding * 1.5); + + &.radius { @include reveal-modal-style($radius:true); } + &.round { @include reveal-modal-style($radius:$reveal-round); } + &.collapse { @include reveal-modal-style($padding:0); } + &.tiny { @include reveal-modal-base(false, 30%); } + &.small { @include reveal-modal-base(false, 40%); } + &.medium { @include reveal-modal-base(false, 60%); } + &.large { @include reveal-modal-base(false, 70%); } + &.xlarge { @include reveal-modal-base(false, 95%); } + &.full { + @include reveal-modal-base(false, 100vw); + top:0; + left:0; + height:100%; + height: 100vh; + min-height:100vh; + margin-left: 0 !important; + } + + .#{$close-reveal-modal-class} { @include reveal-close; } + } + + dialog { + @extend .#{$reveal-modal-class}; + display: none; + + &::backdrop, & + .backdrop { + @include reveal-bg(false); + } + + &[open]{ + display: block; + } + } + + // Reveal Print Styles: It should be invisible, adds no value being printed. + @media print { + dialog, .#{$reveal-modal-class} { + display: none; + background: $white !important; + } + } + } +} |