PHP Classes

File: engine/modules/contrib/foundation/source/scss/components/_reveal.scss

Recommend this page to a friend!
  Classes of Aldo Tripiciano   Quanta CMS   engine/modules/contrib/foundation/source/scss/components/_reveal.scss   Download  
File: engine/modules/contrib/foundation/source/scss/components/_reveal.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Quanta CMS
Manage content that works without a database
Author: By
Last change:
Date: 5 years ago
Size: 4,017 bytes
 

Contents

Class file image Download
// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source //// /// @group reveal //// /// Default background color of a modal. /// @type Color $reveal-background: $white !default; /// Default width of a modal, with no class applied. /// @type Number $reveal-width: 600px !default; /// Default maximum width of a modal. /// @type Number $reveal-max-width: $global-width !default; /// Default padding inside a modal. /// @type Number $reveal-padding: $global-padding !default; /// Default border around a modal. /// @type Number $reveal-border: 1px solid $medium-gray !default; /// Default radius for modal. /// @type Number $reveal-radius: $global-radius !default; /// z-index for modals. The overlay uses this value, while the modal itself uses this value plus one. /// @type Number $reveal-zindex: 1005 !default; /// Background color of modal overlays. /// @type Color $reveal-overlay-background: rgba($black, 0.45) !default; /// Adds styles for a modal overlay. /// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay. @mixin reveal-overlay($background: $reveal-overlay-background) { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: $reveal-zindex; display: none; background-color: $background; overflow-y: scroll; } /// Adds base styles for a modal. @mixin reveal-modal-base { @include disable-mouse-outline; z-index: $reveal-zindex + 1; // Workaround android browser z-index bug backface-visibility: hidden; display: none; padding: $reveal-padding; border: $reveal-border; border-radius: $reveal-radius; background-color: $reveal-background; @include breakpoint(medium) { min-height: 0; } // Make sure rows don't have a min-width on them .column, .columns { min-width: 0; } // Strip margins from the last item in the modal > :last-child { margin-bottom: 0; } } /// Adjusts the width of a modal. /// @param {Number} $width - Width of the modal. Generally a percentage. /// @param {Number} $max-width [$reveal-max-width] - Maximum width of the modal. @mixin reveal-modal-width( $width: $reveal-width, $max-width: $reveal-max-width ) { @include breakpoint(medium) { @extend %reveal-centered; width: $width; max-width: $reveal-max-width; } } /// Creates a full-screen modal, which stretches the full width and height of the window. @mixin reveal-modal-fullscreen { top: 0; left: 0; width: 100%; max-width: none; height: 100%; height: 100vh; // sass-lint:disable-line no-duplicate-properties min-height: 100vh; margin-left: 0; border: 0; border-radius: 0; } @mixin foundation-reveal { // [TODO] Is this necessary? body.is-reveal-open { // sass-lint:disable-line no-qualifying-elements overflow: hidden; } // html gets this class only in iOS html.is-reveal-open, html.is-reveal-open body { min-height: 100%; overflow: hidden; user-select: none; } // Overlay .reveal-overlay { @include reveal-overlay; } // Modal container .reveal { @include reveal-modal-base; @include reveal-modal-width($reveal-width); position: relative; top: 100px; margin-right: auto; margin-left: auto; overflow-y: auto; // Placeholder selector for medium-and-up modals // Prevents duplicate CSS when defining multiple Reveal sizes @include breakpoint(medium) { %reveal-centered { right: auto; left: auto; margin: 0 auto; } } // Remove padding &.collapse { padding: 0; } // Sizing classes &.tiny { @include reveal-modal-width(30%); } &.small { @include reveal-modal-width(50%); } &.large { @include reveal-modal-width(90%); } // Full-screen mode &.full { @include reveal-modal-fullscreen; } @include breakpoint($-zf-zero-breakpoint only) { @include reveal-modal-fullscreen; } &.without-overlay { position: fixed; } } }