From eda72b785cad2b63985ec05217120cb4612d24b2 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Mon, 8 Feb 2016 15:34:25 +0100 Subject: [PATCH] remove unused styles --- app/styles/app.scss | 43 +- app/styles/app/_mixins/colors.sass | 44 - app/styles/app/_mixins/fonts.sass | 17 - app/styles/app/_mixins/vars.sass | 65 - app/styles/app/base.sass | 66 +- app/styles/app/components/build-tile.sass | 24 +- .../app/components/loading-indicator.sass | 2 +- app/styles/app/components/sync-button.sass | 6 +- app/styles/app/forms.scss | 201 --- .../app/foundation/scss/foundation.scss | 46 - .../foundation/scss/foundation/_settings.scss | 1447 ----------------- .../foundation/components/_accordion.scss | 157 -- .../foundation/components/_alert-boxes.scss | 128 -- .../foundation/components/_block-grid.scss | 132 -- .../foundation/components/_breadcrumbs.scss | 132 -- .../foundation/components/_button-groups.scss | 197 --- .../scss/foundation/components/_buttons.scss | 259 --- .../scss/foundation/components/_clearing.scss | 247 --- .../components/_dropdown-buttons.scss | 130 -- .../scss/foundation/components/_dropdown.scss | 262 --- .../foundation/components/_flex-video.scss | 51 - .../scss/foundation/components/_forms.scss | 570 ------- .../scss/foundation/components/_global.scss | 480 ------ .../scss/foundation/components/_icon-bar.scss | 329 ---- .../foundation/components/_inline-lists.scss | 57 - .../scss/foundation/components/_joyride.scss | 222 --- .../foundation/components/_keystrokes.scss | 61 - .../scss/foundation/components/_labels.scss | 106 -- .../scss/foundation/components/_magellan.scss | 34 - .../foundation/components/_offcanvas.scss | 515 ------ .../scss/foundation/components/_orbit.scss | 368 ----- .../foundation/components/_pagination.scss | 162 -- .../scss/foundation/components/_panels.scss | 101 -- .../components/_pricing-tables.scss | 150 -- .../foundation/components/_progress-bars.scss | 79 - .../foundation/components/_range-slider.scss | 168 -- .../scss/foundation/components/_reveal.scss | 223 --- .../scss/foundation/components/_side-nav.scss | 116 -- .../foundation/components/_split-buttons.scss | 191 --- .../scss/foundation/components/_sub-nav.scss | 123 -- .../scss/foundation/components/_switches.scss | 238 --- .../scss/foundation/components/_tables.scss | 135 -- .../scss/foundation/components/_tabs.scss | 123 -- .../scss/foundation/components/_thumbs.scss | 66 - .../scss/foundation/components/_toolbar.scss | 71 - .../scss/foundation/components/_tooltips.scss | 142 -- .../scss/foundation/components/_top-bar.scss | 689 -------- .../scss/foundation/components/_type.scss | 525 ------ .../foundation/components/_visibility.scss | 408 ----- app/styles/app/github.sass | 36 - app/styles/app/layout.sass | 17 +- app/styles/app/{ => layouts}/ansi.sass | 0 app/styles/app/{ => layouts}/auth.sass | 0 app/styles/app/layouts/branches.sass | 30 +- app/styles/app/layouts/broadcasts.sass | 10 +- app/styles/app/layouts/caches.sass | 10 +- app/styles/app/layouts/dashboard.sass | 55 +- app/styles/app/layouts/error.sass | 4 +- app/styles/app/layouts/first-sync.sass | 4 +- app/styles/app/layouts/jobs.sass | 38 +- app/styles/app/{main => layouts}/log.sass | 22 +- app/styles/app/layouts/missing-notice.sass | 2 +- app/styles/app/layouts/owner.sass | 9 +- app/styles/app/layouts/profile.sass | 10 +- app/styles/app/layouts/pull-requests.sass | 2 +- app/styles/app/layouts/repo.sass | 18 +- app/styles/app/layouts/requests.sass | 4 +- app/styles/app/layouts/sidebar.sass | 38 +- app/styles/app/layouts/top.sass | 5 +- .../foundation => legacy}/_functions.scss | 19 +- app/styles/app/legacy/_global.scss | 62 + .../components => legacy}/_grid.scss | 4 +- app/styles/app/misc.sass | 33 - app/styles/app/{_mixins => }/mixins.sass | 8 +- app/styles/app/modules/avatar.sass | 4 +- app/styles/app/modules/build-header.sass | 18 +- app/styles/app/modules/buttons.sass | 53 +- app/styles/app/modules/dropdown.sass | 23 +- app/styles/app/modules/forms.sass | 24 +- app/styles/app/modules/icons.sass | 8 +- app/styles/app/modules/memberlist.sass | 26 - app/styles/app/modules/navigation.sass | 2 +- app/styles/app/{ => modules}/popup.sass | 62 +- app/styles/app/modules/row.sass | 22 +- app/styles/app/modules/switch.sass | 7 +- app/styles/app/modules/tabs.sass | 17 +- app/styles/app/modules/tooltips.sass | 4 +- app/styles/app/pages/getting-started.sass | 8 +- app/styles/app/pages/landing.sass | 2 +- app/styles/app/userlike.sass | 3 +- app/styles/app/vars.sass | 66 + app/templates/components/status-images.hbs | 13 +- 92 files changed, 454 insertions(+), 10456 deletions(-) delete mode 100644 app/styles/app/_mixins/colors.sass delete mode 100644 app/styles/app/_mixins/fonts.sass delete mode 100644 app/styles/app/_mixins/vars.sass delete mode 100644 app/styles/app/forms.scss delete mode 100644 app/styles/app/foundation/scss/foundation.scss delete mode 100644 app/styles/app/foundation/scss/foundation/_settings.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_accordion.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_alert-boxes.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_block-grid.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_breadcrumbs.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_button-groups.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_buttons.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_clearing.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_dropdown-buttons.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_dropdown.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_flex-video.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_forms.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_global.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_icon-bar.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_inline-lists.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_joyride.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_keystrokes.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_labels.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_magellan.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_offcanvas.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_orbit.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_pagination.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_panels.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_pricing-tables.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_progress-bars.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_range-slider.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_reveal.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_side-nav.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_split-buttons.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_sub-nav.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_switches.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_tables.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_tabs.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_thumbs.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_toolbar.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_tooltips.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_top-bar.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_type.scss delete mode 100644 app/styles/app/foundation/scss/foundation/components/_visibility.scss delete mode 100644 app/styles/app/github.sass rename app/styles/app/{ => layouts}/ansi.sass (100%) rename app/styles/app/{ => layouts}/auth.sass (100%) rename app/styles/app/{main => layouts}/log.sass (91%) rename app/styles/app/{foundation/scss/foundation => legacy}/_functions.scss (90%) create mode 100644 app/styles/app/legacy/_global.scss rename app/styles/app/{foundation/scss/foundation/components => legacy}/_grid.scss (99%) delete mode 100644 app/styles/app/misc.sass rename app/styles/app/{_mixins => }/mixins.sass (96%) delete mode 100644 app/styles/app/modules/memberlist.sass rename app/styles/app/{ => modules}/popup.sass (56%) create mode 100644 app/styles/app/vars.sass diff --git a/app/styles/app.scss b/app/styles/app.scss index a873572c..0026dbd6 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -1,29 +1,12 @@ -@import "app/_mixins/colors"; -@import "app/_mixins/fonts"; -@import "app/_mixins/vars"; -@import "app/foundation/scss/foundation/_settings"; -@import "app/foundation/scss/foundation/components/_grid"; - -@import "app/_mixins/mixins"; +@import "app/legacy/_functions"; +@import "app/legacy/_global"; +@import "app/legacy/_grid"; +@import "app/vars"; +@import "app/mixins"; @import "app/base"; -@import "app/ansi"; -@import "app/auth"; -@import "app/forms"; -@import "app/github"; - @import "app/userlike"; -@import "app/misc"; -@import "app/popup"; - -@import "app/components/sync-button"; -@import "app/components/loading-indicator"; -@import "app/components/build-tile"; -@import "app/components/status-icon"; - -@import "app/animation/tractor"; - @import "app/modules/logo"; @import "app/modules/tofuburger"; @import "app/modules/navigation"; @@ -38,14 +21,22 @@ @import "app/modules/flash"; @import "app/modules/media"; @import "app/modules/switch"; -@import "app/modules/memberlist"; @import "app/modules/forms"; @import "app/modules/notice"; @import "app/modules/build-header"; @import "app/modules/avatar"; +@import "app/modules/popup"; + +@import "app/components/sync-button"; +@import "app/components/loading-indicator"; +@import "app/components/build-tile"; +@import "app/components/status-icon"; + +@import "app/animation/tractor"; @import "app/layout"; -@import "app/layouts/dashboard"; +@import "app/layouts/ansi"; +@import "app/layouts/auth"; @import "app/layouts/error"; @import "app/layouts/footer"; @import "app/layouts/sidebar"; @@ -57,13 +48,13 @@ @import "app/layouts/repo"; @import "app/layouts/jobs"; @import "app/layouts/pull-requests"; -@import "app/main/log"; - +@import "app/layouts/log"; @import "app/layouts/requests"; @import "app/layouts/caches"; @import "app/layouts/first-sync"; @import "app/layouts/missing-notice"; @import "app/layouts/settings"; +@import "app/layouts/dashboard"; @import "app/pages/landing"; @import "app/pages/home-pro"; diff --git a/app/styles/app/_mixins/colors.sass b/app/styles/app/_mixins/colors.sass deleted file mode 100644 index fcaa32d5..00000000 --- a/app/styles/app/_mixins/colors.sass +++ /dev/null @@ -1,44 +0,0 @@ -$teal: #40a3ad -$green: #44a662 -$yellow: #e5da3f -$yellow-bg: $yellow -$yellow-font: #beab04 -$yellow-tile: #dbc040 -$red: #d94341 -$grey: #666 - -$grey-light: #f1f1f1 - -$teal-light: $teal -$teal-dark: $teal -$green-dark: $green -$red-dark: $red -$white: #fff -$color-text: $grey - -$color-text-log: $grey-light -$color-bg-log-hover: #444 -$color-bg-log-highlight: $grey -$color-bg-log-fold: #333 -$color-bg-log-fold-highlight: #777 -$color-bg-pre: #efefef -$color-border-light: #ddd -$color-link: $grey - -$ansi-black: #4E4E4E -$ansi-black-bold: #7C7C7C -$ansi-red: #FF6C60 -$ansi-red-bold: #FFB6B0 -$ansi-green: #00AA00 -$ansi-green-bold: #CEFFAB -$ansi-yellow: #FFFFB6 -$ansi-yellow-bold: #FFFFCB -$ansi-blue: #96CBFE -$ansi-blue-bold: #B5DCFE -$ansi-magenta: #FF73FD -$ansi-magenta-bold: #FF9CFE -$ansi-cyan: #00AAAA -$ansi-cyan-bold: #55FFFF -$ansi-white: #EEEEEE -$ansi-white-bold: #FFFFFF -$ansi-grey: #969696 diff --git a/app/styles/app/_mixins/fonts.sass b/app/styles/app/_mixins/fonts.sass deleted file mode 100644 index bab1b795..00000000 --- a/app/styles/app/_mixins/fonts.sass +++ /dev/null @@ -1,17 +0,0 @@ -$font-size-huge: 30px -$font-size-big: 15px -$font-size-normal: 14px -$font-size-small: 13px -$font-size-log: 12px -$font-size-smaller: 15px -$font-size-tiny: 11px -$font-size-tiniest: 10px - -$line-height: 22px -$line-height-log: 19px - -$font-weight-light: 300 -$font-weight-normal: 400 -$font-weight-bold: 600 - -$top-height: 55px \ No newline at end of file diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass deleted file mode 100644 index 0403f190..00000000 --- a/app/styles/app/_mixins/vars.sass +++ /dev/null @@ -1,65 +0,0 @@ -$font-size-ml: 18px -$font-size-m: 16px -$font-size-sm: 14px -$line-height-m: 1.3 -$font-size-s: 12px - -$blue-grey: #404650 -$blue-grey-light: #d8e2e6 -$light-gray: #e9e9e7 - -$travis-lint-color: #9b9d9e -$travis-lint-bg: #fafafa - -$left-bg: $light-gray -$right-bg: $light-gray - - -// dashboard -$pass-color: #3FA75F -$fail-color: #DB423C -$error-color: $fail-color -$start-color: #D2C93B -$start-bg-color: #D2CA24 -$cancel-color: #A1A0A0 -$dropdown-color: $teal-light -$created-color: #CDBC2C - -$dashboard-text-color: #9d9fa1 - -//wrapper -$wrapper-bg-color: #f4f3ea - -// footer -$footer-color: $blue-grey -$footer-bg-color: #e0e0e0 -$footer-h3-color: #8f9ba2 -$footer-h3-corder-color: #ccd0d5 - -// error pages -$error-heading-color: #357389 -$error-copy-color: $dashboard-text-color -$error-bg-gradient: rgba(204,235,247,1) -// maintenance -$maintenance-grass: #8cad7d -// 404 -$error-hill-grey: #bbcac6 -//500 -$error-sand: #dcc682 - -// tabs -$tab-nav-inactive-bg: #f8f8f8 -$tab-nav-inactive-bg-hover: $white -$tab-active-bg: $blue-grey-light - -// log -$log-header-bg: #444444 - -$font-size-xxl: 30px - -$cream-light: #FAFAF8 -$cream-dark: #EFF0EC -$grey-lighter: #A6ADAD -$grey-light: #8d8d8d -$grey-medium: #8d8d8d -$grey-dark: #808080 diff --git a/app/styles/app/base.sass b/app/styles/app/base.sass index f2f13c1f..8c80a12e 100644 --- a/app/styles/app/base.sass +++ b/app/styles/app/base.sass @@ -1,14 +1,78 @@ +*, +*:before, +*:after + box-sizing: border-box html, body + height: 100% line-height: 1.45 !important + font-size: 14px + background: white + color: $asphalt-grey + padding: 0 + margin: 0 + font-weight: 400 + font-style: normal + line-height: 1.45 + font-family: $font-family-sans-serif + +img + max-width: 100% + height: auto + -ms-interpolation-mode: bicubic + display: inline-block + vertical-align: middle + +textarea + height: auto + min-height: 50px + +select + width: 100% strong font-weight: 400 a - color: $grey + color: $asphalt-grey text-decoration: none &:hover, &:active text-decoration: none + +.display + display: block !important + +.display-inline + display: inline-block !important + +.hidden + display: none + +.emoji + vertical-align: middle + width: 20px + height: 20px + +.warning + color: #c00 + a + color: #c00 + text-decoration: underline + +.small-title + font-size: 20px + color: $oxide-blue + font-weight: 400 + +.blank-list + @include resetul + +.monospace + font-family: Monaco, monospace + font-size: 13px + line-height: 1 + +.float-right + float: right diff --git a/app/styles/app/components/build-tile.sass b/app/styles/app/components/build-tile.sass index 9b449ab9..5bb1ba1a 100644 --- a/app/styles/app/components/build-tile.sass +++ b/app/styles/app/components/build-tile.sass @@ -7,9 +7,9 @@ &:hover background-color: $extra-hover .status-icon.#{$status} g > * - fill: $white + fill: white .status-icon .circle - border-color: $white + border-color: white border-width: 2px .build-tiles @@ -24,7 +24,7 @@ float: left width: 20% background-color: #F7F7F7 - border-right: 1px solid $white + border-right: 1px solid white &:last-of-type border-right: none .status-icon @@ -72,12 +72,12 @@ height: 100% text-align: center - @include buildTileColors(#44A662, #F5FBF6, 'passed') - @include buildTileColors(#D94341, #FFF7F5, 'failed') - @include buildTileColors(#D94341, #FFF7F5, 'errored') - @include buildTileColors(#A1A0A0, #F5F5F5, 'canceled') - @include buildTileColors($yellow-tile, #fdfcee, 'started') - @include buildTileColors($yellow-tile, #fdfcee, 'queued') - @include buildTileColors($yellow-tile, #fdfcee, 'booting') - @include buildTileColors($yellow-tile, #fdfcee, 'received') - @include buildTileColors($yellow-tile, #fdfcee, 'created') + @include buildTileColors($turf-green, $seed-green, 'passed') + @include buildTileColors($brick-red, $quartz-red, 'failed') + @include buildTileColors($brick-red, $quartz-red, 'errored') + @include buildTileColors($cement-grey, $pebble-grey, 'canceled') + @include buildTileColors($dozer-yellow, $haze-yellow, 'started') + @include buildTileColors($dozer-yellow, $haze-yellow, 'queued') + @include buildTileColors($dozer-yellow, $haze-yellow, 'booting') + @include buildTileColors($dozer-yellow, $haze-yellow, 'received') + @include buildTileColors($dozer-yellow, $haze-yellow, 'created') diff --git a/app/styles/app/components/loading-indicator.sass b/app/styles/app/components/loading-indicator.sass index 5d3301b2..316953bd 100644 --- a/app/styles/app/components/loading-indicator.sass +++ b/app/styles/app/components/loading-indicator.sass @@ -32,7 +32,7 @@ .loading-indicator--white @extend .loading-indicator i - background-color: $white + background-color: white .icon-height .loading-indicator diff --git a/app/styles/app/components/sync-button.sass b/app/styles/app/components/sync-button.sass index a74b1ea5..51ea1bcf 100644 --- a/app/styles/app/components/sync-button.sass +++ b/app/styles/app/components/sync-button.sass @@ -21,13 +21,13 @@ &.is-syncing background: #c6b93d - color: $white + color: white .icon width: 1.1em height: 1.2em vertical-align: middle svg path - fill: $white + fill: white .icon margin-right: .5em .loading-indicator--white @@ -50,7 +50,7 @@ font-size: 14px color: #848384 text-align: right - + pointer-events: none transform: translateX(50%) opacity: 0 diff --git a/app/styles/app/forms.scss b/app/styles/app/forms.scss deleted file mode 100644 index 51dbcb31..00000000 --- a/app/styles/app/forms.scss +++ /dev/null @@ -1,201 +0,0 @@ -.pro { - form.subscription-form { - display: inline-block; - width: 900px; - - h2 { - margin-bottom: 13px; - } - h3 { - margin: 24px 0 0 0; - } - p { - line-height: 160%; - font-size: 16px; - color: #666; - } - ul { - list-style-type: disc; - margin-left: 20px; - - li { - margin: 0; - } - } - ul.footnotes { - margin: 36px 60px 0 85px; - list-style-type: none; - } - sup.required { - color: #c00; - font-size: 15px; - } - .message { - float: left; - display: none; - padding-left: 24px; - background: url(/images/spinner.gif) no-repeat left center; - color: #999; - } - .note { - font-size: 12px; - color: #666; - width: 840px; - } - - & > div { - display: inline-block; - height: 1%; - } - - fieldset + p { - clear: both; - } - - fieldset { - padding: 0; - border: 0; - margin: 12px 36px 0 0; - - &:nth-child(odd) { - margin-right: 0; - } - &.wide { - margin: 0; - } - - legend { - padding-bottom: 10px; - color: #666; - font-size: 16px; - font-weight: bold; - } - - .input { - position: relative; - height: 20px; - margin-bottom: 11px; - } - - label { - float: left; - clear: both; - width: 100px; - margin-right: 14px; - padding-top: 5px; - line-height: 20px; - text-align: right; - font-size: 14px; - text-shadow: 2px 2px 0px #fff; - color: #666; - - &.required:after { - content: '*'; - top: 17px; - right: -10px; - padding-left: 3px; - color: #c00; - } - } - input, textarea, select { - float: left; - font-family: "Helvetica Neue", Helvetica, Arial; - } - input, textarea { - border: 1px solid #ddd; - font-size: 13px; - border-radius: 1px - } - input { - margin-top: 4px; - height: 20px; - width: 270px; - padding-left: 5px; - } - textarea { - margin-top: 8px; - height: 20px; - width: 270px; - } - &.wide textarea { - width: 740px; - } - select { - font-size: 14px; - margin-top: 5px; - height: 20px; - } - .boolean { - input { - margin: 8px 8px 0 86px; - width: auto; - clear: left; - } - label { - clear: none; - width: auto; - margin-top: 8px; - line-height: 16px; - text-align: left; - font-size: 12px; - } - } - .country select { - width: 275px; - } - .hint { - display: none; - } - p { - float: left; - width: 740px; - margin: 0 0 2px 0; - line-height: 41px; - font-size: 13px; - color: #666; - } - } - - #comment fieldset { - margin-top: 12px; - } - - .actions { - display: block; - clear: both; - height: 40px; - line-height: 60px; - - input, a { - display: block; - float: left; - width: 184px; - height: 40px; - margin: 10px 20px 0 0px; - margin-left: 115px; - border: 0; - text-align: center; - line-height: 37px; - font-size: 20px; - text-decoration: none; - color: white; - text-shadow: 2px 2px 0 #666; - cursor: hand; - border-radius: 6px; - background-color: #19A509; - background-image: linear-gradient(#3f9c33, #348629); - &:hover { - background-image: linear-gradient(#1CBE0A, #158F07); - } - &[disabled] { - background-image: linear-gradient(#ddd, #ccc); - color: #f6f6f6; - text-shadow: 2px 2px 0 #aaa; - } - } - } - .error, div.error > input { - border-color: #c00; - } - } -} diff --git a/app/styles/app/foundation/scss/foundation.scss b/app/styles/app/foundation/scss/foundation.scss deleted file mode 100644 index 7399cef9..00000000 --- a/app/styles/app/foundation/scss/foundation.scss +++ /dev/null @@ -1,46 +0,0 @@ -@charset "UTF-8"; -// Foundation by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -// Make sure the charset is set appropriately - - -// Behold, here are all the Foundation components. - @import "foundation/components/grid"; - // @import "foundation/components/accordion"; - // @import "foundation/components/alert-boxes"; - // @import "foundation/components/block-grid"; - // @import "foundation/components/breadcrumbs"; - // @import "foundation/components/button-groups"; - // @import "foundation/components/buttons"; - // @import "foundation/components/clearing"; - // @import "foundation/components/dropdown"; - // @import "foundation/components/dropdown-buttons"; - // @import "foundation/components/flex-video"; - // @import "foundation/components/forms"; - // @import "foundation/components/icon-bar"; - // @import "foundation/components/inline-lists"; - // @import "foundation/components/joyride"; - // @import "foundation/components/keystrokes"; - // @import "foundation/components/labels"; - // @import "foundation/components/magellan"; - // @import "foundation/components/orbit"; - // @import "foundation/components/pagination"; - // @import "foundation/components/panels"; - // @import "foundation/components/pricing-tables"; - // @import "foundation/components/progress-bars"; - // @import "foundation/components/range-slider"; - // @import "foundation/components/reveal"; - // @import "foundation/components/side-nav"; - // @import "foundation/components/split-buttons"; - // @import "foundation/components/sub-nav"; - // @import "foundation/components/switches"; - // @import "foundation/components/tables"; - // @import "foundation/components/tabs"; - // @import "foundation/components/thumbs"; - // @import "foundation/components/tooltips"; - // @import "foundation/components/top-bar"; - // @import "foundation/components/type"; - // @import "foundation/components/offcanvas"; - // @import "foundation/components/visibility"; diff --git a/app/styles/app/foundation/scss/foundation/_settings.scss b/app/styles/app/foundation/scss/foundation/_settings.scss deleted file mode 100644 index 6bab76cf..00000000 --- a/app/styles/app/foundation/scss/foundation/_settings.scss +++ /dev/null @@ -1,1447 +0,0 @@ -// Foundation by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -// - -// Table of Contents -// Foundation Settings -// -// a. Base -// b. Grid -// c. Global -// d. Media Query Ranges -// e. Typography -// 01. Accordion -// 02. Alert Boxes -// 03. Block Grid -// 04. Breadcrumbs -// 05. Buttons -// 06. Button Groups -// 07. Clearing -// 08. Dropdown -// 09. Dropdown Buttons -// 10. Flex Video -// 11. Forms -// 12. Icon Bar -// 13. Inline Lists -// 14. Joyride -// 15. Keystrokes -// 16. Labels -// 17. Magellan -// 18. Off-canvas -// 19. Orbit -// 20. Pagination -// 21. Panels -// 22. Pricing Tables -// 23. Progress Bar -// 24. Range Slider -// 25. Reveal -// 26. Side Nav -// 27. Split Buttons -// 28. Sub Nav -// 29. Switch -// 30. Tables -// 31. Tabs -// 32. Thumbnails -// 33. Tooltips -// 34. Top Bar -// 36. Visibility Classes - -// a. Base -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// This is the default html and body font-size for the base rem value. -// $rem-base: 16px; - -// Allows the use of rem-calc() or lower-bound() in your settings -@import "_functions"; - -// 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: $font-size-small; - -// The $base-font-size is 100% while $base-line-height is 150% -$base-line-height: $line-height; - -// We use this to control whether or not CSS classes come through in the gem files. -$include-html-classes: true; -// $include-print-styles: true; -$include-html-global-classes: $include-html-classes; - -// b. Grid -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-grid-classes: $include-html-classes; -// $include-xl-html-grid-classes: false; - -$row-width: 100%; -// $total-columns: 12; -// $column-gutter: rem-calc(30); - -// c. Global -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// We use these to define default font stacks -$font-family-sans-serif: 'Source Sans Pro', Helvetica, sans-serif; -$font-family-serif: 'Source Sans Pro', Helvetica, sans-serif; -$font-family-monospace: 'Source Sans Pro', Helvetica, sans-serif; - -// We use these to define default font weights -$font-weight-normal: normal !default; -// $font-weight-bold: bold !default; - -// $white : #FFFFFF; -// $ghost : #FAFAFA; -// $snow : #F9F9F9; -// $vapor : #F6F6F6; -// $white-smoke : #F5F5F5; -// $silver : #EFEFEF; -// $smoke : #EEEEEE; -// $gainsboro : #DDDDDD; -// $iron : #CCCCCC; -// $base : #AAAAAA; -// $aluminum : #999999; -// $jumbo : #888888; -// $monsoon : #777777; -// $steel : #666666; -// $charcoal : #555555; -// $tuatara : #444444; -// $oil : #333333; -// $jet : #222222; -// $black : #000000; - -// We use these as default colors throughout -// $primary-color: #008CBA; -// $secondary-color: #e7e7e7; -// $alert-color: #f04124; -// $success-color: #43AC6A; -// $warning-color: #f08a24; -// $info-color: #a0d3e8; - -// We use these to control various global styles -// $body-bg: $white; -$body-font-color: $color-text; -// $body-font-family: $font-family-sans-serif; -// $body-font-weight: $font-weight-normal; -// $body-font-style: normal; - -// We use this to control font-smoothing -// $font-smoothing: antialiased; - -// We use these to control text direction settings -// $text-direction: ltr; -// $opposite-direction: right; -// $default-float: left; -// $last-child-float: $opposite-direction; - -// We use these to make sure border radius matches unless we want it different. -// $global-radius: 3px; -// $global-rounded: 1000px; - -// We use these to control inset shadow shiny edges and depressions. -// $shiny-edge-size: 0 1px 0; -// $shiny-edge-color: rgba($white, .5); -// $shiny-edge-active-color: rgba($black, .2); - -// d. Media Query Ranges -// - - - - - - - - - - - - - - - - - - - - - - - - - - -$breakpoint-sm: 64em; - -$small-range: (0em, 50em); -$medium-range: (50.063em, $breakpoint-sm); -$large-range: (64.063em, 90em); -$xlarge-range: (90.063em, 120em); -$xxlarge-range: (120.063em, 99999999em); - -$screen: "only screen"; - -$landscape: "#{$screen} and (orientation: landscape)"; -$portrait: "#{$screen} and (orientation: portrait)"; - -$small-up: $screen; -$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; - -$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"; -$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"; - -$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"; -$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"; - -$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"; -$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"; - -$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; -$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"; - -// Legacy -$small: $medium-up; -$medium: $medium-up; -$large: $large-up; - -// We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet -// $cursor-crosshair-value: crosshair; -// $cursor-default-value: default; -// $cursor-pointer-value: pointer; -// $cursor-help-value: help; -// $cursor-text-value: text; - -// e. Typography -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-type-classes: $include-html-classes; - -// We use these to control header font styles -// $header-font-family: $body-font-family; -// $header-font-weight: $font-weight-normal; -// $header-font-style: normal; -// $header-font-color: $jet; -// $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) !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; -// $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: $oil; -// $code-font-family: $font-family-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($primary-color, $lightness: -14%); - -// We use these to style the
element -// $hr-border-width: 1px; -// $hr-border-style: solid; -// $hr-border-color: $gainsboro; -// $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 $gainsboro; -// $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 $gainsboro; - -// We use these to control padding and margin -// $microformat-padding: rem-calc(10 12); -// $microformat-margin: rem-calc(0 0 20 0); - -// We use these to control the border styles -// $microformat-border-width: 1px; -// $microformat-border-style: solid; -// $microformat-border-color: $gainsboro; - -// We use these to control full name font styles -// $microformat-fullname-font-weight: $font-weight-bold; -// $microformat-fullname-font-size: rem-calc(15); - -// We use this to control the summary font styles -// $microformat-summary-font-weight: $font-weight-bold; - -// We use this to control abbr padding -// $microformat-abbr-padding: rem-calc(0 1); - -// We use this to control abbr font styles -// $microformat-abbr-font-weight: $font-weight-bold; -// $microformat-abbr-font-decoration: none; - -// 01. Accordion -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-accordion-classes: $include-html-classes; - -// $accordion-navigation-padding: rem-calc(16); -// $accordion-navigation-bg-color: $silver; -// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%); -// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%); -// $accordion-navigation-font-color: $jet; -// $accordion-navigation-font-size: rem-calc(16); -// $accordion-navigation-font-family: $body-font-family; - -// $accordion-content-padding: ($column-gutter/2); -// $accordion-content-active-bg-color: $white; - -// 02. Alert Boxes -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-alert-classes: $include-html-classes; - -// We use this to control alert padding. -// $alert-padding-top: rem-calc(14); -// $alert-padding-default-float: $alert-padding-top; -// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10); -// $alert-padding-bottom: $alert-padding-top; - -// We use these to control text style. -// $alert-font-weight: $font-weight-normal; -// $alert-font-size: rem-calc(13); -// $alert-font-color: $white; -// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%); - -// We use this for close hover effect. -// $alert-function-factor: -14%; - -// We use these to control border styles. -// $alert-border-style: solid; -// $alert-border-width: 1px; -// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor); -// $alert-bottom-margin: rem-calc(20); - -// We use these to style the close buttons -// $alert-close-color: $oil; -// $alert-close-top: 50%; -// $alert-close-position: rem-calc(4); -// $alert-close-font-size: rem-calc(22); -// $alert-close-opacity: 0.3; -// $alert-close-opacity-hover: 0.5; -// $alert-close-padding: 9px 6px 4px; - -// We use this to control border radius -// $alert-radius: $global-radius; - -// We use this to control transition effects -// $alert-transition-speed: 300ms; -// $alert-transition-ease: ease-out; - -// 03. Block Grid -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-block-grid-classes: $include-html-classes; -// $include-xl-html-block-grid-classes: false; - -// We use this to control the maximum number of block grid elements per row -// $block-grid-elements: 12; -// $block-grid-default-spacing: rem-calc(20); -// $align-block-grid-to-grid: false; - -// Enables media queries for block-grid classes. Set to false if writing semantic HTML. -// $block-grid-media-queries: true; - -// 04. Breadcrumbs -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-nav-classes: $include-html-classes; - -// We use this to set the background color for the breadcrumb container. -// $crumb-bg: scale-color($secondary-color, $lightness: 55%); - -// We use these to set the padding around the breadcrumbs. -// $crumb-padding: rem-calc(9 14 9); -// $crumb-side-padding: rem-calc(12); - -// We use these to control border styles. -// $crumb-function-factor: -10%; -// $crumb-border-size: 1px; -// $crumb-border-style: solid; -// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor); -// $crumb-radius: $global-radius; - -// We use these to set various text styles for breadcrumbs. -// $crumb-font-size: rem-calc(11); -// $crumb-font-color: $primary-color; -// $crumb-font-color-current: $oil; -// $crumb-font-color-unavailable: $aluminum; -// $crumb-font-transform: uppercase; -// $crumb-link-decor: underline; - -// We use these to control the slash between breadcrumbs -// $crumb-slash-color: $base; -// $crumb-slash: "/"; - -// 05. Buttons -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-button-classes: $include-html-classes; - -// We use these to build padding for buttons. -// $button-tny: rem-calc(10); -// $button-sml: rem-calc(14); -// $button-med: rem-calc(16); -// $button-lrg: rem-calc(18); - -// We use this to control the display property. -// $button-display: inline-block; -// $button-margin-bottom: rem-calc(20); - -// We use these to control button text styles. -// $button-font-family: $body-font-family; -// $button-font-color: $white; -// $button-font-color-alt: $oil; -// $button-font-tny: rem-calc(11); -// $button-font-sml: rem-calc(13); -// $button-font-med: rem-calc(16); -// $button-font-lrg: rem-calc(20); -// $button-font-weight: $font-weight-normal; -// $button-font-align: center; - -// We use these to control various hover effects. -// $button-function-factor: -20%; - -// We use these to control button border and hover styles. -// $button-border-width: 0px; -// $button-border-style: solid; -// $button-bg-color: $primary-color; -// $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor); -// $button-border-color: $button-bg-hover; -// $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor); -// $secondary-button-border-color: $secondary-button-bg-hover; -// $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor); -// $success-button-border-color: $success-button-bg-hover; -// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor); -// $alert-button-border-color: $alert-button-bg-hover; - -// We use this to set the default radius used throughout the core. -// $button-radius: $global-radius; -// $button-round: $global-rounded; - -// We use this to set default opacity and cursor for disabled buttons. -// $button-disabled-opacity: 0.7; -// $button-disabled-cursor: $cursor-default-value; - -// 06. Button Groups -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-button-classes: $include-html-classes; - -// Sets the margin for the right side by default, and the left margin if right-to-left direction is used -// $button-bar-margin-opposite: rem-calc(10); -// $button-group-border-width: 1px; - -// 07. Clearing -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-clearing-classes: $include-html-classes; - -// We use these to set the background colors for parts of Clearing. -// $clearing-bg: $oil; -// $clearing-caption-bg: $clearing-bg; -// $clearing-carousel-bg: rgba(51,51,51,0.8); -// $clearing-img-bg: $clearing-bg; - -// We use these to style the close button -// $clearing-close-color: $iron; -// $clearing-close-size: 30px; - -// We use these to style the arrows -// $clearing-arrow-size: 12px; -// $clearing-arrow-color: $clearing-close-color; - -// We use these to style captions -// $clearing-caption-font-color: $iron; -// $clearing-caption-font-size: 0.875em; -// $clearing-caption-padding: 10px 30px 20px; - -// We use these to make the image and carousel height and style -// $clearing-active-img-height: 85%; -// $clearing-carousel-height: 120px; -// $clearing-carousel-thumb-width: 120px; -// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255); - -// 08. Dropdown -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-dropdown-classes: $include-html-classes; - -// We use these to controls height and width styles. -// $f-dropdown-max-width: 200px; -// $f-dropdown-height: auto; -// $f-dropdown-max-height: none; - -// Used for bottom position -// $f-dropdown-margin-top: 2px; - -// Used for right position -// $f-dropdown-margin-left: $f-dropdown-margin-top; - -// Used for left position -// $f-dropdown-margin-right: $f-dropdown-margin-top; - -// Used for top position -// $f-dropdown-margin-bottom: $f-dropdown-margin-top; - -// We use this to control the background color -// $f-dropdown-bg: $white; - -// We use this to set the border styles for dropdowns. -// $f-dropdown-border-style: solid; -// $f-dropdown-border-width: 1px; -// $f-dropdown-border-color: scale-color($white, $lightness: -20%); - -// We use these to style the triangle pip. -// $f-dropdown-triangle-size: 6px; -// $f-dropdown-triangle-color: $white; -// $f-dropdown-triangle-side-offset: 10px; - -// We use these to control styles for the list elements. -// $f-dropdown-list-style: none; -// $f-dropdown-font-color: $charcoal; -// $f-dropdown-font-size: rem-calc(14); -// $f-dropdown-list-padding: rem-calc(5, 10); -// $f-dropdown-line-height: rem-calc(18); -// $f-dropdown-list-hover-bg: $smoke; -// $dropdown-mobile-default-float: 0; - -// We use this to control the styles for when the dropdown has custom content. -// $f-dropdown-content-padding: rem-calc(20); - -// Default radius for dropdown. -// $f-dropdown-radius: $global-radius; - - -// 09. Dropdown Buttons -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-button-classes: $include-html-classes; - -// We use these to set the color of the pip in dropdown buttons -// $dropdown-button-pip-color: $white; -// $dropdown-button-pip-color-alt: $oil; - -// $button-pip-tny: rem-calc(6); -// $button-pip-sml: rem-calc(7); -// $button-pip-med: rem-calc(9); -// $button-pip-lrg: rem-calc(11); - -// We use these to style tiny dropdown buttons -// $dropdown-button-padding-tny: $button-pip-tny * 7; -// $dropdown-button-pip-size-tny: $button-pip-tny; -// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3; -// $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1); - -// We use these to style small dropdown buttons -// $dropdown-button-padding-sml: $button-pip-sml * 7; -// $dropdown-button-pip-size-sml: $button-pip-sml; -// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3; -// $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1); - -// We use these to style medium dropdown buttons -// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3); -// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3); -// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5; -// $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2); - -// We use these to style large dropdown buttons -// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3); -// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); -// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5; -// $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3); - -// 10. Flex Video -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-media-classes: $include-html-classes; - -// We use these to control video container padding and margins -// $flex-video-padding-top: rem-calc(25); -// $flex-video-padding-bottom: 67.5%; -// $flex-video-margin-bottom: rem-calc(16); - -// We use this to control widescreen bottom padding -// $flex-video-widescreen-padding-bottom: 56.34%; - -// 11. Forms -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-form-classes: $include-html-classes; - -// We use this to set the base for lots of form spacing and positioning styles -// $form-spacing: rem-calc(16); - -// We use these to style the labels in different ways -// $form-label-pointer: pointer; -// $form-label-font-size: rem-calc(14); -// $form-label-font-weight: $font-weight-normal; -// $form-label-line-height: 1.5; -// $form-label-font-color: scale-color($black, $lightness: 30%); -// $form-label-small-transform: capitalize; -// $form-label-bottom-margin: 0; -// $input-font-family: inherit; -// $input-font-color: rgba(0,0,0,0.75); -// $input-font-size: rem-calc(14); -// $input-bg-color: $white; -// $input-focus-bg-color: scale-color($white, $lightness: -2%); -// $input-border-color: scale-color($white, $lightness: -20%); -// $input-focus-border-color: scale-color($white, $lightness: -40%); -// $input-border-style: solid; -// $input-border-width: 1px; -// $input-border-radius: $global-radius; -// $input-disabled-bg: $gainsboro; -// $input-disabled-cursor: $cursor-default-value; -// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); - -// We use these to style the fieldset border and spacing. -// $fieldset-border-style: solid; -// $fieldset-border-width: 1px; -// $fieldset-border-color: $gainsboro; -// $fieldset-padding: rem-calc(20); -// $fieldset-margin: rem-calc(18 0); - -// We use these to style the legends when you use them -// $legend-bg: $white; -// $legend-font-weight: $font-weight-bold; -// $legend-padding: rem-calc(0 3); - -// We use these to style the prefix and postfix input elements -// $input-prefix-bg: scale-color($white, $lightness: -5%); -// $input-prefix-border-color: scale-color($white, $lightness: -20%); -// $input-prefix-border-size: 1px; -// $input-prefix-border-type: solid; -// $input-prefix-overflow: hidden; -// $input-prefix-font-color: $oil; -// $input-prefix-font-color-alt: $white; - -// We use this setting to turn on/off HTML5 number spinners (the up/down arrows) -// $input-number-spinners: true; - -// We use these to style the error states for inputs and labels -// $input-error-message-padding: rem-calc(6 9 9); -// $input-error-message-top: -1px; -// $input-error-message-font-size: rem-calc(12); -// $input-error-message-font-weight: $font-weight-normal; -// $input-error-message-font-style: italic; -// $input-error-message-font-color: $white; -// $input-error-message-bg-color: $alert-color; -// $input-error-message-font-color-alt: $oil; - -// We use this to style the glowing effect of inputs when focused -// $input-include-glowing-effect: true; -// $glowing-effect-fade-time: 0.45s; -// $glowing-effect-color: $input-focus-border-color; - -// Select variables -// $select-bg-color: $ghost; -// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%); - -// 12. Icon Bar -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// We use these to style the icon-bar and items -// $include-html-icon-bar-classes: $include-html-classes; -// $icon-bar-bg: $oil; -// $icon-bar-font-color: $white; -// $icon-bar-font-color-hover: $icon-bar-font-color; -// $icon-bar-font-size: 1rem; -// $icon-bar-hover-color: $primary-color; -// $icon-bar-icon-color: $white; -// $icon-bar-icon-color-hover: $icon-bar-icon-color; -// $icon-bar-icon-size: 1.875rem; -// $icon-bar-image-width: 1.875rem; -// $icon-bar-image-height: 1.875rem; -// $icon-bar-active-color: $primary-color; -// $icon-bar-item-padding: 1.25rem; - -// 13. Inline Lists -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-inline-list-classes: $include-html-classes; - -// We use this to control the margins and padding of the inline list. -// $inline-list-top-margin: 0; -// $inline-list-opposite-margin: 0; -// $inline-list-bottom-margin: rem-calc(17); -// $inline-list-default-float-margin: rem-calc(-22); -// $inline-list-default-float-list-margin: rem-calc(22); - -// $inline-list-padding: 0; - -// We use this to control the overflow of the inline list. -// $inline-list-overflow: hidden; - -// We use this to control the list items -// $inline-list-display: block; - -// We use this to control any elements within list items -// $inline-list-children-display: block; - -// 14. Joyride -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-joyride-classes: $include-html-classes; - -// Controlling default Joyride styles -// $joyride-tip-bg: $oil; -// $joyride-tip-default-width: 300px; -// $joyride-tip-padding: rem-calc(18 20 24); -// $joyride-tip-border: solid 1px $charcoal; -// $joyride-tip-radius: 4px; -// $joyride-tip-position-offset: 22px; - -// Here, we're setting the tip font styles -// $joyride-tip-font-color: $white; -// $joyride-tip-font-size: rem-calc(14); -// $joyride-tip-header-weight: $font-weight-bold; - -// This changes the nub size -// $joyride-tip-nub-size: 10px; - -// This adjusts the styles for the timer when its enabled -// $joyride-tip-timer-width: 50px; -// $joyride-tip-timer-height: 3px; -// $joyride-tip-timer-color: $steel; - -// This changes up the styles for the close button -// $joyride-tip-close-color: $monsoon; -// $joyride-tip-close-size: 24px; -// $joyride-tip-close-weight: $font-weight-normal; - -// When Joyride is filling the screen, we use this style for the bg -// $joyride-screenfill: rgba(0,0,0,0.5); - -// 15. Keystrokes -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-keystroke-classes: $include-html-classes; - -// We use these to control text styles. -// $keystroke-font: "Consolas", "Menlo", "Courier", monospace; -// $keystroke-font-size: inherit; -// $keystroke-font-color: $jet; -// $keystroke-font-color-alt: $white; -// $keystroke-function-factor: -7%; - -// We use this to control keystroke padding. -// $keystroke-padding: rem-calc(2 4 0); - -// We use these to control background and border styles. -// $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor); -// $keystroke-border-style: solid; -// $keystroke-border-width: 1px; -// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor); -// $keystroke-radius: $global-radius; - -// 16. Labels -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-label-classes: $include-html-classes; - -// We use these to style the labels -// $label-padding: rem-calc(4 8 4); -// $label-radius: $global-radius; - -// We use these to style the label text -// $label-font-sizing: rem-calc(11); -// $label-font-weight: $font-weight-normal; -// $label-font-color: $oil; -// $label-font-color-alt: $white; -// $label-font-family: $body-font-family; - -// 17. Magellan -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-magellan-classes: $include-html-classes; - -// $magellan-bg: $white; -// $magellan-padding: 0 !important; - -// 18. Off-canvas -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-off-canvas-classes: $include-html-classes; - -// $tabbar-bg: $oil; -// $tabbar-height: rem-calc(45); -// $tabbar-icon-width: $tabbar-height; -// $tabbar-line-height: $tabbar-height; -// $tabbar-color: $white; -// $tabbar-middle-padding: 0 rem-calc(10); - -// Off Canvas Divider Styles -// $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%); -// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%); - -// Off Canvas Tab Bar Headers -// $tabbar-header-color: $white; -// $tabbar-header-weight: $font-weight-bold; -// $tabbar-header-line-height: $tabbar-height; -// $tabbar-header-margin: 0; - -// Off Canvas Menu Variables -// $off-canvas-width: rem-calc(250); -// $off-canvas-bg: $oil; -// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%); - -// Off Canvas Menu List Variables -// $off-canvas-label-padding: 0.3rem rem-calc(15); -// $off-canvas-label-color: $aluminum; -// $off-canvas-label-text-transform: uppercase; -// $off-canvas-label-font-size: rem-calc(12); -// $off-canvas-label-font-weight: $font-weight-bold; -// $off-canvas-label-bg: $tuatara; -// $off-canvas-label-border-top: 1px solid scale-color($tuatara, $lightness: 14%); -// $off-canvas-label-border-bottom: none; -// $off-canvas-label-margin:0; -// $off-canvas-link-padding: rem-calc(10, 15); -// $off-canvas-link-color: rgba($white, 0.7); -// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%); -// $off-canvas-back-bg: $tuatara; -// $off-canvas-back-border-top: $off-canvas-label-border-top; -// $off-canvas-back-border-bottom: $off-canvas-label-border-bottom; -// $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%); -// $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%); -// $off-canvas-back-hover-border-bottom: none; - -// Off Canvas Menu Icon Variables -// $tabbar-menu-icon-color: $white; -// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%); - -// $tabbar-menu-icon-text-indent: rem-calc(35); -// $tabbar-menu-icon-width: $tabbar-height; -// $tabbar-menu-icon-height: $tabbar-height; -// $tabbar-menu-icon-padding: 0; - -// $tabbar-hamburger-icon-width: rem-calc(16); -// $tabbar-hamburger-icon-left: false; -// $tabbar-hamburger-icon-top: false; -// $tabbar-hamburger-icon-thickness: 1px; -// $tabbar-hamburger-icon-gap: 6px; - -// Off Canvas Back-Link Overlay -// $off-canvas-overlay-transition: background 300ms ease; -// $off-canvas-overlay-cursor: pointer; -// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5); -// $off-canvas-overlay-background: rgba($white, 0.2); -// $off-canvas-overlay-background-hover: rgba($white, 0.05); - -// Transition Variables -// $menu-slide: "transform 500ms ease"; - -// 19. Orbit -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-orbit-classes: $include-html-classes; - -// We use these to control the caption styles -// $orbit-container-bg: none; -// $orbit-caption-bg: rgba(51,51,51, 0.8); -// $orbit-caption-font-color: $white; -// $orbit-caption-font-size: rem-calc(14); -// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under" -// $orbit-caption-padding: rem-calc(10 14); -// $orbit-caption-height: auto; - -// We use these to control the left/right nav styles -// $orbit-nav-bg: transparent; -// $orbit-nav-bg-hover: rgba(0,0,0,0.3); -// $orbit-nav-arrow-color: $white; -// $orbit-nav-arrow-color-hover: $white; - -// We use these to control the timer styles -// $orbit-timer-bg: rgba(255,255,255,0.3); -// $orbit-timer-show-progress-bar: true; - -// We use these to control the bullet nav styles -// $orbit-bullet-nav-color: $iron; -// $orbit-bullet-nav-color-active: $aluminum; -// $orbit-bullet-radius: rem-calc(9); - -// We use these to controls the style of slide numbers -// $orbit-slide-number-bg: rgba(0,0,0,0); -// $orbit-slide-number-font-color: $white; -// $orbit-slide-number-padding: rem-calc(5); - -// Hide controls on small -// $orbit-nav-hide-for-small: true; -// $orbit-bullet-hide-for-small: true; -// $orbit-timer-hide-for-small: true; - -// Graceful Loading Wrapper and preloader -// $wrapper-class: "slideshow-wrapper"; -// $preloader-class: "preloader"; - -// 20. Pagination -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-pagination-classes: $include-html-classes; - -// We use these to control the pagination container -// $pagination-height: rem-calc(24); -// $pagination-margin: rem-calc(-5); - -// We use these to set the list-item properties -// $pagination-li-float: $default-float; -// $pagination-li-height: rem-calc(24); -// $pagination-li-font-color: $jet; -// $pagination-li-font-size: rem-calc(14); -// $pagination-li-margin: rem-calc(5); - -// We use these for the pagination anchor links -// $pagination-link-pad: rem-calc(1 10 1); -// $pagination-link-font-color: $aluminum; -// $pagination-link-active-bg: scale-color($white, $lightness: -10%); - -// We use these for disabled anchor links -// $pagination-link-unavailable-cursor: default; -// $pagination-link-unavailable-font-color: $aluminum; -// $pagination-link-unavailable-bg-active: transparent; - -// We use these for currently selected anchor links -// $pagination-link-current-background: $primary-color; -// $pagination-link-current-font-color: $white; -// $pagination-link-current-font-weight: $font-weight-bold; -// $pagination-link-current-cursor: default; -// $pagination-link-current-active-bg: $primary-color; - -// 21. Panels -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-panel-classes: $include-html-classes; - -// We use these to control the background and border styles -// $panel-bg: scale-color($white, $lightness: -5%); -// $panel-border-style: solid; -// $panel-border-size: 1px; - -// We use this % to control how much we darken things on hover -// $panel-function-factor: -11%; -// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor); - -// We use these to set default inner padding and bottom margin -// $panel-margin-bottom: rem-calc(20); -// $panel-padding: rem-calc(20); - -// We use these to set default font colors -// $panel-font-color: $oil; -// $panel-font-color-alt: $white; - -// $panel-header-adjust: true; -// $callout-panel-link-color: $primary-color; - -// 22. Pricing Tables -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-pricing-classes: $include-html-classes; - -// We use this to control the border color -// $price-table-border: solid 1px $gainsboro; - -// We use this to control the bottom margin of the pricing table -// $price-table-margin-bottom: rem-calc(20); - -// We use these to control the title styles -// $price-title-bg: $oil; -// $price-title-padding: rem-calc(15 20); -// $price-title-align: center; -// $price-title-color: $smoke; -// $price-title-weight: $font-weight-normal; -// $price-title-size: rem-calc(16); -// $price-title-font-family: $body-font-family; - -// We use these to control the price styles -// $price-money-bg: $vapor; -// $price-money-padding: rem-calc(15 20); -// $price-money-align: center; -// $price-money-color: $oil; -// $price-money-weight: $font-weight-normal; -// $price-money-size: rem-calc(32); -// $price-money-font-family: $body-font-family; - -// We use these to control the description styles -// $price-bg: $white; -// $price-desc-color: $monsoon; -// $price-desc-padding: rem-calc(15); -// $price-desc-align: center; -// $price-desc-font-size: rem-calc(12); -// $price-desc-weight: $font-weight-normal; -// $price-desc-line-height: 1.4; -// $price-desc-bottom-border: dotted 1px $gainsboro; - -// We use these to control the list item styles -// $price-item-color: $oil; -// $price-item-padding: rem-calc(15); -// $price-item-align: center; -// $price-item-font-size: rem-calc(14); -// $price-item-weight: $font-weight-normal; -// $price-item-bottom-border: dotted 1px $gainsboro; - -// We use these to control the CTA area styles -// $price-cta-bg: $white; -// $price-cta-align: center; -// $price-cta-padding: rem-calc(20 20 0); - -// 23. Progress Bar -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-media-classes: $include-html-classes; - -// We use this to set the progress bar height -// $progress-bar-height: rem-calc(25); -// $progress-bar-color: $vapor ; - -// We use these to control the border styles -// $progress-bar-border-color: scale-color($white, $lightness: 20%); -// $progress-bar-border-size: 1px; -// $progress-bar-border-style: solid; -// $progress-bar-border-radius: $global-radius; - -// We use these to control the margin & padding -// $progress-bar-pad: rem-calc(2); -// $progress-bar-margin-bottom: rem-calc(10); - -// We use these to set the meter colors -// $progress-meter-color: $primary-color; -// $progress-meter-secondary-color: $secondary-color; -// $progress-meter-success-color: $success-color; -// $progress-meter-alert-color: $alert-color; - -// 24. Range Slider -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-range-slider-classes: $include-html-classes; - -// These variables define the slider bar styles -// $range-slider-bar-width: 100%; -// $range-slider-bar-height: rem-calc(16); - -// $range-slider-bar-border-width: 1px; -// $range-slider-bar-border-style: solid; -// $range-slider-bar-border-color: $gainsboro; -// $range-slider-radius: $global-radius; -// $range-slider-round: $global-rounded; -// $range-slider-bar-bg-color: $ghost; - -// Vertical bar styles -// $range-slider-vertical-bar-width: rem-calc(16); -// $range-slider-vertical-bar-height: rem-calc(200); - -// These variables define the slider handle styles -// $range-slider-handle-width: rem-calc(32); -// $range-slider-handle-height: rem-calc(22); -// $range-slider-handle-position-top: rem-calc(-5); -// $range-slider-handle-bg-color: $primary-color; -// $range-slider-handle-border-width: 1px; -// $range-slider-handle-border-style: solid; -// $range-slider-handle-border-color: none; -// $range-slider-handle-radius: $global-radius; -// $range-slider-handle-round: $global-rounded; -// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%); -// $range-slider-handle-cursor: pointer; - -// 25. Reveal -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-reveal-classes: $include-html-classes; - -// We use these to control the style of the reveal overlay. -// $reveal-overlay-bg: rgba($black, .45); -// $reveal-overlay-bg-old: $black; - -// We use these to control the style of the modal itself. -// $reveal-modal-bg: $white; -// $reveal-position-top: rem-calc(100); -// $reveal-default-width: 80%; -// $reveal-max-width: $row-width; -// $reveal-modal-padding: rem-calc(20); -// $reveal-box-shadow: 0 0 10px rgba($black,.4); - -// We use these to style the reveal close button -// $reveal-close-font-size: rem-calc(40); -// $reveal-close-top: rem-calc(8); -// $reveal-close-side: rem-calc(11); -// $reveal-close-color: $base; -// $reveal-close-weight: $font-weight-bold; - -// We use this to set the default radius used throughout the core. -// $reveal-radius: $global-radius; -// $reveal-round: $global-rounded; - -// We use these to control the modal border -// $reveal-border-style: solid; -// $reveal-border-width: 1px; -// $reveal-border-color: $steel; - -// $reveal-modal-class: "reveal-modal"; -// $close-reveal-modal-class: "close-reveal-modal"; - -// 26. Side Nav -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-nav-classes: $include-html-classes; - -// We use this to control padding. -// $side-nav-padding: rem-calc(14 0); - -// We use these to control list styles. -// $side-nav-list-type: none; -// $side-nav-list-position: inside; -// $side-nav-list-margin: rem-calc(0 0 7 0); - -// We use these to control link styles. -// $side-nav-link-color: $primary-color; -// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%); -// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%); -// $side-nav-link-bg-hover: hsla(0, 0, 0, 0.025); -// $side-nav-link-margin: 0; -// $side-nav-link-padding: rem-calc(7 14); -// $side-nav-font-size: rem-calc(14); -// $side-nav-font-weight: $font-weight-normal; -// $side-nav-font-weight-active: $side-nav-font-weight; -// $side-nav-font-family: $body-font-family; -// $side-nav-font-family-active: $side-nav-font-family; - -// We use these to control heading styles. -// $side-nav-heading-color: $side-nav-link-color; -// $side-nav-heading-font-size: $side-nav-font-size; -// $side-nav-heading-font-weight: bold; -// $side-nav-heading-text-transform: uppercase; - -// We use these to control border styles -// $side-nav-divider-size: 1px; -// $side-nav-divider-style: solid; -// $side-nav-divider-color: scale-color($white, $lightness: 10%); - -// 27. Split Buttons -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-button-classes: $include-html-classes; - -// We use these to control different shared styles for Split Buttons -// $split-button-function-factor: 10%; -// $split-button-pip-color: $white; -// $split-button-pip-color-alt: $oil; -// $split-button-active-bg-tint: rgba(0,0,0,0.1); - -// We use these to control tiny split buttons -// $split-button-padding-tny: $button-pip-tny * 10; -// $split-button-span-width-tny: $button-pip-tny * 6; -// $split-button-pip-size-tny: $button-pip-tny; -// $split-button-pip-top-tny: $button-pip-tny * 2; -// $split-button-pip-default-float-tny: rem-calc(-6); - -// We use these to control small split buttons -// $split-button-padding-sml: $button-pip-sml * 10; -// $split-button-span-width-sml: $button-pip-sml * 6; -// $split-button-pip-size-sml: $button-pip-sml; -// $split-button-pip-top-sml: $button-pip-sml * 1.5; -// $split-button-pip-default-float-sml: rem-calc(-6); - -// We use these to control medium split buttons -// $split-button-padding-med: $button-pip-med * 9; -// $split-button-span-width-med: $button-pip-med * 5.5; -// $split-button-pip-size-med: $button-pip-med - rem-calc(3); -// $split-button-pip-top-med: $button-pip-med * 1.5; -// $split-button-pip-default-float-med: rem-calc(-6); - -// We use these to control large split buttons -// $split-button-padding-lrg: $button-pip-lrg * 8; -// $split-button-span-width-lrg: $button-pip-lrg * 5; -// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); -// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5); -// $split-button-pip-default-float-lrg: rem-calc(-6); - -// 28. Sub Nav -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-nav-classes: $include-html-classes; - -// We use these to control margin and padding -// $sub-nav-list-margin: rem-calc(-4 0 18); -// $sub-nav-list-padding-top: rem-calc(4); - -// We use this to control the definition -// $sub-nav-font-family: $body-font-family; -// $sub-nav-font-size: rem-calc(14); -// $sub-nav-font-color: $aluminum; -// $sub-nav-font-weight: $font-weight-normal; -// $sub-nav-text-decoration: none; -// $sub-nav-padding: rem-calc(3 16); -// $sub-nav-border-radius: 3px; -// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%); - -// We use these to control the active item styles -// $sub-nav-active-font-weight: $font-weight-normal; -// $sub-nav-active-bg: $primary-color; -// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%); -// $sub-nav-active-color: $white; -// $sub-nav-active-padding: $sub-nav-padding; -// $sub-nav-active-cursor: default; - -// $sub-nav-item-divider: ""; -// $sub-nav-item-divider-margin: rem-calc(12); - -// 29. Switch -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-form-classes: $include-html-classes; - -// Controlling border styles and background colors for the switch container -// $switch-border-color: scale-color($white, $lightness: -20%); -// $switch-border-style: solid; -// $switch-border-width: 1px; -// $switch-bg: $white; - -// We use these to control the switch heights for our default classes -// $switch-height-tny: rem-calc(22); -// $switch-height-sml: rem-calc(28); -// $switch-height-med: rem-calc(36); -// $switch-height-lrg: rem-calc(44); -// $switch-bottom-margin: rem-calc(20); - -// We use these to control default font sizes for our classes. -// $switch-font-size-tny: 11px; -// $switch-font-size-sml: 12px; -// $switch-font-size-med: 14px; -// $switch-font-size-lrg: 17px; -// $switch-label-side-padding: 6px; - -// We use these to style the switch-paddle -// $switch-paddle-bg: $white; -// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%); -// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%); -// $switch-paddle-border-width: 1px; -// $switch-paddle-border-style: solid; -// $switch-paddle-transition-speed: .1s; -// $switch-paddle-transition-ease: ease-out; -// $switch-positive-color: scale-color($success-color, $lightness: 94%); -// $switch-negative-color: $white-smoke; - -// Outline Style for tabbing through switches -// $switch-label-outline: 1px dotted $jumbo; - -// 30. Tables -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-table-classes: $include-html-classes; - -// These control the background color for the table and even rows -// $table-bg: $white; -// $table-even-row-bg: $snow; - -// These control the table cell border style -// $table-border-style: solid; -// $table-border-size: 1px; -// $table-border-color: $gainsboro; - -// These control the table head styles -// $table-head-bg: $white-smoke ; -// $table-head-font-size: rem-calc(14); -// $table-head-font-color: $jet; -// $table-head-font-weight: $font-weight-bold; -// $table-head-padding: rem-calc(8 10 10); - -// These control the row padding and font styles -// $table-row-padding: rem-calc(9 10); -// $table-row-font-size: rem-calc(14); -// $table-row-font-color: $jet; -// $table-line-height: rem-calc(18); - -// These are for controlling the layout, display and margin of tables -// $table-layout: auto; -// $table-display: table-cell; -// $table-margin-bottom: rem-calc(20); - -// 31. Tabs -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-tabs-classes: $include-html-classes; - -// $tabs-navigation-padding: rem-calc(16); -// $tabs-navigation-bg-color: $silver ; -// $tabs-navigation-active-bg-color: $white; -// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%); -// $tabs-navigation-font-color: $jet; -// $tabs-navigation-active-font-color: $tabs-navigation-font-color; -// $tabs-navigation-font-size: rem-calc(16); -// $tabs-navigation-font-family: $body-font-family; - -// $tabs-content-margin-bottom: rem-calc(24); -// $tabs-content-padding: ($column-gutter/2); - -// $tabs-vertical-navigation-margin-bottom: 1.25rem; - -// 32. Thumbnails -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-media-classes: $include-html-classes; - -// We use these to control border styles -// $thumb-border-style: solid; -// $thumb-border-width: 4px; -// $thumb-border-color: $white; -// $thumb-box-shadow: 0 0 0 1px rgba($black,.2); -// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5); - -// Radius and transition speed for thumbs -// $thumb-radius: $global-radius; -// $thumb-transition-speed: 200ms; - -// 33. Tooltips -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-tooltip-classes: $include-html-classes; - -// $has-tip-border-bottom: dotted 1px $iron; -// $has-tip-font-weight: $font-weight-bold; -// $has-tip-font-color: $oil; -// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%); -// $has-tip-font-color-hover: $primary-color; -// $has-tip-cursor-type: help; - -// $tooltip-padding: rem-calc(12); -// $tooltip-bg: $oil; -// $tooltip-font-size: rem-calc(14); -// $tooltip-font-weight: $font-weight-normal; -// $tooltip-font-color: $white; -// $tooltip-line-height: 1.3; -// $tooltip-close-font-size: rem-calc(10); -// $tooltip-close-font-weight: $font-weight-normal; -// $tooltip-close-font-color: $monsoon; -// $tooltip-font-size-sml: rem-calc(14); -// $tooltip-radius: $global-radius; -// $tooltip-rounded: $global-rounded; -// $tooltip-pip-size: 5px; -// $tooltip-max-width: 300px; - -// 34. Top Bar -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-top-bar-classes: $include-html-classes; - -// Background color for the top bar -// $topbar-bg-color: $oil; -// $topbar-bg: $topbar-bg-color; - -// Height and margin -// $topbar-height: rem-calc(45); -// $topbar-margin-bottom: 0; - -// Controlling the styles for the title in the top bar -// $topbar-title-weight: $font-weight-normal; -// $topbar-title-font-size: rem-calc(17); - -// Style the top bar dropdown elements -// $topbar-dropdown-bg: $oil; -// $topbar-dropdown-link-color: $white; -// $topbar-dropdown-link-bg: $oil; -// $topbar-dropdown-link-bg-hover: $oil; -// $topbar-dropdown-link-weight: $font-weight-normal; -// $topbar-dropdown-toggle-size: 5px; -// $topbar-dropdown-toggle-color: $white; -// $topbar-dropdown-toggle-alpha: 0.4; - -// Set the link colors and styles for top-level nav -// $topbar-link-color: $white; -// $topbar-link-color-hover: $white; -// $topbar-link-color-active: $white; -// $topbar-link-color-active-hover: $white; -// $topbar-link-weight: $font-weight-normal; -// $topbar-link-font-size: rem-calc(13); -// $topbar-link-hover-lightness: -10%; // Darken by 10% -// $topbar-link-bg: $topbar-bg; -// $topbar-link-bg-color-hover: $charcoal; -// $topbar-link-bg-hover: $oil; -// $topbar-link-bg-active: $primary-color; -// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%); -// $topbar-link-font-family: $body-font-family; -// $topbar-link-text-transform: none; -// $topbar-link-padding: ($topbar-height / 3); -// $topbar-back-link-size: $h5-font-size; -// $topbar-link-dropdown-padding: 20px; - -// $topbar-button-font-size: 0.75rem; -// $topbar-button-top: 7px; - -// $topbar-dropdown-label-color: $monsoon; -// $topbar-dropdown-label-text-transform: uppercase; -// $topbar-dropdown-label-font-weight: $font-weight-bold; -// $topbar-dropdown-label-font-size: rem-calc(10); -// $topbar-dropdown-label-bg: $oil; - -// Top menu icon styles -// $topbar-menu-link-transform: uppercase; -// $topbar-menu-link-font-size: rem-calc(13); -// $topbar-menu-link-weight: $font-weight-bold; -// $topbar-menu-link-color: $white; -// $topbar-menu-icon-color: $white; -// $topbar-menu-link-color-toggled: $jumbo; -// $topbar-menu-icon-color-toggled: $jumbo; - -// Transitions and breakpoint styles -// $topbar-transition-speed: 300ms; -// Using rem-calc for the below breakpoint causes issues with top bar -// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout -// $topbar-media-query: $medium-up; - -// Divider Styles -// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%); -// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%); - -// Sticky Class -// $topbar-sticky-class: ".sticky"; -// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item - -// 36. Visibility Classes -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-visibility-classes: $include-html-classes; -// $include-table-visibility-classes: true; -// $include-legacy-visibility-classes: true; -// $include-accessibility-classes: true; diff --git a/app/styles/app/foundation/scss/foundation/components/_accordion.scss b/app/styles/app/foundation/scss/foundation/components/_accordion.scss deleted file mode 100644 index 6a0a64ed..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_accordion.scss +++ /dev/null @@ -1,157 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // - -// $include-html-accordion-classes: $include-html-classes !default; - -// $accordion-navigation-padding: rem-calc(16) !default; -// $accordion-navigation-bg-color: $silver !default; -// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default; -// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default; -// $accordion-navigation-font-color: $jet !default; -// $accordion-navigation-font-size: rem-calc(16) !default; -// $accordion-navigation-font-family: $body-font-family !default; - -// $accordion-content-padding: ($column-gutter/2) !default; -// $accordion-content-active-bg-color: $white !default; - - -// // Mixin: accordion-container() -// // Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix -// // Explicit Dependencies: a clearfix mixin *is* defined. -// // Implicit Dependencies: None - -// @mixin accordion-container() { -// @include clearfix; -// margin-bottom: 0; -// } - -// // Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class, $font-color, $font-size, $font-family){ -// // @params $bg-color: [ color or string ]: Specify the background color for the navigation element -// // @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered -// // @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released. -// // @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible -// // @params $font-color [ color or string ]: Color of the font for accordion -// // @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element -// // @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion - -// @mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){ -// display: block; -// margin-bottom: 0 !important; -// @if type-of($active_class) != "string" { -// @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of this navigation component." -// } -// @else { -// &.#{ $active_class } > a { -// background: $active-bg; -// } -// } -// > a { -// background: $bg; -// color: $font-color; -// @if type-of($padding) != number { -// @warn "`#{$padding}` was read as #{type-of($padding)}"; -// @if $accordion-navigation-padding != null { -// @warn "#{$padding} was read as a #{type-of($padding)}"; -// @warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)"; -// padding: $accordion-navigation-padding; -// } -// @else { -// @warn "`#{$padding}` isn't a valid number and $accordion-navigation-padding is missing. A value of `null` is returned to not output an invalid value for padding"; -// padding: null; -// } -// } -// @else { -// padding: $padding; -// } -// display: block; -// font-family: $font-family; -// @if type-of($font-size) != number { -// @warn "`#{$font-size}` was read as a #{type-of($font-size)}"; -// @if $accordion-navigation-font-size != null { -// @warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size})."; -// font-size: $accordion-navigation-font-size; -// } -// @else{ -// @warn "`#{$font-size}` is not a valid number and the default value of $accordion-navigation-font-size is not defined. A value of `null` will be returned to not generate an invalid value for font-size."; -// font-size: null; - -// } -// } -// @else { -// font-size: $font-size; -// } -// &:hover { -// background: $hover-bg; -// } -// } -// } - -// // Mixin: accordion-content($bg, $padding, $active-class) -// // @params $padding [ number ]: Padding for the content of the container -// // @params $bg [ color ]: Background color for the content when it's visible -// // @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible. - -// @mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){ -// display: none; -// @if type-of($padding) != "number" { -// @warn "#{$padding} was read as a #{type-of($padding)}"; -// @if $accordion-content-padding != null { -// @warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead"; -// padding: $accordion-content-padding; -// } @else { -// @warn "`#{$padding}` isn't a valid number and the default value of $accordion-content-padding is not defined. A value of `null` is returned to not output an invalid value for padding."; -// padding: null; -// } -// } @else { -// padding: $padding; -// } - -// @if type-of($active_class) != "string" { -// @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of the content. " -// } -// @else { -// &.#{$active_class} { -// display: block; -// background: $bg; -// } -// } -// } - -// @include exports("accordion") { -// @if $include-html-accordion-classes { -// .accordion { -// @include clearfix; -// margin-bottom: 0; -// .accordion-navigation, dd { -// display: block; -// margin-bottom: 0 !important; -// &.active > a { background: $accordion-navigation-active-bg-color; } -// > a { -// background: $accordion-navigation-bg-color; -// color: $accordion-navigation-font-color; -// padding: $accordion-navigation-padding; -// display: block; -// font-family: $accordion-navigation-font-family; -// font-size: $accordion-navigation-font-size; -// &:hover { background: $accordion-navigation-hover-bg-color; } -// } - -// > .content { -// display: none; -// padding: $accordion-content-padding; -// &.active { -// display: block; -// background: $accordion-content-active-bg-color; -// } -// } -// } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_alert-boxes.scss b/app/styles/app/foundation/scss/foundation/components/_alert-boxes.scss deleted file mode 100644 index 6ba218b5..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_alert-boxes.scss +++ /dev/null @@ -1,128 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // Alert Box Variables -// // -// $include-html-alert-classes: $include-html-classes !default; - -// // We use this to control alert padding. -// $alert-padding-top: rem-calc(14) !default; -// $alert-padding-default-float: $alert-padding-top !default; -// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10) !default; -// $alert-padding-bottom: $alert-padding-top !default; - -// // We use these to control text style. -// $alert-font-weight: $font-weight-normal !default; -// $alert-font-size: rem-calc(13) !default; -// $alert-font-color: $white !default; -// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default; - -// // We use this for close hover effect. -// $alert-function-factor: -14% !default; - -// // We use these to control border styles. -// $alert-border-style: solid !default; -// $alert-border-width: 1px !default; -// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor) !default; -// $alert-bottom-margin: rem-calc(20) !default; - -// // We use these to style the close buttons -// $alert-close-color: $oil !default; -// $alert-close-top: 50% !default; -// $alert-close-position: rem-calc(4) !default; -// $alert-close-font-size: rem-calc(22) !default; -// $alert-close-opacity: 0.3 !default; -// $alert-close-opacity-hover: 0.5 !default; -// $alert-close-padding: 9px 6px 4px !default; -// $alert-close-background: inherit !default; - -// // We use this to control border radius -// $alert-radius: $global-radius !default; - -// $alert-transition-speed: 300ms !default; -// $alert-transition-ease: ease-out !default; - -// // -// // Alert Mixins -// // - -// // We use this mixin to create a default alert base. -// @mixin alert-base { -// border-style: $alert-border-style; -// border-width: $alert-border-width; -// display: block; -// font-weight: $alert-font-weight; -// margin-bottom: $alert-bottom-margin; -// position: relative; -// padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float; -// font-size: $alert-font-size; -// @include single-transition(opacity, $alert-transition-speed, $alert-transition-ease) -// } - -// // We use this mixin to add alert styles -// // -// // $bg - The background of the alert. Default: $primary-color. -// @mixin alert-style($bg:$primary-color) { - -// // This finds the lightness percentage of the background color. -// $bg-lightness: lightness($bg); - -// // We control which background color and border come through. -// background-color: $bg; -// border-color: scale-color($bg, $lightness: $alert-function-factor); - -// // We control the text color for you based on the background color. -// @if $bg-lightness > 70% { color: $alert-font-color-alt; } -// @else { color: $alert-font-color; } - -// } - -// // We use this to create the close button. -// @mixin alert-close { -// font-size: $alert-close-font-size; -// padding: $alert-close-padding; -// line-height: 0; -// position: absolute; -// top: $alert-close-top; -// margin-top: -($alert-close-font-size / 2); -// #{$opposite-direction}: $alert-close-position; -// color: $alert-close-color; -// opacity: $alert-close-opacity; -// background: $alert-close-background; -// &:hover, -// &:focus { opacity: $alert-close-opacity-hover; } -// } - -// // We use this to quickly create alerts with a single mixin. -// // -// // $bg - Background of alert. Default: $primary-color. -// // $radius - Radius of alert box. Default: false. -// @mixin alert($bg:$primary-color, $radius:false) { -// @include alert-base; -// @include alert-style($bg); -// @include radius($radius); -// } - -// @include exports("alert-box") { -// @if $include-html-alert-classes { -// .alert-box { -// @include alert; - -// .close { @include alert-close; } - -// &.radius { @include radius($alert-radius); } -// &.round { @include radius($global-rounded); } - -// &.success { @include alert-style($success-color); } -// &.alert { @include alert-style($alert-color); } -// &.secondary { @include alert-style($secondary-color); } -// &.warning { @include alert-style($warning-color); } -// &.info { @include alert-style($info-color); } -// &.alert-close { opacity: 0} -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_block-grid.scss b/app/styles/app/foundation/scss/foundation/components/_block-grid.scss deleted file mode 100644 index 62e49765..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_block-grid.scss +++ /dev/null @@ -1,132 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // Block Grid Variables -// // -// $include-html-block-grid-classes: $include-html-classes !default; -// $include-xl-html-block-grid-classes: false !default; - -// // We use this to control the maximum number of block grid elements per row -// $block-grid-elements: 12 !default; -// $block-grid-default-spacing: rem-calc(20) !default; - -// $align-block-grid-to-grid: false !default; -// @if $align-block-grid-to-grid { -// $block-grid-default-spacing: $column-gutter; -// } - -// // Enables media queries for block-grid classes. Set to false if writing semantic HTML. -// $block-grid-media-queries: true !default; - -// // -// // Block Grid Mixins -// // - -// // Create a custom block grid -// // -// // $per-row - # of items to display per row. Default: false. -// // $spacing - # of ems to use as padding on each block item. Default: rem-calc(20). -// // $base-style - Apply a base style to block grid. Default: true. -// @mixin block-grid( -// $per-row:false, -// $spacing:$block-grid-default-spacing, -// $include-spacing:true, -// $base-style:true) { - -// @if $base-style { -// display: block; -// padding: 0; -// @if $align-block-grid-to-grid { -// margin: 0; -// } @else { -// margin: 0 (-$spacing/2); -// } -// @include clearfix; - -// &>li { -// display: block; -// height: auto; -// float: $default-float; -// @if $include-spacing { -// padding: 0 ($spacing/2) $spacing; -// } -// } -// } - -// @if $per-row { -// &>li { -// width: 100%/$per-row; -// @if $include-spacing { -// padding: 0 ($spacing/2) $spacing; -// } -// list-style: none; - -// &:nth-of-type(1n) { clear: none; } -// &:nth-of-type(#{$per-row}n+1) { clear: both; } -// @if $align-block-grid-to-grid { -// @include block-grid-aligned($per-row, $spacing); -// } -// } -// } -// } - -// @mixin block-grid-aligned($per-row, $spacing) { -// @for $i from 1 through $block-grid-elements { -// @if $per-row >= $i { -// $grid-column: '+' + $i; -// @if $per-row == $i { -// $grid-column: ''; -// } -// &:nth-of-type(#{$per-row}n#{unquote($grid-column)}) { -// padding-left: ($spacing - (($spacing / $per-row) * ($per-row - ($i - 1)))); -// padding-right: ($spacing - (($spacing / $per-row) * $i)); -// } -// } -// } -// } - -// // Generate presentational markup for block grid. -// // -// // $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc. -// @mixin block-grid-html-classes($size,$include-spacing) { -// @for $i from 1 through $block-grid-elements { -// .#{$size}-block-grid-#{($i)} { -// @include block-grid($i,$block-grid-default-spacing,$include-spacing,false); -// } -// } -// } - -// @include exports("block-grid") { -// @if $include-html-block-grid-classes { - -// [class*="block-grid-"] { @include block-grid; } - -// @if $block-grid-media-queries { -// @media #{$small-up} { -// @include block-grid-html-classes($size:small,$include-spacing:false); -// } - -// @media #{$medium-up} { -// @include block-grid-html-classes($size:medium,$include-spacing:false); -// } - -// @media #{$large-up} { -// @include block-grid-html-classes($size:large,$include-spacing:false); -// } - -// @if $include-xl-html-block-grid-classes { -// @media #{$xlarge-up} { -// @include block-grid-html-classes($size:xlarge,$include-spacing:false); -// } - -// @media #{$xxlarge-up} { -// @include block-grid-html-classes($size:xxlarge,$include-spacing:false); -// } -// } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_breadcrumbs.scss b/app/styles/app/foundation/scss/foundation/components/_breadcrumbs.scss deleted file mode 100644 index 4403cbe4..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_breadcrumbs.scss +++ /dev/null @@ -1,132 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // Breadcrumb Variables -// // -// $include-html-nav-classes: $include-html-classes !default; - -// // We use this to set the background color for the breadcrumb container. -// $crumb-bg: scale-color($secondary-color, $lightness: 55%) !default; - -// // We use these to set the padding around the breadcrumbs. -// $crumb-padding: rem-calc(9 14 9) !default; -// $crumb-side-padding: rem-calc(12) !default; - -// // We use these to control border styles. -// $crumb-function-factor: -10% !default; -// $crumb-border-size: 1px !default; -// $crumb-border-style: solid !default; -// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor) !default; -// $crumb-radius: $global-radius !default; - -// // We use these to set various text styles for breadcrumbs. -// $crumb-font-size: rem-calc(11) !default; -// $crumb-font-color: $primary-color !default; -// $crumb-font-color-current: $oil !default; -// $crumb-font-color-unavailable: $aluminum !default; -// $crumb-font-transform: uppercase !default; -// $crumb-link-decor: underline !default; - -// // We use these to control the slash between breadcrumbs -// $crumb-slash-color: $base !default; -// $crumb-slash: "/" !default; - -// // -// // Breadcrumb Mixins -// // - -// // We use this mixin to create a container around our breadcrumbs -// @mixin crumb-container { -// display: block; -// padding: $crumb-padding; -// overflow: hidden; -// margin-#{$default-float}: 0; -// list-style: none; -// border-style: $crumb-border-style; -// border-width: $crumb-border-size; - -// // We control which background color and border come through. -// background-color: $crumb-bg; -// border-color: $crumb-border-color; -// } - -// // We use this mixin to create breadcrumb styles from list items. -// @mixin crumbs { - -// // A normal state will make the links look and act like clickable breadcrumbs. -// margin: 0; -// float: $default-float; -// font-size: $crumb-font-size; -// line-height: $crumb-font-size; -// text-transform: $crumb-font-transform; -// color: $crumb-font-color; - -// &:hover a, &:focus a { text-decoration: $crumb-link-decor; } - -// a { -// color: $crumb-font-color; -// } - -// // Current is for the link of the current page -// &.current { -// cursor: $cursor-default-value; -// color: $crumb-font-color-current; -// a { -// cursor: $cursor-default-value; -// color: $crumb-font-color-current; -// } - -// &:hover, &:hover a, -// &:focus, &:focus a { text-decoration: none; } -// } - -// // Unavailable removed color and link styles so it looks inactive. -// &.unavailable { -// color: $crumb-font-color-unavailable; -// a { color: $crumb-font-color-unavailable; } - -// &:hover, -// &:hover a, -// &:focus, -// a:focus { -// text-decoration: none; -// color: $crumb-font-color-unavailable; -// cursor: $cursor-default-value; -// } -// } - -// &:before { -// content: "#{$crumb-slash}"; -// color: $crumb-slash-color; -// margin: 0 $crumb-side-padding; -// position: relative; -// top: 1px; -// } - -// &:first-child:before { -// content: " "; -// margin: 0; -// } -// } - -// @include exports("breadcrumbs") { -// @if $include-html-nav-classes { -// .breadcrumbs { -// @include crumb-container; -// @include radius($crumb-radius); - -// &>* { -// @include crumbs; -// } -// } -// } -// } - -// /* Accessibility - hides the forward slash */ -// [aria-label="breadcrumbs"] [aria-hidden="true"]:after { -// content: "/"; -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_button-groups.scss b/app/styles/app/foundation/scss/foundation/components/_button-groups.scss deleted file mode 100644 index 2597ac35..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_button-groups.scss +++ /dev/null @@ -1,197 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; -// @import "buttons"; - -// // -// // Button Group Variables -// // -// $include-html-button-classes: $include-html-classes !default; - -// // Sets the margin for the right side by default, and the left margin if right-to-left direction is used -// $button-bar-margin-opposite: rem-calc(10) !default; -// $button-group-border-width: 1px !default; - -// // -// // Button Group Mixins -// // - -// // We use this to add styles for a button group container -// @mixin button-group-container($styles:true, $float:false) { -// @if $styles { -// list-style: none; -// margin: 0; -// #{$default-float}: 0; -// @include clearfix(); -// } -// @if $float { -// float: #{$default-float}; -// margin-#{$opposite-direction}: $button-bar-margin-opposite; -// & div { overflow: hidden; } -// } -// } - -// // We use this to control styles for button groups -// @mixin button-group-style($radius:false, $even:false, $float:false, $orientation:horizontal) { - -// > button, .button { -// border-#{$default-float}: $button-group-border-width solid; -// border-color: rgba(255, 255, 255, 0.5); -// } - -// &:first-child { -// button, .button { -// border-#{$default-float}: 0; -// } -// } - -// // We use this to control the flow, or remove those styles completely. -// @if $float { -// margin: 0; -// float: $float; -// display: list-item; -// // Make sure the first child doesn't get the negative margin. -// &:first-child { margin-#{$default-float}: 0; } -// } -// @else { -// margin: 0 -2px; -// display: inline-block; -// } - -// @if $orientation == vertical { -// display:block; -// margin:0; -// > button, .button { -// border-top: $button-group-border-width solid; -// border-color: rgba(255, 255, 255, 0.5); -// border-left-width: 0; -// margin:0; -// display: block; -// } - -// &:first-child { -// button, .button { -// border-top: 0; -// } -// } -// } - -// // We use these to control left and right radius on first/last buttons in the group. -// @if $radius == true { -// &, -// & > a, -// & > button, -// & > .button { @include radius(0); } -// &:first-child, -// &:first-child > a, -// &:first-child > button, -// &:first-child > .button { -// @if $orientation == vertical { -// @include side-radius(top, $button-radius); -// } -// @else { -// @include side-radius($default-float, $button-radius); -// } -// } -// &:last-child, -// &:last-child > a, -// &:last-child > button, -// &:last-child > .button { -// @if $orientation == vertical { -// @include side-radius(bottom, $button-radius); -// } -// @else { -// @include side-radius($opposite-direction, $button-radius); -// } -// } -// } -// @else if $radius { -// &, -// & > a, -// & > button, -// & > .button { @include radius(0); } -// &:first-child, -// &:first-child > a, -// &:first-child > button, -// &:first-child > .button { -// @if $orientation == vertical { -// @include side-radius(top, $radius); -// } -// @else { -// @include side-radius($default-float, $radius); -// } -// } -// &:last-child, -// &:last-child > a, -// &:last-child > button, -// &:last-child > .button { -// @if $orientation == vertical { -// @include side-radius(bottom, $radius); -// } -// @else { -// @include side-radius($opposite-direction, $radius); -// } -// } -// } - -// // We use this to make the buttons even width across their container -// @if $even { -// width: percentage((100/$even) / 100); -// button, .button { width: 100%; } -// } -// } - -// @include exports("button-group") { -// @if $include-html-button-classes { -// .button-group { @include button-group-container; - -// & > li { @include button-group-style(); } - -// &.stack { -// & > li { @include button-group-style($orientation:vertical); float: none; } -// } - -// &.stack-for-small { -// & > li { -// @include button-group-style($orientation:horizontal); -// @media #{$small-only} { -// @include button-group-style($orientation:vertical); -// } -// } -// } - -// &.radius > * { @include button-group-style($radius:$button-radius, $float:null); } -// &.radius.stack > * { @include button-group-style($radius:$button-radius, $float:null, $orientation:vertical); } -// &.radius.stack-for-small > * { -// @media #{$medium-up} { -// @include button-group-style($radius:$button-radius, $orientation:horizontal); -// } -// @media #{$small-only} { -// @include button-group-style($radius:$button-radius, $orientation:vertical); -// } -// } - -// &.round > * { @include button-group-style($radius:$button-round, $float:null); } -// &.round.stack > * { @include button-group-style($radius:$button-med, $float:null, $orientation:vertical); } -// &.round.stack-for-small > * { -// @media #{$medium-up} { -// @include button-group-style($radius:$button-round, $orientation:horizontal); -// } -// @media #{$small-only} { -// @include button-group-style($radius:$button-med, $orientation:vertical); -// } -// } - -// @for $i from 2 through 8 { -// &.even-#{$i} li { @include button-group-style($even:$i, $float:null); } -// } -// } - -// .button-bar { -// @include clearfix; -// .button-group { @include button-group-container($styles:false, $float:true); } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_buttons.scss b/app/styles/app/foundation/scss/foundation/components/_buttons.scss deleted file mode 100644 index c7e7d455..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_buttons.scss +++ /dev/null @@ -1,259 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-button-classes: $include-html-classes !default; - -// // We use these to build padding for buttons. -// $button-tny: rem-calc(10) !default; -// $button-sml: rem-calc(14) !default; -// $button-med: rem-calc(16) !default; -// $button-lrg: rem-calc(18) !default; - -// // We use this to control the display property. -// $button-display: inline-block !default; -// $button-margin-bottom: rem-calc(20) !default; - -// // We use these to control button text styles. -// $button-font-family: $body-font-family !default; -// $button-font-color: $white !default; -// $button-font-color-alt: $oil !default; -// $button-font-tny: rem-calc(11) !default; -// $button-font-sml: rem-calc(13) !default; -// $button-font-med: rem-calc(16) !default; -// $button-font-lrg: rem-calc(20) !default; -// $button-font-weight: $font-weight-normal !default; -// $button-font-align: center !default; - -// // We use these to control various hover effects. -// $button-function-factor: -20% !default; - -// // We use these to control button border styles. -// $button-border-width: 0 !default; -// $button-border-style: solid !default; -// $button-bg-color: $primary-color !default; -// $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default; -// $button-border-color: $button-bg-hover !default; -// $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default; -// $secondary-button-border-color: $secondary-button-bg-hover !default; -// $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor) !default; -// $success-button-border-color: $success-button-bg-hover !default; -// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor) !default; -// $alert-button-border-color: $alert-button-bg-hover !default; -// $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor) !default; -// $warning-button-border-color: $warning-button-bg-hover !default; -// $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor) !default; -// $info-button-border-color: $info-button-bg-hover !default; - -// // We use this to set the default radius used throughout the core. -// $button-radius: $global-radius !default; -// $button-round: $global-rounded !default; - -// // We use this to set default opacity and cursor for disabled buttons. -// $button-disabled-opacity: 0.7 !default; -// $button-disabled-cursor: $cursor-default-value !default; - - -// // -// // @MIXIN -// // -// // We use this mixin to create a default button base. -// // -// // $style - Sets base styles. Can be set to false. Default: true. -// // $display - Used to control display property. Default: $button-display || inline-block - -// @mixin button-base($style:true, $display:$button-display) { -// @if $style { -// border-style: $button-border-style; -// border-width: $button-border-width; -// cursor: $cursor-pointer-value; -// font-family: $button-font-family; -// font-weight: $button-font-weight; -// line-height: normal; -// margin: 0 0 $button-margin-bottom; -// position: relative; -// text-decoration: none; -// text-align: $button-font-align; -// -webkit-appearance: none; -// border-radius:0; -// } -// @if $display { display: $display; } -// } - -// // @MIXIN -// // -// // We use this mixin to add button size styles -// // -// // $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12) -// // $full-width - We can set $full-width:true to remove side padding extend width - Default: false - -// @mixin button-size($padding:$button-med, $full-width:false) { - -// // We control which padding styles come through, -// // these can be turned off by setting $padding:false -// @if $padding { -// padding-top: $padding; -// padding-#{$opposite-direction}: $padding * 2; -// padding-bottom: $padding + rem-calc(1); -// padding-#{$default-float}: $padding * 2; - -// // We control the font-size based on mixin input. -// @if $padding == $button-med { font-size: $button-font-med; } -// @else if $padding == $button-tny { font-size: $button-font-tny; } -// @else if $padding == $button-sml { font-size: $button-font-sml; } -// @else if $padding == $button-lrg { font-size: $button-font-lrg; } -// } - -// // We can set $full-width:true to remove side padding extend width. -// @if $full-width { -// // We still need to check if $padding is set. -// @if $padding { -// padding-top: $padding; -// padding-bottom: $padding + rem-calc(1); -// } @else if $padding == false { -// padding-top:0; -// padding-bottom:0; -// } -// padding-right: 0; -// padding-left: 0; -// width: 100%; -// } -// } - -// // @MIXIN -// // -// // we use this mixin to create the button hover and border colors - -// // @MIXIN -// // -// // We use this mixin to add button color styles -// // -// // $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color. -// // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true -// // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false -// // $bg-hover - Button Hover Background Color. Default: $button-bg-hover -// // $border-color - Button Border Color. Default: $button-border-color -// @mixin button-style($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null) { - -// // We control which background styles are used, -// // these can be removed by setting $bg:false -// @if $bg { - -// @if $bg-hover == null { -// $bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor)); -// } - -// @if $border-color == null { -// $border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor)); -// } - -// // This find the lightness percentage of the background color. -// $bg-lightness: lightness($bg); -// $bg-hover-lightness: lightness($bg-hover); - -// background-color: $bg; -// border-color: $border-color; -// &:hover, -// &:focus { background-color: $bg-hover; } - -// // We control the text color for you based on the background color. -// color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color); - -// &:hover, -// &:focus { -// color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color); -// } -// } - -// // We can set $disabled:true to create a disabled transparent button. -// @if $disabled { -// cursor: $button-disabled-cursor; -// opacity: $button-disabled-opacity; -// box-shadow: none; -// &:hover, -// &:focus { background-color: $bg; } -// } - -// // We can control how much button radius is used. -// @if $radius == true { @include radius($button-radius); } -// @else if $radius { @include radius($radius); } - -// } - -// // @MIXIN -// // -// // We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin" -// // -// // $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12) -// // $bg - Primary color set in settings file. Default: $button-bg. -// // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default:false. -// // $full-width - We can set $full-width:true to remove side padding extend width. Default:false. -// // $disabled - We can set $disabled:true to create a disabled transparent button. Default:false. -// // $is-prefix - Not used? Default:false. -// // $bg-hover - Button Hover Color - Default null - see button-style mixin -// // $border-color - Button Border Color - Default null - see button-style mixin -// // $transition - We can control whether or not to include the background-color transition property - Default:true. -// @mixin button($padding:$button-med, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true) { -// @include button-base; -// @include button-size($padding, $full-width); -// @include button-style($bg, $radius, $disabled, $bg-hover, $border-color); - -// @if $transition { -// @include single-transition(background-color); -// } -// } - - -// @include exports("button") { -// @if $include-html-button-classes { - -// // Default styles applied outside of media query -// button, .button { -// @include button-base; -// @include button-size; -// @include button-style; - -// @include single-transition(background-color); - -// &.secondary { @include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); } -// &.success { @include button-style($bg:$success-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); } -// &.alert { @include button-style($bg:$alert-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); } -// &.warning { @include button-style($bg:$warning-color, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); } -// &.info { @include button-style($bg:$info-color, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); } - -// &.large { @include button-size($padding:$button-lrg); } -// &.small { @include button-size($padding:$button-sml); } -// &.tiny { @include button-size($padding:$button-tny); } -// &.expand { @include button-size($padding:null,$full-width:true); } - -// &.left-align { text-align: left; text-indent: rem-calc(12); } -// &.right-align { text-align: right; padding-right: rem-calc(12); } - -// &.radius { @include button-style($bg:false, $radius:true); } -// &.round { @include button-style($bg:false, $radius:$button-round); } - -// &.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color); -// &.secondary { @include button-style($bg:$secondary-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); } -// &.success { @include button-style($bg:$success-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); } -// &.alert { @include button-style($bg:$alert-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); } -// &.warning { @include button-style($bg:$warning-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); } -// &.info { @include button-style($bg:$info-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); } -// } -// } - -// //firefox 2px fix -// button::-moz-focus-inner {border:0; padding:0;} - -// @media #{$medium-up} { -// button, .button { -// @include button-base($style:false, $display:inline-block); -// @include button-size($padding:false, $full-width:false); -// } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_clearing.scss b/app/styles/app/foundation/scss/foundation/components/_clearing.scss deleted file mode 100644 index 767a713f..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_clearing.scss +++ /dev/null @@ -1,247 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-clearing-classes: $include-html-classes !default; - -// // We use these to set the background colors for parts of Clearing. -// $clearing-bg: $oil !default; -// $clearing-caption-bg: $clearing-bg !default; -// $clearing-carousel-bg: rgba(51,51,51,0.8) !default; -// $clearing-img-bg: $clearing-bg !default; - -// // We use these to style the close button -// $clearing-close-color: $iron !default; -// $clearing-close-size: 30px !default; - -// // We use these to style the arrows -// $clearing-arrow-size: 12px !default; -// $clearing-arrow-color: $clearing-close-color !default; - -// // We use these to style captions -// $clearing-caption-font-color: $iron !default; -// $clearing-caption-font-size: 0.875em !default; -// $clearing-caption-padding: 10px 30px 20px !default; - -// // We use these to make the image and carousel height and style -// $clearing-active-img-height: 85% !default; -// $clearing-carousel-height: 120px !default; -// $clearing-carousel-thumb-width: 120px !default; -// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; - -// @include exports("clearing") { -// @if $include-html-clearing-classes { -// // We decided to not create a mixin for Clearing because it relies -// // on predefined classes and structure to work properly. -// // The variables above should give enough control. - -// /* Clearing Styles */ -// .clearing-thumbs, #{data('clearing')} { -// @include clearfix; -// margin-bottom: 0; -// margin-#{$default-float}: 0; -// list-style: none; - -// li { -// float: $default-float; -// margin-#{$opposite-direction}: 10px; -// } - -// &[class*="block-grid-"] li { -// margin-#{$opposite-direction}: 0; -// } -// } - -// .clearing-blackout { -// background: $clearing-bg; -// position: fixed; -// width: 100%; -// height: 100%; -// top: 0; -// #{$default-float}: 0; -// z-index: 998; - -// .clearing-close { display: block; } -// } - -// .clearing-container { -// position: relative; -// z-index: 998; -// height: 100%; -// overflow: hidden; -// margin: 0; -// } - -// .clearing-touch-label { -// position: absolute; -// top: 50%; -// left: 50%; -// color: $base; -// font-size: 0.6em; -// } - -// .visible-img { -// height: 95%; -// position: relative; - -// img { -// position: absolute; -// #{$default-float}: 50%; -// top: 50%; -// margin-#{$default-float}: -50%; -// max-height: 100%; -// max-width: 100%; -// } -// } - -// .clearing-caption { -// color: $clearing-caption-font-color; -// font-size: $clearing-caption-font-size; -// line-height: 1.3; -// margin-bottom: 0; -// text-align: center; -// bottom: 0; -// background: $clearing-caption-bg; -// width: 100%; -// padding: $clearing-caption-padding; -// position: absolute; -// #{$default-float}: 0; -// } - -// .clearing-close { -// z-index: 999; -// padding-#{$default-float}: 20px; -// padding-top: 10px; -// font-size: $clearing-close-size; -// line-height: 1; -// color: $clearing-close-color; -// display: none; - -// &:hover, -// &:focus { color: $iron; } -// } - -// .clearing-assembled .clearing-container { height: 100%; -// .carousel > ul { display: none; } -// } - -// // If you want to show a lightbox, but only have a single image come through as the thumbnail -// .clearing-feature li { -// display: none; -// &.clearing-featured-img { -// display: block; -// } -// } - -// // Large screen overrides -// @media #{$medium-up} { -// .clearing-main-prev, -// .clearing-main-next { -// position: absolute; -// height: 100%; -// width: 40px; -// top: 0; -// & > span { -// position: absolute; -// top: 50%; -// display: block; -// width: 0; -// height: 0; -// border: solid $clearing-arrow-size; -// &:hover { opacity: 0.8; } -// } -// } -// .clearing-main-prev { -// #{$default-float}: 0; -// & > span { -// #{$default-float}: 5px; -// border-color: transparent; -// border-#{$opposite-direction}-color: $clearing-arrow-color; -// } -// } -// .clearing-main-next { -// #{$opposite-direction}: 0; -// & > span { -// border-color: transparent; -// border-#{$default-float}-color: $clearing-arrow-color; -// } -// } - -// .clearing-main-prev.disabled, -// .clearing-main-next.disabled { opacity: 0.3; } - -// .clearing-assembled .clearing-container { - -// .carousel { -// background: $clearing-carousel-bg; -// height: $clearing-carousel-height; -// margin-top: 10px; -// text-align: center; - -// & > ul { -// display: inline-block; -// z-index: 999; -// height: 100%; -// position: relative; -// float: none; - -// li { -// display: block; -// width: $clearing-carousel-thumb-width; -// min-height: inherit; -// float: $default-float; -// overflow: hidden; -// margin-#{$opposite-direction}: 0; -// padding: 0; -// position: relative; -// cursor: $cursor-pointer-value; -// opacity: 0.4; -// clear: none; - -// &.fix-height { -// img { -// height: 100%; -// max-width: none; -// } -// } - -// a.th { -// border: none; -// box-shadow: none; -// display: block; -// } - -// img { -// cursor: $cursor-pointer-value !important; -// width: 100% !important; -// } - -// &.visible { opacity: 1; } -// &:hover { opacity: 0.8; } -// } -// } -// } - -// .visible-img { -// background: $clearing-img-bg; -// overflow: hidden; -// height: $clearing-active-img-height; -// } -// } - -// .clearing-close { -// position: absolute; -// top: 10px; -// #{$opposite-direction}: 20px; -// padding-#{$default-float}: 0; -// padding-top: 0; -// } -// } - -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_dropdown-buttons.scss b/app/styles/app/foundation/scss/foundation/components/_dropdown-buttons.scss deleted file mode 100644 index 63182eea..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_dropdown-buttons.scss +++ /dev/null @@ -1,130 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-button-classes: $include-html-classes !default; - -// // We use these to set the color of the pip in dropdown buttons -// $dropdown-button-pip-color: $white !default; -// $dropdown-button-pip-color-alt: $oil !default; - -// $button-pip-tny: rem-calc(6) !default; -// $button-pip-sml: rem-calc(7) !default; -// $button-pip-med: rem-calc(9) !default; -// $button-pip-lrg: rem-calc(11) !default; - -// // We use these to style tiny dropdown buttons -// $dropdown-button-padding-tny: $button-pip-tny * 7 !default; -// $dropdown-button-pip-size-tny: $button-pip-tny !default; -// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default; -// $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1) !default; - -// // We use these to style small dropdown buttons -// $dropdown-button-padding-sml: $button-pip-sml * 7 !default; -// $dropdown-button-pip-size-sml: $button-pip-sml !default; -// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default; -// $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1) !default; - -// // We use these to style medium dropdown buttons -// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default; -// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default; -// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default; -// $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2) !default; - -// // We use these to style large dropdown buttons -// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default; -// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default; -// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default; -// $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default; - -// // @mixins -// // -// // Dropdown Button Mixin -// // -// // We use this mixin to build off of the button mixin and add dropdown button styles -// // -// // $padding - Determines the size of button you're working with. Default: medium. Options [tiny, small, medium, large] -// // $pip-color - Color of the little triangle that points to the dropdown. Default: $white. -// // $base-style - Add in base-styles. This can be set to false. Default:true - -// @mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) { - -// // We add in base styles, but they can be negated by setting to 'false'. -// @if $base-style { -// position: relative; -// outline: none; - -// // This creates the base styles for the triangle pip -// &::after { -// position: absolute; -// content: ""; -// width: 0; -// height: 0; -// display: block; -// border-style: solid; -// border-color: $dropdown-button-pip-color transparent transparent transparent; -// top: 50%; -// } -// } - -// // If we're dealing with tiny buttons, use these styles -// @if $padding == tiny { -// padding-#{$opposite-direction}: $dropdown-button-padding-tny; -// &:after { -// border-width: $dropdown-button-pip-size-tny; -// #{$opposite-direction}: $dropdown-button-pip-opposite-tny; -// margin-top: $dropdown-button-pip-top-tny; -// } -// } - -// // If we're dealing with small buttons, use these styles -// @if $padding == small { -// padding-#{$opposite-direction}: $dropdown-button-padding-sml; -// &::after { -// border-width: $dropdown-button-pip-size-sml; -// #{$opposite-direction}: $dropdown-button-pip-opposite-sml; -// margin-top: $dropdown-button-pip-top-sml; -// } -// } - -// // If we're dealing with default (medium) buttons, use these styles -// @if $padding == medium { -// padding-#{$opposite-direction}: $dropdown-button-padding-med; -// &::after { -// border-width: $dropdown-button-pip-size-med; -// #{$opposite-direction}: $dropdown-button-pip-opposite-med; -// margin-top: $dropdown-button-pip-top-med; -// } -// } - -// // If we're dealing with large buttons, use these styles -// @if $padding == large { -// padding-#{$opposite-direction}: $dropdown-button-padding-lrg; -// &::after { -// border-width: $dropdown-button-pip-size-lrg; -// #{$opposite-direction}: $dropdown-button-pip-opposite-lrg; -// margin-top: $dropdown-button-pip-top-lrg; -// } -// } - -// // We can control the pip color. We didn't use logic in this case, just set it and forget it. -// @if $pip-color { -// &::after { border-color: $pip-color transparent transparent transparent; } -// } -// } - -// @include exports("dropdown-button") { -// @if $include-html-button-classes { -// .dropdown.button, button.dropdown { @include dropdown-button; -// &.tiny { @include dropdown-button(tiny,$base-style:false); } -// &.small { @include dropdown-button(small,$base-style:false); } -// &.large { @include dropdown-button(large,$base-style:false); } -// &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_dropdown.scss b/app/styles/app/foundation/scss/foundation/components/_dropdown.scss deleted file mode 100644 index ab290ecb..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_dropdown.scss +++ /dev/null @@ -1,262 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-dropdown-classes: $include-html-classes !default; - -// // We use these to controls height and width styles. -// $f-dropdown-max-width: 200px !default; -// $f-dropdown-height: auto !default; -// $f-dropdown-max-height: none !default; - -// // Used for bottom position -// $f-dropdown-margin-top: 2px !default; - -// // Used for right position -// $f-dropdown-margin-left: $f-dropdown-margin-top !default; - -// // Used for left position -// $f-dropdown-margin-right: $f-dropdown-margin-top !default; - -// // Used for top position -// $f-dropdown-margin-bottom: $f-dropdown-margin-top !default; - -// // We use this to control the background color -// $f-dropdown-bg: $white !default; - -// // We use this to set the border styles for dropdowns. -// $f-dropdown-border-style: solid !default; -// $f-dropdown-border-width: 1px !default; -// $f-dropdown-border-color: scale-color($white, $lightness: -20%) !default; - -// // We use these to style the triangle pip. -// $f-dropdown-triangle-size: 6px !default; -// $f-dropdown-triangle-color: $white !default; -// $f-dropdown-triangle-side-offset: 10px !default; - -// // We use these to control styles for the list elements. -// $f-dropdown-list-style: none !default; -// $f-dropdown-font-color: $charcoal !default; -// $f-dropdown-font-size: rem-calc(14) !default; -// $f-dropdown-list-padding: rem-calc(5, 10) !default; -// $f-dropdown-line-height: rem-calc(18) !default; -// $f-dropdown-list-hover-bg: $smoke !default; -// $dropdown-mobile-default-float: 0 !default; - -// // We use this to control the styles for when the dropdown has custom content. -// $f-dropdown-content-padding: rem-calc(20) !default; - -// // Default radius for dropdown. -// $f-dropdown-radius: $global-radius !default; - -// // -// // @mixins -// // -// // -// // NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.; -// // We use this to style the dropdown container element. -// // $content-list - Sets list-style. Default: list. Options: [list, content] -// // $triangle - Sets if dropdown has triangle. Default:true. -// // $max-width - Default: $f-dropdown-max-width || 200px. -// @mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) { -// position: absolute; -// left: -9999px; -// list-style: $f-dropdown-list-style; -// margin-#{$default-float}: 0; -// outline: none; - -// > *:first-child { margin-top: 0; } -// > *:last-child { margin-bottom: 0; } - -// @if $content == list { -// width: 100%; -// max-height: $f-dropdown-max-height; -// height: $f-dropdown-height; -// background: $f-dropdown-bg; -// border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color; -// font-size: $f-dropdown-font-size; -// z-index: 89; -// } -// @else if $content == content { -// padding: $f-dropdown-content-padding; -// width: 100%; -// height: $f-dropdown-height; -// max-height: $f-dropdown-max-height; -// background: $f-dropdown-bg; -// border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color; -// font-size: $f-dropdown-font-size; -// z-index: 89; -// } - -// @if $triangle == bottom { -// margin-top: $f-dropdown-margin-top; - -// &:before { -// @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom); -// position: absolute; -// top: -($f-dropdown-triangle-size * 2); -// #{$default-float}: $f-dropdown-triangle-side-offset; -// z-index: 89; -// } -// &:after { -// @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom); -// position: absolute; -// top: -(($f-dropdown-triangle-size + 1) * 2); -// #{$default-float}: $f-dropdown-triangle-side-offset - 1; -// z-index: 88; -// } - -// &.right:before { -// #{$default-float}: auto; -// #{$opposite-direction}: $f-dropdown-triangle-side-offset; -// } -// &.right:after { -// #{$default-float}: auto; -// #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1; -// } -// } - -// @if $triangle == $default-float { -// margin-top: 0; -// margin-#{$default-float}: $f-dropdown-margin-right; - -// &:before { -// @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$opposite-direction}); -// position: absolute; -// top: $f-dropdown-triangle-side-offset; -// #{$default-float}: -($f-dropdown-triangle-size * 2); -// z-index: 89; -// } -// &:after { -// @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$opposite-direction}); -// position: absolute; -// top: $f-dropdown-triangle-side-offset - 1; -// #{$default-float}: -($f-dropdown-triangle-size * 2) - 2; -// z-index: 88; -// } - -// } - -// @if $triangle == $opposite-direction { -// margin-top: 0; -// margin-#{$default-float}: -$f-dropdown-margin-right; - -// &:before { -// @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$default-float}); -// position: absolute; -// top: $f-dropdown-triangle-side-offset; -// #{$opposite-direction}: -($f-dropdown-triangle-size * 2); -// #{$default-float}: auto; -// z-index: 89; -// } -// &:after { -// @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$default-float}); -// position: absolute; -// top: $f-dropdown-triangle-side-offset - 1; -// #{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2; -// #{$default-float}: auto; -// z-index: 88; -// } - -// } - -// @if $triangle == top { -// margin-top: -$f-dropdown-margin-bottom; -// margin-left: 0; - -// &:before { -// @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, top); -// position: absolute; -// top: auto; -// bottom: -($f-dropdown-triangle-size * 2); -// #{$default-float}: $f-dropdown-triangle-side-offset; -// #{$opposite-direction}: auto; -// z-index: 89; -// } -// &:after { -// @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top); -// position: absolute; -// top: auto; -// bottom: -($f-dropdown-triangle-size * 2) - 2; -// #{$default-float}: $f-dropdown-triangle-side-offset - 1; -// #{$opposite-direction}: auto; -// z-index: 88; -// } - -// } - -// @if $max-width { max-width: $max-width; } -// @else { max-width: $f-dropdown-max-width; } - -// } - -// // @MIXIN -// // -// // We use this to style the list elements or content inside the dropdown. - -// @mixin dropdown-style { -// font-size: $f-dropdown-font-size; -// cursor: $cursor-pointer-value; - -// line-height: $f-dropdown-line-height; -// margin: 0; - -// &:hover, -// &:focus { background: $f-dropdown-list-hover-bg; } - -// &.radius { @include radius($f-dropdown-radius); } - -// a { -// display: block; -// padding: $f-dropdown-list-padding; -// color: $f-dropdown-font-color; -// } -// } - -// @include exports("dropdown") { -// @if $include-html-dropdown-classes { - -// /* Foundation Dropdowns */ -// .f-dropdown { -// @include dropdown-container(list, bottom); - -// &.drop-#{$opposite-direction} { -// @include dropdown-container(list, #{$default-float}); -// } - -// &.drop-#{$default-float} { -// @include dropdown-container(list, #{$opposite-direction}); -// } - -// &.drop-top { -// @include dropdown-container(list, top); -// } -// // max-width: none; - -// li { @include dropdown-style; } - -// // You can also put custom content in these dropdowns -// &.content { @include dropdown-container(content, $triangle:false); } - -// // Sizes -// &.tiny { max-width: 200px; } -// &.small { max-width: 300px; } -// &.medium { max-width: 500px; } -// &.large { max-width: 800px; } -// &.mega { -// width:100%!important; -// max-width:100%!important; - -// &.open{ -// left:0!important; -// } -// } -// } - -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_flex-video.scss b/app/styles/app/foundation/scss/foundation/components/_flex-video.scss deleted file mode 100644 index a35af09b..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_flex-video.scss +++ /dev/null @@ -1,51 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-media-classes: $include-html-classes !default; - -// // We use these to control video container padding and margins -// $flex-video-padding-top: rem-calc(25) !default; -// $flex-video-padding-bottom: 67.5% !default; -// $flex-video-margin-bottom: rem-calc(16) !default; - -// // We use this to control widescreen bottom padding -// $flex-video-widescreen-padding-bottom: 56.34% !default; - -// // -// // @mixins -// // - -// @mixin flex-video-container { -// position: relative; -// padding-top: $flex-video-padding-top; -// padding-bottom: $flex-video-padding-bottom; -// height: 0; -// margin-bottom: $flex-video-margin-bottom; -// overflow: hidden; - -// &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; } -// &.vimeo { padding-top: 0; } - -// iframe, -// object, -// embed, -// video { -// position: absolute; -// top: 0; -// #{$default-float}: 0; -// width: 100%; -// height: 100%; -// } -// } - -// @include exports("flex-video") { -// @if $include-html-media-classes { -// .flex-video { @include flex-video-container; } -// } -// } \ No newline at end of file diff --git a/app/styles/app/foundation/scss/foundation/components/_forms.scss b/app/styles/app/foundation/scss/foundation/components/_forms.scss deleted file mode 100644 index 2191b6c3..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_forms.scss +++ /dev/null @@ -1,570 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; -// @import "buttons"; - -// // -// // @variables -// // -// $include-html-form-classes: $include-html-classes !default; - -// // We use this to set the base for lots of form spacing and positioning styles -// $form-spacing: rem-calc(16) !default; - -// // We use these to style the labels in different ways -// $form-label-pointer: pointer !default; -// $form-label-font-size: rem-calc(14) !default; -// $form-label-font-weight: $font-weight-normal !default; -// $form-label-line-height: 1.5 !default; -// $form-label-font-color: scale-color($black, $lightness: 30%) !default; -// $form-label-small-transform: capitalize !default; -// $form-label-bottom-margin: 0 !default; -// $input-font-family: inherit !default; -// $input-font-color: rgba(0,0,0,0.75) !default; -// $input-font-size: rem-calc(14) !default; -// $input-bg-color: $white !default; -// $input-focus-bg-color: scale-color($white, $lightness: -2%) !default; -// $input-border-color: scale-color($white, $lightness: -20%) !default; -// $input-focus-border-color: scale-color($white, $lightness: -40%) !default; -// $input-border-style: solid !default; -// $input-border-width: 1px !default; -// $input-border-radius: $global-radius !default; -// $input-disabled-bg: $gainsboro !default; -// $input-disabled-cursor: $cursor-default-value !default; -// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default; -// $input-include-glowing-effect: true !default; - -// // We use these to style the fieldset border and spacing. -// $fieldset-border-style: solid !default; -// $fieldset-border-width: 1px !default; -// $fieldset-border-color: $gainsboro !default; -// $fieldset-padding: rem-calc(20) !default; -// $fieldset-margin: rem-calc(18 0) !default; - -// // We use these to style the legends when you use them -// $legend-bg: $white !default; -// $legend-font-weight: $font-weight-bold !default; -// $legend-padding: rem-calc(0 3) !default; - -// // We use these to style the prefix and postfix input elements -// $input-prefix-bg: scale-color($white, $lightness: -5%) !default; -// $input-prefix-border-color: scale-color($white, $lightness: -20%) !default; -// $input-prefix-border-size: 1px !default; -// $input-prefix-border-type: solid !default; -// $input-prefix-overflow: hidden !default; -// $input-prefix-font-color: $oil !default; -// $input-prefix-font-color-alt: $white !default; - -// // We use this setting to turn on/off HTML5 number spinners (the up/down arrows) -// $input-number-spinners: true !default; - -// // We use these to style the error states for inputs and labels -// $input-error-message-padding: rem-calc(6 9 9) !default; -// $input-error-message-top: -1px !default; -// $input-error-message-font-size: rem-calc(12) !default; -// $input-error-message-font-weight: $font-weight-normal !default; -// $input-error-message-font-style: italic !default; -// $input-error-message-font-color: $white !default; -// $input-error-message-bg-color: $alert-color !default; -// $input-error-message-font-color-alt: $oil !default; - -// // We use this to style the glowing effect of inputs when focused -// $glowing-effect-fade-time: 0.45s !default; -// $glowing-effect-color: $input-focus-border-color !default; - -// // Select variables -// $select-bg-color: $ghost !default; -// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; - -// // -// // @MIXINS -// // - -// // We use this mixin to give us form styles for rows inside of forms -// @mixin form-row-base { -// .row { margin: 0 ((-$form-spacing) / 2); - -// .column, -// .columns { padding: 0 ($form-spacing / 2); } - -// // Use this to collapse the margins of a form row -// &.collapse { margin: 0; - -// .column, -// .columns { padding: 0; } -// input { -// @include side-radius($opposite-direction, 0); -// } - -// } -// } -// input.column, -// input.columns, -// textarea.column, -// textarea.columns { padding-#{$default-float}: ($form-spacing / 2); } -// } - -// // @MIXIN -// // -// // We use this mixin to give all basic form elements their style -// @mixin form-element { -// background-color: $input-bg-color; -// font-family: $input-font-family; -// border: { -// style: $input-border-style; -// width: $input-border-width; -// color: $input-border-color; -// } -// box-shadow: $input-box-shadow; -// color: $input-font-color; -// display: block; -// font-size: $input-font-size; -// margin: 0 0 $form-spacing 0; -// padding: $form-spacing / 2; -// height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); -// width: 100%; -// @include box-sizing(border-box); -// @if $input-include-glowing-effect { -// @include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color); -// } -// // Basic focus styles -// &:focus { -// background: $input-focus-bg-color; -// border-color: $input-focus-border-color; -// outline: none; -// } -// // Disbaled Styles -// &:disabled { -// background-color: $input-disabled-bg; -// cursor: $input-disabled-cursor; -// } - -// // Disabled background input background color -// &[disabled], -// &[readonly], -// fieldset[disabled] & { -// background-color: $input-disabled-bg; -// cursor: $input-disabled-cursor; -// } -// } - -// // @MIXIN -// // -// // We use this mixin to create form labels -// // -// // $alignment - Alignment options. Default: false. Options: [right, inline, false] -// // $base-style - Control whether or not the base styles come through. Default: true. -// @mixin form-label($alignment:false, $base-style:true) { - -// // Control whether or not the base styles come through. -// @if $base-style { -// font-size: $form-label-font-size; -// color: $form-label-font-color; -// cursor: $form-label-pointer; -// display: block; -// font-weight: $form-label-font-weight; -// line-height: $form-label-line-height; -// margin-bottom: $form-label-bottom-margin; -// } - -// // Alignment options -// @if $alignment == right { -// float: none !important; -// text-align: right; -// } -// @else if $alignment == inline { -// margin: 0 0 $form-spacing 0; -// padding: $form-spacing / 2 + rem-calc($input-border-width) 0; -// } -// } - -// // We use this mixin to create postfix/prefix form Labels -// @mixin prefix-postfix-base { -// display: block; -// position: relative; -// z-index: 2; -// text-align: center; -// width: 100%; -// padding-top: 0; -// padding-bottom: 0; -// border-style: $input-prefix-border-type; -// border-width: $input-prefix-border-size; -// overflow: $input-prefix-overflow; -// font-size: $form-label-font-size; -// height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); -// line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); -// } - -// // @MIXIN -// // -// // We use this mixin to create prefix label styles -// // $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default; -// // $is-button - Toggle position settings if prefix is a button. Default:false -// // -// @mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) { - -// @if $bg { -// $bg-lightness: lightness($bg); -// background: $bg; -// border-#{$opposite-direction}: none; - -// // Control the font color based on background brightness -// @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; } -// @else { color: $input-prefix-font-color-alt; } -// } - -// @if $border { -// border-color: $border; -// } - -// @if $is-button { -// padding-#{$default-float}: 0; -// padding-#{$opposite-direction}: 0; -// padding-top: 0; -// padding-bottom: 0; -// text-align: center; -// border: none; -// } - -// } - -// // @MIXIN -// // -// // We use this mixin to create postfix label styles -// // $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default; -// // $is-button - Toggle position settings if prefix is a button. Default: false -// @mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) { - -// @if $bg { -// $bg-lightness: lightness($bg); -// background: $bg; -// border-#{$default-float}: none; - -// // Control the font color based on background brightness -// @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; } -// @else { color: $input-prefix-font-color-alt; } -// } - -// @if $border { -// border-color: $border; -// } - -// @if $is-button { -// padding-#{$default-float}: 0; -// padding-#{$opposite-direction}: 0; -// padding-top: 0; -// padding-bottom: 0; -// text-align: center; -// border: none; -// } - -// } - -// // We use this mixin to style fieldsets -// @mixin fieldset { -// border: $fieldset-border-width $fieldset-border-style $fieldset-border-color; -// padding: $fieldset-padding; -// margin: $fieldset-margin; - -// // and legend styles -// legend { -// font-weight: $legend-font-weight; -// background: $legend-bg; -// padding: $legend-padding; -// margin: 0; -// margin-#{$default-float}: rem-calc(-3); -// } -// } - -// // @MIXIN -// // -// // We use this mixin to control border and background color of error inputs -// // $color - Default: $alert-color (found in settings file) -// @mixin form-error-color($color:$alert-color) { -// border-color: $color; -// background-color: rgba($color, 0.1); - -// // Go back to normal on focus -// &:focus { -// background: $input-focus-bg-color; -// border-color: $input-focus-border-color; -// } -// } - -// // @MIXIN -// // -// // We use this simple mixin to style labels for error inputs -// // $color - Default:$alert-color. Found in settings file -// @mixin form-label-error-color($color:$alert-color) { color: $color; } - -// // @MIXIN -// // -// // We use this mixin to create error message styles -// // $bg - Default: $alert-color (Found in settings file) -// @mixin form-error-message($bg:$input-error-message-bg-color) { -// display: block; -// padding: $input-error-message-padding; -// margin-top: $input-error-message-top; -// margin-bottom: $form-spacing; -// font-size: $input-error-message-font-size; -// font-weight: $input-error-message-font-weight; -// font-style: $input-error-message-font-style; - -// // We can control the text color based on the brightness of the background. -// $bg-lightness: lightness($bg); -// background: $bg; -// @if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; } -// @else { color: $input-error-message-font-color-alt; } -// } - -// // We use this mixin to style select elements -// @mixin form-select { -// -webkit-appearance: none !important; -// border-radius: 0; -// background-color: $select-bg-color; - -// // Hide the dropdown arrow shown in newer IE versions -// &::-ms-expand { -// display: none; -// } - -// // The custom arrow has some fake horizontal padding so we can align it -// // from the right side of the element without relying on CSS3 -// background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+); - -// // We can safely use leftmost and rightmost now -// background-position: if($text-direction == 'rtl', 0%, 100%) center; - -// background-repeat: no-repeat; -// border: { -// style: $input-border-style; -// width: $input-border-width; -// color: $input-border-color; -// } -// padding: ($form-spacing / 2); -// font-size: $input-font-size; -// font-family: $body-font-family; -// color: $input-font-color; -// line-height: normal; -// @include radius(0); -// &.radius { @include radius($global-radius); } -// &:hover { -// background-color: $select-hover-bg-color; -// border-color: $input-focus-border-color; -// } -// // Disabled Styles -// &:disabled { -// background-color: $input-disabled-bg; -// cursor: $input-disabled-cursor; -// } -// } - -// // We use this mixin to turn on/off HTML5 number spinners -// @mixin html5number($browser, $on:true) { -// @if $on==false { -// @if $browser==webkit { -// -webkit-appearance: none; -// margin: 0; -// } @else if $browser==moz { -// -moz-appearance: textfield; -// } -// } -// } - -// @include exports("form") { -// @if $include-html-form-classes { -// /* Standard Forms */ -// form { margin: 0 0 $form-spacing; } - -// /* Using forms within rows, we need to set some defaults */ -// form .row { @include form-row-base; } - -// /* Label Styles */ -// label { @include form-label; -// &.right { @include form-label(right,false); } -// &.inline { @include form-label(inline,false); } -// /* Styles for required inputs */ -// small { -// text-transform: $form-label-small-transform; -// color: scale-color($form-label-font-color, $lightness: 15%); -// } -// } - -// /* Attach elements to the beginning or end of an input */ -// .prefix, -// .postfix { @include prefix-postfix-base; } - -// /* Adjust padding, alignment and radius if pre/post element is a button */ -// .postfix.button { @include button-size(false,false); @include postfix(false, false, true); } -// .prefix.button { @include button-size(false,false); @include prefix(false, false, true); } - -// .prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); } -// .postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); } -// .prefix.button.round { @include radius(0); @include side-radius($default-float, $button-round); } -// .postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); } - -// /* Separate prefix and postfix styles when on span or label so buttons keep their own */ -// span.prefix,label.prefix { @include prefix(); } -// span.postfix,label.postfix { @include postfix(); } - -// /* We use this to get basic styling on all basic form elements */ -// #{text-inputs(all, 'input')} { -// -webkit-appearance: none; -// border-radius: 0; -// @include form-element; -// @if $input-include-glowing-effect == false { -// @include single-transition(all, 0.15s, linear); -// } -// &.radius { -// @include radius($input-border-radius); -// } -// } - -// form { -// .row { -// .prefix-radius.row.collapse { -// input, -// textarea, -// select { @include radius(0); @include side-radius($opposite-direction, $button-radius); } -// .prefix { @include radius(0); @include side-radius($default-float, $button-radius); } -// } -// .postfix-radius.row.collapse { -// input, -// textarea, -// select { @include radius(0); @include side-radius($default-float, $button-radius); } -// .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); } -// } -// .prefix-round.row.collapse { -// input, -// textarea, -// select { @include radius(0); @include side-radius($opposite-direction, $button-round); } -// .prefix { @include radius(0); @include side-radius($default-float, $button-round); } -// } -// .postfix-round.row.collapse { -// input, -// textarea, -// select { @include radius(0); @include side-radius($default-float, $button-round); } -// .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); } -// } -// } -// } - -// input[type="submit"] { -// -webkit-appearance: none; -// border-radius: 0; -// } - -// /* Respect enforced amount of rows for textarea */ -// textarea[rows] { -// height: auto; -// } - -// /* Not allow resize out of parent */ -// textarea { -// max-width: 100%; -// } - -// /* Add height value for select elements to match text input height */ -// select { -// @include form-select; -// height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); -// } - -// /* Adjust margin for form elements below */ -// input[type="file"], -// input[type="checkbox"], -// input[type="radio"], -// select { -// margin: 0 0 $form-spacing 0; -// } - -// input[type="checkbox"] + label, -// input[type="radio"] + label { -// display: inline-block; -// margin-#{$default-float}: $form-spacing * .5; -// margin-#{$opposite-direction}: $form-spacing; -// margin-bottom: 0; -// vertical-align: baseline; -// } - -// /* Normalize file input width */ -// input[type="file"] { -// width:100%; -// } - -// /* HTML5 Number spinners settings */ -// input[type=number] { -// @include html5number(moz, $input-number-spinners) -// } -// input[type="number"]::-webkit-inner-spin-button, -// input[type="number"]::-webkit-outer-spin-button { -// @include html5number(webkit, $input-number-spinners); -// } - -// /* We add basic fieldset styling */ -// fieldset { -// @include fieldset; -// } - -// /* Error Handling */ - -// #{data('abide')} { -// .error small.error, .error span.error, span.error, small.error { -// @include form-error-message; -// } -// span.error, small.error { display: none; } -// } - -// span.error, small.error { -// @include form-error-message; -// } - -// .error { -// input, -// textarea, -// select { -// margin-bottom: 0; -// } - -// input[type="checkbox"], -// input[type="radio"] { -// margin-bottom: $form-spacing -// } - -// label, -// label.error { -// @include form-label-error-color; -// } - -// small.error { -// @include form-error-message; -// } - -// > label { -// > small { -// color: scale-color($form-label-font-color, $lightness: 15%); -// background: transparent; -// padding: 0; -// text-transform: $form-label-small-transform; -// font-style: normal; -// font-size: 60%; -// margin: 0; -// display: inline; -// } -// } - -// span.error-message { -// display: block; -// } -// } - -// input.error, -// textarea.error, -// select.error { -// margin-bottom: 0; -// } -// label.error { @include form-label-error-color; } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_global.scss b/app/styles/app/foundation/scss/foundation/components/_global.scss deleted file mode 100644 index cb2a9db4..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_global.scss +++ /dev/null @@ -1,480 +0,0 @@ -// Foundation by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -@import "../functions"; -// -// Foundation Variables -// - -// Data attribute namespace -// styles get applied to [data-mysite-plugin], etc -$namespace: false !default; - -// 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; - -// -// Global Foundation Mixins -// - -// @mixins -// -// We use this to control border radius. -// $radius - Default: $global-radius || 4px -@mixin radius($radius:$global-radius) { - @if $radius { - border-radius: $radius; - } -} - -// @mixins -// -// We use this to create equal side border radius on elements. -// $side - Options: left, right, top, bottom -@mixin side-radius($side, $radius:$global-radius) { - @if ($side == left or $side == right) { - -webkit-border-bottom-#{$side}-radius: $radius; - -webkit-border-top-#{$side}-radius: $radius; - border-bottom-#{$side}-radius: $radius; - border-top-#{$side}-radius: $radius; - } @else { - -webkit-#{$side}-left-radius: $radius; - -webkit-#{$side}-right-radius: $radius; - border-#{$side}-left-radius: $radius; - border-#{$side}-right-radius: $radius; - } -} - -// @mixins -// -// We can control whether or not we have inset shadows edges. -// $active - Default: true, Options: false -@mixin inset-shadow($active:true) { - box-shadow: $shiny-edge-size $shiny-edge-color inset; - - @if $active { &:active { - box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } } -} - -// @mixins -// -// We use this to add transitions to elements -// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties -// $speed - Default: 300ms -// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/ -@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) { - transition: $property $speed $ease; -} - -// @mixins -// -// We use this to add box-sizing across browser prefixes -@mixin box-sizing($type:border-box) { - -webkit-box-sizing: $type; // Android < 2.3, iOS < 4 - -moz-box-sizing: $type; // Firefox < 29 - box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1 -} - -// @mixins -// -// We use this to create isosceles triangles -// $triangle-size - Used to set border-size. No default, set a px or em size. -// $triangle-color - Used to set border-color which makes up triangle. No default -// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right -@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) { - content: ""; - display: block; - width: 0; - height: 0; - border: inset $triangle-size; - @if ($triangle-direction == top) { - border-color: $triangle-color transparent transparent transparent; - border-top-style: solid; - } - @if ($triangle-direction == bottom) { - border-color: transparent transparent $triangle-color transparent; - border-bottom-style: solid; - } - @if ($triangle-direction == left) { - border-color: transparent transparent transparent $triangle-color; - border-left-style: solid; - } - @if ($triangle-direction == right) { - border-color: transparent $triangle-color transparent transparent; - border-right-style: solid; - } -} - -// @mixins -// -// We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon -// $width - Width of hamburger icon in rem -// $left - If false, icon will be centered horizontally || explicitly set value in rem -// $top - If false, icon will be centered vertically || explicitly set value in rem -// $thickness - thickness of lines in hamburger icon, set value in px -// $gap - spacing between the lines in hamburger icon, set value in px -// $color - icon color -// $hover-color - icon color during hover -// $offcanvas - Set to true of @include in offcanvas -@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) { - span::after { - content: ""; - position: absolute; - display: block; - height: 0; - - @if $offcanvas { - @if $top { - top: $top; - } - @else { - top: 50%; - margin-top: (-$width/2); - } - @if $left { - left: $left; - } - @else { - left: ($tabbar-menu-icon-width - $width)/2; - } - } - @else { - top: 50%; - margin-top: -($width/2); - #{$opposite-direction}: $topbar-link-padding; - } - - box-shadow: - 0 0 0 $thickness $color, - 0 $gap + $thickness 0 $thickness $color, - 0 (2 * $gap + 2*$thickness) 0 $thickness $color; - width: $width; - } - span:hover:after { - box-shadow: - 0 0 0 $thickness $hover-color, - 0 $gap + $thickness 0 $thickness $hover-color, - 0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color; - } -} - -// We use this to do clear floats -@mixin clearfix { - &:before, &:after { content: " "; display: table; } - &:after { clear: both; } -} - -// @mixins -// -// We use this to add a glowing effect to block elements -// $selector - Used for selector state. Default: focus, Options: hover, active, visited -// $fade-time - Default: 300ms -// $glowing-effect-color - Default: fade-out($primary-color, .25) -@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) { - transition: box-shadow $fade-time, border-color $fade-time ease-in-out; - - &:#{$selector} { - box-shadow: 0 0 5px $glowing-effect-color; - border-color: $glowing-effect-color; - } -} - -// @mixins -// -// We use this to translate elements in 2D -// $horizontal: Default: 0 -// $vertical: Default: 0 -@mixin translate2d($horizontal:0, $vertical:0) { - transform: translate($horizontal,$vertical) -} - -// @mixins -// -// Makes an element visually hidden, but accessible. -// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility -@mixin element-invisible { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); -} - -// @mixins -// -// Turns off the element-invisible effect. -@mixin element-invisible-off { - position: static !important; - height: auto; - width: auto; - overflow: visible; - clip: auto; -} - -$white : #FFFFFF !default; -$ghost : #FAFAFA !default; -$snow : #F9F9F9 !default; -$vapor : #F6F6F6 !default; -$white-smoke : #F5F5F5 !default; -$silver : #EFEFEF !default; -$smoke : #EEEEEE !default; -$gainsboro : #DDDDDD !default; -$iron : #CCCCCC !default; -$base : #AAAAAA !default; -$aluminum : #999999 !default; -$jumbo : #888888 !default; -$monsoon : #777777 !default; -$steel : #666666 !default; -$charcoal : #555555 !default; -$tuatara : #444444 !default; -$oil : #333333 !default; -$jet : #222222 !default; -$black : #000000 !default; - -// We use these as default colors throughout -$primary-color: #008CBA !default; // bondi-blue -$secondary-color: #e7e7e7 !default; // white-lilac -$alert-color: #f04124 !default; // cinnabar -$success-color: #43AC6A !default; // sea-green -$warning-color: #f08a24 !default; // carrot -$info-color: #a0d3e8 !default; // cornflower - -// We use these to define default font stacks -$font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default; -$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !default; -$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace !default; - -// 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-bg: #fff !default; -$body-font-color: #222 !default; -$body-font-family: $font-family-sans-serif !default; -$body-font-weight: $font-weight-normal !default; -$body-font-style: normal !default; - -// We use this to control font-smoothing -$font-smoothing: antialiased !default; - -// We use these to control text direction settings -$text-direction: ltr !default; -$default-float: left !default; -$opposite-direction: right !default; -@if $text-direction == ltr { - $default-float: left; - $opposite-direction: right; -} @else { - $default-float: right; - $opposite-direction: left; -} - -// We use these to make sure border radius matches unless we want it different. -$global-radius: 3px !default; -$global-rounded: 1000px !default; - -// We use these to control inset shadow shiny edges and depressions. -$shiny-edge-size: 0 1px 0 !default; -$shiny-edge-color: rgba(#fff, .5) !default; -$shiny-edge-active-color: rgba(#000, .2) !default; - -// We use this to control whether or not CSS classes come through in the gem files. -$include-html-classes: true !default; -$include-print-styles: true !default; -$include-html-global-classes: $include-html-classes !default; - -$column-gutter: rem-calc(30) !default; - -// Media Query Ranges -$small-range: (0, 40em) !default; -$medium-range: (40.063em, 64em) !default; -$large-range: (64.063em, 90em) !default; -$xlarge-range: (90.063em, 120em) !default; -$xxlarge-range: (120.063em, 99999999em) !default; - - -$screen: "only screen" !default; - -$landscape: "#{$screen} and (orientation: landscape)" !default; -$portrait: "#{$screen} and (orientation: portrait)" !default; - -$small-up: $screen !default; -$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default; - -$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default; -$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default; - -$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default; -$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default; - -$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default; -$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default; - -$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default; -$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default; - -// Legacy -$small: $medium-up; -$medium: $medium-up; -$large: $large-up; - - -//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet -$cursor-auto-value: auto !default; -$cursor-crosshair-value: crosshair !default; -$cursor-default-value: default !default; -$cursor-pointer-value: pointer !default; -$cursor-help-value: help !default; -$cursor-text-value: text !default; - - -@include exports("global") { - - // Meta styles are included in all builds, as they are a dependancy of the Javascript. - // Used to provide media query values for javascript components. - // Forward slash placed around everything to convince PhantomJS to read the value. - - meta.foundation-version { - font-family: "/5.5.0/"; - } - - meta.foundation-mq-small { - font-family: "/" + unquote($small-up) + "/"; - width: lower-bound($small-range); - } - - meta.foundation-mq-small-only { - font-family: "/" + unquote($small-only) + "/"; - width: lower-bound($small-range); - } - - meta.foundation-mq-medium { - font-family: "/" + unquote($medium-up) + "/"; - width: lower-bound($medium-range); - } - - meta.foundation-mq-medium-only { - font-family: "/" + unquote($medium-only) + "/"; - width: lower-bound($medium-range); - } - - meta.foundation-mq-large { - font-family: "/" + unquote($large-up) + "/"; - width: lower-bound($large-range); - } - - meta.foundation-mq-large-only { - font-family: "/" + unquote($large-only) + "/"; - width: lower-bound($large-range); - } - - meta.foundation-mq-xlarge { - font-family: "/" + unquote($xlarge-up) + "/"; - width: lower-bound($xlarge-range); - } - - meta.foundation-mq-xlarge-only { - font-family: "/" + unquote($xlarge-only) + "/"; - width: lower-bound($xlarge-range); - } - - meta.foundation-mq-xxlarge { - font-family: "/" + unquote($xxlarge-up) + "/"; - width: lower-bound($xxlarge-range); - } - - meta.foundation-data-attribute-namespace { - font-family: #{$namespace}; - } - - @if $include-html-global-classes { - - // Must be 100% for off canvas to work - html, body { height: 100%; } - - // Set box-sizing globally to handle padding and border widths - *, - *:before, - *:after { - @include box-sizing(border-box); - } - - html, - body { font-size: $base-font-size; } - - // Default body styles - body { - background: $body-bg; - 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: $base-line-height; // Set to $base-line-height to take on browser default of 150% - position: relative; - cursor: $cursor-auto-value; - } - - a:hover { cursor: $cursor-pointer-value; } - - // Grid Defaults to get images and embeds to work properly - img { max-width: 100%; height: auto; } - - img { -ms-interpolation-mode: bicubic; } - - #map_canvas, - .map_canvas { - img, - embed, - object { max-width: none !important; - } - } - - // Miscellaneous useful HTML classes - .float-left { float: left !important; } - .float-right { float: right !important; } - .clearfix { @include clearfix; } - - // Hide visually and from screen readers - .hide { - display: none !important; - visibility: hidden; - } - - // Hide visually and from screen readers, but maintain layout - .invisible { visibility: hidden; } - - // Font smoothing - // Antialiased font smoothing works best for light text on a dark background. - // Apply to single elements instead of globally to body. - // Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac. - .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - - // Get rid of gap under images by making them display: inline-block; by default - img { - display: inline-block; - vertical-align: middle; - } - - // - // Global resets for forms - // - - // Make sure textarea takes on height automatically - textarea { height: auto; min-height: 50px; } - - // Make select elements 100% width by default - select { width: 100%; } - } -} diff --git a/app/styles/app/foundation/scss/foundation/components/_icon-bar.scss b/app/styles/app/foundation/scss/foundation/components/_icon-bar.scss deleted file mode 100644 index 90a01448..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_icon-bar.scss +++ /dev/null @@ -1,329 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - - -// // @name -// // @dependencies _global.scss - -// $include-html-icon-bar-classes: $include-html-classes !default; - -// // @variables - -// // We use these to style the icon-bar and items -// $icon-bar-bg: $oil !default; -// $icon-bar-font-color: $white !default; -// $icon-bar-font-color-hover: $icon-bar-font-color !default; -// $icon-bar-font-size: 1rem !default; -// $icon-bar-hover-color: $primary-color !default; -// $icon-bar-icon-color: $white !default; -// $icon-bar-icon-color-hover: $icon-bar-icon-color !default; -// $icon-bar-icon-size: 1.875rem !default; -// $icon-bar-image-width: 1.875rem !default; -// $icon-bar-image-height: 1.875rem !default; -// $icon-bar-active-color: $primary-color !default; -// $icon-bar-item-padding: 1.25rem !default; - -// // We use this to set default opacity and cursor for disabled icons. -// $icon-bar-disabled-opacity: 0.7 !default; -// $icon-bar-disabled-cursor: $cursor-default-value !default; - -// // -// // @mixins -// // - -// // We use this mixin to create the base styles for our Icon bar element. -// // -// @mixin icon-bar-base() { - -// width: 100%; -// font-size: 0; -// display: inline-block; - -// & > * { -// text-align: center; -// font-size: $icon-bar-font-size; -// width: 25%; -// margin: 0 auto; -// display: block; -// padding: $icon-bar-item-padding; -// float: left; - -// i, img { -// display: block; -// margin: 0 auto; - -// & + label { -// margin-top: .0625rem; -// } -// } - -// i { -// font-size: $icon-bar-icon-size; -// vertical-align: middle; -// } - -// img { -// width: $icon-bar-image-width; -// height: $icon-bar-image-height; -// } -// } - -// &.label-right > * { - -// i, img { -// margin: 0 .0625rem 0 0; -// display: inline-block; - -// & + label { -// margin-top: 0; -// } -// } - -// label { display: inline-block; } -// } - -// &.vertical.label-right > * { -// text-align: left; -// } - -// &.vertical, &.small-vertical{ -// height: 100%; -// width: auto; - -// .item { -// width: auto; -// margin: auto; -// float: none; -// } -// } - -// &.medium-vertical { -// @media #{$medium-up} { -// height: 100%; -// width: auto; - -// .item { -// width: auto; -// margin: auto; -// float: none; -// } -// } -// } -// &.large-vertical { -// @media #{$large-up} { -// height: 100%; -// width: auto; - -// .item { -// width: auto; -// margin: auto; -// float: none; -// } -// } -// } -// } - -// // We use this mixin to create the size styles for icon bars. -// @mixin icon-bar-size( -// $padding: $icon-bar-item-padding, -// $font-size: $icon-bar-font-size, -// $icon-size: $icon-bar-icon-size, -// $image-width: $icon-bar-image-width, -// $image-height: $icon-bar-image-height) { - -// & > * { -// font-size: $font-size; -// padding: $padding; - -// i, img { - -// & + label { -// margin-top: .0625rem; -// } -// } - -// i { -// font-size: $icon-size; -// } - -// img { -// width: $image-width; -// height: $image-height; -// } -// } - -// } - -// @mixin icon-bar-style( -// $bar-bg:$icon-bar-bg, -// $bar-font-color:$icon-bar-font-color, -// $bar-font-color-hover:$icon-bar-font-color-hover, -// $bar-hover-color:$icon-bar-hover-color, -// $bar-icon-color:$icon-bar-icon-color, -// $bar-icon-color-hover:$icon-bar-icon-color-hover, -// $bar-active-color:$icon-bar-active-color, -// $base-style:true, -// $disabled:false) { - -// @if $base-style { - -// background: $bar-bg; - -// & > * { -// label { color: $bar-font-color; } - -// i { color: $bar-icon-color; } -// } - -// & > a:hover { - -// background: $bar-hover-color; - -// label { color: $bar-font-color-hover; } - -// i { color: $bar-icon-color-hover; } -// } - -// & > a.active { - -// background: $bar-active-color; - -// label { color: $bar-font-color-hover; } - -// i { color: $bar-icon-color-hover; } -// } -// } -// @if $disabled { -// .item.disabled { -// opacity: $icon-bar-disabled-opacity; -// cursor: $icon-bar-disabled-cursor; -// >* { -// opacity: $icon-bar-disabled-opacity; -// cursor: $icon-bar-disabled-cursor; -// } -// } -// } - -// } - -// // We use this to quickly create icon bars with a single mixin -// // $height - The overall calculated height of the icon bar (horizontal) -// // $bar-bg - the background color of the bar -// // $bar-font-color - the font color -// // $bar-hover-color - okay these are pretty obvious variables -// // $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font -// // $bar-active-color - the color of an active / hover state -// // $base-style - Apply base styles? Default: true. -// // $disabled - Allow disabled icons? Default: false. - -// @mixin icon-bar( -// $bar-bg:$icon-bar-bg, -// $bar-font-color:$icon-bar-font-color, -// $bar-font-color-hover:$icon-bar-font-color-hover, -// $bar-hover-color:$icon-bar-hover-color, -// $bar-icon-color:$icon-bar-icon-color, -// $bar-icon-color-hover:$icon-bar-icon-color-hover, -// $bar-active-color:$icon-bar-active-color, -// $padding: $icon-bar-item-padding, -// $font-size: $icon-bar-font-size, -// $icon-size: $icon-bar-icon-size, -// $image-width: $icon-bar-image-width, -// $image-height: $icon-bar-image-height, -// $base-style:true, -// $disabled:false) { -// @include icon-bar-base(); -// @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height); -// @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled); -// } - -// @include exports("icon-bar") { -// @if $include-html-icon-bar-classes { -// .icon-bar { -// @include icon-bar; -// } -// } -// } - -// @if $include-html-icon-bar-classes { - -// // toolbar styles - -// .icon-bar { - -// // Counts - -// &.two-up { -// .item { width: 50%; } -// &.vertical .item, &.small-vertical .item { width: auto; } -// &.medium-vertical .item { -// @media #{$medium-up} { -// width: auto; -// } -// } -// &.large-vertical .item { -// @media #{$large-up} { -// width: auto; -// } -// } -// } -// &.three-up { -// .item { width: 33.3333%; } -// &.vertical .item, &.small-vertical .item { width: auto; } -// &.medium-vertical .item { -// @media #{$medium-up} { -// width: auto; -// } -// } -// &.large-vertical .item { -// @media #{$large-up} { -// width: auto; -// } -// } -// } -// &.four-up { -// .item { width: 25%; } -// &.vertical .item, &.small-vertical .item { width: auto; } -// &.medium-vertical .item { -// @media #{$medium-up} { -// width: auto; -// } -// } -// &.large-vertical .item { -// @media #{$large-up} { -// width: auto; -// } -// } -// } -// &.five-up { -// .item { width: 20%; } -// &.vertical .item, &.small-vertical .item { width: auto; } -// &.medium-vertical .item { -// @media #{$medium-up} { -// width: auto; -// } -// } -// &.large-vertical .item { -// @media #{$large-up} { -// width: auto; -// } -// } -// } -// &.six-up { -// .item { width: 16.66667%; } -// &.vertical .item, &.small-vertical .item { width: auto; } -// &.medium-vertical .item { -// @media #{$medium-up} { -// width: auto; -// } -// } -// &.large-vertical .item { -// @media #{$large-up} { -// width: auto; -// } -// } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_inline-lists.scss b/app/styles/app/foundation/scss/foundation/components/_inline-lists.scss deleted file mode 100644 index f492eae9..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_inline-lists.scss +++ /dev/null @@ -1,57 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-inline-list-classes: $include-html-classes !default; - -// // We use this to control the margins and padding of the inline list. -// $inline-list-top-margin: 0 !default; -// $inline-list-opposite-margin: 0 !default; -// $inline-list-bottom-margin: rem-calc(17) !default; -// $inline-list-default-float-margin: rem-calc(-22) !default; -// $inline-list-default-float-list-margin: rem-calc(22) !default; - -// $inline-list-padding: 0 !default; - -// // We use this to control the overflow of the inline list. -// $inline-list-overflow: hidden !default; - -// // We use this to control the list items -// $inline-list-display: block !default; - -// // We use this to control any elements within list items -// $inline-list-children-display: block !default; - -// // -// // @mixins -// // -// // We use this mixin to create inline lists -// @mixin inline-list { -// margin: $inline-list-top-margin auto $inline-list-bottom-margin auto; -// margin-#{$default-float}: $inline-list-default-float-margin; -// margin-#{$opposite-direction}: $inline-list-opposite-margin; -// padding: $inline-list-padding; -// list-style: none; -// overflow: $inline-list-overflow; - -// & > li { -// list-style: none; -// float: $default-float; -// margin-#{$default-float}: $inline-list-default-float-list-margin; -// display: $inline-list-display; -// &>* { display: $inline-list-children-display; } -// } -// } - -// @include exports("inline-list") { -// @if $include-html-inline-list-classes { -// .inline-list { -// @include inline-list(); -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_joyride.scss b/app/styles/app/foundation/scss/foundation/components/_joyride.scss deleted file mode 100644 index e0bbad83..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_joyride.scss +++ /dev/null @@ -1,222 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-joyride-classes: $include-html-classes !default; - -// // Controlling default Joyride styles -// $joyride-tip-bg: $oil !default; -// $joyride-tip-default-width: 300px !default; -// $joyride-tip-padding: rem-calc(18 20 24) !default; -// $joyride-tip-border: solid 1px $charcoal !default; -// $joyride-tip-radius: 4px !default; -// $joyride-tip-position-offset: 22px !default; - -// // Here, we're setting the tip font styles -// $joyride-tip-font-color: $white !default; -// $joyride-tip-font-size: rem-calc(14) !default; -// $joyride-tip-header-weight: $font-weight-bold !default; - -// // This changes the nub size -// $joyride-tip-nub-size: 10px !default; - -// // This adjusts the styles for the timer when its enabled -// $joyride-tip-timer-width: 50px !default; -// $joyride-tip-timer-height: 3px !default; -// $joyride-tip-timer-color: $steel !default; - -// // This changes up the styles for the close button -// $joyride-tip-close-color: $monsoon !default; -// $joyride-tip-close-size: 24px !default; -// $joyride-tip-close-weight: $font-weight-normal !default; - -// // When Joyride is filling the screen, we use this style for the bg -// $joyride-screenfill: rgba(0,0,0,0.5) !default; - - -// // We decided not to make a mixin for this because it relies on -// // predefined classes to work properly. -// @include exports("joyride") { -// @if $include-html-joyride-classes { - -// /* Foundation Joyride */ -// .joyride-list { display: none; } - -// /* Default styles for the container */ -// .joyride-tip-guide { -// display: none; -// position: absolute; -// background: $joyride-tip-bg; -// color: $joyride-tip-font-color; -// z-index: 101; -// top: 0; -// #{$default-float}: 2.5%; -// font-family: inherit; -// font-weight: $font-weight-normal; -// width: 95%; -// } - -// .lt-ie9 .joyride-tip-guide { -// max-width:800px; -// #{$default-float}: 50%; -// margin-#{$default-float}:-400px; -// } - -// .joyride-content-wrapper { -// width: 100%; - -// padding: $joyride-tip-padding; - -// .button { margin-bottom: 0 !important; } - -// .joyride-prev-tip { margin-right: 10px; } -// } - -// /* Add a little css triangle pip, older browser just miss out on the fanciness of it */ -// .joyride-tip-guide { -// .joyride-nub { -// display: block; -// position: absolute; -// #{$default-float}: $joyride-tip-position-offset; -// width: 0; -// height: 0; -// border: $joyride-tip-nub-size solid $joyride-tip-bg; - -// &.top { -// border-top-style: solid; -// border-color: $joyride-tip-bg; -// border-top-color: transparent !important; -// border-#{$default-float}-color: transparent !important; -// border-#{$opposite-direction}-color: transparent !important; -// top: -($joyride-tip-nub-size*2); -// } -// &.bottom { -// border-bottom-style: solid; -// border-color: $joyride-tip-bg !important; -// border-bottom-color: transparent !important; -// border-#{$default-float}-color: transparent !important; -// border-#{$opposite-direction}-color: transparent !important; -// bottom: -($joyride-tip-nub-size*2); -// } - -// &.right { right: -($joyride-tip-nub-size*2); } -// &.left { left: -($joyride-tip-nub-size*2); } -// } -// } - -// /* Typography */ -// .joyride-tip-guide h1, -// .joyride-tip-guide h2, -// .joyride-tip-guide h3, -// .joyride-tip-guide h4, -// .joyride-tip-guide h5, -// .joyride-tip-guide h6 { -// line-height: 1.25; -// margin: 0; -// font-weight: $joyride-tip-header-weight; -// color: $joyride-tip-font-color; -// } -// .joyride-tip-guide p { -// margin: rem-calc(0 0 18 0); -// font-size: $joyride-tip-font-size; -// line-height: 1.3; -// } - -// .joyride-timer-indicator-wrap { -// width: $joyride-tip-timer-width; -// height: $joyride-tip-timer-height; -// border: $joyride-tip-border; -// position: absolute; -// #{$opposite-direction}: rem-calc(17); -// bottom: rem-calc(16); -// } -// .joyride-timer-indicator { -// display: block; -// width: 0; -// height: inherit; -// background: $joyride-tip-timer-color; -// } - -// .joyride-close-tip { -// position: absolute; -// #{$opposite-direction}: 12px; -// top: 10px; -// color: $joyride-tip-close-color !important; -// text-decoration: none; -// font-size: $joyride-tip-close-size; -// font-weight: $joyride-tip-close-weight; -// line-height: .5 !important; - -// &:hover, -// &:focus { color: $smoke !important; } -// } - -// .joyride-modal-bg { -// position: fixed; -// height: 100%; -// width: 100%; -// background: transparent; -// background: $joyride-screenfill; -// z-index: 100; -// display: none; -// top: 0; -// #{$default-float}: 0; -// cursor: $cursor-pointer-value; -// } - -// .joyride-expose-wrapper { -// background-color: $white; -// position: absolute; -// border-radius: 3px; -// z-index: 102; -// box-shadow: 0 0 15px $white; -// } - -// .joyride-expose-cover { -// background: transparent; -// border-radius: 3px; -// position: absolute; -// z-index: 9999; -// top: 0; -// left: 0; -// } - - -// /* Styles for screens that are at least 768px; */ -// @media #{$small} { -// .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit; -// .joyride-nub { -// &.bottom { -// border-color: $joyride-tip-bg !important; -// border-bottom-color: transparent !important; -// border-#{$default-float}-color: transparent !important; -// border-#{$opposite-direction}-color: transparent !important; -// bottom: -($joyride-tip-nub-size*2); -// } -// &.right { -// border-color: $joyride-tip-bg !important; -// border-top-color: transparent !important; -// border-right-color: transparent !important; border-bottom-color: transparent !important; -// top: $joyride-tip-position-offset; -// left: auto; -// right: -($joyride-tip-nub-size*2); -// } -// &.left { -// border-color: $joyride-tip-bg !important; -// border-top-color: transparent !important; -// border-left-color: transparent !important; -// border-bottom-color: transparent !important; -// top: $joyride-tip-position-offset; -// left: -($joyride-tip-nub-size*2); -// right: auto; -// } -// } -// } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_keystrokes.scss b/app/styles/app/foundation/scss/foundation/components/_keystrokes.scss deleted file mode 100644 index 80da47de..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_keystrokes.scss +++ /dev/null @@ -1,61 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-keystroke-classes: $include-html-classes !default; - -// // We use these to control text styles. -// $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default; -// $keystroke-font-size: inherit !default; -// $keystroke-font-color: $jet !default; -// $keystroke-font-color-alt: $white !default; -// $keystroke-function-factor: -7% !default; - -// // We use this to control keystroke padding. -// $keystroke-padding: rem-calc(2 4 0) !default; - -// // We use these to control background and border styles. -// $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor) !default; -// $keystroke-border-style: solid !default; -// $keystroke-border-width: 1px !default; -// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default; -// $keystroke-radius: $global-radius !default; - -// // -// // @mixins -// // -// // We use this mixin to create keystroke styles. -// // $bg - Default: $keystroke-bg || scale-color($white, $lightness: $keystroke-function-factor) !default; -// @mixin keystroke($bg:$keystroke-bg) { -// // This find the lightness percentage of the background color. -// $bg-lightness: lightness($bg); - -// background-color: $bg; -// border-color: scale-color($bg, $lightness: $keystroke-function-factor); - -// // We adjust the font color based on the brightness of the background. -// @if $bg-lightness > 70% { color: $keystroke-font-color; } -// @else { color: $keystroke-font-color-alt; } - -// border-style: $keystroke-border-style; -// border-width: $keystroke-border-width; -// margin: 0; -// font-family: $keystroke-font; -// font-size: $keystroke-font-size; -// padding: $keystroke-padding; -// } - -// @include exports("keystroke") { -// @if $include-html-keystroke-classes { -// .keystroke, -// kbd { -// @include keystroke; -// @include radius($keystroke-radius); -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_labels.scss b/app/styles/app/foundation/scss/foundation/components/_labels.scss deleted file mode 100644 index cad17342..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_labels.scss +++ /dev/null @@ -1,106 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-label-classes: $include-html-classes !default; - -// // We use these to style the labels -// $label-padding: rem-calc(4 8 4) !default; -// $label-radius: $global-radius !default; - -// // We use these to style the label text -// $label-font-sizing: rem-calc(11) !default; -// $label-font-weight: $font-weight-normal !default; -// $label-font-color: $oil !default; -// $label-font-color-alt: $white !default; -// $label-font-family: $body-font-family !default; - -// // -// // @mixins -// // -// // We use this mixin to create a default label base. -// @mixin label-base { -// font-weight: $label-font-weight; -// font-family: $label-font-family; -// text-align: center; -// text-decoration: none; -// line-height: 1; -// white-space: nowrap; -// display: inline-block; -// position: relative; -// margin-bottom: auto; -// } - -// // @mixins -// // -// // We use this mixin to add label size styles. -// // $padding - Used to determine label padding. Default: $label-padding || rem-calc(4 8 4) !default -// // $text-size - Used to determine label text-size. Default: $text-size found in settings -// @mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) { -// @if $padding { padding: $padding; } -// @if $text-size { font-size: $text-size; } -// } - -// // @mixins -// // -// // We use this mixin to add label styles. -// // $bg - Default: $primary-color (found in settings file) -// // $radius - Default: false, Options: true, sets radius to $global-radius (found in settings file) -// @mixin label-style($bg:$primary-color, $radius:false) { - -// // We control which background color comes through -// @if $bg { - -// // This find the lightness percentage of the background color. -// $bg-lightness: lightness($bg); - -// background-color: $bg; - -// // We control the text color for you based on the background color. -// @if $bg-lightness < 70% { color: $label-font-color-alt; } -// @else { color: $label-font-color; } -// } - -// // We use this to control the radius on labels. -// @if $radius == true { @include radius($label-radius); } -// @else if $radius { @include radius($radius); } - -// } - -// // @mixins -// // -// // We use this to add close buttons to alerts -// // $padding - Default: $label-padding, -// // $text-size - Default: $label-font-sizing, -// // $bg - Default: $primary-color(found in settings file) -// // $radius - Default: false, Options: true which sets radius to $global-radius (found in settings file) -// @mixin label($padding:$label-padding, $text-size:$label-font-sizing, $bg:$primary-color, $radius:false) { - -// @include label-base; -// @include label-size($padding, $text-size); -// @include label-style($bg, $radius); -// } - -// @include exports("label") { -// @if $include-html-label-classes { -// .label { -// @include label-base; -// @include label-size; -// @include label-style; - -// &.radius { @include label-style(false, true); } -// &.round { @include label-style(false, $radius:1000px); } - -// &.alert { @include label-style($alert-color); } -// &.warning { @include label-style($warning-color); } -// &.success { @include label-style($success-color); } -// &.secondary { @include label-style($secondary-color); } -// &.info { @include label-style($info-color); } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_magellan.scss b/app/styles/app/foundation/scss/foundation/components/_magellan.scss deleted file mode 100644 index 64d044b0..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_magellan.scss +++ /dev/null @@ -1,34 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-magellan-classes: $include-html-classes !default; - -// $magellan-bg: $white !default; -// $magellan-padding: 10px !default; - -// @include exports("magellan") { -// @if $include-html-magellan-classes { - -// #{data('magellan-expedition')}, #{data('magellan-expedition-clone')} { -// background: $magellan-bg; -// z-index: 50; -// min-width: 100%; -// padding: $magellan-padding; - -// .sub-nav { -// margin-bottom: 0; -// dd { margin-bottom: 0; } -// a { -// line-height: 1.8em; -// } -// } -// } - -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_offcanvas.scss b/app/styles/app/foundation/scss/foundation/components/_offcanvas.scss deleted file mode 100644 index 7995c994..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_offcanvas.scss +++ /dev/null @@ -1,515 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; -// @import "type"; - -// // Off Canvas Tab Bar Variables -// $include-html-off-canvas-classes: $include-html-classes !default; - -// $tabbar-bg: $oil !default; -// $tabbar-height: rem-calc(45) !default; -// $tabbar-icon-width: $tabbar-height !default; -// $tabbar-line-height: $tabbar-height !default; -// $tabbar-color: $white !default; -// $tabbar-middle-padding: 0 rem-calc(10) !default; - -// // Off Canvas Divider Styles -// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%) !default; -// $tabbar-right-section-border: $tabbar-left-section-border; - - -// // Off Canvas Tab Bar Headers -// $tabbar-header-color: $white !default; -// $tabbar-header-weight: $font-weight-bold !default; -// $tabbar-header-line-height: $tabbar-height !default; -// $tabbar-header-margin: 0 !default; - -// // Off Canvas Menu Variables -// $off-canvas-width: rem-calc(250) !default; -// $off-canvas-bg: $oil !default; -// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%) !default; - -// // Off Canvas Menu List Variables -// $off-canvas-label-padding: 0.3rem rem-calc(15) !default; -// $off-canvas-label-color: $aluminum !default; -// $off-canvas-label-text-transform: uppercase !default; -// $off-canvas-label-font-size: rem-calc(12) !default; -// $off-canvas-label-font-weight: $font-weight-bold !default; -// $off-canvas-label-bg: $tuatara !default; -// $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default; -// $off-canvas-label-border-bottom: none !default; -// $off-canvas-label-margin:0 !default; -// $off-canvas-link-padding: rem-calc(10, 15) !default; -// $off-canvas-link-color: rgba($white, 0.7) !default; -// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default; -// $off-canvas-back-bg: #444 !default; -// $off-canvas-back-border-top: $off-canvas-label-border-top !default; -// $off-canvas-back-border-bottom: $off-canvas-label-border-bottom !default; -// $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%) !default; -// $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default; -// $off-canvas-back-hover-border-bottom: none !default; - -// // Off Canvas Menu Icon Variables -// $tabbar-menu-icon-color: $white !default; -// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%) !default; - -// $tabbar-menu-icon-text-indent: rem-calc(35) !default; -// $tabbar-menu-icon-width: $tabbar-icon-width !default; -// $tabbar-menu-icon-height: $tabbar-height !default; -// $tabbar-menu-icon-padding: 0 !default; - -// $tabbar-hamburger-icon-width: rem-calc(16) !default; -// $tabbar-hamburger-icon-left: false !default; -// $tabbar-hamburger-icon-top: false !default; -// $tabbar-hamburger-icon-thickness: 1px !default; -// $tabbar-hamburger-icon-gap: 6px !default; - -// // Off Canvas Back-Link Overlay -// $off-canvas-overlay-transition: background 300ms ease !default; -// $off-canvas-overlay-cursor: pointer !default; -// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5) !default; -// $off-canvas-overlay-background: rgba($white, 0.2) !default; -// $off-canvas-overlay-background-hover: rgba($white, 0.05) !default; - -// // Transition Variables -// $menu-slide: "transform 500ms ease" !default; - - -// // MIXINS -// // Remove transition flicker on phones -// @mixin kill-flicker { -// // -webkit-transform: translateZ(0x); -// -webkit-backface-visibility: hidden; -// } - -// // Basic properties for the content wraps -// @mixin wrap-base { -// position: relative; -// width: 100%; -// } - -// @mixin translate3d($tx,$ty,$tz) { -// -ms-transform: translate($tx,$ty); -// -webkit-transform: translate3d($tx,$ty,$tz); -// -moz-transform: translate3d($tx,$ty,$tz); -// -ms-transform: translate3d($tx,$ty,$tz); -// -o-transform: translate3d($tx,$ty,$tz); -// transform: translate3d($tx,$ty,$tz) -// } - -// // basic styles for off-canvas menu container -// @mixin off-canvas-menu($position) { -// @include kill-flicker; -// * { @include kill-flicker; } -// width: $off-canvas-width; -// top: 0; -// bottom: 0; -// position: absolute; -// overflow-x: hidden; -// overflow-y: auto; -// background: $off-canvas-bg; -// z-index: 1001; -// box-sizing: content-box; -// transition: transform 500ms ease 0s; -// -webkit-overflow-scrolling: touch; -// -ms-overflow-style: -ms-autohiding-scrollbar; - -// @if $position == left { -// @include translate3d(-100%,0,0); -// left: 0; -// } -// @if $position == right { -// @include translate3d(100%,0,0); -// right: 0; -// } -// } - -// // OFF CANVAS WRAP -// // Wrap visible content and prevent scroll bars -// @mixin off-canvas-wrap { -// @include kill-flicker; -// @include wrap-base; -// overflow: hidden; -// &.move-right, -// &.move-left { min-height: 100%; -webkit-overflow-scrolling: touch; } -// } - -// // INNER WRAP -// // Main content area that moves to reveal the off-canvas nav -// @mixin inner-wrap { -// // @include kill-flicker; -// // removed for now till chrome fixes backface issue -// @include wrap-base; -// @include clearfix; -// -webkit-transition: -webkit-#{$menu-slide}; -// -moz-transition: -moz-#{$menu-slide}; -// -ms-transition: -ms-#{$menu-slide}; -// -o-transition: -o-#{$menu-slide}; -// transition: #{$menu-slide}; -// } - -// // TAB BAR -// // This is the tab bar base -// @mixin tab-bar-base { -// @include kill-flicker; - -// // base styles -// background: $tabbar-bg; -// color: $tabbar-color; -// height: $tabbar-height; -// line-height: $tabbar-line-height; - -// // make sure it's below the .exit-off-canvas link -// position: relative; -// // z-index: 999; - -// // Typography -// h1,h2,h3,h4,h5,h6 { -// color: $tabbar-header-color; -// font-weight: $tabbar-header-weight; -// line-height: $tabbar-header-line-height; -// margin: $tabbar-header-margin; -// } -// h1,h2,h3,h4 { font-size: $h5-font-size; } -// } - -// // SMALL SECTIONS -// // These are small sections on the left and right that contain the off-canvas toggle buttons; -// @mixin tabbar-small-section($position) { -// width: $tabbar-icon-width; -// height: $tabbar-height; -// position: absolute; -// top: 0; -// @if $position == left { -// border-right: $tabbar-left-section-border; -// // box-shadow: 1px 0 0 scale-color($tabbar-bg, $lightness: 13%); -// left: 0; -// } -// @if $position == right { -// border-left: $tabbar-right-section-border; -// // box-shadow: -1px 0 0 scale-color($tabbar-bg, $lightness: -50%); -// right:0; -// } -// } - -// @mixin tab-bar-section { -// padding: $tabbar-middle-padding; -// position: absolute; -// text-align: center; -// height: $tabbar-height; -// top: 0; -// @media #{$medium-up} { -// &.left { text-align: left; } -// &.right { text-align: right; } -// } - -// // still need to make these non-presentational -// &.left { -// left: 0; -// right: $tabbar-icon-width; -// } -// &.right { -// left: $tabbar-icon-width; -// right: 0; -// } -// &.middle { -// left: $tabbar-icon-width; -// right: $tabbar-icon-width; -// } -// } - -// // OFF CANVAS LIST -// // This is the list of links in the off-canvas menu -// @mixin off-canvas-list { -// list-style-type: none; -// padding:0; -// margin:0; - -// li { -// label { -// display: block; -// padding: $off-canvas-label-padding; -// color: $off-canvas-label-color; -// text-transform: $off-canvas-label-text-transform; -// font-size: $off-canvas-label-font-size; -// font-weight: $off-canvas-label-font-weight; -// background: $off-canvas-label-bg; -// border-top: $off-canvas-label-border-top; -// border-bottom: $off-canvas-label-border-bottom; -// margin: $off-canvas-label-margin; -// } -// a { -// display: block; -// padding: $off-canvas-link-padding; -// color: $off-canvas-link-color; -// border-bottom: $off-canvas-link-border-bottom; -// transition: background 300ms ease; -// &:hover { -// background: $off-canvas-bg-hover; -// } -// } -// } - -// } - -// // BACK LINK -// // This is an overlay that, when clicked, will toggle off the off canvas menu -// @mixin back-link { -// @include kill-flicker; - -// transition: $off-canvas-overlay-transition; -// cursor: $off-canvas-overlay-cursor; -// box-shadow: $off-canvas-overlay-box-shadow; - -// // fill the screen -// display: block; -// position: absolute; -// background: $off-canvas-overlay-background; -// top: 0; -// bottom: 0; -// left:0; -// right:0; -// z-index: 1002; -// -webkit-tap-highlight-color: rgba(0,0,0,0); - -// @media #{$medium-up} { -// &:hover { -// background: $off-canvas-overlay-background-hover; -// } -// } -// } - -// // -// // DEFAULT CLASSES -// // -// @include exports("offcanvas") { -// @if $include-html-off-canvas-classes { - -// .off-canvas-wrap { @include off-canvas-wrap; } -// .inner-wrap { @include inner-wrap; } - -// .tab-bar { @include tab-bar-base; } - -// .left-small { @include tabbar-small-section($position: left); } -// .right-small { @include tabbar-small-section($position: right); } - -// .tab-bar-section { @include tab-bar-section; } - -// // MENU BUTTON -// // This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future. -// .tab-bar .menu-icon { -// text-indent: $tabbar-menu-icon-text-indent; -// width: $tabbar-menu-icon-width; -// height: $tabbar-menu-icon-height; -// display: block; -// padding: $tabbar-menu-icon-padding; -// color: $tabbar-menu-icon-color; -// position: relative; -// transform: translate3d(0,0,0); - -// // @include for the hamburger menu-icon -// // -// // Arguments as follows: ($width, $left, $top, $thickness, $gap, $color, $hover-color) -// // $width - Width of hamburger icon in rem Default: $tabbar-hamburger-icon-width. -// // $left - If false, icon will be centered horizontally || explicitly set value in rem Default: $tabbar-hamburger-icon-left= False -// // $top - If false, icon will be centered vertically || explicitly set value in rem Default: = False -// // $thickness - thickness of lines in hamburger icon, set value in px Default: $tabbar-hamburger-icon-thickness = 1px -// // $gap - spacing between the lines in hamburger icon, set value in px Default: $tabbar-hamburger-icon-gap = 6px -// // $color - icon color Default: $tabbar-menu-icon-color -// // $hover-color - icon color when hovered Default: $tabbar-menu-icon-hover -// // $offcanvas - Set to true -// @include hamburger($tabbar-hamburger-icon-width, $tabbar-hamburger-icon-left, $tabbar-hamburger-icon-top, $tabbar-hamburger-icon-thickness, $tabbar-hamburger-icon-gap, $tabbar-menu-icon-color, $tabbar-menu-icon-hover, true) -// } - -// .left-off-canvas-menu { @include off-canvas-menu($position: left); } -// .right-off-canvas-menu { @include off-canvas-menu($position: right); } - -// ul.off-canvas-list { @include off-canvas-list; } - - -// // ANIMATION CLASSES -// // These classes are added with JS and trigger the actual animation. -// .move-right { -// > .inner-wrap { -// @include translate3d($off-canvas-width,0,0); -// } -// .exit-off-canvas { @include back-link;} -// } - -// .move-left { -// > .inner-wrap { -// @include translate3d(-($off-canvas-width),0,0); - -// } -// .exit-off-canvas { @include back-link; } -// } -// .offcanvas-overlap { -// .left-off-canvas-menu, .right-off-canvas-menu { -// -ms-transform: none; -// -webkit-transform: none; -// -moz-transform: none; -// -o-transform: none; -// transform: none; -// z-index: 1003; -// } -// .exit-off-canvas { @include back-link; } -// } -// .offcanvas-overlap-left { -// .right-off-canvas-menu { -// -ms-transform: none; -// -webkit-transform: none; -// -moz-transform: none; -// -o-transform: none; -// transform: none; -// z-index: 1003; -// } -// .exit-off-canvas { @include back-link; } -// } -// .offcanvas-overlap-right { -// .left-off-canvas-menu { -// -ms-transform: none; -// -webkit-transform: none; -// -moz-transform: none; -// -o-transform: none; -// transform: none; -// z-index: 1003; -// } -// .exit-off-canvas { @include back-link; } -// } - -// // Older browsers -// .no-csstransforms { -// .left-off-canvas-menu { left: -($off-canvas-width); } -// .right-off-canvas-menu { right: -($off-canvas-width); } - -// .move-left > .inner-wrap { right: $off-canvas-width; } -// .move-right > .inner-wrap { left: $off-canvas-width; } -// } - -// } -// } - -// // -// // Off-Canvas Submenu Classes -// // -// @mixin off-canvas-submenu($position) { -// @include kill-flicker; -// * { @include kill-flicker; } -// width: $off-canvas-width; -// top: 0; -// bottom: 0; -// position: absolute; -// margin: 0; -// overflow-x: hidden; -// overflow-y: auto; -// background: $off-canvas-bg; -// z-index: 1002; -// box-sizing: content-box; -// -webkit-overflow-scrolling: touch; -// @if $position == left { -// @include translate3d(-100%,0,0); -// left: 0; -// } -// @if $position == right { -// @include translate3d(100%,0,0); -// right: 0; -// } -// -webkit-transition: -webkit-#{$menu-slide}; -// -moz-transition: -moz-#{$menu-slide}; -// -ms-transition: -ms-#{$menu-slide}; -// -o-transition: -o-#{$menu-slide}; -// transition: #{$menu-slide}; - -// //back button style like label -// .back > a { -// padding: $off-canvas-label-padding; -// color: $off-canvas-label-color; -// text-transform: $off-canvas-label-text-transform; -// font-weight: $off-canvas-label-font-weight; -// background: $off-canvas-back-bg; -// border-top: $off-canvas-back-border-top; -// border-bottom: $off-canvas-back-border-bottom; -// &:hover { -// background: $off-canvas-back-hover-bg; -// border-top: $off-canvas-back-hover-border-top; -// border-bottom: $off-canvas-back-hover-border-bottom; -// } -// margin: $off-canvas-label-margin; -// @if $position == right { -// @if $text-direction == rtl { -// &:before { -// @include icon-double-arrows($position: left); -// } -// } @else { -// &:after { -// @include icon-double-arrows($position: right); -// } -// } -// } -// @if $position == left { -// @if $text-direction == rtl { -// &:after { -// @include icon-double-arrows($position: right); -// } -// } @else { -// &:before { -// @include icon-double-arrows($position: left); -// } -// } -// } -// } -// } -// //Left double angle quote or Right double angle quote chars -// @mixin icon-double-arrows ($position){ -// @if $position == left { -// content: "\AB"; -// @if $text-direction == rtl { -// margin-left: 0.5rem; -// } @else { -// margin-right: 0.5rem; -// } -// } -// @if $position == right { -// content: "\BB"; -// @if $text-direction == rtl { -// margin-right: 0.5rem; -// } @else { -// margin-left: 0.5rem; -// } -// } -// display: inline; -// } - -// @if $include-html-off-canvas-classes { -// .left-submenu { -// @include off-canvas-submenu($position: left); -// &.move-right, &.offcanvas-overlap-right, &.offcanvas-overlap { -// @include translate3d(0%,0,0); -// } -// } - -// .right-submenu { -// @include off-canvas-submenu($position: right); -// &.move-left, &.offcanvas-overlap-left, &.offcanvas-overlap { -// @include translate3d(0%,0,0); -// } -// } - -// @if $text-direction == rtl { -// .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { -// @include icon-double-arrows($position: left); -// } -// .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { -// @include icon-double-arrows($position: right); -// } -// } @else { -// .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { -// @include icon-double-arrows($position: right); -// } -// .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { -// @include icon-double-arrows($position: left); -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_orbit.scss b/app/styles/app/foundation/scss/foundation/components/_orbit.scss deleted file mode 100644 index f2558c1c..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_orbit.scss +++ /dev/null @@ -1,368 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // @variables -// // -// $include-html-orbit-classes: $include-html-classes !default; - -// // We use these to control the caption styles -// $orbit-container-bg: none !default; -// $orbit-caption-bg: rgba(51,51,51, 0.8) !default; -// $orbit-caption-font-color: $white !default; -// $orbit-caption-font-size: rem-calc(14) !default; -// $orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under" -// $orbit-caption-padding: rem-calc(10 14) !default; -// $orbit-caption-height: auto !default; - -// // We use these to control the left/right nav styles -// $orbit-nav-bg: transparent !default; -// $orbit-nav-bg-hover: rgba(0,0,0,0.3) !default; -// $orbit-nav-arrow-color: $white !default; -// $orbit-nav-arrow-color-hover: $white !default; - -// // We use these to control the timer styles -// $orbit-timer-bg: rgba(255,255,255,0.3) !default; -// $orbit-timer-show-progress-bar: true !default; - -// // We use these to control the bullet nav styles -// $orbit-bullet-nav-color: $iron !default; -// $orbit-bullet-nav-color-active: $aluminum !default; -// $orbit-bullet-radius: rem-calc(9) !default; - -// // We use these to controls the style of slide numbers -// $orbit-slide-number-bg: rgba(0,0,0,0) !default; -// $orbit-slide-number-font-color: $white !default; -// $orbit-slide-number-padding: rem-calc(5) !default; - -// // Graceful Loading Wrapper and preloader -// $wrapper-class: "slideshow-wrapper" !default; -// $preloader-class: "preloader" !default; - -// // Hide controls on small -// $orbit-nav-hide-for-small: true !default; -// $orbit-bullet-hide-for-small: true !default; -// $orbit-timer-hide-for-small: true !default; - - -// @include exports("orbit") { -// @if $include-html-orbit-classes { - -// @-webkit-keyframes rotate { -// from { -webkit-transform: rotate(0deg); } -// to { -webkit-transform: rotate(360deg); } -// } -// @-moz-keyframes rotate { -// from { -moz-transform: rotate(0deg); } -// to { -moz-transform: rotate(360deg); } -// } -// @-o-keyframes rotate { -// from { -o-transform: rotate(0deg); } -// to { -o-transform: rotate(360deg); } -// } -// @keyframes rotate { -// from { transform: rotate(0deg); } -// to { transform: rotate(360deg); } -// } - -// /* Orbit Graceful Loading */ -// .#{$wrapper-class} { -// position: relative; - -// ul { -// // Prevent bullets showing before .orbit-container is loaded -// list-style-type: none; -// margin: 0; - -// // Hide all list items -// li, -// li .orbit-caption { display: none; } - -// // ...except for the first one -// li:first-child { display: block; } -// } - -// .orbit-container { background-color: transparent; - -// // Show images when .orbit-container is loaded -// li { display: block; - -// .orbit-caption { display: block; } -// } -// .orbit-bullets li { -// display: inline-block; -// } -// } - -// // Orbit preloader -// .#{$preloader-class} { -// display: block; -// width: 40px; -// height: 40px; -// position: absolute; -// top: 50%; -// left: 50%; -// margin-top: -20px; -// margin-left: -20px; -// border: solid 3px; -// border-color: $charcoal $white; -// @include radius(1000px); -// animation-name: rotate; -// animation-duration: 1.5s; -// animation-iteration-count: infinite; -// animation-timing-function: linear; -// } -// } - - -// .orbit-container { -// overflow: hidden; -// width: 100%; -// position: relative; -// background: $orbit-container-bg; - -// .orbit-slides-container { -// list-style: none; -// margin: 0; -// padding: 0; -// position: relative; - -// // Prevents images (and captions) from disappearing after first rotation on Chrome for Android -// -webkit-transform: translateZ(0); - -// img { display: block; max-width: 100%; } - -// &>* { -// position: absolute; -// top: 0; -// width: 100%; -// @if $text-direction == rtl { -// margin-right: 100%; -// } -// @else { -// margin-left: 100%; -// } - -// &:first-child { -// @if $text-direction == rtl { -// margin-right: 0; -// } -// @else { -// margin-left: 0; -// } -// } - -// .orbit-caption { -// @if $orbit-caption-position == "bottom" { -// position: absolute; -// bottom: 0; -// } @else if $orbit-caption-position == "under" { -// position: relative; -// } - -// background-color: $orbit-caption-bg; -// color: $orbit-caption-font-color; -// width: 100%; -// padding: $orbit-caption-padding; -// font-size: $orbit-caption-font-size; -// } -// } -// } - -// .orbit-slide-number { -// position: absolute; -// top: 10px; -// #{$default-float}: 10px; -// font-size: 12px; -// span { font-weight: 700; padding: $orbit-slide-number-padding;} -// color: $orbit-slide-number-font-color; -// background: $orbit-slide-number-bg; -// z-index: 10; -// } - -// .orbit-timer { -// position: absolute; -// top: 12px; -// #{$opposite-direction}: 10px; -// height: 6px; -// width: 100px; -// z-index: 10; -// .orbit-progress { -// @if $orbit-timer-show-progress-bar { -// height: 3px; -// background-color: $orbit-timer-bg; -// display: block; -// width: 0; -// position: relative; -// right: 20px; -// top: 5px; -// } -// } - -// // Play button -// & > span { -// display: none; -// position: absolute; -// top: 0; -// #{$opposite-direction}: 0; -// width: 11px; -// height: 14px; -// border: solid 4px $white; -// border-top: none; -// border-bottom: none; -// } - -// // Pause button -// &.paused { -// & > span { -// #{$opposite-direction}: -4px; -// top: 0; -// width: 11px; -// height: 14px; -// border: inset 8px; -// border-left-style: solid; -// border-color: transparent; -// border-left-color: $white; -// &.dark { -// border-left-color: $oil; -// } -// } -// } -// } - - - -// &:hover .orbit-timer > span { display: block; } - -// // Let's get those controls to be right in the center on each side -// .orbit-prev, -// .orbit-next { -// position: absolute; -// top: 45%; -// margin-top: -25px; -// width: 36px; -// height: 60px; -// line-height: 50px; -// color: white; -// background-color: $orbit-nav-bg; -// text-indent: -9999px !important; -// z-index: 10; - -// &:hover { -// background-color: $orbit-nav-bg-hover; -// } - -// & > span { -// position: absolute; -// top: 50%; -// margin-top: -10px; -// display: block; -// width: 0; -// height: 0; -// border: inset 10px; -// } -// } -// .orbit-prev { #{$default-float}: 0; -// & > span { -// border-#{$opposite-direction}-style: solid; -// border-color: transparent; -// border-#{$opposite-direction}-color: $orbit-nav-arrow-color; -// } -// &:hover > span { -// border-#{$opposite-direction}-color: $orbit-nav-arrow-color-hover; -// } -// } -// .orbit-next { #{$opposite-direction}: 0; -// & > span { -// border-color: transparent; -// border-#{$default-float}-style: solid; -// border-#{$default-float}-color: $orbit-nav-arrow-color; -// #{$default-float}: 50%; -// margin-#{$default-float}: -4px; -// } -// &:hover > span { -// border-#{$default-float}-color: $orbit-nav-arrow-color-hover; -// } -// } -// } - -// .orbit-bullets-container { text-align: center; } -// .orbit-bullets { -// margin: 0 auto 30px auto; -// overflow: hidden; -// position: relative; -// top: 10px; -// float: none; -// text-align: center; -// display: block; - -// li { -// cursor:pointer; -// display: inline-block; -// width: $orbit-bullet-radius; -// height: $orbit-bullet-radius; -// background: $orbit-bullet-nav-color; -// // float: $default-float; -// float: none; -// margin-#{$opposite-direction}: 6px; -// @include radius(1000px); - -// &.active { -// background: $orbit-bullet-nav-color-active; -// } - -// &:last-child { margin-#{$opposite-direction}: 0; } -// } -// } - -// .touch { -// .orbit-container { -// .orbit-prev, -// .orbit-next { display: none; } -// } - -// .orbit-bullets { display: none; } -// } - - -// @media #{$medium-up} { - -// .touch { -// .orbit-container { -// .orbit-prev, -// .orbit-next { display: inherit; } -// } - -// .orbit-bullets { display: block; } -// } - -// } - -// @media #{$small-only} { -// .orbit-stack-on-small { -// .orbit-slides-container {height: auto !important;} -// .orbit-slides-container > * { -// position: relative; -// margin:0 !important; -// opacity:1 !important; -// } - -// .orbit-slide-number { -// display: none; -// } -// } - -// @if $orbit-timer-hide-for-small { -// .orbit-timer{display: none;} -// } -// @if $orbit-nav-hide-for-small { -// .orbit-next,.orbit-prev{display: none;} -// } -// @if $orbit-bullet-hide-for-small { -// .orbit-bullets{display: none;} -// } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_pagination.scss b/app/styles/app/foundation/scss/foundation/components/_pagination.scss deleted file mode 100644 index 48ebe100..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_pagination.scss +++ /dev/null @@ -1,162 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-pagination-classes: $include-html-classes !default; - -// // We use these to control the pagination container -// $pagination-height: rem-calc(24) !default; -// $pagination-margin: rem-calc(-5) !default; - -// // We use these to set the list-item properties -// $pagination-li-float: $default-float !default; -// $pagination-li-height: rem-calc(24) !default; -// $pagination-li-font-color: $jet !default; -// $pagination-li-font-size: rem-calc(14) !default; -// $pagination-li-margin: rem-calc(5) !default; - -// // We use these for the pagination anchor links -// $pagination-link-pad: rem-calc(1 10 1) !default; -// $pagination-link-font-color: $aluminum !default; -// $pagination-link-active-bg: scale-color($white, $lightness: -10%) !default; - -// // We use these for disabled anchor links -// $pagination-link-unavailable-cursor: default !default; -// $pagination-link-unavailable-font-color: $aluminum !default; -// $pagination-link-unavailable-bg-active: transparent !default; - -// // We use these for currently selected anchor links -// $pagination-link-current-background: $primary-color !default; -// $pagination-link-current-font-color: $white !default; -// $pagination-link-current-font-weight: $font-weight-bold !default; -// $pagination-link-current-cursor: default !default; -// $pagination-link-current-active-bg: $primary-color !default; - -// // @mixins -// // -// // Style the pagination container. Currently only used when centering elements. -// // $center - Default: false, Options: true -// @mixin pagination-container($center:false) { -// @if $center { text-align: center; } -// } - -// // @mixins -// // Style unavailable list items -// @mixin pagination-unavailable-item { -// a, button { -// cursor: $pagination-link-unavailable-cursor; -// color: $pagination-link-unavailable-font-color; -// } -// &:hover a, -// & a:focus, - -// &:hover button, -// & button:focus -// { background: $pagination-link-unavailable-bg-active; } -// } -// // @mixins -// // Style the current list item. Do not assume that the current item has -// // an anchor element. -// // $has-anchor - Default: true, Options: false -// @mixin pagination-current-item($has-anchor: true) { -// @if $has-anchor { -// a, button { -// background: $pagination-link-current-background; -// color: $pagination-link-current-font-color; -// font-weight: $pagination-link-current-font-weight; -// cursor: $pagination-link-current-cursor; - -// &:hover, -// &:focus { background: $pagination-link-current-active-bg; } -// } -// } @else { -// height: auto; -// padding: $pagination-link-pad; -// background: $pagination-link-current-background; -// color: $pagination-link-current-font-color; -// font-weight: $pagination-link-current-font-weight; -// cursor: $pagination-link-current-cursor; -// @include radius; - -// &:hover, -// &:focus { background: $pagination-link-current-active-bg; } -// } -// } - -// // @mixins -// // -// // We use this mixin to set the properties for the creating Foundation pagination -// // $center - Left or center align the li elements. Default: false -// // $base-style - Sets base styles for pagination. Default: true, Options: false -// // $use-default-classes - Makes unavailable & current classes available for use. Default: true -// @mixin pagination($center:false, $base-style:true, $use-default-classes:true) { - -// @if $base-style { -// display: block; -// min-height: $pagination-height; -// margin-#{$default-float}: $pagination-margin; - -// li { -// height: $pagination-li-height; -// color: $pagination-li-font-color; -// font-size: $pagination-li-font-size; -// margin-#{$default-float}: $pagination-li-margin; - -// a, button { -// display: block; -// padding: $pagination-link-pad; -// color: $pagination-link-font-color; -// background: none; -// @include radius; -// font-weight: normal; -// font-size: 1em; -// line-height: inherit; -// @include single-transition(background-color); -// } - -// &:hover a, -// a:focus, -// &:hover button, -// button:focus -// { background: $pagination-link-active-bg; } - -// @if $use-default-classes { -// &.unavailable { @include pagination-unavailable-item(); } -// &.current { @include pagination-current-item(); } -// } -// } -// } - -// // Left or center align the li elements -// li { -// @if $center { -// float: none; -// display: inline-block; -// } @else { -// float: $pagination-li-float; -// display: block; -// } -// } -// } - -// @include exports("pagination") { -// @if $include-pagination-classes { -// ul.pagination { -// @include pagination; -// } - -// /* Pagination centred wrapper */ -// .pagination-centered { -// @include pagination-container(true); - -// ul.pagination { -// @include pagination(true, false); -// } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_panels.scss b/app/styles/app/foundation/scss/foundation/components/_panels.scss deleted file mode 100644 index 173195cf..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_panels.scss +++ /dev/null @@ -1,101 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-panel-classes: $include-html-classes !default; - -// // We use these to control the background and border styles -// $panel-bg: scale-color($white, $lightness: -5%) !default; -// $panel-border-style: solid !default; -// $panel-border-size: 1px !default; - -// // We use this % to control how much we darken things on hover -// $panel-function-factor: -11% !default; -// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor) !default; - -// // We use these to set default inner padding and bottom margin -// $panel-margin-bottom: rem-calc(20) !default; -// $panel-padding: rem-calc(20) !default; - -// // We use these to set default font colors -// $panel-font-color: $oil !default; -// $panel-font-color-alt: $white !default; - -// $panel-header-adjust: true !default; -// $callout-panel-link-color: $primary-color !default; -// $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%) !default; -// // -// // @mixins -// // -// // We use this mixin to create panels. -// // $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default -// // $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20) -// // $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true -// @mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) { - -// @if $bg { -// $bg-lightness: lightness($bg); - -// border-style: $panel-border-style; -// border-width: $panel-border-size; -// border-color: scale-color($bg, $lightness: $panel-function-factor); -// margin-bottom: $panel-margin-bottom; -// padding: $padding; - -// background: $bg; -// @if $bg-lightness >= 50% { color: $panel-font-color; } -// @else { color: $panel-font-color-alt; } - -// // Respect the padding, fool. -// &>:first-child { margin-top: 0; } -// &>:last-child { margin-bottom: 0; } - -// @if $adjust { -// // We set the font color based on the darkness of the bg. -// @if $bg-lightness >= 50% { -// h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; } -// } -// @else { -// h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; } -// } - -// // reset header line-heights for panels -// h1,h2,h3,h4,h5,h6 { -// line-height: 1; margin-bottom: rem-calc(20) / 2; -// &.subheader { line-height: 1.4; } -// } -// } -// } -// } - -// @include exports("panel") { -// @if $include-html-panel-classes { - -// /* Panels */ -// .panel { @include panel; - -// &.callout { -// @include panel(scale-color($primary-color, $lightness: 94%)); -// a:not(.button) { -// color: $callout-panel-link-color; - -// &:hover, -// &:focus { -// color: $callout-panel-link-color-hover; -// } -// } -// } - -// &.radius { -// @include radius; -// } - -// } - -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_pricing-tables.scss b/app/styles/app/foundation/scss/foundation/components/_pricing-tables.scss deleted file mode 100644 index 34318580..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_pricing-tables.scss +++ /dev/null @@ -1,150 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-pricing-classes: $include-html-classes !default; - -// // We use this to control the border color -// $price-table-border: solid 1px $gainsboro !default; - -// // We use this to control the bottom margin of the pricing table -// $price-table-margin-bottom: rem-calc(20) !default; - -// // We use these to control the title styles -// $price-title-bg: $oil !default; -// $price-title-padding: rem-calc(15 20) !default; -// $price-title-align: center !default; -// $price-title-color: $smoke !default; -// $price-title-weight: $font-weight-normal !default; -// $price-title-size: rem-calc(16) !default; -// $price-title-font-family: $body-font-family !default; - -// // We use these to control the price styles -// $price-money-bg: $vapor !default; -// $price-money-padding: rem-calc(15 20) !default; -// $price-money-align: center !default; -// $price-money-color: $oil !default; -// $price-money-weight: $font-weight-normal !default; -// $price-money-size: rem-calc(32) !default; -// $price-money-font-family: $body-font-family !default; - - -// // We use these to control the description styles -// $price-bg: $white !default; -// $price-desc-color: $monsoon !default; -// $price-desc-padding: rem-calc(15) !default; -// $price-desc-align: center !default; -// $price-desc-font-size: rem-calc(12) !default; -// $price-desc-weight: $font-weight-normal !default; -// $price-desc-line-height: 1.4 !default; -// $price-desc-bottom-border: dotted 1px $gainsboro !default; - -// // We use these to control the list item styles -// $price-item-color: $oil !default; -// $price-item-padding: rem-calc(15) !default; -// $price-item-align: center !default; -// $price-item-font-size: rem-calc(14) !default; -// $price-item-weight: $font-weight-normal !default; -// $price-item-bottom-border: dotted 1px $gainsboro !default; - -// // We use these to control the CTA area styles -// $price-cta-bg: $white !default; -// $price-cta-align: center !default; -// $price-cta-padding: rem-calc(20 20 0) !default; - -// // @mixins -// // -// // We use this to create the container element for the pricing tables -// @mixin pricing-table-container { -// border: $price-table-border; -// margin-#{$default-float}: 0; -// margin-bottom: $price-table-margin-bottom; - -// & * { -// list-style: none; -// line-height: 1; -// } -// } -// // @mixins -// // -// // We use this mixin to create the pricing table title styles -// @mixin pricing-table-title { -// background-color: $price-title-bg; -// padding: $price-title-padding; -// text-align: $price-title-align; -// color: $price-title-color; -// font-weight: $price-title-weight; -// font-size: $price-title-size; -// font-family: $price-title-font-family; -// } - -// // @mixins -// // -// // We use this mixin to control the pricing table price styles -// @mixin pricing-table-price { -// background-color: $price-money-bg; -// padding: $price-money-padding; -// text-align: $price-money-align; -// color: $price-money-color; -// font-weight: $price-money-weight; -// font-size: $price-money-size; -// font-family: $price-money-font-family; -// } - -// // @mixins -// // -// // We use this mixin to create the description styles for the pricing table -// @mixin pricing-table-description { -// background-color: $price-bg; -// padding: $price-desc-padding; -// text-align: $price-desc-align; -// color: $price-desc-color; -// font-size: $price-desc-font-size; -// font-weight: $price-desc-weight; -// line-height: $price-desc-line-height; -// border-bottom: $price-desc-bottom-border; -// } - -// // @mixins -// // -// // We use this mixin to style the bullet items in the pricing table -// @mixin pricing-table-bullet { -// background-color: $price-bg; -// padding: $price-item-padding; -// text-align: $price-item-align; -// color: $price-item-color; -// font-size: $price-item-font-size; -// font-weight: $price-item-weight; -// border-bottom: $price-item-bottom-border; -// } - -// // @mixins -// // -// // We use this mixin to style the CTA area of the pricing tables -// @mixin pricing-table-cta { -// background-color: $price-cta-bg; -// text-align: $price-cta-align; -// padding: $price-cta-padding; -// } - -// @include exports("pricing-table") { -// @if $include-html-pricing-classes { - -// /* Pricing Tables */ -// .pricing-table { -// @include pricing-table-container; - -// .title { @include pricing-table-title; } -// .price { @include pricing-table-price; } -// .description { @include pricing-table-description; } -// .bullet-item { @include pricing-table-bullet; } -// .cta-button { @include pricing-table-cta; } -// } - -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_progress-bars.scss b/app/styles/app/foundation/scss/foundation/components/_progress-bars.scss deleted file mode 100644 index 5191a08d..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_progress-bars.scss +++ /dev/null @@ -1,79 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // -// $include-html-media-classes: $include-html-classes !default; - -// // We use this to set the progress bar height -// $progress-bar-height: rem-calc(25) !default; -// $progress-bar-color: $vapor !default; - -// // We use these to control the border styles -// $progress-bar-border-color: scale-color($white, $lightness: 20%) !default; -// $progress-bar-border-size: 1px !default; -// $progress-bar-border-style: solid !default; -// $progress-bar-border-radius: $global-radius !default; - -// // We use these to control the margin & padding -// $progress-bar-pad: rem-calc(2) !default; -// $progress-bar-margin-bottom: rem-calc(10) !default; - -// // We use these to set the meter colors -// $progress-meter-color: $primary-color !default; -// $progress-meter-secondary-color: $secondary-color !default; -// $progress-meter-success-color: $success-color !default; -// $progress-meter-alert-color: $alert-color !default; - -// // @mixins -// // -// // We use this to set up the progress bar container -// @mixin progress-container { -// background-color: $progress-bar-color; -// height: $progress-bar-height; -// border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color; -// padding: $progress-bar-pad; -// margin-bottom: $progress-bar-margin-bottom; -// } - -// // @mixins -// // -// // $bg - Default: $progress-meter-color || $primary-color -// @mixin progress-meter($bg:$progress-meter-color) { -// background: $bg; -// height: 100%; -// display: block; -// } - - -// @include exports("progress-bar") { -// @if $include-html-media-classes { - -// /* Progress Bar */ -// .progress { -// @include progress-container; - -// // Meter -// .meter { -// @include progress-meter; -// } -// &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); } -// &.success .meter { @include progress-meter($bg:$progress-meter-success-color); } -// &.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); } - -// &.radius { @include radius($progress-bar-border-radius); -// .meter { @include radius($progress-bar-border-radius - 1); } -// } - -// &.round { @include radius(1000px); -// .meter { @include radius(999px); } -// } - -// } - -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_range-slider.scss b/app/styles/app/foundation/scss/foundation/components/_range-slider.scss deleted file mode 100644 index d50833f0..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_range-slider.scss +++ /dev/null @@ -1,168 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @name _range-slider.scss -// // @dependencies _global.scss -// // - -// // -// // @variables -// // - -// $include-html-range-slider-classes: $include-html-classes !default; - -// // These variabels define the slider bar styles -// $range-slider-bar-width: 100% !default; -// $range-slider-bar-height: rem-calc(16) !default; - -// $range-slider-bar-border-width: 1px !default; -// $range-slider-bar-border-style: solid !default; -// $range-slider-bar-border-color: $gainsboro !default; -// $range-slider-radius: $global-radius !default; -// $range-slider-round: $global-rounded !default; -// $range-slider-bar-bg-color: $ghost !default; -// $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%) !default; - -// // Vertical bar styles -// $range-slider-vertical-bar-width: rem-calc(16) !default; -// $range-slider-vertical-bar-height: rem-calc(200) !default; - -// // These variabels define the slider handle styles -// $range-slider-handle-width: rem-calc(32) !default; -// $range-slider-handle-height: rem-calc(22) !default; -// $range-slider-handle-position-top: rem-calc(-5) !default; -// $range-slider-handle-bg-color: $primary-color !default; -// $range-slider-handle-border-width: 1px !default; -// $range-slider-handle-border-style: solid !default; -// $range-slider-handle-border-color: none !default; -// $range-slider-handle-radius: $global-radius !default; -// $range-slider-handle-round: $global-rounded !default; -// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default; -// $range-slider-handle-cursor: pointer !default; - -// $range-slider-disabled-opacity: 0.7 !default; - -// // -// // @mixins -// // - -// @mixin range-slider-bar-base($vertical: false) { -// display: block; -// position: relative; -// width: $range-slider-bar-width; -// height: $range-slider-bar-height; -// border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color; -// margin: rem-calc(20 0); -// -ms-touch-action: none; -// touch-action: none; -// @if $vertical == true { -// display: inline-block; -// width: $range-slider-vertical-bar-width; -// height: $range-slider-vertical-bar-height; -// } -// } -// @mixin range-slider-bar-style( -// $bg: true, -// $radius: false, -// $round: false, -// $disabled: false) { -// @if $bg == true { background: $range-slider-bar-bg-color; } -// @if $radius == true { @include radius($range-slider-radius); } -// @if $round == true { @include radius($range-slider-round); } -// @if $disabled == true { -// cursor: $cursor-default-value; -// opacity: $range-slider-disabled-opacity; -// } -// } - -// @mixin range-slider-bar( -// $bg: $range-slider-bar-bg-color, -// $radius:false) { -// @include range-slider-bar-base; -// @include range-slider-bar-style; -// } - -// @mixin range-slider-handle-base() { -// display: inline-block; -// position: absolute; -// z-index: 1; -// top: $range-slider-handle-position-top; -// width: $range-slider-handle-width; -// height: $range-slider-handle-height; -// border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color; -// cursor: $range-slider-handle-cursor; - -// // This removes the 300ms touch delay on Windows 8 -// -ms-touch-action: manipulation; -// touch-action: manipulation; -// } -// @mixin range-slider-handle-style( -// $bg: true, -// $radius: false, -// $round: false, -// $disabled: false) { -// @if $bg == true { background: $range-slider-handle-bg-color; } -// @if $radius == true { @include radius($range-slider-radius); } -// @if $round == true { @include radius($range-slider-round); } -// @if $disabled == true { -// cursor: $cursor-default-value; -// opacity: $range-slider-disabled-opacity; -// } -// &:hover { -// background: $range-slider-handle-bg-hover-color; -// } -// } -// @mixin range-slider-handle() { -// @include range-slider-handle-base; -// @include range-slider-handle-style; -// } - -// // CSS Generation -// @include exports("range-slider-bar") { -// @if $include-html-range-slider-classes { -// .range-slider { -// @include range-slider-bar-base; -// @include range-slider-bar-style($bg:true, $radius:false); -// &.vertical-range { -// @include range-slider-bar-base($vertical: true); -// .range-slider-handle { -// margin-top: 0; -// margin-#{$default-float}: -($range-slider-handle-width / 4); -// position: absolute; -// bottom: -($range-slider-vertical-bar-height - $range-slider-handle-width); -// } -// .range-slider-active-segment { -// width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2)); -// height: auto; -// bottom: 0; -// } -// } -// &.radius { -// @include range-slider-bar-style($radius:true); -// .range-slider-handle { @include range-slider-handle-style($radius: true); } -// } -// &.round { -// @include range-slider-bar-style($round:true); -// .range-slider-handle { @include range-slider-handle-style($round: true); } -// } -// &.disabled, &[disabled] { -// @include range-slider-bar-style($disabled:true); -// .range-slider-handle { @include range-slider-handle-style($disabled: true); } -// } -// } -// .range-slider-active-segment { -// display: inline-block; -// position: absolute; -// height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2)); -// background: $range-slider-active-segment-bg-color; -// } -// .range-slider-handle { -// @include range-slider-handle-base; -// @include range-slider-handle-style($bg:true, $radius: false); -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_reveal.scss b/app/styles/app/foundation/scss/foundation/components/_reveal.scss deleted file mode 100644 index 1aae17a6..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_reveal.scss +++ /dev/null @@ -1,223 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; -// @import "grid"; - -// // -// // @name _reveal.scss -// // @dependencies _global.scss -// // - -// $include-html-reveal-classes: $include-html-classes !default; - -// // We use these to control the style of the reveal overlay. -// $reveal-overlay-bg: rgba($black, .45) !default; -// $reveal-overlay-bg-old: $black !default; - -// // We use these to control the style of the modal itself. -// $reveal-modal-bg: $white !default; -// $reveal-position-top: rem-calc(100) !default; -// $reveal-default-width: 80% !default; -// $reveal-max-width: $row-width !default; -// $reveal-modal-padding: rem-calc(20) !default; -// $reveal-box-shadow: 0 0 10px rgba($black,.4) !default; - -// // We use these to style the reveal close button -// $reveal-close-font-size: rem-calc(40) !default; -// $reveal-close-top: rem-calc(10) !default; -// $reveal-close-side: rem-calc(22) !default; -// $reveal-close-color: $base !default; -// $reveal-close-weight: $font-weight-bold !default; - -// // We use this to set the default radius used throughout the core. -// $reveal-radius: $global-radius !default; -// $reveal-round: $global-rounded !default; - -// // We use these to control the modal border -// $reveal-border-style: solid !default; -// $reveal-border-width: 1px !default; -// $reveal-border-color: $steel !default; - -// $reveal-modal-class: "reveal-modal" !default; -// $close-reveal-modal-class: "close-reveal-modal" !default; - -// // -// // @mixins -// // - -// // We use this to create the reveal background overlay styles -// @mixin reveal-bg( $include-z-index-value: true ) { -// //position: fixed; -// position: absolute; // allows modal background to extend beyond window position -// top: 0; -// bottom: 0; -// left: 0; -// right: 0; -// background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future. -// background: $reveal-overlay-bg; -// z-index: if( $include-z-index-value, 1004, auto ); -// display: none; -// #{$default-float}: 0; -// } - -// // We use this mixin to create the structure of a reveal modal -// // -// // $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false -// // $width - Sets reveal width Default: $reveal-default-width || 80% -// // -// @mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) { -// @if $base-style { -// visibility: hidden; -// display: none; -// position: absolute; -// z-index: 1005; -// width: 100vw; -// top:0; -// border-radius: $border-radius; -// #{$default-float}: 0; - -// @media #{$small-only} { -// min-height:100vh; -// } - -// // Make sure rows don't have a min-width on them -// .column, .columns { min-width: 0; } - -// // Get rid of margin from first and last element inside modal -// & > :first-child { margin-top: 0; } - -// & > :last-child { margin-bottom: 0; } -// } - -// @if $width { -// @media #{$medium-up} { -// width: $width; -// max-width: $max-width; -// left: 0; -// right: 0; -// margin: 0 auto; -// } -// } -// } - -// // We use this to style the reveal modal defaults -// // -// // $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white -// // $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding. -// // $border - Choose whether reveal uses a border. Default: true, Options: false -// // $border-style - Set reveal border style. Default: $reveal-border-style || solid -// // $border-width - Width of border (i.e. 1px). Default: $reveal-border-width. -// // $border-color - Color of border. Default: $reveal-border-color. -// // $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false -// // $radius - If true, set to modal radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false -// // $top-offset - Default: $reveal-position-top || 50px -// @mixin reveal-modal-style( -// $bg:false, -// $padding:false, -// $border:false, -// $border-style:$reveal-border-style, -// $border-width:$reveal-border-width, -// $border-color:$reveal-border-color, -// $box-shadow:false, -// $radius:false, -// $top-offset:false) { - -// @if $bg { background-color: $bg; } -// @if $padding != false { padding: $padding; } - -// @if $border { border: $border-style $border-width $border-color; } - -// // We can choose whether or not to include the default box-shadow. -// @if $box-shadow { -// box-shadow: $reveal-box-shadow; -// } - -// // We can control how much radius is used on the modal -// @if $radius == true { @include radius($reveal-radius); } -// @else if $radius { @include radius($radius); } - -// @if $top-offset { -// @media #{$medium-up} { -// top: $top-offset; -// } -// } -// } - -// // We use this to create a close button for the reveal modal -// // -// // $color - Default: $reveal-close-color || $base -// @mixin reveal-close($color:$reveal-close-color) { -// font-size: $reveal-close-font-size; -// line-height: 1; -// position: absolute; -// top: $reveal-close-top; -// #{$opposite-direction}: $reveal-close-side; -// color: $color; -// font-weight: $reveal-close-weight; -// cursor: $cursor-pointer-value; -// } - -// @include exports("reveal") { -// @if $include-html-reveal-classes { - -// // Reveal Modals -// .reveal-modal-bg { @include reveal-bg; } - -// .#{$reveal-modal-class} { -// @include reveal-modal-base; -// @include reveal-modal-style( -// $bg:$reveal-modal-bg, -// $padding:$reveal-modal-padding, -// $border:true, -// $box-shadow:true, -// $radius:false, -// $top-offset:$reveal-position-top -// ); -// @include reveal-modal-style($padding:$reveal-modal-padding * 1.5); - -// &.radius { @include reveal-modal-style($radius:true); } -// &.round { @include reveal-modal-style($radius:$reveal-round); } -// &.collapse { @include reveal-modal-style($padding:0); } -// &.tiny { @include reveal-modal-base(false, 30%); } -// &.small { @include reveal-modal-base(false, 40%); } -// &.medium { @include reveal-modal-base(false, 60%); } -// &.large { @include reveal-modal-base(false, 70%); } -// &.xlarge { @include reveal-modal-base(false, 95%); } -// &.full { -// @include reveal-modal-base(false, 100vw); -// top:0; -// left:0; -// height:100%; -// height: 100vh; -// min-height:100vh; -// max-width: none !important; -// margin-left: 0 !important; -// } - -// .#{$close-reveal-modal-class} { @include reveal-close; } -// } - -// dialog { -// @extend .#{$reveal-modal-class}; -// display: none; - -// &::backdrop, & + .backdrop { -// @include reveal-bg(false); -// } - -// &[open]{ -// display: block; -// } -// } - -// // Reveal Print Styles: It should be invisible, adds no value being printed. -// @media print { -// dialog, .#{$reveal-modal-class} { -// display: none; -// background: $white !important; -// } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_side-nav.scss b/app/styles/app/foundation/scss/foundation/components/_side-nav.scss deleted file mode 100644 index f498930d..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_side-nav.scss +++ /dev/null @@ -1,116 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @variables -// // - -// $include-html-nav-classes: $include-html-classes !default; - -// // We use this to control padding. -// $side-nav-padding: rem-calc(14 0) !default; - -// // We use these to control list styles. -// $side-nav-list-type: none !default; -// $side-nav-list-position: outside !default; -// $side-nav-list-margin: rem-calc(0 0 7 0) !default; - -// // We use these to control link styles. -// $side-nav-link-color: $primary-color !default; -// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default; -// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default; -// $side-nav-link-bg-hover: hsla(0, 0, 0, 0.025) !default; -// $side-nav-link-margin: 0 !default; -// $side-nav-link-padding: rem-calc(7 14) !default; -// $side-nav-font-size: rem-calc(14) !default; -// $side-nav-font-weight: $font-weight-normal !default; -// $side-nav-font-weight-active: $side-nav-font-weight !default; -// $side-nav-font-family: $body-font-family !default; -// $side-nav-font-family-active: $side-nav-font-family !default; - -// // We use these to control heading styles. -// $side-nav-heading-color: $side-nav-link-color !default; -// $side-nav-heading-font-size: $side-nav-font-size !default; -// $side-nav-heading-font-weight: bold !default; -// $side-nav-heading-text-transform: uppercase !default; - -// // We use these to control border styles -// $side-nav-divider-size: 1px !default; -// $side-nav-divider-style: solid !default; -// $side-nav-divider-color: scale-color($white, $lightness: 10%) !default; - - -// // -// // @mixins -// // - - -// // We use this to style the side-nav -// // -// // $divider-color - Border color of divider. Default: $side-nav-divider-color. -// // $font-size - Font size of nav items. Default: $side-nav-font-size. -// // $link-color - Color of navigation links. Default: $side-nav-link-color. -// // $link-color-hover - Color of navigation links when hovered. Default: $side-nav-link-color-hover. -// @mixin side-nav( -// $divider-color:$side-nav-divider-color, -// $font-size:$side-nav-font-size, -// $link-color:$side-nav-link-color, -// $link-color-hover:$side-nav-link-color-hover, -// $link-bg-hover:$side-nav-link-bg-hover) { -// display: block; -// margin: 0; -// padding: $side-nav-padding; -// list-style-type: $side-nav-list-type; -// list-style-position: $side-nav-list-position; -// font-family: $side-nav-font-family; - -// li { -// margin: $side-nav-list-margin; -// font-size: $font-size; -// font-weight: $side-nav-font-weight; - -// a:not(.button) { -// display: block; -// color: $link-color; -// margin: $side-nav-link-margin; -// padding: $side-nav-link-padding; -// &:hover, -// &:focus { -// background: $link-bg-hover; -// color: $link-color-hover; -// } -// } - -// &.active > a:first-child:not(.button) { -// color: $side-nav-link-color-active; -// font-weight: $side-nav-font-weight-active; -// font-family: $side-nav-font-family-active; -// } - -// &.divider { -// border-top: $side-nav-divider-size $side-nav-divider-style; -// height: 0; -// padding: 0; -// list-style: none; -// border-top-color: $divider-color; -// } - -// &.heading { -// color: $side-nav-heading-color; -// font: { -// size: $side-nav-heading-font-size; -// weight: $side-nav-heading-font-weight; -// } -// text-transform: $side-nav-heading-text-transform; -// } -// } -// } - -// @include exports("side-nav") { -// @if $include-html-nav-classes { -// .side-nav { @include side-nav; } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_split-buttons.scss b/app/styles/app/foundation/scss/foundation/components/_split-buttons.scss deleted file mode 100644 index 21c0e100..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_split-buttons.scss +++ /dev/null @@ -1,191 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; -// @import "buttons"; -// @import "dropdown-buttons"; - -// // -// // @name _split-buttons.scss -// // @dependencies _buttons.scss, _global.scss -// // - -// // -// // @variables -// // - -// $include-html-button-classes: $include-html-classes !default; - -// // We use these to control different shared styles for Split Buttons -// $split-button-function-factor: 10% !default; -// $split-button-pip-color: $white !default; -// $split-button-pip-color-alt: $oil !default; -// $split-button-active-bg-tint: rgba(0,0,0,0.1) !default; - -// // We use these to control tiny split buttons -// $split-button-padding-tny: $button-pip-tny * 10 !default; -// $split-button-span-width-tny: $button-pip-tny * 6 !default; -// $split-button-pip-size-tny: $button-pip-tny !default; -// $split-button-pip-top-tny: $button-pip-tny * 2 !default; -// $split-button-pip-default-float-tny: rem-calc(-6) !default; - -// // We use these to control small split buttons -// $split-button-padding-sml: $button-pip-sml * 10 !default; -// $split-button-span-width-sml: $button-pip-sml * 6 !default; -// $split-button-pip-size-sml: $button-pip-sml !default; -// $split-button-pip-top-sml: $button-pip-sml * 1.5 !default; -// $split-button-pip-default-float-sml: rem-calc(-6) !default; - -// // We use these to control medium split buttons -// $split-button-padding-med: $button-pip-med * 9 !default; -// $split-button-span-width-med: $button-pip-med * 5.5 !default; -// $split-button-pip-size-med: $button-pip-med - rem-calc(3) !default; -// $split-button-pip-top-med: $button-pip-med * 1.5 !default; -// $split-button-pip-default-float-med: rem-calc(-6) !default; - -// // We use these to control large split buttons -// $split-button-padding-lrg: $button-pip-lrg * 8 !default; -// $split-button-span-width-lrg: $button-pip-lrg * 5 !default; -// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default; -// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5) !default; -// $split-button-pip-default-float-lrg: rem-calc(-6) !default; - - -// // -// // @mixins -// // - -// // We use this mixin to create split buttons that build upon the button mixins -// // -// // $padding - Type of padding to apply. Default: medium. Options: tiny, small, medium, large. -// // $pip-color - Color of the triangle. Default: $split-button-pip-color. -// // $span-border - Border color of button divider. Default: $primary-color. -// // $base-style - Apply base style to split button. Default: true. -// @mixin split-button( -// $padding:medium, -// $pip-color:$split-button-pip-color, -// $span-border:$primary-color, -// $base-style:true) { - -// // With this, we can control whether or not the base styles come through. -// @if $base-style { -// position: relative; - -// // Styling for the split arrow clickable area -// span { -// display: block; -// height: 100%; -// position: absolute; -// #{$opposite-direction}: 0; -// top: 0; -// border-#{$default-float}: solid 1px; - -// // Building the triangle pip indicator -// &:after { -// position: absolute; -// content: ""; -// width: 0; -// height: 0; -// display: block; -// border-style: inset; -// top: 50%; - -// #{$default-float}: 50%; -// } - -// &:active { background-color: $split-button-active-bg-tint; } -// } -// } - -// // Control the border color for the span area of the split button -// @if $span-border { -// span { -// border-#{$default-float}-color: rgba(255,255,255,0.5); -// } -// } - -// // Style of the button and clickable area for tiny sizes -// @if $padding == tiny { -// padding-#{$opposite-direction}: $split-button-padding-tny; - -// span { width: $split-button-span-width-tny; -// &:after { -// border-top-style: solid; -// border-width: $split-button-pip-size-tny; -// top: 48%; -// margin-#{$default-float}: $split-button-pip-default-float-tny; -// } -// } -// } - -// // Style of the button and clickable area for small sizes -// @else if $padding == small { -// padding-#{$opposite-direction}: $split-button-padding-sml; - -// span { width: $split-button-span-width-sml; -// &:after { -// border-top-style: solid; -// border-width: $split-button-pip-size-sml; -// top: 48%; -// margin-#{$default-float}: $split-button-pip-default-float-sml; -// } -// } -// } - -// // Style of the button and clickable area for default (medium) sizes -// @else if $padding == medium { -// padding-#{$opposite-direction}: $split-button-padding-med; - -// span { width: $split-button-span-width-med; -// &:after { -// border-top-style: solid; -// border-width: $split-button-pip-size-med; -// top: 48%; -// margin-#{$default-float}: $split-button-pip-default-float-med; -// } -// } -// } - -// // Style of the button and clickable area for large sizes -// @else if $padding == large { -// padding-#{$opposite-direction}: $split-button-padding-lrg; - -// span { width: $split-button-span-width-lrg; -// &:after { -// border-top-style: solid; -// border-width: $split-button-pip-size-lrg; -// top: 48%; -// margin-#{$default-float}: $split-button-pip-default-float-lrg; -// } -// } -// } - -// // Control the color of the triangle pip -// @if $pip-color { -// span:after { border-color: $pip-color transparent transparent transparent; } -// } -// } - -// @include exports("split-button") { -// @if $include-html-button-classes { - -// .split.button { @include split-button; - -// &.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); } -// &.alert { @include split-button(false, false, $alert-color, false); } -// &.success { @include split-button(false, false, $success-color, false); } - -// &.tiny { @include split-button(tiny, false, false, false); } -// &.small { @include split-button(small, false, false, false); } -// &.large { @include split-button(large, false, false, false); } -// &.expand { padding-left: 2rem; } - -// &.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); } - -// &.radius span { @include side-radius($opposite-direction, $global-radius); } -// &.round span { @include side-radius($opposite-direction, 1000px); } -// } - -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_sub-nav.scss b/app/styles/app/foundation/scss/foundation/components/_sub-nav.scss deleted file mode 100644 index 7db9f03e..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_sub-nav.scss +++ /dev/null @@ -1,123 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @name _sub-nav.scss -// // @dependencies _global.scss -// // - -// // -// // @variables -// // - -// $include-html-nav-classes: $include-html-classes !default; - -// // We use these to control margin and padding -// $sub-nav-list-margin: rem-calc(-4 0 18) !default; -// $sub-nav-list-padding-top: rem-calc(4) !default; - -// // We use this to control the definition -// $sub-nav-font-family: $body-font-family !default; -// $sub-nav-font-size: rem-calc(14) !default; -// $sub-nav-font-color: $aluminum !default; -// $sub-nav-font-weight: $font-weight-normal !default; -// $sub-nav-text-decoration: none !default; -// $sub-nav-padding: rem-calc(3 16) !default; -// $sub-nav-border-radius: 3px !default; -// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !default; - - -// // We use these to control the active item styles - -// $sub-nav-active-font-weight: $font-weight-normal !default; -// $sub-nav-active-bg: $primary-color !default; -// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default; -// $sub-nav-active-color: $white !default; -// $sub-nav-active-padding: $sub-nav-padding !default; -// $sub-nav-active-cursor: default !default; - -// $sub-nav-item-divider: "" !default; -// $sub-nav-item-divider-margin: rem-calc(12) !default; - -// // -// // @mixins -// // - - -// // Create a sub-nav item -// // -// // $font-color - Font color. Default: $sub-nav-font-color. -// // $font-size - Font size. Default: $sub-nav-font-size. -// // $active-bg - Background of active nav item. Default: $sub-nav-active-bg. -// // $active-bg-hover - Background of active nav item, when hovered. Default: $sub-nav-active-bg-hover. -// @mixin sub-nav( -// $font-color: $sub-nav-font-color, -// $font-size: $sub-nav-font-size, -// $active-bg: $sub-nav-active-bg, -// $active-bg-hover: $sub-nav-active-bg-hover) { -// display: block; -// width: auto; -// overflow: hidden; -// margin: $sub-nav-list-margin; -// padding-top: $sub-nav-list-padding-top; - -// dt { -// text-transform: uppercase; -// } - -// dt, -// dd, -// li { -// float: $default-float; -// display: inline; -// margin-#{$default-float}: rem-calc(16); -// margin-bottom: 0; -// font-family: $sub-nav-font-family; -// font-weight: $sub-nav-font-weight; -// font-size: $font-size; -// color: $font-color; - -// a { -// text-decoration: $sub-nav-text-decoration; -// color: $sub-nav-font-color; -// padding: $sub-nav-padding; -// &:hover { -// color: $sub-nav-font-color-hover; -// } -// } - -// &.active a { -// @include radius($sub-nav-border-radius); -// font-weight: $sub-nav-active-font-weight; -// background: $active-bg; -// padding: $sub-nav-active-padding; -// cursor: $sub-nav-active-cursor; -// color: $sub-nav-active-color; -// &:hover { -// background: $active-bg-hover; -// } -// } -// @if $sub-nav-item-divider != "" { -// margin-#{$default-float}: 0; - -// &:before { -// content: "#{$sub-nav-item-divider}"; -// margin: 0 $sub-nav-item-divider-margin; -// } - -// &:first-child:before { -// content: ""; -// margin: 0; -// } -// } -// } -// } - -// @include exports("sub-nav") { -// @if $include-html-nav-classes { -// .sub-nav { @include sub-nav; } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_switches.scss b/app/styles/app/foundation/scss/foundation/components/_switches.scss deleted file mode 100644 index 4dd79a02..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_switches.scss +++ /dev/null @@ -1,238 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @name -// // @dependencies _global.scss -// // - -// // -// // @variables -// // - -// $include-html-form-classes: $include-html-classes !default; - -// // Controlling background color for the switch container -// $switch-bg: $gainsboro !default; - -// // We use these to control the switch heights for our default classes -// $switch-height-tny: 1.5rem !default; -// $switch-height-sml: 1.75rem !default; -// $switch-height-med: 2rem !default; -// $switch-height-lrg: 2.5rem !default; -// $switch-bottom-margin: 1.5rem !default; - -// // We use these to style the switch-paddle -// $switch-paddle-bg: $white !default; -// $switch-paddle-transition-speed: .15s !default; -// $switch-paddle-transition-ease: ease-out !default; -// $switch-active-color: $primary-color !default; - - -// // -// // @mixins -// // - -// // We use this mixin to create the base styles for our switch element. -// // -// // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed. -// // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease. -// @mixin switch-base( -// $transition-speed:$switch-paddle-transition-speed, -// $transition-ease:$switch-paddle-transition-ease) { - -// padding: 0; -// border: none; -// position: relative; -// outline: 0; -// -webkit-user-select: none; -// -moz-user-select: none; -// user-select: none; - -// // Default label styles for type and transition -// label { -// display: block; -// margin-bottom: ($switch-height-med / 2); -// position: relative; -// color: transparent; -// background: $switch-bg; -// text-indent: 100%; -// width: $switch-height-med * 2; height: $switch-height-med; -// cursor: pointer; - -// // Transition for the switch label to follow paddle -// @include single-transition(left, $transition-speed, $transition-ease); -// } - -// // So that we don't need to recreate the form with any JS, we use the -// // existing checkbox or radio button, but we cleverly position and hide it. -// input { -// opacity: 0; -// position: absolute; -// top: 9px; -// left: 10px; -// padding:0; - -// & + label { margin-left: 0; margin-right: 0; } -// } - -// // The paddle for the switch is created from an after psuedoclass -// // content element. This is sized and positioned, and reacts to -// // the state of the input. - -// label:after { -// content: ""; -// display: block; -// background: $switch-paddle-bg; -// position: absolute; -// top: .25rem; -// left: .25rem; -// width: $switch-height-med - 0.5rem; -// height: $switch-height-med - 0.5rem; - -// -webkit-transition: left $transition-speed $transition-ease; -// -moz-transition: left $transition-speed $transition-ease; -// -o-transition: translate3d(0,0,0); -// transition: left $transition-speed $transition-ease; - -// -webkit-transform: translate3d(0,0,0); -// -moz-transform: translate3d(0,0,0); -// -o-transform: translate3d(0,0,0); -// transform: translate3d(0,0,0); -// } - -// input:checked + label { -// background: $switch-active-color; -// } - -// input:checked + label:after { -// left: $switch-height-med + 0.25rem; -// } -// } - -// // We use this mixin to create the size styles for switches. -// // -// // $height - Height (in px) of the switch. Default: $switch-height-med. -// // $font-size - Font size of text in switch. Default: $switch-font-size-med. -// // $line-height - Line height of switch. Default: 2.3rem. -// @mixin switch-size($height: $switch-height-med) { - -// label { -// width: $height * 2; -// height: $height; -// } - -// label:after { -// width: $height - 0.5rem; -// height: $height - 0.5rem; -// } - -// input:checked + label:after { -// left: $height + 0.25rem; -// } - -// } - -// // We use this mixin to add color and other fanciness to the switches. -// // -// // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg. -// // $active-color - Background color of positive side of switch. Default: $switch-positive-color. -// // $negative-color - Background color of negative side of switch. Default: $switch-negative-color. -// // $radius - Radius to apply to switch. Default: false. -// // $base-style - Apply base styles? Default: true. -// @mixin switch-style( -// $paddle-bg:$switch-paddle-bg, -// $active-color:$switch-active-color, -// $radius:false, -// $base-style:true) { - -// @if $base-style { - -// label { -// color: transparent; -// background: $switch-bg; -// } - -// label:after { -// background: $paddle-bg; -// } - -// input:checked + label { -// background: $active-color; -// } -// } - -// // Setting up the radius for switches -// @if $radius == true { -// label { -// border-radius: 2rem; -// } -// label:after { -// border-radius: 2rem; -// } -// } -// @else if $radius { -// label { -// border-radius: $radius; -// } -// label:after { -// border-radius: $radius; -// } -// } - -// } - -// // We use this to quickly create switches with a single mixin -// // -// // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed. -// // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease. -// // $height - Height (in px) of the switch. Default: $switch-height-med. -// // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg. -// // $active-color - Background color of an active switch. Default: $switch-active-color. -// // $radius - Radius to apply to switch. Default: false. -// // $base-style - Apply base styles? Default: true. -// @mixin switch( -// $transition-speed: $switch-paddle-transition-speed, -// $transition-ease: $switch-paddle-transition-ease, -// $height: $switch-height-med, -// $paddle-bg: $switch-paddle-bg, -// $active-color: $switch-active-color, -// $radius:false, -// $base-style:true) { -// @include switch-base($transition-speed, $transition-ease); -// @include switch-size($height); -// @include switch-style($paddle-bg, $active-color, $radius, $base-style); -// } - -// @include exports("switch") { -// @if $include-html-form-classes { -// .switch { -// @include switch; - -// // Large radio switches -// &.large { @include switch-size($switch-height-lrg); } - -// // Small radio switches -// &.small { @include switch-size($switch-height-sml); } - -// // Tiny radio switches -// &.tiny { @include switch-size($switch-height-tny); } - -// // Add a radius to the switch -// &.radius { -// label { @include radius(4px); } -// label:after { @include radius(3px); } -// } - -// // Make the switch completely round, like a pill -// &.round { @include radius(1000px); -// label { @include radius(2rem); } -// label:after { @include radius(2rem); } -// } - -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_tables.scss b/app/styles/app/foundation/scss/foundation/components/_tables.scss deleted file mode 100644 index fd672fcc..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_tables.scss +++ /dev/null @@ -1,135 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @name _tables.scss -// // @dependencies _global.scss -// // - -// // -// // @variables -// // - -// $include-html-table-classes: $include-html-classes !default; - -// // These control the background color for the table and even rows -// $table-bg: $white !default; -// $table-even-row-bg: $snow !default; - -// // These control the table cell border style -// $table-border-style: solid !default; -// $table-border-size: 1px !default; -// $table-border-color: $gainsboro !default; - -// // These control the table head styles -// $table-head-bg: $white-smoke !default; -// $table-head-font-size: rem-calc(14) !default; -// $table-head-font-color: $jet !default; -// $table-head-font-weight: $font-weight-bold !default; -// $table-head-padding: rem-calc(8 10 10) !default; - -// // These control the table foot styles -// $table-foot-bg: $table-head-bg !default; -// $table-foot-font-size: $table-head-font-size !default; -// $table-foot-font-color: $table-head-font-color !default; -// $table-foot-font-weight: $table-head-font-weight !default; -// $table-foot-padding: $table-head-padding !default; - -// // These control the caption -// $table-caption-bg: transparent !default; -// $table-caption-font-color: $table-head-font-color !default; -// $table-caption-font-size: rem-calc(16) !default; -// $table-caption-font-weight: bold !default; - -// // These control the row padding and font styles -// $table-row-padding: rem-calc(9 10) !default; -// $table-row-font-size: rem-calc(14) !default; -// $table-row-font-color: $jet !default; -// $table-line-height: rem-calc(18) !default; - -// // These are for controlling the layout, display and margin of tables -// $table-layout: auto !default; -// $table-display: table-cell !default; -// $table-margin-bottom: rem-calc(20) !default; - - -// // -// // @mixins -// // - -// @mixin table { -// background: $table-bg; -// margin-bottom: $table-margin-bottom; -// border: $table-border-style $table-border-size $table-border-color; -// table-layout: $table-layout; - -// caption { -// background: $table-caption-bg; -// color: $table-caption-font-color; -// font: { -// size: $table-caption-font-size; -// weight: $table-caption-font-weight; -// } -// } - -// thead { -// background: $table-head-bg; - -// tr { -// th, -// td { -// padding: $table-head-padding; -// font-size: $table-head-font-size; -// font-weight: $table-head-font-weight; -// color: $table-head-font-color; -// } -// } -// } - -// tfoot { -// background: $table-foot-bg; - -// tr { -// th, -// td { -// padding: $table-foot-padding; -// font-size: $table-foot-font-size; -// font-weight: $table-foot-font-weight; -// color: $table-foot-font-color; -// } -// } -// } - -// tr { -// th, -// td { -// padding: $table-row-padding; -// font-size: $table-row-font-size; -// color: $table-row-font-color; -// text-align: $default-float; -// } - -// &.even, -// &.alt, -// &:nth-of-type(even) { background: $table-even-row-bg; } -// } - -// thead tr th, -// tfoot tr th, -// tfoot tr td, -// tbody tr th, -// tbody tr td, -// tr td { display: $table-display; line-height: $table-line-height; } -// } - - -// @include exports("table") { -// @if $include-html-table-classes { -// table { -// @include table; -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_tabs.scss b/app/styles/app/foundation/scss/foundation/components/_tabs.scss deleted file mode 100644 index a96575c1..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_tabs.scss +++ /dev/null @@ -1,123 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; -// @import "grid"; - -// // -// // @variables -// // - -// $include-html-tabs-classes: $include-html-classes !default; - -// $tabs-navigation-padding: rem-calc(16) !default; -// $tabs-navigation-bg-color: $silver !default; -// $tabs-navigation-active-bg-color: $white !default; -// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default; -// $tabs-navigation-font-color: $jet !default; -// $tabs-navigation-active-font-color: $tabs-navigation-font-color !default; -// $tabs-navigation-font-size: rem-calc(16) !default; -// $tabs-navigation-font-family: $body-font-family !default; - -// $tabs-content-margin-bottom: rem-calc(24) !default; -// $tabs-content-padding: ($column-gutter/2) !default; - -// $tabs-vertical-navigation-margin-bottom: 1.25rem !default; - -// @include exports("tab") { -// @if $include-html-tabs-classes { -// .tabs { -// @include clearfix; -// margin-bottom: 0 !important; -// margin-left: 0; -// dd, .tab-title { -// position: relative; -// margin-bottom: 0 !important; -// list-style: none; -// float: $default-float; -// > a { -// outline: none; -// display: block; -// background: { -// color: $tabs-navigation-bg-color; -// } -// color: $tabs-navigation-font-color; -// padding: $tabs-navigation-padding $tabs-navigation-padding * 2; -// font-family: $tabs-navigation-font-family; -// font-size: $tabs-navigation-font-size; -// &:hover { -// background: { -// color: $tabs-navigation-hover-bg-color; -// } -// } -// } -// &.active a { -// background: { -// color: $tabs-navigation-active-bg-color; -// } -// color:$tabs-navigation-active-font-color; -// } -// } -// &.radius { -// dd:first-child, .tab:first-child { -// a { @include side-radius($default-float, $global-radius); } -// } -// dd:last-child, .tab:last-child { -// a { @include side-radius($opposite-direction, $global-radius); } -// } -// } -// &.vertical { -// dd, .tab-title { -// position: inherit; -// float: none; -// display: block; -// top: auto; -// } -// } -// } - -// .tabs-content { -// @include clearfix; -// margin-bottom: $tabs-content-margin-bottom; -// width: 100%; -// > .content { -// display: none; -// float: $default-float; -// padding: $tabs-content-padding 0; -// width: 100%; -// &.active { display: block; float: none; } -// &.contained { padding: $tabs-content-padding; } -// } -// &.vertical { -// display: block; -// > .content { padding: 0 $tabs-content-padding; } -// } -// } -// @media #{$medium-up} { -// .tabs { -// &.vertical { -// width: 20%; -// max-width: 20%; -// float: $default-float; -// margin: 0 0 $tabs-vertical-navigation-margin-bottom; -// } -// } -// .tabs-content { -// &.vertical { -// width: 80%; -// max-width: 80%; -// float: $default-float; -// margin-#{$default-float}: -1px; -// padding-#{$default-float}: 1rem; -// } -// } -// } -// .no-js { -// .tabs-content > .content { -// display: block; -// float: none; -// } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_thumbs.scss b/app/styles/app/foundation/scss/foundation/components/_thumbs.scss deleted file mode 100644 index b80e89e0..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_thumbs.scss +++ /dev/null @@ -1,66 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // @name _thumbs.scss -// // @dependencies _globals.scss -// // - -// // -// // @variables -// // - -// $include-html-media-classes: $include-html-classes !default; - -// // We use these to control border styles -// $thumb-border-style: solid !default; -// $thumb-border-width: 4px !default; -// $thumb-border-color: $white !default; -// $thumb-box-shadow: 0 0 0 1px rgba($black,.2) !default; -// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default; - -// // Radius and transition speed for thumbs -// $thumb-radius: $global-radius !default; -// $thumb-transition-speed: 200ms !default; - -// // -// // @mixins -// // - -// // We use this to create image thumbnail styles. -// // -// // $border-width - Width of border around thumbnail. Default: $thumb-border-width. -// // $box-shadow - Box shadow to apply to thumbnail. Default: $thumb-box-shadow. -// // $box-shadow-hover - Box shadow to apply on hover. Default: $thumb-box-shadow-hover. -// @mixin thumb( -// $border-width:$thumb-border-width, -// $box-shadow:$thumb-box-shadow, -// $box-shadow-hover:$thumb-box-shadow-hover) { -// line-height: 0; -// display: inline-block; -// border: $thumb-border-style $border-width $thumb-border-color; -// max-width: 100%; -// box-shadow: $box-shadow; - -// &:hover, -// &:focus { -// box-shadow: $box-shadow-hover; -// } -// } - - -// @include exports("thumb") { -// @if $include-html-media-classes { - -// /* Image Thumbnails */ -// .th { -// @include thumb; -// @include single-transition(all,$thumb-transition-speed,ease-out); - -// &.radius { @include radius($thumb-radius); } -// } -// } -// } \ No newline at end of file diff --git a/app/styles/app/foundation/scss/foundation/components/_toolbar.scss b/app/styles/app/foundation/scss/foundation/components/_toolbar.scss deleted file mode 100644 index e674d5f3..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_toolbar.scss +++ /dev/null @@ -1,71 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source -// // toolbar styles -// @import 'global'; - -// .toolbar { -// background: $oil; -// width: 100%; -// font-size: 0; -// display: inline-block; - -// &.label-bottom .tab .tab-content { -// i, img { margin-bottom: 10px; } -// } - -// &.label-right .tab .tab-content { -// i, img { margin-right: 10px; display: inline-block;} -// label { display: inline-block; } -// } - -// &.vertical.label-right .tab .tab-content { -// text-align: left; -// } - -// &.vertical { -// height: 100%; -// width: auto; - -// .tab { -// width: auto; -// margin: auto; -// float: none; -// } -// } - -// .tab { -// text-align: center; -// width: 25%; -// margin: 0 auto; -// display: block; -// padding: 20px; -// float: left; - -// &:hover { -// background: rgba($white, 0.1); -// } -// } -// } - -// .toolbar .tab-content { -// font-size: 16px; -// text-align: center; - -// label { color: $iron; } - -// i { -// font-size: 30px; -// display: block; -// margin: 0 auto; -// color: $iron; -// vertical-align: middle; -// } - -// img { -// width: 30px; -// height: 30px; -// display: block; -// margin: 0 auto; -// } -// } \ No newline at end of file diff --git a/app/styles/app/foundation/scss/foundation/components/_tooltips.scss b/app/styles/app/foundation/scss/foundation/components/_tooltips.scss deleted file mode 100644 index a7da277e..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_tooltips.scss +++ /dev/null @@ -1,142 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // Tooltip Variables -// // -// $include-html-tooltip-classes: $include-html-classes !default; - -// $has-tip-border-bottom: dotted 1px $iron !default; -// $has-tip-font-weight: $font-weight-bold !default; -// $has-tip-font-color: $oil !default; -// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%) !default; -// $has-tip-font-color-hover: $primary-color !default; -// $has-tip-cursor-type: help !default; - -// $tooltip-padding: rem-calc(12) !default; -// $tooltip-bg: $oil !default; -// $tooltip-font-size: rem-calc(14) !default; -// $tooltip-font-weight: $font-weight-normal !default; -// $tooltip-font-color: $white !default; -// $tooltip-line-height: 1.3 !default; -// $tooltip-close-font-size: rem-calc(10) !default; -// $tooltip-close-font-weight: $font-weight-normal !default; -// $tooltip-close-font-color: $monsoon !default; -// $tooltip-font-size-sml: rem-calc(14) !default; -// $tooltip-radius: $global-radius !default; -// $tooltip-rounded: $global-rounded !default; -// $tooltip-pip-size: 5px !default; -// $tooltip-max-width: 300px !default; - -// @include exports("tooltip") { -// @if $include-html-tooltip-classes { - -// /* Tooltips */ -// .has-tip { -// border-bottom: $has-tip-border-bottom; -// cursor: $has-tip-cursor-type; -// font-weight: $has-tip-font-weight; -// color: $has-tip-font-color; - -// &:hover, -// &:focus { -// border-bottom: $has-tip-border-bottom-hover; -// color: $has-tip-font-color-hover; -// } - -// &.tip-left, -// &.tip-right { float: none !important; } -// } - -// .tooltip { -// display: none; -// position: absolute; -// z-index: 1006; -// font-weight: $tooltip-font-weight; -// font-size: $tooltip-font-size; -// line-height: $tooltip-line-height; -// padding: $tooltip-padding; -// max-width: $tooltip-max-width; -// #{$default-float}: 50%; -// width: 100%; -// color: $tooltip-font-color; -// background: $tooltip-bg; - -// &>.nub { -// display: block; -// #{$default-float}: $tooltip-pip-size; -// position: absolute; -// width: 0; -// height: 0; -// border: solid $tooltip-pip-size; -// border-color: transparent transparent $tooltip-bg transparent; -// top: -($tooltip-pip-size * 2); -// pointer-events: none; - -// &.rtl { -// left: auto; -// #{$opposite-direction}: $tooltip-pip-size; -// } -// } - -// &.radius { -// @include radius($tooltip-radius); -// } -// &.round { -// @include radius($tooltip-rounded); -// &>.nub { -// left: 2rem; -// } -// } - -// &.opened { -// color: $has-tip-font-color-hover !important; -// border-bottom: $has-tip-border-bottom-hover !important; -// } -// } - -// .tap-to-close { -// display: block; -// font-size: $tooltip-close-font-size; -// color: $tooltip-close-font-color; -// font-weight: $tooltip-close-font-weight; -// } - -// @media #{$small} { -// .tooltip { -// &>.nub { -// border-color: transparent transparent $tooltip-bg transparent; -// top: -($tooltip-pip-size * 2); -// } -// &.tip-top>.nub { -// border-color: $tooltip-bg transparent transparent transparent; -// top: auto; -// bottom: -($tooltip-pip-size * 2); -// } - -// &.tip-left, -// &.tip-right { float: none !important; } - -// &.tip-left>.nub { -// border-color: transparent transparent transparent $tooltip-bg; -// right: -($tooltip-pip-size * 2); -// left: auto; -// top: 50%; -// margin-top: -$tooltip-pip-size; -// } -// &.tip-right>.nub { -// border-color: transparent $tooltip-bg transparent transparent; -// right: auto; -// left: -($tooltip-pip-size * 2); -// top: 50%; -// margin-top: -$tooltip-pip-size; -// } - -// } -// } - -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_top-bar.scss b/app/styles/app/foundation/scss/foundation/components/_top-bar.scss deleted file mode 100644 index 56d717f5..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_top-bar.scss +++ /dev/null @@ -1,689 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; -// @import "grid"; -// @import "buttons"; -// @import "forms"; - -// // -// // Top Bar Variables -// // -// $include-html-top-bar-classes: $include-html-classes !default; - -// // Background color for the top bar -// $topbar-bg-color: $oil !default; -// $topbar-bg: $topbar-bg-color !default; - -// // Height and margin -// $topbar-height: rem-calc(45) !default; -// $topbar-margin-bottom: 0 !default; - -// // Controlling the styles for the title in the top bar -// $topbar-title-weight: $font-weight-normal !default; -// $topbar-title-font-size: rem-calc(17) !default; - -// // Set the link colors and styles for top-level nav -// $topbar-link-color: $white !default; -// $topbar-link-color-hover: $white !default; -// $topbar-link-color-active: $white !default; -// $topbar-link-color-active-hover: $white !default; -// $topbar-link-weight: $font-weight-normal !default; -// $topbar-link-font-size: rem-calc(13) !default; -// $topbar-link-hover-lightness: -10% !default; // Darken by 10% -// $topbar-link-bg: $topbar-bg !default; -// $topbar-link-bg-hover: $oil !default; -// $topbar-link-bg-color-hover: $charcoal !default; -// $topbar-link-bg-active: $primary-color !default; -// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default; -// $topbar-link-font-family: $body-font-family !default; -// $topbar-link-text-transform: none !default; -// $topbar-link-padding: ($topbar-height / 3) !default; -// $topbar-back-link-size: rem-calc(18) !default; -// $topbar-link-dropdown-padding: rem-calc(20) !default; -// $topbar-button-font-size: 0.75rem !default; -// $topbar-button-top: 7px !default; - -// // Style the top bar dropdown elements -// $topbar-dropdown-bg: $oil !default; -// $topbar-dropdown-link-color: $white !default; -// $topbar-dropdown-link-color-hover: $topbar-link-color-hover !default; -// $topbar-dropdown-link-bg: $oil !default; -// $topbar-dropdown-link-bg-hover: $oil !default; -// $topbar-dropdown-link-weight: $font-weight-normal !default; -// $topbar-dropdown-toggle-size: 5px !default; -// $topbar-dropdown-toggle-color: $white !default; -// $topbar-dropdown-toggle-alpha: 0.4 !default; - -// $topbar-dropdown-label-color: $monsoon !default; -// $topbar-dropdown-label-text-transform: uppercase !default; -// $topbar-dropdown-label-font-weight: $font-weight-bold !default; -// $topbar-dropdown-label-font-size: rem-calc(10) !default; -// $topbar-dropdown-label-bg: $oil !default; - -// // Top menu icon styles -// $topbar-menu-link-transform: uppercase !default; -// $topbar-menu-link-font-size: rem-calc(13) !default; -// $topbar-menu-link-weight: $font-weight-bold !default; -// $topbar-menu-link-color: $white !default; -// $topbar-menu-icon-color: $white !default; -// $topbar-menu-link-color-toggled: $jumbo !default; -// $topbar-menu-icon-color-toggled: $jumbo !default; - -// // Transitions and breakpoint styles -// $topbar-transition-speed: 300ms !default; -// // Using rem-calc for the below breakpoint causes issues with top bar -// $topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout -// $topbar-media-query: $medium-up !default; - -// // Top-bar input styles -// $topbar-input-height: rem-calc(28) !default; - -// // Divider Styles -// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%) !default; -// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%) !default; - -// // Sticky Class -// $topbar-sticky-class: ".sticky" !default; -// $topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item -// $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text from dropdown subnavigation li - -// // Accessibility mixins for hiding and showing the menu dropdown items -// @mixin topbar-hide-dropdown { -// // Makes an element visually hidden by default, but visible when focused. -// display: block; -// @include element-invisible(); -// } - -// @mixin topbar-show-dropdown { -// display: block; -// @include element-invisible-off(); -// position: absolute !important; // Reset the position from static to absolute -// } - -// @include exports("top-bar") { - -// @if $include-html-top-bar-classes { - -// // Used to provide media query values for javascript components. -// // This class is generated despite the value of $include-html-top-bar-classes -// // to ensure width calculations work correctly. -// meta.foundation-mq-topbar { -// font-family: "/" + unquote($topbar-media-query) + "/"; -// width: $topbar-breakpoint; -// } - -// /* Wrapped around .top-bar to contain to grid width */ -// .contain-to-grid { -// width: 100%; -// background: $topbar-bg; - -// .top-bar { margin-bottom: $topbar-margin-bottom; } -// } - -// // Wrapped around .top-bar to make it stick to the top -// .fixed { -// width: 100%; -// #{$default-float}: 0; -// position: fixed; -// top: 0; -// z-index: 99; - -// &.expanded:not(.top-bar) { -// overflow-y: auto; -// height: auto; -// width: 100%; -// max-height: 100%; - -// .title-area { -// position: fixed; -// width: 100%; -// z-index: 99; -// } -// // Ensure you can scroll the menu on small screens -// .top-bar-section { -// z-index: 98; -// margin-top: $topbar-height; -// } -// } -// } - -// .top-bar { -// overflow: hidden; -// height: $topbar-height; -// line-height: $topbar-height; -// position: relative; -// background: $topbar-bg; -// margin-bottom: $topbar-margin-bottom; - -// // Topbar Global list Styles -// ul { -// margin-bottom: 0; -// list-style: none; -// } - -// .row { max-width: none; } - -// form, -// input { margin-bottom: 0; } - -// input { -// height: $topbar-input-height; -// padding-top: .35rem; -// padding-bottom: .35rem; -// font-size: $topbar-button-font-size; -// } - -// .button, button { -// padding-top: .35rem + rem-calc(1); -// padding-bottom: .35rem + rem-calc(1); -// margin-bottom: 0; -// font-size: $topbar-button-font-size; -// // position: relative; -// // top: -1px; - -// // Corrects a slight misalignment when put next to an input field -// @media #{$small-only} { -// position: relative; -// top: -1px; -// } -// } - -// // Title Area -// .title-area { -// position: relative; -// margin: 0; -// } - -// .name { -// height: $topbar-height; -// margin: 0; -// font-size: $rem-base; - -// h1, h2, h3, h4, p, span { -// line-height: $topbar-height; -// font-size: $topbar-title-font-size; -// margin: 0; -// a { -// font-weight: $topbar-title-weight; -// color: $topbar-link-color; -// width: 75%; -// display: block; -// padding: 0 $topbar-link-padding; -// } -// } -// } - -// // Menu toggle button on small devices -// .toggle-topbar { -// position: absolute; -// #{$opposite-direction}: 0; -// top: 0; - -// a { -// color: $topbar-link-color; -// text-transform: $topbar-menu-link-transform; -// font-size: $topbar-menu-link-font-size; -// font-weight: $topbar-menu-link-weight; -// position: relative; -// display: block; -// padding: 0 $topbar-link-padding; -// height: $topbar-height; -// line-height: $topbar-height; -// } - -// // Adding the class "menu-icon" will add the 3-line icon people love and adore. -// &.menu-icon { -// top: 50%; -// margin-top: -16px; - -// a { -// @if $text-direction == rtl { -// text-indent: -58px; -// } -// height: 34px; -// line-height: 33px; -// padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding; -// color: $topbar-menu-link-color; -// position: relative; - -// & { -// // @include hamburger icon -// // -// // We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon -// // $width - Width of hamburger icon -// // $left - If false, icon will be centered horizontally || explicitly set value in rem -// // $top - If false, icon will be centered vertically || explicitly set value in rem -// // $thickness - thickness of lines in hamburger icon, set value in px -// // $gap - spacing between the lines in hamburger icon, set value in px -// // $color - icon color -// // $hover-color - icon color during hover, here it isn't set b/c it would override $topbar-menu-icon-color-toggled -// // $offcanvas - Set to false of @include in topbar -// @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false); -// } -// } -// } -// } - -// // Change things up when the top-bar is expanded -// &.expanded { -// height: auto; -// background: transparent; - -// .title-area { background: $topbar-bg; } - -// .toggle-topbar { -// a { color: $topbar-menu-link-color-toggled; -// span::after { -// // Shh, don't tell, but box-shadows create the menu icon :) -// // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above -// box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled, -// 0 7px 0 1px $topbar-menu-icon-color-toggled, -// 0 14px 0 1px $topbar-menu-icon-color-toggled; -// } -// } -// } -// } -// } - -// // Right and Left Navigation that stacked by default -// .top-bar-section { -// #{$default-float}: 0; -// position: relative; -// width: auto; -// @include single-transition($default-float, $topbar-transition-speed); - -// ul { -// padding: 0; -// width: 100%; -// height: auto; -// display: block; -// font-size: $rem-base; -// margin: 0; -// } - -// .divider, -// [role="separator"] { -// border-top: $topbar-divider-border-top; -// clear: both; -// height: 1px; -// width: 100%; -// } - -// ul li { -// background: $topbar-dropdown-bg; -// & > a { -// display: block; -// width: 100%; -// color: $topbar-link-color; -// padding: 12px 0 12px 0; -// padding-#{$default-float}: $topbar-link-padding; -// font-family: $topbar-link-font-family; -// font-size: $topbar-link-font-size; -// font-weight: $topbar-link-weight; -// text-transform: $topbar-link-text-transform; - -// &.button { -// font-size: $topbar-link-font-size; -// padding-#{$opposite-direction}: $topbar-link-padding; -// padding-#{$default-float}: $topbar-link-padding; -// @include button-style($bg:$primary-color); -// } -// &.button.secondary { @include button-style($bg:$secondary-color); } -// &.button.success { @include button-style($bg:$success-color); } -// &.button.alert { @include button-style($bg:$alert-color); } -// &.button.warning { @include button-style($bg:$warning-color); } -// } - -// > button { -// font-size: $topbar-link-font-size; -// padding-#{$opposite-direction}: $topbar-link-padding; -// padding-#{$default-float}: $topbar-link-padding; -// @include button-style($bg:$primary-color); - -// &.secondary { @include button-style($bg:$secondary-color); } -// &.success { @include button-style($bg:$success-color); } -// &.alert { @include button-style($bg:$alert-color); } -// &.warning { @include button-style($bg:$warning-color); } -// } - -// // Apply the hover link color when it has that class -// &:hover:not(.has-form) > a { -// background-color: $topbar-link-bg-color-hover; -// @if ($topbar-link-bg-hover) { -// background: $topbar-link-bg-hover; -// } -// color: $topbar-link-color-hover; -// } - -// // Apply the active link color when it has that class -// &.active > a { -// background: $topbar-link-bg-active; -// color: $topbar-link-color-active; -// &:hover { -// background: $topbar-link-bg-active-hover; -// color: $topbar-link-color-active-hover; -// } -// } -// } - -// // Add some extra padding for list items contains buttons -// .has-form { padding: $topbar-link-padding; } - -// // Styling for list items that have a dropdown within them. -// .has-dropdown { -// position: relative; - -// & > a { -// &:after { -// @if ($topbar-arrows){ -// @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float); -// } -// margin-#{$opposite-direction}: $topbar-link-padding; -// margin-top: -($topbar-dropdown-toggle-size / 2) - 2; -// position: absolute; -// top: 50%; -// #{$opposite-direction}: 0; -// } -// } - -// &.moved { position: static; -// & > .dropdown { -// @include topbar-show-dropdown(); -// width: 100%; -// } -// & > a:after { -// display: none; -// } -// } -// } - -// // Styling elements inside of dropdowns -// .dropdown { -// padding: 0; -// position: absolute; -// #{$default-float}: 100%; -// top: 0; -// z-index: 99; -// @include topbar-hide-dropdown(); - -// li { -// width: 100%; -// height: auto; - -// a { -// font-weight: $topbar-dropdown-link-weight; -// padding: 8px $topbar-link-padding; -// &.parent-link { -// font-weight: $topbar-link-weight; -// } -// } - -// &.title h5, &.parent-link { -// // Back Button -// margin-bottom: 0; -// margin-top: 0; -// font-size: $topbar-back-link-size; -// a { -// color: $topbar-link-color; -// // line-height: ($topbar-height / 2); -// display: block; -// &:hover { background:none; } -// } -// } -// &.has-form { padding: 8px $topbar-link-padding; } -// .button, button { top: auto; } -// } - -// label { -// padding: 8px $topbar-link-padding 2px; -// margin-bottom: 0; -// text-transform: $topbar-dropdown-label-text-transform; -// color: $topbar-dropdown-label-color; -// font-weight: $topbar-dropdown-label-font-weight; -// font-size: $topbar-dropdown-label-font-size; -// } -// } -// } - -// .js-generated { display: block; } - - -// // Top Bar styles intended for screen sizes above the breakpoint. -// @media #{$topbar-media-query} { -// .top-bar { -// background: $topbar-bg; -// @include clearfix; -// overflow: visible; - -// .toggle-topbar { display: none; } - -// .title-area { float: $default-float; } -// .name h1 a { width: auto; } - -// input, -// .button, -// button { -// font-size: rem-calc(14); -// position: relative; -// height: $topbar-input-height; -// top: (($topbar-height - $topbar-input-height) / 2); -// } - -// &.expanded { background: $topbar-bg; } -// } - -// .contain-to-grid .top-bar { -// max-width: $row-width; -// margin: 0 auto; -// margin-bottom: $topbar-margin-bottom; -// } - -// .top-bar-section { -// @include single-transition(none,0,0); -// #{$default-float}: 0 !important; - -// ul { -// width: auto; -// height: auto !important; -// display: inline; - -// li { -// float: $default-float; -// .js-generated { display: none; } -// } -// } - -// li { -// &.hover { -// > a:not(.button) { -// background-color: $topbar-link-bg-color-hover; -// @if ($topbar-link-bg-hover) { -// background: $topbar-link-bg-hover; -// } -// color: $topbar-link-color-hover; -// } -// } -// &:not(.has-form) { -// a:not(.button) { -// padding: 0 $topbar-link-padding; -// line-height: $topbar-height; -// background: $topbar-link-bg; -// &:hover { -// background-color: $topbar-link-bg-color-hover; -// @if ($topbar-link-bg-hover) { -// background: $topbar-link-bg-hover; -// } -// } -// } -// } -// &.active:not(.has-form) { -// a:not(.button) { -// padding: 0 $topbar-link-padding; -// line-height: $topbar-height; -// color: $topbar-link-color-active; -// background: $topbar-link-bg-active; -// &:hover { -// background: $topbar-link-bg-active-hover; -// color: $topbar-link-color-active-hover; -// } -// } -// } -// } - -// .has-dropdown { -// @if($topbar-arrows){ -// & > a { -// padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important; -// &:after { -// @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top); -// margin-top: -($topbar-dropdown-toggle-size / 2); -// top: ($topbar-height / 2); -// } -// } -// } - -// &.moved { position: relative; -// & > .dropdown { -// @include topbar-hide-dropdown(); -// } -// } - -// &.hover, &.not-click:hover { -// & > .dropdown { -// @include topbar-show-dropdown(); -// } -// } -// > a:focus + .dropdown { -// @include topbar-show-dropdown(); -// } - -// .dropdown li.has-dropdown { -// & > a { -// @if ($topbar-dropdown-arrows){ -// &:after { -// border: none; -// content: "\00bb"; -// top: 1rem; -// margin-top: -1px; -// #{$opposite-direction}: 5px; -// line-height: 1.2; -// } -// } -// } -// } -// } - -// .dropdown { -// #{$default-float}: 0; -// top: auto; -// background: transparent; -// min-width: 100%; - -// li { -// a { -// color: $topbar-dropdown-link-color; -// line-height: $topbar-height; -// white-space: nowrap; -// padding: 12px $topbar-link-padding; -// background: $topbar-dropdown-link-bg; -// } - -// &:not(.has-form):not(.active) { -// & > a:not(.button) { -// color: $topbar-dropdown-link-color; -// background: $topbar-dropdown-link-bg; -// } - -// &:hover > a:not(.button) { -// color: $topbar-dropdown-link-color-hover; -// background-color: $topbar-link-bg-color-hover; -// @if ($topbar-dropdown-link-bg-hover) { -// background: $topbar-dropdown-link-bg-hover; -// } -// } -// } - -// label { -// white-space: nowrap; -// background: $topbar-dropdown-label-bg; -// } - -// // Second Level Dropdowns -// .dropdown { -// #{$default-float}: 100%; -// top: 0; -// } -// } -// } - -// & > ul > .divider, -// & > ul > [role="separator"] { -// border-bottom: none; -// border-top: none; -// border-#{$opposite-direction}: $topbar-divider-border-bottom; -// clear: none; -// height: $topbar-height; -// width: 0; -// } - -// .has-form { -// background: $topbar-link-bg; -// padding: 0 ($topbar-height / 3); -// height: $topbar-height; -// } - -// // Position overrides for ul.right and ul.left -// .#{$opposite-direction} { -// li .dropdown { -// #{$default-float}: auto; -// #{$opposite-direction}: 0; - -// li .dropdown { #{$opposite-direction}: 100%; } -// } -// } -// .#{$default-float} { -// li .dropdown { -// #{$opposite-direction}: auto; -// #{$default-float}: 0; - -// li .dropdown { #{$default-float}: 100%; } -// } -// } -// } - -// // Degrade gracefully when Javascript is disabled. Displays dropdown and changes -// // background & text color on hover. -// .no-js .top-bar-section { -// ul li { -// // Apply the hover link color when it has that class -// &:hover > a { -// background-color: $topbar-link-bg-color-hover; -// @if ($topbar-link-bg-hover) { -// background: $topbar-link-bg-hover; -// } -// color: $topbar-link-color-hover; -// } - -// // Apply the active link color when it has that class -// &:active > a { -// background: $topbar-link-bg-active; -// color: $topbar-link-color-active; -// } -// } - -// .has-dropdown { -// &:hover { -// & > .dropdown { -// @include topbar-show-dropdown(); -// } -// } -// > a:focus + .dropdown { -// @include topbar-show-dropdown(); -// } -// } -// } -// } -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_type.scss b/app/styles/app/foundation/scss/foundation/components/_type.scss deleted file mode 100644 index 6a19d91d..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_type.scss +++ /dev/null @@ -1,525 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// $include-html-type-classes: $include-html-classes !default; - -// // 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: $jet !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 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 tags -// $code-color: $oil !default; -// $code-font-family: $font-family-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
element -// $hr-border-width: 1px !default; -// $hr-border-style: solid !default; -// $hr-border-color: $gainsboro !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 $gainsboro !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 $gainsboro !default; - -// // We use these to control padding and margin -// $microformat-padding: rem-calc(10 12) !default; -// $microformat-margin: rem-calc(0 0 20 0) !default; - -// // We use these to control the border styles -// $microformat-border-width: 1px !default; -// $microformat-border-style: solid !default; -// $microformat-border-color: $gainsboro !default; - -// // We use these to control full name font styles -// $microformat-fullname-font-weight: $font-weight-bold !default; -// $microformat-fullname-font-size: rem-calc(15) !default; - -// // We use this to control the summary font styles -// $microformat-summary-font-weight: $font-weight-bold !default; - -// // We use this to control abbr padding -// $microformat-abbr-padding: rem-calc(0 1) !default; - -// // We use this to control abbr font styles -// $microformat-abbr-font-weight: $font-weight-bold !default; -// $microformat-abbr-font-decoration: none !default; - -// // Text alignment class names -// $align-class-names: -// small-only, -// small, -// medium-only, -// medium, -// large-only, -// large, -// xlarge-only, -// xlarge, -// xxlarge-only, -// xxlarge; - -// // Text alignment breakpoints -// $align-class-breakpoints: -// $small-only, -// $small-up, -// $medium-only, -// $medium-up, -// $large-only, -// $large-up, -// $xlarge-only, -// $xlarge-up, -// $xxlarge-only, -// $xxlarge-up; - -// // Generates text align and justify classes -// @mixin align-classes{ -// .text-left { text-align: left !important; } -// .text-right { text-align: right !important; } -// .text-center { text-align: center !important; } -// .text-justify { text-align: justify !important; } - -// @for $i from 1 through length($align-class-names) { -// @media #{(nth($align-class-breakpoints, $i))} { -// .#{(nth($align-class-names, $i))}-text-left { text-align: left !important; } -// .#{(nth($align-class-names, $i))}-text-right { text-align: right !important; } -// .#{(nth($align-class-names, $i))}-text-center { text-align: center !important; } -// .#{(nth($align-class-names, $i))}-text-justify { text-align: justify !important; } -// } -// } -// } - -// // -// // Typography Placeholders -// // - -// // These will throw a deprecation warning if used within a media query. -// @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("type") { -// @if $include-html-type-classes { -// // Responsive Text alignment -// @include align-classes; - -// /* 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; - -// &: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; -// 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; -// } - -// ul { -// margin-#{$default-float}: $list-side-margin; -// &.no-bullet { -// margin-#{$default-float}: $list-side-margin-no-bullet; -// li { -// ul, -// ol { -// margin-#{$default-float}: $list-nested-margin; -// margin-bottom: 0; -// list-style: none; -// } -// } -// } -// } - -// /* Unordered Lists */ -// ul { -// li { -// ul, -// ol { -// margin-#{$default-float}: $list-nested-margin; -// margin-bottom: 0; -// } -// } -// &.square, -// &.circle, -// &.disc { -// li ul { list-style: inherit; } -// } - -// &.square { list-style-type: square; margin-#{$default-float}: $list-side-margin;} -// &.circle { list-style-type: circle; margin-#{$default-float}: $list-side-margin;} -// &.disc { list-style-type: disc; margin-#{$default-float}: $list-side-margin;} -// &.no-bullet { list-style: none; } -// } - -// /* Ordered Lists */ -// ol { -// margin-#{$default-float}: $list-ordered-side-margin; -// li { -// ul, -// ol { -// margin-#{$default-float}: $list-nested-margin; -// margin-bottom: 0; -// } -// } -// } - -// /* 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; -// // cursor: $cursor-help-value; -// // } -// // abbr { -// // text-transform: none; -// // &[title] { -// // border-bottom: $acronym-underline; -// // } -// // } - -// /* Blockquotes */ -// blockquote { -// margin: 0 0 $paragraph-margin-bottom; -// padding: $blockquote-padding; -// border-#{$default-float}: $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; -// } - -// /* Microformats */ -// .vcard { -// display: inline-block; -// margin: $microformat-margin; -// border: $microformat-border-width $microformat-border-style $microformat-border-color; -// padding: $microformat-padding; - -// li { -// margin: 0; -// display: block; -// } -// .fn { -// font-weight: $microformat-fullname-font-weight; -// font-size: $microformat-fullname-font-size; -// } -// } - -// .vevent { -// .summary { font-weight: $microformat-summary-font-weight; } - -// // abbr { -// // cursor: $cursor-default-value; -// // text-decoration: $microformat-abbr-font-decoration; -// // font-weight: $microformat-abbr-font-weight; -// // border: none; -// // padding: $microformat-abbr-padding; -// // } -// } - - -// @media #{$medium-up} { -// 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; } -// } - -// // Only include these styles if you want them. -// @if $include-print-styles { -// /* -// * Print styles. -// * -// * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ -// * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) -// */ -// .print-only { display: none !important; } -// @media print { -// * { -// background: transparent !important; -// color: $black !important; /* Black prints faster: h5bp.com/s */ -// box-shadow: none !important; -// text-shadow: none !important; -// } - -// a, -// a:visited { text-decoration: underline;} -// a[href]:after { content: " (" attr(href) ")"; } - -// // abbr[title]:after { content: " (" attr(title) ")"; } - -// // Don't show links for images, or javascript/internal links -// .ir a:after, -// a[href^="javascript:"]:after, -// a[href^="#"]:after { content: ""; } - -// pre, -// blockquote { -// border: 1px solid $aluminum; -// page-break-inside: avoid; -// } - -// thead { display: table-header-group; /* h5bp.com/t */ } - -// tr, -// img { page-break-inside: avoid; } - -// img { max-width: 100% !important; } - -// @page { margin: 0.5cm; } - -// p, -// h2, -// h3 { -// orphans: 3; -// widows: 3; -// } - -// h2, -// h3 { page-break-after: avoid; } - -// .hide-on-print { display: none !important; } -// .print-only { display: block !important; } -// .hide-for-print { display: none !important; } -// .show-for-print { display: inherit !important; } -// } -// } - -// } -// } diff --git a/app/styles/app/foundation/scss/foundation/components/_visibility.scss b/app/styles/app/foundation/scss/foundation/components/_visibility.scss deleted file mode 100644 index d3eddd42..00000000 --- a/app/styles/app/foundation/scss/foundation/components/_visibility.scss +++ /dev/null @@ -1,408 +0,0 @@ -// // Foundation by ZURB -// // foundation.zurb.com -// // Licensed under MIT Open Source - -// @import "global"; - -// // -// // Foundation Visibility Classes -// // -// $include-html-visibility-classes: $include-html-classes !default; -// $include-accessibility-classes: true !default; -// $include-table-visibility-classes: true !default; -// $include-legacy-visibility-classes: true !default; - -// // -// // Media Class Names -// // -// // Visibility Breakpoints -// $visibility-breakpoint-sizes: -// small, -// medium, -// large, -// xlarge, -// xxlarge; - -// $visibility-breakpoint-queries: -// unquote($small-up), -// unquote($medium-up), -// unquote($large-up), -// unquote($xlarge-up), -// unquote($xxlarge-up); - -// @mixin visibility-loop { -// @each $current-visibility-breakpoint in $visibility-breakpoint-sizes { -// $visibility-inherit-list: (); -// $visibility-none-list: (); - -// $visibility-visible-list: (); -// $visibility-hidden-list: (); - -// $visibility-table-list: (); -// $visibility-table-header-group-list: (); -// $visibility-table-row-group-list: (); -// $visibility-table-row-list: (); -// $visibility-table-cell-list: (); - -// @each $visibility-comparison-breakpoint in $visibility-breakpoint-sizes { -// @if index($visibility-breakpoint-sizes, $visibility-comparison-breakpoint) < index($visibility-breakpoint-sizes, $current-visibility-breakpoint) { -// // Smaller than current breakpoint - -// $visibility-inherit-list: append($visibility-inherit-list, unquote( -// '.hide-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-none-list: append($visibility-none-list, unquote( -// '.show-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-visible-list: append($visibility-visible-list, unquote( -// '.hidden-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-hidden-list: append($visibility-hidden-list, unquote( -// '.visible-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-list: append($visibility-table-list, unquote( -// 'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( -// 'thead.hide-for-#{$visibility-comparison-breakpoint}-only, thead.show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( -// 'tbody.hide-for-#{$visibility-comparison-breakpoint}-only, tbody.show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-row-list: append($visibility-table-row-list, unquote( -// 'tr.hide-for-#{$visibility-comparison-breakpoint}-only, tr.show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( -// 'th.hide-for-#{$visibility-comparison-breakpoint}-only, td.hide-for-#{$visibility-comparison-breakpoint}-only, th.show-for-#{$visibility-comparison-breakpoint}-up, td.show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); - -// // Foundation 4 compatibility: -// // Include .show/hide-for-[size] and .show/hide-for-[size]-down classes -// // for small, medium, and large breakpoints only -// @if $include-legacy-visibility-classes and index((small, medium, large), $visibility-comparison-breakpoint) != false { -// $visibility-inherit-list: append($visibility-inherit-list, unquote( -// '.hide-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-none-list: append($visibility-none-list, unquote( -// '.show-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-visible-list: append($visibility-visible-list, unquote( -// '.hidden-for-#{$visibility-comparison-breakpoint}, .hidden-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-hidden-list: append($visibility-hidden-list, unquote( -// '.visible-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-list: append($visibility-table-list, unquote( -// 'table.hide-for-#{$visibility-comparison-breakpoint}, table.hide-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( -// 'thead.hide-for-#{$visibility-comparison-breakpoint}, thead.hide-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( -// 'tbody.hide-for-#{$visibility-comparison-breakpoint}, tbody.hide-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-row-list: append($visibility-table-row-list, unquote( -// 'tr.hide-for-#{$visibility-comparison-breakpoint}, tr.hide-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( -// 'th.hide-for-#{$visibility-comparison-breakpoint}, td.hide-for-#{$visibility-comparison-breakpoint}, th.hide-for-#{$visibility-comparison-breakpoint}-down, td.hide-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// } - -// } @else if index($visibility-breakpoint-sizes, $visibility-comparison-breakpoint) > index($visibility-breakpoint-sizes, $current-visibility-breakpoint) { -// // Larger than current breakpoint - -// $visibility-inherit-list: append($visibility-inherit-list, unquote( -// '.hide-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-none-list: append($visibility-none-list, unquote( -// '.show-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-visible-list: append($visibility-visible-list, unquote( -// '.hidden-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-hidden-list: append($visibility-hidden-list, unquote( -// '.visible-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-list: append($visibility-table-list, unquote( -// 'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.hide-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( -// 'thead.hide-for-#{$visibility-comparison-breakpoint}-only, thead.hide-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( -// 'tbody.hide-for-#{$visibility-comparison-breakpoint}-only, tbody.hide-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-row-list: append($visibility-table-row-list, unquote( -// 'tr.hide-for-#{$visibility-comparison-breakpoint}-only, tr.hide-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( -// 'th.hide-for-#{$visibility-comparison-breakpoint}-only, td.hide-for-#{$visibility-comparison-breakpoint}-only, th.hide-for-#{$visibility-comparison-breakpoint}-up, td.hide-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); - -// // Foundation 4 compatibility: -// // Include .show/hide-for-[size] and .show/hide-for-[size]-down classes -// // for small, medium, and large breakpoints only -// @if $include-legacy-visibility-classes and index((small, medium, large), $visibility-comparison-breakpoint) != false { -// $visibility-inherit-list: append($visibility-inherit-list, unquote( -// '.hide-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-none-list: append($visibility-none-list, unquote( -// '.show-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-visible-list: append($visibility-visible-list, unquote( -// '.hidden-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-hidden-list: append($visibility-hidden-list, unquote( -// '.visible-for-#{$visibility-comparison-breakpoint}, .hidden-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-list: append($visibility-table-list, unquote( -// 'table.hide-for-#{$visibility-comparison-breakpoint}, table.show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( -// 'thead.hide-for-#{$visibility-comparison-breakpoint}, thead.show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( -// 'tbody.hide-for-#{$visibility-comparison-breakpoint}, tbody.show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-row-list: append($visibility-table-row-list, unquote( -// 'tr.hide-for-#{$visibility-comparison-breakpoint}, tr.show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( -// 'th.hide-for-#{$visibility-comparison-breakpoint}, td.hide-for-#{$visibility-comparison-breakpoint}, th.show-for-#{$visibility-comparison-breakpoint}-down, td.show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// } - -// } @else { -// // Current breakpoint - -// $visibility-inherit-list: append($visibility-inherit-list, unquote( -// '.show-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-none-list: append($visibility-none-list, unquote( -// '.hide-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-visible-list: append($visibility-visible-list, unquote( -// '.visible-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-hidden-list: append($visibility-hidden-list, unquote( -// '.hidden-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-list: append($visibility-table-list, unquote( -// 'table.show-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( -// 'thead.show-for-#{$visibility-comparison-breakpoint}-only, thead.show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( -// 'tbody.show-for-#{$visibility-comparison-breakpoint}-only, tbody.show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-row-list: append($visibility-table-row-list, unquote( -// 'tr.show-for-#{$visibility-comparison-breakpoint}-only, tr.show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); -// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( -// 'th.show-for-#{$visibility-comparison-breakpoint}-only, td.show-for-#{$visibility-comparison-breakpoint}-only, th.show-for-#{$visibility-comparison-breakpoint}-up, td.show-for-#{$visibility-comparison-breakpoint}-up' -// ), comma); - -// // Foundation 4 compatibility: -// // Include .show/hide-for-[size] and .show/hide-for-[size]-down classes -// // for small, medium, and large breakpoints only -// @if $include-legacy-visibility-classes and index((small, medium, large), $visibility-comparison-breakpoint) != false { -// $visibility-inherit-list: append($visibility-inherit-list, unquote( -// '.show-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-none-list: append($visibility-none-list, unquote( -// '.hide-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-visible-list: append($visibility-visible-list, unquote( -// '.visible-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-hidden-list: append($visibility-hidden-list, unquote( -// '.hidden-for-#{$visibility-comparison-breakpoint}, .hidden-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-list: append($visibility-table-list, unquote( -// 'table.show-for-#{$visibility-comparison-breakpoint}, table.show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( -// 'thead.show-for-#{$visibility-comparison-breakpoint}, thead.show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( -// 'tbody.show-for-#{$visibility-comparison-breakpoint}, tbody.show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-row-list: append($visibility-table-row-list, unquote( -// 'tr.show-for-#{$visibility-comparison-breakpoint}, tr.show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( -// 'th.show-for-#{$visibility-comparison-breakpoint}, td.show-for-#{$visibility-comparison-breakpoint}, th.show-for-#{$visibility-comparison-breakpoint}-down, td.show-for-#{$visibility-comparison-breakpoint}-down' -// ), comma); -// } -// } -// } - -// /* #{$current-visibility-breakpoint} displays */ -// @media #{nth($visibility-breakpoint-queries, index($visibility-breakpoint-sizes, $current-visibility-breakpoint))} { -// #{$visibility-inherit-list} { -// display: inherit !important; -// } -// #{$visibility-none-list} { -// display: none !important; -// } -// @if $include-accessibility-classes != false { -// #{$visibility-visible-list} { -// @include element-invisible-off; -// } -// #{$visibility-hidden-list} { -// @include element-invisible; -// } -// } -// @if $include-table-visibility-classes != false { -// #{$visibility-table-list} { -// display: table !important; -// } -// #{$visibility-table-header-group-list} { -// display: table-header-group !important; -// } -// #{$visibility-table-row-group-list} { -// display: table-row-group !important; -// } -// #{$visibility-table-row-list} { -// display: table-row !important; -// } -// #{$visibility-table-cell-list} { -// display: table-cell !important; -// } -// } -// } -// } -// } - - -// @if $include-html-visibility-classes != false { - -// @include visibility-loop; - -// /* Orientation targeting */ -// .show-for-landscape, -// .hide-for-portrait { display: inherit !important; } -// .hide-for-landscape, -// .show-for-portrait { display: none !important; } - -// /* Specific visibility for tables */ -// table { -// &.hide-for-landscape, -// &.show-for-portrait { display: table !important; } -// } -// thead { -// &.hide-for-landscape, -// &.show-for-portrait { display: table-header-group !important; } -// } -// tbody { -// &.hide-for-landscape, -// &.show-for-portrait { display: table-row-group !important; } -// } -// tr { -// &.hide-for-landscape, -// &.show-for-portrait { display: table-row !important; } -// } -// td, -// th { -// &.hide-for-landscape, -// &.show-for-portrait { display: table-cell !important; } -// } - -// @media #{$landscape} { -// .show-for-landscape, -// .hide-for-portrait { display: inherit !important; } -// .hide-for-landscape, -// .show-for-portrait { display: none !important; } - -// /* Specific visibility for tables */ -// table { -// &.show-for-landscape, -// &.hide-for-portrait { display: table !important; } -// } -// thead { -// &.show-for-landscape, -// &.hide-for-portrait { display: table-header-group !important; } -// } -// tbody { -// &.show-for-landscape, -// &.hide-for-portrait { display: table-row-group !important; } -// } -// tr { -// &.show-for-landscape, -// &.hide-for-portrait { display: table-row !important; } -// } -// td, -// th { -// &.show-for-landscape, -// &.hide-for-portrait { display: table-cell !important; } -// } -// } - -// @media #{$portrait} { -// .show-for-portrait, -// .hide-for-landscape { display: inherit !important; } -// .hide-for-portrait, -// .show-for-landscape { display: none !important; } - -// /* Specific visibility for tables */ -// table { -// &.show-for-portrait, -// &.hide-for-landscape { display: table !important; } -// } -// thead { -// &.show-for-portrait, -// &.hide-for-landscape { display: table-header-group !important; } -// } -// tbody { -// &.show-for-portrait, -// &.hide-for-landscape { display: table-row-group !important; } -// } -// tr { -// &.show-for-portrait, -// &.hide-for-landscape { display: table-row !important; } -// } -// td, -// th { -// &.show-for-portrait, -// &.hide-for-landscape { display: table-cell !important; } -// } -// } - -// /* Touch-enabled device targeting */ -// .show-for-touch { display: none !important; } -// .hide-for-touch { display: inherit !important; } -// .touch .show-for-touch { display: inherit !important; } -// .touch .hide-for-touch { display: none !important; } - -// /* Specific visibility for tables */ -// table.hide-for-touch { display: table !important; } -// .touch table.show-for-touch { display: table !important; } -// thead.hide-for-touch { display: table-header-group !important; } -// .touch thead.show-for-touch { display: table-header-group !important; } -// tbody.hide-for-touch { display: table-row-group !important; } -// .touch tbody.show-for-touch { display: table-row-group !important; } -// tr.hide-for-touch { display: table-row !important; } -// .touch tr.show-for-touch { display: table-row !important; } -// td.hide-for-touch { display: table-cell !important; } -// .touch td.show-for-touch { display: table-cell !important; } -// th.hide-for-touch { display: table-cell !important; } -// .touch th.show-for-touch { display: table-cell !important; } - - -// /* Print visibility */ -// @media print { -// .show-for-print { display: block; } -// .hide-for-print { display: none; } - -// table.show-for-print { display: table !important; } -// thead.show-for-print { display: table-header-group !important; } -// tbody.show-for-print { display: table-row-group !important; } -// tr.show-for-print { display: table-row !important; } -// td.show-for-print { display: table-cell !important; } -// th.show-for-print { display: table-cell !important; } - -// } - -// } diff --git a/app/styles/app/github.sass b/app/styles/app/github.sass deleted file mode 100644 index f7a0b394..00000000 --- a/app/styles/app/github.sass +++ /dev/null @@ -1,36 +0,0 @@ - -#github-wrapper - position: absolute - z-index: 1001 - top: -40px - right: 0px - width: 135px - height: 135px - overflow: hidden - pointer-events: none - -#github - display: block - position: absolute - z-index: 1001 - top: 40px - right: -70px - width: 250px - padding: 3px 0 - border-top: 2px solid #ef9f4c - border-bottom: 2px solid #ef9f4c - background: #ef7600 - - color: white - text-align: center - text-decoration: none - font-size: 13px - font-weight: bold - line-height: 19px - letter-spacing: -1px - text-shadow: 0 0 10px #522600 - - pointer-events: auto - transform: rotate(45deg) - box-shadow: rgba(black, 0.5) 1px 1px 10px, rgba(black, 0.07) 0 0 3px 1px inset - diff --git a/app/styles/app/layout.sass b/app/styles/app/layout.sass index e4027df0..2b6f2487 100644 --- a/app/styles/app/layout.sass +++ b/app/styles/app/layout.sass @@ -1,8 +1,10 @@ - .centered .row max-width: 1024px + max-width: 1024px + margin: auto + .main margin: auto max-width: 1024px @@ -30,15 +32,9 @@ #top top: 0 -#not-found #main - padding: 100px 50px 0 50px - -#left, #right, .wrapper-main - position: relative - #left padding: 0 0 110px 0 - background-color: $white + background-color: white border-right: 2px solid #f2f2f2 #main @@ -56,7 +52,7 @@ @media #{$large-up} - #left, #right, .wrapper-main + #left, .wrapper-main min-height: 100vh #left @@ -70,7 +66,7 @@ float: left margin-left: grid-calc(6, 24) overflow: visible - +ercac .centered .wrapper-main max-width: 1024px margin-left: auto @@ -96,4 +92,3 @@ .non-centered .wrapper-main width: grid-calc(31, 36) margin-left: grid-calc(5, 36) - diff --git a/app/styles/app/ansi.sass b/app/styles/app/layouts/ansi.sass similarity index 100% rename from app/styles/app/ansi.sass rename to app/styles/app/layouts/ansi.sass diff --git a/app/styles/app/auth.sass b/app/styles/app/layouts/auth.sass similarity index 100% rename from app/styles/app/auth.sass rename to app/styles/app/layouts/auth.sass diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass index c21344dc..e5604177 100644 --- a/app/styles/app/layouts/branches.sass +++ b/app/styles/app/layouts/branches.sass @@ -46,7 +46,7 @@ position: absolute display: none z-index: 5 - background-color: $white + background-color: white border-radius: 2px &:after, @@ -61,7 +61,7 @@ margin: 0 auto transform: rotate(45deg) &:after - background-color: $white + background-color: white .dropup-trigger:hover ~ &, .dropup-trigger:hover &, &:hover @@ -70,7 +70,7 @@ .dropup--blue @extend %dropup &:before - background-color: $teal-dark + background-color: $oxide-blue bottom: -5px &:after bottom: -4px @@ -82,28 +82,28 @@ li display: inline-block margin: 2em 0 - background: $teal-dark + background: $oxide-blue border-radius: 2px a display: inline-block padding: 0.3em 0.5em - color: $white + color: white text-decoration: none line-height: 1 .icon-trigger path, .icon-eye path - fill: $white + fill: white @media #{$medium-up} width: 10em left: 0 padding: .4em transform: translate(-42%, -170%) - border: 1px solid $teal-dark + border: 1px solid $oxide-blue li display: block margin: 0 - background-color: $white + background-color: white border-radius: 0 cursor: pointer .icon-trigger path, @@ -113,14 +113,14 @@ display: block padding: 0.3em .5em 0.4em text-decoration: none - color: $grey-dark + color: $cement-grey line-height: 1.4 &:hover - color: $white - background-color: $teal-dark + color: white + background-color: $oxide-blue .icon-trigger path, .icon-eye path - fill: $white + fill: white .dropup-item display: inline-block @@ -146,14 +146,14 @@ padding: .1em .1em white-space: nowrap font-size: 14px; - border: 1px solid $red-dark + border: 1px solid $brick-red &:before - background-color: $red-dark + background-color: $brick-red .dropup-trigger padding: 1em 0 path - fill: $teal-dark + fill: $oxide-blue .is-relative position: relative diff --git a/app/styles/app/layouts/broadcasts.sass b/app/styles/app/layouts/broadcasts.sass index d1ea6298..77548dd2 100644 --- a/app/styles/app/layouts/broadcasts.sass +++ b/app/styles/app/layouts/broadcasts.sass @@ -11,7 +11,7 @@ .broadcasts position: relative - background-color: $white + background-color: white list-style: none padding: 0 1em margin: 0 auto .7em @@ -29,7 +29,7 @@ display: block width: 14px height: 14px - background: $white + background: white top: -0.5em left: 136px transform: rotate(45deg) @@ -86,13 +86,13 @@ margin-right: .5rem margin-left: -1.5rem border-radius: 50% - background-color: $grey-medium + background-color: $cement-grey &.warning - background-color: $red-dark + background-color: $brick-red &.announcement - background-color: $green-dark + background-color: $turf-green .icon-broadcast diff --git a/app/styles/app/layouts/caches.sass b/app/styles/app/layouts/caches.sass index 251dec90..3174db80 100644 --- a/app/styles/app/layouts/caches.sass +++ b/app/styles/app/layouts/caches.sass @@ -1,13 +1,12 @@ - .caches-header .small-title margin-top: .5em small - color: $grey + color: $cement-grey font-size: 14px a:hover, a:active - border-bottom: 1px solid $grey + border-bottom: 1px solid $cement-grey @media #{$medium-up} display: flex @@ -66,7 +65,7 @@ @extend %icon-line-trashcan &:hover, &:active - color: $red + color: $brick-red @extend %icon-line-trashcan-red .delete-cache-icon @@ -84,7 +83,7 @@ @extend %icon-line-trashcan &:hover, &:active - color: $red + color: $brick-red .icon-trash @extend %icon-line-trashcan-red @media #{$medium-up} @@ -97,4 +96,3 @@ white-space: nowrap overflow: hidden background-position: 50% 0 - diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index e0c160a5..279608b7 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -1,53 +1,4 @@ - -.dashboard - .centered - margin: auto - max-width: 1024px - -.dashboard-filter - padding: 0 $column-gutter/2 - font-size: 16px - font-weight: $font-weight-normal - @media #{$medium-up} - padding: 0 - -.dashboard-active +.dashboard-active, +.dashbaord-inactive + list-style: none padding: 0 - margin: 3rem 0 5rem - list-style-type: none - -.dashboard-active li - text-align: left - .one-line - margin-left: 2em - text-align: left - .two-line - padding: .1em 0 - .row-item h2 - font-size: 18px - - @media #{$medium-up} - & > div:first-of-type - width: 30% - position: relative - padding-left: 1em - &:after - content: "" - @include fadeOut(right, -90deg, $white) - - & > div:nth-of-type(2) - width: 27% - & > div:nth-of-type(3) - width: 20% - & > div:nth-of-type(4) - width: 20% - - h2 - padding-left: 1.5em - .one-line - margin-left: 0 - - .dropup--blue - li - border: none - transform: translate(-19%, -170%) diff --git a/app/styles/app/layouts/error.sass b/app/styles/app/layouts/error.sass index efd2c1d9..e96d0ffa 100644 --- a/app/styles/app/layouts/error.sass +++ b/app/styles/app/layouts/error.sass @@ -3,7 +3,7 @@ */ @mixin error-bg-gradient($color) - background: linear-gradient(0deg, $color, $color 38.9%, $error-bg-gradient 39%, $white 60%, $white) + background: linear-gradient(0deg, $color, $color 38.9%, $error-bg-gradient 39%, white 60%, white) @mixin error-position-img($size:inherit, $pos:inherit) background: @@ -27,7 +27,6 @@ overflow: hidden background-repeat: no-repeat - .main--error min-height: 100% @@ -154,4 +153,3 @@ @include error-position-img(87vw auto, 63% 87%) @media #{$medium-up} @include error-position-img(auto 44vh, 63% 83%) - diff --git a/app/styles/app/layouts/first-sync.sass b/app/styles/app/layouts/first-sync.sass index 279f0929..141edf43 100644 --- a/app/styles/app/layouts/first-sync.sass +++ b/app/styles/app/layouts/first-sync.sass @@ -1,4 +1,3 @@ - .mascot display: block margin: 0 0 50px 0 @@ -15,9 +14,8 @@ margin: 1.5em 0 1em font-size: 36px font-weight: 400 - color: $grey-medium + color: $cement-grey p font-size: $font-size-ml line-height: 1.5 - diff --git a/app/styles/app/layouts/jobs.sass b/app/styles/app/layouts/jobs.sass index ece92120..dc140e9e 100644 --- a/app/styles/app/layouts/jobs.sass +++ b/app/styles/app/layouts/jobs.sass @@ -23,25 +23,25 @@ .jobs-item border: 1px solid $cream-dark margin-bottom: 5px - @include colorJobs($green, 'passed', 6px, rgba($green, .1)) - @include colorJobs($red, 'failed', 6px, rgba($red, .1)) - @include colorJobs($red, 'errored', 6px, rgba($red, .1)) - @include colorJobs($grey, 'canceled', 6px, #f1f1f1) - @include colorJobs($yellow-font, 'started', 6px, rgba($yellow, .1), true, $yellow-bg) - @include colorJobs($yellow-font, 'queued', 6px, rgba($yellow, .1), true, $yellow-bg) - @include colorJobs($yellow-font, 'booting', 6px, rgba($yellow, .1), true, $yellow-bg) - @include colorJobs($yellow-font, 'received', 6px, rgba($yellow, .1), true, $yellow-bg) - @include colorJobs($yellow-font, 'created', 6px, rgba($yellow, .1), true, $yellow-bg) + @include colorJobs($turf-green, 'passed', 6px, $seed-green) + @include colorJobs($brick-red, 'failed', 6px, $quartz-red) + @include colorJobs($brick-red, 'errored', 6px, $quartz-red) + @include colorJobs($cement-grey, 'canceled', 6px, $pebble-grey) + @include colorJobs($canary-yellow, 'started', 6px, $haze-yellow, true) + @include colorJobs($canary-yellow, 'queued', 6px, $haze-yellow, true) + @include colorJobs($canary-yellow, 'booting', 6px, $haze-yellow, true) + @include colorJobs($canary-yellow, 'received', 6px, $haze-yellow, true) + @include colorJobs($canary-yellow, 'created', 6px, $haze-yellow, true) - @include colorFadeOut('passed',#ECF6EF) - @include colorFadeOut('failed', #FBECEB) - @include colorFadeOut('errored', #FBECEB) - @include colorFadeOut('canceled', #f1f1f1) - @include colorFadeOut('started', #FCFBEB) - @include colorFadeOut('queued', #FCFBEB) - @include colorFadeOut('booting', #FCFBEB) - @include colorFadeOut('received', #FCFBEB) - @include colorFadeOut('created', #FCFBEB) + @include colorFadeOut('passed', $seed-green) + @include colorFadeOut('failed', $quartz-red) + @include colorFadeOut('errored', $quartz-red) + @include colorFadeOut('canceled', $pebble-grey) + @include colorFadeOut('started', $haze-yellow) + @include colorFadeOut('queued', $haze-yellow) + @include colorFadeOut('booting', $haze-yellow) + @include colorFadeOut('received', $haze-yellow) + @include colorFadeOut('created', $haze-yellow) a display: block @@ -56,7 +56,7 @@ .section-title font-size: 16px - color: $grey + color: $cement-grey font-weight: 400 margin: 3rem 0 1rem diff --git a/app/styles/app/main/log.sass b/app/styles/app/layouts/log.sass similarity index 91% rename from app/styles/app/main/log.sass rename to app/styles/app/layouts/log.sass index bbf8d082..fec3ce50 100644 --- a/app/styles/app/main/log.sass +++ b/app/styles/app/layouts/log.sass @@ -20,7 +20,7 @@ size: auto 12px position: 6px 4px border-radius: 2px - color: #f1f1f1 + color: $pebble-grey @extend %icon-arrow-down &:hover @@ -43,7 +43,7 @@ height: 20px width: 20px vertical-align: middle - background-color: $grey-light + background-color: $cement-grey border-radius: 50% &:after content: "" @@ -117,13 +117,13 @@ display: none &:hover, &:active - border-color: $teal - color: $teal + border-color: $oxide-blue + color: $oxide-blue .icon-eye path - fill: $teal + fill: $oxide-blue circle - stroke: $teal + stroke: $oxide-blue fill: transparent .toggle-log-button--dark @@ -146,13 +146,13 @@ clear: left min-height: 42px padding: 15px 0 - color: $color-text-log - font-family: monospace + color: $pebble-grey + font-family: $font-family-monospace font-size: $font-size-log line-height: $line-height-log white-space: pre-wrap word-wrap: break-word - background-color: #2a2a2a + background-color: $color-bg-log-fold counter-reset: line-numbering margin-top: 0 @@ -196,7 +196,7 @@ // &.active p:first-of-type - background: $color-bg-log-fold inline-image('ui/log.fold.open.2.svg') no-repeat 8px 3px + background: darken($color-bg-log-hover, 10) inline-image('ui/log.fold.open.2.svg') no-repeat 8px 3px &.highlight background-color: $color-bg-log-fold-highlight @@ -240,7 +240,7 @@ .log-notice background-color: #A6ADAD - color: $white + color: white min-height: 70px line-height: 35px text-align: center diff --git a/app/styles/app/layouts/missing-notice.sass b/app/styles/app/layouts/missing-notice.sass index 94b203a0..50088208 100644 --- a/app/styles/app/layouts/missing-notice.sass +++ b/app/styles/app/layouts/missing-notice.sass @@ -2,7 +2,7 @@ text-align: center p a - color: $grey-dark + color: $cement-grey text-decoration: underline a.button diff --git a/app/styles/app/layouts/owner.sass b/app/styles/app/layouts/owner.sass index f599efe3..3b8839cb 100644 --- a/app/styles/app/layouts/owner.sass +++ b/app/styles/app/layouts/owner.sass @@ -1,4 +1,3 @@ - .owner-header padding: 0 $column-gutter/2 margin-bottom: 3rem @@ -37,7 +36,7 @@ .owner-info @extend %inline-block vertical-align: middle - + .owner-avatar width: grid-calc(4, 12) @media #{$medium-up} @@ -51,7 +50,7 @@ overflow: hidden &:after content: "" - @include fadeOut(right, -90deg, $white) + @include fadeOut(right, -90deg, white) .tabs--owner padding : 0 $column-gutter/2 @@ -59,7 +58,7 @@ .active, .active:hover, position: relative - color: $teal-dark + color: $oxide-blue &:after content: "" position: absolute @@ -67,7 +66,7 @@ bottom: -0.25em width: 100% height: 2px - background-color: $teal-light + background-color: $oxide-blue .active font-weight: 600 diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass index 6c95e01a..d191f1e7 100644 --- a/app/styles/app/layouts/profile.sass +++ b/app/styles/app/layouts/profile.sass @@ -19,10 +19,10 @@ line-height: 1.45 p:not(.sync-last) font-size: $font-size-sm - color: $grey-light + color: $cement-grey margin: 2rem 0 1rem 0 a - color: $grey-light + color: $cement-grey text-decoration: underline @media #{$medium-up} .profile-header, .sync-button @@ -37,14 +37,14 @@ max-width: 77%; overflow: hidden; &:after - @include fadeOut(right, -90deg, $white) + @include fadeOut(right, -90deg, white) .loading-indicator--white vertical-align: top margin-right: .5em p font-size: $font-size-m - color: $grey-medium + color: $cement-grey .cta-btn text-align: right @@ -171,7 +171,7 @@ p.profile-user-last display: none margin-left: 1rem font-size: $font-size-sm - color: darken($grey-dark, 10) + color: $cement-grey line-height: 1 .sync-spinner vertical-align: top diff --git a/app/styles/app/layouts/pull-requests.sass b/app/styles/app/layouts/pull-requests.sass index f3197733..1f91fea0 100644 --- a/app/styles/app/layouts/pull-requests.sass +++ b/app/styles/app/layouts/pull-requests.sass @@ -31,7 +31,7 @@ overflow: hidden &:after content: "" - +fadeOut(right, -90deg, $white) + +fadeOut(right, -90deg, white) &:hover overflow: visible &:after diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass index 566521ae..4a582ec2 100644 --- a/app/styles/app/layouts/repo.sass +++ b/app/styles/app/layouts/repo.sass @@ -1,4 +1,3 @@ - .repo-header header @media #{$medium-up} @@ -12,12 +11,12 @@ font-size: 36px font-weight: $font-weight-normal a - color: #808080 + color: $asphalt-grey border-bottom: 2px solid transparent transition: border-color 100ms ease &:hover, &:active - border-color: #808080 + border-color: $asphalt-grey .repo-gh width: 28px @@ -52,7 +51,7 @@ $dropdown-button-margin: -9px height: $dropdown-button-height padding: 0 0.7em border: 1px solid #f1f1f1 - color: $grey-light + color: $cement-grey border-radius: 2px text-align: center line-height: 2 @@ -74,8 +73,8 @@ $dropdown-button-margin: -9px &:active, // .display &, .settings-menu:hover & - color: $teal - border-color: $teal + color: $oxide-blue + border-color: $oxide-blue .icon-settings @extend %icon-line-cog-teal &:after @@ -93,15 +92,15 @@ $dropdown-button-margin: -9px list-style: none z-index: 60 background-color: white - border: 1px solid $teal + border: 1px solid $oxide-blue a display: block padding: .4em 1em .5em 2.4em font-size: 14px - color: $teal + color: $oxide-blue &:hover color: white - background-color: $teal + background-color: $oxide-blue @media #{$medium-up} margin-top: -3px @@ -115,4 +114,3 @@ $dropdown-button-margin: -9px &:hover .settings-dropdown display: block - diff --git a/app/styles/app/layouts/requests.sass b/app/styles/app/layouts/requests.sass index 278d846f..1d439816 100644 --- a/app/styles/app/layouts/requests.sass +++ b/app/styles/app/layouts/requests.sass @@ -19,8 +19,8 @@ margin-bottom: 5px font-size: 15px padding-left: 1em - @include colorJobs($green, 'accepted', 6px, rgba($green, .1)) - @include colorJobs($red, 'rejected', 6px, rgba($red, .1)) + @include colorJobs($turf-green, 'accepted', 6px, rgba($turf-green, .1)) + @include colorJobs($brick-red, 'rejected', 6px, rgba($brick-red, .1)) @include requestFadeOut('accepted',#ECF6EF) @include requestFadeOut('rejected', #FBECEB) diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass index 4510cceb..81ea5dff 100644 --- a/app/styles/app/layouts/sidebar.sass +++ b/app/styles/app/layouts/sidebar.sass @@ -1,24 +1,21 @@ -$sb-grey: #f2f2f2 -$sb-font-size: 14px - .tile height: auto padding: 0.8em 0.5em 0.8em 1.5em margin-bottom: .46rem - background-color: $white + background-color: white border-radius: 0 li:last-child & margin-bottom: 0 - @include colorRows($green, 'passed', 8px) - @include colorRows($red, 'failed', 8px) - @include colorRows($red, 'errored', 8px) - @include colorRows($grey, 'canceled', 8px) - @include colorRows($yellow, 'started', 8px, true) - @include colorRows($yellow, 'queued', 8px, true) - @include colorRows($yellow, 'booting', 8px, true) - @include colorRows($yellow, 'received', 8px, true) - @include colorRows($yellow, 'created', 8px, true) + @include colorRows($turf-green, 'passed', 8px) + @include colorRows($brick-red, 'failed', 8px) + @include colorRows($brick-red, 'errored', 8px) + @include colorRows($cement-grey, 'canceled', 8px) + @include colorRows($canary-yellow, 'started', 8px, true) + @include colorRows($canary-yellow, 'queued', 8px, true) + @include colorRows($canary-yellow, 'booting', 8px, true) + @include colorRows($canary-yellow, 'received', 8px, true) + @include colorRows($canary-yellow, 'created', 8px, true) .status-icon .is-rotating width: 17px; @@ -27,7 +24,7 @@ $sb-font-size: 14px h2, p margin: 0 - font-size: $sb-font-size + font-size: 14px font-weight: 400 h2 position: relative @@ -38,7 +35,7 @@ $sb-font-size: 14px white-space: nowrap overflow: hidden &:after - @include fadeOut(right, -90deg, $white) + @include fadeOut(right, -90deg, white) p.tile-title width: 10% @media #{$medium-up} @@ -55,8 +52,8 @@ $sb-font-size: 14px vertical-align: middle .tabnav--sidebar - font-size: $sb-font-size - border-bottom: solid 2px $sb-grey + font-size: 14px + border-bottom: solid 2px $pebble-grey width: 90% margin: auto @@ -71,7 +68,7 @@ $sb-font-size: 14px #tab_new a:hover .icon--plus:after - color: $teal-light + color: $oxide-blue &:after bottom: -1px li @@ -89,11 +86,10 @@ $sb-font-size: 14px .sidebar-list margin-top: 1.4rem - color: $grey-medium ul @include resetul - border-bottom: .46rem solid #FAF9F7 - background-color: #FAF9F7 + border-bottom: .46rem solid $cream-light + background-color: $cream-light .sidebar-seperator width: 90% diff --git a/app/styles/app/layouts/top.sass b/app/styles/app/layouts/top.sass index d25b5f7f..3c9f768b 100644 --- a/app/styles/app/layouts/top.sass +++ b/app/styles/app/layouts/top.sass @@ -1,4 +1,3 @@ - .top .cta border-bottom: 2px solid #E4E4E4 border-top: 2px solid #E4E4E4 @@ -44,9 +43,9 @@ clear: both overflow: hidden font-size: $font-size-m - color: $grey-medium + color: $asphalt-grey a - color: $grey-medium + color: $asphalt-grey &:hover text-decoration: underline &.has-autoheight diff --git a/app/styles/app/foundation/scss/foundation/_functions.scss b/app/styles/app/legacy/_functions.scss similarity index 90% rename from app/styles/app/foundation/scss/foundation/_functions.scss rename to app/styles/app/legacy/_functions.scss index 10bcb794..4c9689cc 100644 --- a/app/styles/app/foundation/scss/foundation/_functions.scss +++ b/app/styles/app/legacy/_functions.scss @@ -3,7 +3,7 @@ // Licensed under MIT Open Source // This is the default html and body font-size for the base rem value. -$rem-base: 16px !default; +$rem-base: 14px !default; // IMPORT ONCE // We use this to prevent styles from being loaded multiple times for compenents that rely on other components. @@ -19,11 +19,6 @@ $modules: () !default; } } -// -// @functions -// - - // RANGES // We use these functions to define ranges for various things, like media queries. @function lower-bound($range){ @@ -132,15 +127,3 @@ $modules: () !default; } @return $remValues; } - -// OLD EM CALC -// Deprecated: We'll drop support for this in 5.1.0, use rem-calc() -@function emCalc($values){ - @return rem-calc($values); -} - -// OLD EM CALC -// Deprecated: We'll drop support for this in 5.1.0, use rem-calc() -@function em-calc($values){ - @return rem-calc($values); -} diff --git a/app/styles/app/legacy/_global.scss b/app/styles/app/legacy/_global.scss new file mode 100644 index 00000000..5887cf44 --- /dev/null +++ b/app/styles/app/legacy/_global.scss @@ -0,0 +1,62 @@ +// We use this to do clear floats +@mixin clearfix { + &:before, &:after { content: " "; display: table; } + &:after { clear: both; } +} + +// We use these to define default font stacks +$font-family-sans-serif: "Source Sans Pro", Helvetica, sans-serif !default; +$font-family-serif: $font-family-sans-serif; +$font-family-monospace: Monaco, monospace !default; + +// We use these to define default font weights +$font-weight-normal: normal !default; +$font-weight-bold: bold !default; + +// We use this to control whether or not CSS classes come through in the gem files. +$include-html-classes: true !default; +$include-print-styles: true !default; +$include-html-global-classes: $include-html-classes !default; + +$column-gutter: rem-calc(30) !default; + +// Media Query Ranges +$small-range: (0em, 50em); +$medium-range: (50.063em, 64em); +$large-range: (64.063em, 90em); +$xlarge-range: (90.063em, 120em); +$xxlarge-range: (120.063em, 99999999em); + +$screen: "only screen"; + +$landscape: "#{$screen} and (orientation: landscape)"; +$portrait: "#{$screen} and (orientation: portrait)"; + +$small-up: $screen; +$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; + +$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"; +$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"; + +$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"; +$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"; + +$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"; +$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"; + +$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; +$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"; + +// Legacy +$small: $medium-up; +$medium: $medium-up; +$large: $large-up; + + +//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet +$cursor-auto-value: auto !default; +$cursor-crosshair-value: crosshair !default; +$cursor-default-value: default !default; +$cursor-pointer-value: pointer !default; +$cursor-help-value: help !default; +$cursor-text-value: text !default; diff --git a/app/styles/app/foundation/scss/foundation/components/_grid.scss b/app/styles/app/legacy/_grid.scss similarity index 99% rename from app/styles/app/foundation/scss/foundation/components/_grid.scss rename to app/styles/app/legacy/_grid.scss index fe66c1d6..7a7cea90 100644 --- a/app/styles/app/foundation/scss/foundation/components/_grid.scss +++ b/app/styles/app/legacy/_grid.scss @@ -2,8 +2,6 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; - // // @variables // @@ -13,6 +11,8 @@ $include-xl-html-grid-classes: false !default; $row-width: 100%; $total-columns: 12 !default; +$default-float: left; +$opposite-direction: right; $last-child-float: $opposite-direction !default; // diff --git a/app/styles/app/misc.sass b/app/styles/app/misc.sass deleted file mode 100644 index c5a3dc47..00000000 --- a/app/styles/app/misc.sass +++ /dev/null @@ -1,33 +0,0 @@ - -.display - display: block !important - -.display-inline - display: inline-block !important - -.hidden - display: none - -.emoji - vertical-align: middle - width: 20px - height: 20px - -.warning - color: #c00 - a - color: #c00 - text-decoration: underline - -.small-title - font-size: 18px - color: $teal-light - font-weight: 400 - -.blank-list - @include resetul - -.monospace - font-family: Monaco, monospace - font-size: 13px - line-height: 1 diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/mixins.sass similarity index 96% rename from app/styles/app/_mixins/mixins.sass rename to app/styles/app/mixins.sass index 3a7f0e82..3d2fb2db 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/mixins.sass @@ -41,7 +41,7 @@ %section-title font-size: $font-size-sm - color: $grey-medium + color: $cement-grey font-weight: 400 @@ -49,7 +49,7 @@ a text-decoration: none border-bottom: 1px solid #bfc0c1 - padding-bottom: 0.1em + padding-bottom: 0.1rem transition: color 200ms ease, border 200ms ease &:hover, &:active @@ -59,7 +59,7 @@ %helptext font-size: $font-size-m - color: $grey-medium + color: $cement-grey +linkStyle .helptext @@ -102,7 +102,7 @@ @if $building .#{$status}, .#{$status} a, - color: $yellow-font + color: $dozer-yellow @else .#{$status}, .#{$status} a, diff --git a/app/styles/app/modules/avatar.sass b/app/styles/app/modules/avatar.sass index 71933ce0..9c412b09 100644 --- a/app/styles/app/modules/avatar.sass +++ b/app/styles/app/modules/avatar.sass @@ -18,14 +18,14 @@ .pseudo-avatar +absoluteCenter - border: 1px solid $grey + border: 1px solid $cement-grey border-radius: 50% background: white z-index: 1 &:after content: attr(data-initials) +absoluteCenter - color: $grey + color: $cement-grey font-weight: 600 text-align: center font-size: 1.4em diff --git a/app/styles/app/modules/build-header.sass b/app/styles/app/modules/build-header.sass index 3c618181..2056412d 100644 --- a/app/styles/app/modules/build-header.sass +++ b/app/styles/app/modules/build-header.sass @@ -3,15 +3,15 @@ border: 1px solid $cream-dark clear: both - @include colorRows($green, 'passed', 12px) - @include colorRows($red, 'failed', 12px) - @include colorRows($red, 'errored', 12px) - @include colorRows($grey, 'canceled', 12px) - @include colorRows($yellow-bg, 'started', 12px, true, $yellow-font) - @include colorRows($yellow-bg, 'queued', 12px, true, $yellow-font) - @include colorRows($yellow-bg, 'booting', 12px, true, $yellow-font) - @include colorRows($yellow-bg, 'received', 12px, true, $yellow-font) - @include colorRows($yellow-bg, 'created', 12px, true, $yellow-font) + @include colorRows($turf-green, 'passed', 12px) + @include colorRows($brick-red, 'failed', 12px) + @include colorRows($brick-red, 'errored', 12px) + @include colorRows($cement-grey, 'canceled', 12px) + @include colorRows($canary-yellow, 'started', 12px, true, $dozer-yellow) + @include colorRows($canary-yellow, 'queued', 12px, true, $dozer-yellow) + @include colorRows($canary-yellow, 'booting', 12px, true, $dozer-yellow) + @include colorRows($canary-yellow, 'received', 12px, true, $dozer-yellow) + @include colorRows($canary-yellow, 'created', 12px, true, $dozer-yellow) @media #{$medium-up} display: flex diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index 5879a363..4c8b14b7 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -1,7 +1,3 @@ -/* - * Buttons - */ - $button-border-color: #d4d4d4 .button, @@ -15,17 +11,17 @@ $button-border-color: #d4d4d4 outline: none text-decoration: none text-align: center - color: $white + color: white white-space: nowrap border-radius: 2px - background-color: $grey-lighter + background-color: $pebble-grey .button:hover, .button:focus, .button:active, .button.active border-color: $button-border-color - background-color: $grey-medium + background-color: $cement-grey text-decoration: none color: #fff @@ -38,15 +34,15 @@ $button-border-color: #d4d4d4 .button--signin, .button--signingin display: inline-block - color: $white - font-size: $font-size-small + color: #fff + font-size: $font-size-s line-height: 1 text-decoration: none border-radius: 4px border: none vertical-align: middle background: - color: $pass-color + color: $turf-green .button--signin padding: 0.6em 2em 0.55em 0.6em @@ -69,9 +65,9 @@ $button-border-color: #d4d4d4 .button--green border: none - font-size: $font-size-small - color: $white - background-color: $pass-color + font-size: $font-size-s + color: white + background-color: $turf-green &:hover background-color: #73c78d .button--fixedwidth @@ -82,11 +78,11 @@ $button-border-color: #d4d4d4 font-size: $font-size-sm border: none &:hover - background-color: $grey-medium + background-color: $cement-grey .btn-activated background-color: #39a85b - color: $white + color: white &:hover background-color: darken(#39a85b, 10) @@ -97,9 +93,9 @@ $button-border-color: #d4d4d4 .button--grey height: 22px padding: 0 10px 0 10px - background-color: #696867 - color: #f2f2f2 - font-size: $font-size-small + background-color: $asphalt-grey + color: $pebble-grey + font-size: $font-size-s border: none border-radius: 2px &:hover, @@ -113,18 +109,14 @@ $button-border-color: #d4d4d4 @extend .button border-radius: 2px border: none - font-size: $font-size-small - color: $white - background-color: #CD3A36 + font-size: $font-size-s + color: white + background-color: $brick-red font-weight: 300 padding: 4px 10px 2px &:focus, &:hover - background-color: lighten(#CD3A36, 10) - - - -// new stuff + background-color: $quartz-red %circle-button display: block @@ -135,7 +127,7 @@ $button-border-color: #d4d4d4 border: solid 1px #E4E6E6 border-radius: 50% &:hover - border-color: $teal + border-color: $oxide-blue float: left margin-right: 1rem @@ -167,13 +159,14 @@ $button-border-color: #d4d4d4 display: inline-block height: 28px padding: 0 0.8em - border: 1px solid #f1f1f1 - color: #f1f1f1 + border: 1px solid $pebble-grey + color: $pebble-grey border-radius: 2px text-align: center line-height: 1.8 font-size: 14px font-weight: 300 + cursor: pointer [class^="icon"] margin-right: .3em @@ -207,7 +200,7 @@ $button-border-color: #d4d4d4 background-color: lighten($bg-color, 10) .button-delete - @include buttons($red) + @include buttons($brick-red) .button-cancel @include buttons(#A0A8A8) diff --git a/app/styles/app/modules/dropdown.sass b/app/styles/app/modules/dropdown.sass index ff683fe3..bb6b088a 100644 --- a/app/styles/app/modules/dropdown.sass +++ b/app/styles/app/modules/dropdown.sass @@ -1,4 +1,3 @@ - $dropdown-border: #C3D9DB .dropdown--db @@ -10,15 +9,15 @@ $dropdown-border: #C3D9DB width: 12.5em; right: 0; top: 4em; - border: 2px $dropdown-border solid; - background-color: $white + border: 2px $oxide-blue solid; + background-color: white display: none a display: block padding: 0.4em 1em .2em &:hover - background-color: $dropdown-color - color: $white + background-color: $oxide-blue + color: white &:before content: "" width: 1.2em @@ -27,9 +26,9 @@ $dropdown-border: #C3D9DB position: absolute top: -0.7em; right: 1.1em; - background-color: $white - border-top: solid 2px $dropdown-border; - border-left: solid 2px $dropdown-border; + background-color: white + border-top: solid 2px $oxide-blue; + border-left: solid 2px $oxide-blue; transform: rotate(45deg); .filter @@ -49,14 +48,14 @@ $dropdown-border: #C3D9DB padding: .9em 0 cursor: pointer a - color: $teal-dark + color: $oxide-blue .filter-dropdown @include resetul position: absolute top: 3em min-width: 14em - background-color: $white + background-color: white border-radius: 2px overflow: hidden border: 1px solid $cream-dark @@ -70,8 +69,8 @@ $dropdown-border: #C3D9DB width: 100% padding: 10px 10px 10px 20px &:hover - color: $white - background : $teal-dark + color: white + background : $oxide-blue .is-selected a font-weight: 600 diff --git a/app/styles/app/modules/forms.sass b/app/styles/app/modules/forms.sass index 82f8976d..8fb11851 100644 --- a/app/styles/app/modules/forms.sass +++ b/app/styles/app/modules/forms.sass @@ -1,12 +1,14 @@ - %input-base display: inline-block width: 100% padding: .4em .4em border: 1px solid #eeedec - border-radius: 4px - color: #8e8f8e - font-size: $font-size-sm + border-radius: 2px + color: $asphalt-grey + font-size: 14px + font-family: $font-family-sans-serif + background: white + input[type="text"], input[type="email"], @@ -18,16 +20,20 @@ input[type="password"] textarea @extend %input-base +.form-label + font-size: 10px + color: $cement-grey + text-transform: uppercase .form-submit display: inline-block border: none border-radius: 4px padding: .5em .8em - color: $white + color: white font-size: $font-size-sm font-weight: 300 - background-color: $grey-lighter + background-color: $cement-grey &:hover background-color: #3BA85D cursor: pointer @@ -40,7 +46,6 @@ textarea .form-elem max-width: 460px - .form--envvar .form-elem display: inline-block @@ -67,13 +72,12 @@ textarea float: right text-align: right - .form-error .env-name, .ssh-value - border: $fail-color 2px solid + border: $brick-red 2px solid .form-error-message - color: $fail-color + color: $brick-red font-size: 14px padding: .2em 0 margin: 0 diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 36eb296c..2f20d3ea 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -150,7 +150,7 @@ border-radius: 50% @extend %icon-line-question &:hover - border-color: $teal + border-color: $oxide-blue @extend %icon-line-question-teal %icon-line-hash @@ -238,10 +238,12 @@ @extend %icon-line-scale .icon--plus + width: 1.1rem + height: 1.4rem &:after content: "+" font-size: 16px - color: #A6ADAD + color: $asphalt-grey .icon-receiving margin: 0.3rem 0.5rem; @@ -251,7 +253,7 @@ height: 4px border-radius: 50% display: inline-block - background-color: $start-bg-color + background-color: $canary-yellow transform-origin: center center animation: bubbleScale 1.2s infinite linear i:nth-of-type(2) diff --git a/app/styles/app/modules/memberlist.sass b/app/styles/app/modules/memberlist.sass deleted file mode 100644 index 9a40a444..00000000 --- a/app/styles/app/modules/memberlist.sass +++ /dev/null @@ -1,26 +0,0 @@ -.memberlist - @include resetul - - img - margin-right: 1em - border-radius: 50% - - .memberlist-names - display: inline-block - vertical-align: middle - h2, p - margin: auto - font-weight: 400 - font-size: $font-size-m - line-height: $line-height-m - - h2 - color: #4f4f4f - p - color: #969496 - - li - margin-bottom: 3rem - - li[class*='column']:last-of-type - float: left diff --git a/app/styles/app/modules/navigation.sass b/app/styles/app/modules/navigation.sass index a588770f..7db7068e 100644 --- a/app/styles/app/modules/navigation.sass +++ b/app/styles/app/modules/navigation.sass @@ -28,7 +28,7 @@ $nav-line-height: 35px .profile font-size: $font-size-m - color: $grey-medium + color: $cement-grey text-align: right line-height: $top-height float: right diff --git a/app/styles/app/popup.sass b/app/styles/app/modules/popup.sass similarity index 56% rename from app/styles/app/popup.sass rename to app/styles/app/modules/popup.sass index f176a3ec..1cac4ad0 100644 --- a/app/styles/app/popup.sass +++ b/app/styles/app/modules/popup.sass @@ -1,15 +1,3 @@ -%popup - height: auto - position: fixed - top: 50% - left: 50% - transform: translate(-50%, -50%) - padding: 2.9em 2em - color: #565656 - z-index: 99 - background-color: $white - border-radius: 2px - .help display: inline-block height: 19px @@ -25,7 +13,17 @@ cursor: pointer .popup - @extend %popup + position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%) + height: auto + padding: 2em + color: #565656 + z-index: 99 + background-color: white + border-radius: 2px + display: none background-color: #fff border: solid 10px #f1f1f1 @@ -44,18 +42,6 @@ overflow: hidden white-space: nowrap @extend %icon-line-cross - h4 - margin-top: 0 - font-size: 18px - font-weight: bold - color: $color-text - - pre - background-color: $color-bg-pre - margin: 0 - padding: 5px 10px - border-radius: 4px - overflow-x: scroll .popup-title margin-bottom: 0 @@ -71,26 +57,8 @@ @media #{$medium-up} width: 600px - p - margin: 0 - label - width: 100px - display: inline-block - vertical-align: top - textarea - border: 1px solid $color-border-light - width: 485px - padding: 4px - resize: vertical - margin-bottom: 0px - border-radius: 3px + select, textarea + margin-bottom: 1em - p:last-child - margin-top: 10px - -.status-images - input - border: 1px solid $color-border-light - width: 505px - padding: 4px - border-radius: 3px + .small-title + margin: .3em 0 .8em diff --git a/app/styles/app/modules/row.sass b/app/styles/app/modules/row.sass index c612b31f..cb1d70de 100644 --- a/app/styles/app/modules/row.sass +++ b/app/styles/app/modules/row.sass @@ -5,7 +5,7 @@ overflow: hidden &:after content: "" - @include fadeOut(right, -90deg, $white, 30%) + @include fadeOut(right, -90deg, white, 30%) .label-align vertical-align: middle @@ -16,7 +16,6 @@ border: 1px solid $cream-dark font-size: 16px margin-bottom: .3rem - color: $grey-dark background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat h2, h3, small @@ -38,7 +37,6 @@ overflow: hidden padding-left: 1em a - color: $grey-dark text-decoration: none &:hover text-decoration: underline @@ -89,12 +87,12 @@ vertical-align: middle background-color: #E9EBEB - @include statusColors($green, 'passed', 10px) - @include statusColors($red, 'failed', 10px) - @include statusColors($red, 'errored', 10px) - @include statusColors($grey, 'canceled', 10px) - @include statusColors($yellow-font, 'started', 10px, $yellow-bg, true) - @include statusColors($yellow-font, 'queued', 10px, $yellow-bg, true) - @include statusColors($yellow-font, 'booting', 10px, $yellow-bg, true) - @include statusColors($yellow-font, 'received', 10px, $yellow-bg, true) - @include statusColors($yellow-font, 'created', 10px, $yellow-bg, true) + @include statusColors($turf-green, 'passed', 10px) + @include statusColors($brick-red, 'failed', 10px) + @include statusColors($brick-red, 'errored', 10px) + @include statusColors($cement-grey, 'canceled', 10px) + @include statusColors($dozer-yellow, 'started', 10px, $canary-yellow, true) + @include statusColors($dozer-yellow, 'queued', 10px, $canary-yellow, true) + @include statusColors($dozer-yellow, 'booting', 10px, $canary-yellow, true) + @include statusColors($dozer-yellow, 'received', 10px, $canary-yellow, true) + @include statusColors($dozer-yellow, 'created', 10px, $canary-yellow, true) diff --git a/app/styles/app/modules/switch.sass b/app/styles/app/modules/switch.sass index 07079dfe..860d86e8 100644 --- a/app/styles/app/modules/switch.sass +++ b/app/styles/app/modules/switch.sass @@ -1,4 +1,3 @@ - %switch $switch-height: 32px $switch-width: 80px @@ -23,7 +22,7 @@ height: $switch-inner-heigth border-radius: 4px background-color: #A5A4A4 - color: $white + color: white text-align: center font-weight: 300 font-size: 12px @@ -32,11 +31,11 @@ span display: inline-block vertical-align: middle - + .label vertical-align: middle font-size: $font-size-m - color: $grey-medium + color: $cement-grey display: inline-block &.label--small .label width: 7em diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass index 10ef2268..5c674194 100644 --- a/app/styles/app/modules/tabs.sass +++ b/app/styles/app/modules/tabs.sass @@ -1,6 +1,5 @@ - .tabnav - color: $grey-light + color: $asphalt-grey font-size: $font-size-sm ul @include resetul @@ -24,13 +23,13 @@ a @extend %inline-block width: 100% - color: $grey-light - padding: 3px 0 4px + color: $asphalt-grey + padding: 3px 0 5px .active a, a:hover position: relative - color: $teal + color: $oxide-blue &:after content: "" position: absolute @@ -38,7 +37,7 @@ bottom: -2px width: 100% height: 2px - background-color: $teal + background-color: $oxide-blue .active a font-weight: $font-weight-bold @@ -49,13 +48,13 @@ @extend %inline-block overflow: visible a - color: $grey-light + color: $asphalt-grey padding: .5em 0 .active - color: $teal-dark + color: $oxide-blue @media #{$medium-up} - border-bottom: solid $cream-dark 2px + border-bottom: solid $cement-grey 2px li float: left margin-right: 1em diff --git a/app/styles/app/modules/tooltips.sass b/app/styles/app/modules/tooltips.sass index 5b949eda..715b94cc 100644 --- a/app/styles/app/modules/tooltips.sass +++ b/app/styles/app/modules/tooltips.sass @@ -9,7 +9,7 @@ z-index: 5 background-color: #818383 border-radius: 4px - color: $white + color: white font-size: 12px line-height: 1.3 text-align: center @@ -21,7 +21,7 @@ opacity: 0 a - color: $white + color: white &:hover text-decoration: underline &:before diff --git a/app/styles/app/pages/getting-started.sass b/app/styles/app/pages/getting-started.sass index 6e01f85b..725e56a3 100644 --- a/app/styles/app/pages/getting-started.sass +++ b/app/styles/app/pages/getting-started.sass @@ -27,7 +27,7 @@ margin-right: .5em font-size: $font-size-m background-color: #35a764 - color: $white + color: white display: inline-block border-radius: 50% text-align: center @@ -45,7 +45,7 @@ > li margin-bottom: 5rem ul - @include resetul + @include resetul li padding-left: .9em &:before @@ -69,7 +69,7 @@ padding: 0em 0.4em border: 1px solid border-radius: 3px - font-family: monaco, monospace + font-family: $font-family-monospace font-size: 11px font-style: normal line-height: 1.7 @@ -82,4 +82,4 @@ color: #3e8987 code color: #267c8d - background-color: $white + background-color: white diff --git a/app/styles/app/pages/landing.sass b/app/styles/app/pages/landing.sass index 41ea4f20..b65c85a8 100644 --- a/app/styles/app/pages/landing.sass +++ b/app/styles/app/pages/landing.sass @@ -457,7 +457,7 @@ .landing-page .navigation-nested - background-color: $white + background-color: white .landing-rows list-style: none diff --git a/app/styles/app/userlike.sass b/app/styles/app/userlike.sass index 657c5b87..14bf7f0c 100644 --- a/app/styles/app/userlike.sass +++ b/app/styles/app/userlike.sass @@ -1,4 +1,3 @@ - .feedback-button display: none position: fixed @@ -12,7 +11,7 @@ transform: translateY(20%) will-change: transform transition: transform ease 200ms - background: $white + background: white font-size: 16px color: #399399 z-index: 89 diff --git a/app/styles/app/vars.sass b/app/styles/app/vars.sass new file mode 100644 index 00000000..0b1a79d5 --- /dev/null +++ b/app/styles/app/vars.sass @@ -0,0 +1,66 @@ +$font-size-ml: 18px +$font-size-m: 16px +$font-size-sm: 14px +$line-height-m: 1.3 +$font-size-s: 12px + +$font-weight-light: 300 +$font-weight-normal: 400 + +$top-height: 55px + +$turf-green: #39aa56 +$seed-green: #deecdc + +$canary-yellow: #edde3f +$dozer-yellow: #cdb62c +$haze-yellow: #faf6db + +$cement-grey: #9d9d9d +$asphalt-grey: #666666 +$pebble-grey: #f1f1f1 + +$brick-red: #db4545 +$quartz-red: #fce8e2 + +$oxide-blue: #3eaaaf +$agate-blue: #b6d6d9 + +$cream-light: #FAFAF8 +$cream-dark: #EFF0EC + + +// log +$log-header-bg: #444444 +$line-height-log: 19px +$font-size-log: 12px +$color-bg-log-hover: #444 +$color-bg-log-highlight: $cement-grey +$color-bg-log-fold: #222 +$color-bg-log-fold-highlight: #777 + +$ansi-black: #4E4E4E +$ansi-black-bold: #7C7C7C +$ansi-red: #FF6C60 +$ansi-red-bold: #FFB6B0 +$ansi-green: #00AA00 +$ansi-green-bold: #CEFFAB +$ansi-yellow: #FFFFB6 +$ansi-yellow-bold: #FFFFCB +$ansi-blue: #96CBFE +$ansi-blue-bold: #B5DCFE +$ansi-magenta: #FF73FD +$ansi-magenta-bold: #FF9CFE +$ansi-cyan: #00AAAA +$ansi-cyan-bold: #55FFFF +$ansi-white: #EEEEEE +$ansi-white-bold: #FFFFFF +$ansi-grey: #969696 + +// error pages +$error-heading-color: #357389 +$error-copy-color: $asphalt-grey +$error-bg-gradient: rgba(204,235,247,1) +$maintenance-grass: #8cad7d +$error-hill-grey: #bbcac6 +$error-sand: #dcc682 diff --git a/app/templates/components/status-images.hbs b/app/templates/components/status-images.hbs index 16c06c80..991d77be 100644 --- a/app/templates/components/status-images.hbs +++ b/app/templates/components/status-images.hbs @@ -1,6 +1,7 @@ -

- +

Status Image

+
+ {{#if branches.isLoaded}} {{#x-select value=branch}} {{#each branches as |branch|}} @@ -10,10 +11,10 @@ {{else}} {{loading-indicator}} {{/if}} -

+
-

-

+ {{status-image-input value=statusString class="url" rows=3}} -

+