PHP Classes

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

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

Contents

Class file image Download
// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source //// /// @group drilldown //// /// Transition property to use for animating menus. /// @type Transition $drilldown-transition: transform 0.15s linear !default; /// Adds arrows to drilldown items with submenus, as well as the back button. /// @type Boolean $drilldown-arrows: true !default; /// Sets drilldown arrow color if arrow is used. /// @type Color $drilldown-arrow-color: $primary-color !default; /// Sets drilldown arrow size if arrow is used. /// @type Length $drilldown-arrow-size: 6px !default; /// Background color for drilldown submenus. /// @type Color $drilldown-background: $white !default; @mixin foundation-drilldown-menu { // Applied to the Menu container .is-drilldown { position: relative; overflow: hidden; li { display: block; } &.animate-height { transition: height 0.5s; } } // Applied to nested <ul>s .is-drilldown-submenu { position: absolute; top: 0; #{$global-left}: 100%; z-index: -1; width: 100%; background: $drilldown-background; transition: $drilldown-transition; &.is-active { z-index: 1; display: block; transform: translateX(if($global-text-direction == ltr, -100%, 100%)); } &.is-closing { transform: translateX(if($global-text-direction == ltr, 100%, -100%)); } } .drilldown-submenu-cover-previous { min-height: 100%; } @if $drilldown-arrows { .is-drilldown-submenu-parent > a { position: relative; &::after { @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right); position: absolute; top: 50%; margin-top: -1 * $drilldown-arrow-size; #{$global-right}: 1rem; } } .js-drilldown-back > a::before { @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left); border-#{$global-left}-width: 0; display: inline-block; vertical-align: middle; margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text border-#{$global-left}-width: 0; } } }