X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?p=src%2Fapp-framework-demo.git;a=blobdiff_plain;f=afb-client%2Fbower_components%2Ffoundation-apps%2Fscss%2Fcomponents%2F_menu-bar.scss;fp=afb-client%2Fbower_components%2Ffoundation-apps%2Fscss%2Fcomponents%2F_menu-bar.scss;h=7e2f99dbb2c305f4a5ca1c6601bf5bc09e022855;hp=0000000000000000000000000000000000000000;hb=5b1e6cc132f44262a873fa8296a2a3e1017b0278;hpb=f7d2f9ac4168ee5064580c666d508667a73cefc0

diff --git a/afb-client/bower_components/foundation-apps/scss/components/_menu-bar.scss b/afb-client/bower_components/foundation-apps/scss/components/_menu-bar.scss
new file mode 100644
index 0000000..7e2f99d
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_menu-bar.scss
@@ -0,0 +1,363 @@
+/*
+  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