123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- // Foundation by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
- @import 'global';
- @import 'grid';
- //
- // @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(30) !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(10) !default;
- $reveal-close-side: rem-calc(22) !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;
- // Set base z-index
- $z-index-base: 1005;
- //
- // @mixins
- //
- // We use this to create the reveal background overlay styles
- @mixin reveal-bg( $include-z-index-value: true ) {
- // position: absolute; // allows modal background to extend beyond window position
- 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;
- bottom: 0;
- display: none;
- left: 0;
- position: fixed;
- right: 0;
- top: 0;
- z-index: if( $include-z-index-value, $z-index-base - 1, auto );
- #{$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 {
- border-radius: $border-radius;
- display: none;
- position: absolute;
- top:0;
- visibility: hidden;
- width: 100%;
- z-index: $z-index-base;
- #{$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} {
- left: 0;
- margin: 0 auto;
- max-width: $max-width;
- right: 0;
- width: $width;
- }
- }
- }
- // 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;
- }
- @else{
- box-shadow: none;
- }
- // 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) {
- color: $color;
- cursor: $cursor-pointer-value;
- font-size: $reveal-close-font-size;
- font-weight: $reveal-close-weight;
- line-height: 1;
- position: absolute;
- top: $reveal-close-top;
- #{$opposite-direction}: $reveal-close-side;
- }
- @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
- );
- &.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, 100%);
- height: 100vh;
- height:100%;
- left:0;
- margin-left: 0 !important;
- max-width: none !important;
- min-height:100vh;
- top:0;
- }
- // Modals pushed to back
- &.toback {
- z-index: $z-index-base - 2;
- }
- .#{$close-reveal-modal-class} { @include reveal-close; }
- }
- }
- }
|