diff options
Diffstat (limited to 'afb-client/bower_components/foundation-apps/scss/components')
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}; + } + } +} |