foundation_apps_styles 1.1.0

data/vendor/assets/stylesheets/components/_button-group.scss

@@ -0,0 +1,197 @@
+/// @Foundation.settings
+// Button Group
+$btngroup-background: $primary-color !default;
+$btngroup-color: #fff !default;
+$btngroup-radius: $button-radius !default;
+///
+
+$child-selectors: '> a, > label, > button';
+
+%button-group {
+  margin: 0;
+  margin-bottom: 1rem;
+  list-style-type: none;
+  display: inline-flex;
+  border-radius: $btngroup-radius;
+  overflow: hidden;
+  font-size: $button-font-size;
+
+  > li {
+    flex: 0 0 auto;
+
+    // Links become buttons
+    #{$child-selectors} {
+      @extend %button;
+      border-radius: 0;
+      font-size: inherit;
+      display: block;
+      margin: 0;
+    }
+    > input + label {
+      margin-left: 0;
+    }
+    // Add borders between items
+    &:not(:last-child) {
+      #{$child-selectors} {
+        border-right: 1px solid scale-color($btngroup-background, $lightness: -25%);
+      }
+    }
+  }
+
+  @if using(iconic) {
+    .iconic {
+      width: 1em;
+      height: 1em;
+      vertical-align: middle;
+      margin-right: 0.25em;
+      margin-top: -2px; // The icons are oddly misaligned
+    }
+  }
+}
+
+%button-group-segmented {
+  border: 1px solid $primary-color;
+  transition-property: background color;
+
+  > li {
+    // Hide the radio button
+    > input[type="radio"] {
+      position: absolute;
+      left: -9999px;
+    }
+    // This is the button
+    #{$child-selectors} {
+      margin-right: 0;
+      background: transparent;
+    }
+  }
+}
+
+@mixin button-group-size($size: medium, $expand: false) {
+  $size: $button-font-size * map-get($button-sizes, $size);
+  font-size: $size;
+
+  @if $expand {
+    @include button-group-expand;
+  }
+}
+@mixin button-group-expand($stretch: true) {
+  display: if($stretch, flex, inline-flex);
+
+  > li {
+    flex: if($stretch, 1, 0 0 auto);
+
+    #{$child-selectors} {
+      @if $stretch { @include button-expand; }
+    }
+  }
+}
+@mixin button-group-style(
+  $segmented: false,
+  $background: $primary-color,
+  $color: auto
+) {
+
+  @if not($segmented) {
+    > li {
+      #{$child-selectors} {
+        @include button-style($background, auto, $color);
+        border-color: scale-color($background, $lightness: -15%);
+      }
+      &.is-active {
+        #{$child-selectors} {
+          background: scale-color($background, $lightness: -15%);
+        }
+      }
+    }
+  }
+  @else {
+    @extend %button-group-segmented;
+    $hover-color: rgba($background, 0.25);
+    border-color: $background;
+
+    > li {
+      // This is the button
+      #{$child-selectors} {
+        border-color: $background;
+        color: $background;
+
+        // This is the button being hovered on
+        &:hover {
+          background: $hover-color;
+          color: $background;
+        }
+
+        @if using(iconic) {
+          .iconic { @include color-icon($background); }
+        }
+      }
+
+      // This is the button when it's active
+      &.is-active > a,
+      > input:checked + label {
+        &, &:hover {
+          background: $background;
+          color: isitlight($background);
+        }
+
+        @if using(iconic) {
+          .iconic { @include color-icon(isitlight($background)); }
+        }
+      }
+    }
+  }
+}
+
+@mixin button-group(
+  $segmented: false,
+  $expand: false,
+  $background: $primary-color,
+  $color: #fff
+) {
+  @extend %button-group;
+  @include button-group-expand($expand);
+  @include button-group-style($segmented, $background, $color);
+  border-radius: $btngroup-radius;
+}
+
+@include exports(button-group) {
+  .button-group {
+    @include button-group;
+
+    // Colors
+    &.secondary { @include button-group-style(false, $secondary-color); }
+    &.success   { @include button-group-style(false, $success-color); }
+    &.warning   { @include button-group-style(false, $warning-color); }
+    &.alert     { @include button-group-style(false, $alert-color); }
+
+    // Individual colors
+    > li {
+      &.secondary { #{$child-selectors} { @include button-style($secondary-color, auto, $btngroup: true); } }
+      &.success   { #{$child-selectors} { @include button-style($success-color, auto, $btngroup: true); } }
+      &.warning   { #{$child-selectors} { @include button-style($warning-color, auto, $btngroup: true); } }
+      &.alert     { #{$child-selectors} { @include button-style($alert-color, auto, $btngroup: true); } }
+    }
+
+    // Segmented
+    &.segmented { @include button-group-style(true);
+      &.secondary { @include button-group-style(true, $secondary-color); }
+      &.success   { @include button-group-style(true, $success-color); }
+      &.warning   { @include button-group-style(true, $warning-color); }
+      &.alert     { @include button-group-style(true, $alert-color); }
+    }
+
+    // Sizing
+    &.tiny      { @include button-group-size(tiny); }
+    &.small     { @include button-group-size(small); }
+    &.large     { @include button-group-size(large); }
+    &.expand    { @include button-group-expand; }
+
+    // Disabled
+    li.disabled {
+      #{$child-selectors} {
+        @include button-disabled;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,205 @@
+/// @Foundation.settings
+// Button
+$button-padding: 0.85em 1em !default;
+$button-margin: 0 $global-padding $global-padding 0 !default;
+$button-style: solid !default;
+$button-background: $primary-color !default;
+$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
+$button-color: auto !default;
+$button-radius: 0 !default;
+$button-sizes: (
+  tiny: 0.7,
+  small: 0.8,
+  medium: 1,
+  large: 1.3,
+) !default;
+$button-font-size: 0.9rem !default;
+$button-opacity-disabled: 0.5 !default;
+$button-tag-selector: false !default;
+///
+
+%button {
+  display: inline-block;
+  border: 0;
+  text-align: center;
+  line-height: 1;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -webkit-font-smoothing: antialiased;
+  transition: background 0.25s ease-out;
+  vertical-align: middle;
+
+  padding: $button-padding;
+  margin: $button-margin;
+  font-size: $button-font-size;
+  border-radius: $button-radius;
+
+  // Dropdown arrow
+  // TODO: Change to class and mixin because now the toggle is 'fa-open' which is too generic
+  // &[data-popup-toggle] {
+  //   position: relative;
+  //   padding-right: 2em; // Placeholder
+
+  //   &::after {
+  //     @include css-triangle(6px, black, top);
+  //     position: absolute;
+  //     right: 0.7em;
+  //     top: 50%;
+  //     margin-top: -3px;
+  //   }
+  // }
+}
+
+@mixin button-size($size: medium, $expand: false) {
+  $size: $button-font-size * map-get($button-sizes, $size);
+  font-size: $size;
+
+  @if $expand {
+    @include button-expand;
+  }
+
+  @if using(iconic) {
+    .iconic {
+      width: 1em;
+      height: 1em;
+      vertical-align: middle;
+      margin-right: 0.25em;
+      margin-top: -2px; // The icons are oddly misaligned
+    }
+  }
+}
+
+@mixin button-expand($expand: true) {
+  @if $expand {
+    display: block;
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  @else {
+    display: inline-block;
+    width: auto;
+    margin: $button-margin;
+  }
+}
+
+@mixin button-style(
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color,
+  $style: $button-style,
+  $radius: $button-radius,
+  $btngroup: false
+){
+  @if $style == hollow {
+    border: 1px solid $background;
+    background: transparent;
+    color: $background;
+
+    &:hover, &:focus {
+      border-color: scale-color($background, $lightness: 25%);
+      background: transparent;
+      color: scale-color($background, $lightness: 25%);
+    }
+  }
+  // Solid is the default
+  @else {
+    @if $color == auto {
+      $color: isitlight($background);
+    }
+
+    background: $background;
+    color: $color;
+
+    &:hover, &:focus {
+      @if $background-hover == auto {
+        background: scale-color($background, $lightness: -15%);
+      }
+      @else {
+        background: $background-hover;
+      }
+      color: $color;
+    }
+  }
+
+  @if $btngroup {
+    border-color: $background;
+    &:hover, &:focus {
+      border-color: scale-color($background, $lightness: -25%);
+    }
+  }
+
+  @if using(iconic) {
+    @if $style == hollow {
+      .iconic {
+        @include color-icon($background);
+      }
+      &:hover .iconic {
+        @include color-icon(scale-color($background, $lightness: 25%));
+      }
+    }
+    @else {
+      .iconic {
+        @include color-icon($color);
+      }
+    }
+  }
+}
+
+@mixin button-disabled() {
+  opacity: $button-opacity-disabled;
+  cursor: default;
+  pointer-events: none;
+}
+
+@mixin button(
+  $size: medium,
+  $expand: false,
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color,
+  $style: $button-style,
+  $radius: $button-radius
+) {
+  @extend %button;
+  @include button-size($size);
+  @include button-expand($expand);
+  @include button-style($background, $background-hover, $color, $style);
+}
+
+@include exports(button) {
+  .button {
+    @include button;
+
+    &.tiny   { @include button-size(tiny); }
+    &.small  { @include button-size(small); }
+    &.large  { @include button-size(large); }
+    &.expand { @include button-expand; }
+
+    &.secondary { @include button-style($secondary-color, auto) }
+    &.success   { @include button-style($success-color, auto) }
+    &.warning   { @include button-style($warning-color, auto) }
+    &.alert     { @include button-style($alert-color, auto) }
+    &.info      { @include button-style($info-color, auto) }
+    &.dark      { @include button-style($dark-color, auto) }
+
+    @if $button-style != hollow {
+      &.hollow { @include button-style($style: hollow);
+        &.secondary { @include button-style($secondary-color, $style: hollow); }
+        &.success   { @include button-style($success-color, $style: hollow); }
+        &.warning   { @include button-style($warning-color, $style: hollow); }
+        &.alert     { @include button-style($alert-color, $style: hollow); }
+        &.info      { @include button-style($info-color, $style: hollow); }
+        &.dark      { @include button-style($dark-color, $style: hollow); }
+      }
+    }
+
+    &.disabled { @include button-disabled; }
+  }
+
+  @if $button-tag-selector {
+    button {
+      @extend .button;
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+/*
+  Cards
+
+  Structure:
+
+  titles
+  lists
+*/
+
+/// @Foundation.settings
+// Card
+$card-background: #fff !default;
+$card-color: isitlight($card-background) !default;
+$card-border: 1px solid smartscale($card-background, 7%) !default;
+$card-radius: $global-radius !default;
+$card-shadow: 0 1px 2px rgba(#000, 0.2) !default;
+$card-padding: $global-padding !default;
+$card-margin: 0.5rem !default;
+
+$card-divider-background: smartscale($card-background, 7%) !default;
+///
+
+@mixin card-container(
+  $background: $card-background,
+  $color: $card-color,
+  $border: $card-border,
+  $radius: $card-radius,
+  $shadow: $card-shadow,
+  $padding: $card-padding,
+  $margin: $card-margin
+) {
+  border: $border;
+  margin-bottom: $margin;
+  background: $background;
+  color: $color;
+  border-radius: $radius;
+  box-shadow: $shadow;
+  overflow: hidden;
+
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+  }
+
+  ul {
+    margin-bottom: 0;
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
+@mixin card-divider(
+  $background: $card-divider-background,
+  $padding: $card-padding
+) {
+  background: $background;
+  padding: $padding;
+}
+
+@mixin card-section(
+  $padding: $card-padding
+) {
+  padding: $padding;
+}
+
+@include exports(card) {
+  .card {
+    @include card-container;
+
+    @each $color in map-keys($foundation-colors) {
+      &.#{$color} {
+        $color-value: map-get($foundation-colors, $color);
+        @include card-container(
+          $background: $color-value,
+          $color: isitlight($color-value),
+          $border: 0
+        );
+        .card-divider {
+          @include card-divider(
+            $background: smartscale($color-value, 7%)
+          );
+        }
+      }
+    }
+  }
+    .card-divider {
+      @include card-divider;
+    }
+    .card-section {
+      @include card-section;
+    }
+}