From 3d2fda7dd39e2363682f1fa353c951ab0d44ddfa Mon Sep 17 00:00:00 2001 From: Fulup Ar Foll Date: Tue, 9 Feb 2016 18:40:49 +0100 Subject: Implemented URL query parsing for initial token /opa/?token=abcde --- .../foundation-apps/scss/_global.scss | 131 +++++ .../foundation-apps/scss/_settings.scss | 614 +++++++++++++++++++++ .../scss/components/_accordion.scss | 72 +++ .../scss/components/_action-sheet.scss | 265 +++++++++ .../scss/components/_block-list.scss | 350 ++++++++++++ .../scss/components/_button-group.scss | 197 +++++++ .../foundation-apps/scss/components/_button.scss | 205 +++++++ .../foundation-apps/scss/components/_card.scss | 93 ++++ .../foundation-apps/scss/components/_extras.scss | 54 ++ .../foundation-apps/scss/components/_forms.scss | 458 +++++++++++++++ .../foundation-apps/scss/components/_grid.scss | 420 ++++++++++++++ .../foundation-apps/scss/components/_iconic.scss | 95 ++++ .../foundation-apps/scss/components/_label.scss | 134 +++++ .../foundation-apps/scss/components/_list.scss | 19 + .../foundation-apps/scss/components/_menu-bar.scss | 363 ++++++++++++ .../foundation-apps/scss/components/_modal.scss | 126 +++++ .../foundation-apps/scss/components/_motion.scss | 524 ++++++++++++++++++ .../scss/components/_notification.scss | 207 +++++++ .../scss/components/_off-canvas.scss | 169 ++++++ .../foundation-apps/scss/components/_panel.scss | 134 +++++ .../foundation-apps/scss/components/_popup.scss | 68 +++ .../foundation-apps/scss/components/_switch.scss | 130 +++++ .../foundation-apps/scss/components/_tabs.scss | 100 ++++ .../scss/components/_title-bar.scss | 135 +++++ .../scss/components/_typography.scss | 345 ++++++++++++ .../scss/components/_utilities.scss | 160 ++++++ .../foundation-apps/scss/foundation.scss | 50 ++ .../foundation-apps/scss/helpers/_breakpoints.scss | 154 ++++++ .../foundation-apps/scss/helpers/_functions.scss | 343 ++++++++++++ .../foundation-apps/scss/helpers/_images.scss | 19 + .../foundation-apps/scss/helpers/_mixins.scss | 123 +++++ .../foundation-apps/scss/vendor/_normalize.scss | 425 ++++++++++++++ 32 files changed, 6682 insertions(+) create mode 100755 afb-client/bower_components/foundation-apps/scss/_global.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/_settings.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_accordion.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_action-sheet.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_block-list.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_button-group.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_button.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_card.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_extras.scss create mode 100755 afb-client/bower_components/foundation-apps/scss/components/_forms.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_grid.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_iconic.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_label.scss create mode 100755 afb-client/bower_components/foundation-apps/scss/components/_list.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_menu-bar.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_modal.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_motion.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_notification.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_off-canvas.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_panel.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_popup.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_switch.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_tabs.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_title-bar.scss create mode 100755 afb-client/bower_components/foundation-apps/scss/components/_typography.scss create mode 100755 afb-client/bower_components/foundation-apps/scss/components/_utilities.scss create mode 100755 afb-client/bower_components/foundation-apps/scss/foundation.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/helpers/_breakpoints.scss create mode 100755 afb-client/bower_components/foundation-apps/scss/helpers/_functions.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/helpers/_images.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/helpers/_mixins.scss create mode 100644 afb-client/bower_components/foundation-apps/scss/vendor/_normalize.scss (limited to 'afb-client/bower_components/foundation-apps/scss') diff --git a/afb-client/bower_components/foundation-apps/scss/_global.scss b/afb-client/bower_components/foundation-apps/scss/_global.scss new file mode 100755 index 0000000..e4cffc6 --- /dev/null +++ b/afb-client/bower_components/foundation-apps/scss/_global.scss @@ -0,0 +1,131 @@ +/* + GLOBAL + ------ + + Global styles and settings for Foundation for Apps are stored here. This file must always + be imported, no matter what. + + Includes: + - +*/ + +/// @Foundation.settings +// Global Styles +// This sets 1rem to be 16px +$rem-base: 16px; + +// The default font-size is set to 100% of the browser style sheet (usually 16px) +// for compatibility with browser-based text zoom or user-set defaults. + +// Since the typical default browser font-size is 16px, that makes the calculation for grid size. +// If you want your base font-size to be different and not have it affect the grid breakpoints, +// set $rem-base to $base-font-size and make sure $base-font-size is a px value. +$base-font-size: 100% !default; + +// $base-line-height is 24px while $base-font-size is 16px +$base-line-height: 1.5 !default; + +// Text selector helpers +$headers: "h1,h2,h3,h4,h5,h6"; + +// We use these to define default font weights +$font-weight-normal: normal !default; +$font-weight-bold: bold !default; + +// We use these to control various global styles +$body-background: #fff !default; +$body-font-color: #222 !default; +$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default; +$body-font-weight: $font-weight-normal !default; +$body-font-style: normal !default; +$body-antialiased: true; + +// Application Colors +$primary-color: #00558b !default; +$secondary-color: #f1f1f1 !default; +$alert-color: #F04124 !default; +$info-color: #A0D3E8 !default; +$success-color: #43AC6A !default; +$warning-color: #F08A24 !default; +$dark-color: #232323 !default; +$gray: #dfdfdf !default; +$gray-dark: darken($gray, 8) !default; +$gray-light: lighten($gray, 8) !default; + +// We use these to make sure border radius matches unless we want it different. +$global-radius: 4px !default; +$global-rounded: 1000px !default; + +// We use this for default spacing +$global-padding: 1rem !default; +$global-spacing: rem-calc(15) !default; +/// + +// For internal use: a color map +$foundation-colors: ( + primary: $primary-color, + success: $success-color, + warning: $warning-color, + alert: $alert-color, + dark: $dark-color, +); + +@include exports(global) { + // Make extra sure we're using the whole window + html, body { + height: 100%; + font-size: $base-font-size; + } + // Set box-sizing globally to handle padding and border widths + html { + box-sizing: border-box; + } + *, *:before, *:after { + box-sizing: inherit; + } + + // Default body styles + body { + background: $body-background; + color: $body-font-color; + padding: 0; + margin: 0; + font-family: $body-font-family; + font-weight: $body-font-weight; + font-style: $body-font-style; + line-height: 1; + position: relative; + + @if $body-antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + + img { + // Grid Defaults to get images and embeds to work properly + max-width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; + + // Get rid of gap under images by making them display: inline-block; by default + display: inline-block; + vertical-align: middle; + } + + // Give all anchors and interactive directives the hover cusor + a, [ui-sref], [zf-open], [zf-close], [zf-toggle] { + cursor: pointer; + } + + #map_canvas, + .map_canvas { + img, + embed, + object { max-width: none !important; } + } + + .padding { + padding: $global-padding; + } +} diff --git a/afb-client/bower_components/foundation-apps/scss/_settings.scss b/afb-client/bower_components/foundation-apps/scss/_settings.scss new file mode 100644 index 0000000..7374cbc --- /dev/null +++ b/afb-client/bower_components/foundation-apps/scss/_settings.scss @@ -0,0 +1,614 @@ +// FOUNDATION FOR APPS SETTINGS +// ---------------------------- +// +// Table of Contents: +// +// 1. CSS Exports +// 2. Global Styles +// 3. Breakpoints +// 4. Typography +// 5. Grid +// 6. Button +// 7. Accordion +// 8. Action Sheet +// 9. Block List +// 10. Button Group +// 11. Card +// 12. Extras +// 13. Forms +// 14. Iconic +// 15. Label +// 16. Menu Bar +// 17. Modal +// 18. Motion UI +// 19. Notification +// 20. Off-canvas +// 21. Panel +// 22. Popup +// 23. Switch +// 24. Tabs +// 25. Title Bar + +@import "helpers/functions"; + +// 1. CSS Exports +// - - - - - - - - - - - - - - - + +// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS. + +// $include-css: ( +// accordion: true, +// action-sheet: true, +// block-list: true, +// button: true, +// button-group: true, +// card: true, +// coloring: true, +// extras: true, +// forms: true, +// grid: true, +// iconic: true, +// label: true, +// badge: true, +// list: true, +// menu-bar: true, +// modal: true, +// motion: true, +// notification: true, +// off-canvas: true, +// panel: true, +// popup: true, +// switch: true, +// tabs: true, +// title-bar: true, +// typography: true, +// utilities: true, +// ); + +// 2. Global Styles +// - - - - - - - - - - - - - - - + +// This sets 1rem to be 16px +// $rem-base: 16px; + +// The default font-size is set to 100% of the browser style sheet (usually 16px) +// for compatibility with browser-based text zoom or user-set defaults. + +// Since the typical default browser font-size is 16px, that makes the calculation for grid size. +// If you want your base font-size to be different and not have it affect the grid breakpoints, +// set $rem-base to $base-font-size and make sure $base-font-size is a px value. +// $base-font-size: 100%; + +// $base-line-height is 24px while $base-font-size is 16px +// $base-line-height: 1.5; + +// Text selector helpers +// $headers: "h1,h2,h3,h4,h5,h6"; + +// We use these to define default font weights +// $font-weight-normal: normal; +// $font-weight-bold: bold; + +// We use these to control various global styles +// $body-background: #fff; +// $body-font-color: #222; +// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; +// $body-font-weight: $font-weight-normal; +// $body-font-style: normal; +// $body-antialiased: true; + +// Application Colors +// $primary-color: #00558b; +// $secondary-color: #f1f1f1; +// $alert-color: #F04124; +// $info-color: #A0D3E8; +// $success-color: #43AC6A; +// $warning-color: #F08A24; +// $dark-color: #232323; +// $gray: #dfdfdf; +// $gray-dark: darken($gray, 8); +// $gray-light: lighten($gray, 8); + +// We use these to make sure border radius matches unless we want it different. +// $global-radius: 4px; +// $global-rounded: 1000px; + +// We use this for default spacing +// $global-padding: 1rem; +// $global-spacing: rem-calc(15); + +// 3. Breakpoints +// - - - - - - - - - - - - - - - + +// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles } +// $breakpoints: ( +// small: rem-calc(0), +// medium: rem-calc(640), +// large: rem-calc(1200), +// xlarge: rem-calc(1440), +// xxlarge: rem-calc(1920), +// ); + +// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on. +// $breakpoint-classes: (small medium large); + +// 4. Typography +// - - - - - - - - - - - - - - - + +// We use these to control header font styles +// $header-font-family: $body-font-family; +// $header-font-weight: $font-weight-normal; +// $header-font-style: $font-weight-normal; +// $header-font-color: #222; +// $header-line-height: 1.4; +// $header-top-margin: .2rem; +// $header-bottom-margin: .5rem; +// $header-text-rendering: optimizeLegibility; + +// We use these to control header font sizes +// $h1-font-size: rem-calc(44); +// $h2-font-size: rem-calc(37); +// $h3-font-size: rem-calc(27); +// $h4-font-size: rem-calc(23); +// $h5-font-size: rem-calc(18); +// $h6-font-size: 1rem; + +// We use these to control header size reduction on small screens +// $h1-font-reduction: rem-calc(10); +// $h2-font-reduction: rem-calc(10); +// $h3-font-reduction: rem-calc(5); +// $h4-font-reduction: rem-calc(5); +// $h5-font-reduction: 0; +// $h6-font-reduction: 0; + +// These control how subheaders are styled. +// $subheader-line-height: 1.4; +// $subheader-font-color: scale-color($header-font-color, $lightness: 35%); +// $subheader-font-weight: $font-weight-normal; +// $subheader-top-margin: .2rem; +// $subheader-bottom-margin: .5rem; + +// A general styling +// $small-font-size: 60%; +// $small-font-color: scale-color($header-font-color, $lightness: 35%); + +// We use these to style paragraphs +// $paragraph-font-family: inherit; +// $paragraph-font-weight: $font-weight-normal; +// $paragraph-font-size: 1rem; +// $paragraph-line-height: 1.6; +// $paragraph-margin-bottom: rem-calc(20); +// $paragraph-aside-font-size: rem-calc(14); +// $paragraph-aside-line-height: 1.35; +// $paragraph-aside-font-style: italic; +// $paragraph-text-rendering: optimizeLegibility; + +// We use these to style tags +// $code-color: grayscale($primary-color); +// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace; +// $code-font-weight: $font-weight-normal; +// $code-background-color: scale-color($secondary-color, $lightness: 70%); +// $code-border-size: 1px; +// $code-border-style: solid; +// $code-border-color: scale-color($code-background-color, $lightness: -10%); +// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1); + +// We use these to style anchors +// $anchor-text-decoration: none; +// $anchor-text-decoration-hover: none; +// $anchor-font-color: $primary-color; +// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%); + +// We use these to style the
element +// $hr-border-width: 1px; +// $hr-border-style: solid; +// $hr-border-color: #ddd; +// $hr-margin: rem-calc(20); + +// We use these to style lists +// $list-font-family: $paragraph-font-family; +// $list-font-size: $paragraph-font-size; +// $list-line-height: $paragraph-line-height; +// $list-margin-bottom: $paragraph-margin-bottom; +// $list-style-position: outside; +// $list-side-margin: 1.1rem; +// $list-ordered-side-margin: 1.4rem; +// $list-side-margin-no-bullet: 0; +// $list-nested-margin: rem-calc(20); +// $definition-list-header-weight: $font-weight-bold; +// $definition-list-header-margin-bottom: .3rem; +// $definition-list-margin-bottom: rem-calc(12); + +// We use these to style blockquotes +// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%); +// $blockquote-padding: rem-calc(9 20 0 19); +// $blockquote-border: 1px solid #ddd; +// $blockquote-cite-font-size: rem-calc(13); +// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%); +// $blockquote-cite-link-color: $blockquote-cite-font-color; + +// Acronym styles +// $acronym-underline: 1px dotted #ddd; + +// 5. Grid +// - - - - - - - - - - - - - - - + +// $container-width: rem-calc(900); +// $block-padding: $global-padding; +// $total-columns: 12; +// $block-grid-max-size: 6; + +// 6. Button +// - - - - - - - - - - - - - - - + +// $button-padding: 0.85em 1em; +// $button-margin: 0 $global-padding $global-padding 0; +// $button-style: solid; +// $button-background: $primary-color; +// $button-background-hover: scale-color($button-background, $lightness: -15%); +// $button-color: auto; +// $button-radius: 0; +// $button-sizes: ( +// tiny: 0.7, +// small: 0.8, +// medium: 1, +// large: 1.3, +// ); +// $button-font-size: 0.9rem; +// $button-opacity-disabled: 0.5; +// $button-tag-selector: false; + +// 7. Accordion +// - - - - - - - - - - - - - - - + +// $accordion-border: 1px solid $gray-dark; + +// $accordion-title-background: $gray-light; +// $accordion-title-background-hover: smartscale($accordion-title-background, 5%); +// $accordion-title-background-active: smartscale($accordion-title-background, 3%); +// $accordion-title-color: isitlight($accordion-title-background); +// $accordion-title-color-active: isitlight($accordion-title-background); + +// $accordion-title-padding: $global-padding; +// $accordion-content-padding: $global-padding; + +// 8. Action Sheet +// - - - - - - - - - - - - - - - + +// $actionsheet-background: white; +// $actionsheet-border-color: #ccc; +// $actionsheet-animate: transform opacity; +// $actionsheet-animation-speed: 0.25s; +// $actionsheet-width: 300px; +// $actionsheet-radius: 4px; +// $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25); +// $actionsheet-padding: $global-padding; +// $actionsheet-tail-size: 10px; + +// $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25); + +// $actionsheet-link-color: #000; +// $actionsheet-link-background-hover: smartscale($actionsheet-background); + +// 9. Block List +// - - - - - - - - - - - - - - - + +// $blocklist-background: #fff; +// $blocklist-fullbleed: true; +// $blocklist-fontsize: 1rem; + +// $blocklist-item-padding: 0.8rem 1rem; +// $blocklist-item-color: isitlight($blocklist-background, #000, #fff); +// $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%); +// $blocklist-item-color-disabled: #999; +// $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%); + +// $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%); +// $blocklist-item-icon-size: 0.8; + +// $blocklist-header-fontsize: 0.8em; +// $blocklist-header-color: smartscale($blocklist-item-color, 40%); +// $blocklist-header-uppercase: true; + +// $blocklist-check-icons: true; + +// 10. Button Group +// - - - - - - - - - - - - - - - + +// $btngroup-background: $primary-color; +// $btngroup-color: #fff; +// $btngroup-radius: $button-radius; + +// 11. Card +// - - - - - - - - - - - - - - - + +// $card-background: #fff; +// $card-color: isitlight($card-background); +// $card-border: 1px solid smartscale($card-background, 7%); +// $card-radius: $global-radius; +// $card-shadow: 0 1px 2px rgba(#000, 0.2); +// $card-padding: $global-padding; +// $card-margin: 0.5rem; + +// $card-divider-background: smartscale($card-background, 7%); + +// 12. Extras +// - - - - - - - - - - - - - - - + +// $closebutton-position: (top right); +// $closebutton-size: 2em; +// $closebutton-lineheight: 0.5; +// $closebutton-color: #999; +// $closebutton-color-hover: #333; + +// $thumbnail-padding: 0.5rem; +// $thumbnail-shadow: 0 3px 15px rgba(black, 0.25); + +// 13. Forms +// - - - - - - - - - - - - - - - + +// Basic form variables +// $form-fontsize: 1rem; +// $form-padding: 0.5rem; + +// Text fields +// $input-color: #000; +// $input-color-hover: $input-color; +// $input-color-focus: $input-color; +// $input-background: #fff; +// $input-background-hover: $input-background; +// $input-background-focus: $input-background; +// $input-background-disabled: smartscale($input-background); +// $input-border: 1px solid #ccc; +// $input-border-hover: 1px solid #bbb; +// $input-border-focus: 1px solid #999; +// $input-cursor-disabled: not-allowed; + +// Select menus +// $select-color: #000; +// $select-background: #fafafa; +// $select-background-hover: smartscale($select-background, 4%); +// $select-arrow: true; +// $select-arrow-color: $select-color; + +// Labels +// $form-label-fontsize: 0.9rem; +// $form-label-margin: 0.5rem; +// $form-label-color: #333; + +// Inline labels +// $inlinelabel-color: #333; +// $inlinelabel-background: #eee; +// $inlinelabel-border: $input-border; + +// Range slider +// $slider-background: #ddd; +// $slider-height: 1rem; +// $slider-radius: 0px; +// $slider-thumb-height: 1.5rem; +// $slider-thumb-color: $primary-color; +// $slider-thumb-radius: 0px; + +// Progress and meter +// $meter-height: 1.5rem; +// $meter-background: #ccc; +// $meter-fill: $primary-color; +// $meter-fill-high: $success-color; +// $meter-fill-medium: #e7cf00; +// $meter-fill-low: $alert-color; +// $meter-radius: 0; + +// 14. Iconic +// - - - - - - - - - - - - - - - + +// $iconic-primary-fill: $primary-color; +// $iconic-primary-stroke: $primary-color; +// $iconic-accent-fill: $iconic-primary-fill; +// $iconic-accent-stroke: $iconic-accent-fill; + +// 15. Label +// - - - - - - - - - - - - - - - + +// $label-fontsize: 0.8rem; +// $label-padding: ($global-padding / 3) ($global-padding / 2); +// $label-radius: 0; +// $label-background: $primary-color; +// $label-color: isitlight($primary-color); + +// $badge-fontsize: 0.8em; +// $badge-diameter: 1.5rem; +// $badge-background: $primary-color; +// $badge-color: #fff; + +// 16. Menu Bar +// - - - - - - - - - - - - - - - + +// $menubar-fontsize: 1rem; +// $menubar-background: #fff; +// $menubar-background-hover: smartscale($menubar-background, 7%); +// $menubar-background-active: $menubar-background-hover; +// $menubar-color: isitlight($menubar-background); +// $menubar-color-hover: $menubar-color; +// $menubar-color-active: $menubar-color-hover; + +// $menubar-item-padding: $global-padding; +// $menubar-icon-size: 25px; +// $menubar-icon-spacing: $menubar-item-padding; + +// 17. Modal +// - - - - - - - - - - - - - - - + +// $modal-background: #fff; +// $modal-border: 0; +// $modal-radius: 0px; +// $modal-shadow: none; +// $modal-zindex: 1000; +// $modal-sizes: ( +// tiny: 300px, +// small: 500px, +// medium: 600px, +// large: 800px, +// ); + +// $modal-overlay-class: 'modal-overlay'; +// $modal-overlay-background: rgba(#333, 0.7); + +// 18. Motion UI +// - - - - - - - - - - - - - - - + +// Classes to use when triggering in/out animations +// $motion-class: ( +// in: "ng-enter", +// out: "ng-leave", +// ); +// $motion-class-active: ( +// in: "ng-enter-active", +// out: "ng-leave-active", +// ); +// $motion-class-stagger: ( +// in: "ng-enter-stagger", +// out: "ng-leave-stagger", +// ); +// $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; +// $motion-hinge-and-fade: true; +// $motion-scale-and-fade: true; +// $motion-spin-and-fade: true; + +// Default speed for transitions and animations +// $motion-duration-default: 500ms; + +// Slow and fast modifiders +// $motion-duration-slow: 750ms; +// $motion-duration-fast: 250ms; +// $motion-stagger-duration-default: 150ms; +// $motion-stagger-duration-short: 50ms; +// $motion-stagger-duration-long: 300ms; + +// Default timing function for transitions and animations +// $motion-timing-default: ease; + +// 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 delay for all transitions and animations +// $motion-delay-default: 0; +// Short and long delay modifiers +// $motion-delay-short: 300ms; +// $motion-delay-long: 700ms; + +// 19. Notification +// - - - - - - - - - - - - - - - + +// $notification-default-position: right top; +// $notification-width: rem-calc(400); +// $notification-offset: $global-padding; + +// $notification-background: $primary-color; +// $notification-color: white; +// $notification-padding: $global-padding; +// $notification-radius: 4px; + +// $notification-icon-size: 60px; +// $notification-icon-margin: $global-padding; +// $notification-icon-align: top; + + +// 20. Off-canvas +// - - - - - - - - - - - - - - - + +// $offcanvas-size-horizontal: 250px; +// $offcanvas-size-vertical: 250px; + +// $offcanvas-background: #fff; +// $offcanvas-color: isitlight($offcanvas-background); +// $offcanvas-padding: 0; +// $offcanvas-shadow: 3px 0 10px rgba(black, 0.25); +// $offcanvas-animation-speed: 0.25s; + +// $offcanvas-frame-selector: '.grid-frame'; + +// 21. Panel +// - - - - - - - - - - - - - - - + +// $panel-size-horizontal: 300px; +// $panel-size-vertical: 300px; +// $panel-padding: 0; + +// $panel-background: #fff; +// $panel-shadow: 3px 0 10px rgba(black, 0.25); + +// DEPRECATED: these variables will be removed in a future version. +// $panel-animation-speed: 0.25s; + +// 22. Popup +// - - - - - - - - - - - - - - - + +// $popup-width: rem-calc(300); +// $popup-background: #fff; +// $popup-border: 0; +// $popup-radius: 0; +// $popup-shadow: 0 0 10px rgba(#000, 0.25); + +// 23. Switch +// - - - - - - - - - - - - - - - + +// $switch-width: rem-calc(50); +// $switch-height: rem-calc(32); +// $switch-background: #ccc; +// $switch-background-active: $primary-color; +// $switch-border: 0; +// $switch-radius: 9999px; +// $switch-animation-speed: 0.15s; + +// $switch-paddle-color: white; +// $switch-paddle-offset: 4px; + +// 24. Tabs +// - - - - - - - - - - - - - - - + +// $tabstrip-background: transparent; + +// $tab-title-background: $gray-light; +// $tab-title-background-hover: smartscale($tab-title-background, 5%); +// $tab-title-background-active: smartscale($tab-title-background, 3%); +// $tab-title-color: isitlight($tab-title-background); +// $tab-title-color-active: $tab-title-color; + +// $tab-title-padding: $global-padding; +// $tab-content-padding: $global-padding; + +// 25. Title Bar +// - - - - - - - - - - - - - - - + +// $titlebar-center-width: 50%; +// $titlebar-side-width: (100% - $titlebar-center-width) / 2; +// $titlebar-background: #eee; +// $titlebar-color: #000; +// $titlebar-border: 1px solid #ccc; +// $titlebar-padding: $global-padding; +// $titlebar-item-classes: ( +// center: 'center', +// left: 'left', +// right: 'right', +// title: 'title', +// ); 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
). + + $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
  • ). + + $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