summaryrefslogtreecommitdiffstats
path: root/afb-client/bower_components/foundation-apps/scss/components
diff options
context:
space:
mode:
authorStephane Desneux <stephane.desneux@iot.bzh>2016-05-31 18:16:48 +0200
committerStephane Desneux <stephane.desneux@iot.bzh>2016-05-31 18:16:48 +0200
commit5b1e6cc132f44262a873fa8296a2a3e1017b0278 (patch)
tree43b2cd54e2e300b399ff3f2af4458a2c4ed8a144 /afb-client/bower_components/foundation-apps/scss/components
parentf7d2f9ac4168ee5064580c666d508667a73cefc0 (diff)
parent85ace9c1ce9a98e9b8a22f045c7dd752b38d9129 (diff)
Merge afb-client
Diffstat (limited to 'afb-client/bower_components/foundation-apps/scss/components')
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_accordion.scss72
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_action-sheet.scss265
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_block-list.scss350
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_button-group.scss197
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_button.scss205
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_card.scss93
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_extras.scss54
-rwxr-xr-xafb-client/bower_components/foundation-apps/scss/components/_forms.scss458
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_grid.scss420
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_iconic.scss95
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_label.scss134
-rwxr-xr-xafb-client/bower_components/foundation-apps/scss/components/_list.scss19
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_menu-bar.scss363
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_modal.scss126
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_motion.scss524
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_notification.scss207
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_off-canvas.scss169
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_panel.scss134
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_popup.scss68
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_switch.scss130
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_tabs.scss100
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_title-bar.scss135
-rwxr-xr-xafb-client/bower_components/foundation-apps/scss/components/_typography.scss345
-rwxr-xr-xafb-client/bower_components/foundation-apps/scss/components/_utilities.scss160
24 files changed, 4823 insertions, 0 deletions
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_accordion.scss b/afb-client/bower_components/foundation-apps/scss/components/_accordion.scss
new file mode 100644
index 0000000..d330f47
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/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;
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_action-sheet.scss b/afb-client/bower_components/foundation-apps/scss/components/_action-sheet.scss
new file mode 100644
index 0000000..28b945c
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/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)
+ );
+ }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_block-list.scss b/afb-client/bower_components/foundation-apps/scss/components/_block-list.scss
new file mode 100644
index 0000000..5b1cbe4
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_block-list.scss
@@ -0,0 +1,350 @@
+/*
+ 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} {
+ margin: 0;
+ border: 0;
+ line-height: 1;
+ height: auto;
+ padding: $padding;
+ color: inherit;
+
+ &: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; }
+ }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_button-group.scss b/afb-client/bower_components/foundation-apps/scss/components/_button-group.scss
new file mode 100644
index 0000000..8505c84
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/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;
+ }
+ }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_button.scss b/afb-client/bower_components/foundation-apps/scss/components/_button.scss
new file mode 100644
index 0000000..6e22b19
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/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;
+ }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_card.scss b/afb-client/bower_components/foundation-apps/scss/components/_card.scss
new file mode 100644
index 0000000..680a755
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/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;
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_extras.scss b/afb-client/bower_components/foundation-apps/scss/components/_extras.scss
new file mode 100644
index 0000000..1e2443a
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_extras.scss
@@ -0,0 +1,54 @@
+/*
+ Odds and ends.
+*/
+
+/// @Foundation.settings
+// Extras
+$closebutton-position: (top right) !default;
+$closebutton-size: 2em !default;
+$closebutton-lineheight: 0.5 !default;
+$closebutton-color: #999 !default;
+$closebutton-color-hover: #333 !default;
+
+$thumbnail-padding: 0.5rem !default;
+$thumbnail-shadow: 0 3px 15px rgba(black, 0.25) !default;
+///
+
+// A basic close button. They pin to the corner of the thing they're inside.
+%close-button {
+ $x: nth($closebutton-position, 1);
+ $y: nth($closebutton-position, 2);
+
+ position: absolute;
+ color: $closebutton-color;
+ #{$x}: $global-padding;
+ #{$y}: $global-padding;
+ font-size: $closebutton-size;
+ line-height: $closebutton-lineheight;
+ cursor: pointer;
+
+ &:hover {
+ color: $closebutton-color-hover;
+ }
+}
+
+// Make your images fancy-like.
+%thumbnail {
+ padding: $thumbnail-padding;
+ box-shadow: $thumbnail-shadow;
+}
+
+@include exports(extras) {
+ .close-button {
+ @extend %close-button;
+ }
+ .thumbnail {
+ @extend %thumbnail;
+ }
+ ul.thumbnails > li {
+ margin-bottom: 1rem;
+
+ a { display: block; }
+ img { @extend %thumbnail; }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_forms.scss b/afb-client/bower_components/foundation-apps/scss/components/_forms.scss
new file mode 100755
index 0000000..7d0376b
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_forms.scss
@@ -0,0 +1,458 @@
+/*
+ FORMS
+ -----
+
+ Our form styles include basic resets for text fields, select menus, and so on, along with some of our own custom components.
+
+ Includes:
+ - Text fields
+ - Text areas
+ - Select menus
+ - Checkboxes and radio buttons
+ - Range slider
+ - Progress bars and meters
+*/
+
+/// @Foundation.settings
+// Forms
+// Basic form variables
+$form-fontsize: 1rem !default;
+$form-padding: 0.5rem !default;
+
+// Text fields
+$input-color: #000 !default;
+$input-color-hover: $input-color !default;
+$input-color-focus: $input-color !default;
+$input-background: #fff !default;
+$input-background-hover: $input-background !default;
+$input-background-focus: $input-background !default;
+$input-background-disabled: smartscale($input-background) !default;
+$input-border: 1px solid #ccc !default;
+$input-border-hover: 1px solid #bbb !default;
+$input-border-focus: 1px solid #999 !default;
+$input-cursor-disabled: not-allowed !default;
+
+// Select menus
+$select-color: #000 !default;
+$select-background: #fafafa !default;
+$select-background-hover: smartscale($select-background, 4%) !default;
+$select-arrow: true !default;
+$select-arrow-color: $select-color !default;
+
+// Labels
+$form-label-fontsize: 0.9rem !default;
+$form-label-margin: 0.5rem !default;
+$form-label-color: #333 !default;
+
+// Inline labels
+$inlinelabel-color: #333 !default;
+$inlinelabel-background: #eee !default;
+$inlinelabel-border: $input-border !default;
+
+// Range slider
+$slider-background: #ddd !default;
+$slider-height: 1rem !default;
+$slider-radius: 0px !default;
+$slider-thumb-height: 1.5rem !default;
+$slider-thumb-color: $primary-color !default;
+$slider-thumb-radius: 0px !default;
+
+// Progress and meter
+$meter-height: 1.5rem !default;
+$meter-background: #ccc !default;
+$meter-fill: $primary-color !default;
+$meter-fill-high: $success-color !default;
+$meter-fill-medium: #e7cf00 !default;
+$meter-fill-low: $alert-color !default;
+$meter-radius: 0 !default;
+///
+
+// Disable OS-level styles
+@mixin no-appearance {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+}
+
+// Text fields
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+#{$text-input-selectors} {
+ $top-padding: get-side($form-padding, top);
+ $bottom-padding: get-side($form-padding, bottom);
+ $height: ($form-fontsize * 1.4) + $top-padding + $bottom-padding;
+
+ @include no-appearance;
+ display: block;
+ width: 100%;
+ height: $height;
+ padding: $form-padding;
+ margin: 0 0 $global-padding 0;
+ border: $input-border;
+ border-radius: 0;
+ background: $input-background;
+ color: $input-color;
+ font-size: $form-fontsize;
+ -webkit-font-smoothing: antialiased;
+ vertical-align: middle;
+
+ &:hover {
+ border: $input-border-hover;
+ background: $input-background-hover;
+ color: $input-color-hover;
+ }
+ &:focus {
+ outline: 0;
+ border: $input-border-focus;
+ background: $input-background-focus;
+ color: $input-color-focus;
+ }
+
+ label > & {
+ margin-top: $form-label-margin;
+ }
+}
+
+// Override the content-box declaration set by Normalize
+input[type="search"] {
+ box-sizing: border-box;
+}
+
+// Disabled state
+input {
+ &.disabled,
+ &[disabled],
+ &[readonly],
+ fieldset[disabled] & {
+ cursor: $input-cursor-disabled;
+
+ &, &:hover {
+ background-color: $input-background-disabled;
+ }
+ }
+}
+
+// Labels
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+label {
+ display: block;
+ font-size: $form-label-fontsize;
+ margin-bottom: $form-label-margin;
+ color: $form-label-color;
+
+ > input, > textarea {
+ margin-top: $form-label-margin;
+ }
+}
+
+// Checkbox/radio buttons
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+input[type="checkbox"], input[type="radio"] {
+ width: 1rem;
+ height: 1rem;
+
+ // Input inside of a label
+ label > & {
+ margin-right: $form-padding * 0.5;
+ }
+
+ // Input next to a label
+ & + label {
+ display: inline-block;
+ margin-left: $form-padding;
+ margin-right: $form-padding * 2;
+ margin-bottom: 0;
+ vertical-align: baseline;
+ }
+}
+
+// Inline labels
+// Inline labels allow you to prefix or postfix special labels to inputs
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+.inline-label {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: stretch;
+ margin-bottom: $global-padding;
+
+ // Imitates the top margin on normal inputs
+ label > & {
+ margin-top: $form-label-margin;
+ }
+
+ // Inputs stretch all the way out
+ > input, > select {
+ flex: 1;
+ margin: 0;
+ }
+
+ // Inline labels and buttons shrink
+ > .form-label {
+ flex: 0 0 auto;
+ background: $inlinelabel-background;
+ color: $inlinelabel-color;
+ border: $inlinelabel-border;
+ padding: 0 $form-padding;
+ display: flex;
+ align-items: center;
+
+ &:first-child { border-right: 0; }
+ &:last-child { border-left: 0; }
+ }
+ // Buttons also shrink
+ > a,
+ > button,
+ > input[type="button"],
+ > input[type="submit"] {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ padding-top: 0;
+ padding-bottom: 0;
+ margin: 0;
+ border-radius: 0;
+ }
+}
+
+// Text areas
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+textarea {
+ height: auto;
+ width: 100%;
+ min-height: 50px;
+}
+
+// Select menus
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+select {
+ $top-padding: get-side($form-padding, top);
+ $bottom-padding: get-side($form-padding, bottom);
+ $height: ($form-fontsize * 1.4) + $top-padding + $bottom-padding;
+ $color: isitlight($select-background);
+
+ @include no-appearance;
+ display: block;
+ width: 100%;
+ height: $height;
+ padding: $form-padding;
+ margin: 0 0 $global-padding 0;
+ font-size: $form-fontsize;
+ color: $select-color;
+ border-radius: 0;
+ border: $input-border;
+
+ @if $select-arrow {
+ background: $select-background url(image-triangle($select-arrow-color)) right 10px center no-repeat;
+ background-size: 8px 8px;
+ padding-right: rem-calc(18px) + $form-padding;
+ }
+ @else {
+ background-color: $select-background
+ }
+
+ &:hover {
+ background-color: $select-background-hover;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ // Remove the dropdown arrow added in IE10/11
+ &::-ms-expand {
+ display: none;
+ }
+}
+
+// Range slider
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+input[type="range"] {
+ $margin: ($slider-thumb-height - $slider-height) / 2;
+
+ @include no-appearance;
+ display: block;
+ width: 100%;
+ height: auto;
+ cursor: pointer;
+ margin-top: $margin;
+ margin-bottom: $margin;
+ border: 0;
+ line-height: 1;
+
+ @if hasvalue($slider-radius) {
+ border-radius: $slider-radius;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ // Chrome/Safari
+ &::-webkit-slider-runnable-track {
+ height: $slider-height;
+ background: $slider-background;
+ }
+ &::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: $slider-thumb-color;
+ width: $slider-thumb-height;
+ height: $slider-thumb-height;
+ margin-top: -$margin;
+ @if hasvalue($slider-thumb-radius) {
+ border-radius: $slider-thumb-radius;
+ }
+ }
+ // Firefox
+ &::-moz-range-track {
+ -moz-appearance: none;
+ height: $slider-height;
+ background: #ccc;
+ }
+ &::-moz-range-thumb {
+ -moz-appearance: none;
+ background: $slider-thumb-color;
+ width: $slider-thumb-height;
+ height: $slider-thumb-height;
+ margin-top: -$margin;
+ @if hasvalue($slider-thumb-radius) {
+ border-radius: $slider-thumb-radius;
+ }
+ }
+ // Internet Explorer
+ &::-ms-track {
+ height: $slider-height;
+ background: $slider-background;
+ color: transparent;
+ border: 0;
+ overflow: visible;
+ border-top: $margin solid $body-background;
+ border-bottom: $margin solid $body-background;
+ }
+ &::-ms-thumb {
+ background: $slider-thumb-color;
+ width: $slider-thumb-height;
+ height: $slider-thumb-height;
+ border: 0;
+ @if hasvalue($slider-thumb-radius) {
+ border-radius: $slider-thumb-radius;
+ }
+ }
+ &::-ms-fill-lower, &::-ms-fill-upper {
+ background: $slider-background;
+ }
+}
+output {
+ line-height: $slider-thumb-height;
+ vertical-align: middle;
+ margin-left: 0.5em;
+}
+
+// Number inputs
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+input[type="number"] {
+ &::-webkit-inner-spin-button {
+
+ }
+ &::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ background: $primary-color;
+ }
+}
+
+// Progress and meter
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+progress, meter {
+ @include no-appearance;
+ display: block;
+ width: 100%;
+ height: $meter-height;
+ margin-bottom: 1rem;
+
+ @if hasvalue($meter-radius) {
+ border-radius: $meter-radius;
+ }
+
+ // For Firefox
+ background: $meter-background;
+ border: 0;
+}
+
+progress {
+ &::-webkit-progress-bar {
+ background: $meter-background;
+ @if hasvalue($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+ &::-webkit-progress-value {
+ background: $meter-fill;
+ @if hasvalue($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+ &::-moz-progress-bar {
+ background: $meter-fill;
+ @if hasvalue($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+
+ @each $name, $color in (high: $meter-fill-high, medium: $meter-fill-medium, low: $meter-fill-low) {
+ &.#{$name} {
+ &::-webkit-progress-value {
+ background: $color;
+ }
+ &::-moz-progress-bar {
+ background: $color;
+ }
+ }
+ }
+}
+meter {
+ // Chrome/Safari
+ &::-webkit-meter-bar {
+ background: $meter-background;
+ @if hasvalue($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+ &::-webkit-meter-inner-element {
+ @if hasvalue($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+ &::-webkit-meter-optimum-value {
+ background: $meter-fill-high;
+ @if hasvalue($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+ &::-webkit-meter-suboptimum-value {
+ background: $meter-fill-medium;
+ @if hasvalue($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+ &::-webkit-meter-even-less-good-value {
+ background: $meter-fill-low;
+ @if hasvalue($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+
+ // Firefox
+ background: $meter-background;
+ &::-moz-meter-bar {
+ background: $primary-color;
+ @if hasvalue($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+ &:-moz-meter-optimum::-moz-meter-bar {
+ background: $meter-fill-high;
+ }
+ &:-moz-meter-sub-optimum::-moz-meter-bar {
+ background: $meter-fill-medium;
+ }
+ &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+ background: $meter-fill-low;
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_grid.scss b/afb-client/bower_components/foundation-apps/scss/components/_grid.scss
new file mode 100644
index 0000000..4a00fd6
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_grid.scss
@@ -0,0 +1,420 @@
+@import "panel";
+
+/*
+ THE GRID
+ --------
+
+ Foundation's magical, flexbox-powered grid.
+
+ Features:
+ - Horizontal or vertical grids
+ - Auto-sizing or percentage width grid blocks
+ - Independently-scrollable blocks
+ - Column alignment
+ - Source ordering
+ - Offsets
+*/
+
+/// @Foundation.settings
+// Grid
+$container-width: rem-calc(900) !default;
+$block-padding: $global-padding !default;
+$total-columns: 12 !default;
+$block-grid-max-size: 6 !default;
+///
+
+/*
+ Define the size of a grid block. Blocks are flex items. By default, they stretch to fill all available space, based on the size of sibling blocks. This is the "expand" behavior.
+
+ If set to "shrink", the block will contract and only fill as much space as it needs for its content.
+
+ If set to a number, the block will be given a percentage width, based on the total number of columns (12 by default). Percentage widths don't work if a block is inside a vertical grid.
+
+ @group grid
+
+ @param {number|string} $size - Sizing behavior of the block. Should be expand, shrink, or a number.
+
+ @output The flex-basis, flex-grow, and flex-shrink properties.
+*/
+@mixin grid-size($size: expand) {
+ @if (type-of($size) == 'number') {
+ $pct: percentage($size / $total-columns);
+ flex: 0 0 $pct;
+ // max-width prevents columns from wrapping early in IE10/11
+ max-width: $pct;
+ }
+ @else if ($size == shrink) {
+ flex: 0 0 auto;
+ }
+ @else if ($size == expand) {
+ flex: 1 1 auto;
+ }
+}
+/*
+ Set the orientation of blocks within this block. The grid is re-oriented by changing the flex direction of the block.
+
+ @group grid
+
+ @param {string} $orientation - Direction of the grid, either horizontal or vertical.
+
+ @output A flex-flow property to match the direction given.
+*/
+@mixin grid-orient($orientation: horizontal) {
+ @if ($orientation == vertical) {
+ flex-flow: column nowrap;
+ align-items: stretch;
+ }
+ @else {
+ flex-flow: row wrap;
+ }
+}
+/*
+ Stretch a grid's child blocks across its cross-axis, making every column appear to have the same height.
+
+ @group grid
+
+ @param {bool} $stretch - Stretch blocks if true, or align blocks to top if false.
+
+ @output Sets align-items to "stretch" if $stretch is true, or "flex-start" (the default value) if false.
+*/
+@mixin grid-wrap($wrap: true) {
+ @if $wrap {
+ flex-wrap: wrap;
+ align-items: flex-start;
+ }
+ @else {
+ flex-wrap: nowrap;
+ align-items: stretch;
+ }
+}
+/*
+ Set the alignment of blocks within a grid.
+
+ 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 grid
+
+ @param {string} $align - Alignment to use.
+
+ @output An appropriate justify-content value.
+*/
+@mixin grid-align($align: left) {
+ $options: (
+ left: flex-start,
+ right: flex-end,
+ center: center,
+ justify: space-between,
+ spaced: space-around,
+ );
+ justify-content: map-get($options, $align);
+}
+/*
+ Set the source order of a block. Items with lower numbers appear first. If multiple items have the same number, the one in the HTML first will appear first.
+
+ @group grid
+
+ @param {number} $order - Position in source order.
+
+ @output An order property.
+*/
+@mixin grid-order($order: 0) {
+ order: $order;
+}
+/*
+ Collapse a content block by removing the padding.
+
+ @group grid
+
+ @param {bool} $collapse - Collapses the block if true.
+
+ @output A padding value.
+
+ @todo No way to reverse collapse using this mixin. Solution:
+ - If true, add padding: 0;
+ - If false, add padding: 1rem;
+ - If null, add nothing, to cut down on CSS output
+ - Make null the default value
+*/
+@mixin grid-collapse($collapse: true) {
+ @if ($collapse) {
+ padding: 0;
+ }
+}
+/*
+ Constrain the size of a block to the size of the average grid row, and center-align it. This imitates the behavior of ordinary Foundation rows.
+
+ @group grid
+
+ @param {bool} $container - Adds container styles if true.
+
+ @output A maximum width and the good old margin: 0 auto for center alignment.
+*/
+@mixin grid-container($width: $container-width, $align: center) {
+ $margins: (
+ left: 0 auto 0 0,
+ right: 0 0 0 auto,
+ center: 0 auto,
+ );
+ max-width: $width;
+ margin: map-get($margins, $align);
+}
+/*
+ Add negative margins to a block, equal to the padding of a content block. This aligns the edges of a block nested inside a content block.
+
+ @group grid
+
+ @param {bool} $nest - Adds negative margins if true.
+
+ @output Negative margin values.
+*/
+@mixin grid-nest($nest: true) {
+ @if ($nest) {
+ margin-left: -1rem;
+ margin-right: -1rem;
+ }
+}
+/*
+ Offset a block by adding a left margin.
+
+ @group grid
+
+ @param {number | bool} $offset - If false, nothing is output. If a number, offsets the column by the specified number of columns.
+
+ @output A left margin based on the number of columns specified, and the global number of columns.
+*/
+@mixin grid-offset($offset: false) {
+ @if ($offset != false) {
+ margin-left: percentage($offset / $total-columns);
+ }
+}
+
+/*
+ Resets styles set by panels. Use this when a panel transforms into a block on larger screens.
+
+ @group grid
+
+ @output Resets to transform, position, and a few visual styles.
+*/
+@mixin grid-panel-reset() {
+ transform: none;
+ position: relative;
+ width: auto;
+ height: auto;
+ z-index: auto;
+ box-shadow: none;
+ background: transparent;
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+}
+
+/*
+ Frames are containers that stretch to the full dimmensions of the browser window.
+*/
+@mixin grid-frame($size: expand, $orientation: horizontal, $wrap: false, $align: left, $order: 0) {
+ display: flex;
+ height: 100vh;
+ position: relative;
+ overflow: hidden;
+ backface-visibility: hidden;
+
+ @include grid-size($size);
+ @include grid-orient($orientation);
+ @include grid-wrap($wrap);
+ @include grid-align($align);
+ @include grid-order($order);
+}
+
+/*
+ Groups are collections of content items. They're the "rows" of Foundation for Apps.
+*/
+@mixin grid-block($size: expand, $orientation: horizontal, $wrap: false, $align: left, $order: 0) {
+ @include grid-frame($size, $orientation, $wrap, $align, $order);
+
+ // Reset the height used by frames
+ height: auto;
+
+ // Blocks will scroll by default if their content overflows
+ @if ($orientation == vertical) {
+ overflow-x: auto;
+ }
+ @else {
+ overflow-y: auto;
+ }
+
+ // Add scrolling with inertia
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+/*
+ Blocks are containers for actual content. They're the "columns" of Foundation for Apps.
+*/
+@mixin grid-content($size: expand, $offset: null, $order: null) {
+ // Content blocks are not flex items and have padding
+ display: block;
+ padding: 0 $block-padding;
+
+ // Add scrolling with inertia
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+
+ @include grid-size($size);
+ @if $offset != null { @include grid-offset($offset); }
+ @if $order != null { @include grid-order($order); }
+}
+
+@mixin grid-layout($up) {
+ flex-flow: row wrap;
+ overflow: visible;
+ list-style-type: none;
+
+ > li, > div, > section {
+ padding: 0 1rem 1rem;
+ flex: 0 0 percentage(1 / $up);
+ }
+}
+
+// CSS Output
+// - - - - - - - - - - - - - - - - - - - -
+
+// Shared styles for frames and blocks (parent elements)
+%block-core {
+ // Change the direction children flow
+ &.vertical { @include grid-orient(vertical); }
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ &.#{$size}-vertical { @include grid-orient(vertical); }
+ &.#{$size}-horizontal { @include grid-orient(horizontal); }
+ }
+ }
+
+ // Align the children of a grid block
+ &.align-right { @include grid-align(right); }
+ &.align-center { @include grid-align(center); }
+ &.align-justify { @include grid-align(justify); }
+ &.align-spaced { @include grid-align(spaced); }
+
+ // Allow child elements to wrap
+ &.wrap { @include grid-wrap(true); }
+}
+
+// Shared styles for blocks and content blocks (child elements)
+%child-core {
+ // Shrink a flex item so it only takes up the space it needs
+ &.shrink { @include grid-size(shrink); }
+
+ // Prevent an element from scrolling
+ &.noscroll { overflow: hidden; }
+}
+
+@include exports(grid) {
+ // The core grid elements:
+ // - Frame
+ // - Block
+ // - Content block
+ // - Container
+ .grid-frame {
+ @extend %block-core;
+ @include grid-frame;
+ }
+ .grid-block {
+ @extend %block-core;
+ @extend %child-core;
+ @include grid-block;
+ }
+ .grid-content {
+ @extend %child-core;
+ @include grid-content;
+
+ &.collapse {
+ padding: 0;
+ }
+
+ // Grids inside content blocks should wrap by default, so they mimic traditional float grids
+ .grid-block {
+ margin-left: -($block-padding);
+ margin-right: -($block-padding);
+ flex-wrap: wrap;
+ overflow: visible;
+
+ // Reverse the above wrapping behavior
+ &.nowrap {
+ @include grid-wrap(false);
+ }
+
+ .grid-content {
+ overflow: visible;
+ }
+ }
+ }
+ .grid-container {
+ @include grid-container;
+
+ &.contain-left { @include grid-container($align: left); }
+ &.contain-right { @include grid-container($align: right); }
+ }
+
+ // Breakpoint classes for blocks
+ @each $size in $breakpoint-classes {
+ .#{$size}-grid-block {
+ @extend %block-core;
+ @extend %child-core;
+
+ @include breakpoint($size) {
+ @include grid-block;
+
+ // Override panel styles
+ &.panel { @include grid-panel-reset; }
+ }
+ }
+ .#{$size}-grid-content {
+ @extend %child-core;
+
+ @include breakpoint($size) {
+ @include grid-content;
+
+ // Override panel styles
+ &.panel { @include grid-panel-reset; }
+ }
+ }
+ }
+
+ // Sizing and ordering classes
+ @for $i from 1 through $total-columns {
+ // Source ordering
+ .order-#{$i} { @include grid-order($i); }
+ }
+ @each $size in $breakpoint-classes {
+ @for $i from 1 through $total-columns {
+ @include breakpoint($size) {
+ // Block sizing
+ .#{$size}-#{$i} {
+ @include grid-size($i);
+ }
+ // Source ordering
+ .#{$size}-order-#{$i} {
+ @include grid-order($i);
+ }
+ // Offsets
+ .#{$size}-offset-#{$i} {
+ @include grid-offset($i);
+ }
+ // Parent sizing (block grids)
+ .#{$size}-up-#{$i} {
+ @include grid-layout($i);
+ }
+ }
+ }
+ }
+
+ .grid-content .modal .grid-block {
+ flex-wrap: nowrap;
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss b/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss
new file mode 100644
index 0000000..77d0bd3
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss
@@ -0,0 +1,95 @@
+// ICONIC
+// ------
+//
+// A sample of 24 flexible, easily schemable icons from the folks at Iconic.
+//
+// Features:
+// - 24 icons
+// - Built-in coloring and sizing classes
+// - Coloring mixin
+// - Angular support
+
+/// @Foundation.settings
+// Iconic
+$iconic-primary-fill: $primary-color !default;
+$iconic-primary-stroke: $primary-color !default;
+$iconic-accent-fill: $iconic-primary-fill !default;
+$iconic-accent-stroke: $iconic-accent-fill !default;
+///
+
+// Colors the fill, and optionally stroke, accent fill, and accent stroke of an Iconic icon.
+@mixin color-icon(
+ $fill,
+ $stroke: null,
+ $fillAccent: null,
+ $strokeAccent: null
+) {
+ * {
+ fill: $fill;
+
+ // Use the fill color if no stroke is provided
+ @if hasvalue($stroke) {
+ stroke: $stroke;
+ }
+ @else {
+ stroke: $fill;
+ }
+
+ &.iconic-property-accent {
+ // Use the fill color if no accent is provided
+ @if hasvalue($fillAccent) {
+ fill: $fillAccent;
+ }
+ @else {
+ fill: $fill;
+ }
+
+ // Use the normal stroke color if no accent is provided
+ @if hasvalue($strokeAccent) {
+ stroke: $strokeAccent;
+ }
+ @else {
+ // ...or use the fill if no normal stroke is provided
+ @if hasvalue($stroke) {
+ stroke: $stroke;
+ }
+ @else {
+ stroke: $fill;
+ }
+ }
+ }
+ }
+}
+
+@include exports(iconic) {
+ .iconic {
+ width: 1rem;
+ height: 1rem;
+ vertical-align: middle;
+
+ a > & {
+ @include color-icon($primary-color);
+ margin-top: -2px;
+ margin-right: 0.25rem;
+ }
+ }
+
+ .iconic * {
+ fill: $iconic-primary-fill;
+ stroke: $iconic-primary-stroke;
+
+ &.iconic-property-accent {
+ fill: $iconic-accent-fill;
+ stroke: $iconic-accent-stroke;
+ }
+ }
+
+ @each $color in map-keys($foundation-colors) {
+ .iconic-color-#{$color} {
+ @include color-icon(map-get($foundation-colors, $color));
+ }
+ }
+ .iconic-color-secondary {
+ @include color-icon($secondary-color);
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_label.scss b/afb-client/bower_components/foundation-apps/scss/components/_label.scss
new file mode 100644
index 0000000..129757e
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/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);
+ }
+ }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_list.scss b/afb-client/bower_components/foundation-apps/scss/components/_list.scss
new file mode 100755
index 0000000..a303dcb
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/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;
+ }
+ }
+}
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
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_modal.scss b/afb-client/bower_components/foundation-apps/scss/components/_modal.scss
new file mode 100644
index 0000000..0899a71
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_modal.scss
@@ -0,0 +1,126 @@
+/*
+ MODAL
+ -----
+
+ The humble modal hides off-canvas until summoned with an fa-open directive. Modals appear over an overlay that darkens the rest of the page, and have a maxmimum width. You can construct a grid inside a modal, or attach panels to it.
+
+ Note that the modal overlay is hardcoded into the CSS, because whether or not you build your modal semantically, the overlay is always required and will always look the same.
+*/
+
+/// @Foundation.settings
+// Modal
+$modal-background: #fff !default;
+$modal-border: 0 !default;
+$modal-radius: 0px !default;
+$modal-shadow: none !default;
+$modal-zindex: 1000 !default;
+$modal-sizes: (
+ tiny: 300px,
+ small: 500px,
+ medium: 600px,
+ large: 800px,
+) !default;
+
+$modal-overlay-class: 'modal-overlay' !default;
+$modal-overlay-background: rgba(#333, 0.7) !default;
+///
+
+%modal {
+ position: relative;
+ z-index: $modal-zindex + 1;
+ background: $modal-background;
+ flex: 0 0 auto;
+ width: 100%;
+ height: 100vh;
+ max-height: 100%;
+ overflow: hidden;
+ padding: $global-padding;
+
+ @include breakpoint(medium) {
+ height: auto;
+ max-width: map-get($modal-sizes, medium);
+ }
+
+ .grid-content, .grid-block {
+ margin: 0;
+ }
+
+ .close-button, [fa-close] {
+ z-index: $modal-zindex + 1;
+ }
+}
+
+@mixin modal-dialog() {
+ height: auto;
+}
+@mixin modal-layout(
+ $width: map-get($modal-sizes, medium),
+ $dialog: false
+) {
+ max-width: $width;
+}
+@mixin modal-style(
+ $border: $modal-border,
+ $radius: $modal-radius,
+ $shadow: $modal-shadow
+) {
+ @if $border != 0 {
+ border: $border;
+ }
+ @if $radius != 0 {
+ border-radius: $radius;
+ }
+ @if $shadow != none {
+ box-shadow: $shadow;
+ }
+}
+
+@mixin modal(
+ $width: map-get($modal-sizes, medium),
+ $border: $modal-border,
+ $radius: $modal-radius,
+ $shadow: $modal-shadow
+) {
+ @extend %modal;
+ @include modal-layout($width);
+ @include modal-style($border, $radius, $shadow);
+}
+
+@include exports(modal) {
+ .modal {
+ @include modal;
+
+ @each $size in map-keys($modal-sizes) {
+ $width: map-get($modal-sizes, $size);
+ @if $size != medium {
+ .#{$size} > & { @include modal-layout($width); }
+ }
+ }
+
+ .dialog > & {
+ @include modal-dialog;
+ }
+ .collapse > & {
+ padding: 0;
+ }
+ }
+
+ .#{$modal-overlay-class} {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: $modal-zindex;
+ display: none;
+ background-color: $modal-overlay-background;
+
+ // Horizontally and vertically center the modal
+ align-items: center;
+ justify-content: center;
+
+ &.is-active {
+ display: flex;
+ }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_motion.scss b/afb-client/bower_components/foundation-apps/scss/components/_motion.scss
new file mode 100644
index 0000000..88bd3a0
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_motion.scss
@@ -0,0 +1,524 @@
+// FOUNDATION MOTION UI
+// Table of Contents
+//
+// 0. Variables
+// 1. Base Transitions
+// a. Slide
+// b. Fade
+// c. Hinge
+// d. Scale
+// e. Spin
+// 2. Base Animations
+// a. Shake
+// b. Spinners
+// c. Wiggle
+// 3. HTML Attributes
+
+// 0. Variables
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+/// @Foundation.settings
+// Motion UI
+// Classes to use when triggering in/out animations
+$motion-class: (
+ in: "ng-enter",
+ out: "ng-leave",
+) !default;
+$motion-class-active: (
+ in: "ng-enter-active",
+ out: "ng-leave-active",
+) !default;
+$motion-class-stagger: (
+ in: "ng-enter-stagger",
+ out: "ng-leave-stagger",
+) !default;
+$motion-class-showhide: (
+ in: "ng-hide-remove",
+ out: "ng-hide-add",
+);
+$motion-class-showhide-active: (
+ in: "ng-hide-remove-active",
+ out: "ng-hide-add-active",
+);
+
+// Set if movement-based transitions should also fade the element in and out
+$motion-slide-and-fade: false !default;
+$motion-hinge-and-fade: true !default;
+$motion-scale-and-fade: true !default;
+$motion-spin-and-fade: true !default;
+
+// Default speed for transitions and animations
+$motion-duration-default: 500ms !default;
+
+// Slow and fast modifiders
+$motion-duration-slow: 750ms !default;
+$motion-duration-fast: 250ms !default;
+$motion-stagger-duration-default: 150ms !default;
+$motion-stagger-duration-short: 50ms !default;
+$motion-stagger-duration-long: 300ms !default;
+
+// Default timing function for transitions and animations
+$motion-timing-default: ease !default;
+
+// Built-in and custom easing functions
+// Every item in this map becomes a CSS class
+$motion-timings: (
+ linear: linear,
+ ease: ease,
+ easeIn: ease-in,
+ easeOut: ease-out,
+ easeInOut: ease-in-out,
+ bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
+ bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
+ bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
+) !default;
+
+// Default delay for all transitions and animations
+$motion-delay-default: 0 !default;
+// Short and long delay modifiers
+$motion-delay-short: 300ms !default;
+$motion-delay-long: 700ms !default;
+///
+
+// Looks for a timing function in the list of presets
+// If none are found, returns the value as-is.
+@function get-timing($timing) {
+ @if map-has-key($motion-timings, $timing) {
+ @return map-get($motion-timings, $timing);
+ }
+ @else {
+ @return $timing;
+ }
+}
+
+// Applies transition settings common to all mixins
+@mixin transition-basics(
+ $duration: $motion-duration-default,
+ $timing: $motion-timing-default,
+ $delay: $motion-delay-default
+) {
+ transition-duration: $duration;
+ transition-timing-function: get-timing($timing);
+ transition-delay: $delay;
+}
+
+// Wraps content in an enter/leave class, chained to the parent selector
+// Define the initial state of a transition here
+@mixin transition-start($dir) {
+ $sel1: map-get($motion-class, $dir);
+ $sel2: map-get($motion-class-showhide, $dir);
+
+ &.#{$sel1},
+ &.#{$sel2} {
+ @content;
+ }
+}
+
+// Wraps content in an enter/leave active class, chained to the matching
+// enter/leave class, chained to the parent selector
+// Define the end state of a transition here
+@mixin transition-end($dir) {
+ $sel1: map-get($motion-class, $dir);
+ $sel1A: map-get($motion-class-active, $dir);
+
+ $sel2: map-get($motion-class-showhide, $dir);
+ $sel2A: map-get($motion-class-showhide-active, $dir);
+
+ &.#{$sel1}.#{$sel1A},
+ &.#{$sel2}.#{$sel2A} {
+ @content;
+ }
+}
+
+@mixin stagger($delay-amount) {
+ transition-delay: $delay-amount;
+ // this is to avoid accidental CSS inheritance
+ transition-duration:0;
+}
+
+
+// 1. Base Transitions
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// SLIDE
+@mixin slide (
+ $dir: in,
+ $from: left,
+ $fade: $motion-slide-and-fade,
+ $duration: $motion-duration-default,
+ $timing: $motion-timing-default,
+ $delay: $motion-delay-default
+) {
+ $slideDirections: (
+ top: translateY(-100%),
+ right: translateX(100%),
+ bottom: translateY(100%),
+ left: translateX(-100%),
+ );
+ $start: '';
+ $end: '';
+
+ @if $dir == in {
+ $start: map-get($slideDirections, $from);
+ $end: translateX(0) translateY(0);
+ }
+ @else {
+ $start: translateX(0) translateY(0);
+ $end: map-get($slideDirections, $from);
+ }
+
+ // CSS Output
+ @include transition-start($dir) {
+ @include transition-basics($duration, $timing, $delay);
+ transition-property: transform, opacity;
+ backface-visibility: hidden;
+ transform: $start;
+
+ @if $fade { opacity: if($dir == in, 0, 1); }
+ }
+ @include transition-end($dir) {
+ transform: $end;
+
+ @if $fade { opacity: if($dir == in, 1, 0); }
+ }
+}
+
+// FADE
+@mixin fade(
+ $dir: in,
+ $from: 0,
+ $to: 1,
+ $duration: $motion-duration-default,
+ $timing: $motion-timing-default,
+ $delay: $motion-delay-default
+) {
+ @include transition-start($dir) {
+ @include transition-basics($duration, $timing, $delay);
+ transition-property: opacity;
+ opacity: $from;
+ }
+ @include transition-end($dir) {
+ opacity: $to;
+ }
+}
+
+// HINGE
+@mixin hinge (
+ $dir: in,
+ $from: left,
+ $axis: edge,
+ $perspective: 2000px,
+ $turn-origin: from-back,
+ $fade: $motion-hinge-and-fade,
+ $duration: $motion-duration-default,
+ $timing: $motion-timing-default,
+ $delay: $motion-delay-default
+) {
+
+ // Rotation directions when hinging from back vs. front
+ $rotationAmount: 90deg;
+ $rotationsBack: (
+ top: rotateX($rotationAmount * -1),
+ right: rotateY($rotationAmount * -1),
+ bottom: rotateX($rotationAmount),
+ left: rotateY($rotationAmount),
+ );
+ $rotationsFrom: (
+ top: rotateX($rotationAmount),
+ right: rotateY($rotationAmount),
+ bottom: rotateX($rotationAmount * -1),
+ left: rotateY($rotationAmount * -1),
+ );
+
+ // Rotation origin
+ $rotation: '';
+ @if $turn-origin == from-front {
+ $rotation: map-get($rotationsFrom, $from);
+ }
+ @else if $turn-origin == from-back {
+ $rotation: map-get($rotationsBack, $from);
+ }
+ @else {
+ @warn "`$turn-origin` must be either `from-back` or `from-front`";
+ }
+
+ // Start and end state
+ $start: '';
+ $end: '';
+ @if $dir == in {
+ $start: perspective($perspective) $rotation;
+ $end: rotate(0deg);
+ }
+ @else {
+ $start: rotate(0deg);
+ $end: perspective($perspective) $rotation;
+ }
+
+ // Turn axis
+ $origin: '';
+ @if $axis == edge {
+ $origin: $from;
+ }
+ @else {
+ $origin: center;
+ }
+
+ @include transition-start($dir) {
+ @include transition-basics($duration, $timing, $delay);
+ transition-property: transform, opacity;
+ transform: $start;
+ transform-origin: $origin;
+ @if $fade { opacity: if($dir == in, 0, 1); }
+ }
+ @include transition-end($dir) {
+ transform: $end;
+ @if $fade { opacity: if($dir == in, 1, 0); }
+ }
+}
+
+// SCALE
+@mixin scale(
+ $dir: in,
+ $from: 1.5,
+ $to: 1,
+ $fade: $motion-scale-and-fade,
+ $duration: $motion-duration-default,
+ $timing: $motion-timing-default,
+ $delay: $motion-delay-default
+) {
+ @include transition-start($dir) {
+ @include transition-basics($duration, $timing, $delay);
+ transition-property: transform, property;
+ transform: scale($from);
+ @if $fade { opacity: if($dir == in, 0, 1) }
+ }
+ @include transition-end($dir) {
+ transform: scale($to);
+ @if $fade { opacity: if($dir == in, 1, 0) }
+ }
+}
+
+// SPIN
+@mixin spin(
+ $dir: in,
+ $amount: 0.75turn,
+ $ccw: false,
+ $fade: $motion-spin-and-fade,
+ $duration: $motion-duration-default,
+ $timing: $motion-timing-default,
+ $delay: $motion-delay-default
+) {
+ $amount: turn-to-deg($amount);
+ $start: 0;
+ $end: 0;
+
+ @if $dir == in {
+ $start: if($ccw, $amount, $amount * -1);
+ $end: 0;
+ }
+ @else {
+ $start: 0;
+ $end: if($ccw, $amount * -1, $amount);
+ }
+
+ @include transition-start($dir) {
+ transition-property: transform, opacity;
+ transform: rotate($start);
+ @if $fade { opacity: if($dir == in, 0, 1); }
+ }
+ @include transition-end($dir) {
+ transform: rotate($end);
+ @if $fade { opacity: if($dir == in, 1, 0); }
+ }
+}
+
+
+// 2. Base Animations
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// SHAKE
+@keyframes shake {
+ 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
+ transform: translateX(7%);
+ }
+ 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
+ transform: translateX(-7%);
+ }
+ 100% { transform: translateX(0); }
+}
+
+// SPINNERS
+@keyframes spin-cw {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+@keyframes spin-ccw {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(-360deg); }
+}
+
+// WIGGLE
+@keyframes wiggle {
+ 40%, 50%, 60% {
+ transform: rotate(7deg);
+ }
+ 35%, 45%, 55%, 65% {
+ transform: rotate(-7deg);
+ }
+ 0%, 30%, 70%, 100% { transform: rotate(0); }
+}
+
+@mixin animation(
+ $animation,
+ $duration: $motion-duration-default,
+ $timing: $motion-timing-default,
+ $delay: $motion-delay-default,
+ $iterations: null
+) {
+
+ animation-name: $animation;
+ animation-duration: $duration;
+ animation-timing-function: $timing;
+
+ backface-visibility: hidden;
+ transform: translate3d(0,0,0);
+
+ @if $delay != null {
+ animation-delay: $delay;
+ }
+ @if $iterations != null {
+ animation-iteration-count: $iterations;
+ }
+
+ @if $animation == null {
+ @warn "Please include an animation name";
+ }
+}
+
+// 3. HTML Exports
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+@include exports(motion) {
+ /*
+ Transitions
+ */
+
+ // Slide
+ .slideInDown { @include slide($from: top); }
+ .slideInLeft { @include slide($from: right); }
+ .slideInUp { @include slide($from: bottom); }
+ .slideInRight { @include slide($from: left); }
+ .slideOutBottom { @include slide($dir: out, $from: bottom); }
+ .slideOutRight { @include slide($dir: out, $from: right); }
+ .slideOutUp { @include slide($dir: out, $from: top); }
+ .slideOutLeft { @include slide($dir: out, $from: left); }
+
+ // Fade
+ .fadeIn { @include fade(in, 0, 1); }
+ .fadeOut { @include fade(out, 1, 0); }
+
+ // Hinge
+ .hingeInFromTop { @include hinge($dir: in, $from: top); }
+ .hingeInFromRight { @include hinge($dir: in, $from: right); }
+ .hingeInFromBottom { @include hinge($dir: in, $from: bottom); }
+ .hingeInFromLeft { @include hinge($dir: in, $from: left); }
+ .hingeInFromMiddleX { @include hinge($dir: in, $from: top, $axis: center); }
+ .hingeInFromMiddleY { @include hinge($dir: in, $from: right, $axis: center); }
+ .hingeOutFromTop { @include hinge($dir: out, $from: top); }
+ .hingeOutFromRight { @include hinge($dir: out, $from: right); }
+ .hingeOutFromBottom { @include hinge($dir: out, $from: bottom); }
+ .hingeOutFromLeft { @include hinge($dir: out, $from: left); }
+ .hingeOutFromMiddleX { @include hinge($dir: out, $from: top, $axis: center); }
+ .hingeOutFromMiddleY { @include hinge($dir: out, $from: right, $axis: center); }
+
+ // Scale
+ .zoomIn { @include scale(in, 1.5, 1); }
+ .zoomOut { @include scale(out, 0.5, 1); }
+
+ // Spin
+ .spinIn { @include spin(in, 0.75turn); }
+ .spinOut { @include spin(out, 0.75turn); }
+ .spinInCCW { @include spin(in, 0.75turn, true); }
+ .spinOutCCW { @include spin(out, 0.75turn, true); }
+
+ /*
+ Transition modifiers
+ */
+
+ // Duration
+ .slow { transition-duration: $motion-duration-slow !important; }
+ .fast { transition-duration: $motion-duration-fast !important; }
+
+ // Easing
+ @each $easing in map-keys($motion-timings) {
+ .#{$easing} {
+ transition-timing-function: map-get($motion-timings, $easing) !important;
+ }
+ }
+
+ // Delay
+ .delay { transition-delay: $motion-delay-short !important; }
+ .long-delay { transition-delay: $motion-delay-long !important; }
+
+ /*
+ Animations
+ */
+
+ .shake { @include animation(shake); }
+ .spin-cw { @include animation(spin-cw); }
+ .spin-ccw { @include animation(spin-ccw); }
+ .wiggle { @include animation(wiggle); }
+
+ /*
+ Animation modifiers
+ */
+
+ .shake,
+ .spin-cw,
+ .spin-ccw,
+ .wiggle {
+ // Repeat
+ &.infinite { animation-iteration-count: infinite; }
+
+ // Easing
+ @each $timing in map-keys($motion-timings) {
+ &.#{$timing} {
+ animation-timing-function: map-get($motion-timings, $timing) !important;
+ }
+ }
+
+ // Duration
+ &.slow { animation-duration: $motion-duration-slow !important; }
+ &.fast { animation-duration: $motion-duration-fast !important; }
+
+ // Delay
+ &.delay { animation-delay: $motion-delay-short !important; }
+ &.long-delay { animation-delay: $motion-delay-long !important; }
+ }
+ .stagger { @include stagger($motion-stagger-duration-default); }
+ .stort-stagger { @include stagger($motion-stagger-duration-default); }
+ .long-stagger { @include stagger($motion-stagger-duration-default); }
+}
+
+// View animation classes
+// - - - - - - - - - - - - - - - - - - - -
+
+// Applied to the immediate parent of the animating views
+.position-absolute {
+ overflow: hidden;
+ position: relative;
+}
+
+// Applied to the animating views
+.ui-animation {
+ &.ng-enter-active, &.ng-leave-active {
+ position: absolute !important;
+ backface-visibility: hidden;
+ -webkit-transform-style: preserve-3d;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_notification.scss b/afb-client/bower_components/foundation-apps/scss/components/_notification.scss
new file mode 100644
index 0000000..0386510
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_notification.scss
@@ -0,0 +1,207 @@
+/*
+ NOTIFICATION
+ ------------
+
+ An alert that pins to the corner of the screen when triggered by JavaScript. It can be set to disappear after a certain period of time, or to stay put until the user clicks on it. A custom action can be asigned to a notification as well.
+
+ Optionally, the notifications directive can also tap into the browser's native notification support, if it exists.
+*/
+
+/// @Foundation.settings
+// Notification
+$notification-default-position: right top !default;
+$notification-width: rem-calc(400) !default;
+$notification-offset: $global-padding !default;
+
+$notification-background: $primary-color !default;
+$notification-color: white !default;
+$notification-padding: $global-padding !default;
+$notification-radius: 4px !default;
+
+$notification-icon-size: 60px !default;
+$notification-icon-margin: $global-padding !default;
+$notification-icon-align: top !default;
+
+///
+
+%notification {
+ z-index: 1000;
+ display: flex;
+ position: relative;
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ display: none;
+
+ h1 {
+ font-size: 1.25em;
+ margin: 0;
+ }
+ p {
+ margin: 0;
+ }
+
+ // Placeholder animation
+ // transition: opacity 1s ease-out;
+
+ &.is-active {
+ display: flex;
+ }
+
+ .close-button {
+ color: white;
+ }
+}
+
+%notification-container {
+ z-index: 3000;
+ position: fixed;
+
+ display: flex;
+ flex-direction: column;
+}
+
+@mixin notification-layout(
+ $x: nth($notification-default-position, 1),
+ $y: nth($notification-default-position, 2),
+ $size: $notification-width,
+ $offset: $notification-offset
+) {
+ width: $size;
+
+ @if $x == right {
+ right: $offset;
+ }
+ @else if $x == left {
+ left: $offset;
+ }
+ @else if $x == middle {
+ left: 50%;
+ margin-left: -($size / 2);
+ }
+
+ @if $y == top {
+ top: $offset;
+ }
+ @else if $y == bottom {
+ top: auto;
+ bottom: $offset;
+ }
+
+ // On small screens, notifications are full width but maintain their vertical orientation
+ @include breakpoint(small only) {
+ width: auto;
+ left: $offset;
+ right: $offset;
+ margin-left: 0;
+ }
+}
+@mixin notification-style(
+ $background: $notification-background,
+ $color: $notification-color,
+ $padding: $notification-padding,
+ $radius: $notification-radius
+) {
+ background: $background;
+ padding: $padding;
+ border-radius: $radius;
+
+ &, h1, h2, h3, h4, h5, h6 {
+ color: $color;
+ }
+}
+
+@mixin notification(
+ $background: $notification-background,
+ $color: $notification-color,
+ $padding: $notification-padding,
+ $radius: $notification-radius
+) {
+ @extend %notification;
+ @include notification-style($background, $color, $padding, $radius);
+}
+
+@mixin notification-container(
+ $x: nth($notification-default-position, 1),
+ $y: nth($notification-default-position, 2),
+ $size: $notification-width,
+ $offset: $notification-offset
+) {
+ @extend %notification-container;
+ @include notification-layout($x, $y, $size, $offset);
+}
+
+@mixin notification-icon(
+ $size: $notification-icon-size,
+ $margin: $notification-icon-margin,
+ $align: $notification-icon-align
+) {
+ $alignments: (
+ top: flex-start,
+ middle: middle,
+ bottom: flex-end,
+ );
+ flex: 0 0 $size;
+ margin-right: $global-padding;
+ align-self: map-get($alignments, $align);
+
+ img {
+ width: 100%;
+ height: auto;
+ }
+}
+
+/*
+ CSS Output
+*/
+
+@include exports(notification) {
+ .notification {
+ @include notification;
+
+ &.success { @include notification-style($success-color) }
+ &.warning { @include notification-style($warning-color) }
+ &.alert { @include notification-style($alert-color) }
+ &.dark { @include notification-style($dark-color, #fff) }
+
+
+ }
+
+ .static-notification {
+ @include notification;
+
+ position: fixed !important;
+
+ &.top-right { @include notification-layout(right, top); }
+ &.top-left { @include notification-layout(left, top); }
+ &.top-middle { @include notification-layout(middle, top); }
+
+ &.bottom-right { @include notification-layout(right, bottom); }
+ &.bottom-left { @include notification-layout(left, bottom); }
+ &.bottom-middle { @include notification-layout(middle, bottom); }
+
+ &.success { @include notification-style($success-color) }
+ &.warning { @include notification-style($warning-color) }
+ &.alert { @include notification-style($alert-color) }
+ &.dark { @include notification-style($dark-color, #fff) }
+ }
+
+ .notification-container {
+ @include notification-container;
+
+ &.top-right { @include notification-layout(right, top); }
+ &.top-left { @include notification-layout(left, top); }
+ &.top-middle { @include notification-layout(middle, top); }
+
+ &.bottom-right { @include notification-layout(right, bottom); }
+ &.bottom-left { @include notification-layout(left, bottom); }
+ &.bottom-middle { @include notification-layout(middle, bottom); }
+ }
+
+ .notification-icon {
+ @include notification-icon;
+ }
+ .notification-content {
+ flex: 1;
+ }
+
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_off-canvas.scss b/afb-client/bower_components/foundation-apps/scss/components/_off-canvas.scss
new file mode 100644
index 0000000..d93e74c
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_off-canvas.scss
@@ -0,0 +1,169 @@
+/*
+ Off-canvas menu
+ ---------------
+
+ A generic container that stays fixed to the left, top, right, or bottom of the screen, and is summoned when needed. When an off-canvas panel is open, the app frame shifts over to reveal the menu.
+*/
+
+/// @Foundation.settings
+// Off-canvas
+$offcanvas-size-horizontal: 250px !default;
+$offcanvas-size-vertical: 250px !default;
+
+$offcanvas-background: #fff !default;
+$offcanvas-color: isitlight($offcanvas-background) !default;
+$offcanvas-padding: 0 !default;
+$offcanvas-shadow: 3px 0 10px rgba(black, 0.25) !default;
+$offcanvas-animation-speed: 0.25s !default;
+
+$offcanvas-frame-selector: '.grid-frame' !default;
+///
+
+%off-canvas {
+ position: fixed;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ transition: transform $offcanvas-animation-speed ease-out;
+ z-index: 2;
+
+ // Active state
+ &.is-active {
+ transform: translate(0,0) !important;
+ }
+
+ // Frame styles
+ & ~ #{$offcanvas-frame-selector} {
+ transform: translate(0,0,0);
+ transition: transform 0.25s ease-out;
+ backface-visibility: hidden;
+ background: white;
+ }
+}
+@mixin off-canvas-detached {
+ z-index: 0;
+ box-shadow: none;
+
+ &, &.is-active {
+ transform: none;
+ }
+
+ & ~ #{$offcanvas-frame-selector} {
+ z-index: 1;
+ box-shadow: 0 0 15px rgba(0,0,0,0.5);
+ }
+}
+
+@mixin off-canvas-layout(
+ $position: left,
+ $size: default,
+ $shadow: $offcanvas-shadow
+) {
+ /*
+ Get shadow values for later use
+ */
+ $shadow-length: '';
+ $shadow-size: '';
+ $shadow-color: '';
+ @if hasvalue($shadow) {
+ $shadow-length: get-shadow-value($shadow, x);
+ $shadow-size: get-shadow-value($shadow, size);
+ $shadow-color: get-shadow-value($shadow, color);
+ }
+
+ /*
+ Sizing
+ */
+ @if $position == left or $position == right {
+ @if $size == default {
+ $size: $offcanvas-size-horizontal;
+ }
+ width: $size;
+ height: 100%;
+ }
+ @else {
+ @if $size == default {
+ $size: $offcanvas-size-vertical;
+ }
+ height: $size;
+ width: 100%;
+ }
+
+ /*
+ Positioning
+ */
+ @if $position == left {
+ top: 0;
+ left: 0;
+ @if hasvalue($shadow) { box-shadow: inset (-$shadow-length) 0 $shadow-size $shadow-color; }
+ transform: translateX(-100%);
+ &.is-active {
+ & ~ #{$offcanvas-frame-selector} { transform: translateX($size) !important; }
+ }
+ }
+ @else if $position == right {
+ left: auto;
+ top: 0;
+ right: 0;
+ @if hasvalue($shadow) { box-shadow: inset $shadow-length 0 $shadow-size $shadow-color; }
+ transform: translateX(100%);
+ &.is-active {
+ & ~ #{$offcanvas-frame-selector} { transform: translateX(-$size) !important; }
+ }
+ }
+ @else if $position == top {
+ top: 0;
+ left: 0;
+ transform: translateY(-100%);
+ @if hasvalue($shadow) { box-shadow: inset 0 (-$shadow-length) $shadow-size $shadow-color; }
+ &.is-active {
+ & ~ #{$offcanvas-frame-selector} { transform: translateY($size) !important; }
+ }
+ }
+ @else if $position == bottom {
+ top: auto;
+ bottom: 0;
+ left: 0;
+ transform: translateY(100%);
+ @if hasvalue($shadow) { box-shadow: inset 0 $shadow-length $shadow-size $shadow-color; }
+ &.is-active {
+ & ~ #{$offcanvas-frame-selector} { transform: translateY(-$size) !important; }
+ }
+ }
+}
+
+@mixin off-canvas-style(
+ $background: $offcanvas-background,
+ $color: $offcanvas-color,
+ $padding: $offcanvas-padding
+) {
+ background: $background;
+
+ @if $color == auto {
+ color: isitlight($background, #000, #fff);
+ }
+ @else {
+ color: $color;
+ }
+
+ @if hasvalue($padding) {
+ padding: $padding;
+ }
+}
+
+@include exports(off-canvas) {
+ .off-canvas {
+ @extend %off-canvas;
+ @include off-canvas-layout;
+ @include off-canvas-style;
+
+ &.top { @include off-canvas-layout(top); }
+ &.right { @include off-canvas-layout(right); }
+ &.bottom { @include off-canvas-layout(bottom); }
+ &.left { @include off-canvas-layout(left); }
+
+ &.detached { @include off-canvas-detached; }
+
+ &.primary { @include off-canvas-style($primary-color, auto); }
+ &.dark { @include off-canvas-style($dark-color, auto); }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_panel.scss b/afb-client/bower_components/foundation-apps/scss/components/_panel.scss
new file mode 100644
index 0000000..5855419
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_panel.scss
@@ -0,0 +1,134 @@
+/*
+ PANEL
+ -----
+
+ The friendly panel is an all-purpose container for hiding content off-screen.
+
+ Features:
+ - Position at top, right, bottom, or left
+ - Anchor to grid block or window
+ - Define max width or height
+ - Transform into grid block depending on screen size
+*/
+
+/// @Foundation.settings
+// Panel
+$panel-size-horizontal: 300px !default;
+$panel-size-vertical: 300px !default;
+$panel-padding: 0 !default;
+
+$panel-background: #fff !default;
+$panel-shadow: 3px 0 10px rgba(black, 0.25) !default;
+
+// DEPRECATED: these variables will be removed in a future version.
+$panel-animation-speed: 0.25s !default;
+///
+
+%panel-base {
+ display: block;
+ position: absolute;
+ z-index: 100;
+ overflow-y: auto;
+ display: none;
+
+ &.is-active {
+ display: block;
+ }
+}
+
+@mixin panel-layout(
+ $position: left,
+ $size: default,
+ $shadow: $panel-shadow
+) {
+ @if $size == default {
+ @if $position == left or $position == right {
+ $size: $panel-size-horizontal;
+ }
+ @if $position == top or $position == bottom {
+ $size: $panel-size-vertical;
+ }
+ }
+
+ /*
+ Direction
+ */
+ @if $position == top {
+ top: 0;
+ left: 0;
+ width: 100%;
+ }
+ @else if $position == right {
+ top: 0;
+ right: 0;
+ height: 100%;
+ }
+ @else if $position == bottom {
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ }
+ @else if $position == left {
+ top: 0;
+ left: 0;
+ height: 100%;
+ }
+
+ /*
+ Sizing
+ */
+ // Horizontal panels are always all the way tall and have a set width
+ @if $position == left or $position == right {
+ @if unit($size) == '%' {
+ width: $size;
+ }
+ @else {
+ width: 100%;
+ @include breakpoint($size) {
+ width: $size;
+ }
+ }
+ }
+ // (For now) vertical panels don't change size
+ @if $position == top or $position == bottom {
+ height: $size;
+ }
+
+ /*
+ Shadows
+ */
+ $shadow-distance: get-shadow-value($shadow, x);
+ $shadow-size: get-shadow-value($shadow, size);
+ $shadow-color: get-shadow-value($shadow, color);
+ &.is-active {
+ @if $position == left { box-shadow: $shadow-distance 0 $shadow-size $shadow-color; }
+ @else if $position == right { box-shadow: (-$shadow-distance) 0 $shadow-size $shadow-color; }
+ @else if $position == top { box-shadow: 0 $shadow-distance $shadow-size $shadow-color; }
+ @else if $position == bottom { box-shadow: 2px (-$shadow-distance) $shadow-size $shadow-color; }
+ }
+}
+
+@mixin panel-style(
+ $padding: $panel-padding,
+ $background: $panel-background
+) {
+ /*
+ Basic styles
+ */
+ padding: $padding;
+ background: $background;
+}
+
+@include exports(panel) {
+ .panel {
+ @extend %panel-base;
+ @include panel-style;
+ }
+
+ .panel-top { @include panel-layout(top); }
+ .panel-right { @include panel-layout(right); }
+ .panel-bottom { @include panel-layout(bottom); }
+ .panel-left { @include panel-layout(left); }
+
+ .panel-fixed { position: fixed; }
+} \ No newline at end of file
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_popup.scss b/afb-client/bower_components/foundation-apps/scss/components/_popup.scss
new file mode 100644
index 0000000..03403d6
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_popup.scss
@@ -0,0 +1,68 @@
+/*
+ POPUP
+ -----
+
+ A floating container that can anchor to any other on-screen element, and contain any content, including grid blocks or panels.
+*/
+
+/// @Foundation.settings
+// Popup
+$popup-width: rem-calc(300) !default;
+$popup-background: #fff !default;
+$popup-border: 0 !default;
+$popup-radius: 0 !default;
+$popup-shadow: 0 0 10px rgba(#000, 0.25) !default;
+///
+
+%popup {
+ position: absolute;
+ z-index: 1000;
+ opacity: 0;
+ overflow: hidden;
+ transition: opacity 0.25s ease-out;
+ pointer-events: none;
+
+ &.tether-enabled {
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@mixin popup-layout(
+ $width: $popup-width
+) {
+ width: $popup-width;
+}
+@mixin popup-style(
+ $background: $popup-background,
+ $color: #000,
+ $radius: $popup-radius,
+ $shadow: $popup-shadow,
+ $border: $popup-border
+) {
+ background: $background;
+ border-radius: $radius;
+ box-shadow: $shadow;
+ border: $border;
+}
+
+@mixin popup(
+ $width: $popup-width,
+ $background: $popup-background,
+ $radius: $popup-radius,
+ $shadow: $popup-shadow,
+ $border: $popup-border
+) {
+ @extend %popup;
+ @include popup-layout($width);
+ @include popup-style($background, isitlight($background), $radius, $shadow, $border);
+}
+
+@include exports(popup) {
+ .popup {
+ @include popup;
+
+ &.dark { @include popup-style($dark-color, #fff); }
+ &.primary { @include popup-style($primary-color, isitlight($primary-color)); }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_switch.scss b/afb-client/bower_components/foundation-apps/scss/components/_switch.scss
new file mode 100644
index 0000000..7710ad4
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_switch.scss
@@ -0,0 +1,130 @@
+/*
+ SWITCH
+ ------
+*/
+
+/// @Foundation.settings
+// Switch
+$switch-width: rem-calc(50) !default;
+$switch-height: rem-calc(32) !default;
+$switch-background: #ccc !default;
+$switch-background-active: $primary-color !default;
+$switch-border: 0 !default;
+$switch-radius: 9999px !default;
+$switch-animation-speed: 0.15s !default;
+
+$switch-paddle-color: white !default;
+$switch-paddle-offset: 4px !default;
+///
+
+%switch {
+ position: relative;
+ overflow: hidden;
+ display: inline-block;
+
+ > input {
+ position: absolute;
+ left: -9999px;
+ outline: none;
+ }
+
+ > label {
+ -ms-touch-action: manipulation;
+ touch-action: manipulation;
+ display: block;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+ margin: 0;
+
+ // Paddle
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+}
+
+/*
+ Defines the dimmensions of the switch.
+
+ $width - width of the switch.
+ $height - height of the switch.
+*/
+@mixin switch-layout(
+ $width: $switch-width,
+ $height: $switch-height
+) {
+ width: $width;
+ height: $height;
+
+ > label {
+ &::after {
+ width: $height;
+ height: $height;
+ }
+ }
+ input:checked + label {
+ &::after {
+ left: $width - $height;
+ }
+ }
+}
+
+@mixin switch-style(
+ $background: $switch-background,
+ $background-active: $switch-background-active,
+ $border: $switch-border,
+ $radius: $switch-radius,
+ $paddle-color: $switch-paddle-color,
+ $paddle-offset: $switch-paddle-offset,
+ $animation-speed: $switch-animation-speed
+) {
+ @if hasvalue($border) {
+ border: $border;
+ }
+ border-radius: $radius;
+
+ > label {
+ background: $background;
+
+ &::after {
+ background: $paddle-color;
+ border-radius: $radius;
+ transition: left $animation-speed ease-out;
+
+ @if hasvalue($paddle-offset) {
+ border: $paddle-offset solid $background
+ }
+ }
+ }
+
+ input:checked + label {
+ background: $background-active;
+ margin: 0;
+
+ &::after {
+ @if hasvalue($paddle-offset) {
+ border-color: $background-active;
+ }
+ }
+ }
+}
+
+@mixin switch() {
+ @extend %switch;
+ @include switch-layout;
+ @include switch-style;
+}
+
+@include exports(switch) {
+ .switch {
+ @include switch;
+
+ &.small { @include switch-layout(rem-calc(40), rem-calc(26)); }
+ &.large { @include switch-layout(rem-calc(60), rem-calc(38)); }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss b/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss
new file mode 100644
index 0000000..7e4293e
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss
@@ -0,0 +1,100 @@
+/*
+ TABS
+ ----
+*/
+
+/// @Foundation.settings
+// Tabs
+$tabstrip-background: transparent !default;
+
+$tab-title-background: $gray-light !default;
+$tab-title-background-hover: smartscale($tab-title-background, 5%) !default;
+$tab-title-background-active: smartscale($tab-title-background, 3%) !default;
+$tab-title-color: isitlight($tab-title-background) !default;
+$tab-title-color-active: $tab-title-color !default;
+
+$tab-title-padding: $global-padding !default;
+$tab-content-padding: $global-padding !default;
+///
+
+@mixin tabstrip(
+ $orientation: horizontal,
+ $background: $tabstrip-background
+) {
+ /*
+ Container styles
+ */
+ display: flex;
+ background: $background;
+
+ @if $orientation == vertical {
+ flex-flow: column nowrap;
+ }
+ @else {
+ flex-flow: row wrap;
+ }
+}
+
+@mixin tabstrip-item(
+ $background: $tab-title-background,
+ $background-hover: $tab-title-background-hover,
+ $background-active: $tab-title-background-active,
+ $color: $tab-title-color,
+ $color-active: $tab-title-color-active,
+ $padding: $tab-title-padding
+) {
+ background: $background;
+ padding: $padding;
+ line-height: 1;
+ margin: 0;
+ flex: 0 1 auto;
+ cursor: pointer;
+ color: $color;
+
+ &.is-active {
+ background: $background-active;
+ color: $color-active;
+
+ &:hover {
+ background: $background-hover;
+ }
+ }
+ &:hover {
+ background: $background-hover;
+ }
+}
+
+@mixin tab-content(
+ $padding: $tab-content-padding
+) {
+ padding: $padding;
+}
+
+@mixin tab-content-item {
+ display: none;
+ &.is-active {
+ display: block;
+ }
+}
+
+@include exports(tabs) {
+ .tabs {
+ @include tabstrip(horizontal);
+
+ &.vertical {
+ @include tabstrip(vertical);
+ }
+
+ .tab-item {
+ @include tabstrip-item;
+ }
+ }
+
+ .tab-contents {
+ @include tab-content;
+
+ .tab-content {
+ @include tab-content-item;
+ }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_title-bar.scss b/afb-client/bower_components/foundation-apps/scss/components/_title-bar.scss
new file mode 100644
index 0000000..e73bb4e
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_title-bar.scss
@@ -0,0 +1,135 @@
+/*
+ TITLE BAR
+ ---------
+
+ A navigational component which can display the current screen the user is on, along with additional controls or menu items.
+
+ The title bar includes classes to create center, left, and right sections, which can be used in any combination. However, in the markup, the sections must come in this order:
+ - Center
+ - Left
+ - Right
+*/
+
+/// @Foundation.settings
+// Title Bar
+$titlebar-center-width: 50% !default;
+$titlebar-side-width: (100% - $titlebar-center-width) / 2 !default;
+$titlebar-background: #eee !default;
+$titlebar-color: #000 !default;
+$titlebar-border: 1px solid #ccc !default;
+$titlebar-padding: $global-padding !default;
+$titlebar-item-classes: (
+ center: 'center',
+ left: 'left',
+ right: 'right',
+ title: 'title',
+) !default;
+///
+
+%title-bar {
+ $center: map-get($titlebar-item-classes, center);
+ $left: map-get($titlebar-item-classes, left);
+ $right: map-get($titlebar-item-classes, right);
+ $title: map-get($titlebar-item-classes, title);
+
+ display: flex;
+ flex: 0 0 auto;
+ align-items: center;
+ justify-content: flex-start;
+ overflow: visible;
+
+ // Denotes the title of the bar
+ .#{$title} {
+ font-weight: bold;
+ }
+
+ // Denotes left, right, and center sections of the bar
+ .#{$left}, .#{$center}, .#{$right} {
+ display: block;
+ white-space: nowrap;
+ overflow: visible;
+
+ // If only one section is in use, stretch it all the way out
+ &:first-child:last-child {
+ flex: 1;
+ margin: 0;
+ }
+ }
+
+ // Left always comes first, then center, then right
+ // The left and right sections have the same width
+ .#{$left} {
+ order: 1;
+ flex: 0 0 $titlebar-side-width;
+ }
+ .#{$center} {
+ order: 2;
+ flex: 0 0 $titlebar-center-width;
+ text-align: center;
+ }
+ .#{$right} {
+ order: 3;
+ flex: 0 0 $titlebar-side-width;
+ text-align: right;
+ }
+
+ // If only left and right are in use, stretch them both out equally
+ .#{$left}:first-child {
+ flex: 1 1 auto;
+ }
+ .#{$left}:first-child + .#{$right}:last-child {
+ flex: 1 1 auto;
+ }
+
+ // If only center and right are in use, shift the center section into the right position
+ .#{$center}:first-child:not(:last-child) {
+ margin-left: $titlebar-side-width;
+ }
+ // If only center and left are in use, override the above style
+ .#{$center} + .#{$left} {
+ margin-right: -($titlebar-side-width);
+ }
+}
+
+@mixin title-bar-style(
+ $background: $titlebar-background,
+ $color: $titlebar-color,
+ $border: $titlebar-border,
+ $padding: $titlebar-padding
+) {
+ background: $background;
+ color: $color;
+ padding: $padding;
+ border-bottom: $border;
+}
+
+@mixin title-bar(
+ $background: $titlebar-background,
+ $color: $titlebar-color,
+ $border: $titlebar-border,
+ $padding: $titlebar-padding
+) {
+ @extend %title-bar;
+ @include title-bar-style($background, $color, $border, $padding);
+}
+
+@include exports(title-bar) {
+ .title-bar {
+ @include title-bar;
+
+ &.primary {
+ @include title-bar-style($primary-color, isitlight($primary-color));
+ a, a:hover { color: isitlight($primary-color); }
+ @if using(iconic) { .iconic { @include color-icon(isitlight($primary-color)); } }
+ }
+ &.dark {
+ @include title-bar-style($dark-color, #fff);
+ a, a:hover { color: #fff; }
+ @if using(iconic) { .iconic { @include color-icon(#fff); } }
+ }
+ }
+ .title-bar-bottom {
+ border-bottom: 0;
+ border-top: $titlebar-border;
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_typography.scss b/afb-client/bower_components/foundation-apps/scss/components/_typography.scss
new file mode 100755
index 0000000..8e64a89
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_typography.scss
@@ -0,0 +1,345 @@
+/*
+ TYPOGRAPHY
+ ----------
+
+ Includes typographic resets for many common elements, and a few helper classes.
+ - Headers
+ - Subheaders
+ - Lead paragraphs
+ - Ordered/unordered lists
+ - Code samples
+ - Anchors
+ - Dividers
+ - Blockquotes
+ - Acronyms
+*/
+
+/// @Foundation.settings
+// Typography
+// We use these to control header font styles
+$header-font-family: $body-font-family !default;
+$header-font-weight: $font-weight-normal !default;
+$header-font-style: $font-weight-normal !default;
+$header-font-color: #222 !default;
+$header-line-height: 1.4 !default;
+$header-top-margin: .2rem !default;
+$header-bottom-margin: .5rem !default;
+$header-text-rendering: optimizeLegibility !default;
+
+// We use these to control header font sizes
+$h1-font-size: rem-calc(44) !default;
+$h2-font-size: rem-calc(37) !default;
+$h3-font-size: rem-calc(27) !default;
+$h4-font-size: rem-calc(23) !default;
+$h5-font-size: rem-calc(18) !default;
+$h6-font-size: 1rem !default;
+
+// We use these to control header size reduction on small screens
+$h1-font-reduction: rem-calc(10) !default;
+$h2-font-reduction: rem-calc(10) !default;
+$h3-font-reduction: rem-calc(5) !default;
+$h4-font-reduction: rem-calc(5) !default;
+$h5-font-reduction: 0 !default;
+$h6-font-reduction: 0 !default;
+
+// These control how subheaders are styled.
+$subheader-line-height: 1.4 !default;
+$subheader-font-color: scale-color($header-font-color, $lightness: 35%) !default;
+$subheader-font-weight: $font-weight-normal !default;
+$subheader-top-margin: .2rem !default;
+$subheader-bottom-margin: .5rem !default;
+
+// A general <small> styling
+$small-font-size: 60% !default;
+$small-font-color: scale-color($header-font-color, $lightness: 35%) !default;
+
+// We use these to style paragraphs
+$paragraph-font-family: inherit !default;
+$paragraph-font-weight: $font-weight-normal !default;
+$paragraph-font-size: 1rem !default;
+$paragraph-line-height: 1.6 !default;
+$paragraph-margin-bottom: rem-calc(20) !default;
+$paragraph-aside-font-size: rem-calc(14) !default;
+$paragraph-aside-line-height: 1.35 !default;
+$paragraph-aside-font-style: italic !default;
+$paragraph-text-rendering: optimizeLegibility !default;
+
+// We use these to style <code> tags
+$code-color: grayscale($primary-color) !default;
+$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
+$code-font-weight: $font-weight-normal !default;
+$code-background-color: scale-color($secondary-color, $lightness: 70%) !default;
+$code-border-size: 1px !default;
+$code-border-style: solid !default;
+$code-border-color: scale-color($code-background-color, $lightness: -10%) !default;
+$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;
+
+// We use these to style anchors
+$anchor-text-decoration: none !default;
+$anchor-text-decoration-hover: none !default;
+$anchor-font-color: $primary-color !default;
+$anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !default;
+
+// We use these to style the <hr> element
+$hr-border-width: 1px !default;
+$hr-border-style: solid !default;
+$hr-border-color: #ddd !default;
+$hr-margin: rem-calc(20) !default;
+
+// We use these to style lists
+$list-font-family: $paragraph-font-family !default;
+$list-font-size: $paragraph-font-size !default;
+$list-line-height: $paragraph-line-height !default;
+$list-margin-bottom: $paragraph-margin-bottom !default;
+$list-style-position: outside !default;
+$list-side-margin: 1.1rem !default;
+$list-ordered-side-margin: 1.4rem !default;
+$list-side-margin-no-bullet: 0 !default;
+$list-nested-margin: rem-calc(20) !default;
+$definition-list-header-weight: $font-weight-bold !default;
+$definition-list-header-margin-bottom: .3rem !default;
+$definition-list-margin-bottom: rem-calc(12) !default;
+
+// We use these to style blockquotes
+$blockquote-font-color: scale-color($header-font-color, $lightness: 35%) !default;
+$blockquote-padding: rem-calc(9 20 0 19) !default;
+$blockquote-border: 1px solid #ddd !default;
+$blockquote-cite-font-size: rem-calc(13) !default;
+$blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%) !default;
+$blockquote-cite-link-color: $blockquote-cite-font-color !default;
+
+// Acronym styles
+$acronym-underline: 1px dotted #ddd !default;
+///
+
+@mixin lead {
+ font-size: $paragraph-font-size + rem-calc(3.5);
+ line-height: 1.6;
+}
+
+@mixin subheader {
+ line-height: $subheader-line-height;
+ color: $subheader-font-color;
+ font-weight: $subheader-font-weight;
+ margin-top: $subheader-top-margin;
+ margin-bottom: $subheader-bottom-margin;
+}
+
+@include exports(typography) {
+ /* Typography resets */
+ div,
+ dl,
+ dt,
+ dd,
+ ul,
+ ol,
+ li,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ pre,
+ form,
+ p,
+ blockquote,
+ th,
+ td {
+ margin:0;
+ padding:0;
+ }
+
+ /* Default Link Styles */
+ a {
+ color: $anchor-font-color;
+ text-decoration: $anchor-text-decoration;
+ line-height: inherit;
+
+ &[ui-sref] {
+ cursor: pointer;
+ }
+
+ &:hover,
+ &:focus {
+ color: $anchor-font-color-hover;
+ @if $anchor-text-decoration-hover != $anchor-text-decoration {
+ text-decoration: $anchor-text-decoration-hover;
+ }
+ }
+
+ img { border:none; }
+ }
+
+ /* Default paragraph styles */
+ p {
+ font-family: $paragraph-font-family;
+ font-weight: $paragraph-font-weight;
+ font-size: $paragraph-font-size;
+ line-height: $paragraph-line-height;
+ margin-bottom: $paragraph-margin-bottom;
+ text-rendering: $paragraph-text-rendering;
+
+ &.lead { @include lead; }
+
+ & aside {
+ font-size: $paragraph-aside-font-size;
+ line-height: $paragraph-aside-line-height;
+ font-style: $paragraph-aside-font-style;
+ }
+ }
+
+ /* Default header styles */
+ h1, h2, h3, h4, h5, h6 {
+ font-family: $header-font-family;
+ font-weight: $header-font-weight;
+ font-style: $header-font-style;
+ color: $header-font-color;
+ text-rendering: $header-text-rendering;
+ margin-top: $header-top-margin;
+ margin-bottom: $header-bottom-margin;
+ line-height: $header-line-height;
+
+ small {
+ font-size: $small-font-size;
+ color: $small-font-color;
+ line-height: 0;
+ }
+ }
+
+ h1 { font-size: $h1-font-size - $h1-font-reduction; }
+ h2 { font-size: $h2-font-size - $h2-font-reduction; }
+ h3 { font-size: $h3-font-size - $h3-font-reduction; }
+ h4 { font-size: $h4-font-size - $h4-font-reduction; }
+ h5 { font-size: $h5-font-size - $h5-font-reduction; }
+ h6 { font-size: $h6-font-size - $h6-font-reduction; }
+
+ .subheader { @include subheader; }
+
+ hr {
+ border: $hr-border-style $hr-border-color;
+ border-width: $hr-border-width 0 0;
+ clear: both;
+ margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width));
+ height: 0;
+ }
+
+ /* Helpful Typography Defaults */
+ em,
+ i {
+ font-style: italic;
+ line-height: inherit;
+ }
+
+ strong,
+ b {
+ font-weight: $font-weight-bold;
+ line-height: inherit;
+ }
+
+ small {
+ font-size: $small-font-size;
+ color: $small-font-color;
+ line-height: inherit;
+ }
+
+ code {
+ font-family: $code-font-family;
+ font-weight: $code-font-weight;
+ color: $code-color;
+ background-color: $code-background-color;
+ border-width: $code-border-size;
+ border-style: $code-border-style;
+ border-color: $code-border-color;
+ padding: $code-padding;
+ }
+
+ /* Lists */
+ ul,
+ ol,
+ dl {
+ font-size: $list-font-size;
+ line-height: $list-line-height;
+ margin-bottom: $list-margin-bottom;
+ list-style-position: $list-style-position;
+ font-family: $list-font-family;
+ }
+
+ /* Lists */
+ ul, ol {
+ margin-left: $list-side-margin;
+ li {
+ ul,
+ ol {
+ margin-left: $list-nested-margin;
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ /* Lists without bullets */
+ ul.no-bullet {
+ &, li ul, li ol {
+ list-style-type: none;
+ }
+ margin-left: $list-side-margin-no-bullet;
+ }
+
+ /* Definition Lists */
+ dl {
+ dt {
+ margin-bottom: $definition-list-header-margin-bottom;
+ font-weight: $definition-list-header-weight;
+ }
+ dd { margin-bottom: $definition-list-margin-bottom; }
+ }
+
+ /* Abbreviations */
+ abbr,
+ acronym {
+ text-transform: uppercase;
+ font-size: 90%;
+ color: $body-font-color;
+ border-bottom: $acronym-underline;
+ cursor: help;
+ }
+ abbr {
+ text-transform: none;
+ }
+
+ /* Blockquotes */
+ blockquote {
+ margin: 0 0 $paragraph-margin-bottom;
+ padding: $blockquote-padding;
+ border-left: $blockquote-border;
+
+ cite {
+ display: block;
+ font-size: $blockquote-cite-font-size;
+ color: $blockquote-cite-font-color;
+ &:before {
+ content: "\2014 \0020";
+ }
+
+ a,
+ a:visited {
+ color: $blockquote-cite-link-color;
+ }
+ }
+ }
+ blockquote,
+ blockquote p {
+ line-height: $paragraph-line-height;
+ color: $blockquote-font-color;
+ }
+
+ @include breakpoint(medium) {
+ h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
+ h1 { font-size: $h1-font-size; }
+ h2 { font-size: $h2-font-size; }
+ h3 { font-size: $h3-font-size; }
+ h4 { font-size: $h4-font-size; }
+ h5 { font-size: $h5-font-size; }
+ h6 { font-size: $h6-font-size; }
+ }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_utilities.scss b/afb-client/bower_components/foundation-apps/scss/components/_utilities.scss
new file mode 100755
index 0000000..dabe22f
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_utilities.scss
@@ -0,0 +1,160 @@
+/*
+ UTILITIES
+ ---------
+
+ Responsive helper classes to assist you in quickly doing basic formatting and layout.
+
+ Features:
+ - Vertical alignment
+ - Visibility
+ - Text alignment
+ - Floating
+*/
+
+$block-selector: '[class*="grid-block"]';
+
+@mixin show-for($size, $prop: block) {
+ &:not(.ng-hide) {
+ display: none !important;
+ @include breakpoint($size) {
+ display: $prop !important;
+ }
+ }
+}
+
+@mixin show-for-only($size, $prop: block) {
+ &:not(.ng-hide) {
+ display: none !important;
+ @include breakpoint($size only) {
+ display: $prop !important;
+ }
+ }
+}
+
+@mixin hide-for($size, $prop: block) {
+ &:not(.ng-hide) {
+ display: $prop !important;
+ @include breakpoint($size) {
+ display: none !important;
+ }
+ }
+}
+
+@mixin hide-for-only($size, $prop: block) {
+ &:not(.ng-hide) {
+ display: $prop !important;
+ @include breakpoint($size only) {
+ display: none !important;
+ }
+ }
+}
+
+@include exports(utilities) {
+ // Vertical alignment
+ .v-align {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ $align-values: (
+ 'top': flex-start,
+ 'center': center,
+ 'bottom': flex-end,
+ );
+
+ @each $orient in (top, center, bottom) {
+ .align-#{$orient} {
+ align-self: map-get($align-values, $orient);
+ }
+ }
+
+ @each $size in $breakpoint-classes {
+ @each $orient in (top, center, bottom) {
+ @include breakpoint($size) {
+ .#{$size}-align-#{$orient} {
+ align-self: map-get($align-values, $orient);
+ }
+ }
+ }
+ }
+ }
+
+ // Visibility
+ .hide { display: none !important; }
+
+ .invisible { visibility: hidden; }
+
+ @each $size in $breakpoint-classes {
+ .hide-for-#{$size} {
+ @include hide-for($size);
+ &#{$block-selector} { @include hide-for($size, flex); }
+ }
+
+ .show-for-#{$size} {
+ @include show-for($size);
+ &#{$block-selector} { @include show-for($size, flex); }
+ }
+
+ .hide-for-#{$size}-only {
+ @include hide-for-only($size);
+ &#{$block-selector} { @include hide-for-only($size, flex); }
+ }
+
+ .show-for-#{$size}-only {
+ @include show-for-only($size);
+ &#{$block-selector} { @include show-for-only($size, flex); }
+ }
+ }
+
+ @each $orientation in (portrait, landscape) {
+ .hide-for-#{$orientation} {
+ @include breakpoint($orientation) {
+ display: none !important;
+ &#{$block-selector} { display: flex !important; }
+ }
+ }
+
+ .show-for-#{$orientation} {
+ display: none !important;
+
+ @include breakpoint($orientation) {
+ display: block !important;
+ &#{$block-selector} { display: flex !important; }
+ }
+ }
+ }
+
+ /*
+ Text alignment
+ */
+ @each $align in (left, right, center, justify) {
+ .text-#{$align} {
+ text-align: $align;
+ }
+
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ .#{$size}-text-#{$align} {
+ text-align: $align;
+ }
+ }
+
+ @include breakpoint($size only) {
+ .#{$size}-only-text-#{$align} {
+ text-align: $align;
+ }
+ }
+ }
+ }
+
+ /*
+ Floating
+ */
+ .clearfix { @include clearfix; }
+
+ @each $float in (left, right, none) {
+ .float-#{$float} {
+ float: #{$float};
+ }
+ }
+}