From: Brett Mason Date: Tue, 31 Jan 2017 16:20:41 +0000 (+0000) Subject: Reorganise output classes. X-Git-Tag: v6.4.0-rc1~20^2~34 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7c19340d231d0e1c0dcb48976595caf1cb258794;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Reorganise output classes. --- diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss index bfd75b034..f2eea47c5 100644 --- a/scss/components/_menu.scss +++ b/scss/components/_menu.scss @@ -16,7 +16,7 @@ $menu-nested-margin: 1rem !default; /// Padding for items in a pill menu. /// @type Number -$menu-pills-padding: $global-menu-padding !default; +$menu-items-padding: $global-menu-padding !default; /// margin for items in a simple menu. /// @type Number @@ -59,6 +59,7 @@ $menu-item-background-hover: $light-gray !default; text-decoration: none; white-space: nowrap; display: block; + padding: $menu-items-padding; } // Reset styles of inner elements @@ -90,26 +91,35 @@ $menu-item-background-hover: $light-gray !default; /// Align menu items. @mixin menu-align($alignment) { - @if $alignment == center { + + @if $alignment == left { @if $global-flexbox { - li { - justify-content: center; - } + justify-content: flex-start; } @else { - text-align: center; + text-align: $global-left; + } + } + @else if $alignment == right { + @if $global-flexbox { + justify-content: flex-end; + } + @else { + text-align: $global-right; li { text-align: $global-left; } } } - @else if $alignment == right { + @else if $alignment == center { @if $global-flexbox { - justify-content: flex-end; + li { + justify-content: center; + } } @else { - text-align: $global-right; + text-align: center; li { text-align: $global-left; @@ -155,13 +165,9 @@ $menu-item-background-hover: $light-gray !default; li + li { margin-#{$dir}: $margin; } -} -/// Creates a simple padded Menu. -/// @param {Number} $padding [$menu-pills-padding] - Padding of each menu item. -@mixin menu-pills($padding: $menu-pills-padding) { a { - padding: $padding; + padding: 0; } } @@ -301,41 +307,33 @@ $menu-item-background-hover: $light-gray !default; @include menu-direction(vertical); } - @include -zf-each-breakpoint($small: false) { - &.#{$-zf-size}-vertical { - @include menu-direction(vertical); - } - - &.#{$-zf-size}-horizontal { - @include menu-direction(horizontal); - } + // Even-width modifier for horizontal orientation + &.expanded { + @include menu-expand; } // Simple - &.simple:not(.vertical) { + &.simple { @include menu-simple; } - // Vertical simple - &.vertical.simple { - @include menu-simple(top); - } - - // Pills - &.pills { - @include menu-pills; - } + // Breakpoint specific versions + @include -zf-each-breakpoint($small: false) { + &.#{$-zf-size}-horizontal { + @include menu-direction(horizontal); + } - // Even-width modifier for horizontal orientation - &.expanded { - @include menu-expand; - } + &.#{$-zf-size}-vertical { + @include menu-direction(vertical); + } - // Responsive expanded - @include -zf-each-breakpoint($small: false) { &.#{$-zf-size}-expanded { @include menu-expand; } + + &.#{$-zf-size}-simple { + @include menu-expand; + } } // Nesting @@ -374,9 +372,9 @@ $menu-item-background-hover: $light-gray !default; color: $menu-item-color-active; } - // Align center - &.align-center { - @include menu-align(center); + // Align left + &.align-#{$global-left} { + @include menu-align(left); } // Align right @@ -384,6 +382,11 @@ $menu-item-background-hover: $light-gray !default; @include menu-align(right); } + // Align center + &.align-center { + @include menu-align(center); + } + .menu-text { @include menu-text; } diff --git a/test/visual/menu/all-menus-flex.html b/test/visual/menu/all-menus-flex.html index 67b57a1f3..250f29ef1 100644 --- a/test/visual/menu/all-menus-flex.html +++ b/test/visual/menu/all-menus-flex.html @@ -120,16 +120,6 @@ -

Pills Menu

-
- -
-

Expanded Menu