foundation_apps_styles 1.1.0

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

@@ -0,0 +1,72 @@
+/*
+  ACCORDION
+  ---------
+
+  The trusy accordion allows you to create a series of vertical tabs.
+*/
+
+/// @Foundation.settings
+// Accordion
+$accordion-border: 1px solid $gray-dark !default;
+
+$accordion-title-background: $gray-light !default;
+$accordion-title-background-hover: smartscale($accordion-title-background, 5%) !default;
+$accordion-title-background-active: smartscale($accordion-title-background, 3%) !default;
+$accordion-title-color: isitlight($accordion-title-background) !default;
+$accordion-title-color-active: isitlight($accordion-title-background) !default;
+
+$accordion-title-padding: $global-padding !default;
+$accordion-content-padding: $global-padding !default;
+///
+
+@mixin accordion-title(
+  $background: $accordion-title-background,
+  $background-hover: $accordion-title-background-hover,
+  $background-active: $accordion-title-background-active,
+  $color: $accordion-title-color,
+  $color-active: $accordion-title-color-active,
+  $padding: $accordion-title-padding
+) {
+  padding: $padding;
+  background: $background;
+  color: $color;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    background: $background-hover;
+  }
+
+  .is-active > & {
+    background: $background-active;
+    color: $color-active;
+  }
+}
+
+@mixin accordion-content(
+  $padding: $accordion-content-padding
+) {
+  padding: $padding;
+
+  display: none;
+  .is-active > & {
+    display: block;
+  }
+}
+
+@include exports(accordion) {
+  .accordion {
+    @if hasvalue($accordion-border) {
+      border: $accordion-border;
+    }
+  }
+    .accordion-item {
+
+    }
+    .accordion-title {
+      @include accordion-title;
+    }
+    .accordion-content {
+      @include accordion-content;
+    }
+}

data/vendor/assets/stylesheets/components/_action-sheet.scss

