From: Brett Mason Date: Tue, 31 Jan 2017 11:32:49 +0000 (+0000) Subject: Add menu icon styles - still needs refining. Added some examples to the visual test. X-Git-Tag: v6.4.0-rc1~20^2~45 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5d993ee636800a91ebd13fea0e11f06b67be35c0;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Add menu icon styles - still needs refining. Added some examples to the visual test. --- diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss index 076538714..e2c6a87e2 100644 --- a/scss/components/_menu.scss +++ b/scss/components/_menu.scss @@ -192,6 +192,112 @@ $menu-item-background-hover: $light-gray !default; 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 foundation-menu { .menu { @include menu-base; @@ -236,6 +342,31 @@ $menu-item-background-hover: $light-gray !default; @include menu-nested; } + // Icon Base Styles + &.icons { + @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 .active > a { background: $menu-item-background-active; diff --git a/test/visual/menu/all-menus.html b/test/visual/menu/all-menus.html index 2cfbb6e8c..14231b71f 100644 --- a/test/visual/menu/all-menus.html +++ b/test/visual/menu/all-menus.html @@ -7,6 +7,7 @@ All Foundation Menu Options + +

Basic Menus

@@ -132,6 +134,46 @@
+

Menu with Icons left

+
+ +
+ +

Menu with Icons Right

+
+ +
+ +

Menu with Icon Top

+
+ +
+ +

Menu with Icon Bottom

+
+ +
+

Active Menu Item Class