PHP Classes

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

Recommend this page to a friend!
  Classes of Aldo Tripiciano   Quanta CMS   engine/modules/contrib/foundation/source/scss/components/_visibility.scss   Download  
File: engine/modules/contrib/foundation/source/scss/components/_visibility.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: 3,348 bytes
 

Contents

Class file image Download
// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source /// Hide an element by default, only displaying it above a certain screen size. /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** @mixin show-for($size) { $size: map-get($breakpoints, $size); $size: -zf-bp-to-em($size) - (1 / 16); @include breakpoint($size down) { display: none !important; } } /// Hide an element by default, only displaying it within a certain breakpoint. /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** @mixin show-for-only($size) { $lower-bound-size: map-get($breakpoints, $size); $upper-bound-size: -zf-map-next($breakpoints, $size); // more often than not this will be correct, just one time round the loop it won't so set in scope here $lower-bound: -zf-bp-to-em($lower-bound-size) - (1 / 16); // test actual lower-bound-size, if 0 set it to 0em @if strip-unit($lower-bound-size) == 0 { $lower-bound: -zf-bp-to-em($lower-bound-size); } @if $upper-bound-size == null { @media screen and (max-width: $lower-bound) { display: none !important; } } @else { $upper-bound: -zf-bp-to-em($upper-bound-size); @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) { display: none !important; } } } /// Show an element by default, and hide it above a certain screen size. /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** @mixin hide-for($size) { @include breakpoint($size) { display: none !important; } } /// Show an element by default, and hide it above a certain screen size. /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** @mixin hide-for-only($size) { @include breakpoint($size only) { display: none !important; } } @mixin foundation-visibility-classes { // Basic hiding classes .hide { display: none !important; } .invisible { visibility: hidden; } // Responsive visibility classes @each $size in $breakpoint-classes { @if $size != $-zf-zero-breakpoint { .hide-for-#{$size} { @include hide-for($size); } .show-for-#{$size} { @include show-for($size); } } .hide-for-#{$size}-only { @include hide-for-only($size); } .show-for-#{$size}-only { @include show-for-only($size); } } // Screen reader visibility classes // Need a "hide-for-sr" class? Add aria-hidden='true' to the element .show-for-sr, .show-on-focus { @include element-invisible; } // Only display the element when it's focused .show-on-focus { &:active, &:focus { @include element-invisible-off; } } // Landscape and portrait visibility .show-for-landscape, .hide-for-portrait { display: block !important; @include breakpoint(landscape) { display: block !important; } @include breakpoint(portrait) { display: none !important; } } .hide-for-landscape, .show-for-portrait { display: none !important; @include breakpoint(landscape) { display: none !important; } @include breakpoint(portrait) { display: block !important; } } }