492 lines
9.4 KiB
SCSS
492 lines
9.4 KiB
SCSS
// Foundation for Sites by ZURB
|
|
// foundation.zurb.com
|
|
// Licensed under MIT Open Source
|
|
|
|
////
|
|
/// @group menu
|
|
////
|
|
|
|
/// Margin of a menu.
|
|
/// @type Number
|
|
$menu-margin: 0 !default;
|
|
|
|
/// Left-hand margin of a nested menu.
|
|
/// @type Number
|
|
$menu-nested-margin: $global-menu-nested-margin !default;
|
|
|
|
/// Padding for items in a pill menu.
|
|
/// @type Number
|
|
$menu-items-padding: $global-menu-padding !default;
|
|
|
|
/// margin for items in a simple menu.
|
|
/// @type Number
|
|
$menu-simple-margin: 1rem !default;
|
|
|
|
/// Text color of an active menu item.
|
|
/// @type Color
|
|
$menu-item-color-active: $white !default;
|
|
|
|
/// Background color of an active menu item.
|
|
/// @type Color
|
|
$menu-item-background-active: get-color(primary) !default;
|
|
|
|
/// Spacing between an icon and text in a menu item.
|
|
/// @type Number
|
|
$menu-icon-spacing: 0.25rem !default;
|
|
|
|
/// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`.
|
|
/// But please note that `active` will be removed in upcoming versions.
|
|
/// @type Boolean
|
|
$menu-state-back-compat: true !default;
|
|
|
|
/// Backward compatibility for menu centered. If true, this duplicate `.menu-centered > .menu` with `.menu.align-center`.
|
|
/// But please note that `menu-centered` will be removed in upcoming versions.
|
|
/// @type Boolean
|
|
$menu-centered-back-compat: true !default;
|
|
|
|
/// Backward compatibility for using `icon-*` classes without `.icons` classes
|
|
/// But please note that this backward compatibility will be removed in upcoming versions.
|
|
/// @type Boolean
|
|
$menu-icons-back-compat: true !default;
|
|
|
|
/// Creates the base styles for a Menu.
|
|
@mixin menu-base {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
position: relative;
|
|
|
|
@if $global-flexbox {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
li {
|
|
@include disable-mouse-outline;
|
|
}
|
|
|
|
a,
|
|
.button {
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
display: block;
|
|
padding: $menu-items-padding;
|
|
}
|
|
|
|
// Reset styles of inner elements
|
|
input,
|
|
select,
|
|
a,
|
|
button {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
input {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
/// Expands the items of a Menu, so each item is the same width.
|
|
@mixin menu-expand {
|
|
@if $global-flexbox {
|
|
li {
|
|
flex: 1 1 0px; // sass-lint:disable-line zero-unit
|
|
}
|
|
}
|
|
@else {
|
|
display: table;
|
|
width: 100%;
|
|
|
|
> li {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Align menu items.
|
|
@mixin menu-align($alignment) {
|
|
@if $alignment == left {
|
|
@if $global-flexbox {
|
|
justify-content: flex-start;
|
|
}
|
|
@else {
|
|
text-align: $global-left;
|
|
}
|
|
}
|
|
@else if $alignment == right {
|
|
@if $global-flexbox {
|
|
li {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.submenu li {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
&.vertical li {
|
|
display: block;
|
|
text-align: $global-right;
|
|
|
|
.submenu li {
|
|
text-align: $global-right;
|
|
}
|
|
}
|
|
}
|
|
@else {
|
|
text-align: $global-right;
|
|
|
|
.submenu li {
|
|
text-align: $global-left;
|
|
}
|
|
|
|
&.vertical {
|
|
.submenu li {
|
|
text-align: $global-right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@else if $alignment == center {
|
|
@if $global-flexbox {
|
|
li {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.submenu li {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
}
|
|
@else {
|
|
text-align: center;
|
|
|
|
.submenu li {
|
|
text-align: $global-left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Sets the direction of a Menu.
|
|
/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
|
|
@mixin menu-direction($dir: horizontal) {
|
|
@if $dir == horizontal {
|
|
@if $global-flexbox {
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
}
|
|
@else {
|
|
li {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
@else if $dir == vertical {
|
|
@if $global-flexbox {
|
|
flex-wrap: nowrap;
|
|
flex-direction: column;
|
|
}
|
|
@else {
|
|
li {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
@else {
|
|
@warn 'The direction used for menu-direction() must be horizontal or vertical.';
|
|
}
|
|
}
|
|
|
|
/// Creates a simple Menu, which has no padding or hover state.
|
|
/// @param {Keyword} $dir [$global-left] - Direction of the menu. This effects the side of the `<li>` that receives the margin.
|
|
/// @param {Number} $margin [$menu-simple-margin] - The margin to apply to each `<li>`.
|
|
@mixin menu-simple($dir: $global-left, $margin: $menu-simple-margin) {
|
|
@if $global-flexbox {
|
|
align-items: center;
|
|
}
|
|
|
|
li + li {
|
|
margin-#{$dir}: $margin;
|
|
}
|
|
|
|
a {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
|
|
/// @param {Keyword|Number} $margin [$menu-nested-margin] - Length of the margin.
|
|
/// @param {Keyword} $nested-alignment [left] - Alignment of the nested class
|
|
@mixin menu-nested(
|
|
$margin: $menu-nested-margin,
|
|
$nested-alignment: left
|
|
) {
|
|
@if $nested-alignment == right {
|
|
margin-#{$global-right}: $margin;
|
|
margin-#{$global-left}: 0;
|
|
}
|
|
@else {
|
|
margin-#{$global-right}: 0;
|
|
margin-#{$global-left}: $margin;
|
|
}
|
|
|
|
}
|
|
|
|
/// Adds basic styles for icons in menus.
|
|
@mixin menu-icons() {
|
|
@if $global-flexbox {
|
|
a {
|
|
display: flex;
|
|
}
|
|
}
|
|
@else {
|
|
img,
|
|
i,
|
|
svg {
|
|
vertical-align: middle;
|
|
|
|
+ span {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Adds position classes for icons within a menu.
|
|
@mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) {
|
|
@if $position == left {
|
|
li a {
|
|
@if $global-flexbox {
|
|
flex-flow: row nowrap;
|
|
}
|
|
|
|
img,
|
|
i,
|
|
svg {
|
|
margin-#{$global-right}: $spacing;
|
|
|
|
@if not $global-flexbox {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@else if $position == right {
|
|
li a {
|
|
@if $global-flexbox {
|
|
flex-flow: row nowrap;
|
|
}
|
|
|
|
img,
|
|
i,
|
|
svg {
|
|
margin-#{$global-left}: $spacing;
|
|
|
|
@if not $global-flexbox {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@else if $position == top {
|
|
li a {
|
|
@if $global-flexbox {
|
|
flex-flow: column nowrap;
|
|
}
|
|
@else {
|
|
text-align: center;
|
|
}
|
|
|
|
img,
|
|
i,
|
|
svg {
|
|
@if not $global-flexbox {
|
|
display: block;
|
|
margin: 0 auto $spacing;
|
|
}
|
|
@else {
|
|
align-self: stretch;
|
|
margin-bottom: $spacing;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@else if $position == bottom {
|
|
li a {
|
|
@if $global-flexbox {
|
|
flex-flow: column nowrap;
|
|
}
|
|
@else {
|
|
text-align: center;
|
|
}
|
|
|
|
img,
|
|
i,
|
|
svg {
|
|
@if not $global-flexbox {
|
|
display: block;
|
|
margin: $spacing auto 0;
|
|
}
|
|
@else {
|
|
align-self: stretch;
|
|
margin-bottom: $spacing;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin menu-text {
|
|
padding: $global-menu-padding;
|
|
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
color: inherit;
|
|
}
|
|
|
|
@mixin menu-state-active {
|
|
background: $menu-item-background-active;
|
|
color: $menu-item-color-active;
|
|
}
|
|
|
|
@mixin foundation-menu {
|
|
.menu {
|
|
@include menu-base;
|
|
|
|
// Default orientation: horizontal
|
|
&, &.horizontal {
|
|
@include menu-direction(horizontal);
|
|
}
|
|
|
|
// Vertical orientation modifier
|
|
&.vertical {
|
|
@include menu-direction(vertical);
|
|
}
|
|
|
|
// Even-width modifier for horizontal orientation
|
|
&.expanded {
|
|
@include menu-expand;
|
|
}
|
|
|
|
// Simple
|
|
&.simple {
|
|
@include menu-simple;
|
|
}
|
|
|
|
// Breakpoint specific versions
|
|
@include -zf-each-breakpoint($small: false) {
|
|
&.#{$-zf-size}-horizontal {
|
|
@include menu-direction(horizontal);
|
|
}
|
|
|
|
&.#{$-zf-size}-vertical {
|
|
@include menu-direction(vertical);
|
|
}
|
|
|
|
&.#{$-zf-size}-expanded {
|
|
@include menu-expand;
|
|
}
|
|
|
|
&.#{$-zf-size}-simple {
|
|
@include menu-expand;
|
|
}
|
|
}
|
|
|
|
// Nesting
|
|
&.nested {
|
|
@include menu-nested;
|
|
}
|
|
|
|
// Icon Base Styles
|
|
&.icons {
|
|
@include menu-icons;
|
|
}
|
|
|
|
// Backward Compatibility for active state
|
|
@if $menu-icons-back-compat {
|
|
&.icon-top,
|
|
&.icon-right,
|
|
&.icon-bottom,
|
|
&.icon-left {
|
|
@include menu-icons;
|
|
}
|
|
}
|
|
|
|
// Icon Left
|
|
&.icon-left {
|
|
@include menu-icon-position(left);
|
|
}
|
|
|
|
// Icon Right
|
|
&.icon-right {
|
|
@include menu-icon-position(right);
|
|
}
|
|
|
|
// Icon Top
|
|
&.icon-top {
|
|
@include menu-icon-position(top);
|
|
}
|
|
|
|
// Icon Bottom
|
|
&.icon-bottom {
|
|
@include menu-icon-position(bottom);
|
|
}
|
|
|
|
// Active state
|
|
.is-active > a {
|
|
@include menu-state-active;
|
|
}
|
|
|
|
// Backward Compatibility for active state
|
|
@if $menu-state-back-compat {
|
|
.active > a {
|
|
@include menu-state-active;
|
|
}
|
|
}
|
|
|
|
// Align left
|
|
&.align-#{$global-left} {
|
|
@include menu-align(left);
|
|
}
|
|
|
|
// Align right
|
|
&.align-#{$global-right} {
|
|
@include menu-align(right);
|
|
|
|
.nested {
|
|
@include menu-nested($nested-alignment: right);
|
|
}
|
|
}
|
|
|
|
// Align center
|
|
&.align-center {
|
|
@include menu-align(center);
|
|
}
|
|
|
|
.menu-text {
|
|
@include menu-text;
|
|
}
|
|
}
|
|
|
|
@if $menu-centered-back-compat {
|
|
.menu-centered {
|
|
> .menu {
|
|
@if $global-flexbox {
|
|
justify-content: center;
|
|
}
|
|
|
|
@include menu-align(center);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Prevent FOUC when using the Responsive Menu plugin
|
|
.no-js [data-responsive-menu] ul {
|
|
display: none;
|
|
}
|
|
}
|