--- /dev/null
+/*
+ MENU BAR
+ --------
+
+ A generic, flexible menu component.
+
+ Features:
+ - Orient horizontally and vertically
+ - Change orientation at certain breakpoints
+ - Items with icons above, below, or to the left or right
+ - Text labels for vertical menus and badges for horizontal menus
+*/
+
+/// @Foundation.settings
+// Menu Bar
+$menubar-fontsize: 1rem !default;
+$menubar-background: #fff !default;
+$menubar-background-hover: smartscale($menubar-background, 7%) !default;
+$menubar-background-active: $menubar-background-hover;
+$menubar-color: isitlight($menubar-background) !default;
+$menubar-color-hover: $menubar-color !default;
+$menubar-color-active: $menubar-color-hover;
+
+$menubar-item-padding: $global-padding !default;
+$menubar-icon-size: 25px !default;
+$menubar-icon-spacing: $menubar-item-padding !default;
+///
+
+// Menu bar container
+%menu-bar {
+ display: flex;
+ align-items: stretch;
+ margin: 0;
+ list-style-type: none;
+
+ // Menu item
+ > li {
+ // This flex setting makes each item an equal width
+ flex: 1 0 auto;
+ align-items: center;
+
+ // Link inside menu item
+ > a {
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: center;
+ padding: $menubar-item-padding;
+ font-size: $menubar-fontsize;
+ line-height: 1;
+ }
+ }
+}
+
+@mixin menu-bar-layout (
+ $orientation: horizontal,
+ $stretch: true
+) {
+ /*
+ Orientation
+ */
+ @if $orientation == horizontal {
+ overflow-x: hidden;
+ flex-flow: row nowrap;
+ > li > a {
+ flex-flow: column nowrap;
+ }
+ }
+ @else {
+ flex-flow: column nowrap;
+ > li > a {
+ flex-flow: row nowrap;
+ }
+ }
+
+ /*
+ Stretch
+ */
+ > li {
+ @if $stretch == false {
+ flex: 0 0 auto;
+ }
+ }
+}
+
+@mixin menu-bar-style(
+ $background: $menubar-background,
+ $background-hover: $menubar-background-hover,
+ $background-active: $menubar-background-active,
+ $color: $menubar-color,
+ $color-hover: $menubar-color-hover,
+ $color-active: $menubar-color-active,
+ $autocolor: false
+) {
+ // Autocoloring
+ @if ($autocolor) {
+ $background-hover: smartscale($background, 7%);
+ $background-active: $background-hover;
+
+ $color: isitlight($background);
+ $color-hover: $color;
+ $color-active: $color;
+ }
+
+ // Container
+ background: $background;
+
+ // Items
+ > li > a {
+ color: $color;
+
+ &:hover {
+ background: $background-hover;
+ color: $color-hover;
+ }
+ }
+ .is-active > a {
+ background: $background-active;
+ color: $color-active
+ }
+
+ // Iconic
+ @if using(iconic) {
+ .iconic { @include color-icon($color); }
+ }
+}
+
+@mixin menu-bar-icons(
+ $position: left,
+ $size: $menubar-icon-size
+) {
+ > li {
+ // Sizing
+ > img, > .iconic {
+ margin: 0;
+ @if $menubar-icon-size != false {
+ width: $menubar-icon-size;
+ height: $menubar-icon-size;
+ }
+ }
+
+ // Position
+ @if $position == left {
+ > a {
+ flex-flow: row nowrap;
+ align-items: center;
+ > img, > .iconic { margin: 0 $menubar-icon-spacing 0 0; }
+ }
+ }
+ @if $position == top {
+ > a {
+ flex-flow: column nowrap;
+ > img, > .iconic { margin: 0 0 $menubar-icon-spacing 0; }
+ }
+ }
+ @if $position == right {
+ > a {
+ flex-flow: row-reverse nowrap;
+ > img, > .iconic { margin: 0 0 0 $menubar-icon-spacing; }
+ }
+ }
+ @if $position == bottom {
+ > a {
+ flex-flow: column-reverse nowrap;
+ > img, > .iconic { margin: $menubar-icon-spacing 0 0 0; }
+ }
+ }
+ }
+}
+
+@mixin menu-bar-labels(
+ $x: right,
+ $y: center,
+ $offset: $menubar-item-padding,
+ $size: 1.2rem,
+ $background: red,
+ $color: auto,
+ $selector: '.menu-bar-label'
+) {
+ > li {
+ position: relative;
+
+ > a {
+ @if $x == left or $x == right {
+ padding-#{$x}: $size + $offset * 2;
+ }
+ }
+ }
+
+ #{$selector} {
+ display: block;
+ font-size: $size * 0.75;
+ width: $size;
+ height: $size;
+ line-height: $size;
+ text-align: center;
+ border-radius: 1000px;
+ background: $background;
+ color: if($color == auto, isitlight($background), $color);
+ position: absolute;
+ pointer-events: none;
+
+ @if $x == left or $x == right {
+ #{$x}: $offset;
+ }
+
+ @if $y == top or $y == bottom {
+ #{$y}: $offset;
+ }
+ @else {
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ }
+}
+
+/*
+ Set the alignment of menu items (li) within a menu-bar
+
+ left: Items align to the left.
+ right: Items align to the right.
+ center: Items align to the center.
+ justify: Items are spaced equally apart so they occupy the space of the entire grid.
+ spaced: Items are given equal space to their left and right.
+
+ @group menu-bar
+
+ @param {string} $align - Alignment to use.
+
+ @output An appropriate justify-content value.
+*/
+@mixin menu-bar-align($align: left) {
+ $options: (
+ left: flex-start,
+ right: flex-end,
+ center: center,
+ justify: space-between,
+ spaced: space-around,
+ );
+ justify-content: map-get($options, $align);
+}
+
+/*
+ CSS output
+*/
+@include exports(menu-bar) {
+ .menu-bar {
+ @extend %menu-bar;
+ @include menu-bar-style;
+
+ // Positioning
+ &, &.horizontal { @include menu-bar-layout(horizontal); }
+ &.vertical { @include menu-bar-layout(vertical); }
+
+ // Condensed bar
+ &.condense {
+ > li { flex: 0 0 auto; }
+ }
+
+ // Align Menu Items
+ &.align-right { @include menu-bar-align(right); }
+ &.align-center { @include menu-bar-align(center); }
+ &.align-justify { @include menu-bar-align(justify); }
+ &.align-spaced { @include menu-bar-align(spaced); }
+
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ &.#{$size}-condense { li { flex: 0 0 auto; } }
+ &.#{$size}-expand { li { flex: 1 0 auto; } }
+
+ // Responsive Alignment
+ &.#{$size}-align-left { @include menu-bar-align(left); }
+ &.#{$size}-align-right { @include menu-bar-align(right); }
+ &.#{$size}-align-center { @include menu-bar-align(center); }
+ &.#{$size}-align-justify { @include menu-bar-align(justify); }
+ &.#{$size}-align-spaced { @include menu-bar-align(spaced); }
+ }
+ }
+
+ // Responsive positioning
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ &.#{$size}-horizontal {
+ @include menu-bar-layout(horizontal);
+ }
+ &.#{$size}-vertical {
+ @include menu-bar-layout(vertical);
+ }
+ }
+ }
+
+ // Icon positioning
+ &, &.icon-top { @include menu-bar-icons(top); }
+ &.icon-right { @include menu-bar-icons(right); }
+ &.icon-bottom { @include menu-bar-icons(bottom); }
+ &.icon-left { @include menu-bar-icons(left); }
+ @each $size in $breakpoint-classes {
+ @each $pos in (top, right, bottom, left) {
+ @include breakpoint($size) {
+ &.#{$size}-icon-#{$pos} { @include menu-bar-icons($pos); }
+ }
+ }
+ }
+
+ // Labels
+ &.label-side { @include menu-bar-labels(right, center); }
+ &.label-corner { @include menu-bar-labels(right, top); }
+
+ // Coloring
+ &.primary {
+ @include menu-bar-style($primary-color, $autocolor: true);
+ }
+ &.dark {
+ @include menu-bar-style($dark-color, $autocolor: true);
+ }
+
+ // Title
+ > li.title {
+ padding: $menubar-item-padding;
+ cursor: default;
+ font-weight: bold;
+ }
+ }
+
+ // Menu groups
+ .menu-group {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ @include breakpoint(medium) {
+ flex-wrap: nowrap;
+ }
+
+ > .menu-group-left, > .menu-group-right {
+ flex: 1 1 100%;
+
+ @include breakpoint(medium) {
+ flex: 0 0 auto;
+ }
+ }
+
+ // Menu bar is condensed
+ .menu-bar {
+ > li { flex: 0 0 auto; }
+ margin: 0;
+ }
+
+ // Coloring class cascades down to the menu bar
+ &.primary {
+ background-color: $primary-color;
+ .menu-bar {
+ @include menu-bar-style($primary-color, $autocolor: true);
+ }
+ }
+ &.dark {
+ background-color: $dark-color;
+ .menu-bar {
+ @include menu-bar-style($dark-color, $autocolor: true);
+ }
+ }
+ }
+}
\ No newline at end of file
Code Review / src / app-framework-demo.git / blobdiff