@@ -0,0 +1,265 @@
+/*
+  ACTION SHEET
+  ------------
+
+  A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices.
+*/
+
+/// @Foundation.settings
+// Action Sheet
+$actionsheet-background: white !default;
+$actionsheet-border-color: #ccc !default;
+$actionsheet-animate: transform opacity !default;
+$actionsheet-animation-speed: 0.25s !default;
+$actionsheet-width: 300px !default;
+$actionsheet-radius: 4px !default;
+$actionsheet-shadow: 0 -3px 10px rgba(black, 0.25) !default;
+$actionsheet-padding: $global-padding !default;
+$actionsheet-tail-size: 10px !default;
+
+$actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25) !default;
+
+$actionsheet-link-color: #000 !default;
+$actionsheet-link-background-hover: smartscale($actionsheet-background) !default;
+///
+
+/*
+  Styles for the list inside an action sheet.
+  Don't include this mixin if you want to build custom controls inside the sheet.
+*/
+@mixin action-sheet-menu(
+  $padding: $actionsheet-padding,
+  $color: $actionsheet-link-color,
+  $border-color: $actionsheet-border-color,
+  $background-hover: $actionsheet-link-background-hover
+) {
+  // Menu container
+  ul {
+    margin: -($padding);
+    margin-top: 0;
+    list-style-type: none;
+    user-select: none;
+
+    // If the menu has no content above it
+    &:first-child {
+      margin-top: -$padding;
+
+      li:first-child {
+        border-top: 0;
+      }
+    }
+
+    // Menu links
+    a {
+      display: block;
+      padding: $padding * 0.8;
+      line-height: 1;
+      color: $color;
+      border-top: 1px solid $border-color;
+
+      &:hover {
+        color: $color;
+        background: $background-hover;
+      }
+    }
+
+    .alert > a {
+      color: $alert-color;
+    }
+    .disabled > a {
+      pointer-events: none;
+      color: #999;
+    }
+  }
+}
+
+/*
+  Styles for the action sheet container. Action sheets pin to the top or bottom of the screen.
+*/
+@mixin action-sheet(
+  $position: bottom,
+  $shadow: $actionsheet-shadow,
+  $animate: $actionsheet-animate,
+  $animation-speed: $actionsheet-animation-speed,
+  $padding: $actionsheet-padding,
+  $background: $actionsheet-background
+) {
+  position: fixed;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  padding: $padding;
+  background: $background;
+  text-align: center;
+  transition-property: $animate;
+  transition-duration: $animation-speed;
+  transition-timing-function: ease-out;
+
+  @if hasvalue($shadow) {
+    box-shadow: $shadow;
+  }
+
+  // Positions
+  @if $position == bottom {
+    bottom: 0;
+    transform: translateY(100%);
+
+    &.is-active {
+      transform: translateY(0%);
+    }
+  }
+  // These two don't quite work as planned yet
+  @else if $position == top {
+    top: 0;
+    transform: translateY(-100%);
+
+    &.is-active {
+      transform: translateY(0%);
+    }
+  }
+}
+
+@mixin popup-menu(
+  $position: bottom,
+  $background: $actionsheet-background,
+  $width: $actionsheet-width,
+  $radius: $actionsheet-radius,
+  $shadow: $actionsheet-popup-shadow,
+  $tail-size: $actionsheet-tail-size
+) {
+  /*
+    Core styles
+  */
+  position: absolute;
+  left: 50%;
+  width: $width;
+  border-radius: $radius;
+  opacity: 0;
+  pointer-events: none;
+
+  /*
+    Menu shadow
+  */
+  @if hasvalue($shadow) {
+    box-shadow: $shadow;
+  }
+
+  /*
+    Active state
+  */
+  &.is-active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /*
+    Menu tail
+  */
+  &::before, &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    display: block;
+    width: 0px;
+    height: 0px;
+    border-left: $tail-size solid transparent;
+    border-right: $tail-size solid transparent;
+    margin-left: -($tail-size);
+  }
+
+  /*
+    Positioning
+  */
+  @if $position == bottom {
+    top: auto;
+    bottom: 0;
+    transform: translateX(-50%) translateY(110%);
+    &.is-active {
+      transform: translateX(-50%) translateY(100%);
+    }
+
+    &::before, &::after {
+      top: -($tail-size);
+      bottom: auto;
+      border-top: 0;
+      border-bottom: $tail-size solid $background;
+    }
+    &::before {
+      top: -($tail-size + 2);
+      border-bottom-color: rgba(black, 0.15);
+    }
+
+  }
+  @else if $position == top {
+    top: 0;
+    bottom: auto;
+    transform: translateX(-50%) translateY(-120%);
+    &.is-active {
+      transform: translateX(-50%) translateY(-110%);
+    }
+
+    &::before, &::after {
+      top: auto;
+      bottom: -($tail-size);
+      border-top: $tail-size solid $background;
+      border-bottom: 0;
+    }
+    &::before {
+      bottom: -($tail-size + 2);
+      border-top-color: rgba(black, 0.15);
+    }
+  }
+}
+
+@include exports(action-sheet) {
+  .action-sheet-container {
+    position: relative;
+    display: inline-block;
+
+    .button {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+  .action-sheet {
+    @include action-sheet;
+    @include action-sheet-menu;
+
+    @include breakpoint(medium) {
+      @include popup-menu;
+
+      &.top {
+        @include popup-menu(top);
+      }
+    }
+
+    &.primary {
+      background: $primary-color;
+      color: isitlight($primary-color);
+      border: 0;
+      &::before { display: none; }
+      &::before, &::after { border-top-color: $primary-color; }
+      &.top::before, &.top::after { border-bottom-color: $primary-color; }
+
+      @include action-sheet-menu(
+        $color: isitlight($primary-color),
+        $border-color: smartscale($primary-color, 10%),
+        $background-hover: smartscale($primary-color)
+      );
+    }
+    &.dark {
+      background: $dark-color;
+      color: isitlight($dark-color);
+      border: 0;
+      &::before { display: none; }
+      &::before, &::after { border-top-color: $dark-color; }
+      &.top::before, &.top::after { border-bottom-color: $dark-color; }
+
+      @include action-sheet-menu(
+        $color: isitlight($dark-color),
+        $border-color: smartscale($dark-color, 10%),
+        $background-hover: smartscale($dark-color)
+      );
+    }
+  }
+}

data/vendor/assets/stylesheets/components/_block-list.scss

@@ -0,0 +1,360 @@
+/*
+  BLOCK LIST
+  ----------
+
+  A generic list component that can accomodate a variety of styles and controls.
+
+  Features:
+   - Icons
+   - Labels
+   - Chevrons
+   - Text fields
+   - Dropdown menus
+   - Checkbox/radio inputs
+*/
+
+/// @Foundation.settings
+// Block List
+$blocklist-background: #fff !default;
+$blocklist-fullbleed: true !default;
+$blocklist-fontsize: 1rem !default;
+
+$blocklist-item-padding: 0.8rem 1rem !default;
+$blocklist-item-color: isitlight($blocklist-background, #000, #fff) !default;
+$blocklist-item-background-hover: smartscale($blocklist-background, 4.5%) !default;
+$blocklist-item-color-disabled: #999 !default;
+$blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%) !default;
+
+$blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%) !default;
+$blocklist-item-icon-size: 0.8 !default;
+
+$blocklist-header-fontsize: 0.8em !default;
+$blocklist-header-color: smartscale($blocklist-item-color, 40%) !default;
+$blocklist-header-uppercase: true;
+
+$blocklist-check-icons: true !default;
+///
+
+/*
+  Adds styles for a block list container.
+
+  $font-size: global font size for the list.
+  $full-bleed: when "true", the margins of the list invert to line it up with the edge of a padded element.
+*/
+%block-list-container {
+  margin-bottom: 1rem;
+  line-height: 1;
+  user-select: none;
+
+  &, ul {
+    list-style-type: none;
+  }
+  ul {
+    margin-left: 0;
+  }
+}
+@mixin block-list-container(
+  $font-size: $blocklist-fontsize,
+  $full-bleed: $blocklist-fullbleed
+) {
+  @extend %block-list-container;
+  font-size: $font-size;
+
+  @if $full-bleed {
+    margin-left: -$global-padding;
+    margin-right: -$global-padding;
+  }
+}
+
+/*
+  Styles block list headers on the selector you include this mixin in (normally a <header>).
+
+  $color - color of the header.
+  $font-size - font size of the header.
+  $offset - left margin to add to the header, to line it up with the list items.
+*/
+@mixin block-list-header(
+  $color: $blocklist-header-color,
+  $font-size: $blocklist-header-fontsize,
+  $uppercase: $blocklist-header-uppercase,
+  $offset: get-side($blocklist-item-padding, left)
+) {
+  margin-top: 1em;
+  color: $color;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+  margin-left: $offset;
+  font-size: $font-size;
+  cursor: default;
+  @if $uppercase { text-transform: uppercase; }
+}
+
+/*
+  Styles block list items on the selector you include this mixin in (normally an <li>).
+
+  $color - color of items.
+  $color-hover - color of items on hover.
+  $background - background of items.
+  $background-hover - background of items on hover.
+  $border - border between items.
+  $padding - padding on items.
+*/
+@mixin block-list-item(
+  $color: $blocklist-item-color,
+  $color-hover: $blocklist-item-color,
+  $color-disabled: $blocklist-item-color-disabled,
+  $background: transparent,
+  $background-hover: $blocklist-item-background-hover,
+  $border: $blocklist-item-border,
+  $padding: $blocklist-item-padding
+) {
+  position: relative;
+
+  @if hasvalue($border) {
+    border-bottom: $border;
+    &:first-child {
+      border-top: $border;
+    }
+  }
+
+  // Inner elements share the same basic styles
+  > a, > span, > label {
+    display: block;
+    padding: $padding;
+    padding-left: get-side($padding, left);
+    color: $color;
+    line-height: 1;
+  }
+  > span {
+    cursor: default;
+  }
+  > a, > label {
+    cursor: pointer;
+
+    &:hover {
+      color: $color-hover;
+    }
+  }
+  > a, > label, select {
+    &:hover {
+      background: $background-hover;
+    }
+  }
+
+  // Coloring classes
+  &.caution > a {
+    &, &:hover { color: $alert-color; }
+  }
+  &.disabled > a {
+    cursor: default;
+    &, &:hover { color: $color-disabled; }
+    &:hover { background: transparent; }
+  }
+}
+
+/*
+  Adds label styles to the class you include this mixin in.
+
+  $color - color of the label.
+  $left-class - extra class to flip the orientation of the label.
+  $left-padding - left padding to use for left-hand labels.
+*/
+@mixin block-list-label(
+  $color: $blocklist-item-label-color,
+  $left-class: 'left',
+  $left-padding: get-side($blocklist-item-padding, top)
+) {
+  display: inline-block;
+  float: right;
+  padding: 0;
+  color: $color;
+  pointer-events: none;
+
+  &.#{$left-class} {
+    margin-left: $left-padding;
+    float: none;
+  }
+}
+
+/*
+  Adds support for chevrons, which appear on the right-hand side of the item.
+
+  $color - color of the chevron.
+  $padding - include the global padding of block list items here.
+*/
+@mixin block-list-chevron(
+  $color: $blocklist-header-color,
+  $padding: $blocklist-item-padding,
+  $label-class: 'block-list-label'
+) {
+  // Chevrons are a pseudo-element
+  &::after {
+    content: '\203A';
+    display: block;
+    position: absolute;
+    right: get-side($padding, right);
+    top: 50%;
+    transform: translateY(-50%);
+    font-weight: bold;
+    color: $color;
+    font-size: 2em;
+  }
+
+  // Labels next to links move over to make room for the chevron
+  // TODO: this selector needs to be customiable, but adding a setting just for it might be weird
+  .#{$label-class} {
+    padding-right: get-side($padding, right) * 1.5;
+  }
+}
+
+/*
+  Adds icon styles. Call this mixin on a block list container.
+
+  $size - size of the icon as a percentage (decimal) of the list item's height.
+  $item-selector - overrides the 'li' selector used for list items.
+*/
+@mixin block-list-icons(
+  $size: $blocklist-item-icon-size,
+  $item-selector: 'li'
+) {
+  // PH - need a better solution
+  $item-height:
+    $blocklist-fontsize
+    + get-side($blocklist-item-padding, top)
+    + get-side($blocklist-item-padding, top);
+
+  $icon-height: $item-height * $blocklist-item-icon-size;
+  $icon-offset: ($item-height - $icon-height) / 2;
+
+  #{$item-selector} {
+    > a, > span, > label {
+      padding-left: (get-side($blocklist-item-padding, left) * 2) + $blocklist-item-icon-size;
+    }
+    img, .iconic {
+      position: absolute;
+      top: $icon-offset;
+      left: $icon-offset;
+      width: $icon-height;
+      height: $icon-height;
+      border-radius: 8px;
+      pointer-events: none;
+    }
+  }
+}
+
+/*
+  Adds support for text fields, select menus, and checkbox/radio groups in block lists.
+
+  $color - color of select menu arrow.
+  $background-hover - color of select menu when hovered over.
+  $padding - include the global padding of block list items here.
+  $dropdown-class - class to use for list items that contain a dropdown.
+  $switch-class - class to use for switches inside list items.
+*/
+@mixin block-list-inputs(
+  $color: $blocklist-item-color,
+  $background: $blocklist-background,
+  $background-hover: $blocklist-item-background-hover,
+  $padding: $blocklist-item-padding,
+  $icons: $blocklist-check-icons,
+  $dropdown-class: 'with-dropdown',
+  $switch-class: 'switch'
+) {
+  // Text fields
+  #{$text-input-selectors} {
+    $top-padding: get-side($padding, top) - ($blocklist-fontsize * 0.2);
+    $bottom-padding: get-side($padding, bottom) - ($blocklist-fontsize * 0.2);
+    $left-padding: get-side($padding, left);
+    $right-padding: get-side($padding, right);
+    $height: ($blocklist-fontsize * 1.4 + $top-padding + $bottom-padding);
+
+    overflow: visible;
+    box-sizing: border-box;
+    margin: 0;
+    border: 0;
+    height: $height;
+    padding: $top-padding $right-padding $bottom-padding $left-padding;
+    color: inherit;
+    font-size: $blocklist-fontsize;
+    -webkit-font-smoothing: antialiased;
+    vertical-align: middle;
+
+    &:hover, &:focus {
+      border: 0;
+    }
+  }
+
+  // Multiple select
+  li > input[type="checkbox"], li > input[type="radio"] {
+    position: absolute;
+    left: -9999px;
+
+    & + label {
+      display: block;
+      font-size: $blocklist-fontsize;
+      margin: 0;
+    }
+
+    @if $icons == true {
+      &:checked + label {
+        &::before {
+          @include image-checkmark($color);
+          content: '';
+          background-size: 100% 100%;
+          width: 1.5em;
+          height: 1.5em;
+          color: $primary-color;
+          float: right;
+          pointer-events: none;
+          margin-top: -0.25em;
+        }
+      }
+    }
+  }
+
+  // Dropdowns
+  .#{$dropdown-class} {
+    color: inherit;
+
+    select {
+      // Reset pesky <select> styles
+      -webkit-appearance: none;
+         -moz-appearance: none;
+      outline: 0;
+      background: 0;
+      border: 0;
+      height: auto;
+      padding: $padding;
+      margin: 0;
+      font-size: 1em; // Same size as its parent
+      line-height: 1;
+      color: inherit;
+      background-color: transparent;
+    }
+  }
+
+  // Switches
+  .#{$switch-class} {
+    position: absolute;
+    top: 50%;
+    right: get-side($padding, right);
+    transform: translateY(-50%);
+  }
+}
+
+@include exports(block-list) {
+  .block-list {
+    @include block-list-container;
+    @include block-list-inputs;
+
+    &.with-icons { @include block-list-icons; }
+    header       { @include block-list-header; }
+
+    li {
+      @include block-list-item;
+
+      &.with-chevron    { @include block-list-chevron; }
+      .block-list-label { @include block-list-label; }
+    }
+  }
+}