From 586f818f2e2df7c66f8fab852b92e95f3a43c0dd Mon Sep 17 00:00:00 2001 From: Eduardo Trujillo <ed@chromabits.com> Date: Wed, 2 Dec 2015 23:05:16 -0500 Subject: [PATCH] Use gulp, bower, etc --- .gitignore | 4 +- README.md | 6 + bower.json | 23 + css/.gitkeep | 0 css/app.css | 3014 +++++++++++++++++ css/foundation/_global.scss | 193 -- .../components/_accordion-menu.scss | 28 - css/foundation/components/_accordion.scss | 112 - css/foundation/components/_badge.scss | 55 - css/foundation/components/_breadcrumbs.scss | 94 - css/foundation/components/_button-group.scss | 115 - css/foundation/components/_button.scss | 264 -- css/foundation/components/_callout.scss | 115 - css/foundation/components/_close-button.scss | 61 - css/foundation/components/_drilldown.scss | 67 - css/foundation/components/_dropdown-menu.scss | 130 - css/foundation/components/_dropdown.scss | 64 - css/foundation/components/_flex-video.scss | 68 - css/foundation/components/_float.scss | 27 - css/foundation/components/_label.scss | 56 - css/foundation/components/_media-object.scss | 74 - css/foundation/components/_menu.scss | 213 -- css/foundation/components/_off-canvas.scss | 178 - css/foundation/components/_orbit.scss | 192 -- css/foundation/components/_pagination.scss | 158 - css/foundation/components/_progress-bar.scss | 83 - css/foundation/components/_reveal.scss | 155 - css/foundation/components/_slider.scss | 158 - css/foundation/components/_sticky.scss | 38 - css/foundation/components/_switch.scss | 231 -- css/foundation/components/_table.scss | 212 -- css/foundation/components/_tabs.scss | 137 - css/foundation/components/_thumbnail.scss | 54 - css/foundation/components/_title-bar.scss | 44 - css/foundation/components/_tooltip.scss | 100 - css/foundation/components/_top-bar.scss | 57 - css/foundation/components/_visibility.scss | 131 - css/foundation/forms/_checkbox.scss | 36 - css/foundation/forms/_error.scss | 82 - css/foundation/forms/_fieldset.scss | 53 - css/foundation/forms/_forms.scss | 32 - css/foundation/forms/_help-text.scss | 30 - css/foundation/forms/_input-group.scss | 70 - css/foundation/forms/_label.scss | 48 - css/foundation/forms/_select.scss | 64 - css/foundation/forms/_text.scss | 153 - css/foundation/foundation.scss | 86 - css/foundation/grid/_classes.scss | 132 - css/foundation/grid/_column.scss | 113 - css/foundation/grid/_flex-grid.scss | 194 -- css/foundation/grid/_grid.scss | 33 - css/foundation/grid/_gutter.scss | 31 - css/foundation/grid/_layout.scss | 33 - css/foundation/grid/_position.scss | 72 - css/foundation/grid/_row.scss | 75 - css/foundation/grid/_size.scss | 24 - css/foundation/settings/_settings.scss | 530 --- css/foundation/typography/_alignment.scss | 22 - css/foundation/typography/_base.scss | 438 --- css/foundation/typography/_helpers.scss | 77 - css/foundation/typography/_print.scss | 73 - css/foundation/typography/_typography.scss | 28 - css/foundation/util/_breakpoint.scss | 193 -- css/foundation/util/_color.scss | 41 - css/foundation/util/_mixins.scss | 210 -- css/foundation/util/_selector.scss | 40 - css/foundation/util/_unit.scss | 76 - css/foundation/util/_util.scss | 15 - css/foundation/util/_value.scss | 132 - css/foundation/vendor/normalize.scss | 424 --- gulpfile.js | 23 + package.json | 23 + projects.md | 9 - projects/enclosure.md | 10 + projects/ensure.md | 12 + projects/legit.md | 11 + projects/speedbump.md | 12 + projects/vertex.md | 12 + {css => scss}/_code.scss | 0 {css => scss}/_colors.scss | 0 {css => scss}/_headers.scss | 0 {css => scss}/_settings.scss | 2 +- {css => scss}/app.scss | 13 +- site.hs | 48 +- templates/default.html | 3 + templates/project-teaser.html | 10 + templates/project.html | 3 + templates/projects.html | 13 + 88 files changed, 3231 insertions(+), 7344 deletions(-) create mode 100644 README.md create mode 100644 bower.json create mode 100644 css/.gitkeep create mode 100644 css/app.css delete mode 100755 css/foundation/_global.scss delete mode 100755 css/foundation/components/_accordion-menu.scss delete mode 100755 css/foundation/components/_accordion.scss delete mode 100755 css/foundation/components/_badge.scss delete mode 100755 css/foundation/components/_breadcrumbs.scss delete mode 100755 css/foundation/components/_button-group.scss delete mode 100755 css/foundation/components/_button.scss delete mode 100755 css/foundation/components/_callout.scss delete mode 100755 css/foundation/components/_close-button.scss delete mode 100755 css/foundation/components/_drilldown.scss delete mode 100755 css/foundation/components/_dropdown-menu.scss delete mode 100755 css/foundation/components/_dropdown.scss delete mode 100755 css/foundation/components/_flex-video.scss delete mode 100755 css/foundation/components/_float.scss delete mode 100755 css/foundation/components/_label.scss delete mode 100755 css/foundation/components/_media-object.scss delete mode 100755 css/foundation/components/_menu.scss delete mode 100755 css/foundation/components/_off-canvas.scss delete mode 100755 css/foundation/components/_orbit.scss delete mode 100755 css/foundation/components/_pagination.scss delete mode 100755 css/foundation/components/_progress-bar.scss delete mode 100755 css/foundation/components/_reveal.scss delete mode 100755 css/foundation/components/_slider.scss delete mode 100755 css/foundation/components/_sticky.scss delete mode 100755 css/foundation/components/_switch.scss delete mode 100755 css/foundation/components/_table.scss delete mode 100755 css/foundation/components/_tabs.scss delete mode 100755 css/foundation/components/_thumbnail.scss delete mode 100755 css/foundation/components/_title-bar.scss delete mode 100755 css/foundation/components/_tooltip.scss delete mode 100755 css/foundation/components/_top-bar.scss delete mode 100755 css/foundation/components/_visibility.scss delete mode 100755 css/foundation/forms/_checkbox.scss delete mode 100755 css/foundation/forms/_error.scss delete mode 100755 css/foundation/forms/_fieldset.scss delete mode 100755 css/foundation/forms/_forms.scss delete mode 100755 css/foundation/forms/_help-text.scss delete mode 100755 css/foundation/forms/_input-group.scss delete mode 100755 css/foundation/forms/_label.scss delete mode 100755 css/foundation/forms/_select.scss delete mode 100755 css/foundation/forms/_text.scss delete mode 100755 css/foundation/foundation.scss delete mode 100755 css/foundation/grid/_classes.scss delete mode 100755 css/foundation/grid/_column.scss delete mode 100755 css/foundation/grid/_flex-grid.scss delete mode 100755 css/foundation/grid/_grid.scss delete mode 100755 css/foundation/grid/_gutter.scss delete mode 100755 css/foundation/grid/_layout.scss delete mode 100755 css/foundation/grid/_position.scss delete mode 100755 css/foundation/grid/_row.scss delete mode 100755 css/foundation/grid/_size.scss delete mode 100755 css/foundation/settings/_settings.scss delete mode 100755 css/foundation/typography/_alignment.scss delete mode 100755 css/foundation/typography/_base.scss delete mode 100755 css/foundation/typography/_helpers.scss delete mode 100755 css/foundation/typography/_print.scss delete mode 100755 css/foundation/typography/_typography.scss delete mode 100755 css/foundation/util/_breakpoint.scss delete mode 100755 css/foundation/util/_color.scss delete mode 100755 css/foundation/util/_mixins.scss delete mode 100755 css/foundation/util/_selector.scss delete mode 100755 css/foundation/util/_unit.scss delete mode 100755 css/foundation/util/_util.scss delete mode 100755 css/foundation/util/_value.scss delete mode 100755 css/foundation/vendor/normalize.scss create mode 100644 gulpfile.js create mode 100644 package.json delete mode 100644 projects.md create mode 100644 projects/enclosure.md create mode 100644 projects/ensure.md create mode 100644 projects/legit.md create mode 100644 projects/speedbump.md create mode 100644 projects/vertex.md rename {css => scss}/_code.scss (100%) rename {css => scss}/_colors.scss (100%) rename {css => scss}/_headers.scss (100%) rename {css => scss}/_settings.scss (99%) rename {css => scss}/app.scss (90%) create mode 100644 templates/project-teaser.html create mode 100644 templates/project.html create mode 100644 templates/projects.html diff --git a/.gitignore b/.gitignore index a64b280..457cde5 100644 --- a/.gitignore +++ b/.gitignore @@ -22,6 +22,8 @@ cabal.sandbox.config _cache/ _site/ -# sass +# frontend .sass-cache css/.sass-cache +node_modules +bower_components diff --git a/README.md b/README.md new file mode 100644 index 0000000..62ccadf --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +# Chromabits + +Notes: +- npm +- bower +- gulp diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..2c271ea --- /dev/null +++ b/bower.json @@ -0,0 +1,23 @@ +{ + "name": "chromabits", + "version": "1.0.0", + "authors": [ + "Eduardo Trujillo <ed@chromabits.com>" + ], + "description": "Personal blog.", + "main": "index.html", + "license": "MIT", + "homepage": "https://chromabits.com", + "dependencies": { + "foundation-sites": "~6.0.0", + "motion-ui": "~1.1.0" + }, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "private": true +} diff --git a/css/.gitkeep b/css/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/css/app.css b/css/app.css new file mode 100644 index 0000000..a921681 --- /dev/null +++ b/css/app.css @@ -0,0 +1,3014 @@ +@charset "UTF-8"; +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; } + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, +canvas, +progress, +video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background-color: transparent; } + +/** + * Improve readability of focused elements when they are also in an + * active/hover state. + */ +a:active, +a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, +strong { + font-weight: bold; } + +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; } + +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + box-sizing: content-box; + height: 0; } + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; } + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, +select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; } + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + box-sizing: content-box; + /* 2 */ } + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; } + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; } + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +td, +th { + padding: 0; } + +body.is-reveal-open { + overflow: hidden; } + +.foundation-mq { + font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; } + +html, +body { + font-size: 100%; + box-sizing: border-box; } + +*, +*:before, +*:after { + box-sizing: inherit; } + +body { + padding: 0; + margin: 0; + font-family: "adelle-sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-weight: normal; + line-height: 1.5; + color: #0a0a0a; + background: #fefefe; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +img { + max-width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; + display: inline-block; + vertical-align: middle; } + +textarea { + height: auto; + min-height: 50px; + border-radius: 0; } + +select { + width: 100%; + border-radius: 0; } + +#map_canvas img, +#map_canvas embed, +#map_canvas object, +.map_canvas img, +.map_canvas embed, +.map_canvas object, +.mqa-display img, +.mqa-display embed, +.mqa-display object { + max-width: none !important; } + +button { + -webkit-appearance: none; + -moz-appearance: none; + background: transparent; + padding: 0; + border: 0; + border-radius: 0; + line-height: 1; } + +.row { + max-width: 62.5rem; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + margin-left: auto; + margin-right: auto; } + .row .row, + .column-row .row { + margin-left: -0.9375rem; + margin-right: -0.9375rem; } + +.column, +.columns { + -webkit-flex: 1 1 0px; + -ms-flex: 1 1 0px; + flex: 1 1 0px; + padding-left: 0.9375rem; + padding-right: 0.9375rem; } + +.small-1 { + -webkit-flex: 0 0 8.33333%; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + max-width: 8.33333%; } + +.small-2 { + -webkit-flex: 0 0 16.66667%; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + max-width: 16.66667%; } + +.small-3 { + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } + +.small-4 { + -webkit-flex: 0 0 33.33333%; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + max-width: 33.33333%; } + +.small-5 { + -webkit-flex: 0 0 41.66667%; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + max-width: 41.66667%; } + +.small-6 { + -webkit-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } + +.small-7 { + -webkit-flex: 0 0 58.33333%; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + max-width: 58.33333%; } + +.small-8 { + -webkit-flex: 0 0 66.66667%; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + max-width: 66.66667%; } + +.small-9 { + -webkit-flex: 0 0 75%; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } + +.small-10 { + -webkit-flex: 0 0 83.33333%; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + max-width: 83.33333%; } + +.small-11 { + -webkit-flex: 0 0 91.66667%; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + max-width: 91.66667%; } + +.small-12 { + -webkit-flex: 0 0 100%; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } + +@media screen and (min-width: 40em) { + .medium-1 { + -webkit-flex: 0 0 8.33333%; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + max-width: 8.33333%; } + .medium-2 { + -webkit-flex: 0 0 16.66667%; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + max-width: 16.66667%; } + .medium-3 { + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } + .medium-4 { + -webkit-flex: 0 0 33.33333%; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + max-width: 33.33333%; } + .medium-5 { + -webkit-flex: 0 0 41.66667%; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + max-width: 41.66667%; } + .medium-6 { + -webkit-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } + .medium-7 { + -webkit-flex: 0 0 58.33333%; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + max-width: 58.33333%; } + .medium-8 { + -webkit-flex: 0 0 66.66667%; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + max-width: 66.66667%; } + .medium-9 { + -webkit-flex: 0 0 75%; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } + .medium-10 { + -webkit-flex: 0 0 83.33333%; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + max-width: 83.33333%; } + .medium-11 { + -webkit-flex: 0 0 91.66667%; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + max-width: 91.66667%; } + .medium-12 { + -webkit-flex: 0 0 100%; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } } + +@media screen and (min-width: 64em) { + .large-1 { + -webkit-flex: 0 0 8.33333%; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + max-width: 8.33333%; } + .large-2 { + -webkit-flex: 0 0 16.66667%; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + max-width: 16.66667%; } + .large-3 { + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } + .large-4 { + -webkit-flex: 0 0 33.33333%; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + max-width: 33.33333%; } + .large-5 { + -webkit-flex: 0 0 41.66667%; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + max-width: 41.66667%; } + .large-6 { + -webkit-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } + .large-7 { + -webkit-flex: 0 0 58.33333%; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + max-width: 58.33333%; } + .large-8 { + -webkit-flex: 0 0 66.66667%; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + max-width: 66.66667%; } + .large-9 { + -webkit-flex: 0 0 75%; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } + .large-10 { + -webkit-flex: 0 0 83.33333%; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + max-width: 83.33333%; } + .large-11 { + -webkit-flex: 0 0 91.66667%; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + max-width: 91.66667%; } + .large-12 { + -webkit-flex: 0 0 100%; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } } + +@media screen and (min-width: 40em) { + .medium-expand { + -webkit-flex: 1 1 0px; + -ms-flex: 1 1 0px; + flex: 1 1 0px; } } + +@media screen and (min-width: 64em) { + .large-expand { + -webkit-flex: 1 1 0px; + -ms-flex: 1 1 0px; + flex: 1 1 0px; } } + +.shrink { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } + +.row.medium-unstack .column { + -webkit-flex: 0 0 100%; + -ms-flex: 0 0 100%; + flex: 0 0 100%; } + @media screen and (min-width: 40em) { + .row.medium-unstack .column { + -webkit-flex: 1 1 0px; + -ms-flex: 1 1 0px; + flex: 1 1 0px; } } + +.row.large-unstack .column { + -webkit-flex: 0 0 100%; + -ms-flex: 0 0 100%; + flex: 0 0 100%; } + @media screen and (min-width: 64em) { + .row.large-unstack .column { + -webkit-flex: 1 1 0px; + -ms-flex: 1 1 0px; + flex: 1 1 0px; } } + +.small-order-1 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } + +.small-order-2 { + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; } + +.small-order-3 { + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; } + +.small-order-4 { + -webkit-order: 4; + -ms-flex-order: 4; + order: 4; } + +.small-order-5 { + -webkit-order: 5; + -ms-flex-order: 5; + order: 5; } + +.small-order-6 { + -webkit-order: 6; + -ms-flex-order: 6; + order: 6; } + +@media screen and (min-width: 40em) { + .medium-order-1 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } + .medium-order-2 { + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; } + .medium-order-3 { + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; } + .medium-order-4 { + -webkit-order: 4; + -ms-flex-order: 4; + order: 4; } + .medium-order-5 { + -webkit-order: 5; + -ms-flex-order: 5; + order: 5; } + .medium-order-6 { + -webkit-order: 6; + -ms-flex-order: 6; + order: 6; } } + +@media screen and (min-width: 64em) { + .large-order-1 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } + .large-order-2 { + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; } + .large-order-3 { + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; } + .large-order-4 { + -webkit-order: 4; + -ms-flex-order: 4; + order: 4; } + .large-order-5 { + -webkit-order: 5; + -ms-flex-order: 5; + order: 5; } + .large-order-6 { + -webkit-order: 6; + -ms-flex-order: 6; + order: 6; } } + +.row.align-right { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } + +.row.align-center { + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } + +.row.align-justify { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + +.row.align-spaced { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } + +.row.align-top { + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; } + +.column.align-top { + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; } + +.row.align-bottom { + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; } + +.column.align-bottom { + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; } + +.row.align-middle { + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + +.column.align-middle { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; } + +.row.align-stretch { + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + +.column.align-stretch { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; } + +div, +dl, +dt, +dd, +ul, +ol, +li, +h1, +h2, +h3, +h4, +h5, +h6, +pre, +form, +p, +blockquote, +th, +td { + margin: 0; + padding: 0; } + +p { + font-size: inherit; + line-height: 1.6; + margin-bottom: 1rem; + text-rendering: optimizeLegibility; } + +em, +i { + font-style: italic; + line-height: inherit; } + +strong, +b { + font-weight: bold; + line-height: inherit; } + +small { + font-size: 80%; + line-height: inherit; } + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "adelle-sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-weight: normal; + font-style: normal; + color: inherit; + text-rendering: optimizeLegibility; + margin-top: 0; + margin-bottom: 0.5rem; + line-height: 1.4; } + h1 small, + h2 small, + h3 small, + h4 small, + h5 small, + h6 small { + color: #cacaca; + line-height: 0; } + +h1 { + font-size: 1.5rem; } + +h2 { + font-size: 1.25rem; } + +h3 { + font-size: 1.1875rem; } + +h4 { + font-size: 1.125rem; } + +h5 { + font-size: 1.0625rem; } + +h6 { + font-size: 1rem; } + +@media screen and (min-width: 40em) { + h1 { + font-size: 3rem; } + h2 { + font-size: 2.5rem; } + h3 { + font-size: 1.9375rem; } + h4 { + font-size: 1.5625rem; } + h5 { + font-size: 1.25rem; } + h6 { + font-size: 1rem; } } + +a { + color: #2199e8; + text-decoration: none; + line-height: inherit; + cursor: pointer; } + a:hover, a:focus { + color: #1585cf; } + a img { + border: 0; } + +hr { + max-width: 62.5rem; + height: 0; + border-right: 0; + border-top: 0; + border-bottom: 1px solid #cacaca; + border-left: 0; + margin: 1.25rem auto; + clear: both; } + +ul, +ol, +dl { + line-height: 1.6; + margin-bottom: 1rem; + list-style-position: outside; } + +li { + font-size: inherit; } + +ul { + list-style-type: disc; + margin-left: 1.25rem; } + +ol { + margin-left: 1.25rem; } + +ul ul, ol ul, ul ol, ol ol { + margin-left: 1.25rem; + margin-bottom: 0; + list-style-type: inherit; } + +dl { + margin-bottom: 1rem; } + dl dt { + margin-bottom: 0.3rem; + font-weight: bold; } + +blockquote { + margin: 0 0 1rem; + padding: 0.5625rem 1.25rem 0 1.1875rem; + border-left: 1px solid #cacaca; } + blockquote, blockquote p { + line-height: 1.6; + color: #8a8a8a; } + +cite { + display: block; + font-size: 0.8125rem; + color: #8a8a8a; } + cite:before { + content: '\2014 \0020'; } + +abbr { + color: #0a0a0a; + cursor: help; + border-bottom: 1px dotted #0a0a0a; } + +code { + font-family: Consolas, "Liberation Mono", Courier, monospace; + font-weight: normal; + color: #0a0a0a; + background-color: #e6e6e6; + border: 1px solid #cacaca; + padding: 0.125rem 0.3125rem 0.0625rem; } + +kbd { + padding: 0.125rem 0.25rem 0; + margin: 0; + background-color: #e6e6e6; + color: #0a0a0a; + font-family: Consolas, "Liberation Mono", Courier, monospace; } + +.subheader { + margin-top: 0.2rem; + margin-bottom: 0.5rem; + font-weight: normal; + line-height: 1.4; + color: #8a8a8a; } + +.lead { + font-size: 125%; + line-height: 1.6; } + +.stat { + font-size: 2.5rem; + line-height: 1; } + p + .stat { + margin-top: -1rem; } + +.no-bullet { + margin-left: 0; + list-style: none; } + +.text-left { + text-align: left; } + +.text-right { + text-align: right; } + +.text-center { + text-align: center; } + +.text-justify { + text-align: justify; } + +@media screen and (min-width: 40em) { + .medium-text-left { + text-align: left; } + .medium-text-right { + text-align: right; } + .medium-text-center { + text-align: center; } + .medium-text-justify { + text-align: justify; } } + +@media screen and (min-width: 64em) { + .large-text-left { + text-align: left; } + .large-text-right { + text-align: right; } + .large-text-center { + text-align: center; } + .large-text-justify { + text-align: justify; } } + +.show-for-print { + display: none !important; } + +@media print { + * { + background: transparent !important; + color: black !important; + box-shadow: none !important; + text-shadow: none !important; } + .show-for-print { + display: block !important; } + .hide-for-print { + display: none !important; } + 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; } + a, + a:visited { + text-decoration: underline; } + a[href]:after { + content: " (" attr(href) ")"; } + .ir a:after, + a[href^='javascript:']:after, + a[href^='#']:after { + content: ''; } + abbr[title]:after { + content: " (" attr(title) ")"; } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; } + thead { + display: table-header-group; } + 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; } } + +.button { + display: inline-block; + text-align: center; + line-height: 1; + cursor: pointer; + -webkit-appearance: none; + transition: all 0.25s ease-out; + vertical-align: middle; + border: 1px solid transparent; + border-radius: 0; + padding: 0.85em 1em; + margin: 0 1rem 1rem 0; + font-size: 0.9rem; + background: #2199e8; + color: #fff; } + [data-whatinput='mouse'] .button { + outline: 0; } + .button:hover, .button:focus { + background: #1583cc; + color: #fff; } + .button.tiny { + font-size: 0.6rem; } + .button.small { + font-size: 0.75rem; } + .button.large { + font-size: 1.25rem; } + .button.expanded { + display: block; + width: 100%; + margin-left: 0; + margin-right: 0; } + .button.primary { + background: #2199e8; + color: #fff; } + .button.primary:hover, .button.primary:focus { + background: #147cc0; + color: #fff; } + .button.secondary { + background: #777; + color: #fff; } + .button.secondary:hover, .button.secondary:focus { + background: #5f5f5f; + color: #fff; } + .button.success { + background: #3adb76; + color: #fff; } + .button.success:hover, .button.success:focus { + background: #22bb5b; + color: #fff; } + .button.alert { + background: #ec5840; + color: #fff; } + .button.alert:hover, .button.alert:focus { + background: #da3116; + color: #fff; } + .button.warning { + background: #ffae00; + color: #fff; } + .button.warning:hover, .button.warning:focus { + background: #cc8b00; + color: #fff; } + .button.hollow { + border: 1px solid #2199e8; + color: #2199e8; } + .button.hollow, .button.hollow:hover, .button.hollow:focus { + background: transparent; } + .button.hollow:hover, .button.hollow:focus { + border-color: #0c4d78; + color: #0c4d78; } + .button.hollow.primary { + border: 1px solid #2199e8; + color: #2199e8; } + .button.hollow.primary:hover, .button.hollow.primary:focus { + border-color: #0c4d78; + color: #0c4d78; } + .button.hollow.secondary { + border: 1px solid #777; + color: #777; } + .button.hollow.secondary:hover, .button.hollow.secondary:focus { + border-color: #3c3c3c; + color: #3c3c3c; } + .button.hollow.success { + border: 1px solid #3adb76; + color: #3adb76; } + .button.hollow.success:hover, .button.hollow.success:focus { + border-color: #157539; + color: #157539; } + .button.hollow.alert { + border: 1px solid #ec5840; + color: #ec5840; } + .button.hollow.alert:hover, .button.hollow.alert:focus { + border-color: #881f0e; + color: #881f0e; } + .button.hollow.warning { + border: 1px solid #ffae00; + color: #ffae00; } + .button.hollow.warning:hover, .button.hollow.warning:focus { + border-color: #805700; + color: #805700; } + .button.disabled { + opacity: 0.25; + cursor: not-allowed; + pointer-events: none; } + .button.dropdown::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 0.4em; + border-color: #fefefe transparent transparent; + border-top-style: solid; + position: relative; + top: 0.4em; + float: right; + margin-left: 1em; + display: inline-block; } + .button.arrow-only::after { + margin-left: 0; + float: none; + top: 0.2em; } + +[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], +textarea { + display: block; + box-sizing: border-box; + width: 100%; + height: 2.4375rem; + padding: 0.5rem; + border: 1px solid #cacaca; + margin: 0 0 1rem; + font-family: inherit; + font-size: 1rem; + color: #8a8a8a; + background-color: #fefefe; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); + border-radius: 0; + transition: box-shadow 0.5s, border-color 0.25s ease-in-out; + -webkit-appearance: none; + -moz-appearance: none; } + [type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, + textarea:focus { + border: 1px solid #8a8a8a; + background: #fefefe; + outline: none; + box-shadow: 0 0 5px #cacaca; + transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } + +textarea { + max-width: 100%; } + textarea[rows] { + height: auto; } + +input:disabled, input[readonly], +textarea:disabled, +textarea[readonly] { + background-color: #e6e6e6; + cursor: default; } + +[type='submit'], +[type='button'] { + border-radius: 0; + -webkit-appearance: none; + -moz-appearance: none; } + +input[type='search'] { + box-sizing: border-box; } + +[type='file'], +[type='checkbox'], +[type='radio'] { + margin: 0 0 1rem; } + +[type='checkbox'] + label, +[type='radio'] + label { + display: inline-block; + margin-left: 0.5rem; + margin-right: 1rem; + margin-bottom: 0; + vertical-align: baseline; } + +label > [type='checkbox'], +label > [type='label'] { + margin-right: 0.5rem; } + +[type='file'] { + width: 100%; } + +label { + display: block; + margin: 0; + font-size: 0.875rem; + font-weight: normal; + line-height: 1.8; + color: #0a0a0a; } + label.middle { + margin: 0 0 1rem; + padding: 0.5625rem 0; } + +.help-text { + margin-top: -0.5rem; + font-size: 0.8125rem; + font-style: italic; + color: #333; } + +.input-group { + display: table; + width: 100%; + margin-bottom: 1rem; } + +.input-group-label, .input-group-field, .input-group-button { + display: table-cell; + margin: 0; + vertical-align: middle; } + +.input-group-label { + text-align: center; + width: 1%; + height: 100%; + padding: 0 1rem; + background: #e6e6e6; + color: #0a0a0a; + border: 1px solid #cacaca; } + .input-group-label:first-child { + border-right: 0; } + .input-group-label:last-child { + border-left: 0; } + +.input-group-button { + height: 100%; + padding-top: 0; + padding-bottom: 0; + text-align: center; + width: 1%; } + .input-group-button a, + .input-group-button input, + .input-group-button button { + margin: 0; } + +fieldset { + border: 0; + padding: 0; + margin: 0; } + +legend { + margin-bottom: 0.5rem; } + +.fieldset { + border: 1px solid #cacaca; + padding: 1.25rem; + margin: 1.125rem 0; } + .fieldset legend { + background: #fefefe; + padding: 0 0.1875rem; + margin: 0; + margin-left: -0.1875rem; } + +select { + height: 2.4375rem; + padding: 0.5rem; + border: 1px solid #cacaca; + border-radius: 0; + margin: 0 0 1rem; + font-size: 1rem; + font-family: inherit; + line-height: normal; + color: #8a8a8a; + background-color: #fafafa; + border-radius: 0; + -webkit-appearance: none; + -moz-appearance: none; + background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb(51, 51, 51)"></polygon></svg>'); + background-size: 9px 6px; + background-position: right 0.5rem center; + background-repeat: no-repeat; } + @media screen and (min-width: 0\0) { + select { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } } + select:disabled { + background-color: #e6e6e6; + cursor: default; } + select::-ms-expand { + display: none; } + select[multiple] { + height: auto; } + +.is-invalid-input:not(:focus) { + background-color: rgba(236, 88, 64, 0.1); + border-color: #ec5840; } + +.is-invalid-label { + color: #ec5840; } + +.form-error { + display: none; + margin-top: -0.5rem; + margin-bottom: 1rem; + font-size: 0.75rem; + font-weight: bold; + color: #ec5840; } + .form-error.is-visible { + display: block; } + +.hide { + display: none !important; } + +.invisible { + visibility: hidden; } + +@media screen and (min-width: 0em) and (max-width: 39.9375em) { + .hide-for-small-only { + display: none !important; } } + +@media screen and (max-width: 0em), screen and (min-width: 40em) { + .show-for-small-only { + display: none !important; } } + +@media screen and (min-width: 40em) { + .hide-for-medium { + display: none !important; } } + +@media screen and (max-width: 39.9375em) { + .show-for-medium { + display: none !important; } } + +@media screen and (min-width: 40em) and (max-width: 63.9375em) { + .hide-for-medium-only { + display: none !important; } } + +@media screen and (max-width: 39.9375em), screen and (min-width: 64em) { + .show-for-medium-only { + display: none !important; } } + +@media screen and (min-width: 64em) { + .hide-for-large { + display: none !important; } } + +@media screen and (max-width: 63.9375em) { + .show-for-large { + display: none !important; } } + +@media screen and (min-width: 64em) and (max-width: 74.9375em) { + .hide-for-large-only { + display: none !important; } } + +@media screen and (max-width: 63.9375em), screen and (min-width: 75em) { + .show-for-large-only { + display: none !important; } } + +.show-for-sr, +.show-on-focus { + position: absolute !important; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); } + +.show-on-focus:active, .show-on-focus:focus { + position: static !important; + height: auto; + width: auto; + overflow: visible; + clip: auto; } + +.show-for-landscape, +.hide-for-portrait { + display: block !important; } + @media screen and (orientation: landscape) { + .show-for-landscape, + .hide-for-portrait { + display: block !important; } } + @media screen and (orientation: portrait) { + .show-for-landscape, + .hide-for-portrait { + display: none !important; } } + +.hide-for-landscape, +.show-for-portrait { + display: none !important; } + @media screen and (orientation: landscape) { + .hide-for-landscape, + .show-for-portrait { + display: none !important; } } + @media screen and (orientation: portrait) { + .hide-for-landscape, + .show-for-portrait { + display: block !important; } } + +.float-left { + float: left !important; } + +.float-right { + float: right !important; } + +.float-center { + display: block; + margin-left: auto; + margin-right: auto; } + +.clearfix::before, .clearfix::after { + content: ' '; + display: table; } + +.clearfix::after { + clear: both; } + +.accordion { + list-style-type: none; + background: #fefefe; + border: 1px solid #e6e6e6; + border-radius: 0; + margin-left: 0; } + +.accordion-title { + display: block; + padding: 1.25rem 1rem; + line-height: 1; + font-size: 0.75rem; + color: #2199e8; + position: relative; + border-bottom: 1px solid #e6e6e6; } + .accordion-title:hover, .accordion-title:focus { + background-color: #e6e6e6; } + :last-child > .accordion-title { + border-bottom-width: 0; } + .accordion-title::before { + content: '+'; + position: absolute; + right: 1rem; + top: 50%; + margin-top: -0.5rem; } + .is-active > .accordion-title::before { + content: '–'; } + +.accordion-content { + padding: 1.25rem 1rem; + display: none; + border-bottom: 1px solid #e6e6e6; } + +.is-accordion-submenu-parent > a { + position: relative; } + .is-accordion-submenu-parent > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 6px; + border-color: #2199e8 transparent transparent; + border-top-style: solid; + position: absolute; + top: 50%; + margin-top: -4px; + right: 1rem; } + +.is-accordion-submenu-parent[aria-expanded='true'] > a::after { + -webkit-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); } + +.badge { + display: inline-block; + padding: 0.3em; + min-width: 2.1em; + font-size: 0.6rem; + text-align: center; + border-radius: 50%; + background: #2199e8; + color: #fefefe; } + .badge.secondary { + background: #777; + color: #fefefe; } + .badge.success { + background: #3adb76; + color: #fefefe; } + .badge.alert { + background: #ec5840; + color: #fefefe; } + .badge.warning { + background: #ffae00; + color: #fefefe; } + +.breadcrumbs { + list-style: none; + margin: 0 0 1rem 0; } + .breadcrumbs::before, .breadcrumbs::after { + content: ' '; + display: table; } + .breadcrumbs::after { + clear: both; } + .breadcrumbs li { + float: left; + color: #0a0a0a; + font-size: 0.6875rem; + cursor: default; + text-transform: uppercase; } + .breadcrumbs li:not(:last-child)::after { + color: #cacaca; + content: "/"; + margin: 0 0.75rem; + position: relative; + top: 1px; + opacity: 1; } + .breadcrumbs a { + color: #2199e8; } + .breadcrumbs a:hover { + text-decoration: underline; } + .breadcrumbs .disabled { + color: #cacaca; } + +.button-group { + margin-bottom: 1rem; + font-size: 0.9rem; } + .button-group::before, .button-group::after { + content: ' '; + display: table; } + .button-group::after { + clear: both; } + .button-group .button { + float: left; + margin: 0; + font-size: inherit; } + .button-group .button:not(:last-child) { + border-right: 1px solid #fefefe; } + .button-group.tiny { + font-size: 0.6rem; } + .button-group.small { + font-size: 0.75rem; } + .button-group.large { + font-size: 1.25rem; } + .button-group.expanded .button:nth-last-child(2):first-child, + .button-group.expanded .button:nth-last-child(2):first-child ~ .button { + width: 50%; } + .button-group.expanded .button:nth-last-child(3):first-child, + .button-group.expanded .button:nth-last-child(3):first-child ~ .button { + width: 33.33333%; } + .button-group.expanded .button:nth-last-child(4):first-child, + .button-group.expanded .button:nth-last-child(4):first-child ~ .button { + width: 25%; } + .button-group.expanded .button:nth-last-child(5):first-child, + .button-group.expanded .button:nth-last-child(5):first-child ~ .button { + width: 20%; } + .button-group.expanded .button:nth-last-child(6):first-child, + .button-group.expanded .button:nth-last-child(6):first-child ~ .button { + width: 16.66667%; } + .button-group.primary .button { + background: #2199e8; + color: #fff; } + .button-group.primary .button:hover, .button-group.primary .button:focus { + background: #147cc0; + color: #fff; } + .button-group.secondary .button { + background: #777; + color: #fff; } + .button-group.secondary .button:hover, .button-group.secondary .button:focus { + background: #5f5f5f; + color: #fff; } + .button-group.success .button { + background: #3adb76; + color: #fff; } + .button-group.success .button:hover, .button-group.success .button:focus { + background: #22bb5b; + color: #fff; } + .button-group.alert .button { + background: #ec5840; + color: #fff; } + .button-group.alert .button:hover, .button-group.alert .button:focus { + background: #da3116; + color: #fff; } + .button-group.warning .button { + background: #ffae00; + color: #fff; } + .button-group.warning .button:hover, .button-group.warning .button:focus { + background: #cc8b00; + color: #fff; } + .button-group.stacked .button, .button-group.stacked-for-small .button { + width: 100%; + border-right: 0; } + @media screen and (min-width: 40em) { + .button-group.stacked-for-small .button { + width: auto; } + .button-group.stacked-for-small .button:not(:last-child) { + border-right: 1px solid #fefefe; } } + +.callout { + margin: 0 0 1rem 0; + padding: 1rem; + border: 1px solid rgba(10, 10, 10, 0.25); + border-radius: 0; + position: relative; + background-color: white; } + .callout > :first-child { + margin-top: 0; } + .callout > :last-child { + margin-bottom: 0; } + .callout.primary { + background-color: #def0fc; } + .callout.primary a { + color: #116ca8; } + .callout.primary a:hover { + color: #0a4063; } + .callout.secondary { + background-color: #ebebeb; } + .callout.success { + background-color: #e1faea; } + .callout.success a { + color: #1ea450; } + .callout.success a:hover { + color: #126330; } + .callout.alert { + background-color: #fce6e2; } + .callout.alert a { + color: #bf2b13; } + .callout.alert a:hover { + color: #791b0c; } + .callout.warning { + background-color: #fff3d9; } + .callout.warning a { + color: #b37a00; } + .callout.warning a:hover { + color: #664600; } + .callout.small { + padding-top: 0.5rem; + padding-right: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0.5rem; } + .callout.large { + padding-top: 3rem; + padding-right: 3rem; + padding-bottom: 3rem; + padding-left: 3rem; } + +.close-button { + position: absolute; + color: #8a8a8a; + right: 1rem; + top: 0.5rem; + font-size: 2em; + line-height: 1; + cursor: pointer; } + [data-whatinput='mouse'] .close-button { + outline: 0; } + .close-button:hover, .close-button:focus { + color: #0a0a0a; } + +.is-drilldown { + position: relative; + overflow: hidden; } + +.is-drilldown-submenu { + position: absolute; + top: 0; + left: 100%; + z-index: -1; + height: 100%; + width: 100%; + background: #fefefe; + transition: -webkit-transform 0.15s linear; + transition: transform 0.15s linear; } + .is-drilldown-submenu.is-active { + z-index: 1; + display: block; + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); } + .is-drilldown-submenu.is-closing { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); } + +.is-drilldown-submenu-parent > a { + position: relative; } + .is-drilldown-submenu-parent > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 6px; + border-color: transparent transparent transparent #2199e8; + border-left-style: solid; + position: absolute; + top: 50%; + margin-top: -6px; + right: 1rem; } + +.js-drilldown-back::before { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 6px; + border-color: transparent #2199e8 transparent transparent; + border-right-style: solid; + float: left; + margin-right: 0.75rem; + margin-left: 0.6rem; + margin-top: 14px; } + +.dropdown-pane { + background-color: #fefefe; + border: 1px solid #cacaca; + display: block; + padding: 1rem; + position: absolute; + visibility: hidden; + width: 300px; + z-index: 10; + border-radius: 0; } + .dropdown-pane.is-open { + visibility: visible; } + +.dropdown-pane.tiny { + width: 100px; } + +.dropdown-pane.small { + width: 200px; } + +.dropdown-pane.large { + width: 400px; } + +[data-whatinput='mouse'] .dropdown.menu a { + outline: 0; } + +.dropdown.menu .is-dropdown-submenu-parent { + position: relative; } + .dropdown.menu .is-dropdown-submenu-parent a::after { + float: right; + margin-top: 3px; + margin-left: 10px; } + .dropdown.menu .is-dropdown-submenu-parent.is-down-arrow a { + padding-right: 1.5rem; + position: relative; } + .dropdown.menu .is-dropdown-submenu-parent.is-down-arrow > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: #2199e8 transparent transparent; + border-top-style: solid; + position: absolute; + top: 12px; + right: 5px; } + .dropdown.menu .is-dropdown-submenu-parent.is-left-arrow > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: transparent #2199e8 transparent transparent; + border-right-style: solid; + float: left; + margin-left: 0; + margin-right: 10px; } + .dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 5px; + border-color: transparent transparent transparent #2199e8; + border-left-style: solid; } + .dropdown.menu .is-dropdown-submenu-parent.is-left-arrow.opens-inner .submenu { + right: 0; + left: auto; } + .dropdown.menu .is-dropdown-submenu-parent.is-right-arrow.opens-inner .submenu { + left: 0; + right: auto; } + .dropdown.menu .is-dropdown-submenu-parent.opens-inner .submenu { + top: 100%; } + +.no-js .dropdown.menu ul { + display: none; } + +.dropdown.menu .submenu { + display: none; + position: absolute; + top: 0; + left: 100%; + min-width: 200px; + z-index: 1; + background: #fefefe; + border: 1px solid #cacaca; } + .dropdown.menu .submenu > li { + width: 100%; } + .dropdown.menu .submenu.first-sub { + top: 100%; + left: 0; + right: auto; } + .dropdown.menu .submenu:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > .dropdown.menu .submenu, .dropdown.menu .submenu.js-dropdown-active { + display: block; } + +.dropdown.menu .is-dropdown-submenu-parent.opens-left .submenu { + left: auto; + right: 100%; } + +.dropdown.menu.align-right .submenu.first-sub { + top: 100%; + left: auto; + right: 0; } + +.is-dropdown-menu.vertical { + width: 100px; } + .is-dropdown-menu.vertical.align-right { + float: right; } + .is-dropdown-menu.vertical > li .submenu { + top: 0; + left: 100%; } + +.flex-video { + position: relative; + height: 0; + padding-top: 1.5625rem; + padding-bottom: 75%; + margin-bottom: 1rem; + overflow: hidden; } + .flex-video iframe, + .flex-video object, + .flex-video embed, + .flex-video video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + .flex-video.widescreen { + padding-bottom: 56.25%; } + .flex-video.vimeo { + padding-top: 0; } + +.label { + display: inline-block; + padding: 0.33333rem 0.5rem; + font-size: 0.8rem; + line-height: 1; + white-space: nowrap; + cursor: default; + border-radius: 0; + background: #2199e8; + color: #fefefe; } + .label.secondary { + background: #777; + color: #fefefe; } + .label.success { + background: #3adb76; + color: #fefefe; } + .label.alert { + background: #ec5840; + color: #fefefe; } + .label.warning { + background: #ffae00; + color: #fefefe; } + +.media-object { + margin-bottom: 1rem; + display: block; } + .media-object img { + max-width: none; } + @media screen and (min-width: 0em) and (max-width: 39.9375em) { + .media-object.stack-for-small .media-object-section { + display: block; + padding: 0; + padding-bottom: 1rem; } + .media-object.stack-for-small .media-object-section img { + width: 100%; } } + +.media-object-section { + display: table-cell; + vertical-align: top; } + .media-object-section:first-child { + padding-right: 1rem; } + .media-object-section:last-child:not( + &:first-child) { + padding-left: 1rem; } + .media-object-section.middle { + vertical-align: middle; } + .media-object-section.bottom { + vertical-align: bottom; } + +.menu { + margin: 0; + list-style-type: none; } + .menu > li { + display: table-cell; + vertical-align: middle; } + [data-whatinput='mouse'] .menu > li { + outline: 0; } + .menu > li:not(.menu-text) > a { + display: block; + padding: 0.7rem 1rem; + line-height: 1; } + .menu input, + .menu a, + .menu button { + margin-bottom: 0; } + .menu > li > a > img, + .menu > li > a > i { + vertical-align: middle; } + .menu > li > a > span { + vertical-align: middle; } + .menu > li > a > img, + .menu > li > a > i { + display: inline-block; + margin-right: 0.25rem; } + .menu > li { + display: table-cell; } + .menu.vertical > li { + display: block; } + @media screen and (min-width: 40em) { + .menu.medium-horizontal > li { + display: table-cell; } + .menu.medium-vertical > li { + display: block; } } + @media screen and (min-width: 64em) { + .menu.large-horizontal > li { + display: table-cell; } + .menu.large-vertical > li { + display: block; } } + .menu.simple a { + padding: 0; + margin-right: 1rem; } + .menu.align-right > li { + float: right; } + .menu.expanded { + display: table; + width: 100%; } + .menu.expanded > li:nth-last-child(2):first-child, + .menu.expanded > li:nth-last-child(2):first-child ~ li { + width: 50%; } + .menu.expanded > li:nth-last-child(3):first-child, + .menu.expanded > li:nth-last-child(3):first-child ~ li { + width: 33.33333%; } + .menu.expanded > li:nth-last-child(4):first-child, + .menu.expanded > li:nth-last-child(4):first-child ~ li { + width: 25%; } + .menu.expanded > li:nth-last-child(5):first-child, + .menu.expanded > li:nth-last-child(5):first-child ~ li { + width: 20%; } + .menu.expanded > li:nth-last-child(6):first-child, + .menu.expanded > li:nth-last-child(6):first-child ~ li { + width: 16.66667%; } + .menu.expanded > li:first-child:last-child { + width: 100%; } + .menu.icon-top > li > a { + text-align: center; } + .menu.icon-top > li > a > img, + .menu.icon-top > li > a > i { + display: block; + margin: 0 auto 0.25rem; } + .menu.nested { + margin-left: 1rem; } + +.menu-text { + font-weight: bold; + color: inherit; + line-height: 1; + padding-top: 0; + padding-bottom: 0; + padding: 0.7rem 1rem; } + +html, +body { + height: 100%; } + +.off-canvas-wrapper { + width: 100%; + overflow-x: hidden; + position: relative; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-overflow-scrolling: touch; } + +.off-canvas-wrapper-inner { + position: relative; + width: 100%; + transition: -webkit-transform 0.5s ease; + transition: transform 0.5s ease; } + .off-canvas-wrapper-inner::before, .off-canvas-wrapper-inner::after { + content: ' '; + display: table; } + .off-canvas-wrapper-inner::after { + clear: both; } + +.off-canvas-content { + min-height: 100%; + background: #fefefe; + transition: -webkit-transform 0.5s ease; + transition: transform 0.5s ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + z-index: 1; + box-shadow: 0 0 10px rgba(10, 10, 10, 0.5); } + +.js-off-canvas-exit { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(254, 254, 254, 0.25); + cursor: pointer; + transition: background 0.5s ease; } + .is-off-canvas-open .js-off-canvas-exit { + display: block; } + +.off-canvas { + position: absolute; + background: #e6e6e6; + z-index: -1; + max-height: 100%; + overflow-y: auto; + -webkit-transform: translateX(0px); + -ms-transform: translateX(0px); + transform: translateX(0px); } + [data-whatinput='mouse'] .off-canvas { + outline: 0; } + .off-canvas.position-left { + left: -250px; + top: 0; + width: 250px; } + .is-open-left { + -webkit-transform: translateX(250px); + -ms-transform: translateX(250px); + transform: translateX(250px); } + .off-canvas.position-right { + right: -250px; + top: 0; + width: 250px; } + .is-open-right { + -webkit-transform: translateX(-250px); + -ms-transform: translateX(-250px); + transform: translateX(-250px); } + +@media screen and (min-width: 40em) { + .position-left.reveal-for-medium { + left: 0; + z-index: auto; + position: fixed; } + .position-left.reveal-for-medium ~ .off-canvas-content { + margin-left: 250px; } + .position-right.reveal-for-medium { + right: 0; + z-index: auto; + position: fixed; } + .position-right.reveal-for-medium ~ .off-canvas-content { + margin-right: 250px; } } + +@media screen and (min-width: 64em) { + .position-left.reveal-for-large { + left: 0; + z-index: auto; + position: fixed; } + .position-left.reveal-for-large ~ .off-canvas-content { + margin-left: 250px; } + .position-right.reveal-for-large { + right: 0; + z-index: auto; + position: fixed; } + .position-right.reveal-for-large ~ .off-canvas-content { + margin-right: 250px; } } + +.orbit { + position: relative; } + +.orbit-container { + position: relative; + margin: 0; + overflow: hidden; + list-style: none; } + +.orbit-slide { + width: 100%; + max-height: 100%; } + .orbit-slide.no-motionui.is-active { + top: 0; + left: 0; } + +.orbit-figure { + margin: 0; } + +.orbit-image { + margin: 0; + width: 100%; + max-width: 100%; } + +.orbit-caption { + position: absolute; + bottom: 0; + width: 100%; + padding: 1rem; + margin-bottom: 0; + color: #fefefe; + background-color: rgba(10, 10, 10, 0.5); } + +.orbit-previous, .orbit-next { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + z-index: 10; + padding: 1rem; + color: #fefefe; } + [data-whatinput='mouse'] .orbit-previous, [data-whatinput='mouse'] .orbit-next { + outline: 0; } + .orbit-previous:hover, .orbit-next:hover, .orbit-previous:active, .orbit-next:active, .orbit-previous:focus, .orbit-next:focus { + background-color: rgba(10, 10, 10, 0.5); } + +.orbit-previous { + left: 0; } + +.orbit-next { + left: auto; + right: 0; } + +.orbit-bullets { + position: relative; + margin-top: 0.8rem; + margin-bottom: 0.8rem; + text-align: center; } + [data-whatinput='mouse'] .orbit-bullets { + outline: 0; } + .orbit-bullets button { + width: 1.2rem; + height: 1.2rem; + margin: 0.1rem; + background-color: #cacaca; + border-radius: 50%; } + .orbit-bullets button:hover { + background-color: #8a8a8a; } + .orbit-bullets button.is-active { + background-color: #8a8a8a; } + +.pagination { + margin-left: 0; + margin-bottom: 1rem; } + .pagination::before, .pagination::after { + content: ' '; + display: table; } + .pagination::after { + clear: both; } + .pagination li { + font-size: 0.875rem; + margin-right: 0.0625rem; + display: none; + border-radius: 0; } + .pagination li:last-child, .pagination li:first-child { + display: inline-block; } + @media screen and (min-width: 40em) { + .pagination li { + display: inline-block; } } + .pagination a, + .pagination button { + color: #0a0a0a; + display: block; + padding: 0.1875rem 0.625rem; + border-radius: 0; } + .pagination a:hover, + .pagination button:hover { + background: #e6e6e6; } + .pagination .current { + padding: 0.1875rem 0.625rem; + background: #2199e8; + color: #fefefe; + cursor: default; } + .pagination .disabled { + padding: 0.1875rem 0.625rem; + color: #cacaca; + cursor: default; } + .pagination .disabled:hover { + background: transparent; } + .pagination .ellipsis::after { + content: '…'; + padding: 0.1875rem 0.625rem; + color: #0a0a0a; } + +.pagination-previous a::before, +.pagination-previous.disabled::before { + content: '«'; + display: inline-block; + margin-right: 0.5rem; } + +.pagination-next a::after, +.pagination-next.disabled::after { + content: '»'; + display: inline-block; + margin-left: 0.5rem; } + +.progress { + background-color: #cacaca; + height: 1rem; + margin-bottom: 1rem; + border-radius: 0; } + .progress.primary .progress-meter { + background-color: #2199e8; } + .progress.secondary .progress-meter { + background-color: #777; } + .progress.success .progress-meter { + background-color: #3adb76; } + .progress.alert .progress-meter { + background-color: #ec5840; } + .progress.warning .progress-meter { + background-color: #ffae00; } + +.progress-meter { + position: relative; + display: block; + width: 0%; + height: 100%; + background-color: #2199e8; + border-radius: 0; } + .progress-meter .progress-meter-text { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + margin: 0; + font-size: 0.75rem; + font-weight: bold; + color: #fefefe; + white-space: nowrap; } + +.slider { + position: relative; + height: 0.5rem; + margin-top: 1.25rem; + margin-bottom: 2.25rem; + background-color: #e6e6e6; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: none; + touch-action: none; } + +.slider-fill { + position: absolute; + top: 0; + left: 0; + display: inline-block; + max-width: 100%; + height: 0.5rem; + background-color: #cacaca; + transition: all 0.2s ease-in-out; } + .slider-fill.is-dragging { + transition: all 0s linear; } + +.slider-handle { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + position: absolute; + left: 0; + z-index: 1; + display: inline-block; + width: 1.4rem; + height: 1.4rem; + background-color: #2199e8; + transition: all 0.2s ease-in-out; + -ms-touch-action: manipulation; + touch-action: manipulation; + border-radius: 0; } + [data-whatinput='mouse'] .slider-handle { + outline: 0; } + .slider-handle:hover { + background-color: #1583cc; } + .slider-handle.is-dragging { + transition: all 0s linear; } + +.slider.disabled, +.slider[disabled] { + opacity: 0.25; + cursor: not-allowed; } + +.slider.vertical { + display: inline-block; + width: 0.5rem; + height: 12.5rem; + margin: 0 1.25rem; + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); } + .slider.vertical .slider-fill { + top: 0; + width: 0.5rem; + max-height: 100%; } + .slider.vertical .slider-handle { + position: absolute; + top: 0; + left: 50%; + width: 1.4rem; + height: 1.4rem; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); } + +.sticky-container { + position: relative; } + +.sticky { + position: absolute; + z-index: 0; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + +.sticky.is-stuck { + position: fixed; + z-index: 5; } + .sticky.is-stuck.is-at-top { + top: 0; } + .sticky.is-stuck.is-at-bottom { + bottom: 0; } + +.sticky.is-anchored { + position: absolute; + left: auto; + right: auto; } + .sticky.is-anchored.is-at-bottom { + bottom: 0; } + +.reveal-overlay { + display: none; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1005; + background-color: rgba(10, 10, 10, 0.45); + overflow-y: scroll; } + +.reveal { + display: none; + z-index: 1006; + padding: 1rem; + border: 1px solid #cacaca; + margin: 100px auto 0 auto; + background-color: #fefefe; + border-radius: 0; + position: absolute; + overflow-y: auto; } + [data-whatinput='mouse'] .reveal { + outline: 0; } + @media screen and (min-width: 40em) { + .reveal { + min-height: 0; } } + .reveal .column, + .reveal .columns { + min-width: 0; } + .reveal > :last-child { + margin-bottom: 0; } + @media screen and (min-width: 40em) { + .reveal { + width: 600px; + max-width: 62.5rem; } } + .reveal.collapse { + padding: 0; } + @media screen and (min-width: 40em) { + .reveal .reveal { + left: auto; + right: auto; + margin: 0 auto; } } + @media screen and (min-width: 40em) { + .reveal.tiny { + width: 30%; + max-width: 62.5rem; } } + @media screen and (min-width: 40em) { + .reveal.small { + width: 50%; + max-width: 62.5rem; } } + @media screen and (min-width: 40em) { + .reveal.large { + width: 90%; + max-width: 62.5rem; } } + .reveal.full { + top: 0; + left: 0; + width: 100%; + height: 100%; + height: 100vh; + min-height: 100vh; + max-width: none; + margin-left: 0; } + +.switch { + margin-bottom: 1rem; + outline: 0; + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #fefefe; + font-weight: bold; + font-size: 0.875rem; } + +.switch-input { + opacity: 0; + position: absolute; } + +.switch-paddle { + background: #cacaca; + cursor: pointer; + display: block; + position: relative; + width: 4rem; + height: 2rem; + transition: all 0.25s ease-out; + border-radius: 0; + color: inherit; + font-weight: inherit; } + input + .switch-paddle { + margin: 0; } + .switch-paddle::after { + background: #fefefe; + content: ''; + display: block; + position: absolute; + height: 1.5rem; + left: 0.25rem; + top: 0.25rem; + width: 1.5rem; + transition: all 0.25s ease-out; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + border-radius: 0; } + input:checked ~ .switch-paddle { + background: #2199e8; } + input:checked ~ .switch-paddle::after { + left: 2.25rem; } + [data-whatinput='mouse'] input:focus ~ .switch-paddle { + outline: 0; } + +.switch-active, .switch-inactive { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + +.switch-active { + left: 8%; + display: none; } + input:checked + label > .switch-active { + display: block; } + +.switch-inactive { + right: 15%; } + input:checked + label > .switch-inactive { + display: none; } + +.switch.tiny .switch-paddle { + width: 3rem; + height: 1.5rem; + font-size: 0.625rem; } + +.switch.tiny .switch-paddle::after { + width: 1rem; + height: 1rem; } + +.switch.tiny input:checked ~ .switch-paddle:after { + left: 1.75rem; } + +.switch.small .switch-paddle { + width: 3.5rem; + height: 1.75rem; + font-size: 0.75rem; } + +.switch.small .switch-paddle::after { + width: 1.25rem; + height: 1.25rem; } + +.switch.small input:checked ~ .switch-paddle:after { + left: 2rem; } + +.switch.large .switch-paddle { + width: 5rem; + height: 2.5rem; + font-size: 1rem; } + +.switch.large .switch-paddle::after { + width: 2rem; + height: 2rem; } + +.switch.large input:checked ~ .switch-paddle:after { + left: 2.75rem; } + +table { + margin-bottom: 1rem; + border-radius: 0; } + thead, + tbody, + tfoot { + border: 1px solid #f1f1f1; + background-color: #fefefe; } + caption { + font-weight: bold; + padding: 0.5rem 0.625rem 0.625rem; } + thead, + tfoot { + background: #f8f8f8; + color: #0a0a0a; } + thead tr, + tfoot tr { + background: transparent; } + thead th, + thead td, + tfoot th, + tfoot td { + padding: 0.5rem 0.625rem 0.625rem; + font-weight: bold; + text-align: left; } + tbody tr:nth-child(even) { + background-color: #f1f1f1; } + tbody th, + tbody td { + padding: 0.5rem 0.625rem 0.625rem; } + +@media screen and (max-width: 63.9375em) { + table.stack thead { + display: none; } + table.stack tfoot { + display: none; } + table.stack tr, + table.stack th, + table.stack td { + display: block; } + table.stack td { + border-top: 0; } } + +table.scroll { + display: block; + width: 100%; + overflow-y: scroll; } + +table.hover tr:hover { + background-color: #f9f9f9; } + +table.hover tr:nth-of-type(even):hover { + background-color: #ececec; } + +.tabs { + margin: 0; + list-style-type: none; + background: #fefefe; + border: 1px solid #e6e6e6; } + .tabs::before, .tabs::after { + content: ' '; + display: table; } + .tabs::after { + clear: both; } + .tabs.simple > li > a { + padding: 0; } + .tabs.simple > li > a:hover { + background: transparent; } + .tabs.vertical > li { + width: auto; + float: none; + display: block; } + .tabs.primary { + background: #2199e8; } + .tabs.primary > li > a { + color: #fefefe; } + .tabs.primary > li > a:hover, .tabs.primary > li > a:focus { + background: #1893e4; } + +.tabs-title { + float: left; } + .tabs-title > a { + display: block; + padding: 1.25rem 1.5rem; + line-height: 1; + font-size: 12px; + color: #2199e8; } + .tabs-title > a:hover, .tabs-title > a:focus, .tabs-title > a[aria-selected='true'] { + background: #e6e6e6; } + +.tabs-content { + background: #fefefe; + transition: all 0.5s ease; + border: 1px solid #e6e6e6; + border-top: 0; } + .tabs-content.vertical { + border: 1px solid #e6e6e6; + border-left: 0; } + +.tabs-panel { + display: none; + padding: 1rem; } + .tabs-panel.is-active { + display: block; } + +.thumbnail { + border: solid 4px #fefefe; + box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2); + display: inline-block; + line-height: 0; + max-width: 100%; + transition: box-shadow 200ms ease-out; + border-radius: 0; + margin-bottom: 1rem; } + .thumbnail:hover, .thumbnail:focus { + box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5); } + +.title-bar { + background: #0a0a0a; + color: #fefefe; + padding: 0.5rem; } + .title-bar::before, .title-bar::after { + content: ' '; + display: table; } + .title-bar::after { + clear: both; } + .title-bar .menu-icon { + margin-left: 0.25rem; + margin-right: 0.5rem; } + +.title-bar-left { + float: left; } + +.title-bar-right { + float: right; + text-align: right; } + +.title-bar-title { + font-weight: bold; + vertical-align: middle; + display: inline-block; } + +.menu-icon { + position: relative; + display: inline-block; + vertical-align: middle; + cursor: pointer; + width: 20px; + height: 16px; } + .menu-icon::after { + content: ''; + position: absolute; + display: block; + width: 100%; + height: 2px; + background: #fefefe; + top: 0; + left: 0; + box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe; } + .menu-icon:hover::after { + background: #cacaca; + box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; } + +.has-tip { + border-bottom: dotted 1px #8a8a8a; + font-weight: bold; + position: relative; + display: inline-block; + cursor: help; } + +.tooltip { + background-color: #0a0a0a; + color: #fefefe; + font-size: 80%; + padding: 0.75rem; + position: absolute; + z-index: 10; + top: calc(100% + 0.6495rem); + max-width: 10rem !important; + border-radius: 0; } + .tooltip::before { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 0.75rem; + border-color: transparent transparent #0a0a0a; + border-bottom-style: solid; + bottom: 100%; + position: absolute; + left: 50%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); } + .tooltip.top::before { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 0.75rem; + border-color: #0a0a0a transparent transparent; + border-top-style: solid; + top: 100%; + bottom: auto; } + .tooltip.left::before { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 0.75rem; + border-color: transparent transparent transparent #0a0a0a; + border-left-style: solid; + bottom: auto; + left: 100%; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .tooltip.right::before { + content: ''; + display: block; + width: 0; + height: 0; + border: inset 0.75rem; + border-color: transparent #0a0a0a transparent transparent; + border-right-style: solid; + bottom: auto; + left: auto; + right: 100%; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + +.top-bar { + padding: 0.5rem; } + .top-bar::before, .top-bar::after { + content: ' '; + display: table; } + .top-bar::after { + clear: both; } + .top-bar, .top-bar ul { + background-color: #eee; } + .top-bar li > a, .top-bar ul li > a { + color: #fff; } + .top-bar input { + width: 200px; + margin-right: 1rem; } + +@media screen and (min-width: 40em) { + .top-bar-left { + float: left; } + .top-bar-right { + float: right; } } + +div.sourceCode { + border: 1px #cacaca solid; + background-color: #f7f7f7; + margin-bottom: 0.625rem; + overflow-x: scroll; } + div.sourceCode pre { + border: none; + background-color: transparent; } + div.sourceCode code { + border: none; + background-color: transparent; } + +table.sourceCode { + width: 100%; } + table.sourceCode tbody { + border: none; } + +table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; + border: none; } + +td.lineNumbers { + border-right: 1px solid #AAAAAA; + text-align: right; + color: #AAAAAA; + padding-right: 5px; + padding-left: 5px; } + +td.sourceCode { + padding-left: 0.625rem; } + +.sourceCode span.kw { + color: #007020; + font-weight: bold; } + +.sourceCode span.dt { + color: #902000; } + +.sourceCode span.dv { + color: #40a070; } + +.sourceCode span.bn { + color: #40a070; } + +.sourceCode span.fl { + color: #40a070; } + +.sourceCode span.ch { + color: #4070a0; } + +.sourceCode span.st { + color: #4070a0; } + +.sourceCode span.co { + color: #60a0b0; + font-style: italic; } + +.sourceCode span.ot { + color: #007020; } + +.sourceCode span.al { + color: red; + font-weight: bold; } + +.sourceCode span.fu { + color: #06287e; } + +.sourceCode span.er { + color: red; + font-weight: bold; } + +h1.cardboard { + font-family: 'adelle-sans'; + font-weight: 400; + transition: all 0.3s ease; + float: left; + font-weight: bold; + padding: 0; + line-height: 3.75rem; } + h1.cardboard span { + transition: all 0.3s ease; + position: relative; + color: #ffffff; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; } + h1.cardboard span.purple { + color: #af517d; } + h1.cardboard span.yellow { + color: #e6bd1a; } + h1.cardboard span.orange { + color: #e87a2f; } + h1.cardboard span.red { + color: #cb3535; } + h1.cardboard span.cyan { + color: #51af9c; } + h1.cardboard span.green { + color: #9caf51; } + h1.cardboard span.blue { + color: #1490b0; } + +a:hover h1.cardboard span { + color: #0a0a0a; } + +a:active h1.cardboard { + color: #0a0a0a; } + +div#header { + padding-top: 2.8125rem; + padding-bottom: 1.875rem; + border-bottom: 2px #cacaca; } + +a#logo div { + background-image: url("/images/header_logo_float.png"); + width: 143px; + height: 59px; } + +div#footer { + margin-top: 1.875rem; + margin-bottom: 1.875rem; } + +div.info { + color: #555; + font-size: 14px; + font-style: italic; + margin-bottom: 1.25rem; } + +div.post { + margin-bottom: 3.125rem; } + +div.callout-quote { + font-weight: bold; + font-style: italic; + font-size: 120%; + max-width: 25rem; + margin-left: auto; + margin-right: auto; + margin-top: 0.625rem; + margin-bottom: 0.9375rem; } + +figcaption { + font-style: italic; + font-size: 80%; } + figcaption::before { + content: 'fig. '; } + +@media screen and (min-width: 40em) { + .masonry { + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; + -webkit-column-gap: 0.9375rem; + -moz-column-gap: 0.9375rem; + column-gap: 0.9375rem; } + .masonry .callout { + margin-bottom: 0.9375rem; } } diff --git a/css/foundation/_global.scss b/css/foundation/_global.scss deleted file mode 100755 index 1df78e5..0000000 --- a/css/foundation/_global.scss +++ /dev/null @@ -1,193 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group global -//// - -/// Global width of your site. Used by the grid to determine row width. -/// @type Number -$global-width: rem-calc(1200) !default; - -/// Font size attribute applied to `<html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings. -/// @type Number -$global-font-size: 100% !default; - -/// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px -/// @type Number -$global-lineheight: 1.5 !default; - -/// Primary color for interactive components like links and buttons. -/// @type Color -$primary-color: #2199e8 !default; - -/// Secondary color, used with components that support the `.secondary` class. -/// @type Color -$secondary-color: #777 !default; - -/// Color to indicate a positive status or action, used with the `.success` class. -/// @type Color -$success-color: #3adb76 !default; - -/// Color to indicate a caution status or action, used with the `.warning` class. -/// @type Color -$warning-color: #ffae00 !default; - -/// Color to indicate a negative status or action, used with the `.alert` class. -/// @type Color -$alert-color: #ec5840 !default; - -/// Color used for light gray UI items. -/// @type Color -$light-gray: #e6e6e6 !default; - -/// Color used for medium gray UI items. -/// @type Color -$medium-gray: #cacaca !default; - -/// Color used for dark gray UI items. -/// @type Color -$dark-gray: #8a8a8a !default; - -/// Color used for black ui items. -/// @type Color -$black: #0a0a0a !default; - -/// Color used for white ui items. -/// @type Color -$white: #fefefe !default; - -/// Background color of the body. -/// @type Color -$body-background: $white !default; - -/// Text color of the body. -/// @type Color -$body-font-color: $black !default; - -/// Font stack of the body. -/// @type List -$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default; - -/// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties. -/// @type Boolean -$body-antialiased: true !default; - -/// Global value used for margin on components. -/// @type Number -$global-margin: 1rem !default; - -/// Global value used for padding on components. -/// @type Number -$global-padding: 1rem !default; - -/// Global value used for margin between components. -/// @type Number -$global-margin: 1rem !default; - -/// Global font weight used for normal type. -/// @type Keyword | Number -$global-weight-normal: normal !default; - -/// Global font weight used for bold type. -/// @type Keyword | Number -$global-weight-bold: bold !default; - -/// Global value used for all elements that have a border radius. -/// @type Number -$global-radius: 0 !default; - -/// Sets the text direction of the CSS. Can be either `ltr` or `rtl`. -$global-text-direction: ltr !default; - -// Internal variables used for text direction -$global-left: if($global-text-direction == rtl, right, left); -$global-right: if($global-text-direction == rtl, left, right); - -// Internal map used to iterate through colors, to generate CSS classes with less code -$foundation-colors: ( - primary: $primary-color, - secondary: $secondary-color, - success: $success-color, - alert: $alert-color, - warning: $warning-color, -); - -@mixin foundation-global-styles { - html, - body { - font-size: $global-font-size; - box-sizing: border-box; - } - - // Set box-sizing globally to handle padding and border widths - *, - *:before, - *:after { - box-sizing: inherit; - } - - // Default body styles - body { - padding: 0; - margin: 0; - font-family: $body-font-family; - font-weight: $global-weight-normal; - line-height: $global-lineheight; - color: $body-font-color; - background: $body-background; - - @if ($body-antialiased) { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - } - - img { - // Grid defaults to get images and embeds to work properly - max-width: 100%; - height: auto; - -ms-interpolation-mode: bicubic; - - // Get rid of gap under images by making them display: inline-block; by default - display: inline-block; - vertical-align: middle; - } - - // Make sure textarea takes on height automatically - textarea { - height: auto; - min-height: 50px; - border-radius: $global-radius; - } - - // Make select elements are 100% width by default - select { - width: 100%; - border-radius: $global-radius; - } - - // Styles Google Maps and MapQuest embeds properly - // scss-lint:disable IdSelector - #map_canvas, - .map_canvas, - .mqa-display { - img, - embed, - object { - max-width: none !important; - } - } - - // Reset <button> styles created by most browsers - button { - -webkit-appearance: none; - -moz-appearance: none; - background: transparent; - padding: 0; - border: 0; - border-radius: $global-radius; - line-height: 1; - } -} diff --git a/css/foundation/components/_accordion-menu.scss b/css/foundation/components/_accordion-menu.scss deleted file mode 100755 index eef527d..0000000 --- a/css/foundation/components/_accordion-menu.scss +++ /dev/null @@ -1,28 +0,0 @@ -//// -/// @group accordion-menu -//// - -/// Sets if accordion menus have the default arrow styles. -/// @type Boolean -$accordionmenu-arrows: true !default; - -@mixin foundation-accordion-menu { - @if $accordionmenu-arrows { - .is-accordion-submenu-parent > a { - position: relative; - - &::after { - @include css-triangle(6px, $primary-color, down); - position: absolute; - top: 50%; - margin-top: -4px; - right: 1rem; - } - } - - .is-accordion-submenu-parent[aria-expanded='true'] > a::after { - transform-origin: 50% 50%; - transform: scaleY(-1); - } - } -} diff --git a/css/foundation/components/_accordion.scss b/css/foundation/components/_accordion.scss deleted file mode 100755 index 04b22d1..0000000 --- a/css/foundation/components/_accordion.scss +++ /dev/null @@ -1,112 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group accordion -//// - -/// Default background color of an accordion group. -/// @type Color -$accordion-background: $white !default; - -/// If `true`, adds plus and minus icons to the side of each accordion title. -/// @type Boolean -$accordion-plusminus: true !default; - -/// Default text color for items in a Menu. -/// @type Color -$accordion-item-color: foreground($accordion-background, $primary-color) !default; - -/// Default background color on hover for items in a Menu. -/// @type Color -$accordion-item-background-hover: $light-gray !default; - -/// Default padding of an accordion item. -/// @type Number | List -$accordion-item-padding: 1.25rem 1rem !default; - -/// Default background color of tab content. -/// @type Color -$accordion-content-background: $white !default; - -/// Default border color of tab content. -/// @type Color -$accordion-content-border: 1px solid $light-gray !default; - -/// Default text color of tab content. -/// @type Color -$accordion-content-color: foreground($accordion-background, $primary-color) !default; - -/// Default padding for tab content. -/// @type Number | List -$accordion-content-padding: 1rem !default; - -/// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`. -@mixin accordion-container { - list-style-type: none; - background: $accordion-background; - border: $accordion-content-border; - border-radius: $global-radius; - margin-#{$global-left}: 0; -} - -/// Adds styles for the title of an accordion item. Apply this to the link within an accordion item. -@mixin accordion-title { - display: block; - padding: $accordion-item-padding; - line-height: 1; - font-size: rem-calc(12); - color: $accordion-item-color; - position: relative; - border-bottom: $accordion-content-border; - - &:hover, - &:focus { - background-color: $accordion-item-background-hover; - } - - // Remove the border on the last title - :last-child > & { - border-bottom-width: 0; - } - - @if $accordion-plusminus { - &::before { - content: '+'; - position: absolute; - #{$global-right}: 1rem; - top: 50%; - margin-top: -0.5rem; - } - - .is-active > &::before { - content: '–'; - } - } -} - -/// Adds styles for accordion content. Apply this to the content pane below an accordion item's title. -@mixin accordion-content { - padding: $accordion-item-padding; - display: none; - border-bottom: $accordion-content-border; -} - -@mixin foundation-accordion { - .accordion { - @include accordion-container; - } - - .accordion-item { - // This class doesn't need styles! - } - - .accordion-title { - @include accordion-title; - } - - .accordion-content { - @include accordion-content; - } -} diff --git a/css/foundation/components/_badge.scss b/css/foundation/components/_badge.scss deleted file mode 100755 index 6471a2c..0000000 --- a/css/foundation/components/_badge.scss +++ /dev/null @@ -1,55 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group badge -//// - -/// Default background color for badges. -/// @type Color -$badge-background: $primary-color !default; - -/// Default text color for badges. -/// @type Color -$badge-color: foreground($badge-background) !default; - -/// Default padding inside badges. -/// @type Number -$badge-padding: 0.3em !default; - -/// Minimum width of a badge. -/// @type Number -$badge-minwidth: 2.1em !default; - -/// Default font size for badges. -/// @type Number -$badge-font-size: 0.6rem !default; - -/// Generates the base styles for a badge. -@mixin badge { - display: inline-block; - padding: $badge-padding; - min-width: $badge-minwidth; - font-size: $badge-font-size; - text-align: center; - border-radius: 50%; -} - -@mixin foundation-badge { - .badge { - @include badge; - - background: $badge-background; - color: $badge-color; - - @each $name, $color in $foundation-colors { - @if $name != primary { - &.#{$name} { - background: $color; - color: foreground($color); - } - } - } - } -} diff --git a/css/foundation/components/_breadcrumbs.scss b/css/foundation/components/_breadcrumbs.scss deleted file mode 100755 index 950f402..0000000 --- a/css/foundation/components/_breadcrumbs.scss +++ /dev/null @@ -1,94 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group breadcrumbs -//// - -/// Margin around a breadcrumbs container. -/// @type Number -$breadcrumbs-margin: 0 0 $global-margin 0 !default; - -/// Font size of breadcrumb links. -/// @type Number -$breadcrumbs-item-font-size: rem-calc(11) !default; - -/// Color of breadcrumb links. -/// @type Color -$breadcrumbs-item-color: $primary-color !default; - -/// Color of the active breadcrumb link. -/// @type Color -$breadcrumbs-item-color-current: $black !default; - -/// Opacity of disabled breadcrumb links. -/// @type Number -$breadcrumbs-item-color-disabled: $medium-gray !default; - -/// Margin between breadcrumb items. -/// @type Number -$breadcrumbs-item-margin: 0.75rem !default; - -/// If `true`, makes breadcrumb links uppercase. -/// @type Boolean -$breadcrumbs-item-uppercase: true !default; - -/// If `true`, adds a slash between breadcrumb links. -/// @type Boolean -$breadcrumbs-item-slash: true !default; - -/// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it. -@mixin breadcrumbs-container { - @include clearfix; - list-style: none; - margin: $breadcrumbs-margin; - - // Item wrapper - li { - float: #{$global-left}; - color: $breadcrumbs-item-color-current; - font-size: $breadcrumbs-item-font-size; - cursor: default; - - @if $breadcrumbs-item-uppercase { - text-transform: uppercase; - } - - @if $breadcrumbs-item-slash { - // Need to escape the backslash - $slash: if($global-text-direction == 'ltr', '/', '\\'); - - &:not(:last-child)::after { - color: $medium-gray; - content: $slash; - margin: 0 $breadcrumbs-item-margin; - position: relative; - top: 1px; - opacity: 1; - } - } - @else { - margin-#{$global-right}: $breadcrumbs-item-margin; - } - } - - // Page links - a { - color: $breadcrumbs-item-color; - - &:hover { - text-decoration: underline; - } - } -} - -@mixin foundation-breadcrumbs { - .breadcrumbs { - @include breadcrumbs-container; - - .disabled { - color: $breadcrumbs-item-color-disabled; - } - } -} diff --git a/css/foundation/components/_button-group.scss b/css/foundation/components/_button-group.scss deleted file mode 100755 index 994b992..0000000 --- a/css/foundation/components/_button-group.scss +++ /dev/null @@ -1,115 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group button-group -//// - -/// Margin for button groups. -/// @type Number -$buttongroup-margin: 1rem !default; - -/// Margin between buttons in a button group. -/// @type Border -$buttongroup-spacing: 1px !default; - -/// Selector for the buttons inside a button group. -/// @type String -$buttongroup-child-selector: '.button' !default; - -/// Maximum number of buttons that can be in an even-width button group. -/// @type Number -$buttongroup-expand-max: 6 !default; - -/// Add styles for a button group container. -/// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group. -@mixin button-group( - $child-selector: $buttongroup-child-selector -) { - @include clearfix; - margin-bottom: $buttongroup-margin; - font-size: map-get($button-sizes, default); - - #{$child-selector} { - float: #{$global-left}; - margin: 0; - font-size: inherit; - - &:not(:last-child) { - border-#{$global-right}: $buttongroup-spacing solid $body-background; - } - } -} - -/// Creates a full-width button group, making each button equal width. -/// @param {Keyword|Number} $count [auto] - Number of buttons inside the button group. Set to `auto` to generate CSS that will account for a variable number of buttons. -/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group. -@mixin button-group-expand( - $count: auto, - $selector: $buttongroup-child-selector -) { - #{$selector} { - @if $count == auto { - @include auto-width($buttongroup-expand-max, $selector); - } - @else if type-of($count) == 'number' { - width: percentage(1 / $count); - } - } -} - -/// Stacks the buttons in a button group. -/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group. -@mixin button-group-stack( - $selector: $buttongroup-child-selector -) { - #{$selector} { - width: 100%; - border-#{$global-right}: 0; - } -} - -/// Un-stacks the buttons in a button group. -/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group. -@mixin button-group-unstack( - $selector: $buttongroup-child-selector -) { - #{$selector} { - width: auto; - - &:not(:last-child) { - border-#{$global-right}: $buttongroup-spacing solid $body-background; - } - } -} - -@mixin foundation-button-group { - .button-group { - @include button-group; - - // Sizes - &.tiny { font-size: map-get($button-sizes, tiny); } - &.small { font-size: map-get($button-sizes, small); } - &.large { font-size: map-get($button-sizes, large); } - &.expanded { @include button-group-expand; } - - // Colors - @each $name, $color in $foundation-colors { - &.#{$name} #{$buttongroup-child-selector} { - @include button-style($color, auto, auto); - } - } - - &.stacked, - &.stacked-for-small { - @include button-group-stack; - } - - &.stacked-for-small { - @include breakpoint(medium) { - @include button-group-unstack; - } - } - } -} diff --git a/css/foundation/components/_button.scss b/css/foundation/components/_button.scss deleted file mode 100755 index 6b01bb5..0000000 --- a/css/foundation/components/_button.scss +++ /dev/null @@ -1,264 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group button -//// - -/// Padding inside buttons. -/// @type List -$button-padding: 0.85em 1em !default; - -/// Margin around buttons. -/// @type List -$button-margin: 0 $global-margin $global-margin 0 !default; - -/// Default fill for buttons. Can either be `solid` or `hollow`. -/// @type Keyword -$button-fill: solid !default; - -/// Default background color for buttons. -/// @type Color -$button-background: $primary-color !default; - -/// Background color on hover for buttons. -/// @type Color -$button-background-hover: scale-color($button-background, $lightness: -15%) !default; - -/// Font color for buttons. -/// @type List -$button-color: #fff !default; - -/// Font color for buttons, if the background is light. -/// @type List -$button-color-alt: #000 !default; - -/// Border radius for buttons, defaulted to global-radius. -/// @type Number -$button-radius: $global-radius !default; - -/// Sizes for buttons. -/// @type Map -$button-sizes: ( - tiny: 0.6rem, - small: 0.75rem, - default: 0.9rem, - large: 1.25rem, -) !default; - -/// opacity for a disabled button. -/// @type List -$button-opacity-disabled: 0.25 !default; - -// Internal: flip from margin-right to margin-left for defaults -@if $global-text-direction == 'rtl' { - $button-margin: 0 0 $global-margin $global-margin !default; -} - -// TODO: Document button-base() mixin -@mixin button-base { - @include disable-mouse-outline; - display: inline-block; - text-align: center; - line-height: 1; - cursor: pointer; - -webkit-appearance: none; - transition: all 0.25s ease-out; - vertical-align: middle; - border: 1px solid transparent; - border-radius: $button-radius; - padding: $button-padding; - margin: $button-margin; - font-size: map-get($button-sizes, default); -} - -/// Expands a button to make it full-width. -/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior. -@mixin button-expand($expand: true) { - @if $expand { - display: block; - width: 100%; - margin-left: 0; - margin-right: 0; - } - @else { - display: inline-block; - width: auto; - margin: $button-margin; - } -} - -/// Sets the visual style of a button. -/// @param {Color} $background [$button-background] - Background color of the button. -/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color. -/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color. -@mixin button-style( - $background: $button-background, - $background-hover: $button-background-hover, - $color: $button-color -) { - @if $color == auto { - $color: isitlight($background); - } - - @if $background-hover == auto { - $background-hover: scale-color($background, $lightness: -20%); - } - - @if lightness($background) >= 70% { - $color: $button-color-alt; - } - @else { - $color: $button-color; - } - - background: $background; - color: $color; - - &:hover, &:focus { - background: $background-hover; - color: $color; - } -} - -/// Removes background fill on hover and focus for hollow buttons. -@mixin button-hollow { - &, - &:hover, &:focus { - background: transparent; - } -} - -@mixin button-hollow-style($color: $primary-color) { - $color-hover: scale-color($color, $lightness: -50%); - - border: 1px solid $color; - color: $color; - - &:hover, &:focus { - border-color: $color-hover; - color: $color-hover; - } -} - -/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events. -@mixin button-disabled { - opacity: $button-opacity-disabled; - cursor: not-allowed; - pointer-events: none; -} - -/// Adds a dropdown arrow to a button. -/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons. -/// @param {Color} $color [white] - Color of the arrow. -/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is. -@mixin button-dropdown( - $size: 0.4em, - $color: $white, - $offset: get-side($button-padding, right) -) { - &::after { - @include css-triangle($size, $color, down); - position: relative; - top: 0.4em; // Aligns the arrow with the text of the button - float: #{$global-right}; - margin-#{$global-left}: get-side($button-padding, right); - display: inline-block; - } -} - -/// Adds all styles for a button. For more granular control over styles, use the individual button mixins. -/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width. -/// @param {Color} $background [$button-background] - Background color of the button. -/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color. -/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color. -/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button. -@mixin button( - $expand: false, - $background: $button-background, - $background-hover: $button-background-hover, - $color: $button-color, - $style: $button-fill -) { - @include button-base; - - @if $style == solid { - @include button-style($background, $background-hover, $color); - } - @else if $style == hollow { - @include button-hollow; - @include button-hollow-style($background); - } - - @if $expand { - @include button-expand; - } -} - -@mixin foundation-button { - .button { - @include button; - - // Sizes - &.tiny { font-size: map-get($button-sizes, tiny); } - &.small { font-size: map-get($button-sizes, small); } - &.large { font-size: map-get($button-sizes, large); } - &.expanded { @include button-expand; } - - // Colors - @each $name, $color in $foundation-colors { - @if $button-fill != hollow { - &.#{$name} { - @include button-style($color, auto); - } - } - @else { - &.#{$name} { - @include button-hollow-style($color); - } - - &.#{$name}.dropdown::after { - border-top-color: $color; - } - } - } - - // Hollow style - @if $button-fill != hollow { - &.hollow { - @include button-hollow; - @include button-hollow-style; - - @each $name, $color in $foundation-colors { - &.#{$name} { - @include button-hollow-style($color); - } - } - } - } - - // Disabled style - &.disabled { - @include button-disabled; - } - - // Dropdown arrow - &.dropdown { - @include button-dropdown; - - @if $button-fill == hollow { - &::after { - border-top-color: $button-background; - } - } - } - - // Button with dropdown arrow only - &.arrow-only::after { - margin-#{$global-left}: 0; - float: none; - top: 0.2em; - } - } -} diff --git a/css/foundation/components/_callout.scss b/css/foundation/components/_callout.scss deleted file mode 100755 index 1482956..0000000 --- a/css/foundation/components/_callout.scss +++ /dev/null @@ -1,115 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group callout -//// - -/// Defualt background color. -/// @type Color -$callout-background: $white !default; - -/// Default fade value for callout backgrounds. -/// @type Number -$callout-background-fade: 85% !default; - -/// Defualt border style for callouts. -/// @type List -$callout-border: 1px solid rgba($black, 0.25) !default; - -/// Default bottom margin for callouts. -/// @type Number -$callout-margin: 0 0 1rem 0 !default; - -/// Default inner padding for callouts. -/// @type Number -$callout-padding: 1rem !default; - -/// Default font color for callouts. -/// @type Color -$callout-font-color: $body-font-color !default; - -/// Default font color for callouts, if the callout has a dark background. -/// @type Color -$callout-font-color-alt: $body-background !default; - -/// Default border radius for callouts. -/// @type Color -$callout-radius: $global-radius !default; - -/// Amount to tint links used within colored panels. Set to `false` to disable this feature. -/// @type Number | Boolean -$callout-link-tint: 30% !default; - -/// Adds basic styles for a callout, including padding and margin. -@mixin callout-base() { - margin: $callout-margin; - padding: $callout-padding; - border: $callout-border; - border-radius: $callout-radius; - position: relative; - - // Respect the padding, fool. - > :first-child { - margin-top: 0; - } - - > :last-child { - margin-bottom: 0; - } -} - -/// Generate quick styles for a callout using a single color as a baseline. If `$callout-link-tint` is enabled, links within colored panels will be a darker version of the background. -/// @param {Color} $color [$callout-background] - Color to use. -@mixin callout-style($color: $callout-background) { - $background: scale-color($color, $lightness: $callout-background-fade); - $link-color: scale-color($color, $lightness: -$callout-link-tint); - - background-color: $background; - - @if $callout-link-tint and hue($background) > 0deg { - a { - color: $link-color; - - &:hover { - color: darken($link-color, 15%); - } - } - } -} - -@mixin callout-size($padding) { - padding-top: $padding; - padding-right: $padding; - padding-bottom: $padding; - padding-left: $padding; -} - - -/// Adds styles for a callout. -/// @param {Color} $color [$callout-background] - Color to use. -@mixin callout($color: $callout-background) { - @include callout-base; - @include callout-style($color); -} - -@mixin foundation-callout { - .callout { - @include callout; - - @each $name, $color in $foundation-colors { - &.#{$name} { - @include callout-style($color); - } - } - - &.small { - @include callout-size(.5rem); - } - - &.large { - @include callout-size(3rem); - } - } -} diff --git a/css/foundation/components/_close-button.scss b/css/foundation/components/_close-button.scss deleted file mode 100755 index 7ea8f23..0000000 --- a/css/foundation/components/_close-button.scss +++ /dev/null @@ -1,61 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group close-button -//// - -/// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`. -/// @type List -$closebutton-position: right top !default; - -/// Right (or left) offset for a close button. -/// @type Number -$closebutton-offset-horizontal: 1rem !default; - -/// Top (or bottom) offset for a close button. -/// @type Number -$closebutton-offset-vertical: 0.5rem !default; - -/// Default font size of the close button. -/// @type Number -$closebutton-size: 2em !default; - -/// The line-height of the close button. It affects the spacing of the element. -/// @type Number -$closebutton-lineheight: 1 !default; - -/// Default color of the close button. -/// @type Color -$closebutton-color: $dark-gray !default; - -/// Default color of the close button when being hovered on. -/// @type Color -$closebutton-color-hover: $black !default; - -/// Adds styles for a close button, using the styles in the settings variables. -@mixin close-button { - $x: nth($closebutton-position, 1); - $y: nth($closebutton-position, 2); - - @include disable-mouse-outline; - position: absolute; - color: $closebutton-color; - #{$x}: $closebutton-offset-horizontal; - #{$y}: $closebutton-offset-vertical; - font-size: $closebutton-size; - line-height: $closebutton-lineheight; - cursor: pointer; - - &:hover, - &:focus { - color: $closebutton-color-hover; - } -} - -@mixin foundation-close-button { - .close-button { - @include close-button; - } -} diff --git a/css/foundation/components/_drilldown.scss b/css/foundation/components/_drilldown.scss deleted file mode 100755 index 6e0f24f..0000000 --- a/css/foundation/components/_drilldown.scss +++ /dev/null @@ -1,67 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group drilldown -//// - -/// Transition property to use for animating menus. -/// @type Transition -$drilldown-transition: transform 0.15s linear !default; - -/// Adds arrows to drilldown items with submenus, as well as the back button. -/// @type Boolean -$drilldown-arrows: true !default; - -@mixin foundation-drilldown-menu { - // Applied to the Menu container - .is-drilldown { - position: relative; - overflow: hidden; - } - - // Applied to nested <ul>s - .is-drilldown-sub { - position: absolute; - top: 0; - #{$global-left}: 100%; - z-index: -1; - height: 100%; - width: 100%; - background: $white; - transition: $drilldown-transition; - - &.is-active { - z-index: 1; - display: block; - transform: translateX(if($global-text-direction == ltr, -100%, 100%)); - } - - &.is-closing { - transform: translateX(if($global-text-direction == ltr, 100%, -100%)); - } - } - - @if $drilldown-arrows { - .is-drilldown-submenu-parent > a { - position: relative; - - &::after { - @include css-triangle(6px, $primary-color, $global-right); - position: absolute; - top: 50%; - margin-top: -6px; - #{$global-right}: 1rem; - } - } - - .js-drilldown-back::before { - @include css-triangle(6px, $primary-color, $global-left); - float: $global-left; - margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text - margin-#{$global-left}: 0.6rem; // Lines the tip of the arrow with the items below - margin-top: 14px; // Aligns the arrow with the text - } - } -} diff --git a/css/foundation/components/_dropdown-menu.scss b/css/foundation/components/_dropdown-menu.scss deleted file mode 100755 index d920408..0000000 --- a/css/foundation/components/_dropdown-menu.scss +++ /dev/null @@ -1,130 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group dropdown-menu -//// - -/// Enables arrows for items with dropdown menus. -/// @type Boolean -$dropdownmenu-arrows: true !default; - -/// Minimum width of dropdown sub-menus. -/// @type Length -$dropdownmenu-min-width: 200px !default; - -/// Background color for dropdowns. -/// @type Color -$dropdownmenu-background: $white !default; - -/// Border for dropdown panes. -/// @type List -$dropdownmenu-border: 1px solid $medium-gray !default; - -@mixin foundation-dropdown-menu { - .dropdown.menu { - a { - @include disable-mouse-outline; - } - .is-dropdown-submenu-parent { - position: relative; - - a::after { - float: right; - margin-top: 3px; - margin-left: 10px; - } - - @if $dropdownmenu-arrows { - &.is-down-arrow a { - padding-right: 1.5rem; - position: relative; - } - &.is-down-arrow > a::after { - @include css-triangle(5px, $anchor-color, down); - position: absolute; - top: 12px; - right: 5px; - } - &.is-left-arrow > a::after { - @include css-triangle(5px, $anchor-color, left); - float: left; - margin-left: 0; - margin-right: 10px; - } - &.is-right-arrow > a::after { - @include css-triangle(5px, $anchor-color, right); - } - } - - &.is-left-arrow.opens-inner .submenu{ - right: 0; - left: auto; - } - &.is-right-arrow.opens-inner .submenu{ - left: 0; - right: auto; - } - &.opens-inner .submenu { - top: 100%; - } - } - - .no-js & ul { - display: none; - } - - .submenu { - display: none; - position: absolute; - top: 0; - left: 100%; - min-width: $dropdownmenu-min-width; - z-index: 1; - background: $dropdownmenu-background; - border: $dropdownmenu-border; - - > li { - width: 100%; - } - - &.first-sub { - top: 100%; - left: 0; - right: auto; - } - - &:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, - &.js-dropdown-active { - display: block; - } - } - - .is-dropdown-submenu-parent.opens-left .submenu { - left: auto; - right: 100%; - } - - &.align-right { - .submenu.first-sub { - top: 100%; - left: auto; - right: 0; - } - } - } - - .is-dropdown-menu.vertical { - width: 100px; - - &.align-right { - float: right; - } - - > li .submenu { - top: 0; - left: 100%; - } - } -} diff --git a/css/foundation/components/_dropdown.scss b/css/foundation/components/_dropdown.scss deleted file mode 100755 index 97275bd..0000000 --- a/css/foundation/components/_dropdown.scss +++ /dev/null @@ -1,64 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group dropdown -//// - -/// Padding for dropdown panes. -/// @type List -$dropdown-padding: 1rem !default; - -/// Border for dropdown panes. -/// @type List -$dropdown-border: 1px solid $medium-gray !default; - -/// Font size for dropdown panes. -/// @type List -$dropdown-font-size: 16rem !default; - -/// Width for dropdown panes. -/// @type Number -$dropdown-width: 300px !default; - -/// Border radius dropdown panes. -/// @type Number -$dropdown-radius: $global-radius !default; - -/// Sizes for dropdown panes. Each size is a CSS class you can apply. -/// @type Map -$dropdown-sizes: ( - tiny: 100px, - small: 200px, - large: 400px, -) !default; - -/// Applies styles for a basic dropdown. -@mixin dropdown-container { - background-color: $body-background; - border: $dropdown-border; - display: block; - padding: $dropdown-padding; - position: absolute; - visibility: hidden; - width: 300px; - z-index: 10; - border-radius: $dropdown-radius; - - &.is-open { - visibility: visible; - } -} - -@mixin foundation-dropdown { - .dropdown-pane { - @include dropdown-container; - } - - @each $name, $size in $dropdown-sizes { - .dropdown-pane.#{$name} { - width: $size; - } - } -} diff --git a/css/foundation/components/_flex-video.scss b/css/foundation/components/_flex-video.scss deleted file mode 100755 index 67d09ea..0000000 --- a/css/foundation/components/_flex-video.scss +++ /dev/null @@ -1,68 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group flex-video -//// - -/// Padding above a flex video container. -/// @type Number -$flexvideo-padding-top: rem-calc(25) !default; - -/// Margin below a flex video container. -/// @type Number -$flexvideo-margin-bottom: rem-calc(16) !default; - -/// Padding used to create a 4:3 aspect ratio. -/// @type Number -$flexvideo-ratio: 4 by 3 !default; - -/// Padding used to create a 16:9 aspect ratio. -/// @type Number -$flexvideo-ratio-widescreen: 16 by 9 !default; - -/// Creates a percentage height that can be used as padding in a flex video container. -/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`. -/// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a flex video container. -@function flex-video($ratio) { - $w: nth($ratio, 1); - $h: nth($ratio, 3); - @return $h / $w * 100%; -} - -/// Creates a flex video container. -/// @param {List} $ratio [$flexvideo-ratio] - Ratio to use for the container, formatted as `x by y`. -@mixin flex-video($ratio: $flexvideo-ratio) { - position: relative; - height: 0; - padding-top: $flexvideo-padding-top; - padding-bottom: flex-video($ratio); - margin-bottom: $flexvideo-margin-bottom; - overflow: hidden; - - iframe, - object, - embed, - video { - position: absolute; - top: 0; - #{$global-left}: 0; - width: 100%; - height: 100%; - } -} - -@mixin foundation-flex-video { - .flex-video { - @include flex-video; - - &.widescreen { - padding-bottom: flex-video($flexvideo-ratio-widescreen); - } - - &.vimeo { - padding-top: 0; - } - } -} diff --git a/css/foundation/components/_float.scss b/css/foundation/components/_float.scss deleted file mode 100755 index 6362920..0000000 --- a/css/foundation/components/_float.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group float -//// - -@mixin foundation-float-classes { - .float-left { - float: left !important; - } - - .float-right { - float: right !important; - } - - .float-center { - display: block; - margin-left: auto; - margin-right: auto; - } - - .clearfix { - @include clearfix; - } -} diff --git a/css/foundation/components/_label.scss b/css/foundation/components/_label.scss deleted file mode 100755 index 75d3cf5..0000000 --- a/css/foundation/components/_label.scss +++ /dev/null @@ -1,56 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group label -//// - -/// Default background color for labels. -/// @type Color -$label-background: $primary-color !default; - -/// Default text color for labels. -/// @type Color -$label-color: foreground($label-background) !default; - -/// Default font size for labels. -/// @type Number -$label-font-size: 0.8rem !default; - -/// Default padding inside labels. -/// @type Number -$label-padding: 0.33333rem 0.5rem !default; - -/// Default radius of labels. -/// @type Number -$label-radius: $global-radius !default; - -/// Generates base styles for a label. -@mixin label { - display: inline-block; - padding: $label-padding; - font-size: $label-font-size; - line-height: 1; - white-space: nowrap; - cursor: default; - border-radius: $label-radius; -} - -@mixin foundation-label { - .label { - @include label; - - background: $label-background; - color: $label-color; - - @each $name, $color in $foundation-colors { - @if $name != primary { - &.#{$name} { - background: $color; - color: foreground($color); - } - } - } - } -} diff --git a/css/foundation/components/_media-object.scss b/css/foundation/components/_media-object.scss deleted file mode 100755 index 812130c..0000000 --- a/css/foundation/components/_media-object.scss +++ /dev/null @@ -1,74 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group media-object -//// - -/// Bottom margin of a media object. -/// @type Number -$mediaobject-margin-bottom: $global-margin !default; - -/// Left and right padding on sections within a media object. -/// @type Number -$mediaobject-section-padding: $global-padding !default; - -/// With of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width. -/// @type Number -$mediaobject-image-width-stacked: 100% !default; - -/// Adds styles for a media object container. -@mixin media-object-container { - margin-bottom: $mediaobject-margin-bottom; - display: block; -} - -/// Adds styles for sections within a media object. -/// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections. -@mixin media-object-section($padding: $mediaobject-section-padding) { - display: table-cell; - vertical-align: top; - - &:first-child { - padding-#{$global-right}: $padding; - } - - &:last-child:not(+ &:first-child) { - padding-#{$global-left}: $padding; - } -} - -/// Adds styles to stack sections of a media object. Apply this to the section elements, not the container. -@mixin media-object-stack { - display: block; - padding: 0; - padding-bottom: $mediaobject-section-padding; - - img { - width: $mediaobject-image-width-stacked; - } -} - -@mixin foundation-media-object { - .media-object { - @include media-object-container; - - img { - max-width: none; - } - - &.stack-for-small .media-object-section { - @include breakpoint(small only) { - @include media-object-stack; - } - } - } - - .media-object-section { - @include media-object-section; - - &.middle { vertical-align: middle; } - &.bottom { vertical-align: bottom; } - } -} diff --git a/css/foundation/components/_menu.scss b/css/foundation/components/_menu.scss deleted file mode 100755 index 086e72c..0000000 --- a/css/foundation/components/_menu.scss +++ /dev/null @@ -1,213 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group menu -//// - -/// Margin of a menu. -/// @type Number -$menu-margin: 0 !default; - -/// Left-hand margin of a nested menu. -/// @type Number -$menu-margin-nested: 1rem !default; - -/// Padding for items in a menu. -/// @type Number -$menu-item-padding: 0.7rem 1rem !default; - -/// Spacing between an icon and text in a menu item. -/// @type Number -$menu-icon-spacing: 0.25rem !default; - -/// Maximum number of `expand-n` classes to include in the CSS. -/// @type Number -$menu-expand-max: 6 !default; - -/// Creates the base styles for a Menu. -@mixin menu-base { - margin: $menu-margin; - list-style-type: none; - - // List items are table cell to allow for vertical alignment - > li { - @include disable-mouse-outline; - display: table-cell; - vertical-align: middle; - } - - // Reset line height to make the height of the overall item easier to calculate - > li > a { - display: block; - padding: $menu-item-padding; - line-height: 1; - } - - // Reset styles of inner elements - input, - a, - button { - margin-bottom: 0; - } -} - -/// Expands the items of a Menu, so each item is the same width. -/// @param {Keyword|Number} $count [auto] - Number of items in the Menu. You can hardcode a number, or use `auto` to generate CSS that will adapt to the number of items inside the menu. -@mixin menu-expand($count: auto) { - display: table; - width: 100%; - - > li { - @if $count == auto { - @include auto-width($menu-expand-max); - } - @else if type-of($count) == 'number' { - width: percentage(1 / $count); - } - } -} - -/// Sets the direction of a Menu. -/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`. -@mixin menu-direction($dir: horizontal) { - @if $dir == horizontal { - > li { - display: table-cell; - } - } - @else if $dir == vertical { - > li { - display: block; - } - } - @else { - @warn 'The direction used for menu-direction() must be horizontal or vertical.'; - } -} - -/// Creates a simple Menu, which has no padding or hover state. -@mixin menu-simple { - a { - padding: 0; - margin-#{$global-right}: get-side($menu-item-padding, $global-right); - } -} - -/// Adds styles for a nested Menu, by adding `margin-left` to the menu. -/// @param {Keyword|Number} $padding [auto] - Length of the margin. -@mixin menu-nested($margin: $menu-margin-nested) { - margin-#{$global-left}: $margin; -} - -/// Adds support for icons to Menu items. -/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`. -/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element. -@mixin menu-icons($position: side, $base: true) { - @if $base { - > li > a { - > img, - > i { - vertical-align: middle; - } - - > span { - vertical-align: middle; - } - } - } - - @if $position == side { - > li > a { - > img, - > i { - display: inline-block; - margin-#{$global-right}: $menu-icon-spacing; - } - } - } - @else if $position == top { - > li > a { - text-align: center; - - > img, - > i { - display: block; - margin: 0 auto $menu-icon-spacing; - } - } - } -} - -@mixin menu-text { - font-weight: bold; - color: inherit; - line-height: 1; - padding-top: 0; - padding-bottom: 0; - padding: $menu-item-padding; -} - -@mixin foundation-menu { - .menu { - @include menu-base; - @include menu-icons; - - // Orientation - @include menu-direction(horizontal); - - &.vertical { - @include menu-direction(vertical); - } - - @each $size in $breakpoint-classes { - @if $size != small { - @include breakpoint($size) { - &.#{$size}-horizontal { - @include menu-direction(horizontal); - } - - &.#{$size}-vertical { - @include menu-direction(vertical); - } - } - } - } - - // Simple - &.simple { - @include menu-simple; - } - - // Align right - &.align-#{$global-right} { - > li { - float: $global-right; - } - } - - // Even-width - &.expanded { - @include menu-expand; - - > li:first-child:last-child { - width: 100%; - } - } - - // Vertical icons - &.icon-top { - @include menu-icons(top, $base: false); - } - - // Nesting - &.nested { - @include menu-nested; - } - } - - .menu-text { - @include menu-text; - } -} diff --git a/css/foundation/components/_off-canvas.scss b/css/foundation/components/_off-canvas.scss deleted file mode 100755 index cd67b85..0000000 --- a/css/foundation/components/_off-canvas.scss +++ /dev/null @@ -1,178 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group off-canvas -//// - -/// Width of an off-canvas menu. -/// @type Number -$offcanvas-size: 250px !default; - -/// Background color of an off-canvas menu. -/// @type Color -$offcanvas-background: $light-gray !default; - -/// Z-index of an off-canvas menu. -/// @type Number -$offcanvas-zindex: -1 !default; - -/// Length of the animation on an off-canvas menu. -/// @type Number -$offcanvas-transition-length: 0.5s !default; - -/// Timing function of the animation on an off-canvas menu. -/// @type Keyword -$offcanvas-transition-timing: ease !default; - -/// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen. -$offcanvas-fixed-reveal: true !default; - -/// Background color for the overlay that appears when an off-canvas menu is open. -/// @type Color -$offcanvas-exit-background: rgba($white, 0.25) !default; - -/// CSS class used for the main content area. The off-canvas mixins use this to target the page body. -$maincontent-class: 'off-canvas-content' !default; - -/// Box shadow to place under the main content area. This shadow overlaps the off-canvas menus. -/// @type Shadow -$maincontent-shadow: 0 0 10px rgba($black, 0.5) !default; - -/// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work. -@mixin off-canvas-basics { - // Extra properties needed on <html> and <body> to make off-canvas work - html, - body { - height: 100%; - } - - .off-canvas-wrapper { - width: 100%; - overflow-x: hidden; - position: relative; - backface-visibility: hidden; - -webkit-overflow-scrolling: touch; - } - - .off-canvas-wrapper-inner { - @include clearfix; - position: relative; - width: 100%; - transition: transform $offcanvas-transition-length $offcanvas-transition-timing; - } - - // Container for page content - .off-canvas-content { - min-height: 100%; - background: $body-background; - transition: transform $offcanvas-transition-length $offcanvas-transition-timing; - backface-visibility: hidden; - z-index: 1; - - @if has-value($maincontent-shadow) { - box-shadow: $maincontent-shadow; - } - } - - // Click-to-exit overlay (generated by JavaScript) - .js-off-canvas-exit { - display: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: $offcanvas-exit-background; - cursor: pointer; - transition: background $offcanvas-transition-length $offcanvas-transition-timing; - - .is-off-canvas-open & { - display: block; - } - } -} - -/// Adds basic styles for an off-canvas menu. -@mixin off-canvas-base { - @include disable-mouse-outline; - position: absolute; - background: $offcanvas-background; - z-index: $offcanvas-zindex; - max-height: 100%; - overflow-y: auto; - transform: translateX(0px); -} - -@mixin off-canvas-position( - $position: left, - $size: $offcanvas-size, - $fixed: false -) { - @if $position == left { - left: -$size; - top: 0; - width: $size; - } - @else if $position == right { - right: -$size; - top: 0; - width: $size; - } - - // Generates an open state class that matches the width of the menu - @at-root { - .is-open-#{$position} { - @if $position == left { - transform: translateX($size); - } - @else if $position == right { - transform: translateX(-$size); - } - } - } -} - -/// Adds styles that reveal an off-canvas menu. -/// @param {Keyword} $position [left] - Position of the off-canvas menu being revealed. -@mixin off-canvas-reveal( - $position: left -) { - #{$position}: 0; - z-index: auto; - - @if $offcanvas-fixed-reveal { - position: fixed; - } - - & ~ .#{$maincontent-class} { - margin-#{$position}: $offcanvas-size; - } -} - -@mixin foundation-off-canvas { - @include off-canvas-basics; - - // Off-canvas container - .off-canvas { - @include off-canvas-base; - - &.position-left { @include off-canvas-position(left); } - &.position-right { @include off-canvas-position(right); } - } - - // Reveal off-canvas menu on larger screens - @each $name, $value in $breakpoint-classes { - @if $name != small { - @include breakpoint($name) { - .position-left.reveal-for-#{$name} { - @include off-canvas-reveal(left); - } - .position-right.reveal-for-#{$name} { - @include off-canvas-reveal(right); - } - } - } - } -} diff --git a/css/foundation/components/_orbit.scss b/css/foundation/components/_orbit.scss deleted file mode 100755 index 1b763fb..0000000 --- a/css/foundation/components/_orbit.scss +++ /dev/null @@ -1,192 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group orbit -//// - -/// Default color for Orbit's bullets. -/// @type Color -$orbit-bullet-background: $medium-gray !default; - -/// Default active color for Orbit's bullets. -/// @type Color -$orbit-bullet-background-active: $dark-gray !default; - -/// Default diameter for Orbit's bullets. -/// @type Number -$orbit-bullet-diameter: 1.2rem !default; - -/// Default margin between Orbit's bullets. -/// @type Number -$orbit-bullet-margin: 0.1rem !default; - -/// Default distance from slide region for Orbit's bullets. -/// @type Number -$orbit-bullet-margin-top: 0.8rem !default; - -/// Default bottom margin from Orbit's bullets to whatever content may lurk below it. -/// @type Number -$orbit-bullet-margin-bottom: 0.8rem !default; - -/// Default background color for Orbit's caption. -/// @type Color -$orbit-caption-background: rgba($black, 0.5) !default; - -/// Default padding for Orbit's caption. -/// @type Number -$orbit-caption-padding: 1rem !default; - -/// Default background color for Orbit's controls when hovered. -/// @type Color -$orbit-control-background-hover: rgba($black, 0.5) !default; - -/// Default padding for Orbit's controls. -/// @type Number -$orbit-control-padding: 1rem !default; - -/// Default z-index for Orbit's controls. -/// @type Number -$orbit-control-zindex: 10 !default; - -/// Adds styles for the outer Orbit wrapper. These styles are used on the `.orbit` class. -@mixin orbit-wrapper { - position: relative; -} - -/// Adds styles for the inner Orbit slide container. These styles are used on the `.orbit-container` class. -@mixin orbit-container { - position: relative; - margin: 0; - overflow: hidden; - list-style: none; -} - -/// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class. -@mixin orbit-slide { - width: 100%; - max-height: 100%; - &.no-motionui { - &.is-active { - top: 0; - left: 0; - } - } -} - -@mixin orbit-figure { - margin: 0; -} - -@mixin orbit-image { - margin: 0; - width: 100%; - max-width: 100%; -} - -/// Adds styles for an orbit slide caption. These styles are used on the `.orbit-caption` class. -@mixin orbit-caption { - position: absolute; - bottom: 0; - width: 100%; - padding: $orbit-caption-padding; - margin-bottom: 0; - color: foreground($orbit-caption-background); - background-color: $orbit-caption-background; -} - -/// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS. -@mixin orbit-control { - @include disable-mouse-outline; - @include vertical-center; - z-index: $orbit-control-zindex; - padding: $orbit-control-padding; - color: $white; - - &:hover, - &:active, - &:focus { - background-color: $orbit-control-background-hover; - } -} - -/// Adds styles for the Orbit previous button. These styles are used on the `.orbit-previous` class. -@mixin orbit-previous { - #{$global-left}: 0; -} - -/// Adds styles for the Orbit next button. These styles are used on the `.orbit-next` class. -@mixin orbit-next { - #{$global-left}: auto; - #{$global-right}: 0; -} - -/// Adds styles for a container of Orbit bullets. /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-bullets` class. -@mixin orbit-bullets { - @include disable-mouse-outline; - position: relative; - margin-top: $orbit-bullet-margin-top; - margin-bottom: $orbit-bullet-margin-bottom; - text-align: center; - - button { - width: $orbit-bullet-diameter; - height: $orbit-bullet-diameter; - margin: $orbit-bullet-margin; - background-color: $orbit-bullet-background; - border-radius: 50%; - - &:hover { - background-color: $orbit-bullet-background-active; - } - - &.is-active { - background-color: $orbit-bullet-background-active; - } - } -} - -@mixin foundation-orbit { - .orbit { - @include orbit-wrapper; - } - - .orbit-container { - @include orbit-container; - } - - .orbit-slide { - @include orbit-slide; - } - - .orbit-figure { - @include orbit-figure; - } - - .orbit-image { - @include orbit-image; - } - - .orbit-caption { - @include orbit-caption; - } - - %orbit-control { - @include orbit-control; - } - - .orbit-previous { - @extend %orbit-control; - @include orbit-previous; - } - - .orbit-next { - @extend %orbit-control; - @include orbit-next; - } - - .orbit-bullets { - @include orbit-bullets; - } -} diff --git a/css/foundation/components/_pagination.scss b/css/foundation/components/_pagination.scss deleted file mode 100755 index 4d45577..0000000 --- a/css/foundation/components/_pagination.scss +++ /dev/null @@ -1,158 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group pagination -//// - -/// Font size of pagination items. -/// @type Number -$pagination-font-size: rem-calc(14) !default; - -/// Default bottom margin of the media object. -/// @type Number -$pagination-margin-bottom: $global-margin !default; - -/// Text color of pagination items. -/// @type Color -$pagination-item-color: $black !default; - -/// Padding inside of pagination items. -/// @type Number -$pagination-item-padding: rem-calc(3 10) !default; - -/// Right margin to separate pagination items. -/// @type Number -$pagination-item-spacing: rem-calc(1) !default; - -/// Default radius for pagination items. -/// @type Number -$pagination-radius: $global-radius !default; - -/// Background color of pagination items on hover. -/// @type Color -$pagination-item-background-hover: $light-gray !default; - -/// Background color of pagination item for the current page. -/// @type Color -$pagination-item-background-current: $primary-color !default; - -/// Text color of the pagination item for the current page. -/// @type Color -$pagination-item-color-current: foreground($pagination-item-background-current) !default; - -/// Text color of a disabled pagination item. -/// @type Color -$pagination-item-color-disabled: $medium-gray !default; - -/// Color of the ellipsis in a pagination menu. -/// @type Color -$pagination-ellipsis-color: $black !default; - -/// If `false`, don't display page number links on mobile, only next/previous links. -/// @type Boolean -$pagination-mobile-items: false !default; - -/// If `true`, arrows are added to the next and previous links of pagination. -/// @type Boolean -$pagination-arrows: true !default; - -/// Adds styles for a pagination container. Apply this to a `<ul>`. -@mixin pagination-container { - @include clearfix; - margin-#{$global-left}: 0; - margin-bottom: $pagination-margin-bottom; - - // List item - li { - font-size: $pagination-font-size; - margin-#{$global-right}: $pagination-item-spacing; - display: none; - border-radius: $pagination-radius; - - @if not $pagination-mobile-items { - &:last-child, - &:first-child { - display: inline-block; - } - - @include breakpoint(medium) { - display: inline-block; - } - } - } - - // Page links - a, - button { - color: $pagination-item-color; - display: block; - padding: $pagination-item-padding; - border-radius: $global-radius; - - &:hover { - background: $pagination-item-background-hover; - } - } -} - -/// Adds styles for the current pagination item. Apply this to an `<a>`. -@mixin pagination-item-current { - padding: $pagination-item-padding; - background: $pagination-item-background-current; - color: $pagination-item-color-current; - cursor: default; -} - -/// Adds styles for a disabled pagination item. Apply this to an `<a>`. -@mixin pagination-item-disabled { - padding: $pagination-item-padding; - color: $pagination-item-color-disabled; - cursor: default; - - &:hover { - background: transparent; - } -} - -/// Adds styles for an ellipsis for use in a pagination list. -@mixin pagination-ellipsis { - content: '…'; - padding: $pagination-item-padding; - color: $pagination-ellipsis-color; -} - -@mixin foundation-pagination { - .pagination { - @include pagination-container; - - .current { - @include pagination-item-current; - } - - .disabled { - @include pagination-item-disabled; - } - - .ellipsis::after { - @include pagination-ellipsis; - } - } - - @if $pagination-arrows { - .pagination-previous a::before, - .pagination-previous.disabled::before { - content: '«'; - display: inline-block; - margin-#{$global-right}: 0.5rem; - } - - .pagination-next a::after, - .pagination-next.disabled::after { - content: '»'; - display: inline-block; - margin-#{$global-left}: 0.5rem; - } - } -} diff --git a/css/foundation/components/_progress-bar.scss b/css/foundation/components/_progress-bar.scss deleted file mode 100755 index 739b614..0000000 --- a/css/foundation/components/_progress-bar.scss +++ /dev/null @@ -1,83 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group progress-bar -//// - -/// Height of a progress bar. -/// @type Number -$progress-height: 1rem !default; - -/// Background color of a progress bar. -/// @type Color -$progress-background: $medium-gray !default; - -/// Bottom margin of a progress bar. -/// @type Number -$progress-margin-bottom: $global-margin !default; - -/// Default color of a progress bar's meter. -/// @type Color -$progress-meter-background: $primary-color !default; - -/// Default radius of a progress bar. -/// @type Number -$progress-radius: $global-radius !default; - -/// Adds styles for a progress bar container. -@mixin progress-container { - background-color: $progress-background; - height: $progress-height; - margin-bottom: $progress-margin-bottom; - border-radius: $progress-radius; -} - -/// Adds styles for the inner meter of a progress bar. -@mixin progress-meter { - position: relative; - display: block; - width: 0%; - height: 100%; - background-color: $progress-meter-background; - border-radius: $global-radius; -} - -/// Adds styles for text in the progress meter. -@mixin progress-meter-text { - position: absolute; - top: 50%; - #{$global-left}: 50%; - transform: translate(-50%, -50%); - margin: 0; - font-size: 0.75rem; - font-weight: bold; - color: $white; - white-space: nowrap; -} - -@mixin foundation-progress-bar { - // Progress bar - .progress { - @include progress-container; - - @each $name, $color in $foundation-colors { - &.#{$name} { - .progress-meter { - background-color: $color; - } - } - } - } - - // Progress bar meter - .progress-meter { - @include progress-meter; - - // Progress bar meter text - .progress-meter-text { - @include progress-meter-text; - } - } -} diff --git a/css/foundation/components/_reveal.scss b/css/foundation/components/_reveal.scss deleted file mode 100755 index d17170b..0000000 --- a/css/foundation/components/_reveal.scss +++ /dev/null @@ -1,155 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group reveal -//// - -/// Default background color of a modal. -/// @type Color -$reveal-background: $white !default; - -/// Default width of a modal, with no class applied. -/// @type Number -$reveal-width: 600px !default; - -/// Default maximum width of a modal. -/// @type Number -$reveal-max-width: $global-width !default; - -/// Offset from the top of the window when a modal is added. -/// @type Number -$reveal-offset: rem-calc(100) !default; - -/// Default padding inside a modal. -/// @type Number -$reveal-padding: $global-padding !default; - -/// Default border around a modal. -/// @type Number -$reveal-border: 1px solid $medium-gray !default; - -/// Default radius for modal. -/// @type Number -$reveal-radius: $global-radius !default; - -/// z-index for modals. The overlay uses this value, while the modal itself uses this value plus one. -/// @type Number -$reveal-zindex: 1005 !default; - -/// Background color of modal overlays. -/// @type Color -$reveal-overlay-background: rgba($black, 0.45) !default; - -/// Adds styles for a modal overlay. -/// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay. -@mixin reveal-overlay { - display: none; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: $reveal-zindex; - background-color: $reveal-overlay-background; - overflow-y: scroll; -} - -/// Adds base styles for a modal. -@mixin reveal-modal-base { - @include disable-mouse-outline; - display: none; - z-index: $reveal-zindex + 1; - padding: $reveal-padding; - border: $reveal-border; - // margin: 100px auto 0 100px; - margin: 100px auto 0 auto; - background-color: $reveal-background; - border-radius: $reveal-radius; - - @include breakpoint(medium) { - min-height: 0; - } - - // Make sure rows don't have a min-width on them - .column, - .columns { - min-width: 0; - } - - // Strip margins from the last item in the modal - > :last-child { - margin-bottom: 0; - } -} - -/// Adjusts the width of a modal. -/// @param {Number} $width - Width of the modal. Generally a percentage. -/// @param {Number} $max-width [$reveal-max-width] - Maximum width of the modal. -@mixin reveal-modal-width( - $width: $reveal-width, - $max-width: $reveal-max-width -) { - @include breakpoint(medium) { - @extend %reveal-centered; - width: $width; - max-width: $reveal-max-width; - } -} - -/// Creates a full-screen modal, which stretches the full width and height of the window. -@mixin reveal-modal-fullscreen { - // scss-lint:disable DuplicateProperty - top: 0; - left: 0; - width: 100%; - height: 100%; - height: 100vh; - min-height: 100vh; - max-width: none; - margin-left: 0; -} - -@mixin foundation-reveal { - // Overlay - .reveal-overlay { - @include reveal-overlay; - } - - // Modal container - .reveal { - @include reveal-modal-base; - @include reveal-modal-width($reveal-width); - position: absolute; - overflow-y: auto; - // Remove padding - &.collapse { - padding: 0; - } - - // Placeholder selector for medium-and-up modals - // Prevents duplicate CSS when defining multiple Reveal sizes - @include breakpoint(medium) { - %reveal-centered { - left: auto; - right: auto; - margin: 0 auto; - } - } - - // Sizing classes - &.tiny { @include reveal-modal-width(30%); } - &.small { @include reveal-modal-width(50%); } - &.large { @include reveal-modal-width(90%); } - - // Full-screen mode - &.full { - @include reveal-modal-fullscreen; - } - } -} - -body.is-reveal-open { - overflow: hidden; -} diff --git a/css/foundation/components/_slider.scss b/css/foundation/components/_slider.scss deleted file mode 100755 index 3f2d7d3..0000000 --- a/css/foundation/components/_slider.scss +++ /dev/null @@ -1,158 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -// [TODO] Check how plugin confirms disabled or vertical status -// [TODO] Check if transition: all; is necessary - -//// -/// @group slider -//// - -/// Default height of the slider. -/// @type Number -$slider-height: 0.5rem !default; - -/// Default slider width of a vertical slider. -/// @type Number -$slider-width-vertical: $slider-height !default; - -/// Default background color of the slider's track. -/// @type Color -$slider-background: $light-gray !default; - -/// Default color of the active fill color of the slider. -/// @type Color -$slider-fill-background: $medium-gray !default; - -/// Default height of the handle of the slider. -/// @type Number -$slider-handle-height: 1.4rem !default; - -/// Default width of the handle of the slider. -/// @type Number -$slider-handle-width: 1.4rem !default; - -/// Default color of the handle for the slider. -/// @type Color -$slider-handle-background: $primary-color !default; - -/// Default fade amount of a disabled slider. -/// @type Number -$slider-opacity-disabled: 0.25 !default; - -/// Default radius for slider. -/// @type Number -$slider-radius: $global-radius !default; - -/// Transition properties to apply to the slider handle and fill. -/// @type Transition -$slider-transition: all 0.2s ease-in-out !default; - -/// Adds the general styles for sliders. -@mixin slider-container { - position: relative; - height: $slider-height; - margin-top: 1.25rem; - margin-bottom: 2.25rem; - background-color: $slider-background; - cursor: pointer; - user-select: none; - touch-action: none; -} - -/// Adds the general styles for active fill for sliders. -@mixin slider-fill { - position: absolute; - top: 0; - left: 0; - display: inline-block; - max-width: 100%; - height: $slider-height; - background-color: $slider-fill-background; - transition: $slider-transition; - - &.is-dragging { - transition: all 0s linear; - } -} - -/// Adds the general styles for the slider handles. -@mixin slider-handle { - @include disable-mouse-outline; - @include vertical-center; - position: absolute; - left: 0; - z-index: 1; - display: inline-block; - width: $slider-handle-width; - height: $slider-handle-height; - background-color: $slider-handle-background; - transition: $slider-transition; - touch-action: manipulation; - border-radius: $slider-radius; - - &:hover { - background-color: scale-color($slider-handle-background, $lightness: -15%); - } - - &.is-dragging { - transition: all 0s linear; - } -} - -@mixin slider-disabled { - opacity: $slider-opacity-disabled; - cursor: not-allowed; -} - -@mixin slider-vertical { - display: inline-block; - width: $slider-width-vertical; - height: 12.5rem; - margin: 0 1.25rem; - transform: scale(1, -1); - - .slider-fill { - top: 0; - width: $slider-width-vertical; - max-height: 100%; - } - - .slider-handle { - position: absolute; - top: 0; - left: 50%; - width: $slider-handle-height; - height: $slider-handle-width; - transform: translateX(-50%); - } -} - -@mixin foundation-slider { - // Container - .slider { - @include slider-container; - } - - // Fill area - .slider-fill { - @include slider-fill; - } - - // Draggable handle - .slider-handle { - @include slider-handle; - } - - // Disabled state - .slider.disabled, - .slider[disabled] { - @include slider-disabled; - } - - // Vertical slider - .slider.vertical { - @include slider-vertical; - } -} diff --git a/css/foundation/components/_sticky.scss b/css/foundation/components/_sticky.scss deleted file mode 100755 index 113e001..0000000 --- a/css/foundation/components/_sticky.scss +++ /dev/null @@ -1,38 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -@mixin foundation-sticky { - .sticky-container { - position: relative; - } - - .sticky { - position: absolute; - z-index: 0; - transform: translate3d(0,0,0); - } - - .sticky.is-stuck { - position: fixed; - z-index: 5; - - &.is-at-top { - top: 0; - } - - &.is-at-bottom { - bottom: 0; - } - } - - .sticky.is-anchored { - position: absolute; - left: auto; - right: auto; - - &.is-at-bottom { - bottom: 0; - } - } -} diff --git a/css/foundation/components/_switch.scss b/css/foundation/components/_switch.scss deleted file mode 100755 index 4a9d816..0000000 --- a/css/foundation/components/_switch.scss +++ /dev/null @@ -1,231 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group switch -//// - -/// Background color of a switch. -/// @type Color -$switch-background: $medium-gray !default; - -/// Background active color of a switch. -/// @type Color -$switch-background-active: $primary-color !default; - -/// Height of a switch, with no class applied. -/// @type Number -$switch-height: 2rem !default; - -/// Height of a switch with .tiny class. -/// @type Number -$switch-height-tiny: 1.5rem !default; - -/// Height of a switch with .small class. -/// @type Number -$switch-height-small: 1.75rem !default; - -/// Height of a switch with .large class. -/// @type Number -$switch-height-large: 2.5rem !default; - -/// Border radius of the switch -/// @type Number -$switch-radius: $global-radius !default; - -/// border around a modal. -/// @type Number -$switch-margin: $global-margin !default; - -/// Background color for the switch container and paddle. -/// @type Color -$switch-paddle-background: $white !default; - -/// Spacing between a switch paddle and the edge of the body. -/// @type Number -$switch-paddle-offset: 0.25rem !default; - -/// border radius of the switch paddle -/// @type Number -$switch-paddle-radius: $global-radius !default; - -/// switch transition. -/// @type Number -$switch-paddle-transition: all 0.25s ease-out !default; - -// make them variables -// ask about accessibility on label -// change class name for text - -/// Adds styles for a switch container. Apply this to a container class. -@mixin switch-container { - margin-bottom: $switch-margin; - outline: 0; - position: relative; - user-select: none; - - // These properties cascade down to the switch text - color: $white; - font-weight: bold; - font-size: rem-calc(14); -} - -/// Adds styles for a switch input. Apply this to an `<input>` within a switch. -@mixin switch-input { - opacity: 0; - position: absolute; -} - -/// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch. -@mixin switch-paddle { - background: $switch-background; - cursor: pointer; - display: block; - position: relative; - width: 4rem; - height: $switch-height; - transition: $switch-paddle-transition; - border-radius: $switch-radius; - - // Resetting these <label> presets so type styles cascade down - color: inherit; - font-weight: inherit; - - // Needed to override specificity - input + & { - margin: 0; - } - - // The paddle itself - &::after { - background: $switch-paddle-background; - content: ''; - display: block; - position: absolute; - height: 1.5rem; - #{$global-left}: 0.25rem; - top: 0.25rem; - width: 1.5rem; - transition: $switch-paddle-transition; - transform: translate3d(0, 0, 0); - } - - // Change the visual style when the switch is active - input:checked ~ & { - background: $switch-background-active; - - &::after { - #{$global-left}: 2.25rem; - } - } - - input:focus ~ & { - @include disable-mouse-outline; - } -} - -/// Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch `<label>`. -@mixin switch-text { - position: absolute; - top: 50%; - transform: translateY(-50%); -} - -/// Adds styles for the active state text within a switch. -@mixin switch-text-active { - #{$global-left}: 8%; - display: none; - - input:checked + label > & { - display: block; - } -} - -/// Adds styles for the inactive state text within a switch. -@mixin switch-text-inactive { - #{$global-right}: 15%; - - input:checked + label > & { - display: none; - } -} - -/// Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container. -/// @param {Number} $font-size [1rem] - Font size of label text within the switch. -/// @param {Number} $width [4rem] - Width of the switch body. -/// @param {Number} $height [2rem] - Height of the switch body. -/// @param {Number} $paddle-width [1.5rem] - Width of the switch paddle. -/// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body. -@mixin switch-size( - $font-size: 1rem, - $width: 4rem, - $height: 2rem, - $paddle-width: 1.5rem, - $paddle-offset: 0.25rem -) { - $paddle-height: $height - ($paddle-offset * 2); - $paddle-left-active: $width - $paddle-width - $paddle-offset; - - .switch-paddle { - width: $width; - height: $height; - font-size: $font-size; - } - - .switch-paddle::after { - width: $paddle-width; - height: $paddle-height; - } - - input:checked ~ .switch-paddle:after { - #{$global-left}: $paddle-left-active; - } -} - -@mixin foundation-switch { - // Container class - .switch { - @include switch-container; - } - - // <input> element - .switch-input { - @include switch-input; - } - - // <label> element - .switch-paddle { - @include switch-paddle; - } - - // Base label text styles - %switch-text { - @include switch-text; - } - - // Active label text styles - .switch-active { - @extend %switch-text; - @include switch-text-active; - } - - // Inactive label text styles - .switch-inactive { - @extend %switch-text; - @include switch-text-inactive; - } - - // Switch sizes - .switch.tiny { - @include switch-size(rem-calc(10), 3rem, $switch-height-tiny, 1rem, $switch-paddle-offset); - } - - .switch.small { - @include switch-size(rem-calc(12), 3.5rem, $switch-height-small, 1.25rem, $switch-paddle-offset); - } - - .switch.large { - @include switch-size(rem-calc(16), 5rem, $switch-height-large, 2rem, $switch-paddle-offset); - } -} diff --git a/css/foundation/components/_table.scss b/css/foundation/components/_table.scss deleted file mode 100755 index 155c725..0000000 --- a/css/foundation/components/_table.scss +++ /dev/null @@ -1,212 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -// scss-lint:disable MergeableSelector, QualifyingElement - -//// -/// @group table -//// - -/// Defualt color for table background. -/// @type Color -$table-background: $white !default; - -/// Defualt scale for darkening the striped table rows and the table border. -/// @type Number -$table-color-scale: 5% !default; - -/// Defualt style for table border. -/// @type List -$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default; - -/// Defualt padding for table. -/// @type Number -$table-padding: rem-calc(8 10 10) !default; - -/// Defualt scale for darkening the table rows on hover. -/// @type Number -$table-hover-scale: 2% !default; - -/// Defualt color of standard rows on hover. -/// @type List -$table-row-hover: darken($table-background, $table-hover-scale) !default; - -/// Defualt color of striped rows on hover. -/// @type List -$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default; - -/// Defualt background color for striped rows. -/// @type Color -$table-striped-background: smart-scale($table-background, $table-color-scale) !default; - -/// Defualt value for showing the stripe on rows of the tables, excluding the header and footer If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or anyother value, the table rows will have no striping. -/// @type Keyoword -$table-stripe: even !default; - -/// Defualt color for header background. -/// @type Color -$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default; - -/// Defualt color for footer background. -/// @type Color -$table-foot-background: smart-scale($table-background, $table-color-scale) !default; - -/// Defualt font color for header. -/// @type Color -$table-head-font-color: $body-font-color !default; - -/// Defualt value for showing the header when using stacked tables. -/// @type Boolean -$show-header-for-stacked: false !default; - -/// Adds the general styles for tables. -/// @param {Keyword} $stripe [$table-stripe] - Uses kewords even, odd, or none to darken rows of the table. The defualt value is even. -@mixin table($stripe: $table-stripe) { - margin-bottom: $global-margin; - border-radius: $global-radius; - - @at-root { - thead, - tbody, - tfoot { - border: $table-border; - background-color: $table-background; - } - - // Caption - caption { - font-weight: $global-weight-bold; - padding: $table-padding; - } - - // Table head and foot - thead, - tfoot { - background: $table-head-background; - color: $table-head-font-color; - - // Rows within head and foot - tr { - background: transparent; - } - - // Cells within head and foot - th, - td { - padding: $table-padding; - font-weight: $global-weight-bold; - text-align: #{$global-left}; - } - } - - // Table rows - tbody { - tr { - // If stripe is set to even, darken the even rows. - @if $stripe == even { - &:nth-child(even) { - background-color: $table-striped-background; - } - } - - // If stripe is set to odd, darken the odd rows. - @else if $stripe == odd { - &:nth-child(odd) { - background-color: $table-striped-background; - } - } - } - - th, - td { - padding: $table-padding; - } - } - } -} - -/// Adds the ability to horizontally scroll the table when the content overflows horizontally. -@mixin table-scroll { - display: block; - width: 100%; - overflow-y: scroll; -} - -/// Slightly darkens the table rows on hover. -@mixin table-hover { - tr { - //Darkens the non-striped table rows on hover. - &:hover { - background-color: $table-row-hover; - } - - //Darkens the even striped table rows. - @if($table-stripe == even) { - &:nth-of-type(even):hover { - background-color: $table-row-stripe-hover; - } - } - - //Darkens the odd striped table rows. - @elseif($table-stripe == odd) { - &:nth-of-type(odd):hover { - background-color: $table-row-stripe-hover; - } - } - } -} - -/// Adds styles for a stacked table. Useful for small-screen layouts. -/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked. -@mixin table-stack($header: $show-header-for-stacked) { - @if $header { - thead { - th:first-child { - display: block; - } - - th { - display: none; - } - } - } @else { - thead { - display: none; - } - } - - tfoot { - display: none; - } - - tr, - th, - td { - display: block; - } - - td { - border-top: 0; - } -} - -@mixin foundation-table { - table { - @include table; - } - - table.stack { - @include breakpoint(medium down) { - @include table-stack; - } - } - - table.scroll { - @include table-scroll; - } - - table.hover { - @include table-hover; - } -} diff --git a/css/foundation/components/_tabs.scss b/css/foundation/components/_tabs.scss deleted file mode 100755 index 9a73704..0000000 --- a/css/foundation/components/_tabs.scss +++ /dev/null @@ -1,137 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group tabs -//// - -/// Default margin of the tab bar. -/// @type Number -$tab-margin: 0 !default; - -/// Default background color of a tab bar. -/// @type Color -$tab-background: $white !default; - -/// active background color of a tab bar. -/// @type Color -$tab-background-active: $light-gray !default; - -/// Default border color of tab content. -/// @type Color -$tab-border: $light-gray !default; - -/// Default text color for items in a Menu. -/// @type Color -$tab-item-color: foreground($tab-background, $primary-color) !default; - -/// Default background color on hover for items in a Menu. -$tab-item-background-hover: $white !default; - -/// Default padding of a a tab item. -/// @type Number -$tab-item-padding: 1.25rem 1.5rem !default; - -/// Maximum number of `expand-n` classes to include in the CSS. -/// @type Number -$tab-expand-max: 6 !default; - -/// Default background color of tab content. -/// @type Color -$tab-content-background: $white !default; - -/// Default border color of tab content. -/// @type Color -$tab-content-border: $light-gray !default; - -/// Default text color of tab content. -/// @type Color -$tab-content-color: foreground($tab-background, $primary-color) !default; - -/// Default padding for tab content. -/// @type Number | List -$tab-content-padding: 1rem !default; - -@mixin foundation-tabs { - .tabs { - @include clearfix; - margin: $tab-margin; - list-style-type: none; - background: $tab-background; - border: 1px solid $tab-content-border; - - // Simple - &.simple { - > li > a { - padding: 0; - - &:hover { - background: transparent; - } - } - } - - // Vertical - &.vertical { - > li { - width: auto; - float: none; - display: block; - } - } - - // Primary color - &.primary { - background: $primary-color; - - > li > a { - color: foreground($primary-color); - - &:hover, - &:focus { - background: smart-scale($primary-color); - } - } - } - } - - .tabs-title { - float: #{$global-left}; - - > a { - display: block; - padding: $tab-item-padding; - line-height: 1; - font-size: 12px; - color: $tab-item-color; - - &:hover, - &:focus, - &[aria-selected='true'] { - background: $tab-background-active; - } - } - } - - .tabs-content { - background: $tab-content-background; - transition: all 0.5s ease; - border: 1px solid $tab-content-border; - border-top: 0; - - &.vertical { - border: 1px solid $tab-content-border; - border-#{$global-left}: 0; - } - } - - .tabs-panel { - display: none; - padding: $tab-content-padding; - - &.is-active { - display: block; - } - } -} diff --git a/css/foundation/components/_thumbnail.scss b/css/foundation/components/_thumbnail.scss deleted file mode 100755 index d6b12d5..0000000 --- a/css/foundation/components/_thumbnail.scss +++ /dev/null @@ -1,54 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group thumbnail -//// - -/// Border around thumbnail images. -/// @type Border -$thumbnail-border: solid 4px $white !default; - -/// Bottom margin for thumbnail images. -/// @type Length -$thumbnail-margin-bottom: $global-margin !default; - -/// Box shadow under thumbnail images. -/// @type Shadow -$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default; - -/// Box shadow under thumbnail images. -/// @type Shadow -$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default; - -/// Transition proprties for thumbnail images. -/// @type Transition -$thumbnail-transition: box-shadow 200ms ease-out !default; - -/// Default radius for thumbnail images. -/// @type Number -$thumbnail-radius: $global-radius !default; - -/// Adds thumbnail styles to an element. -@mixin thumbnail { - border: $thumbnail-border; - box-shadow: $thumbnail-shadow; - display: inline-block; - line-height: 0; - max-width: 100%; - transition: $thumbnail-transition; - border-radius: $thumbnail-radius; - margin-bottom: $thumbnail-margin-bottom; - - &:hover, - &:focus { - box-shadow: $thumbnail-shadow-hover; - } -} - -@mixin foundation-thumbnail { - .thumbnail { - @include thumbnail; - } -} diff --git a/css/foundation/components/_title-bar.scss b/css/foundation/components/_title-bar.scss deleted file mode 100755 index 524b433..0000000 --- a/css/foundation/components/_title-bar.scss +++ /dev/null @@ -1,44 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group title-bar -//// - -@mixin foundation-title-bar { - .title-bar { - @include clearfix; - background: $black; - color: $white; - padding: 0.5rem; - - .menu-icon { - margin-#{$global-left}: 0.25rem; - margin-#{$global-right}: 0.5rem; - } - } - - .title-bar-left { - float: left; - } - - .title-bar-right { - float: right; - text-align: right; - } - - .title-bar-title { - font-weight: bold; - vertical-align: middle; - display: inline-block; - } - - .menu-icon { - @include hamburger($color: white, $color-hover: $medium-gray); - } - - .menu-icon.dark { - @include hamburger; - } -} diff --git a/css/foundation/components/_tooltip.scss b/css/foundation/components/_tooltip.scss deleted file mode 100755 index a28c3e6..0000000 --- a/css/foundation/components/_tooltip.scss +++ /dev/null @@ -1,100 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group tooltip -//// - -/// Default color of the tooltip background. -/// @type Color -$tooltip-background-color: $black !default; - -/// Default color of the tooltip font. -/// @type Color -$tooltip-color: $white !default; - -/// Default padding of the tooltip background. -/// @type Number -$tooltip-padding: 0.75rem !default; - -/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy. -/// @type Number -$tooltip-font-size: $small-font-size !default; - -/// Default pip width for tooltips. -/// @type Number -$tooltip-pip-width: 0.75rem !default; - -/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word. -/// @type Number -$tooltip-pip-height: $tooltip-pip-width * 0.866 !default; - -/// Default pip offset for tooltips. This controls how far the pip is indented from the left edge of the tooltip. -/// @type Number -$tooltip-pip-offset: 1.25rem !default; - -/// Default radius for tooltips. -/// @type Number -$tooltip-radius: $global-radius !default; - -@mixin has-tip { - border-bottom: dotted 1px $dark-gray; - font-weight: bold; - position: relative; - display: inline-block; - cursor: help; -} - -@mixin tooltip { - background-color: $tooltip-background-color; - color: $tooltip-color; - font-size: $tooltip-font-size; - padding: $tooltip-padding; - position: absolute; - z-index: 10; - top: calc(100% + #{$tooltip-pip-height}); - max-width: 10rem !important; - border-radius: $tooltip-radius; - - &::before { - @include css-triangle($tooltip-pip-width, $tooltip-background-color, up); - bottom: 100%; - position: absolute; - left: 50%; - transform: translateX(-50%); - } - - &.top::before { - @include css-triangle($tooltip-pip-width, $tooltip-background-color, down); - top: 100%; - bottom: auto; - } - - &.left::before { - @include css-triangle($tooltip-pip-width, $tooltip-background-color, right); - bottom: auto; - left: 100%; - top: 50%; - transform: translateY(-50%); - } - - &.right::before { - @include css-triangle($tooltip-pip-width, $tooltip-background-color, left); - bottom: auto; - left: auto; - right: 100%; - top: 50%; - transform: translateY(-50%); - } -} - -@mixin foundation-tooltip { - .has-tip { - @include has-tip; - } - - .tooltip { - @include tooltip; - } -} diff --git a/css/foundation/components/_top-bar.scss b/css/foundation/components/_top-bar.scss deleted file mode 100755 index 09c92f3..0000000 --- a/css/foundation/components/_top-bar.scss +++ /dev/null @@ -1,57 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group top-bar -//// - -/// Padding for the top bar. -/// @type Number -$topbar-padding: 0.5rem !default; - -/// Background color for the top bar. This color also cascades to menus within the top bar. -/// @type Color -$topbar-background: #eee !default; - -/// Color for links inside a top bar menu. -/// @type Color -$topbar-link-color: #fff !default; - -/// Width of `<input>` elements inside the top bar. -/// @type Number -$topbar-input-width: 200px !default; - -/// Adds styles for a top bar container. -@mixin top-bar-container { - @include clearfix; - padding: $topbar-padding; - - &, ul { - background-color: $topbar-background; - } - - input { - width: $topbar-input-width; - margin-#{$global-right}: 1rem; - } -} - -@mixin foundation-top-bar { - // Top bar container - .top-bar { - @include top-bar-container; - } - - // Sub-sections - // Stack on small screens - @include breakpoint(medium) { - .top-bar-left { - float: left; - } - - .top-bar-right { - float: right - } - } -} diff --git a/css/foundation/components/_visibility.scss b/css/foundation/components/_visibility.scss deleted file mode 100755 index 2c191a7..0000000 --- a/css/foundation/components/_visibility.scss +++ /dev/null @@ -1,131 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -/// Hide an element by default, only displaying it above a certain screen size. -/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** -@mixin show-for($size) { - $size: map-get($breakpoints, $size); - $size: -zf-bp-to-em($size) - (1/16); - - @include breakpoint($size down) { - display: none !important; - } -} - -/// Hide an element by default, only displaying it within a certain breakpoint. -/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** -@mixin show-for-only($size) { - $lower-bound-size: map-get($breakpoints, $size); - $upper-bound-size: -zf-map-next($breakpoints, $size); - - // more often than not this will be correct, just one time round the loop it won't so set in scope here - $lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16); - // test actual lower-bound-size, if 0 set it to 0em - @if $lower-bound-size == 0 { - $lower-bound: -zf-bp-to-em($lower-bound-size); - } - - @if $upper-bound-size == null { - @media screen and (max-width: $lower-bound) { - display: none !important; - } - } - @else { - $upper-bound: -zf-bp-to-em($upper-bound-size); - @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) { - display: none !important; - } - } -} - - -/// Show an element by default, and hide it above a certain screen size. -/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** -@mixin hide-for($size) { - @include breakpoint($size) { - display: none !important; - } -} - -/// Show an element by default, and hide it above a certain screen size. -/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** -@mixin hide-for-only($size) { - @include breakpoint($size only) { - display: none !important; - } -} - -@mixin foundation-visibility-classes { - // Basic hiding classes - .hide { - display: none !important; - } - - .invisible { - visibility: hidden; - } - - // Responsive visibility classes - @each $size in $breakpoint-classes { - @if $size != small { - .hide-for-#{$size} { - @include hide-for($size); - } - - .show-for-#{$size} { - @include show-for($size); - } - } - - .hide-for-#{$size}-only { - @include hide-for-only($size); - } - - .show-for-#{$size}-only { - @include show-for-only($size); - } - } - - // Screen reader visibility classes - // Need a “hide-for-sr†class? Add aria-hidden='true' to the element - .show-for-sr, - .show-on-focus { - @include element-invisible; - } - - // Only display the element when it's focused - .show-on-focus { - &:active, - &:focus { - @include element-invisible-off; - } - } - - // Landscape and portrait visibility - .show-for-landscape, - .hide-for-portrait { - display: block !important; - - @include breakpoint(landscape) { - display: block !important; - } - - @include breakpoint(portrait) { - display: none !important; - } - } - - .hide-for-landscape, - .show-for-portrait { - display: none !important; - - @include breakpoint(landscape) { - display: none !important; - } - - @include breakpoint(portrait) { - display: block !important; - } - } -} diff --git a/css/foundation/forms/_checkbox.scss b/css/foundation/forms/_checkbox.scss deleted file mode 100755 index 3bb4339..0000000 --- a/css/foundation/forms/_checkbox.scss +++ /dev/null @@ -1,36 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group forms -//// - -@mixin foundation-form-checkbox { - [type='file'], - [type='checkbox'], - [type='radio'] { - margin: 0 0 $form-spacing; - } - - // Styles for input/label siblings - [type='checkbox'] + label, - [type='radio'] + label { - display: inline-block; - margin-#{$global-left}: $form-spacing * 0.5; - margin-#{$global-right}: $form-spacing; - margin-bottom: 0; - vertical-align: baseline; - } - - // Styles for inputs inside labels - label > [type='checkbox'], - label > [type='label'] { - margin-#{$global-right}: $form-spacing * 0.5; - } - - // Normalize file input width - [type='file'] { - width: 100%; - } -} diff --git a/css/foundation/forms/_error.scss b/css/foundation/forms/_error.scss deleted file mode 100755 index 9e52b6e..0000000 --- a/css/foundation/forms/_error.scss +++ /dev/null @@ -1,82 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group abide -//// - -/// Sets if error styles should be added to inputs. -/// @type Boolean -$abide-inputs: true !default; - -/// Sets if error styles should be added to labels. -/// @type Boolean -$abide-labels: true !default; - -/// Background color to use for invalid text inputs. -/// @type Color -$input-background-invalid: $alert-color !default; - -/// Color to use for labels of invalid inputs. -/// @type Color -$form-label-color-invalid: $alert-color !default; - -/// Default font color for form error text. -/// @type Color -$input-error-color: $alert-color !default; - -/// Default font size for form error text. -/// @type Number -$input-error-font-size: rem-calc(12) !default; - -/// Default font weight for form error text. -/// @type Keyword -$input-error-font-weight: $global-weight-bold !default; - -/// Styles the background and border of an input field to have an error state. -/// -/// @param {Color} $background [$alert-color] - Color to use for the background and border. -@mixin form-input-error( - $background: $alert-color -) { - &:not(:focus) { - background-color: rgba($background, 0.1); - border-color: $background; - } -} - -/// Adds error styles to a form element, using the values in the settings file. -@mixin form-error { - display: none; - margin-top: $form-spacing * -0.5; - margin-bottom: $form-spacing; - font-size: $input-error-font-size; - font-weight: $input-error-font-weight; - color: $input-error-color; -} - -@mixin foundation-form-error { - @if $abide-inputs { - // Error class for invalid inputs - .is-invalid-input { - @include form-input-error; - } - } - - @if $abide-labels { - // Error class for labels of invalid outputs - .is-invalid-label { - color: $form-label-color-invalid; - } - } - - // Form error element - .form-error { - @include form-error; - - &.is-visible { - display: block; - } - } -} diff --git a/css/foundation/forms/_fieldset.scss b/css/foundation/forms/_fieldset.scss deleted file mode 100755 index 27ea801..0000000 --- a/css/foundation/forms/_fieldset.scss +++ /dev/null @@ -1,53 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group forms -//// - -/// Default border around custom fieldsets. -/// @type Border -$fieldset-border: 1px solid $medium-gray !default; - -/// Default padding inside custom fieldsets. -/// @type Number -$fieldset-padding: rem-calc(20) !default; - -/// Default margin around custom fieldsets. -/// @type Number -$fieldset-margin: rem-calc(18 0) !default; - -/// Default padding between the legend text and fieldset border. -/// @type Number -$legend-padding: rem-calc(0 3) !default; - -@mixin fieldset { - border: $fieldset-border; - padding: $fieldset-padding; - margin: $fieldset-margin; - - legend { - // Covers up the fieldset's border to create artificial padding - background: $body-background; - padding: $legend-padding; - margin: 0; - margin-#{$global-left}: rem-calc(-3); - } -} - -@mixin foundation-form-fieldset { - fieldset { - border: 0; - padding: 0; - margin: 0; - } - - legend { - margin-bottom: $form-spacing * 0.5; - } - - .fieldset { - @include fieldset; - } -} diff --git a/css/foundation/forms/_forms.scss b/css/foundation/forms/_forms.scss deleted file mode 100755 index 0d9aa97..0000000 --- a/css/foundation/forms/_forms.scss +++ /dev/null @@ -1,32 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group forms -//// - -/// Global spacing for form elements. -/// @type Number -$form-spacing: rem-calc(16) !default; - -@import - 'text', - 'checkbox', - 'label', - 'help-text', - 'input-group', - 'fieldset', - 'select', - 'error'; - -@mixin foundation-forms { - @include foundation-form-text; - @include foundation-form-checkbox; - @include foundation-form-label; - @include foundation-form-helptext; - @include foundation-form-prepostfix; - @include foundation-form-fieldset; - @include foundation-form-select; - @include foundation-form-error; -} diff --git a/css/foundation/forms/_help-text.scss b/css/foundation/forms/_help-text.scss deleted file mode 100755 index b0315ab..0000000 --- a/css/foundation/forms/_help-text.scss +++ /dev/null @@ -1,30 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group forms -//// - -/// Default color for help text. -/// @type Color -$helptext-color: #333 !default; - -/// Default font size for help text. -/// @type Number -$helptext-font-size: rem-calc(13) !default; - -/// Default font style for help text. -/// @type Keyword -$helptext-font-style: italic !default; - -@mixin foundation-form-helptext { - .help-text { - $margin-top: ($form-spacing * 0.5) * -1; - - margin-top: $margin-top; - font-size: $helptext-font-size; - font-style: $helptext-font-style; - color: $helptext-color; - } -} diff --git a/css/foundation/forms/_input-group.scss b/css/foundation/forms/_input-group.scss deleted file mode 100755 index 4ba26c7..0000000 --- a/css/foundation/forms/_input-group.scss +++ /dev/null @@ -1,70 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group forms -//// - -/// Color of labels prefixed to an input. -/// @type Color -$input-prefix-color: $black !default; - -/// Background color of labels prefixed to an input. -/// @type Color -$input-prefix-background: $light-gray !default; - -/// Border around labels prefixed to an input. -/// @type Border -$input-prefix-border: 1px solid $medium-gray !default; - -/// Left/right padding of an pre/postfixed input label -$input-prefix-padding: 1rem !default; - -@mixin foundation-form-prepostfix { - .input-group { - display: table; - width: 100%; - margin-bottom: $form-spacing; - } - - %input-group-child { - display: table-cell; - margin: 0; - vertical-align: middle; - } - - .input-group-label { - @extend %input-group-child; - text-align: center; - width: 1%; - height: 100%; - padding: 0 $input-prefix-padding; - background: $input-prefix-background; - color: $input-prefix-color; - border: $input-prefix-border; - - @if has-value($input-prefix-border) { - &:first-child { - border-#{$global-right}: 0; - } - - &:last-child { - border-#{$global-left}: 0; - } - } - } - - .input-group-field { - @extend %input-group-child; - } - - .input-group-button { - @extend %input-group-child; - height: 100%; - padding-top: 0; - padding-bottom: 0; - text-align: center; - width: 1%; - } -} diff --git a/css/foundation/forms/_label.scss b/css/foundation/forms/_label.scss deleted file mode 100755 index ef44a52..0000000 --- a/css/foundation/forms/_label.scss +++ /dev/null @@ -1,48 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group forms -//// - -/// Color for form labels. -/// @type Color -$form-label-color: $black !default; - -/// Font size for form labels. -/// @type Number -$form-label-font-size: rem-calc(14) !default; - -/// Font weight for form labels. -/// @type Keyword -$form-label-font-weight: $global-weight-normal !default; - -/// Line height for form labels. The higher the number, the more space between the label and its input field. -/// @type Number -$form-label-line-height: 1.8 !default; - -@mixin form-label { - display: block; - margin: 0; - font-size: $form-label-font-size; - font-weight: $form-label-font-weight; - line-height: $form-label-line-height; - color: $form-label-color; -} - -@mixin form-label-middle { - $input-border-width: get-border-value($input-border, width); - margin: 0 0 $form-spacing; - padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0; -} - -@mixin foundation-form-label { - label { - @include form-label; - - &.middle { - @include form-label-middle; - } - } -} diff --git a/css/foundation/forms/_select.scss b/css/foundation/forms/_select.scss deleted file mode 100755 index c23915a..0000000 --- a/css/foundation/forms/_select.scss +++ /dev/null @@ -1,64 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group forms -//// - -/// Background color for select menus. -/// @type Color -$select-background: #fafafa !default; - -/// Color of the dropdown triangle inside select menus. Set to `transparent` to remove it entirely. -/// @type Color -$select-triangle-color: #333 !default; - -/// Default radius for select menus. -/// @type Color -$select-radius: $global-radius !default; - -@mixin form-select { - $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); - - height: $height; - padding: ($form-spacing / 2); - border: $input-border; - border-radius: $global-radius; - margin: 0 0 $form-spacing; - font-size: $input-font-size; - font-family: $input-font-family; - line-height: normal; - color: $input-color; - background-color: $select-background; - border-radius: $select-radius; - -webkit-appearance: none; - -moz-appearance: none; - - @if $select-triangle-color != transparent { - @include background-triangle($select-triangle-color); - background-size: 9px 6px; - background-position: $global-right ($form-spacing / 2) center; - background-repeat: no-repeat; - } - // Disabled state - &:disabled { - background-color: $input-background-disabled; - cursor: $input-cursor-disabled; - } - - // Hide the dropdown arrow shown in newer IE versions - &::-ms-expand { - display: none; - } - - &[multiple] { - height: auto; - } -} - -@mixin foundation-form-select { - select { - @include form-select; - } -} diff --git a/css/foundation/forms/_text.scss b/css/foundation/forms/_text.scss deleted file mode 100755 index 8a2a1da..0000000 --- a/css/foundation/forms/_text.scss +++ /dev/null @@ -1,153 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group forms -//// - -/// Font color of text inputs. -/// @type Color -$input-color: $dark-gray !default; - -/// Font family of text inputs. -/// @type Font -$input-font-family: inherit !default; - -/// Font size of text inputs. -/// @type Number -$input-font-size: rem-calc(16) !default; - -/// Background color of text inputs. -/// @type Color -$input-background: $white !default; - -/// Background color of focused of text inputs. -/// @type Color -$input-background-focus: $white !default; - -/// Background color of disabled text inputs. -/// @type Color -$input-background-disabled: $light-gray !default; - -/// Border around text inputs. -/// @type Border -$input-border: 1px solid $medium-gray !default; - -/// Border around focused text inputs. -/// @type Color -$input-border-focus: 1px solid $dark-gray !default; - -/// Box shadow inside text inputs when not focused. -/// @type Shadow -$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default; - -/// Box shadow outside text inputs when focused. -/// @type Shadow -$input-shadow-focus: 0 0 5px $medium-gray !default; - -/// Cursor to use when hovering over a disabled text input. -/// @type Cursor -$input-cursor-disabled: default !default; - -/// Properties to transition on text inputs. -/// @type Transition -$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out !default; - -/// Enables the up/down buttons that Chrome and Firefox add to `<input type='number'>` elements. -/// @type Boolean -$input-number-spinners: true !default; - -/// Radius for text inputs. -/// @type Border -$input-radius: $global-radius !default; - -@mixin form-element { - $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); - - display: block; - box-sizing: border-box; - width: 100%; - height: $height; - padding: $form-spacing / 2; - border: $input-border; - margin: 0 0 $form-spacing; - - font-family: $input-font-family; - font-size: $input-font-size; - color: $input-color; - background-color: $input-background; - box-shadow: $input-shadow; - border-radius: $input-radius; - - @if has-value($input-transition) { - transition: $input-transition; - } - - // Focus state - &:focus { - border: $input-border-focus; - background: $input-background-focus; - outline: none; - box-shadow: $input-shadow-focus; - - @if has-value($input-transition) { - transition: $input-transition; - } - } -} - -@mixin foundation-form-text { - // Text inputs - #{text-inputs()}, - textarea { - @include form-element; - -webkit-appearance: none; - -moz-appearance: none; - } - - // Text areas - textarea { - max-width: 100%; - - &[rows] { - height: auto; - } - } - - // Disabled/readonly state - input, - textarea { - &:disabled, - &[readonly] { - background-color: $input-background-disabled; - cursor: $input-cursor-disabled; - } - } - - // Reset styles on button-like inputs - [type='submit'], - [type='button'] { - border-radius: $global-radius; - -webkit-appearance: none; - -moz-appearance: none; - } - - // Reset Normalize setting content-box to search elements - input[type='search'] { - box-sizing: border-box; - } - - // Number input styles - [type='number'] { - @if not $input-number-spinners { - -moz-appearance: textfield; - - [type='number']::-webkit-inner-spin-button, - [type='number']::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } - } - } -} diff --git a/css/foundation/foundation.scss b/css/foundation/foundation.scss deleted file mode 100755 index db06691..0000000 --- a/css/foundation/foundation.scss +++ /dev/null @@ -1,86 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -// Third-party libraries -@import 'vendor/normalize'; - -// Sass utilities -@import 'util/util'; - -// Global variables and styles -@import 'global'; - -// Components -@import 'grid/grid'; -@import 'typography/typography'; -@import 'forms/forms'; -@import 'components/visibility'; -@import 'components/float'; -@import 'components/button'; -@import 'components/button-group'; -@import 'components/accordion-menu'; -@import 'components/accordion'; -@import 'components/badge'; -@import 'components/breadcrumbs'; -@import 'components/callout'; -@import 'components/close-button'; -@import 'components/drilldown'; -@import 'components/dropdown-menu'; -@import 'components/dropdown'; -@import 'components/flex-video'; -@import 'components/label'; -@import 'components/media-object'; -@import 'components/menu'; -@import 'components/off-canvas'; -@import 'components/orbit'; -@import 'components/pagination'; -@import 'components/progress-bar'; -@import 'components/reveal'; -@import 'components/slider'; -@import 'components/sticky'; -@import 'components/switch'; -@import 'components/table'; -@import 'components/tabs'; -@import 'components/title-bar'; -@import 'components/top-bar'; -@import 'components/thumbnail'; -@import 'components/tooltip'; - -@mixin foundation-everything { - @include foundation-global-styles; - @include foundation-grid; - @include foundation-typography; - @include foundation-button; - @include foundation-forms; - @include foundation-visibility-classes; - @include foundation-float-classes; - @include foundation-accordion; - @include foundation-accordion-menu; - @include foundation-badge; - @include foundation-breadcrumbs; - @include foundation-button-group; - @include foundation-callout; - @include foundation-close-button; - @include foundation-drilldown-menu; - @include foundation-dropdown; - @include foundation-dropdown-menu; - @include foundation-flex-video; - @include foundation-label; - @include foundation-media-object; - @include foundation-menu; - @include foundation-off-canvas; - @include foundation-orbit; - @include foundation-pagination; - @include foundation-progress-bar; - @include foundation-slider; - @include foundation-sticky; - @include foundation-reveal; - @include foundation-switch; - @include foundation-table; - @include foundation-tabs; - @include foundation-thumbnail; - @include foundation-title-bar; - @include foundation-tooltip; - @include foundation-top-bar; -} diff --git a/css/foundation/grid/_classes.scss b/css/foundation/grid/_classes.scss deleted file mode 100755 index 4fd2089..0000000 --- a/css/foundation/grid/_classes.scss +++ /dev/null @@ -1,132 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group grid -//// - -/// Outputs CSS classes for the grid. -/// @access private -@mixin foundation-grid( - $row: 'row', - $column: 'column', - $column-row: 'column-row', - $push: 'push', - $pull: 'pull', - $center: 'centered', - $uncenter: 'uncenter', - $collapse: 'collapse', - $uncollapse: 'uncollapse', - $offset: 'offset', - $end: 'end', - $expanded: 'expanded', - $breakpoints: $breakpoint-classes -) { - // Row - .#{$row} { - @include grid-row; - - // Collapsing - &.#{$collapse} { - > .#{$column} { @include grid-col-collapse; } - } - - // Nesting - & & { - @include grid-row($behavior: nest, $cf: false); - - &.#{$collapse} { - @include grid-row($behavior: nest collapse, $cf: false); - } - } - - // Responsive collapsing - @each $size in $breakpoint-classes { - @include breakpoint($size) { - &.#{$size}-#{$collapse} { - > .#{$column} { @include grid-col-collapse; } - } - - &.#{$size}-#{$uncollapse} { - > .#{$column} { @include grid-col-uncollapse; } - } - } - } - - // Expanded (full-width) row - &.#{$expanded} { - max-width: none; - } - } - - // Column - .#{$column} { - @include grid-col; - - &.#{$end} { - @include grid-col-end; - } - } - - // Column row - // The double .row class is needed to bump up the specificity - .#{$column}.#{$row}.#{$row} { - float: none; - } - - @each $size in $breakpoints { - @include breakpoint($size) { - @for $i from 1 through $grid-column-count { - // Column width - .#{$size}-#{$i} { - @include grid-col-size($i); - } - - // Source ordering - @if $i < $grid-column-count { - .#{$size}-#{$push}-#{$i} { - @include grid-col-pos($i); - } - - .#{$size}-#{$pull}-#{$i} { - @include grid-col-pos(-$i); - } - } - - // Offsets - $o: $i - 1; - - .#{$size}-#{$offset}-#{$o} { - @include grid-col-off($o); - } - } - - // Block grid - @for $i from 1 through $block-grid-max { - .#{$size}-up-#{$i} { - @include grid-layout($i); - } - } - - // Positioning - .#{$column}.#{$size}-#{$center} { - @include grid-col-pos(center); - } - - // Gutter adjustment - .#{$size}-#{$uncenter}, - .#{$size}-#{$push}-0, - .#{$size}-#{$pull}-0 { - @include grid-col-unpos; - } - } - } - - @if $column == 'column' { - .columns { - // scss-lint:disable PlaceholderInExtend - @extend .column; - } - } -} diff --git a/css/foundation/grid/_column.scss b/css/foundation/grid/_column.scss deleted file mode 100755 index abf272c..0000000 --- a/css/foundation/grid/_column.scss +++ /dev/null @@ -1,113 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group grid -//// - -/// Calculates the width of a column based on a number of factors. -/// -/// @param {Number|List} $columns -/// Width of the column. Accepts multiple values: -/// - A percentage value will make the column that exact size. -/// - A single digit will make the column span that number of columns wide, taking into account the column count of the parent row. -/// - A string of the format “x of y†will make a column that is *x* columns wide, assuming *y* total columns for the parent. -/// -/// @returns {Number} A calculated percentage value. -@function grid-column($columns) { - $width: 0%; - - // Parsing percents, decimals, and column counts - @if type-of($columns) == 'number' { - @if unit($columns) == '%' { - $width: $columns; - } - @else if $columns < 1 { - $width: percentage($columns); - } - @else { - $width: percentage($columns / $grid-column-count); - } - } - - // Parsing “n of n†expressions - @else if type-of($columns) == 'list' { - @if length($columns) != 3 { - @error 'Wrong syntax for grid-column(). Use the format “n of nâ€.'; - } - @else { - $width: percentage(nth($columns, 1) / nth($columns, 3)); - } - } - - // Anything else is incorrect - @else { - @error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or “n of nâ€.'; - } - - @return $width; -} - -/// Creates a grid column. -/// -/// @param {Mixed} $columns [$grid-column-count] - Width of the column. Refer to the `grid-column()` function to see possible values. -/// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns. -@mixin grid-column( - $columns: $grid-column-count, - $gutter: $grid-column-gutter -) { - @if ($columns <= $grid-column-count) { - @include grid-column-size($columns); - } - - $gutter: rem-calc($gutter) / 2; - - float: $global-left; - padding-left: $gutter; - padding-right: $gutter; - - &:last-child:not(:first-child) { - float: $global-right; - } -} - -/// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element. -/// -/// @param {Number} $gutter [$grid-column-gutter] - Width of the gutters on either side of the column row. -@mixin grid-column-row( - $gutter: $grid-column-gutter -) { - @include grid-row; - @include grid-column($gutter: $gutter); - - &, - &:last-child { - float: none; - } -} - -/// Shorthand for `grid-column()`. -/// @alias grid-column -@function grid-col( - $columns: $grid-column-count -) { - @return grid-column($columns); -} - -/// Shorthand for `grid-column()`. -/// @alias grid-column -@mixin grid-col( - $columns: $grid-column-count, - $gutter: $grid-column-gutter -) { - @include grid-column($columns, $gutter); -} - -/// Shorthand for `grid-column-row()`. -/// @alias grid-column-row -@mixin grid-col-row( - $gutter: $grid-column-gutter -) { - @include grid-column-row($gutter); -} diff --git a/css/foundation/grid/_flex-grid.scss b/css/foundation/grid/_flex-grid.scss deleted file mode 100755 index c5f8367..0000000 --- a/css/foundation/grid/_flex-grid.scss +++ /dev/null @@ -1,194 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group flex-grid -//// - -/// Creates a container for a flex grid row. -/// -/// @param {Keyword|List} $behavior [null] -/// Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors. -/// @param {Number} $width [$grid-row-width] - Maximum width of the row. -/// @param {Number} $columns [null] - Number of columns to use for this row. If set to `null` (the default), the global column count will be used. -/// @param {Boolean} $base [true] - Set to `false` to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output. -@mixin flex-grid-row( - $behavior: null, - $width: $grid-row-width, - $columns: null, - $base: true -) { - $behavior: -zf-get-options($behavior, nest collapse); - $margin: auto; - - @if map-get($behavior, nest) { - $margin: rem-calc($grid-column-gutter) / 2 * -1; - } - @else { - max-width: $width; - } - - @if $base { - display: flex; - flex-flow: row wrap; - } - - margin-left: $margin; - margin-right: $margin; - - @if $columns != null { - @include grid-context($columns, $base) { - @content; - } - } -} - -/// Calculates the `flex` property for a flex grid column. It accepts all of the same values as the basic `grid-column()` function, along with two extras: -/// - `null` (the default) will make the column expand to fill space. -/// - `shrink` will make the column contract, so it only takes up the horizontal space it needs. -/// -/// @param {Mixed} $columns [null] - Width of the column. -@function flex-grid-column($columns: null) { - $flex: 1 1 0px; - - @if $columns == shrink { - $flex: 0 0 auto; - } - @else if $columns != null { - $flex: 0 0 grid-column($columns); - } - - @return $flex; -} - -/// Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the `unstack` class on the parent flex row. -/// -/// @param {Mixed} $columns [null] - Width of the column. Refer to the `flex-grid-column()` function to see possible values. -/// @param {Number} $gutter [$grid-column-gutter] - Space between columns, added as a left and right padding. -@mixin flex-grid-column( - $columns: null, - $gutter: $grid-column-gutter -) { - $gutter: rem-calc($gutter) / 2; - - flex: flex-grid-column($columns); - padding-left: $gutter; - padding-right: $gutter; - - // max-width fixes IE 10/11 not respecting the flex-basis property - @if $columns != null and $columns != shrink { - max-width: grid-column($columns); - } -} - -/// Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout. -/// @param {Number} $order [0] - Order number to apply. -@mixin flex-grid-order($order: 0) { - order: $order; -} - -@mixin foundation-flex-grid { - // Row - .row { - @include flex-grid-row; - - // Nesting behavior - & &, - .column-row & { - @include flex-grid-row(nest, $base: false); - } - } - - // Column - %flex-column { - @include flex-grid-column; - } - - .column, - .columns { - @extend %flex-column; - } - - // Sizing (percentage) - @each $size in $breakpoint-classes { - @include breakpoint($size) { - @for $i from 1 through $grid-column-count { - .#{$size}-#{$i} { - flex: flex-grid-column($i); - max-width: grid-column($i); - } - } - } - } - - // Sizing (expand) - @each $size in $breakpoint-classes { - @if $size != small { - @include breakpoint($size) { - .#{$size}-expand { - flex: flex-grid-column(); - } - } - } - } - - // Sizing (shrink) - .shrink { - flex: flex-grid-column(shrink); - } - - // Auto-stacking/unstacking - @each $size in $breakpoint-classes { - @if $size != small { - .row.#{$size}-unstack { - .column { - flex: flex-grid-column(100%); - - @include breakpoint($size) { - flex: flex-grid-column(); - } - } - } - } - } - - // Source ordering - @each $size in $breakpoint-classes { - @include breakpoint($size) { - @for $i from 1 through 6 { - .#{$size}-order-#{$i} { - @include flex-grid-order($i); - } - } - } - } - - // Horizontal alignment using justify-content - @each $hdir, $prop in ( - 'right': flex-end, - 'center': center, - 'justify': space-between, - 'spaced': space-around, - ) { - .row.align-#{$hdir} { - justify-content: $prop; - } - } - - // Horizontal alignment using align-items and align-self - @each $vdir, $prop in ( - 'top': flex-start, - 'bottom': flex-end, - 'middle': center, - 'stretch': stretch, - ) { - .row.align-#{$vdir} { - align-items: $prop; - } - - .column.align-#{$vdir} { - align-self: $prop; - } - } -} diff --git a/css/foundation/grid/_grid.scss b/css/foundation/grid/_grid.scss deleted file mode 100755 index 28e81eb..0000000 --- a/css/foundation/grid/_grid.scss +++ /dev/null @@ -1,33 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group grid -//// - -/// The maximum width of a row. -/// @type Number -$grid-row-width: $global-width !default; - -/// The default column count of a grid. Changing this value affects the logic of the grid mixins, and the number of CSS classes output. -/// @type Number -$grid-column-count: 12 !default; - -/// The amount of space between columns. -/// @type Number -$grid-column-gutter: 30px !default; - -/// The highest number of `.x-up` classes available when using the block grid CSS. -/// @type Number -$block-grid-max: 6 !default; - -@import 'row'; -@import 'column'; -@import 'size'; -@import 'position'; -@import 'gutter'; -@import 'classes'; -@import 'layout'; - -@import 'flex-grid'; diff --git a/css/foundation/grid/_gutter.scss b/css/foundation/grid/_gutter.scss deleted file mode 100755 index a0e90cb..0000000 --- a/css/foundation/grid/_gutter.scss +++ /dev/null @@ -1,31 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group grid -//// - -/// Collapse the gutters on a column by removing the padding. -@mixin grid-column-collapse() { - padding-left: 0; - padding-right: 0; -} - -/// Un-collapse the gutters on a column by re-adding the padding. -@mixin grid-column-uncollapse() { - padding-left: $grid-column-gutter; - padding-right: $grid-column-gutter; -} - -/// Shorthand for `grid-column-collapse()`. -/// @alias grid-column-collapse -@mixin grid-col-collapse() { - @include grid-column-collapse; -} - -/// Shorthand for `grid-column-uncollapse()`. -/// @alias grid-column-uncollapse -@mixin grid-col-uncollapse() { - @include grid-column-uncollapse; -} diff --git a/css/foundation/grid/_layout.scss b/css/foundation/grid/_layout.scss deleted file mode 100755 index 4b3761d..0000000 --- a/css/foundation/grid/_layout.scss +++ /dev/null @@ -1,33 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group grid -//// - -/// Sizes child elements so that `$n` number of items appear on each row. -/// -/// @param {Number} $n - Number of elements to display per row. -/// @param {String} $selector ['.column'] - Selector(s) to use for child elements. -@mixin grid-layout( - $n, - $selector: '.column' -) { - #{$selector} { - width: percentage(1/$n); - float: $global-left; - - &:nth-of-type(1n) { - clear: none; - } - - &:nth-of-type(#{$n}n+1) { - clear: both; - } - - &:last-child { - float: left; - } - } -} diff --git a/css/foundation/grid/_position.scss b/css/foundation/grid/_position.scss deleted file mode 100755 index 9cafac9..0000000 --- a/css/foundation/grid/_position.scss +++ /dev/null @@ -1,72 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group grid -//// - -/// Reposition a column. -/// -/// @param {Number} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left. -@mixin grid-column-position($position) { - @if type-of($position) == 'number' { - $offset: percentage($position / $grid-column-count); - - position: relative; - #{$global-left}: $offset; - } - @else if $position == center { - float: none; - margin-left: auto; - margin-right: auto; - } - @else { - @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, or center.'; - } -} - -/// Reset a position definition. -@mixin grid-column-unposition() { - position: static; - margin-left: 0; - margin-right: 0; -} - -/// Offsets a column to the right by `$n` columns. -/// @param {Number|List} $n - Width to offset by. You can pass in any value accepted by the `grid-column()` mixin, such as `6`, `50%`, or `1 of 2`. -@mixin grid-column-offset($n) { - margin-#{$global-left}: grid-column($n); -} - -/// Disable the default behavior of the last column in a row aligning to the opposite edge. -@mixin grid-column-end() { - // This extra specificity is required for the property to be applied - &:last-child { - float: $global-left; - } -} - -/// Shorthand for `grid-column-position()`. -/// @alias grid-column-position -@mixin grid-col-pos($position) { - @include grid-column-position($position); -} - -/// Shorthand for `grid-column-unposition()`. -/// @alias grid-column-unposition -@mixin grid-col-unpos() { - @include grid-column-unposition; -} - -/// Shorthand for `grid-column-offset()`. -/// @alias grid-column-offset -@mixin grid-col-off($n) { - @include grid-column-offset($n); -} - -/// Shorthand for `grid-column-end()`. -/// @alias grid-column-end -@mixin grid-col-end() { - @include grid-column-end; -} diff --git a/css/foundation/grid/_row.scss b/css/foundation/grid/_row.scss deleted file mode 100755 index 5b1f253..0000000 --- a/css/foundation/grid/_row.scss +++ /dev/null @@ -1,75 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group grid -//// - -/// Change the behavior of columns defined inside this mixin to use a different column count. -/// @content -/// -/// @param {Number} $columns - Number of columns to use. -/// @param {Boolean} $root [false] -/// If `false`, selectors inside this mixin will nest inside the parent selector. -/// If `true`, selectors will not nest. -@mixin grid-context( - $columns, - $root: false -) { - // Store the current column count so it can be re-set later - $old-grid-column-count: $columns; - $grid-column-count: $columns !global; - - @if $root { - @at-root { @content; } - } - @else { - @content; - } - - // Restore the old column count - $grid-column-count: $old-grid-column-count !global; -} - -/// Creates a grid row. -/// @content -/// -/// @param {Number} $columns [null] - Column count for this row. `null` will use the default column count. -/// @param {Keywords} $behavior [null] -/// Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors. -/// @param {Number} $width [$grid-row-width] - Maximum width of the row. -/// @param {Boolean} $cf [true] - Whether or not to include a clearfix. -@mixin grid-row( - $columns: null, - $behavior: null, - $width: $grid-row-width, - $cf: true -) { - $behavior: -zf-get-options($behavior, nest collapse); - $margin: auto; - - @if map-get($behavior, nest) { - $margin: rem-calc($grid-column-gutter) / 2 * -1; - - @if map-get($behavior, collapse) { - $margin: 0; - } - } - @else { - max-width: $width; - } - - @if $cf { - @include clearfix; - } - - margin-left: $margin; - margin-right: $margin; - - @if $columns != null { - @include grid-context($columns) { - @content; - } - } -} diff --git a/css/foundation/grid/_size.scss b/css/foundation/grid/_size.scss deleted file mode 100755 index c01c8ca..0000000 --- a/css/foundation/grid/_size.scss +++ /dev/null @@ -1,24 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group grid -//// - -/// Set the width of a grid column. -/// -/// @param {Number|List} $width [$grid-column-count] - Width to make the column. You can pass in any value accepted by the `grid-column()` function, such as `6`, `50%`, or `1 of 2`. -@mixin grid-column-size( - $columns: $grid-column-count -) { - width: grid-column($columns); -} - -/// Shorthand for `grid-column-size()`. -/// @alias grid-column-size -@mixin grid-col-size( - $columns: $grid-column-count -) { - @include grid-column-size($columns); -} diff --git a/css/foundation/settings/_settings.scss b/css/foundation/settings/_settings.scss deleted file mode 100755 index 5620633..0000000 --- a/css/foundation/settings/_settings.scss +++ /dev/null @@ -1,530 +0,0 @@ -// Foundation for Sites Settings -// ----------------------------- -// -// Table of Contents: -// -// 1. Global -// 2. Breakpoints -// 3. The Grid -// 4. Base Typography -// 5. Typography Helpers -// 6. Abide -// 7. Accordion -// 8. Accordion Menu -// 9. Badge -// 10. Breadcrumbs -// 11. Button -// 12. Button Group -// 13. Callout -// 14. Close Button -// 15. Drilldown -// 16. Dropdown -// 17. Dropdown Menu -// 18. Flex Video -// 19. Forms -// 20. Label -// 21. Media Object -// 22. Menu -// 23. Off-canvas -// 24. Orbit -// 25. Pagination -// 26. Progress Bar -// 27. Reveal -// 28. Slider -// 29. Switch -// 30. Table -// 31. Tabs -// 32. Thumbnail -// 33. Tooltip -// 34. Top Bar - -@import 'util/util'; - -// 1. Global -// --------- - -$global-width: rem-calc(1200); -$global-font-size: 100%; -$global-lineheight: 1.5; -$primary-color: #2199e8; -$secondary-color: #777; -$success-color: #3adb76; -$warning-color: #ffae00; -$alert-color: #ec5840; -$light-gray: #e6e6e6; -$medium-gray: #cacaca; -$dark-gray: #8a8a8a; -$black: #0a0a0a; -$white: #fefefe; -$body-background: $white; -$body-font-color: $black; -$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; -$body-antialiased: true; -$global-margin: 1rem; -$global-padding: 1rem; -$global-margin: 1rem; -$global-weight-normal: normal; -$global-weight-bold: bold; -$global-radius: 0; -$global-text-direction: ltr; -$rem-base: 16px; - -// 2. Breakpoints -// -------------- - -$breakpoints: ( - small: 0, - medium: 640px, - large: 1024px, - xlarge: 1200px, - xxlarge: 1440px, -); -$breakpoint-classes: (small medium large); - -// 3. The Grid -// ----------- - -$grid-row-width: $global-width; -$grid-column-count: 12; -$grid-column-gutter: 30px; -$block-grid-max: 6; - -// 4. Base Typography -// ------------------ - -$header-font-family: $body-font-family; -$header-font-weight: $global-weight-normal; -$header-font-style: normal; -$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; -$header-sizes: ( - small: ( - 'h1': 24, - 'h2': 20, - 'h3': 19, - 'h4': 18, - 'h5': 17, - 'h6': 16, - ), - medium: ( - 'h1': 48, - 'h2': 40, - 'h3': 31, - 'h4': 25, - 'h5': 20, - 'h6': 16, - ), -); -$header-color: inherit; -$header-lineheight: 1.4; -$header-margin-bottom: 0.5rem; -$header-text-rendering: optimizeLegibility; -$small-font-size: 80%; -$header-small-font-color: $medium-gray; -$paragraph-lineheight: 1.6; -$paragraph-margin-bottom: 1rem; -$paragraph-text-rendering: optimizeLegibility; -$code-color: $black; -$code-font-family: $font-family-monospace; -$code-font-weight: $global-weight-normal; -$code-background: $light-gray; -$code-border: 1px solid $medium-gray; -$code-padding: rem-calc(2 5 1); -$anchor-color: $primary-color; -$anchor-color-hover: scale-color($anchor-color, $lightness: -14%); -$anchor-text-decoration: none; -$anchor-text-decoration-hover: none; -$hr-width: $global-width; -$hr-border: 1px solid $medium-gray; -$hr-margin: rem-calc(20) auto; -$list-lineheight: $paragraph-lineheight; -$list-margin-bottom: $paragraph-margin-bottom; -$list-style-type: disc; -$list-style-position: outside; -$list-side-margin: 1.25rem; -$list-nested-side-margin: 1.25rem; -$defnlist-margin-bottom: 1rem; -$defnlist-term-weight: $global-weight-bold; -$defnlist-term-margin-bottom: 0.3rem; -$blockquote-color: $dark-gray; -$blockquote-padding: rem-calc(9 20 0 19); -$blockquote-border: 1px solid $medium-gray; -$cite-font-size: rem-calc(13); -$cite-color: $dark-gray; -$keystroke-font: $font-family-monospace; -$keystroke-color: $black; -$keystroke-background: $light-gray; -$keystroke-padding: rem-calc(2 4 0); -$keystroke-radius: $global-radius; -$abbr-underline: 1px dotted $black; - -// 5. Typography Helpers -// --------------------- - -$lead-font-size: $global-font-size * 1.25; -$lead-lineheight: 1.6; -$subheader-lineheight: 1.4; -$subheader-color: $dark-gray; -$subheader-font-weight: $global-weight-normal; -$subheader-margin-top: 0.2rem; -$subheader-margin-bottom: 0.5rem; -$stat-font-size: 2.5rem; - -// 6. Abide -// -------- - -$abide-inputs: true; -$abide-labels: true; -$input-background-invalid: $alert-color; -$form-label-color-invalid: $alert-color; -$input-error-color: $alert-color; -$input-error-font-size: rem-calc(12); -$input-error-font-weight: $global-weight-bold; - -// 7. Accordion -// ------------ - -$accordion-background: $white; -$accordion-plusminus: true; -$accordion-item-color: foreground($accordion-background, $primary-color); -$accordion-item-background-hover: $light-gray; -$accordion-item-padding: 1.25rem 1rem; -$accordion-content-background: $white; -$accordion-content-border: 1px solid $light-gray; -$accordion-content-color: foreground($accordion-background, $primary-color); -$accordion-content-padding: 1rem; - -// 8. Accordion Menu -// ----------------- - -$accordionmenu-arrows: true; - -// 9. Badge -// -------- - -$badge-background: $primary-color; -$badge-color: foreground($badge-background); -$badge-padding: 0.3em; -$badge-minwidth: 2.1em; -$badge-font-size: 0.6rem; - -// 10. Breadcrumbs -// --------------- - -$breadcrumbs-margin: 0 0 $global-margin 0; -$breadcrumbs-item-font-size: rem-calc(11); -$breadcrumbs-item-color: $primary-color; -$breadcrumbs-item-color-current: $black; -$breadcrumbs-item-color-disabled: $medium-gray; -$breadcrumbs-item-margin: 0.75rem; -$breadcrumbs-item-uppercase: true; -$breadcrumbs-item-slash: true; - -// 11. Button -// ---------- - -$button-padding: 0.85em 1em; -$button-margin: 0 $global-margin $global-margin 0; -$button-fill: solid; -$button-background: $primary-color; -$button-background-hover: scale-color($button-background, $lightness: -15%); -$button-color: #fff; -$button-color-alt: #000; -$button-radius: $global-radius; -$button-sizes: ( - tiny: 0.6rem, - small: 0.75rem, - default: 0.9rem, - large: 1.25rem, -); -$button-opacity-disabled: 0.25; - -// 12. Button Group -// ---------------- - -$buttongroup-margin: 1rem; -$buttongroup-spacing: 1px; -$buttongroup-child-selector: '.button'; -$buttongroup-expand-max: 6; - -// 13. Callout -// ----------- - -$callout-background: $white; -$callout-background-fade: 85%; -$callout-border: 1px solid rgba($black, 0.25); -$callout-margin: 0 0 1rem 0; -$callout-padding: 1rem; -$callout-font-color: $body-font-color; -$callout-font-color-alt: $body-background; -$callout-radius: $global-radius; -$callout-link-tint: 30%; - -// 14. Close Button -// ---------------- - -$closebutton-position: right top; -$closebutton-offset-horizontal: 1rem; -$closebutton-offset-vertical: 0.5rem; -$closebutton-size: 2em; -$closebutton-lineheight: 1; -$closebutton-color: $dark-gray; -$closebutton-color-hover: $black; - -// 15. Drilldown -// ------------- - -$drilldown-transition: transform 0.15s linear; -$drilldown-arrows: true; - -// 16. Dropdown -// ------------ - -$dropdown-padding: 1rem; -$dropdown-border: 1px solid $medium-gray; -$dropdown-font-size: 16rem; -$dropdown-width: 300px; -$dropdown-radius: $global-radius; -$dropdown-sizes: ( - tiny: 100px, - small: 200px, - large: 400px, -); - -// 17. Dropdown Menu -// ----------------- - -$dropdownmenu-arrows: true; -$dropdownmenu-min-width: 200px; -$dropdownmenu-background: $white; -$dropdownmenu-border: 1px solid $medium-gray; - -// 18. Flex Video -// -------------- - -$flexvideo-padding-top: rem-calc(25); -$flexvideo-margin-bottom: rem-calc(16); -$flexvideo-ratio: 4 by 3; -$flexvideo-ratio-widescreen: 16 by 9; - -// 19. Forms -// --------- - -$fieldset-border: 1px solid $medium-gray; -$fieldset-padding: rem-calc(20); -$fieldset-margin: rem-calc(18 0); -$legend-padding: rem-calc(0 3); -$form-spacing: rem-calc(16); -$helptext-color: #333; -$helptext-font-size: rem-calc(13); -$helptext-font-style: italic; -$input-prefix-color: $black; -$input-prefix-background: $light-gray; -$input-prefix-border: 1px solid $medium-gray; -$input-prefix-padding: 1rem; -$form-label-color: $black; -$form-label-font-size: rem-calc(14); -$form-label-font-weight: $global-weight-normal; -$form-label-line-height: 1.8; -$select-background: #fafafa; -$select-triangle-color: #333; -$select-radius: $global-radius; -$input-color: $dark-gray; -$input-font-family: inherit; -$input-font-size: rem-calc(16); -$input-background: $white; -$input-background-focus: $white; -$input-background-disabled: $light-gray; -$input-border: 1px solid $medium-gray; -$input-border-focus: 1px solid $dark-gray; -$input-shadow: inset 0 1px 2px rgba($black, 0.1); -$input-shadow-focus: 0 0 5px $medium-gray; -$input-cursor-disabled: default; -$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; -$input-number-spinners: true; -$input-radius: $global-radius; - -// 20. Label -// --------- - -$label-background: $primary-color; -$label-color: foreground($label-background); -$label-font-size: 0.8rem; -$label-padding: 0.33333rem 0.5rem; -$label-radius: $global-radius; - -// 21. Media Object -// ---------------- - -$mediaobject-margin-bottom: $global-margin; -$mediaobject-section-padding: $global-padding; -$mediaobject-image-width-stacked: 100%; - -// 22. Menu -// -------- - -$menu-margin: 0; -$menu-margin-nested: 1rem; -$menu-item-padding: 0.7rem 1rem; -$menu-icon-spacing: 0.25rem; -$menu-expand-max: 6; - -// 23. Off-canvas -// -------------- - -$offcanvas-size: 250px; -$offcanvas-background: $light-gray; -$offcanvas-zindex: -1; -$offcanvas-transition-length: 0.5s; -$offcanvas-transition-timing: ease; -$offcanvas-fixed-reveal: true; -$offcanvas-exit-background: rgba($white, 0.25); -$maincontent-class: 'off-canvas-content'; -$maincontent-shadow: 0 0 10px rgba($black, 0.5); - -// 24. Orbit -// --------- - -$orbit-bullet-background: $medium-gray; -$orbit-bullet-background-active: $dark-gray; -$orbit-bullet-diameter: 1.2rem; -$orbit-bullet-margin: 0.1rem; -$orbit-bullet-margin-top: 0.8rem; -$orbit-bullet-margin-bottom: 0.8rem; -$orbit-caption-background: rgba($black, 0.5); -$orbit-caption-padding: 1rem; -$orbit-control-background-hover: rgba($black, 0.5); -$orbit-control-padding: 1rem; -$orbit-control-zindex: 10; - -// 25. Pagination -// -------------- - -$pagination-font-size: rem-calc(14); -$pagination-margin-bottom: $global-margin; -$pagination-item-color: $black; -$pagination-item-padding: rem-calc(3 10); -$pagination-item-spacing: rem-calc(1); -$pagination-radius: $global-radius; -$pagination-item-background-hover: $light-gray; -$pagination-item-background-current: $primary-color; -$pagination-item-color-current: foreground($pagination-item-background-current); -$pagination-item-color-disabled: $medium-gray; -$pagination-ellipsis-color: $black; -$pagination-mobile-items: false; -$pagination-arrows: true; - -// 26. Progress Bar -// ---------------- - -$progress-height: 1rem; -$progress-background: $medium-gray; -$progress-margin-bottom: $global-margin; -$progress-meter-background: $primary-color; -$progress-radius: $global-radius; - -// 27. Reveal -// ---------- - -$reveal-background: $white; -$reveal-width: 600px; -$reveal-max-width: $global-width; -$reveal-offset: rem-calc(100); -$reveal-padding: $global-padding; -$reveal-border: 1px solid $medium-gray; -$reveal-radius: $global-radius; -$reveal-zindex: 1005; -$reveal-overlay-background: rgba($black, 0.45); - -// 28. Slider -// ---------- - -$slider-height: 0.5rem; -$slider-width-vertical: $slider-height; -$slider-background: $light-gray; -$slider-fill-background: $medium-gray; -$slider-handle-height: 1.4rem; -$slider-handle-width: 1.4rem; -$slider-handle-background: $primary-color; -$slider-opacity-disabled: 0.25; -$slider-radius: $global-radius; -$slider-transition: all 0.2s ease-in-out; - -// 29. Switch -// ---------- - -$switch-background: $medium-gray; -$switch-background-active: $primary-color; -$switch-height: 2rem; -$switch-height-tiny: 1.5rem; -$switch-height-small: 1.75rem; -$switch-height-large: 2.5rem; -$switch-radius: $global-radius; -$switch-margin: $global-margin; -$switch-paddle-background: $white; -$switch-paddle-offset: 0.25rem; -$switch-paddle-radius: $global-radius; -$switch-paddle-transition: all 0.25s ease-out; - -// 30. Table -// --------- - -$table-background: $white; -$table-color-scale: 5%; -$table-border: 1px solid smart-scale($table-background, $table-color-scale); -$table-padding: rem-calc(8 10 10); -$table-hover-scale: 2%; -$table-row-hover: darken($table-background, $table-hover-scale); -$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); -$table-striped-background: smart-scale($table-background, $table-color-scale); -$table-stripe: even; -$table-head-background: smart-scale($table-background, $table-color-scale / 2); -$table-foot-background: smart-scale($table-background, $table-color-scale); -$table-head-font-color: $body-font-color; -$show-header-for-stacked: false; - -// 31. Tabs -// -------- - -$tab-margin: 0; -$tab-background: $white; -$tab-background-active: $light-gray; -$tab-border: $light-gray; -$tab-item-color: foreground($tab-background, $primary-color); -$tab-item-background-hover: $white; -$tab-item-padding: 1.25rem 1.5rem; -$tab-expand-max: 6; -$tab-content-background: $white; -$tab-content-border: $light-gray; -$tab-content-color: foreground($tab-background, $primary-color); -$tab-content-padding: 1rem; - -// 32. Thumbnail -// ------------- - -$thumbnail-border: solid 4px $white; -$thumbnail-margin-bottom: $global-margin; -$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); -$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); -$thumbnail-transition: box-shadow 200ms ease-out; -$thumbnail-radius: $global-radius; - -// 33. Tooltip -// ----------- - -$tooltip-background-color: $black; -$tooltip-color: $white; -$tooltip-padding: 0.75rem; -$tooltip-font-size: $small-font-size; -$tooltip-pip-width: 0.75rem; -$tooltip-pip-height: $tooltip-pip-width * 0.866; -$tooltip-pip-offset: 1.25rem; -$tooltip-radius: $global-radius; - -// 34. Top Bar -// ----------- - -$topbar-padding: 0.5rem; -$topbar-background: #eee; -$topbar-link-color: #fff; -$topbar-input-width: 200px; - diff --git a/css/foundation/typography/_alignment.scss b/css/foundation/typography/_alignment.scss deleted file mode 100755 index e4e6fe0..0000000 --- a/css/foundation/typography/_alignment.scss +++ /dev/null @@ -1,22 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -@mixin foundation-text-alignment { - @each $size in $breakpoint-classes { - @include breakpoint($size) { - @each $align in (left, right, center, justify) { - @if $size != 'small' { - .#{$size}-text-#{$align} { - text-align: $align; - } - } - @else { - .text-#{$align} { - text-align: $align; - } - } - } - } - } -} diff --git a/css/foundation/typography/_base.scss b/css/foundation/typography/_base.scss deleted file mode 100755 index 6b82826..0000000 --- a/css/foundation/typography/_base.scss +++ /dev/null @@ -1,438 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group typography-base -//// - -// Base Typography -// - - - - - - - - - - - - - - - -// These are styles applied to basic HTML tags, including: -// - Paragraphs <p> -// - Bold/italics <b> <strong> <i> <em> -// - Small text <small> -// - Headings <h1>—<h6> -// - Anchors <a> -// - Dividers <hr> -// - Lists <ul> <ol> <dl> -// - Blockquotes <blockquote> -// - Code blocks <code> -// - Abbreviations <abbr> -// - Citations <cite> -// - Keystrokes <kbd> - -/// Font family for header elements. -/// @type String | List -$header-font-family: $body-font-family !default; - -/// Font weight of headers. -/// @type String -$header-font-weight: $global-weight-normal !default; - -/// Font style (e.g. italicized) of headers. -/// @type String -$header-font-style: normal !default; - -/// Font stack used for elements that use monospaced type, such as code samples -/// @type String | List -$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default; - -/// Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes. -/// @type Map -$header-sizes: ( - small: ( - 'h1': 24, - 'h2': 20, - 'h3': 19, - 'h4': 18, - 'h5': 17, - 'h6': 16, - ), - medium: ( - 'h1': 48, - 'h2': 40, - 'h3': 31, - 'h4': 25, - 'h5': 20, - 'h6': 16, - ), -) !default; - -/// Color of headers. -/// @type Color -$header-color: inherit !default; - -/// Line height of headers. -/// @type Number -$header-lineheight: 1.4 !default; - -/// Bottom margin of headers. -/// @type Number -$header-margin-bottom: 0.5rem !default; - -/// Text rendering method of headers. -/// @type String -$header-text-rendering: optimizeLegibility !default; - -/// Font size of `<small>` elements. -/// @type Number -$small-font-size: 80% !default; - -/// Color of `<small>` elements when placed inside headers. -/// @type Color -$header-small-font-color: $medium-gray !default; - -/// Line height of text inside `<p>` elements. -/// @type Number -$paragraph-lineheight: 1.6 !default; - -/// Bottom margin of paragraphs. -/// @type Number -$paragraph-margin-bottom: 1rem !default; - -/// Text rendering method for paragraph text. -/// @type String -$paragraph-text-rendering: optimizeLegibility !default; - -/// Text color of code samples. -/// @type Color -$code-color: $black !default; - -/// Font family of code samples. -/// @type String | List -$code-font-family: $font-family-monospace !default; - -/// Font weight of text in code samples. -/// @type String -$code-font-weight: $global-weight-normal !default; - -/// Background color of code samples. -/// @type Color -$code-background: $light-gray !default; - -/// Border around code samples. -/// @type List -$code-border: 1px solid $medium-gray !default; - -/// Padding around text of code samples. -/// @type Number | List -$code-padding: rem-calc(2 5 1) !default; - -/// Default color for links. -/// @type Color -$anchor-color: $primary-color !default; - -/// Default color for links on hover. -/// @type Color -$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default; - -/// Default text deocration for links. -/// @type String -$anchor-text-decoration: none !default; - -/// Default text decoration for links on hover. -/// @type String -$anchor-text-decoration-hover: none !default; - -/// Maximum width of a divider. -/// @type Number -$hr-width: $global-width !default; - -/// Default border for a divider. -/// @type List -$hr-border: 1px solid $medium-gray !default; - -/// Default margin for a divider. -/// @type Number | List -$hr-margin: rem-calc(20) auto !default; - -/// Line height for items in a list. -/// @type Number -$list-lineheight: $paragraph-lineheight !default; - -/// Bottom margin for items in a list. -/// @type Number -$list-margin-bottom: $paragraph-margin-bottom !default; - -/// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`). -/// @type String -$list-style-type: disc !default; - -/// Positioning for bullets on unordered list items. -/// @type String -$list-style-position: outside !default; - -/// Left (or right) margin for lists. -/// @type Number -$list-side-margin: 1.25rem !default; - -/// Left (or right) margin for a list inside a list. -/// @type Number -$list-nested-side-margin: 1.25rem !default; - -/// Bottom margin for `<dl>` elements. -/// @type Number -$defnlist-margin-bottom: 1rem !default; - -/// Font weight for `<dt>` elements. -/// @type String -$defnlist-term-weight: $global-weight-bold !default; - -/// Spacing between `<dt>` and `<dd>` elements. -/// @type Number -$defnlist-term-margin-bottom: 0.3rem !default; - -/// Text color of `<blockquote>` elements. -/// @type Color -$blockquote-color: $dark-gray !default; - -/// Padding inside a `<blockquote>` element. -/// @type Number | List -$blockquote-padding: rem-calc(9 20 0 19) !default; - -/// Side border for `<blockquote>` elements. -/// @type List -$blockquote-border: 1px solid $medium-gray !default; - -/// Font size for `<cite>` elements. -/// @type Number -$cite-font-size: rem-calc(13) !default; - -/// Text color for `<cite>` elements. -/// @type Color -$cite-color: $dark-gray !default; - -/// Font family for `<kbd>` elements. -/// @type String | List -$keystroke-font: $font-family-monospace !default; - -/// Text color for `<kbd>` elements. -/// @type Color -$keystroke-color: $black !default; - -/// Background color for `<kbd>` elements. -/// @type Color -$keystroke-background: $light-gray !default; - -/// Padding for `<kbd>` elements. -/// @type Number | List -$keystroke-padding: rem-calc(2 4 0) !default; - -/// Border radius for `<kbd>` elements. -/// @type Number | List -$keystroke-radius: $global-radius !default; - -/// Bottom border style for `<abbr>` elements. -/// @type List -$abbr-underline: 1px dotted $black !default; - -@mixin foundation-typography-base { - // 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; - } - - // Paragraphs - p { - font-size: inherit; - line-height: $paragraph-lineheight; - margin-bottom: $paragraph-margin-bottom; - text-rendering: $paragraph-text-rendering; - } - - // Emphasized text - em, - i { - font-style: italic; - line-height: inherit; - } - - // Strong text - strong, - b { - font-weight: $global-weight-bold; - line-height: inherit; - } - - // Small text - small { - font-size: $small-font-size; - line-height: inherit; - } - - // Headings - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: $header-font-family; - font-weight: $header-font-weight; - font-style: $header-font-style; - color: $header-color; - text-rendering: $header-text-rendering; - margin-top: 0; - margin-bottom: $header-margin-bottom; - line-height: $header-lineheight; - - small { - color: $header-small-font-color; - line-height: 0; - } - } - - // Heading sizes - @each $size, $headers in $header-sizes { - @include breakpoint($size) { - @each $header, $font-size in $headers { - #{$header} { font-size: rem-calc($font-size); } - } - } - } - - // Links - a { - color: $anchor-color; - text-decoration: $anchor-text-decoration; - line-height: inherit; - cursor: pointer; - - &:hover, - &:focus { - color: $anchor-color-hover; - @if $anchor-text-decoration-hover != $anchor-text-decoration { - text-decoration: $anchor-text-decoration-hover; - } - } - - img { - border: 0; - } - } - - // Horizontal rule - hr { - max-width: $hr-width; - height: 0; - border-right: 0; - border-top: 0; - border-bottom: $hr-border; - border-left: 0; - margin: $hr-margin; - clear: both; - } - - // Lists - ul, - ol, - dl { - line-height: $list-lineheight; - margin-bottom: $list-margin-bottom; - list-style-position: $list-style-position; - } - - // List items - li { - font-size: inherit; - } - - // Unordered lists - ul { - list-style-type: $list-style-type; - margin-#{$global-left}: $list-side-margin; - } - - // Ordered lists - ol { - margin-#{$global-left}: $list-side-margin; - } - - // Nested unordered/ordered lists - ul, ol { - & & { - margin-#{$global-left}: $list-nested-side-margin; - margin-bottom: 0; - list-style-type: inherit; - } - } - - // Definition lists - dl { - margin-bottom: $defnlist-margin-bottom; - - dt { - margin-bottom: $defnlist-term-margin-bottom; - font-weight: $defnlist-term-weight; - } - } - - // Blockquotes - blockquote { - margin: 0 0 $paragraph-margin-bottom; - padding: $blockquote-padding; - border-#{$global-left}: $blockquote-border; - - &, p { - line-height: $paragraph-lineheight; - color: $blockquote-color; - } - } - - // Citations - cite { - display: block; - font-size: $cite-font-size; - color: $cite-color; - - &:before { - content: '\2014 \0020'; - } - } - - // Abbreviations - abbr { - color: $body-font-color; - cursor: help; - border-bottom: $abbr-underline; - } - - // Code - code { - font-family: $code-font-family; - font-weight: $code-font-weight; - color: $code-color; - background-color: $code-background; - border: $code-border; - padding: $code-padding; - } - - // Keystrokes - kbd { - padding: $keystroke-padding; - margin: 0; - background-color: $keystroke-background; - color: $keystroke-color; - font-family: $keystroke-font; - } -} diff --git a/css/foundation/typography/_helpers.scss b/css/foundation/typography/_helpers.scss deleted file mode 100755 index 1e753ae..0000000 --- a/css/foundation/typography/_helpers.scss +++ /dev/null @@ -1,77 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group typography-helpers -//// - -/// Default font size for lead paragraphs. -/// @type Number -$lead-font-size: $global-font-size * 1.25 !default; - -/// Default line height for lead paragraphs. -/// @type String -$lead-lineheight: 1.6 !default; - -/// Default line height for subheaders. -/// @type Number -$subheader-lineheight: 1.4 !default; - -/// Default font color for subheaders. -/// @type Color -$subheader-color: $dark-gray !default; - -/// Default font weight for subheaders. -/// @type String -$subheader-font-weight: $global-weight-normal !default; - -/// Default top margin for subhheaders. -/// @type Number -$subheader-margin-top: 0.2rem !default; - -/// Default bottom margin for subheaders. -/// @type Number -$subheader-margin-bottom: 0.5rem !default; - -/// Default font size for statistic numbers. -/// @type Number -$stat-font-size: 2.5rem !default; - -@mixin foundation-typography-helpers { - // Use to create a subheading under a main header - // Make sure you pair the two elements in a <header> element, like this: - // <header> - // <h1>Heading</h1> - // <h2>Subheading</h2> - // </header> - .subheader { - margin-top: $subheader-margin-top; - margin-bottom: $subheader-margin-bottom; - font-weight: $subheader-font-weight; - line-height: $subheader-lineheight; - color: $subheader-color; - } - - // Use to style an introductory lead, deck, blurb, etc. - .lead { - font-size: $lead-font-size; - line-height: $lead-lineheight; - } - - // Use to style a large number to display a statistic - .stat { - font-size: $stat-font-size; - line-height: 1; - - p + & { - margin-top: -1rem; - } - } - - // Use to remove the bullets from an unordered list - .no-bullet { - margin-#{$global-left}: 0; - list-style: none; - } -} diff --git a/css/foundation/typography/_print.scss b/css/foundation/typography/_print.scss deleted file mode 100755 index 244bbcf..0000000 --- a/css/foundation/typography/_print.scss +++ /dev/null @@ -1,73 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group typography -//// - -// scss-lint:disable all - -@mixin foundation-print-styles { - .show-for-print { 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; - } - - .show-for-print { display: block !important; } - .hide-for-print { display: none !important; } - - 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; } - - // Display the URL of a link after the text - a, - a:visited { text-decoration: underline;} - a[href]:after { content: ' (' attr(href) ')'; } - - // Don't display the URL for images or JavaScript/internal links - .ir a:after, - a[href^='javascript:']:after, - a[href^='#']:after { content: ''; } - - // Display what an abbreviation stands for after the text - abbr[title]:after { content: ' (' attr(title) ')'; } - - // Prevent page breaks in the middle of a blockquote or preformatted text block - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - // h5bp.com/t - thead { display: table-header-group; } - - tr, - img { page-break-inside: avoid; } - - img { max-width: 100% !important; } - - @page { margin: 0.5cm; } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - // Avoid page breaks after a heading - h2, - h3 { page-break-after: avoid; } - } -} diff --git a/css/foundation/typography/_typography.scss b/css/foundation/typography/_typography.scss deleted file mode 100755 index d17c16a..0000000 --- a/css/foundation/typography/_typography.scss +++ /dev/null @@ -1,28 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group typography -//// - -// scss-lint:disable DeclarationOrder - -// Base typography styles (tags only) -@import 'base'; - -// Typography helper classes (classes only) -@import 'helpers'; - -// Text alignment classes -@import 'alignment'; - -// Print styles -@import 'print'; - -@mixin foundation-typography { - @include foundation-typography-base; - @include foundation-typography-helpers; - @include foundation-text-alignment; - @include foundation-print-styles; -} diff --git a/css/foundation/util/_breakpoint.scss b/css/foundation/util/_breakpoint.scss deleted file mode 100755 index f7e22b6..0000000 --- a/css/foundation/util/_breakpoint.scss +++ /dev/null @@ -1,193 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group breakpoints -//// - -// scss-lint:disable ZeroUnit - -/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries. -/// @type Map -$breakpoints: ( - small: 0, - medium: 640px, - large: 1024px, - xlarge: 1200px, - xxlarge: 1440px, -) !default; - -/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map. -/// @type List -$breakpoint-classes: (small medium large) !default; - -/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are. -/// -/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process. -@function breakpoint($val: small) { - // Size or keyword - $bp: nth($val, 1); - // Value for max-width media queries - $bp-max: 0; - // Direction of media query (up, down, or only) - $dir: if(length($val) > 1, nth($val, 2), up); - // Eventual output - $str: ''; - // Is it a named media query? - $named: false; - - // Orientation media queries have a unique syntax - @if $bp == 'landscape' or $bp == 'portrait' { - @return '(orientation: #{$bp})'; - } - @else if $bp == 'retina' { - @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'; - } - - // Try to pull a named breakpoint out of the $breakpoints map - @if type-of($bp) == 'string' { - @if map-has-key($breakpoints, $bp) { - @if $dir == 'only' or $dir == 'down' { - $next-bp: -zf-map-next($breakpoints, $bp); - - @if $next-bp == null { - $bp-max: null; - } - @else { - $bp-max: $next-bp; - } - } - - $bp: map-get($breakpoints, $bp); - $named: true; - } - @else { - $bp: 0; - } - } - - // Convert any pixel, rem, or unitless value to em - $bp: -zf-bp-to-em($bp); - @if $bp-max { - $bp-max: -zf-bp-to-em($bp-max) - (1/16); - } - - // Skip media query creation if the input is “0 up†or “0 down†- @if $bp > 0 or $dir == 'only' { - // `only` ranges use the format `(min-width: n) and (max-width: n)` - @if $dir == 'only' { - @if $named == true { - $str: $str + '(min-width: #{$bp})'; - - @if $bp-max != null { - $str: $str + ' and (max-width: #{$bp-max})'; - } - } - @else { - @warn 'Only named media queries can have an `only` range.'; - } - } - - // `down` ranges use the format `(max-width: n)` - @else if $dir == 'down' { - $max: 0; - - // For named breakpoints, subtract the breakpoint value by one “pixelâ€, or 1/16em. - @if $named { - $max: $bp-max; - } - @else { - $max: $bp; - } - - $str: $str + '(max-width: #{$max})'; - } - - // `up` ranges use the format `(min-width: n)` - @else if strip-unit($bp) > 0 { - $str: $str + '(min-width: #{$bp})'; - } - } - - @return $str; -} - -/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values: -/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there. -/// - If a pixel value is passed, it will be converted to an em value using `$rem-base`. -/// - If a rem value is passed, the unit will be changed to em. -/// - If an em value is passed, the value will be used as-is. -/// -/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process. -/// -/// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query. -@mixin breakpoint($value) { - $str: breakpoint($value); - - // If $str is still an empty string, no media query is needed - @if $str == '' { - @content; - } - - // Otherwise, wrap the content in a media query - @else { - @media screen and #{$str} { - @content; - } - } -} - -/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place. -/// @access private -/// -/// @param {Map} $map - Map to convert. -/// -/// @returns {String} A string containing the map's contents. -@function -zf-bp-serialize($map) { - $str: ''; - @each $key, $value in $map { - $str: $str + $key + '=' + -zf-bp-to-em($value) + '&'; - } - $str: str-slice($str, 1, -2); - - @return $str; -} - -/// Find the next key in a map. -/// @access private -/// -/// @param {Map} $map - Map to traverse. -/// @param {Mixed} $key - Key to use as a starting point. -/// -/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`. -@function -zf-map-next($map, $key) { - // Store the values of the map as a list, so we can access them with nth - $values: map-values($map); - - // Ghetto for loop - $i: 1; - $found: false; - @each $val in map-keys($map) { - @if $found == false { - @if ($key == $val) { - $found: true; - } - $i: $i + 1; - } - } - - // If the key doesn't exist, or it's the last key in the map, return null - @if $i > length($map) { - @return null; - } - // Otherwise, return the value - @else { - @return nth($values, $i); - } -} - -// These styles are applied to <meta> tags, which are read by the Foundation JavaScript -.foundation-mq { - font-family: '#{-zf-bp-serialize($breakpoints)}'; -} diff --git a/css/foundation/util/_color.scss b/css/foundation/util/_color.scss deleted file mode 100755 index 74c456b..0000000 --- a/css/foundation/util/_color.scss +++ /dev/null @@ -1,41 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group functions -//// - -/// Checks the lightness of `$color`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color. -/// -/// @param {Color} $color - Color to check the lightness of. -/// @param {Color} $yes [$black] - Color to return if `$color` is light. -/// @param {Color} $no [$white] - Color to return if `$color` is dark. -/// @param {Percentage} $threshold [60%] - Threshold of lightness to check against. -/// -/// @returns {Color} The $yes color or $no color. -@function foreground($color, $yes: $black, $no: $white, $threshold: 60%) { - @if $color == transparent { - $color: $body-background; - } - @if (lightness($color) > $threshold) { - @return $yes; - } - @else { - @return $no; - } -} - -/// Scales a color to be lighter if it's light, or darker if it's dark. Use this function to tint a color appropriate to its lightness. -/// -/// @param {Color} $color - Color to scale. -/// @param {Percentage} $scale [5%] - Amount to scale up or down. -/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against. -/// -/// @returns {Color} A scaled color. -@function smart-scale($color, $scale: 5%, $threshold: 40%) { - @if lightness($color) > $threshold { - $scale: -$scale; - } - @return scale-color($color, $lightness: $scale); -} diff --git a/css/foundation/util/_mixins.scss b/css/foundation/util/_mixins.scss deleted file mode 100755 index fdd15bb..0000000 --- a/css/foundation/util/_mixins.scss +++ /dev/null @@ -1,210 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group functions -//// - -/// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element. -/// -/// @param {Number} $triangle-size - Width of the triangle. -/// @param {Color} $triangle-color - Color of the triangle. -/// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `top`, `right`, `bottom`, or `left`. -@mixin css-triangle( - $triangle-size, - $triangle-color, - $triangle-direction -) { - content: ''; - display: block; - width: 0; - height: 0; - border: inset $triangle-size; - - @if ($triangle-direction == down) { - border-color: $triangle-color transparent transparent; - border-top-style: solid; - } - @if ($triangle-direction == up) { - border-color: transparent transparent $triangle-color; - border-bottom-style: solid; - } - @if ($triangle-direction == right) { - border-color: transparent transparent transparent $triangle-color; - border-left-style: solid; - } - @if ($triangle-direction == left) { - border-color: transparent $triangle-color transparent transparent; - border-right-style: solid; - } -} - -/// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div> -/// -/// @param {Color} $color - Color to use for the icon. -/// @param {Color} $color-hover - Color to use when the icon is hovered over. -/// @param {Number} $width - Width of the icon. -/// @param {Number} $height - Height of the icon. -/// @param {Number} $weight - Height of individual bars in the icon. -/// @param {Number} $bars - Number of bars in the icon. -@mixin hamburger( - $color: black, - $color-hover: #666, - $width: 20px, - $height: 16px, - $weight: 2px, - $bars: 3 -) { - // box-shadow CSS output - $shadow: (); - $hover-shadow: (); - - // Spacing between bars is calculated based on the total height of the icon and the weight of each bar - $spacing: floor(($height - ($weight * $bars)) / ($bars - 1)); - - // Icon container - position: relative; - display: inline-block; - vertical-align: middle; - cursor: pointer; - width: $width; - height: $height; - - // Icon bars - &::after { - content: ''; - position: absolute; - display: block; - width: 100%; - height: $weight; - background: $color; - top: 0; - left: 0; - - @for $i from 2 through $bars { - $offset: ($weight + $spacing) * ($i - 1); - $shadow: append($shadow, 0 $offset 0 $color, comma); - } - - box-shadow: $shadow; - } - - // Hover state - @if $color-hover { - // Generate CSS - @for $i from 2 through $bars { - $offset: ($weight + $spacing) * ($i - 1); - $hover-shadow: append($hover-shadow, 0 $offset 0 $color-hover, comma); - } - - &:hover::after { - background: $color-hover; - box-shadow: $hover-shadow; - } - } -} - -/// Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included. -/// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color. -/// -/// @param {Color} $color [$black] - Color to use for the triangle. -@mixin background-triangle($color: $black) { - $rgb: 'rgb(#{red($color)}, #{green($color)}, #{blue($color)})'; - - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #{$rgb}'></polygon></svg>"); - - @media screen and (min-width:0\0) { - @if lightness($color) < 50% { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=='); - } - @else { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg=='); - } - } -} - -/// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height. -/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack -@mixin clearfix { - &::before, - &::after { - content: ' '; - display: table; - } - - &::after { - clear: both; - } -} - -/// Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container. -/// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS -/// -/// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items. -/// @param {Keyword} $elem [li] - Tag to use for sibling selectors. -@mixin auto-width($max, $elem: li) { - @for $i from 2 through $max { - &:nth-last-child(#{$i}):first-child, - &:nth-last-child(#{$i}):first-child ~ #{$elem} { - width: percentage(1 / $i); - } - } -} - -/// Removes the focus ring around an element when a mouse input is detected. -@mixin disable-mouse-outline { - [data-whatinput='mouse'] & { - outline: 0; - } -} - -/// Makes an element visually hidden, but still accessible to keyboards and assistive devices. -/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility -@mixin element-invisible { - position: absolute !important; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); -} - -/// Reverses the CSS output created by the `element-invisible()` mixin. -@mixin element-invisible-off { - position: static !important; - height: auto; - width: auto; - overflow: visible; - clip: auto; -} - -/// Vertically centers the element inside of its first non-static parent, -/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass -@mixin vertical-center { - position: absolute; - top: 50%; - transform: translateY(-50%); -} - -/// Horizontally centers the element inside of its first non-static parent, -/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass -@mixin horizontal-center { - position: absolute; - left: 50%; - transform: translateX(-50%); -} - -/// Absolutely centers the element inside of its first non-static parent, -/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass -@mixin absolute-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -// Remove in 6.1. -// Vertically centers an element using `transform`. -@mixin v-align-middle { - @include vertical-center; -} diff --git a/css/foundation/util/_selector.scss b/css/foundation/util/_selector.scss deleted file mode 100755 index 65b00b4..0000000 --- a/css/foundation/util/_selector.scss +++ /dev/null @@ -1,40 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group functions -//// - -/// Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors. -/// -/// @param {List|Keyword} $types [()] - A list of text input types to use. Leave blank to use all of them. -@function text-inputs($types: ()) { - $return: (); - - $all-types: - text - password - date - datetime - datetime-local - month - week - email - number - search - tel - time - url - color; - - @if not has-value($types) { - $types: $all-types; - } - - @each $type in $types { - $return: append($return, unquote('[type=\'#{$type}\']'), comma); - } - - @return $return; -} diff --git a/css/foundation/util/_unit.scss b/css/foundation/util/_unit.scss deleted file mode 100755 index a87f07f..0000000 --- a/css/foundation/util/_unit.scss +++ /dev/null @@ -1,76 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group functions -//// - -// scss-lint:disable ZeroUnit - -/// Defines the base font size of the page, which is the value `1rem` is equal to. -/// @type Number -/// @group global -$rem-base: 16px !default; - -/// Removes the unit (e.g. px, em, rem) from a value, returning the number only. -/// -/// @param {Number} $num - Number to strip unit from. -/// -/// @returns {Number} The same number, sans unit. -@function strip-unit($num) { - @return $num / ($num * 0 + 1); -} - -/// Converts one or more pixel values into matching rem values. -/// -/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses. -/// @param {Number} $base [$rem-base] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. -/// -/// @returns {List} A list of converted values. -@function rem-calc($values, $base: $rem-base) { - $rem-values: (); - $count: length($values); - - @if $base == null { - $base: $rem-base; - } - - @if $count == 1 { - @return -zf-to-rem($values, $base); - } - - @for $i from 1 through $count { - $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base)); - } - - @return $rem-values; -} - -// Converts a unitless, pixel, or rem value to em, for use in breakpoints. -@function -zf-bp-to-em($value) { - // Pixel and unitless values are converted to rems - @if unit($value) == 'px' or unitless($value) { - $value: rem-calc($value); - } - - // Then the value is converted to ems - @return strip-unit($value) * 1em; -} - -/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$rem-base` variable. -/// @access private -/// -/// @param {Number} $value - Pixel value to convert. -/// @param {Number} $base [$rem-base] - Base for pixel conversion. -/// -/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is. -@function -zf-to-rem($value, $base: $rem-base) { - // Calculate rem if units for $value is not rem - @if (unit($value) != 'rem') { - $value: strip-unit($value) / strip-unit($base) * 1rem; - } - // Turn 0rem into 0 - @if ($value == 0rem) { $value: 0; } - @return $value; -} diff --git a/css/foundation/util/_util.scss b/css/foundation/util/_util.scss deleted file mode 100755 index 5ab38d2..0000000 --- a/css/foundation/util/_util.scss +++ /dev/null @@ -1,15 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -// Utilities -@import 'unit'; -@import 'value'; -@import 'color'; -@import 'selector'; - -// Libraries -@import 'breakpoint'; - -// Mixins -@import 'mixins'; diff --git a/css/foundation/util/_value.scss b/css/foundation/util/_value.scss deleted file mode 100755 index 54c5443..0000000 --- a/css/foundation/util/_value.scss +++ /dev/null @@ -1,132 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group functions -//// - -/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list. **This function was originally named `hasvalue()`. The old name for the function will be removed in Foundation 6.1.** -/// -/// @param {Mixed} $val - Value to check. -/// -/// @returns {Boolean} `true` if `$val` is not falsey. -@function has-value($val) { - @if $val == null or $val == none { - @return false; - } - @if type-of($val) == 'number' and strip-unit($val) == 0 { - @return false; - } - @if type-of($val) == 'list' and length($val) == 0 { - @return false; - } - @return true; -} - -// Remove this in 6.1. -@function hasvalue($val) { - @warn 'The function hasvalue() was renamed to has-value(). The old function name will be removed in Foundation 6.1.'; - @return has-value($val); -} - -/// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format. -/// -/// @param {List|Number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em" -/// @param {Keyword} $side - Side to return. Should be `top`, `right`, `bottom`, or `left`. -/// -/// @returns {Number} A single value based on `$val` and `$side`. -@function get-side($val, $side) { - $length: length($val); - - @if $length == 1 { - @return $val; - } - @if $length == 2 { - @return map-get(( - top: nth($val, 1), - bottom: nth($val, 1), - left: nth($val, 2), - right: nth($val, 2), - ), $side); - } - @if $length == 3 { - @return map-get(( - top: nth($val, 1), - left: nth($val, 2), - right: nth($val, 2), - bottom: nth($val, 3), - ), $side); - } - @if $length == 4 { - @return map-get(( - top: nth($val, 1), - right: nth($val, 2), - bottom: nth($val, 3), - left: nth($val, 4), - ), $side); - } -} - -/// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color. -/// -/// @param {List} $val - Border value to find a value in. -/// @param {Keyword} $elem - Border component to extract. -/// -/// @returns {Mixed} If the value exists, returns the value. If the value is not in the border definition, the function will return a 0px width, solid style, or black border. -@function get-border-value($val, $elem) { - // Find the width, style, or color and return it - @each $v in $val { - $type: type-of($v); - @if $elem == width and $type == 'number' { - @return $v; - } - @if $elem == style and $type == 'string' { - @return $v; - } - @if $elem == color and $type == 'color' { - @return $v; - } - } - - // Defaults - $defaults: ( - width: 0, - style: solid, - color: #000, - ); - @return map-get($defaults, $elem); -} - -/// Calculates x^y, where x is `$base` and y is `$power`. -/// @access private -/// -/// @param {Number} $base - Base number (x). -/// @param {Number} $power - Exponent (y). -@function pow($base, $power) { - @if $power == 0 { @return 1; } - @return $base * pow($base, $power - 1); -} - -// TODO: Remove this (it's used by the grid but is overkill) -/// Given a user-defined list of keywords and a list of possible keywords, find the ones that were passed in. -/// @access private -/// -/// @param {List} $opts - List of values to find keywords in. -/// @param {List} $seeking - List of all possible keywords. -/// -/// @returns {Map} A map of all keywords in $seeking. If a keyword was found in $opts, its value is true, otherwise false. -@function -zf-get-options($opts, $seeking) { - @if type-of($opts) != 'list' { - $opts: ($opts); - } - - $map: (); - @each $keyword in $seeking { - $val: if(index($opts, $keyword) != null, true, false); - $item: ($keyword: $val); - $map: map-merge($map, $item); - } - - @return $map; -} diff --git a/css/foundation/vendor/normalize.scss b/css/foundation/vendor/normalize.scss deleted file mode 100755 index 5e5e3c8..0000000 --- a/css/foundation/vendor/normalize.scss +++ /dev/null @@ -1,424 +0,0 @@ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Improve readability of focused elements when they are also in an - * active/hover state. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; /* 2 */ -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..518b4c9 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,23 @@ +var gulp = require('gulp'); +var $ = require('gulp-load-plugins')(); + +var sassPaths = [ + 'bower_components/foundation-sites/scss', + 'bower_components/motion-ui/src' +]; + +gulp.task('sass', function() { + return gulp.src('scss/app.scss') + .pipe($.sass({ + includePaths: sassPaths + }) + .on('error', $.sass.logError)) + .pipe($.autoprefixer({ + browsers: ['last 2 versions', 'ie >= 9'] + })) + .pipe(gulp.dest('css')); +}); + +gulp.task('default', ['sass'], function() { + gulp.watch(['scss/**/*.scss'], ['sass']); +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..e511d44 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "chromabits", + "version": "1.0.0", + "description": "Personal blog.", + "main": "gulpfile.js", + "devDependencies": { + "gulp": "^3.9.0", + "gulp-autoprefixer": "^2.2.0", + "gulp-load-plugins": "^1.1.0", + "gulp-sass": "^2.1.0" + }, + "scripts": { + "start": "gulp", + "build": "gulp sass" + }, + "repository": { + "type": "git", + "url": "https://github.com/zurb/foundation-sites-template.git" + }, + "author": "Eduardo Trujillo <ed@chromabits.com>", + "license": "MIT", + "private": true +} diff --git a/projects.md b/projects.md deleted file mode 100644 index f3cbc64..0000000 --- a/projects.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Projects ---- - -<div class="row"><div class="column"> - <h1 class="cardboard purple">Projects</h1> -</div></div> - - // TODO: Add listing of projects. diff --git a/projects/enclosure.md b/projects/enclosure.md new file mode 100644 index 0000000..aebb50e --- /dev/null +++ b/projects/enclosure.md @@ -0,0 +1,10 @@ +--- +title: Enclosure +platform: Javascript +--- + +IoC container for Node. + +<!--more--> + +An Inversion of Control (IoC) container implementation in JavaScript, with a module loading mechanism. Inspired by PHP frameworks and service oriented development. diff --git a/projects/ensure.md b/projects/ensure.md new file mode 100644 index 0000000..a2cdfc6 --- /dev/null +++ b/projects/ensure.md @@ -0,0 +1,12 @@ +--- +title: Ensure.js +platform: Javascript +--- + +A simple JavaScript type-checking library. + +<!--more--> + +Given the untyped nature of JavaScript, it can be hard or repetitive to write +the same checks for inputs and expected data. Ensure.js groups many of these +checks into a single library and makes it really easy to use. diff --git a/projects/legit.md b/projects/legit.md new file mode 100644 index 0000000..534d31b --- /dev/null +++ b/projects/legit.md @@ -0,0 +1,11 @@ +--- +title: Legit.js +platform: Javascript +--- + +Just another input validation library. + +<!--more--> + +It is inspired by Laravel's Validator. You create a validator instance, +add some rules, and you're good to go. diff --git a/projects/speedbump.md b/projects/speedbump.md new file mode 100644 index 0000000..e916fa5 --- /dev/null +++ b/projects/speedbump.md @@ -0,0 +1,12 @@ +--- +title: Speedbump +platform: Go +--- + +A rate-limitter in Go. + +<!--more--> + +Uses Redis as its backing store to keep track of requests per client and properly apply limits through a cluster of servers. While it includes timing functions for per second, minute and hour limits, it also supports custom functions. + +Additionally, a middleware component for the popular Go framework, Gin is included. Making it easier to add rate limits to APIs and web applications written in Go and running behind a load balancer (such as Amazon's ELB). diff --git a/projects/vertex.md b/projects/vertex.md new file mode 100644 index 0000000..7ac7133 --- /dev/null +++ b/projects/vertex.md @@ -0,0 +1,12 @@ +--- +title: Vertex +platform: Docker +--- + +A Docker image that I created for some of my personal and work projects. + +<!--more--> + +It comes with all the basic tools for running a Node.js application +(Npm, Bower, and Grunt). Additionally, with some extra configuration it can +run PHP applications using HHVM and Nginx. diff --git a/css/_code.scss b/scss/_code.scss similarity index 100% rename from css/_code.scss rename to scss/_code.scss diff --git a/css/_colors.scss b/scss/_colors.scss similarity index 100% rename from css/_colors.scss rename to scss/_colors.scss diff --git a/css/_headers.scss b/scss/_headers.scss similarity index 100% rename from css/_headers.scss rename to scss/_headers.scss diff --git a/css/_settings.scss b/scss/_settings.scss similarity index 99% rename from css/_settings.scss rename to scss/_settings.scss index 631859a..cd4b21f 100644 --- a/css/_settings.scss +++ b/scss/_settings.scss @@ -38,7 +38,7 @@ // 33. Tooltip // 34. Top Bar -@import 'foundation/util/util'; +@import 'util/util'; // 1. Global // --------- diff --git a/css/app.scss b/scss/app.scss similarity index 90% rename from css/app.scss rename to scss/app.scss index 4529235..c2ca346 100644 --- a/css/app.scss +++ b/scss/app.scss @@ -1,7 +1,7 @@ @import 'settings'; // Foundation -@import 'foundation/foundation'; +@import 'foundation'; @include foundation-global-styles; @include foundation-flex-grid; @@ -94,3 +94,14 @@ figcaption { content: 'fig. ' } } + +@include breakpoint(medium) { + .masonry { + column-count: 3; + column-gap: rem-calc(15); + + .callout { + margin-bottom: rem-calc(15); + } + } +} diff --git a/site.hs b/site.hs index a2a7607..a50fa51 100644 --- a/site.hs +++ b/site.hs @@ -55,13 +55,11 @@ main = hakyllWith hakyllConf $ do route idRoute compile copyFileCompiler - match "css/app.scss" $ do + match "css/app.css" $ do route $ setExtension "css" - compile $ liftM (fmap compressCss) (getResourceString >>= - withItemBody - (unixFilter "sass" ["-s", "--scss", "--load-path=css"])) + compile copyFileCompiler - match (fromList ["about.md", "projects.md"]) $ do + match (fromList ["about.md"]) $ do route $ setExtension "html" compile $ pandocHtml5Compiler >>= loadAndApplyTemplate "templates/default.html" defaultContext @@ -98,6 +96,21 @@ main = hakyllWith hakyllConf $ do >>= loadAndApplyTemplate "templates/default.html" ctx >>= relativizeUrls + match "projects/*" $ do + route $ setExtension "html" + compile $ do + compiled <- pandocHtml5Compiler + full <- loadAndApplyTemplate "templates/project.html" + defaultContext compiled + teaser <- loadAndApplyTemplate "templates/project-teaser.html" + defaultContext $ dropMore compiled + + saveSnapshot "teaser" teaser + + saveSnapshot "content" full + >>= loadAndApplyTemplate "templates/default.html" defaultContext + >>= relativizeUrls + create ["archive.html"] $ do route idRoute compile $ do @@ -113,6 +126,21 @@ main = hakyllWith hakyllConf $ do >>= loadAndApplyTemplate "templates/default.html" archiveCtx >>= relativizeUrls + create ["projects.html"] $ do + route idRoute + compile $ do + projects <- loadAllSnapshots "projects/*" "teaser" + + let archiveCtx = + listField "posts" defaultContext (return projects) `mappend` + constField "title" "Projects" `mappend` + defaultContext + + makeItem "" + >>= loadAndApplyTemplate "templates/projects.html" archiveCtx + >>= loadAndApplyTemplate "templates/default.html" archiveCtx + >>= relativizeUrls + pag <- buildPaginateWith grouper ("posts/*" .&&. hasNoVersion) makeId match "index.html" $ do @@ -146,13 +174,14 @@ main = hakyllWith hakyllConf $ do >>= recentFirst >>= applyTemplateList tpl ctx >>= makeItem - >>= loadAndApplyTemplate "templates/paginated.html" (ctx `mappend` bodyField "posts") - >>= loadAndApplyTemplate "templates/default.html" (ctx `mappend` bodyField "posts") + >>= loadAndApplyTemplate "templates/paginated.html" + (ctx `mappend` bodyField "posts") + >>= loadAndApplyTemplate "templates/default.html" + (ctx `mappend` bodyField "posts") >>= relativizeUrls match "templates/*" $ compile templateCompiler - -------------------------------------------------------------------------------- postCtx :: Context String postCtx = @@ -183,6 +212,9 @@ grouper ids = (liftM (paginateEvery 3) . sortRecentFirst) ids makeId :: PageNumber -> Identifier makeId pageNum = fromFilePath $ "page/" ++ show pageNum ++ "/index.html" +dropMore :: Item String -> Item String +dropMore = fmap (unlines . takeWhile (/= "<!--more-->") . lines) + -- | A special route that will produce paths compatible with the old Chromabits -- blog. The slug in that path is determined by a 'legacy' field on each post. legacyRoute :: Routes diff --git a/templates/default.html b/templates/default.html index 3407179..826b08f 100644 --- a/templates/default.html +++ b/templates/default.html @@ -46,5 +46,8 @@ </small> </div> </div> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"> + </script> </body> </html> diff --git a/templates/project-teaser.html b/templates/project-teaser.html new file mode 100644 index 0000000..33904ec --- /dev/null +++ b/templates/project-teaser.html @@ -0,0 +1,10 @@ +<div class="row"> + <div class="column"> + <a href="$url$" class="float-left"><h5>$title$</h5></a> + <div class="float-right"> + <span class="success label">$platform$</span> + </div> + </div> +</div> + +$body$ diff --git a/templates/project.html b/templates/project.html new file mode 100644 index 0000000..9f36a8c --- /dev/null +++ b/templates/project.html @@ -0,0 +1,3 @@ +<h2>$title$</h2> + +$body$ diff --git a/templates/projects.html b/templates/projects.html new file mode 100644 index 0000000..bb33ec1 --- /dev/null +++ b/templates/projects.html @@ -0,0 +1,13 @@ +<div class="row"><div class="column"> + <h1 class="cardboard purple">Projects</h1> +</div></div> + +<div class="masonry"> + $for(posts)$ + <div class="small-12"> + <div class="callout"> + $body$ + </div> + </div> + $endfor$ +</div> -- GitLab