PHP Classes

File: engine/modules/contrib/foundation/source/scss/components/_dropdown-menu.scss

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

Contents

Class file image Download
// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source //// /// @group dropdown-menu //// /// Enables arrows for items with dropdown menus. /// @type Boolean $dropdownmenu-arrows: true !default; /// Sets dropdown menu arrow color if arrow is used. /// @type Color $dropdownmenu-arrow-color: $anchor-color !default; /// Sets dropdown menu arrow size if arrow is used. /// @type Length $dropdownmenu-arrow-size: 6px !default; /// Minimum width of dropdown sub-menus. /// @type Length $dropdownmenu-min-width: 200px !default; /// Background color for dropdowns. /// @type Color $dropdownmenu-background: $white !default; /// Border for dropdown sub-menus. /// @type List $dropdownmenu-border: 1px solid $medium-gray !default; // Border width for dropdown sub-menus. // Used to adjust top margin of a sub-menu if a border is used. // @type Length $dropdownmenu-border-width: nth($dropdownmenu-border, 1); @mixin left-right-arrows { > a::after { #{$global-right}: 14px; } &.opens-left > a::after { @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left); } &.opens-right > a::after { @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right); } } @mixin dropdown-menu-direction($dir: horizontal) { @if $dir == horizontal { > li.opens-left { > .is-dropdown-submenu { top: 100%; right: 0; left: auto; } } > li.opens-right { > .is-dropdown-submenu { top: 100%; right: auto; left: 0; } } @if $dropdownmenu-arrows { > li.is-dropdown-submenu-parent > a { position: relative; padding-#{$global-right}: 1.5rem; } > li.is-dropdown-submenu-parent > a::after { @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down); #{$global-right}: 5px; margin-top: -1 * ($dropdownmenu-arrow-size / 2); } } } @else if $dir == vertical { > li { .is-dropdown-submenu { top: 0; } &.opens-left { > .is-dropdown-submenu { right: 100%; left: auto; } } &.opens-right { > .is-dropdown-submenu { right: auto; left: 100%; } } @if $dropdownmenu-arrows { @include left-right-arrows; } } } @else { @warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.'; } } @mixin foundation-dropdown-menu { .dropdown.menu { @include dropdown-menu-direction(horizontal); a { @include disable-mouse-outline; } .no-js & ul { display: none; } &.vertical { @include dropdown-menu-direction(vertical); } @each $size in $breakpoint-classes { @if $size != $-zf-zero-breakpoint { @include breakpoint($size) { &.#{$size}-horizontal { @include dropdown-menu-direction(horizontal); } &.#{$size}-vertical { @include dropdown-menu-direction(vertical); } } } } &.align-right { .is-dropdown-submenu.first-sub { top: 100%; right: 0; left: auto; } } } .is-dropdown-menu.vertical { width: 100px; &.align-right { float: right; } } .is-dropdown-submenu-parent { position: relative; a::after { position: absolute; top: 50%; #{$global-right}: 5px; margin-top: -1 * $dropdownmenu-arrow-size; } &.opens-inner > .is-dropdown-submenu { top: 100%; @if $global-text-direction == 'rtl' { right: auto; } @else { left: auto; } } &.opens-left > .is-dropdown-submenu { right: 100%; left: auto; } &.opens-right > .is-dropdown-submenu { right: auto; left: 100%; } } .is-dropdown-submenu { position: absolute; top: 0; #{$global-left}: 100%; z-index: 1; display: none; min-width: $dropdownmenu-min-width; border: $dropdownmenu-border; background: $dropdownmenu-background; .is-dropdown-submenu-parent { @if $dropdownmenu-arrows { @include left-right-arrows; } } @if (type-of($dropdownmenu-border-width) == 'number') { .is-dropdown-submenu { margin-top: (-$dropdownmenu-border-width); } } > li { width: 100%; } // [TODO] Cut back specificity //&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically... &.js-dropdown-active { display: block; } } }