foundation_apps_styles 1.1.0

data/vendor/assets/stylesheets/components/_label.scss

@@ -0,0 +1,134 @@
+/*
+  Label
+*/
+
+/// @Foundation.settings
+// Label
+$label-fontsize: 0.8rem !default;
+$label-padding: ($global-padding / 3) ($global-padding / 2) !default;
+$label-radius: 0 !default;
+$label-background: $primary-color !default;
+$label-color: isitlight($primary-color) !default;
+
+$badge-fontsize: 0.8em !default;
+$badge-diameter: 1.5rem !default;
+$badge-background: $primary-color !default;
+$badge-color: #fff !default;
+///
+
+%label {
+  line-height: 1;
+  white-space: nowrap;
+  display: inline-block;
+  cursor: default;
+}
+
+@mixin label-layout(
+  $fontsize: $label-fontsize,
+  $padding: $label-padding
+) {
+  font-size: $fontsize;
+  padding: $padding;
+}
+
+@mixin label-style(
+  $background: $label-background,
+  $color: $label-color,
+  $radius: $label-radius
+) {
+  background: $background;
+  border-radius: $radius;
+
+  @if $color == auto {
+    color: isitlight($background);
+  }
+  @else {
+    color: $color;
+  }
+}
+
+@mixin label(
+  $background: $label-background,
+  $color: $label-color,
+  $radius: $label-radius,
+  $fontsize: $label-fontsize,
+  $padding: $label-padding
+) {
+  @extend %label;
+  @include label-layout($fontsize, $padding);
+  @include label-style($background, $color, $radius);
+}
+
+@include exports(label) {
+  .label {
+    @include label;
+
+    @each $color in map-keys($foundation-colors) {
+      &.#{$color} {
+        $color-value: map-get($foundation-colors, $color);
+        @include label-style($color-value, auto);
+      }
+    }
+  }
+}
+
+/*
+  Badge
+*/
+
+%badge {
+  align-items: center;
+  justify-content: center;
+  display: inline-flex;
+  border-radius: 1000px;
+}
+
+@mixin badge-layout(
+  $fontsize: $badge-fontsize,
+  $diameter: $badge-diameter
+) {
+  font-size: $fontsize;
+  width: $diameter;
+  height: $diameter;
+}
+
+@mixin badge-style(
+  $background: $badge-background,
+  $color: $badge-font-color
+) {
+  background: $background;
+
+  @if $color == auto {
+    color: isitlight($background);
+  }
+  @else {
+    color: $color;
+  }
+}
+
+@mixin badge(
+  $background: $badge-background,
+  $color: $badge-color,
+  $diameter: $badge-diameter,
+  $fontsize: $badge-fontsize
+) {
+  @extend %badge;
+  @include badge-layout($fontsize, $diameter);
+  @include badge-style($background, $color);
+}
+
+@include exports(badge) {
+  .badge {
+    @include badge;
+
+    &.secondary {
+      @include badge-style($secondary-color, auto);
+    }
+    @each $color in map-keys($foundation-colors) {
+      &.#{$color} {
+        $color-value: map-get($foundation-colors, $color);
+        @include badge-style($color-value, auto);
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/components/_list.scss

@@ -0,0 +1,19 @@
+@mixin inline-list($alignment){
+	list-style-type: none;
+	text-align: $alignment;
+	li, dt, dd {
+		display: inline-block;
+		margin-left: -2px;
+		margin-right: -2px;
+	}
+}
+
+@include exports(list) {
+  .inline-list {
+    @include inline-list(left);
+    li {
+      margin-right: 1rem;
+      margin-left: 0;
+    }
+  }
+}

data/vendor/assets/stylesheets/components/_menu-bar.scss

@@ -0,0 +1,382 @@
+/*
+  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;
+  overflow-y: visible;
+
+  // Menu item
+  > li {
+    // This flex setting makes each item an equal width
+    flex: 1 0 0;
+    align-items: center;
+
+    // The list item itself is also a flex container, to center links in case they have different height
+    display: flex;
+    align-items: stretch;
+
+    // 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: 1 0 0;
+    }
+    > li > a {
+      flex-flow: column nowrap;
+    }
+  }
+  @else {
+    flex-flow: column nowrap;
+
+    > li {
+      flex: 1 0 auto;
+    }
+    > 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;
+      }
+
+      // Remove any margins from standalone icons
+      &:first-child:last-child {
+        margin: 0;
+      }
+    }
+
+    // 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);
+      }
+    }
+  }
+}