diff --git a/assets/dist/css/kickoff.css b/assets/dist/css/kickoff.css index 2a981289..535c9e56 100644 --- a/assets/dist/css/kickoff.css +++ b/assets/dist/css/kickoff.css @@ -1,40 +1,66 @@ @charset "UTF-8"; /** - * Site dependencies - * See http://trykickoff.com/demos/ for more info + * ██╗ ██╗██╗ ██████╗██╗ ██╗ ██████╗ ███████╗███████╗ + * ██║ ██╔╝██║██╔════╝██║ ██╔╝██╔═══██╗██╔════╝██╔════╝ + * █████╔╝ ██║██║ █████╔╝ ██║ ██║█████╗ █████╗ + * ██╔═██╗ ██║██║ ██╔═██╗ ██║ ██║██╔══╝ ██╔══╝ + * ██║ ██╗██║╚██████╗██║ ██╗╚██████╔╝██║ ██║ + * ╚═╝ ╚═╝╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ + * By Zander Martineau & Ashley Nolan + * http://trykickoff.com + * + * Project dependencies + * ================================= + * - Mixins, helpers and functions + * - Core variables + * - CSS resets + * - Typography styles + * - Components + * - Partials + * - Views + * - Global styles + * - Helper/utility classes + * - Print styles + * + * Read about our distinction between views, partials and components at + * https://trykickoff.com/learn/css.html#views-partials--components + * + * ## Yeoman + * The Yeoman generator can also be used to add new views, partials and + * components. e.g. `yo kickoff:sass:component foo` will create a new file: + * `scss/components/_component.scss` and add the `@import` statement in this + * file. Install the generator by running `npm i -g yo generator-kickoff` + * */ /* * Mixins, helpers and functions - * Most CSS3 vendor prefixed items have a mixin, - * but we should not need them if autoprefixer is being used - * See mixins/css3.scss for the full list */ /** * Usage: * - * getVal(100, $map) - uses an integer - * getVal(mid, $map) - uses a Sass map - * getVal($foo, $map) - uses a Sass variable + * ko-getVal(100, $map) - uses an integer + * ko-getVal(mid, $map) - uses a Sass map + * ko-getVal($foo, $map) - uses a Sass variable */ /** * Get breakpoints * - * bp() + * ko-bp() * * Usage: - * bp(100) - uses an integer - * bp(mid) - uses the $breakpoints Sass map - * bp($foo) - uses a Sass variable + * ko-bp(100) - uses an integer + * ko-bp(mid) - uses the $breakpoints Sass map + * ko-bp($foo) - uses a Sass variable */ /** * Get type size * - * type() + * ko-type() * * Usage: - * type(100) - uses an integer - * type(mid) - uses the $type Sass map - * type($foo) - uses a Sass variable + * ko-type(100) - uses an integer + * ko-type(mid) - uses the $type Sass map + * ko-type($foo) - uses a Sass variable */ /** * Usage: @@ -49,10 +75,32 @@ ); div { - font-size: map-deep-get($grid-configuration, 'columns'); - width: map-deep-get($grid-configuration, 'layouts', 'medium'); + font-size: ko-map-deep-get($grid-configuration, 'columns'); + width: ko-map-deep-get($grid-configuration, 'layouts', 'medium'); } */ +/** + * Modular scale + * ================================= + * Usage: ko-modular-scale($font-size-base, 3, $type-scale) + * or with the shorthand version: ko-ms(3) + */ +/** + * Shorthand modular scale + * Uses the $font-size-base and $type-scale framework variables so that you + * only need to provide the scale increment + * + * e.g. ko-ms(5) + */ +/** + * Multiply + * ================= + * Multiply any value + * + * Usage: + * ko-multiply(15, 2) + * ko-multiply($baseline, 1.5) + */ /** * Sass Mixins * - Responsive @@ -73,30 +121,30 @@ /** * Min-width media query: * - Equivalent to: @media screen and (min-width: 20em) { ... } - * - Usage: @include respond-min(mid) { ... }; + * - Usage: @include ko-respond-min(mid) { ... }; */ /** * Max-width media query: * - Equivalent to: @media screen and (max-width: 20em) { ... } - * - Usage: @include respond-max(mid) { ... }; + * - Usage: @include ko-respond-max(mid) { ... }; */ /** * Min-max-width media query: * - Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... } - * - Usage: @include respond-min-max(narrow, 600) { ... }; + * - Usage: @include ko-respond-min-max(narrow, 600) { ... }; */ /** * HiDPI mixin. - * @include hidpi { ... }; + * @include ko-hidpi { ... }; * Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) */ /** * Hidpi with a minimum width media query - * @include hidpi-min(bp(mid), 1.5) { ... }; + * @include ko-hidpi-min(bp(mid), 1.5) { ... }; */ /** * Hidpi with a max width media query - * @include hidpi-max(bp(mid), 1.3) { ... }; + * @include ko-hidpi-max(bp(mid), 1.3) { ... }; */ /** * Dimensions-based mixins @@ -110,15 +158,15 @@ * Typography mixins */ /** - * position + * ko-position * Usage: - * @include position(absolute, 10px 20px 30px 10px); + * @include ko-position(absolute, 10px 20px 30px 10px); */ /** * vertical-center * Vertically center any element. Needs support for CSS tranforms. * Usage: - * @include vertical-center; + * @include ko-vertical-center; */ /** * Utility Mixins @@ -145,7 +193,8 @@ * Edit your color palette and app vars before your begin */ /** - * Global Color palette + * Global color palette + * ================================= * - Generic colors * - Color scheme * - Common colors @@ -156,14 +205,17 @@ */ /** * Variables + * ================================= * - Typography * - Breakpoints * - Paths * - Layout & Grid * - App-specific */ +/* stylelint-disable indentation */ /** * Typography + * ================================= * * Base sizes: * Set this in pixels (but do not add px), @@ -171,120 +223,162 @@ */ /** * Breakpoints + * ================================= * There are no common breakpoints so these are just a suggestions * You'll need to define your own breakpoints to suit your design * Add your breakpoints to this Sass map * Used in the Kickoff grid */ /** - * Path vars + * Grid + * ================================= + * These variables will control the grid module. + * + * if your project doesnt use Kickoff’s default grid, you can delete these + */ +/** + * Path variables + * ================================= + */ +/** + * Z-index variables + * ================================= */ /** * App-specific variables + * ================================= + */ +/** + * CSS resets */ -/* CSS Reset - Normalize etc */ /** * Kickoff reset + * ================================= + * We use normalize.css for the bulk of our 'reset' */ html { box-sizing: border-box; } -*, *:before, *:after { +*, +*::before, +*::after { box-sizing: inherit; } -/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ +/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ /** - * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. - */ + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 3 */ } +/* Sections + ========================================================================== */ /** - * Remove the margin in all browsers (opinionated). - */ + * Remove the margin in all browsers (opinionated). + */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - * 2. Add the correct display in IE. - */ + * Add the correct display in IE 9-. + */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { - /* 1 */ +section { display: block; } /** - * Add the correct display in IE 9-. - */ -audio, -canvas, -progress, -video { - display: inline-block; } + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } +/* Grouping content + ========================================================================== */ /** - * Add the correct display in iOS 4-7. - */ -audio:not([controls]) { - display: none; - height: 0; } + * Add the correct display in IE 9-. + */ +figcaption, +figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ -progress { - vertical-align: baseline; } + * Add the correct margin in IE 8. + */ +figure { + margin: 1em 40px; } /** - * Add the correct display in IE 10-. - * 1. Add the correct display in IE. - */ -template, -[hidden] { - display: none; } + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * Add the correct display in IE. + */ +main { + display: block; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /* Links - ========================================================================== */ + ========================================================================== */ /** - * Remove the gray background on active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ a:active, a:hover { outline-width: 0; } /* Text-level semantics - ========================================================================== */ + ========================================================================== */ /** - * 1. Remove the bottom border in Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ abbr[title] { border-bottom: none; /* 1 */ @@ -294,50 +388,54 @@ abbr[title] { /* 2 */ } /** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ b, strong { font-weight: inherit; } /** - * Add the correct font weight in Chrome, Edge, and Safari. - */ + * Add the correct font weight in Chrome, Edge, and Safari. + */ b, strong { font-weight: bolder; } /** - * Add the correct font style in Android 4.3-. - */ -dfn { - font-style: italic; } + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - margin: 0.67em 0; } + * Add the correct font style in Android 4.3-. + */ +dfn { + font-style: italic; } /** - * Add the correct background and color in IE 9-. - */ + * Add the correct background and color in IE 9-. + */ mark { background-color: #ff0; color: #000; } /** - * Add the correct font size in all browsers. - */ + * Add the correct font size in all browsers. + */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ sub, sup { font-size: 75%; @@ -352,214 +450,244 @@ sup { top: -0.5em; } /* Embedded content - ========================================================================== */ -/** - * Remove the border on images inside links in IE 10-. - */ -img { - border-style: none; } - + ========================================================================== */ /** - * Hide the overflow in IE. - */ -svg:not(:root) { - overflow: hidden; } + * Add the correct display in IE 9-. + */ +audio, +video { + display: inline-block; } -/* Grouping content - ========================================================================== */ /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ } + * Add the correct display in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; } /** - * Add the correct margin in IE 8. - */ -figure { - margin: 1em 40px; } + * Remove the border on images inside links in IE 10-. + */ +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; } /* Forms - ========================================================================== */ + ========================================================================== */ /** - * Change font properties to `inherit` in all browsers (opinionated). - */ + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ button, input, +optgroup, select, textarea { - font: inherit; } - -/** - * Restore the font weight unset by the previous rule. - */ -optgroup { - font-weight: bold; } + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } /** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - * 2. Show the overflow in Edge, Firefox, and IE. - */ -button, -input, -select { - /* 2 */ + * Show the overflow in IE. + */ +button { overflow: visible; } /** - * Remove the margin in Safari. - * 1. Remove the margin in Firefox and Safari. - */ -button, -input, -select, -textarea { - /* 1 */ - margin: 0; } - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ button, select { /* 1 */ text-transform: none; } /** - * Change the cursor in all browsers (opinionated). - */ + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ button, -[type="button"], +html [type="button"], [type="reset"], [type="submit"] { - cursor: pointer; } - -/** - * Restore the default cursor to disabled elements unset by the previous rule. - */ -[disabled] { - cursor: default; } + -webkit-appearance: button; + /* 2 */ } -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS. - */ button, -html [type="button"], +[type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; + /** + * Remove the inner border and padding in Firefox. + */ + /** + * Restore the focus styles unset by the previous rule. + */ } + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** + * Show the overflow in Edge. + */ +input { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; /* 2 */ } /** - * Remove the inner border and padding in Firefox. - */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } /** - * Restore the focus styles unset by the previous rule. - */ -button:-moz-focusring, -input:-moz-focusring { - outline: 1px dotted ButtonText; } + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ + /** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ } + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } /** - * Change the border, margin, and padding in all browsers (opinionated). - */ + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ legend { box-sizing: border-box; /* 1 */ - color: inherit; - /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ + color: inherit; + /* 2 */ white-space: normal; /* 1 */ } /** - * Remove the default vertical scrollbar in IE. - */ + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Remove the default vertical scrollbar in IE. + */ textarea { overflow: auto; } -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ } +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * Add the correct display in IE 9-. + */ +menu { + display: block; } +/* Scripting + ========================================================================== */ /** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; } + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } /** - * Correct the odd appearance of search inputs in Chrome and Safari. - */ -[type="search"] { - -webkit-appearance: textfield; } + * Add the correct display in IE. + */ +template { + display: none; } +/* Hidden + ========================================================================== */ /** - * Remove the inner padding and cancel buttons in Chrome on OS X and - * Safari on OS X. - */ -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } /** - * Global typography styles - * See http://trykickoff.com/demos/typography.html for more info + * Typography styles + * See https://trykickoff.com/demos/typography.html for more info */ /** * Typography + * ================================= * - Base * - Paragraphs * - Headings @@ -568,26 +696,24 @@ textarea { * - Utilities * * Body font size, leadings etc have been set in _variables.scss - * Resources: - * http://www.gridlover.net/ - * http://modularscale.com/ - * http://lamb.cc/typograph/ + * + * See http://modularscale.com for * */ html { font-size: 18px; -webkit-text-size-adjust: 100%; } - @media screen and (min-width: 46.875em) { + @media (min-width: 751px) { html { font-size: 20px; } } body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 1rem; line-height: 1.4; color: #444; - -webkit-font-feature-settings: "liga","dlig", "hist"; - font-feature-settings: "liga","dlig", "hist"; + -webkit-font-feature-settings: "liga", "dlig", "hist"; + font-feature-settings: "liga", "dlig", "hist"; -webkit-font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures; font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures; } @@ -595,7 +721,7 @@ body { * Paragraphs */ p { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 1rem; margin-top: 0; margin-bottom: 28px; } @@ -603,39 +729,69 @@ p { /** * Headings */ -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin: 0; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: bold; line-height: 1.1; text-rendering: optimizelegibility; margin-top: 0; margin-bottom: 28px; } - h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + h1 small, + h2 small, + h3 small, + h4 small, + h5 small, + h6 small { font-weight: normal; } -h1, .h1, .alpha { - font-size: 2rem; +h1, +.h1, +.alpha { + font-size: 1.95312rem; margin-bottom: 56px; } -h2, .h2, .beta { - font-size: 1.6rem; } +h2, +.h2, +.beta { + font-size: 1.5625rem; } -h3, .h3, .gamma { +h3, +.h3, +.gamma { font-size: 1.25rem; } -h4, .h4, .delta { +h4, +.h4, +.delta { font-size: 1rem; } -h5, .h5, .epsilon, -h6, .h6, .zeta { +h5, +.h5, +.epsilon, +h6, +.h6, +.zeta { font-size: 1rem; margin-bottom: 0; } -* + h1, * + .h1, * + .alpha, -* + h2, * + .h2, * + .beta, -* + h3, * + .h3, * + .gamma, -* + h4, * + .h4, * + .delta { +* + h1, +* + .h1, +* + .alpha, +* + h2, +* + .h2, +* + .beta, +* + h3, +* + .h3, +* + .gamma, +* + h4, +* + .h4, +* + .delta { margin-top: 28px; } small { @@ -644,10 +800,12 @@ small { /** * Miscellaneous */ -strong, b { +strong, +b { font-weight: bold; } -em, i { +em, +i { font-style: italic; } abbr[title] { @@ -668,12 +826,12 @@ blockquote { blockquote small { display: block; color: #b3b3b3; } - blockquote small:before { + blockquote small::before { content: '\2014 \00A0'; } -q:before, q:after, -blockquote:before, -blockquote:after { +q::before, q::after, +blockquote::before, +blockquote::after { content: ""; } cite { @@ -687,17 +845,18 @@ mark { padding: 2px 4px; border-radius: 3px; } -sub, sup { - font-size: 75%; +sub, +sup { + font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { - top: -.5em; } + top: -0.5em; } sub { - bottom: -.25em; } + bottom: -0.25em; } samp { font-family: Menlo, Monaco, "Courier New", monospace; } @@ -739,1246 +898,762 @@ hr { hyphens: auto; } /** - * Components: - * See http://trykickoff.com/demos/components.html for more info + * Components + * See https://trykickoff.com/demos/components.html for more info + * + * Note: place all 3rd party components at the top of the list */ +.fluidVideo { + position: relative; + height: 0; + padding-bottom: 56.25%; } + .fluidVideo--4-3 { + padding-bottom: 75%; } + +.fluidVideo-item, +.fluidVideo iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + /** - * Forms + * The Kickoff Flexbox Grid * ================================= - * Index: - * - Associated Form Variables - * - Generic form styles - * - Form inputs and groups - * - Form field feedback states - * - Horizontal & vertical forms - * - Horizontal-specific styles + * Default grid classes + * Grid gutter options + * Modifier Classes (column height and cell alignment) + * Legacy fallbacks for flexbox + * Grid span classes + * Breakpoint stacking */ +/* Import Grid helpers and mixins */ /** - * Custom Checkboxes and radios - * - * IE9+ - * - * -------------------------------- - * - * Checkbox button example HTML - * - * - * - * ------------------------------- + * Grid Variables + * ================================= + * These are defined here so that the grid can run as a standalone module (outside of Kickoff), + * as well as allowing these files to be generated into standard CSS. * - * Radio button example HTML + * When importing the grid into your own project, copy the variables from this file into your own variables.scss + * They will then override the values specified here (as long as the grid is imported below where your own variables are defined). + */ +/** + * Kickoff grid helpers + */ +/** + * Grid stacking + * Stack grids based on a given breakpoint * - * + * Usage: + * .g--stack--narrow + * .g--stack--wide + */ +/** + * Gutter Calculations + * Default: percent + * Usage: ko-gutterCalc() or ko-gutterCalc(false) + * When show-unit is true, returns the percentage, otherwise return a decimal + */ +/** + * Grid columns width calculations + * This is where the magic of working out the column widths happens * - * ================================= */ -.control--custom { - position: relative; - display: block; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - padding-left: 2.3em; } - -.control--custom--inline { - display: inline-block; - padding-right: 2em; } - -.control--custom-input { - position: absolute; - opacity: 0; - z-index: -1; } - -.control-indicator { - position: absolute; - left: 0; - display: inline-block; - width: 1.3em; - height: 1.3em; - -webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); - transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); - border: 1px solid #ccc; - background-color: #ccc; - vertical-align: middle; - margin-top: 0; - box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; } - -.control--custom-input:focus ~ .control-indicator { - box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 3px #181830; } + * $column-span: define the width for the number of columns required + * $show-unit: Switch return value between percentage (default) and decimal + * $include-gutters: if gutters should be included in the calculations. Default = false + * $legacy-calc: if we are working out a legacy column width calculation, or not. Default = false + */ +/** + * Column width mixin + * Usage: + * @include column(2); + */ +/** + * Basic Usage: + * ================================= +
+
+
+
+ */ +.g { + display: -webkit-box !important; + display: -ms-flexbox !important; + display: flex !important; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } + .g img { + max-width: 100%; } -.control-indicator--checkbox, -.control-indicator--tickbox { - border-radius: .2em; } - .control-indicator--checkbox:before, .control-indicator--checkbox:after, - .control-indicator--tickbox:before, - .control-indicator--tickbox:after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 90%; - display: block; - opacity: 0; - -webkit-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; } +.g-col { + display: block; + -webkit-box-flex: 1; + -ms-flex: 1 0 0%; + flex: 1 0 0%; + min-width: 0; } -.control-indicator--checkbox:before, .control-indicator--checkbox:after { - top: 50%; - width: 90%; - height: 0.1em; - background-color: #f1f1f1; } +/** + * Gutter calcs – applied to grid columns in our grid (direct descendants only) + * Default: pixels (can look at changing to percentage) + * Usage: gutterCalc() or gutterCalc(false) + */ +.g--gutter { + margin-left: -10px; + margin-right: -10px; } + .g--gutter > .g-col { + padding-left: 10px; + padding-right: 10px; } -.control-indicator--checkbox:before { - -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0); - -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0); - transform: translate(-50%, -50%) rotate(45deg) scale(0); } +.g--gutter--scaled > .g-col { + margin-left: 2%; + margin-right: 0; } + .g--gutter--scaled > .g-col:first-child { + margin-left: 0; } -.control-indicator--checkbox:after { - -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(0); - -ms-transform: translate(-50%, -50%) rotate(-45deg) scale(0); - transform: translate(-50%, -50%) rotate(-45deg) scale(0); } +.g--stack > .g-col { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } -.control-indicator--tickbox:before { - top: 0; - -webkit-transform: translateX(-50%) rotate(45deg) scale(0); - -ms-transform: translateX(-50%) rotate(45deg) scale(0); - transform: translateX(-50%) rotate(45deg) scale(0); - border: 0.1em solid #f1f1f1; - background-color: transparent; - width: 40%; - height: 80%; - border-top: 0; - border-left: 0; } +.g--stack.g--gutter--scaled > .g-col { + margin-left: 0; } -.control-indicator--tickbox:after { - display: none; } +/** + * .g--equalHeight – Equal Height Child Elements + */ +.g--equalHeight > .g-col { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .g--equalHeight > .g-col > * { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; } -.control--custom-input:checked ~ .control-indicator--checkbox, -.control--custom-input:checked ~ .control-indicator--tickbox { - background-color: #181830; - border: 0.1em solid #181830; } - .control--custom-input:checked ~ .control-indicator--checkbox:before, .control--custom-input:checked ~ .control-indicator--checkbox:after, - .control--custom-input:checked ~ .control-indicator--tickbox:before, - .control--custom-input:checked ~ .control-indicator--tickbox:after { - opacity: 1; } +/** + * Alignment + * Modifier classes to move our grid elements around + */ +.g--alignTop { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } -.control--custom-input:checked ~ .control-indicator--tickbox:before, .control--custom-input:checked ~ .control-indicator--tickbox:after { - -webkit-transform: translateX(-50%) rotate(45deg) scale(1); - -ms-transform: translateX(-50%) rotate(45deg) scale(1); - transform: translateX(-50%) rotate(45deg) scale(1); } +.g--alignBottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; } -.control--custom-input:checked ~ .control-indicator--checkbox:before { - -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1); - -ms-transform: translate(-50%, -50%) rotate(45deg) scale(1); - transform: translate(-50%, -50%) rotate(45deg) scale(1); } +.g--alignSelfBottom { + -ms-flex-item-align: end; + align-self: flex-end; } -.control--custom-input:checked ~ .control-indicator--checkbox:after { - -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(1); - -ms-transform: translate(-50%, -50%) rotate(-45deg) scale(1); - transform: translate(-50%, -50%) rotate(-45deg) scale(1); } +.g--alignRight { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } -.control-indicator--radio { - border-radius: 50%; } +.g--alignCenter { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } -.control--custom-input:checked ~ .control-indicator--radio { - background-color: #f1f1f1; - border: 0.3em solid #181830; } +.g--alignCenter--v { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } /** - * Custom select element - * - * Firefox 39+, IE10+ - * - *
- * - *
- * - *
- *
+ * Centering + * Centers an individual column, rather than the entire grid */ -.form-controlGroup-inputWrapper--select { - position: relative; - display: block; - padding: 0; - /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */ } - .form-controlGroup-inputWrapper--select:after { - color: #181830; - content: "\25BC"; - font-size: .7em; - padding: 0; - position: absolute; - right: 1.2em; - top: 50%; - margin-top: -9px; - z-index: 2; - /* These hacks make the select behind the arrow clickable in some browsers */ - -ms-pointer-events: none; - pointer-events: none; - background: url(#); } - @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .form-controlGroup-inputWrapper--select:after { - display: none; } } - .form-controlGroup-inputWrapper--select .form-input--select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } - @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value { - background: transparent; - color: #222; } } - -option { - font-weight: normal; } +.g-col--centered { + margin: 0 auto; } /** - * Custom file input + * Shrinking Content + * Shrink a .g-col down to only the space it needs (flexbox only) * - *
- - -
- -
-
+ * Effectively just changes it’s values back to the default flex properties */ -/** - * Custom file input - */ -.form-input--file { - position: relative; - overflow: hidden; - padding-right: 120px; - text-overflow: ellipsis; - white-space: nowrap; } - -.form-input-file { - opacity: 0; - visibility: hidden; - position: absolute; - top: 0; - left: 0; } - -.form-input--file-button { - cursor: pointer; - display: inline-block; - position: absolute; - top: 0; - right: -1px; - bottom: 0; - padding: .44em 1em 0; - background-color: #d9d9d9; } - .form-input--file-button:hover { - background-color: #ccc; } +.g-col--shrink { + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; } /** - * Generic form styles - * ================================= - * Demo: http://trykickoff.com/demos/forms.html#layout-example-labels-above - * Code: https://gist.github.com/mrmartineau/6712577#file-labels-above-inputs-html - * Usage: -
- -
- -
-
+ * Add fallbacks for non-flexbox supporting browsers (for example, IE8/9) */ -.form { - margin: 0 0 28px; } +.no-flexbox .g { + display: block !important; } + .no-flexbox .g:after { + content: ""; + display: table; + clear: both; } -.form-fieldset { - padding: 0; - margin: 0; - border: 0; } +.no-flexbox .g-col { + float: left; + min-height: 1px; + clear: none; + box-sizing: border-box; } -.form-legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: 28px; - font-size: 1.25rem; - line-height: 1.4; - color: #444; - border: 0; - border-bottom: 1px solid #eee; - white-space: normal; } - .form-legend small { - font-size: 0.8rem; - color: #b3b3b3; } +.no-flexbox .g--stack .g-col { + width: 100%; } + +.no-flexbox .g--equalHeight > .g-col { + display: block; } /** - * Form inputs and groups + * Grid Span classes (for different breakpoints) + * + * Applied by using .g-spanx to .g-col elements, where x is the number of columns */ -.form-controlGroup { - margin-top: 14px; - margin-bottom: 14px; - list-style-type: none; } +.g-span1 { + -ms-flex-preferred-size: 8.33333% !important; + flex-basis: 8.33333% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 8.33333% !important; } + .g-span1.g-holdWidth { + min-width: 83.33333px; } + .g--gutter--scaled .g-span1.g-holdWidth { + min-width: 63.33333px; } + .g--gutter--scaled .g-span1 { + -ms-flex-preferred-size: 6.5% !important; + flex-basis: 6.5% !important; + max-width: 6.5%; + margin-left: 2%; } + .no-flexbox .g-span1 { + width: 8.33333% !important; } -.form-legend + .form-controlGroup { - margin-top: 28px; - -webkit-margin-top-collapse: separate; } +.g-offset1 { + margin-left: 8.33333% !important; } -.form-label { - display: block; - color: #444; - font-weight: bold; } - .form-label small { - font-weight: normal; - color: #919191; } +.g-span2 { + -ms-flex-preferred-size: 16.66667% !important; + flex-basis: 16.66667% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 16.66667% !important; } + .g-span2.g-holdWidth { + min-width: 166.66667px; } + .g--gutter--scaled .g-span2.g-holdWidth { + min-width: 146.66667px; } + .g--gutter--scaled .g-span2 { + -ms-flex-preferred-size: 15% !important; + flex-basis: 15% !important; + max-width: 15%; + margin-left: 2%; } + .no-flexbox .g-span2 { + width: 16.66667% !important; } -.form-input { - display: block; - width: 100%; - height: 2.5em; - padding: .5em; - font-size: 1rem; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 1.4; - color: #444; - font-weight: normal; - vertical-align: baseline; - background-color: #fff; - border: 2px solid #ccc; - border-radius: 5px; - background-clip: padding-box; - -webkit-transition: border 200ms ease-in-out; - transition: border 200ms ease-in-out; } - .form-input:focus { - border-color: #181830; - outline: 0; - outline: thin dotted \9; } - .form-input[type="image"], .form-input[type="checkbox"], .form-input[type="radio"], .form-input[type="range"] { - width: auto; - height: auto; - padding: 0; - margin: 3px 0; - line-height: normal; - cursor: pointer; - border-radius: 0; - box-sizing: border-box; } - .form-input[type="image"] { - border: 0; } - .form-input[type="file"] { - width: auto; - height: 28px; - padding: initial; - line-height: initial; - border: initial; - background-color: #fff; - background-color: initial; } - .form-input[type="hidden"] { - display: none; } - .form-input[type="color"] { - width: 40px; - height: 40px; - overflow: hidden; - padding: 2px; } - .form-input[type="password"] { - font-family: sans-serif; } - .form-input[type="range"] { - width: 100%; } - .form-input > .radio:first-child, - .form-input > .checkbox:first-child { - padding-top: 5px; } - .form-input[disabled], .form-input[readonly] { - background-color: #e6e6e6; - border-color: #ccc; - cursor: not-allowed; } +.g-offset2 { + margin-left: 16.66667% !important; } -.form-input--textarea { - height: auto; - resize: vertical; } +.g-span3 { + -ms-flex-preferred-size: 25% !important; + flex-basis: 25% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 25% !important; } + .g-span3.g-holdWidth { + min-width: 250px; } + .g--gutter--scaled .g-span3.g-holdWidth { + min-width: 230px; } + .g--gutter--scaled .g-span3 { + -ms-flex-preferred-size: 23.5% !important; + flex-basis: 23.5% !important; + max-width: 23.5%; + margin-left: 2%; } + .no-flexbox .g-span3 { + width: 25% !important; } -.form-input--textarea--uneditable { - width: auto; - height: auto; } +.g-offset3 { + margin-left: 25% !important; } -.form-input--select { - background-color: #fff; } - .form-input--select[multiple], .form-input--select[size] { - height: auto; } +.g-span4 { + -ms-flex-preferred-size: 33.33333% !important; + flex-basis: 33.33333% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 33.33333% !important; } + .g-span4.g-holdWidth { + min-width: 333.33333px; } + .g--gutter--scaled .g-span4.g-holdWidth { + min-width: 313.33333px; } + .g--gutter--scaled .g-span4 { + -ms-flex-preferred-size: 32% !important; + flex-basis: 32% !important; + max-width: 32%; + margin-left: 2%; } + .no-flexbox .g-span4 { + width: 33.33333% !important; } -.form-input-file { - display: inline-block; - width: 100%; - font-size: 1rem; - margin: 0; - vertical-align: middle; - line-height: 1em; } - .form-input-file:focus { - outline: none; } - -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - width: auto; - cursor: pointer; - -webkit-appearance: button; } - -/** - * Checkboxes: - * ================================= - - - - * Radios: - * ================================= - - - */ -.control { - display: block; } - .control input[type="radio"], - .control input[type="checkbox"] { - vertical-align: middle; - margin-right: .5em; - margin-top: -.1em; - display: inline; - line-height: normal; } - -.control--inline { - display: inline-block; - vertical-align: middle; - margin-right: 1.5em; } - -/** - * Search input - */ -.form-input--search { - padding-left: 14px; - padding-right: 14px; - margin-bottom: 0; - border-radius: 100px; } - -/** - * Form actions - */ -.form-actions { - padding: 28px 20px; - margin-top: 28px; - margin-bottom: 28px; - background-color: #f5f5f5; - border-top: 1px solid #ddd; } - .form-actions .btn { - margin-right: 10px; } - .form-actions .btn:last-child { - margin-right: 0; } - -/** - * Form validation messages - */ -.form-controlGroup .form-message { - display: none; - padding-top: 0.5em; - padding-left: 0.5em; } - -.form-actions .form-message { - padding: 0.5em; } - -/** - * Form field feedback states - */ -.has-warning { - color: #f4aa47; } +.g-offset4 { + margin-left: 33.33333% !important; } -.form-controlGroup.has-warning .form-label { - color: #f4aa47; } - -.form-controlGroup.has-warning .form-input { - color: #f4aa47; - border-color: #f4aa47; } - .form-controlGroup.has-warning .form-input:focus { - border-color: #f19417; } - -.form-controlGroup.has-warning .form-message { - display: block; - color: #f4aa47; } - -.has-error { - color: #B94A4D; } +.g-span5 { + -ms-flex-preferred-size: 41.66667% !important; + flex-basis: 41.66667% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 41.66667% !important; } + .g-span5.g-holdWidth { + min-width: 416.66667px; } + .g--gutter--scaled .g-span5.g-holdWidth { + min-width: 396.66667px; } + .g--gutter--scaled .g-span5 { + -ms-flex-preferred-size: 40.5% !important; + flex-basis: 40.5% !important; + max-width: 40.5%; + margin-left: 2%; } + .no-flexbox .g-span5 { + width: 41.66667% !important; } -.form-controlGroup.has-error .form-label { - color: #B94A4D; } +.g-offset5 { + margin-left: 41.66667% !important; } -.form-controlGroup.has-error .form-input { - color: #B94A4D; - border-color: #B94A4D; } - .form-controlGroup.has-error .form-input:focus { - border-color: #963a3c; } +.g-span6 { + -ms-flex-preferred-size: 50% !important; + flex-basis: 50% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 50% !important; } + .g-span6.g-holdWidth { + min-width: 500px; } + .g--gutter--scaled .g-span6.g-holdWidth { + min-width: 480px; } + .g--gutter--scaled .g-span6 { + -ms-flex-preferred-size: 49% !important; + flex-basis: 49% !important; + max-width: 49%; + margin-left: 2%; } + .no-flexbox .g-span6 { + width: 50% !important; } -.form-controlGroup.has-error .form-message { - display: block; - color: #B94A4D; } +.g-offset6 { + margin-left: 50% !important; } -.has-success { - color: #16c98d; } +.g-span7 { + -ms-flex-preferred-size: 58.33333% !important; + flex-basis: 58.33333% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 58.33333% !important; } + .g-span7.g-holdWidth { + min-width: 583.33333px; } + .g--gutter--scaled .g-span7.g-holdWidth { + min-width: 563.33333px; } + .g--gutter--scaled .g-span7 { + -ms-flex-preferred-size: 57.5% !important; + flex-basis: 57.5% !important; + max-width: 57.5%; + margin-left: 2%; } + .no-flexbox .g-span7 { + width: 58.33333% !important; } -.form-controlGroup.has-success .form-label { - color: #16c98d; } +.g-offset7 { + margin-left: 58.33333% !important; } -.form-controlGroup.has-success .form-input { - color: #16c98d; - border-color: #16c98d; } - .form-controlGroup.has-success .form-input:focus { - border-color: #119b6d; } +.g-span8 { + -ms-flex-preferred-size: 66.66667% !important; + flex-basis: 66.66667% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 66.66667% !important; } + .g-span8.g-holdWidth { + min-width: 666.66667px; } + .g--gutter--scaled .g-span8.g-holdWidth { + min-width: 646.66667px; } + .g--gutter--scaled .g-span8 { + -ms-flex-preferred-size: 66% !important; + flex-basis: 66% !important; + max-width: 66%; + margin-left: 2%; } + .no-flexbox .g-span8 { + width: 66.66667% !important; } -.form-controlGroup.has-success .form-message { - display: block; - color: #16c98d; } +.g-offset8 { + margin-left: 66.66667% !important; } -.has-info { - color: #288ad6; } +.g-span9 { + -ms-flex-preferred-size: 75% !important; + flex-basis: 75% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 75% !important; } + .g-span9.g-holdWidth { + min-width: 750px; } + .g--gutter--scaled .g-span9.g-holdWidth { + min-width: 730px; } + .g--gutter--scaled .g-span9 { + -ms-flex-preferred-size: 74.5% !important; + flex-basis: 74.5% !important; + max-width: 74.5%; + margin-left: 2%; } + .no-flexbox .g-span9 { + width: 75% !important; } -.form-controlGroup.has-info .form-label { - color: #288ad6; } +.g-offset9 { + margin-left: 75% !important; } -.form-controlGroup.has-info .form-input { - color: #288ad6; - border-color: #288ad6; } - .form-controlGroup.has-info .form-input:focus { - border-color: #206eab; } +.g-span10 { + -ms-flex-preferred-size: 83.33333% !important; + flex-basis: 83.33333% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 83.33333% !important; } + .g-span10.g-holdWidth { + min-width: 833.33333px; } + .g--gutter--scaled .g-span10.g-holdWidth { + min-width: 813.33333px; } + .g--gutter--scaled .g-span10 { + -ms-flex-preferred-size: 83% !important; + flex-basis: 83% !important; + max-width: 83%; + margin-left: 2%; } + .no-flexbox .g-span10 { + width: 83.33333% !important; } -.form-controlGroup.has-info .form-message { - display: block; - color: #288ad6; } +.g-offset10 { + margin-left: 83.33333% !important; } -/** - * Placeholder text - * ================================= - * Gets special styles; can't be bundled together though for some reason - */ -:-ms-input-placeholder { - color: #b3b3b3; } +.g-span11 { + -ms-flex-preferred-size: 91.66667% !important; + flex-basis: 91.66667% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 91.66667% !important; } + .g-span11.g-holdWidth { + min-width: 916.66667px; } + .g--gutter--scaled .g-span11.g-holdWidth { + min-width: 896.66667px; } + .g--gutter--scaled .g-span11 { + -ms-flex-preferred-size: 91.5% !important; + flex-basis: 91.5% !important; + max-width: 91.5%; + margin-left: 2%; } + .no-flexbox .g-span11 { + width: 91.66667% !important; } -:-moz-placeholder { - color: #b3b3b3; } +.g-offset11 { + margin-left: 91.66667% !important; } -::-webkit-input-placeholder { - color: #b3b3b3; } +.g-span12 { + -ms-flex-preferred-size: 100% !important; + flex-basis: 100% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 100% !important; } + .g-span12.g-holdWidth { + min-width: 1000px; } + .g--gutter--scaled .g-span12.g-holdWidth { + min-width: 980px; } + .g--gutter--scaled .g-span12 { + -ms-flex-preferred-size: 100% !important; + flex-basis: 100% !important; + max-width: 100%; + margin-left: 0; } + .no-flexbox .g-span12 { + width: 100% !important; } -@media screen and (min-width: 46.875em) { - /** - * Horizontal-specific styles - * ================================= - * add .form--horizontal to the
element - * Demo: http://trykickoff.com/demos/forms.html#layout-example-labels-inline - * Code: https://gist.github.com/mrmartineau/6712577#file-labels-inline-html - */ - .form--horizontal .form-controlGroup { - margin-bottom: 28px; } - .form--horizontal .form-controlGroup:after { - content: ""; - display: table; - clear: both; } - .form--horizontal .form-controlGroup .form-input--fileWrapper { +@media (min-width: 400px) { + .g-span1--narrow { + -ms-flex-preferred-size: 8.33333% !important; + flex-basis: 8.33333% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 8.33333% !important; } + .g-span1--narrow.g-holdWidth--narrow { + min-width: 83.33333px; } + .g--gutter--scaled .g-span1--narrow.g-holdWidth--narrow { + min-width: 63.33333px; } + .g--gutter--scaled .g-span1--narrow { + -ms-flex-preferred-size: 6.5% !important; + flex-basis: 6.5% !important; + max-width: 6.5%; + margin-left: 2%; } + .no-flexbox .g-span1--narrow { + width: 8.33333% !important; } + .g-offset1--narrow { + margin-left: 8.33333% !important; } + .g-span2--narrow { + -ms-flex-preferred-size: 16.66667% !important; + flex-basis: 16.66667% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 16.66667% !important; } + .g-span2--narrow.g-holdWidth--narrow { + min-width: 166.66667px; } + .g--gutter--scaled .g-span2--narrow.g-holdWidth--narrow { + min-width: 146.66667px; } + .g--gutter--scaled .g-span2--narrow { + -ms-flex-preferred-size: 15% !important; + flex-basis: 15% !important; + max-width: 15%; + margin-left: 2%; } + .no-flexbox .g-span2--narrow { + width: 16.66667% !important; } + .g-offset2--narrow { + margin-left: 16.66667% !important; } + .g-span3--narrow { + -ms-flex-preferred-size: 25% !important; + flex-basis: 25% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 25% !important; } + .g-span3--narrow.g-holdWidth--narrow { + min-width: 250px; } + .g--gutter--scaled .g-span3--narrow.g-holdWidth--narrow { + min-width: 230px; } + .g--gutter--scaled .g-span3--narrow { + -ms-flex-preferred-size: 23.5% !important; + flex-basis: 23.5% !important; + max-width: 23.5%; + margin-left: 2%; } + .no-flexbox .g-span3--narrow { + width: 25% !important; } + .g-offset3--narrow { + margin-left: 25% !important; } + .g-span4--narrow { + -ms-flex-preferred-size: 33.33333% !important; + flex-basis: 33.33333% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 33.33333% !important; } + .g-span4--narrow.g-holdWidth--narrow { + min-width: 333.33333px; } + .g--gutter--scaled .g-span4--narrow.g-holdWidth--narrow { + min-width: 313.33333px; } + .g--gutter--scaled .g-span4--narrow { + -ms-flex-preferred-size: 32% !important; + flex-basis: 32% !important; + max-width: 32%; + margin-left: 2%; } + .no-flexbox .g-span4--narrow { + width: 33.33333% !important; } + .g-offset4--narrow { + margin-left: 33.33333% !important; } + .g-span5--narrow { + -ms-flex-preferred-size: 41.66667% !important; + flex-basis: 41.66667% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 41.66667% !important; } + .g-span5--narrow.g-holdWidth--narrow { + min-width: 416.66667px; } + .g--gutter--scaled .g-span5--narrow.g-holdWidth--narrow { + min-width: 396.66667px; } + .g--gutter--scaled .g-span5--narrow { + -ms-flex-preferred-size: 40.5% !important; + flex-basis: 40.5% !important; + max-width: 40.5%; + margin-left: 2%; } + .no-flexbox .g-span5--narrow { + width: 41.66667% !important; } + .g-offset5--narrow { + margin-left: 41.66667% !important; } + .g-span6--narrow { + -ms-flex-preferred-size: 50% !important; + flex-basis: 50% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 50% !important; } + .g-span6--narrow.g-holdWidth--narrow { + min-width: 500px; } + .g--gutter--scaled .g-span6--narrow.g-holdWidth--narrow { + min-width: 480px; } + .g--gutter--scaled .g-span6--narrow { + -ms-flex-preferred-size: 49% !important; + flex-basis: 49% !important; + max-width: 49%; + margin-left: 2%; } + .no-flexbox .g-span6--narrow { + width: 50% !important; } + .g-offset6--narrow { + margin-left: 50% !important; } + .g-span7--narrow { + -ms-flex-preferred-size: 58.33333% !important; + flex-basis: 58.33333% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 58.33333% !important; } + .g-span7--narrow.g-holdWidth--narrow { + min-width: 583.33333px; } + .g--gutter--scaled .g-span7--narrow.g-holdWidth--narrow { + min-width: 563.33333px; } + .g--gutter--scaled .g-span7--narrow { + -ms-flex-preferred-size: 57.5% !important; + flex-basis: 57.5% !important; + max-width: 57.5%; + margin-left: 2%; } + .no-flexbox .g-span7--narrow { + width: 58.33333% !important; } + .g-offset7--narrow { + margin-left: 58.33333% !important; } + .g-span8--narrow { + -ms-flex-preferred-size: 66.66667% !important; + flex-basis: 66.66667% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 66.66667% !important; } + .g-span8--narrow.g-holdWidth--narrow { + min-width: 666.66667px; } + .g--gutter--scaled .g-span8--narrow.g-holdWidth--narrow { + min-width: 646.66667px; } + .g--gutter--scaled .g-span8--narrow { + -ms-flex-preferred-size: 66% !important; + flex-basis: 66% !important; + max-width: 66%; + margin-left: 2%; } + .no-flexbox .g-span8--narrow { + width: 66.66667% !important; } + .g-offset8--narrow { + margin-left: 66.66667% !important; } + .g-span9--narrow { + -ms-flex-preferred-size: 75% !important; + flex-basis: 75% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 75% !important; } + .g-span9--narrow.g-holdWidth--narrow { + min-width: 750px; } + .g--gutter--scaled .g-span9--narrow.g-holdWidth--narrow { + min-width: 730px; } + .g--gutter--scaled .g-span9--narrow { + -ms-flex-preferred-size: 74.5% !important; + flex-basis: 74.5% !important; + max-width: 74.5%; + margin-left: 2%; } + .no-flexbox .g-span9--narrow { + width: 75% !important; } + .g-offset9--narrow { + margin-left: 75% !important; } + .g-span10--narrow { + -ms-flex-preferred-size: 83.33333% !important; + flex-basis: 83.33333% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 83.33333% !important; } + .g-span10--narrow.g-holdWidth--narrow { + min-width: 833.33333px; } + .g--gutter--scaled .g-span10--narrow.g-holdWidth--narrow { + min-width: 813.33333px; } + .g--gutter--scaled .g-span10--narrow { + -ms-flex-preferred-size: 83% !important; + flex-basis: 83% !important; + max-width: 83%; + margin-left: 2%; } + .no-flexbox .g-span10--narrow { + width: 83.33333% !important; } + .g-offset10--narrow { + margin-left: 83.33333% !important; } + .g-span11--narrow { + -ms-flex-preferred-size: 91.66667% !important; + flex-basis: 91.66667% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 91.66667% !important; } + .g-span11--narrow.g-holdWidth--narrow { + min-width: 916.66667px; } + .g--gutter--scaled .g-span11--narrow.g-holdWidth--narrow { + min-width: 896.66667px; } + .g--gutter--scaled .g-span11--narrow { + -ms-flex-preferred-size: 91.5% !important; + flex-basis: 91.5% !important; + max-width: 91.5%; + margin-left: 2%; } + .no-flexbox .g-span11--narrow { + width: 91.66667% !important; } + .g-offset11--narrow { + margin-left: 91.66667% !important; } + .g-span12--narrow { + -ms-flex-preferred-size: 100% !important; + flex-basis: 100% !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + max-width: 100% !important; } + .g-span12--narrow.g-holdWidth--narrow { + min-width: 1000px; } + .g--gutter--scaled .g-span12--narrow.g-holdWidth--narrow { + min-width: 980px; } + .g--gutter--scaled .g-span12--narrow { + -ms-flex-preferred-size: 100% !important; + flex-basis: 100% !important; + max-width: 100%; margin-left: 0; } - .form--horizontal .form-label { - float: left; - width: 140px; - padding-top: 5px; - text-align: right; } - .form--horizontal .form-controlGroup-inputWrapper { - margin-left: 160px; } - .form--horizontal .form-controlGroup-inputWrapper:first-child { - padding-left: 160px; } - .form--horizontal .form-helpBlock { - margin-top: 14px; - margin-bottom: 0; } - .form--horizontal .form-actions { - padding-left: 160px; } } - -/** - * The Kickoff Flexbox Grid - * ================================= - * Default grid classes - * Grid gutter options - * Modifier Classes (column height and cell alignment) - * Legacy fallbacks for flexbox - * Grid span classes - * Breakpoint stacking - */ -/* Import Grid helpers and mixins */ -/** - * Kickoff grid helpers - */ -/** - * Grid stacking - * Stack grids based on a given breakpoint - * - * Usage: - * .g--stack--narrow - * .g--stack--wide - */ -/** - * Gutter Calculations - * Default: percent - * Usage: gutterCalc() or gutterCalc(false) - * When show-unit is true, returns the percentage, otherwise return a decimal - */ -/** - * Grid columns width calculations - * This is where the magic of working out the column widths happens - * - * $column-span: define the width for the number of columns required - * $show-unit: Switch return value between percentage (default) and decimal - * $include-gutters: if gutters should be included in the calculations. Default = false - * $legacy-calc: if we are working out a legacy column width calculation, or not. Default = false - */ -/** - * Column width mixin - * Usage: - * @include column(2); - */ -/** - * Basic Usage: - * ================================= -
-
-
-
- */ -.g { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; } - -.g-col { - display: block; - -webkit-box-flex: 1; - -ms-flex: 1 0 0; - flex: 1 0 0; - min-width: 0; } - -/** - * Gutter calcs – applied to grid columns in our grid (direct descendants only) - * Default: pixels (can look at changing to percentage) - * Usage: gutterCalc() or gutterCalc(false) - */ -.g--gutter { - margin-left: -10px; - margin-right: -10px; } - .g--gutter > .g-col { - padding-left: 10px; - padding-right: 10px; } - -.g--gutter--scaled > .g-col { - margin-left: 2%; - margin-right: 0; } - .g--gutter--scaled > .g-col:first-child { - margin-left: 0; } - -.g--stack > .g-col { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - margin-left: 0; } + .no-flexbox .g-span12--narrow { + width: 100% !important; } } -/** - * .g--equalHeight – Equal Height Child Elements - */ -.g--equalHeight > .g-col { - display: -webkit-box; - display: -ms-flexbox; - display: flex; } - .g--equalHeight > .g-col > * { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; } - -/** - * Alignment - * Modifier classes to move our grid elements around - */ -.g--alignTop { - -webkit-box-align: start; - -ms-flex-align: start; - -ms-grid-row-align: flex-start; - align-items: flex-start; } - -.g--alignBottom { - -webkit-box-align: end; - -ms-flex-align: end; - -ms-grid-row-align: flex-end; - align-items: flex-end; } - -.g--alignRight { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; } - -.g--alignCenter { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - -.g--alignCenter--v { - -webkit-box-align: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; } - -/** - * Centering - * Centers an individual column, rather than the entire grid - */ -.g-col--centered { - margin: 0 auto; } - -/** - * Shrinking Content - * Shrink a .g-col down to only the space it needs (flexbox only) - */ -.g-col--shrink { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; } - -/** - * Add fallbacks for non-flexbox supporting browsers (for example, IE8/9) - */ -.no-flexbox .g { - display: block !important; } - .no-flexbox .g:after { - content: ""; - display: table; - clear: both; } - -.no-flexbox .g-col { - float: left; - min-height: 1px; - position: relative; - clear: none; - box-sizing: border-box; } - -.no-flexbox .g--stack .g-col { - width: 100%; } - -.no-flexbox .g--equalHeight > .g-col { - display: block; } - -/** - * Grid Span classes (for different breakpoints) - * - * Applied by using .g-spanx to .g-col elements, where x is the number of columns - */ -.g-span1 { - -ms-flex-preferred-size: 8.3333333333% !important; - flex-basis: 8.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 8.3333333333% !important; } - .g-span1.g-holdWidth { - min-width: 83.3333333333pxpx; } - .g--gutter--scaled .g-span1.g-holdWidth { - min-width: 63.3333333333pxpx; } - .g--gutter--scaled .g-span1 { - -ms-flex-preferred-size: 6.5% !important; - flex-basis: 6.5% !important; - max-width: 6.5%; - margin-left: 2%; } - .no-flexbox .g-span1 { - width: 8.3333333333% !important; } - -.g-span2 { - -ms-flex-preferred-size: 16.6666666667% !important; - flex-basis: 16.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 16.6666666667% !important; } - .g-span2.g-holdWidth { - min-width: 166.666666667pxpx; } - .g--gutter--scaled .g-span2.g-holdWidth { - min-width: 146.666666667pxpx; } - .g--gutter--scaled .g-span2 { - -ms-flex-preferred-size: 15% !important; - flex-basis: 15% !important; - max-width: 15%; - margin-left: 2%; } - .no-flexbox .g-span2 { - width: 16.6666666667% !important; } - -.g-span3 { - -ms-flex-preferred-size: 25% !important; - flex-basis: 25% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 25% !important; } - .g-span3.g-holdWidth { - min-width: 250pxpx; } - .g--gutter--scaled .g-span3.g-holdWidth { - min-width: 230pxpx; } - .g--gutter--scaled .g-span3 { - -ms-flex-preferred-size: 23.5% !important; - flex-basis: 23.5% !important; - max-width: 23.5%; - margin-left: 2%; } - .no-flexbox .g-span3 { - width: 25% !important; } - -.g-span4 { - -ms-flex-preferred-size: 33.3333333333% !important; - flex-basis: 33.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 33.3333333333% !important; } - .g-span4.g-holdWidth { - min-width: 333.333333333pxpx; } - .g--gutter--scaled .g-span4.g-holdWidth { - min-width: 313.333333333pxpx; } - .g--gutter--scaled .g-span4 { - -ms-flex-preferred-size: 32% !important; - flex-basis: 32% !important; - max-width: 32%; - margin-left: 2%; } - .no-flexbox .g-span4 { - width: 33.3333333333% !important; } - -.g-span5 { - -ms-flex-preferred-size: 41.6666666667% !important; - flex-basis: 41.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 41.6666666667% !important; } - .g-span5.g-holdWidth { - min-width: 416.666666667pxpx; } - .g--gutter--scaled .g-span5.g-holdWidth { - min-width: 396.666666667pxpx; } - .g--gutter--scaled .g-span5 { - -ms-flex-preferred-size: 40.5% !important; - flex-basis: 40.5% !important; - max-width: 40.5%; - margin-left: 2%; } - .no-flexbox .g-span5 { - width: 41.6666666667% !important; } - -.g-span6 { - -ms-flex-preferred-size: 50% !important; - flex-basis: 50% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 50% !important; } - .g-span6.g-holdWidth { - min-width: 500pxpx; } - .g--gutter--scaled .g-span6.g-holdWidth { - min-width: 480pxpx; } - .g--gutter--scaled .g-span6 { - -ms-flex-preferred-size: 49% !important; - flex-basis: 49% !important; - max-width: 49%; - margin-left: 2%; } - .no-flexbox .g-span6 { - width: 50% !important; } - -.g-span7 { - -ms-flex-preferred-size: 58.3333333333% !important; - flex-basis: 58.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 58.3333333333% !important; } - .g-span7.g-holdWidth { - min-width: 583.333333333pxpx; } - .g--gutter--scaled .g-span7.g-holdWidth { - min-width: 563.333333333pxpx; } - .g--gutter--scaled .g-span7 { - -ms-flex-preferred-size: 57.5% !important; - flex-basis: 57.5% !important; - max-width: 57.5%; - margin-left: 2%; } - .no-flexbox .g-span7 { - width: 58.3333333333% !important; } - -.g-span8 { - -ms-flex-preferred-size: 66.6666666667% !important; - flex-basis: 66.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 66.6666666667% !important; } - .g-span8.g-holdWidth { - min-width: 666.666666667pxpx; } - .g--gutter--scaled .g-span8.g-holdWidth { - min-width: 646.666666667pxpx; } - .g--gutter--scaled .g-span8 { - -ms-flex-preferred-size: 66% !important; - flex-basis: 66% !important; - max-width: 66%; - margin-left: 2%; } - .no-flexbox .g-span8 { - width: 66.6666666667% !important; } - -.g-span9 { - -ms-flex-preferred-size: 75% !important; - flex-basis: 75% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 75% !important; } - .g-span9.g-holdWidth { - min-width: 750pxpx; } - .g--gutter--scaled .g-span9.g-holdWidth { - min-width: 730pxpx; } - .g--gutter--scaled .g-span9 { - -ms-flex-preferred-size: 74.5% !important; - flex-basis: 74.5% !important; - max-width: 74.5%; - margin-left: 2%; } - .no-flexbox .g-span9 { - width: 75% !important; } - -.g-span10 { - -ms-flex-preferred-size: 83.3333333333% !important; - flex-basis: 83.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 83.3333333333% !important; } - .g-span10.g-holdWidth { - min-width: 833.333333333pxpx; } - .g--gutter--scaled .g-span10.g-holdWidth { - min-width: 813.333333333pxpx; } - .g--gutter--scaled .g-span10 { - -ms-flex-preferred-size: 83% !important; - flex-basis: 83% !important; - max-width: 83%; - margin-left: 2%; } - .no-flexbox .g-span10 { - width: 83.3333333333% !important; } - -.g-span11 { - -ms-flex-preferred-size: 91.6666666667% !important; - flex-basis: 91.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 91.6666666667% !important; } - .g-span11.g-holdWidth { - min-width: 916.666666667pxpx; } - .g--gutter--scaled .g-span11.g-holdWidth { - min-width: 896.666666667pxpx; } - .g--gutter--scaled .g-span11 { - -ms-flex-preferred-size: 91.5% !important; - flex-basis: 91.5% !important; - max-width: 91.5%; - margin-left: 2%; } - .no-flexbox .g-span11 { - width: 91.6666666667% !important; } - -.g-span12 { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100% !important; } - .g-span12.g-holdWidth { - min-width: 1000pxpx; } - .g--gutter--scaled .g-span12.g-holdWidth { - min-width: 980pxpx; } - .g--gutter--scaled .g-span12 { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - max-width: 100%; - margin-left: 0; } - .no-flexbox .g-span12 { - width: 100% !important; } - -@media screen and (min-width: 25em) { - .g-span1--narrow { - -ms-flex-preferred-size: 8.3333333333% !important; - flex-basis: 8.3333333333% !important; +@media (min-width: 750px) { + .g-span1--mid { + -ms-flex-preferred-size: 8.33333% !important; + flex-basis: 8.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 8.3333333333% !important; } - .g-span1--narrow.g-holdWidth--narrow { - min-width: 83.3333333333pxpx; } - .g--gutter--scaled .g-span1--narrow.g-holdWidth--narrow { - min-width: 63.3333333333pxpx; } - .g--gutter--scaled .g-span1--narrow { - -ms-flex-preferred-size: 6.5% !important; - flex-basis: 6.5% !important; - max-width: 6.5%; - margin-left: 2%; } - .no-flexbox .g-span1--narrow { - width: 8.3333333333% !important; } - .g-span2--narrow { - -ms-flex-preferred-size: 16.6666666667% !important; - flex-basis: 16.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 16.6666666667% !important; } - .g-span2--narrow.g-holdWidth--narrow { - min-width: 166.666666667pxpx; } - .g--gutter--scaled .g-span2--narrow.g-holdWidth--narrow { - min-width: 146.666666667pxpx; } - .g--gutter--scaled .g-span2--narrow { - -ms-flex-preferred-size: 15% !important; - flex-basis: 15% !important; - max-width: 15%; - margin-left: 2%; } - .no-flexbox .g-span2--narrow { - width: 16.6666666667% !important; } - .g-span3--narrow { - -ms-flex-preferred-size: 25% !important; - flex-basis: 25% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 25% !important; } - .g-span3--narrow.g-holdWidth--narrow { - min-width: 250pxpx; } - .g--gutter--scaled .g-span3--narrow.g-holdWidth--narrow { - min-width: 230pxpx; } - .g--gutter--scaled .g-span3--narrow { - -ms-flex-preferred-size: 23.5% !important; - flex-basis: 23.5% !important; - max-width: 23.5%; - margin-left: 2%; } - .no-flexbox .g-span3--narrow { - width: 25% !important; } - .g-span4--narrow { - -ms-flex-preferred-size: 33.3333333333% !important; - flex-basis: 33.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 33.3333333333% !important; } - .g-span4--narrow.g-holdWidth--narrow { - min-width: 333.333333333pxpx; } - .g--gutter--scaled .g-span4--narrow.g-holdWidth--narrow { - min-width: 313.333333333pxpx; } - .g--gutter--scaled .g-span4--narrow { - -ms-flex-preferred-size: 32% !important; - flex-basis: 32% !important; - max-width: 32%; - margin-left: 2%; } - .no-flexbox .g-span4--narrow { - width: 33.3333333333% !important; } - .g-span5--narrow { - -ms-flex-preferred-size: 41.6666666667% !important; - flex-basis: 41.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 41.6666666667% !important; } - .g-span5--narrow.g-holdWidth--narrow { - min-width: 416.666666667pxpx; } - .g--gutter--scaled .g-span5--narrow.g-holdWidth--narrow { - min-width: 396.666666667pxpx; } - .g--gutter--scaled .g-span5--narrow { - -ms-flex-preferred-size: 40.5% !important; - flex-basis: 40.5% !important; - max-width: 40.5%; - margin-left: 2%; } - .no-flexbox .g-span5--narrow { - width: 41.6666666667% !important; } - .g-span6--narrow { - -ms-flex-preferred-size: 50% !important; - flex-basis: 50% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 50% !important; } - .g-span6--narrow.g-holdWidth--narrow { - min-width: 500pxpx; } - .g--gutter--scaled .g-span6--narrow.g-holdWidth--narrow { - min-width: 480pxpx; } - .g--gutter--scaled .g-span6--narrow { - -ms-flex-preferred-size: 49% !important; - flex-basis: 49% !important; - max-width: 49%; - margin-left: 2%; } - .no-flexbox .g-span6--narrow { - width: 50% !important; } - .g-span7--narrow { - -ms-flex-preferred-size: 58.3333333333% !important; - flex-basis: 58.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 58.3333333333% !important; } - .g-span7--narrow.g-holdWidth--narrow { - min-width: 583.333333333pxpx; } - .g--gutter--scaled .g-span7--narrow.g-holdWidth--narrow { - min-width: 563.333333333pxpx; } - .g--gutter--scaled .g-span7--narrow { - -ms-flex-preferred-size: 57.5% !important; - flex-basis: 57.5% !important; - max-width: 57.5%; - margin-left: 2%; } - .no-flexbox .g-span7--narrow { - width: 58.3333333333% !important; } - .g-span8--narrow { - -ms-flex-preferred-size: 66.6666666667% !important; - flex-basis: 66.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 66.6666666667% !important; } - .g-span8--narrow.g-holdWidth--narrow { - min-width: 666.666666667pxpx; } - .g--gutter--scaled .g-span8--narrow.g-holdWidth--narrow { - min-width: 646.666666667pxpx; } - .g--gutter--scaled .g-span8--narrow { - -ms-flex-preferred-size: 66% !important; - flex-basis: 66% !important; - max-width: 66%; - margin-left: 2%; } - .no-flexbox .g-span8--narrow { - width: 66.6666666667% !important; } - .g-span9--narrow { - -ms-flex-preferred-size: 75% !important; - flex-basis: 75% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 75% !important; } - .g-span9--narrow.g-holdWidth--narrow { - min-width: 750pxpx; } - .g--gutter--scaled .g-span9--narrow.g-holdWidth--narrow { - min-width: 730pxpx; } - .g--gutter--scaled .g-span9--narrow { - -ms-flex-preferred-size: 74.5% !important; - flex-basis: 74.5% !important; - max-width: 74.5%; - margin-left: 2%; } - .no-flexbox .g-span9--narrow { - width: 75% !important; } - .g-span10--narrow { - -ms-flex-preferred-size: 83.3333333333% !important; - flex-basis: 83.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 83.3333333333% !important; } - .g-span10--narrow.g-holdWidth--narrow { - min-width: 833.333333333pxpx; } - .g--gutter--scaled .g-span10--narrow.g-holdWidth--narrow { - min-width: 813.333333333pxpx; } - .g--gutter--scaled .g-span10--narrow { - -ms-flex-preferred-size: 83% !important; - flex-basis: 83% !important; - max-width: 83%; - margin-left: 2%; } - .no-flexbox .g-span10--narrow { - width: 83.3333333333% !important; } - .g-span11--narrow { - -ms-flex-preferred-size: 91.6666666667% !important; - flex-basis: 91.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 91.6666666667% !important; } - .g-span11--narrow.g-holdWidth--narrow { - min-width: 916.666666667pxpx; } - .g--gutter--scaled .g-span11--narrow.g-holdWidth--narrow { - min-width: 896.666666667pxpx; } - .g--gutter--scaled .g-span11--narrow { - -ms-flex-preferred-size: 91.5% !important; - flex-basis: 91.5% !important; - max-width: 91.5%; - margin-left: 2%; } - .no-flexbox .g-span11--narrow { - width: 91.6666666667% !important; } - .g-span12--narrow { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100% !important; } - .g-span12--narrow.g-holdWidth--narrow { - min-width: 1000pxpx; } - .g--gutter--scaled .g-span12--narrow.g-holdWidth--narrow { - min-width: 980pxpx; } - .g--gutter--scaled .g-span12--narrow { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - max-width: 100%; - margin-left: 0; } - .no-flexbox .g-span12--narrow { - width: 100% !important; } } - -@media screen and (min-width: 46.875em) { - .g-span1--mid { - -ms-flex-preferred-size: 8.3333333333% !important; - flex-basis: 8.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 8.3333333333% !important; } + max-width: 8.33333% !important; } .g-span1--mid.g-holdWidth--mid { - min-width: 83.3333333333pxpx; } + min-width: 83.33333px; } .g--gutter--scaled .g-span1--mid.g-holdWidth--mid { - min-width: 63.3333333333pxpx; } + min-width: 63.33333px; } .g--gutter--scaled .g-span1--mid { -ms-flex-preferred-size: 6.5% !important; flex-basis: 6.5% !important; max-width: 6.5%; margin-left: 2%; } .no-flexbox .g-span1--mid { - width: 8.3333333333% !important; } + width: 8.33333% !important; } + .g-offset1--mid { + margin-left: 8.33333% !important; } .g-span2--mid { - -ms-flex-preferred-size: 16.6666666667% !important; - flex-basis: 16.6666666667% !important; + -ms-flex-preferred-size: 16.66667% !important; + flex-basis: 16.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 16.6666666667% !important; } + max-width: 16.66667% !important; } .g-span2--mid.g-holdWidth--mid { - min-width: 166.666666667pxpx; } + min-width: 166.66667px; } .g--gutter--scaled .g-span2--mid.g-holdWidth--mid { - min-width: 146.666666667pxpx; } + min-width: 146.66667px; } .g--gutter--scaled .g-span2--mid { -ms-flex-preferred-size: 15% !important; flex-basis: 15% !important; max-width: 15%; margin-left: 2%; } .no-flexbox .g-span2--mid { - width: 16.6666666667% !important; } + width: 16.66667% !important; } + .g-offset2--mid { + margin-left: 16.66667% !important; } .g-span3--mid { -ms-flex-preferred-size: 25% !important; flex-basis: 25% !important; @@ -1987,9 +1662,9 @@ input[type="submit"] { flex-grow: 0; max-width: 25% !important; } .g-span3--mid.g-holdWidth--mid { - min-width: 250pxpx; } + min-width: 250px; } .g--gutter--scaled .g-span3--mid.g-holdWidth--mid { - min-width: 230pxpx; } + min-width: 230px; } .g--gutter--scaled .g-span3--mid { -ms-flex-preferred-size: 23.5% !important; flex-basis: 23.5% !important; @@ -1997,42 +1672,48 @@ input[type="submit"] { margin-left: 2%; } .no-flexbox .g-span3--mid { width: 25% !important; } + .g-offset3--mid { + margin-left: 25% !important; } .g-span4--mid { - -ms-flex-preferred-size: 33.3333333333% !important; - flex-basis: 33.3333333333% !important; + -ms-flex-preferred-size: 33.33333% !important; + flex-basis: 33.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 33.3333333333% !important; } + max-width: 33.33333% !important; } .g-span4--mid.g-holdWidth--mid { - min-width: 333.333333333pxpx; } + min-width: 333.33333px; } .g--gutter--scaled .g-span4--mid.g-holdWidth--mid { - min-width: 313.333333333pxpx; } + min-width: 313.33333px; } .g--gutter--scaled .g-span4--mid { -ms-flex-preferred-size: 32% !important; flex-basis: 32% !important; max-width: 32%; margin-left: 2%; } .no-flexbox .g-span4--mid { - width: 33.3333333333% !important; } + width: 33.33333% !important; } + .g-offset4--mid { + margin-left: 33.33333% !important; } .g-span5--mid { - -ms-flex-preferred-size: 41.6666666667% !important; - flex-basis: 41.6666666667% !important; + -ms-flex-preferred-size: 41.66667% !important; + flex-basis: 41.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 41.6666666667% !important; } + max-width: 41.66667% !important; } .g-span5--mid.g-holdWidth--mid { - min-width: 416.666666667pxpx; } + min-width: 416.66667px; } .g--gutter--scaled .g-span5--mid.g-holdWidth--mid { - min-width: 396.666666667pxpx; } + min-width: 396.66667px; } .g--gutter--scaled .g-span5--mid { -ms-flex-preferred-size: 40.5% !important; flex-basis: 40.5% !important; max-width: 40.5%; margin-left: 2%; } .no-flexbox .g-span5--mid { - width: 41.6666666667% !important; } + width: 41.66667% !important; } + .g-offset5--mid { + margin-left: 41.66667% !important; } .g-span6--mid { -ms-flex-preferred-size: 50% !important; flex-basis: 50% !important; @@ -2041,9 +1722,9 @@ input[type="submit"] { flex-grow: 0; max-width: 50% !important; } .g-span6--mid.g-holdWidth--mid { - min-width: 500pxpx; } + min-width: 500px; } .g--gutter--scaled .g-span6--mid.g-holdWidth--mid { - min-width: 480pxpx; } + min-width: 480px; } .g--gutter--scaled .g-span6--mid { -ms-flex-preferred-size: 49% !important; flex-basis: 49% !important; @@ -2051,42 +1732,48 @@ input[type="submit"] { margin-left: 2%; } .no-flexbox .g-span6--mid { width: 50% !important; } + .g-offset6--mid { + margin-left: 50% !important; } .g-span7--mid { - -ms-flex-preferred-size: 58.3333333333% !important; - flex-basis: 58.3333333333% !important; + -ms-flex-preferred-size: 58.33333% !important; + flex-basis: 58.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 58.3333333333% !important; } + max-width: 58.33333% !important; } .g-span7--mid.g-holdWidth--mid { - min-width: 583.333333333pxpx; } + min-width: 583.33333px; } .g--gutter--scaled .g-span7--mid.g-holdWidth--mid { - min-width: 563.333333333pxpx; } + min-width: 563.33333px; } .g--gutter--scaled .g-span7--mid { -ms-flex-preferred-size: 57.5% !important; flex-basis: 57.5% !important; max-width: 57.5%; margin-left: 2%; } .no-flexbox .g-span7--mid { - width: 58.3333333333% !important; } + width: 58.33333% !important; } + .g-offset7--mid { + margin-left: 58.33333% !important; } .g-span8--mid { - -ms-flex-preferred-size: 66.6666666667% !important; - flex-basis: 66.6666666667% !important; + -ms-flex-preferred-size: 66.66667% !important; + flex-basis: 66.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 66.6666666667% !important; } + max-width: 66.66667% !important; } .g-span8--mid.g-holdWidth--mid { - min-width: 666.666666667pxpx; } + min-width: 666.66667px; } .g--gutter--scaled .g-span8--mid.g-holdWidth--mid { - min-width: 646.666666667pxpx; } + min-width: 646.66667px; } .g--gutter--scaled .g-span8--mid { -ms-flex-preferred-size: 66% !important; flex-basis: 66% !important; max-width: 66%; margin-left: 2%; } .no-flexbox .g-span8--mid { - width: 66.6666666667% !important; } + width: 66.66667% !important; } + .g-offset8--mid { + margin-left: 66.66667% !important; } .g-span9--mid { -ms-flex-preferred-size: 75% !important; flex-basis: 75% !important; @@ -2095,9 +1782,9 @@ input[type="submit"] { flex-grow: 0; max-width: 75% !important; } .g-span9--mid.g-holdWidth--mid { - min-width: 750pxpx; } + min-width: 750px; } .g--gutter--scaled .g-span9--mid.g-holdWidth--mid { - min-width: 730pxpx; } + min-width: 730px; } .g--gutter--scaled .g-span9--mid { -ms-flex-preferred-size: 74.5% !important; flex-basis: 74.5% !important; @@ -2105,42 +1792,48 @@ input[type="submit"] { margin-left: 2%; } .no-flexbox .g-span9--mid { width: 75% !important; } + .g-offset9--mid { + margin-left: 75% !important; } .g-span10--mid { - -ms-flex-preferred-size: 83.3333333333% !important; - flex-basis: 83.3333333333% !important; + -ms-flex-preferred-size: 83.33333% !important; + flex-basis: 83.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 83.3333333333% !important; } + max-width: 83.33333% !important; } .g-span10--mid.g-holdWidth--mid { - min-width: 833.333333333pxpx; } + min-width: 833.33333px; } .g--gutter--scaled .g-span10--mid.g-holdWidth--mid { - min-width: 813.333333333pxpx; } + min-width: 813.33333px; } .g--gutter--scaled .g-span10--mid { -ms-flex-preferred-size: 83% !important; flex-basis: 83% !important; max-width: 83%; margin-left: 2%; } .no-flexbox .g-span10--mid { - width: 83.3333333333% !important; } + width: 83.33333% !important; } + .g-offset10--mid { + margin-left: 83.33333% !important; } .g-span11--mid { - -ms-flex-preferred-size: 91.6666666667% !important; - flex-basis: 91.6666666667% !important; + -ms-flex-preferred-size: 91.66667% !important; + flex-basis: 91.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 91.6666666667% !important; } + max-width: 91.66667% !important; } .g-span11--mid.g-holdWidth--mid { - min-width: 916.666666667pxpx; } + min-width: 916.66667px; } .g--gutter--scaled .g-span11--mid.g-holdWidth--mid { - min-width: 896.666666667pxpx; } + min-width: 896.66667px; } .g--gutter--scaled .g-span11--mid { -ms-flex-preferred-size: 91.5% !important; flex-basis: 91.5% !important; max-width: 91.5%; margin-left: 2%; } .no-flexbox .g-span11--mid { - width: 91.6666666667% !important; } + width: 91.66667% !important; } + .g-offset11--mid { + margin-left: 91.66667% !important; } .g-span12--mid { -ms-flex-preferred-size: 100% !important; flex-basis: 100% !important; @@ -2149,9 +1842,9 @@ input[type="submit"] { flex-grow: 0; max-width: 100% !important; } .g-span12--mid.g-holdWidth--mid { - min-width: 1000pxpx; } + min-width: 1000px; } .g--gutter--scaled .g-span12--mid.g-holdWidth--mid { - min-width: 980pxpx; } + min-width: 980px; } .g--gutter--scaled .g-span12--mid { -ms-flex-preferred-size: 100% !important; flex-basis: 100% !important; @@ -2160,43 +1853,47 @@ input[type="submit"] { .no-flexbox .g-span12--mid { width: 100% !important; } } -@media screen and (min-width: 62.5em) { +@media (min-width: 1000px) { .g-span1--wide { - -ms-flex-preferred-size: 8.3333333333% !important; - flex-basis: 8.3333333333% !important; + -ms-flex-preferred-size: 8.33333% !important; + flex-basis: 8.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 8.3333333333% !important; } + max-width: 8.33333% !important; } .g-span1--wide.g-holdWidth--wide { - min-width: 83.3333333333pxpx; } + min-width: 83.33333px; } .g--gutter--scaled .g-span1--wide.g-holdWidth--wide { - min-width: 63.3333333333pxpx; } + min-width: 63.33333px; } .g--gutter--scaled .g-span1--wide { -ms-flex-preferred-size: 6.5% !important; flex-basis: 6.5% !important; max-width: 6.5%; margin-left: 2%; } .no-flexbox .g-span1--wide { - width: 8.3333333333% !important; } + width: 8.33333% !important; } + .g-offset1--wide { + margin-left: 8.33333% !important; } .g-span2--wide { - -ms-flex-preferred-size: 16.6666666667% !important; - flex-basis: 16.6666666667% !important; + -ms-flex-preferred-size: 16.66667% !important; + flex-basis: 16.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 16.6666666667% !important; } + max-width: 16.66667% !important; } .g-span2--wide.g-holdWidth--wide { - min-width: 166.666666667pxpx; } + min-width: 166.66667px; } .g--gutter--scaled .g-span2--wide.g-holdWidth--wide { - min-width: 146.666666667pxpx; } + min-width: 146.66667px; } .g--gutter--scaled .g-span2--wide { -ms-flex-preferred-size: 15% !important; flex-basis: 15% !important; max-width: 15%; margin-left: 2%; } .no-flexbox .g-span2--wide { - width: 16.6666666667% !important; } + width: 16.66667% !important; } + .g-offset2--wide { + margin-left: 16.66667% !important; } .g-span3--wide { -ms-flex-preferred-size: 25% !important; flex-basis: 25% !important; @@ -2205,9 +1902,9 @@ input[type="submit"] { flex-grow: 0; max-width: 25% !important; } .g-span3--wide.g-holdWidth--wide { - min-width: 250pxpx; } + min-width: 250px; } .g--gutter--scaled .g-span3--wide.g-holdWidth--wide { - min-width: 230pxpx; } + min-width: 230px; } .g--gutter--scaled .g-span3--wide { -ms-flex-preferred-size: 23.5% !important; flex-basis: 23.5% !important; @@ -2215,42 +1912,48 @@ input[type="submit"] { margin-left: 2%; } .no-flexbox .g-span3--wide { width: 25% !important; } + .g-offset3--wide { + margin-left: 25% !important; } .g-span4--wide { - -ms-flex-preferred-size: 33.3333333333% !important; - flex-basis: 33.3333333333% !important; + -ms-flex-preferred-size: 33.33333% !important; + flex-basis: 33.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 33.3333333333% !important; } + max-width: 33.33333% !important; } .g-span4--wide.g-holdWidth--wide { - min-width: 333.333333333pxpx; } + min-width: 333.33333px; } .g--gutter--scaled .g-span4--wide.g-holdWidth--wide { - min-width: 313.333333333pxpx; } + min-width: 313.33333px; } .g--gutter--scaled .g-span4--wide { -ms-flex-preferred-size: 32% !important; flex-basis: 32% !important; max-width: 32%; margin-left: 2%; } .no-flexbox .g-span4--wide { - width: 33.3333333333% !important; } + width: 33.33333% !important; } + .g-offset4--wide { + margin-left: 33.33333% !important; } .g-span5--wide { - -ms-flex-preferred-size: 41.6666666667% !important; - flex-basis: 41.6666666667% !important; + -ms-flex-preferred-size: 41.66667% !important; + flex-basis: 41.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 41.6666666667% !important; } + max-width: 41.66667% !important; } .g-span5--wide.g-holdWidth--wide { - min-width: 416.666666667pxpx; } + min-width: 416.66667px; } .g--gutter--scaled .g-span5--wide.g-holdWidth--wide { - min-width: 396.666666667pxpx; } + min-width: 396.66667px; } .g--gutter--scaled .g-span5--wide { -ms-flex-preferred-size: 40.5% !important; flex-basis: 40.5% !important; max-width: 40.5%; margin-left: 2%; } .no-flexbox .g-span5--wide { - width: 41.6666666667% !important; } + width: 41.66667% !important; } + .g-offset5--wide { + margin-left: 41.66667% !important; } .g-span6--wide { -ms-flex-preferred-size: 50% !important; flex-basis: 50% !important; @@ -2259,9 +1962,9 @@ input[type="submit"] { flex-grow: 0; max-width: 50% !important; } .g-span6--wide.g-holdWidth--wide { - min-width: 500pxpx; } + min-width: 500px; } .g--gutter--scaled .g-span6--wide.g-holdWidth--wide { - min-width: 480pxpx; } + min-width: 480px; } .g--gutter--scaled .g-span6--wide { -ms-flex-preferred-size: 49% !important; flex-basis: 49% !important; @@ -2269,42 +1972,48 @@ input[type="submit"] { margin-left: 2%; } .no-flexbox .g-span6--wide { width: 50% !important; } + .g-offset6--wide { + margin-left: 50% !important; } .g-span7--wide { - -ms-flex-preferred-size: 58.3333333333% !important; - flex-basis: 58.3333333333% !important; + -ms-flex-preferred-size: 58.33333% !important; + flex-basis: 58.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 58.3333333333% !important; } + max-width: 58.33333% !important; } .g-span7--wide.g-holdWidth--wide { - min-width: 583.333333333pxpx; } + min-width: 583.33333px; } .g--gutter--scaled .g-span7--wide.g-holdWidth--wide { - min-width: 563.333333333pxpx; } + min-width: 563.33333px; } .g--gutter--scaled .g-span7--wide { -ms-flex-preferred-size: 57.5% !important; flex-basis: 57.5% !important; max-width: 57.5%; margin-left: 2%; } .no-flexbox .g-span7--wide { - width: 58.3333333333% !important; } + width: 58.33333% !important; } + .g-offset7--wide { + margin-left: 58.33333% !important; } .g-span8--wide { - -ms-flex-preferred-size: 66.6666666667% !important; - flex-basis: 66.6666666667% !important; + -ms-flex-preferred-size: 66.66667% !important; + flex-basis: 66.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 66.6666666667% !important; } + max-width: 66.66667% !important; } .g-span8--wide.g-holdWidth--wide { - min-width: 666.666666667pxpx; } + min-width: 666.66667px; } .g--gutter--scaled .g-span8--wide.g-holdWidth--wide { - min-width: 646.666666667pxpx; } + min-width: 646.66667px; } .g--gutter--scaled .g-span8--wide { -ms-flex-preferred-size: 66% !important; flex-basis: 66% !important; max-width: 66%; margin-left: 2%; } .no-flexbox .g-span8--wide { - width: 66.6666666667% !important; } + width: 66.66667% !important; } + .g-offset8--wide { + margin-left: 66.66667% !important; } .g-span9--wide { -ms-flex-preferred-size: 75% !important; flex-basis: 75% !important; @@ -2313,9 +2022,9 @@ input[type="submit"] { flex-grow: 0; max-width: 75% !important; } .g-span9--wide.g-holdWidth--wide { - min-width: 750pxpx; } + min-width: 750px; } .g--gutter--scaled .g-span9--wide.g-holdWidth--wide { - min-width: 730pxpx; } + min-width: 730px; } .g--gutter--scaled .g-span9--wide { -ms-flex-preferred-size: 74.5% !important; flex-basis: 74.5% !important; @@ -2323,42 +2032,48 @@ input[type="submit"] { margin-left: 2%; } .no-flexbox .g-span9--wide { width: 75% !important; } + .g-offset9--wide { + margin-left: 75% !important; } .g-span10--wide { - -ms-flex-preferred-size: 83.3333333333% !important; - flex-basis: 83.3333333333% !important; + -ms-flex-preferred-size: 83.33333% !important; + flex-basis: 83.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 83.3333333333% !important; } + max-width: 83.33333% !important; } .g-span10--wide.g-holdWidth--wide { - min-width: 833.333333333pxpx; } + min-width: 833.33333px; } .g--gutter--scaled .g-span10--wide.g-holdWidth--wide { - min-width: 813.333333333pxpx; } + min-width: 813.33333px; } .g--gutter--scaled .g-span10--wide { -ms-flex-preferred-size: 83% !important; flex-basis: 83% !important; max-width: 83%; margin-left: 2%; } .no-flexbox .g-span10--wide { - width: 83.3333333333% !important; } + width: 83.33333% !important; } + .g-offset10--wide { + margin-left: 83.33333% !important; } .g-span11--wide { - -ms-flex-preferred-size: 91.6666666667% !important; - flex-basis: 91.6666666667% !important; + -ms-flex-preferred-size: 91.66667% !important; + flex-basis: 91.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 91.6666666667% !important; } + max-width: 91.66667% !important; } .g-span11--wide.g-holdWidth--wide { - min-width: 916.666666667pxpx; } + min-width: 916.66667px; } .g--gutter--scaled .g-span11--wide.g-holdWidth--wide { - min-width: 896.666666667pxpx; } + min-width: 896.66667px; } .g--gutter--scaled .g-span11--wide { -ms-flex-preferred-size: 91.5% !important; flex-basis: 91.5% !important; max-width: 91.5%; margin-left: 2%; } .no-flexbox .g-span11--wide { - width: 91.6666666667% !important; } + width: 91.66667% !important; } + .g-offset11--wide { + margin-left: 91.66667% !important; } .g-span12--wide { -ms-flex-preferred-size: 100% !important; flex-basis: 100% !important; @@ -2367,9 +2082,9 @@ input[type="submit"] { flex-grow: 0; max-width: 100% !important; } .g-span12--wide.g-holdWidth--wide { - min-width: 1000pxpx; } + min-width: 1000px; } .g--gutter--scaled .g-span12--wide.g-holdWidth--wide { - min-width: 980pxpx; } + min-width: 980px; } .g--gutter--scaled .g-span12--wide { -ms-flex-preferred-size: 100% !important; flex-basis: 100% !important; @@ -2378,43 +2093,47 @@ input[type="submit"] { .no-flexbox .g-span12--wide { width: 100% !important; } } -@media screen and (min-width: 78.125em) { +@media (min-width: 1250px) { .g-span1--huge { - -ms-flex-preferred-size: 8.3333333333% !important; - flex-basis: 8.3333333333% !important; + -ms-flex-preferred-size: 8.33333% !important; + flex-basis: 8.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 8.3333333333% !important; } + max-width: 8.33333% !important; } .g-span1--huge.g-holdWidth--huge { - min-width: 83.3333333333pxpx; } + min-width: 83.33333px; } .g--gutter--scaled .g-span1--huge.g-holdWidth--huge { - min-width: 63.3333333333pxpx; } + min-width: 63.33333px; } .g--gutter--scaled .g-span1--huge { -ms-flex-preferred-size: 6.5% !important; flex-basis: 6.5% !important; max-width: 6.5%; margin-left: 2%; } .no-flexbox .g-span1--huge { - width: 8.3333333333% !important; } + width: 8.33333% !important; } + .g-offset1--huge { + margin-left: 8.33333% !important; } .g-span2--huge { - -ms-flex-preferred-size: 16.6666666667% !important; - flex-basis: 16.6666666667% !important; + -ms-flex-preferred-size: 16.66667% !important; + flex-basis: 16.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 16.6666666667% !important; } + max-width: 16.66667% !important; } .g-span2--huge.g-holdWidth--huge { - min-width: 166.666666667pxpx; } + min-width: 166.66667px; } .g--gutter--scaled .g-span2--huge.g-holdWidth--huge { - min-width: 146.666666667pxpx; } + min-width: 146.66667px; } .g--gutter--scaled .g-span2--huge { -ms-flex-preferred-size: 15% !important; flex-basis: 15% !important; max-width: 15%; margin-left: 2%; } .no-flexbox .g-span2--huge { - width: 16.6666666667% !important; } + width: 16.66667% !important; } + .g-offset2--huge { + margin-left: 16.66667% !important; } .g-span3--huge { -ms-flex-preferred-size: 25% !important; flex-basis: 25% !important; @@ -2423,9 +2142,9 @@ input[type="submit"] { flex-grow: 0; max-width: 25% !important; } .g-span3--huge.g-holdWidth--huge { - min-width: 250pxpx; } + min-width: 250px; } .g--gutter--scaled .g-span3--huge.g-holdWidth--huge { - min-width: 230pxpx; } + min-width: 230px; } .g--gutter--scaled .g-span3--huge { -ms-flex-preferred-size: 23.5% !important; flex-basis: 23.5% !important; @@ -2433,42 +2152,48 @@ input[type="submit"] { margin-left: 2%; } .no-flexbox .g-span3--huge { width: 25% !important; } + .g-offset3--huge { + margin-left: 25% !important; } .g-span4--huge { - -ms-flex-preferred-size: 33.3333333333% !important; - flex-basis: 33.3333333333% !important; + -ms-flex-preferred-size: 33.33333% !important; + flex-basis: 33.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 33.3333333333% !important; } + max-width: 33.33333% !important; } .g-span4--huge.g-holdWidth--huge { - min-width: 333.333333333pxpx; } + min-width: 333.33333px; } .g--gutter--scaled .g-span4--huge.g-holdWidth--huge { - min-width: 313.333333333pxpx; } + min-width: 313.33333px; } .g--gutter--scaled .g-span4--huge { -ms-flex-preferred-size: 32% !important; flex-basis: 32% !important; max-width: 32%; margin-left: 2%; } .no-flexbox .g-span4--huge { - width: 33.3333333333% !important; } + width: 33.33333% !important; } + .g-offset4--huge { + margin-left: 33.33333% !important; } .g-span5--huge { - -ms-flex-preferred-size: 41.6666666667% !important; - flex-basis: 41.6666666667% !important; + -ms-flex-preferred-size: 41.66667% !important; + flex-basis: 41.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 41.6666666667% !important; } + max-width: 41.66667% !important; } .g-span5--huge.g-holdWidth--huge { - min-width: 416.666666667pxpx; } + min-width: 416.66667px; } .g--gutter--scaled .g-span5--huge.g-holdWidth--huge { - min-width: 396.666666667pxpx; } + min-width: 396.66667px; } .g--gutter--scaled .g-span5--huge { -ms-flex-preferred-size: 40.5% !important; flex-basis: 40.5% !important; max-width: 40.5%; margin-left: 2%; } .no-flexbox .g-span5--huge { - width: 41.6666666667% !important; } + width: 41.66667% !important; } + .g-offset5--huge { + margin-left: 41.66667% !important; } .g-span6--huge { -ms-flex-preferred-size: 50% !important; flex-basis: 50% !important; @@ -2477,9 +2202,9 @@ input[type="submit"] { flex-grow: 0; max-width: 50% !important; } .g-span6--huge.g-holdWidth--huge { - min-width: 500pxpx; } + min-width: 500px; } .g--gutter--scaled .g-span6--huge.g-holdWidth--huge { - min-width: 480pxpx; } + min-width: 480px; } .g--gutter--scaled .g-span6--huge { -ms-flex-preferred-size: 49% !important; flex-basis: 49% !important; @@ -2487,42 +2212,48 @@ input[type="submit"] { margin-left: 2%; } .no-flexbox .g-span6--huge { width: 50% !important; } + .g-offset6--huge { + margin-left: 50% !important; } .g-span7--huge { - -ms-flex-preferred-size: 58.3333333333% !important; - flex-basis: 58.3333333333% !important; + -ms-flex-preferred-size: 58.33333% !important; + flex-basis: 58.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 58.3333333333% !important; } + max-width: 58.33333% !important; } .g-span7--huge.g-holdWidth--huge { - min-width: 583.333333333pxpx; } + min-width: 583.33333px; } .g--gutter--scaled .g-span7--huge.g-holdWidth--huge { - min-width: 563.333333333pxpx; } + min-width: 563.33333px; } .g--gutter--scaled .g-span7--huge { -ms-flex-preferred-size: 57.5% !important; flex-basis: 57.5% !important; max-width: 57.5%; margin-left: 2%; } .no-flexbox .g-span7--huge { - width: 58.3333333333% !important; } + width: 58.33333% !important; } + .g-offset7--huge { + margin-left: 58.33333% !important; } .g-span8--huge { - -ms-flex-preferred-size: 66.6666666667% !important; - flex-basis: 66.6666666667% !important; + -ms-flex-preferred-size: 66.66667% !important; + flex-basis: 66.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 66.6666666667% !important; } + max-width: 66.66667% !important; } .g-span8--huge.g-holdWidth--huge { - min-width: 666.666666667pxpx; } + min-width: 666.66667px; } .g--gutter--scaled .g-span8--huge.g-holdWidth--huge { - min-width: 646.666666667pxpx; } + min-width: 646.66667px; } .g--gutter--scaled .g-span8--huge { -ms-flex-preferred-size: 66% !important; flex-basis: 66% !important; max-width: 66%; margin-left: 2%; } .no-flexbox .g-span8--huge { - width: 66.6666666667% !important; } + width: 66.66667% !important; } + .g-offset8--huge { + margin-left: 66.66667% !important; } .g-span9--huge { -ms-flex-preferred-size: 75% !important; flex-basis: 75% !important; @@ -2531,9 +2262,9 @@ input[type="submit"] { flex-grow: 0; max-width: 75% !important; } .g-span9--huge.g-holdWidth--huge { - min-width: 750pxpx; } + min-width: 750px; } .g--gutter--scaled .g-span9--huge.g-holdWidth--huge { - min-width: 730pxpx; } + min-width: 730px; } .g--gutter--scaled .g-span9--huge { -ms-flex-preferred-size: 74.5% !important; flex-basis: 74.5% !important; @@ -2541,42 +2272,48 @@ input[type="submit"] { margin-left: 2%; } .no-flexbox .g-span9--huge { width: 75% !important; } + .g-offset9--huge { + margin-left: 75% !important; } .g-span10--huge { - -ms-flex-preferred-size: 83.3333333333% !important; - flex-basis: 83.3333333333% !important; + -ms-flex-preferred-size: 83.33333% !important; + flex-basis: 83.33333% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 83.3333333333% !important; } + max-width: 83.33333% !important; } .g-span10--huge.g-holdWidth--huge { - min-width: 833.333333333pxpx; } + min-width: 833.33333px; } .g--gutter--scaled .g-span10--huge.g-holdWidth--huge { - min-width: 813.333333333pxpx; } + min-width: 813.33333px; } .g--gutter--scaled .g-span10--huge { -ms-flex-preferred-size: 83% !important; flex-basis: 83% !important; max-width: 83%; margin-left: 2%; } .no-flexbox .g-span10--huge { - width: 83.3333333333% !important; } + width: 83.33333% !important; } + .g-offset10--huge { + margin-left: 83.33333% !important; } .g-span11--huge { - -ms-flex-preferred-size: 91.6666666667% !important; - flex-basis: 91.6666666667% !important; + -ms-flex-preferred-size: 91.66667% !important; + flex-basis: 91.66667% !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 91.6666666667% !important; } + max-width: 91.66667% !important; } .g-span11--huge.g-holdWidth--huge { - min-width: 916.666666667pxpx; } + min-width: 916.66667px; } .g--gutter--scaled .g-span11--huge.g-holdWidth--huge { - min-width: 896.666666667pxpx; } + min-width: 896.66667px; } .g--gutter--scaled .g-span11--huge { -ms-flex-preferred-size: 91.5% !important; flex-basis: 91.5% !important; max-width: 91.5%; margin-left: 2%; } .no-flexbox .g-span11--huge { - width: 91.6666666667% !important; } + width: 91.66667% !important; } + .g-offset11--huge { + margin-left: 91.66667% !important; } .g-span12--huge { -ms-flex-preferred-size: 100% !important; flex-basis: 100% !important; @@ -2585,9 +2322,9 @@ input[type="submit"] { flex-grow: 0; max-width: 100% !important; } .g-span12--huge.g-holdWidth--huge { - min-width: 1000pxpx; } + min-width: 1000px; } .g--gutter--scaled .g-span12--huge.g-holdWidth--huge { - min-width: 980pxpx; } + min-width: 980px; } .g--gutter--scaled .g-span12--huge { -ms-flex-preferred-size: 100% !important; flex-basis: 100% !important; @@ -2596,56 +2333,682 @@ input[type="submit"] { .no-flexbox .g-span12--huge { width: 100% !important; } } -@media screen and (max-width: 25em) { - .g--stack--narrow { - -ms-flex-flow: column nowrap; - flex-flow: column nowrap; } - .g--stack--narrow > .g-col { - -ms-flex-preferred-size: auto !important; - flex-basis: auto !important; - max-width: 100% !important; - margin-left: 0; } - .no-flexbox .g--stack--narrow > .g-col { - width: 100% !important; } } +@media (max-width: 399px) { + .g--stack--narrow { + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .g--stack--narrow > .g-col { + -ms-flex-preferred-size: auto !important; + flex-basis: auto !important; + max-width: 100% !important; + margin-left: 0; } + .no-flexbox .g--stack--narrow > .g-col { + width: 100% !important; } } + +@media (max-width: 749px) { + .g--stack--mid { + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .g--stack--mid > .g-col { + -ms-flex-preferred-size: auto !important; + flex-basis: auto !important; + max-width: 100% !important; + margin-left: 0; } + .no-flexbox .g--stack--mid > .g-col { + width: 100% !important; } } + +@media (max-width: 999px) { + .g--stack--wide { + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .g--stack--wide > .g-col { + -ms-flex-preferred-size: auto !important; + flex-basis: auto !important; + max-width: 100% !important; + margin-left: 0; } + .no-flexbox .g--stack--wide > .g-col { + width: 100% !important; } } + +@media (max-width: 1249px) { + .g--stack--huge { + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .g--stack--huge > .g-col { + -ms-flex-preferred-size: auto !important; + flex-basis: auto !important; + max-width: 100% !important; + margin-left: 0; } + .no-flexbox .g--stack--huge > .g-col { + width: 100% !important; } } + +/** + * Forms + * ================================= + * Kickoff's forms has support for themes. See below for info about them. + * + * The styles here are base styles that apply to both themes, + * they are more of a reset before you make stylistic amends to form fields + * + */ +/** + * Form themes + * This file contains the base form styles and each theme file contains + * overrides and additions. + * + * Choose from: + * - `standard`: the original Kickoff form theme + * - `material`: basic version of Google's Material design forms + * + * Usage: (choose from) + * @import "form-theme-standard"; + * @import "form-theme-material"; + */ +/** + * Kickoff forms: Standard theme + * ================================= * + * Demo: http://trykickoff.com/demos/forms.html#layout-example-labels-above + * Code: https://gist.github.com/mrmartineau/6712577#file-labels-above-inputs-html + * Usage: +
+ +
+ +
+
+ * + * Contents: + * - Theme variables + * - Theme styles + */ +/** + * Generic form styles + * ================================= + * Demo: http://trykickoff.com/demos/forms.html#layout-example-labels-above + * Code: https://gist.github.com/mrmartineau/6712577#file-labels-above-inputs-html + * Usage: +
+ +
+ +
+
+ */ +.form { + margin: 0 0 28px; } + +.form-fieldset { + padding: 0; + margin: 0; + border: 0; } + +.form-legend { + padding: 0; + margin-bottom: 28px; + font-size: 1.25rem; + line-height: 1.4; + color: #444; + border: 0; + border-bottom: 1px solid #eee; + white-space: normal; } + .form-legend small { + font-size: 0.8rem; + color: #b3b3b3; } + +/** + * Form inputs and groups + */ +.form-controlGroup { + margin-top: 42px; + margin-bottom: 42px; } + +.form-legend + .form-controlGroup { + margin-top: 28px; } + +.form-label { + color: #444; } + .form-label small { + font-weight: normal; + color: #919191; } + +.form-input { + height: 2.5em; + padding: .5em; + font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + line-height: 1.4; + color: #444; + font-weight: normal; + background-color: #fff; + border: 2px solid #ccc; + border-radius: 5px; + background-clip: padding-box; + -webkit-transition: border 200ms ease-in-out; + transition: border 200ms ease-in-out; } + .form-input:focus { + border-color: #181830; } + .form-input[type="image"], .form-input[type="checkbox"], .form-input[type="radio"], .form-input[type="range"] { + margin: 3px 0; } + .form-input[type="file"] { + background-color: #fff; } + .form-input[type="color"] { + width: 40px; + height: 40px; + overflow: hidden; + padding: 2px; } + .form-input[disabled], .form-input[readonly] { + cursor: not-allowed; } + +.form-input--select { + background-color: #fff; } + +.form-input-file { + font-size: 1rem; } + +/** + * Form actions + */ +.form-actions { + padding: 28px 20px; + margin-top: 28px; + margin-bottom: 28px; + background-color: #f5f5f5; + border-top: 1px solid #ddd; } + .form-actions .btn { + margin-right: 10px; } + .form-actions .btn:last-child { + margin-right: 0; } + +/** + * Form validation messages + */ +.form-controlGroup .form-message { + padding-top: 0.5em; + padding-left: 0.5em; } + +.form-actions .form-message { + padding: 0.5em; } + +/** + * Form field feedback states + */ +.has-warning { + color: #f4aa47; } + +.form-controlGroup.has-warning .form-label { + color: #f4aa47; } + +.form-controlGroup.has-warning .form-input { + color: #f4aa47; + border-color: #f4aa47; } + .form-controlGroup.has-warning .form-input:focus { + border-color: #f19417; } + +.form-controlGroup.has-warning .form-message { + display: block; + color: #f4aa47; } + +.has-error { + color: #B94A4D; } + +.form-controlGroup.has-error .form-label { + color: #B94A4D; } + +.form-controlGroup.has-error .form-input { + color: #B94A4D; + border-color: #B94A4D; } + .form-controlGroup.has-error .form-input:focus { + border-color: #963a3c; } + +.form-controlGroup.has-error .form-message { + display: block; + color: #B94A4D; } + +.has-success { + color: #16c98d; } + +.form-controlGroup.has-success .form-label { + color: #16c98d; } + +.form-controlGroup.has-success .form-input { + color: #16c98d; + border-color: #16c98d; } + .form-controlGroup.has-success .form-input:focus { + border-color: #119b6d; } + +.form-controlGroup.has-success .form-message { + display: block; + color: #16c98d; } + +.has-info { + color: #288ad6; } + +.form-controlGroup.has-info .form-label { + color: #288ad6; } + +.form-controlGroup.has-info .form-input { + color: #288ad6; + border-color: #288ad6; } + .form-controlGroup.has-info .form-input:focus { + border-color: #206eab; } + +.form-controlGroup.has-info .form-message { + display: block; + color: #288ad6; } + +/** + * Placeholder text + * ================================= + * Gets special styles; can't be bundled together though for some reason + */ +:-ms-input-placeholder { + color: #b3b3b3; } + +:-moz-placeholder { + color: #b3b3b3; } + +::-webkit-input-placeholder { + color: #b3b3b3; } + +@media (min-width: 751px) { + /** + * Horizontal-specific styles + * ================================= + * add .form--horizontal to the element + * Demo: http://trykickoff.com/demos/forms.html#layout-example-labels-inline + * Code: https://gist.github.com/mrmartineau/6712577#file-labels-inline-html + */ + .form--horizontal .form-controlGroup { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .form--horizontal .form-controlGroup > .form-controlGroup-inputWrapper { + width: 100%; } + .form--horizontal .form-label { + width: 140px; + margin-right: 28px; + padding-top: 0.6em; } + .form--horizontal .form-actions { + padding-left: 168px; } } + +/** + * Custom controls + * - Radios/checkboxes + * - Select element + * - File upload + */ +/** + * Custom Checkboxes and radios + * ================================= + * IE9+ + * + * -------------------------------- + * + * Checkbox button example HTML + * + * + * + * ------------------------------- + * + * Radio button example HTML + * + * + * + * ================================= */ +.control--custom { + position: relative; + display: block; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + padding-left: 2.3em; + height: 1.3em; + line-height: 1.3em !important; } + +.control--custom--inline { + display: inline-block; + padding-right: 2em; } + +.control--custom-input { + position: absolute; + opacity: 0; + z-index: -1; } + +.control-indicator { + position: absolute; + left: 0; + display: inline-block; + width: 1.3em; + height: 1.3em; + -webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); + transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); + border: 1px solid #ccc; + background-color: #ccc; + vertical-align: middle; + margin-top: 0; + box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; } + +.control--custom-input:focus ~ .control-indicator { + box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 3px #181830; } + +.control-indicator--checkbox, +.control-indicator--tickbox { + border-radius: .2em; } + .control-indicator--checkbox:before, .control-indicator--checkbox:after, + .control-indicator--tickbox:before, + .control-indicator--tickbox:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 90%; + display: block; + opacity: 0; + -webkit-transition: all 250ms ease-in-out; + transition: all 250ms ease-in-out; } + +.control-indicator--checkbox:before, .control-indicator--checkbox:after { + top: 50%; + width: 90%; + height: 0.1em; + background-color: #f1f1f1; } + +.control-indicator--checkbox:before { + -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0); + -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0); + transform: translate(-50%, -50%) rotate(45deg) scale(0); } + +.control-indicator--checkbox:after { + -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(0); + -ms-transform: translate(-50%, -50%) rotate(-45deg) scale(0); + transform: translate(-50%, -50%) rotate(-45deg) scale(0); } + +.control-indicator--tickbox:before { + top: 0; + -webkit-transform: translateX(-50%) rotate(45deg) scale(0); + -ms-transform: translateX(-50%) rotate(45deg) scale(0); + transform: translateX(-50%) rotate(45deg) scale(0); + border: 0.1em solid #f1f1f1; + background-color: transparent; + width: 40%; + height: 80%; + border-top: 0; + border-left: 0; } + +.control-indicator--tickbox:after { + display: none; } + +.control--custom-input:checked ~ .control-indicator--checkbox, +.control--custom-input:checked ~ .control-indicator--tickbox { + background-color: #181830; + border: 0.1em solid #181830; } + .control--custom-input:checked ~ .control-indicator--checkbox:before, .control--custom-input:checked ~ .control-indicator--checkbox:after, + .control--custom-input:checked ~ .control-indicator--tickbox:before, + .control--custom-input:checked ~ .control-indicator--tickbox:after { + opacity: 1; } + +.control--custom-input:checked ~ .control-indicator--tickbox:before, .control--custom-input:checked ~ .control-indicator--tickbox:after { + -webkit-transform: translateX(-50%) rotate(45deg) scale(1); + -ms-transform: translateX(-50%) rotate(45deg) scale(1); + transform: translateX(-50%) rotate(45deg) scale(1); } + +.control--custom-input:checked ~ .control-indicator--checkbox:before { + -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1); + -ms-transform: translate(-50%, -50%) rotate(45deg) scale(1); + transform: translate(-50%, -50%) rotate(45deg) scale(1); } + +.control--custom-input:checked ~ .control-indicator--checkbox:after { + -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(1); + -ms-transform: translate(-50%, -50%) rotate(-45deg) scale(1); + transform: translate(-50%, -50%) rotate(-45deg) scale(1); } + +.control-indicator--radio { + border-radius: 50%; } + +.control--custom-input:checked ~ .control-indicator--radio { + background-color: #f1f1f1; + border: 0.3em solid #181830; } + +/** + * Custom select element + * ================================= + * Firefox 39+, IE10+ + * + *
+ +
+ +
+
+ */ +.form-controlGroup-inputWrapper--select { + position: relative; + display: block; + padding: 0; + /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */ } + .form-controlGroup-inputWrapper--select:after { + color: #181830; + content: "\25BC"; + font-size: .7em; + padding: 0; + position: absolute; + right: 1.2em; + top: 1.2em; + z-index: 2; + /* These hacks make the select behind the arrow clickable in some browsers */ + -ms-pointer-events: none; + pointer-events: none; + background: url(#); } + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .form-controlGroup-inputWrapper--select:after { + display: none; } } + .form-controlGroup-inputWrapper--select .form-input--select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value { + background: transparent; + color: #222; } } + +option { + font-weight: normal; } + +/** + * Custom file input + * ================================= + *
+ + +
+ +
+
+ */ +/** + * Custom file input + */ +.form-input--file { + position: relative; + overflow: hidden; + padding-right: 120px; + text-overflow: ellipsis; + white-space: nowrap; } + +.form-input--file-input { + opacity: 0; + visibility: hidden; + position: absolute; + top: 0; + left: 0; } + +.form-input--file-button { + cursor: pointer; + display: inline-block; + position: absolute; + top: 0; + right: -1px; + bottom: 0; + padding: .44em 1em 0; + background-color: #d9d9d9; } + .form-input--file-button:hover { + background-color: #ccc; } + +/** + * Base form styles + * ================================= + * Demo: http://trykickoff.com/demos/forms.html#layout-example-labels-above + * Code: https://gist.github.com/mrmartineau/6712577#file-labels-above-inputs-html + * Usage: +
+ +
+ +
+
+ */ +.form-legend { + display: block; + width: 100%; } -@media screen and (max-width: 46.875em) { - .g--stack--mid { - -ms-flex-flow: column nowrap; - flex-flow: column nowrap; } - .g--stack--mid > .g-col { - -ms-flex-preferred-size: auto !important; - flex-basis: auto !important; - max-width: 100% !important; - margin-left: 0; } - .no-flexbox .g--stack--mid > .g-col { - width: 100% !important; } } +/** + * Form inputs and groups + */ +.form-legend + .form-controlGroup { + -webkit-margin-top-collapse: separate; } -@media screen and (max-width: 62.5em) { - .g--stack--wide { - -ms-flex-flow: column nowrap; - flex-flow: column nowrap; } - .g--stack--wide > .g-col { - -ms-flex-preferred-size: auto !important; - flex-basis: auto !important; - max-width: 100% !important; - margin-left: 0; } - .no-flexbox .g--stack--wide > .g-col { - width: 100% !important; } } +.form-label { + display: block; } -@media screen and (max-width: 78.125em) { - .g--stack--huge { - -ms-flex-flow: column nowrap; - flex-flow: column nowrap; } - .g--stack--huge > .g-col { - -ms-flex-preferred-size: auto !important; - flex-basis: auto !important; - max-width: 100% !important; - margin-left: 0; } - .no-flexbox .g--stack--huge > .g-col { - width: 100% !important; } } +.form-input { + display: block; + width: 100%; + vertical-align: baseline; } + .form-input:focus { + outline: 0; + outline: thin dotted \9; } + .form-input[type="image"], .form-input[type="checkbox"], .form-input[type="radio"], .form-input[type="range"] { + width: auto; + height: auto; + padding: 0; + line-height: normal; + cursor: pointer; + border-radius: 0; + box-sizing: border-box; } + .form-input[type="image"] { + border: 0; } + .form-input[type="file"] { + width: auto; + height: 28px; + padding: initial; + line-height: initial; + border: initial; + background-color: initial; } + .form-input[type="hidden"] { + display: none; } + .form-input[type="password"] { + font-family: sans-serif; } + .form-input[type="range"] { + width: 100%; } + .form-input > .radio:first-child, + .form-input > .checkbox:first-child { + padding-top: 5px; } + .form-input[disabled], .form-input[readonly] { + cursor: not-allowed; } + +.form-input--textarea { + height: auto; + min-height: 5em; + resize: vertical; } + +.form-input--textarea--uneditable { + width: auto; + height: auto; } + +.form-input-file { + display: inline-block; + width: 100%; + margin: 0; + vertical-align: middle; + line-height: 1em; } + .form-input-file:focus { + outline: none; } + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + width: auto; + cursor: pointer; + -webkit-appearance: button; } + +/** + * Checkboxes: + * ================================= + + + + * Radios: + * ================================= + + + */ +.control { + display: block; + line-height: 1; } + .control + .control { + margin-top: 14px; } + .control input { + vertical-align: top; + display: inline; + line-height: 1; + margin-right: 0.5em; } + +.control--inline { + display: inline-block; + vertical-align: middle; } + .control--inline + .control--inline { + margin-top: 0; + margin-left: 1.5em; } + +/** + * Form validation messages + */ +.form-controlGroup .form-message { + display: none; } /** * Links + * ================================= */ a { -webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); @@ -2664,7 +3027,6 @@ a { /** * Buttons * ================================= - * Index: * - Associated Button Variables * - Base button styling * – Button Modifiers @@ -2722,12 +3084,12 @@ a { overflow: visible; /* [8] */ text-align: center; - background-color: #95a5a6; border-radius: 5px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; - user-select: none; } + user-select: none; + background-color: #95a5a6; } .btn, .btn:link, .btn:visited { color: #fff; } .btn:hover, .btn:active, .btn:focus { @@ -2739,7 +3101,7 @@ a { .btn.disabled, .btn[disabled] { cursor: default; background-image: none; - opacity: .65; } + opacity: .5; } .btn--primary { background-color: #288ad6; } @@ -2763,6 +3125,7 @@ input[type="button"].btn--block { /** * Lists + * ================================= * - (Un)ordered lists * - Unstyled lists * - Definition lists @@ -2845,136 +3208,78 @@ dd { /** * Embedded content + * ================================= */ img { font-style: italic; color: #c00; border: 0; -ms-interpolation-mode: bicubic; } - img.img--left { - margin: 0 20px 0 0; } - img.img--right { - margin: 0 0 0 20px; } -svg:not(:root) { - overflow: hidden; } - -img, object, embed, video { - max-width: 100%; } - -/** - * Remove the gap between audio, canvas, iframes, - * images, videos and the bottom of their containers: - * https://github.com/h5bp/html5-boilerplate/issues/440 - */ -audio, -canvas, -iframe, img, -svg, +object, +embed, video { - vertical-align: middle; } + max-width: 100%; } /** - * Media Object - * - * Place any image- and text-like content side-by-side, as per: - * http://csswizardry.com/2013/05/the-flag-object/ - * - * +---------+ - * | | ~~~~ ~~~~~~~~~~~ - * | | ~~~~~~~ ~~~~~ ~~ - * | | ~~~~~~~~~~~~ - * +---------+ + * Icons + * ================================= + * For an example of how to use these, see + * https://gist.github.com/mrmartineau/314b01b300fa20a5a820a4d6889ffd42 + * http://codepen.io/mrmartineau/pen/amkZBb?editors=1100 * - * Markup: -
-
- -
-
-

Lorem ipsum dolor sit amet.

-
-
+ * SVG icon usage: + + + */ -.media { - display: table; - width: 100%; } - -.media-img, -.media-body { - display: table-cell; - vertical-align: middle; } - .media--top .media-img, .media--top - .media-body { - vertical-align: top; } - .media--bottom .media-img, .media--bottom - .media-body { - vertical-align: bottom; } - -.media-body { - width: 100%; } - -.media-img { - padding-right: 10px; } - .media-img > img { - display: block; - max-width: none; } - .media--rev .media-img { - padding-right: 0; - padding-left: 10px; } +[class*="icon"] { + speak: none; } -@media screen and (max-width: 46.875em) { - .media--stackOnSkinny .media-img, - .media--stackOnSkinny .media-body { - display: block; } } +.icon--large { + display: block; + width: 120px; + height: 120px; } -@media screen and (min-width: 46.875em) { - .media--stackOnWide .media-img, - .media--stackOnWide .media-body { - display: block; } } +.icon--small { + display: inline-block; + width: 25px; + height: 25px; } /** - * Fluid width video - * - 16:9 aspect ratio by default - * Usage: - *