Created
June 17, 2015 18:57
-
-
Save ehrenglaube/8df72a9c707db5187055 to your computer and use it in GitHub Desktop.
FRCSS as per CSSWizardry
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| ///*----------------------------------*\ | |
| // #CONFIG | |
| //\*----------------------------------*/ | |
| // Project-wide configuration, settings, and feature flags. | |
| $config: ( | |
| project: "players-page", | |
| env: "dev", | |
| debug: false, | |
| ); | |
| // Retrieve config values by using `config(key)`, e.g.: | |
| // | |
| // @if (config(debug) == true) { ... } | |
| @function config($key) { | |
| @return map-get($config, $key); | |
| } | |
| ///*----------------------------------*\ | |
| // #GLOBAL | |
| //\*----------------------------------*/ | |
| // High-level base settings. | |
| $base-font-size: 16px !default; | |
| $base-line-height: 24px !default; | |
| $base-text-color: #333 !default; | |
| $base-background-color: #fff !default; | |
| // These variables are framework variables, sourced from variables defined | |
| // above. Feel free to use these variables throughout your project, but do not | |
| // modify or reassign them. | |
| $base-spacing-unit: $base-line-height; | |
| $base-spacing-unit-tiny: round($base-spacing-unit / 4); | |
| $base-spacing-unit-small: round($base-spacing-unit / 2); | |
| $base-spacing-unit-large: round($base-spacing-unit * 2); | |
| $base-spacing-unit-huge: round($base-spacing-unit * 4); | |
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ | |
| /** | |
| * 1. Set default font family to sans-serif. | |
| * 2. Prevent iOS and IE text size adjust after device orientation change, | |
| * without disabling user zoom. | |
| */ | |
| html { | |
| font-family: sans-serif; /* 1 */ | |
| -ms-text-size-adjust: 100%; /* 2 */ | |
| -webkit-text-size-adjust: 100%; /* 2 */ | |
| } | |
| /** | |
| * Remove default margin. | |
| */ | |
| body { | |
| margin: 0; | |
| } | |
| /* HTML5 display definitions | |
| ========================================================================== */ | |
| /** | |
| * Correct `block` display not defined for any HTML5 element in IE 8/9. | |
| * Correct `block` display not defined for `details` or `summary` in IE 10/11 | |
| * and Firefox. | |
| * Correct `block` display not defined for `main` in IE 11. | |
| */ | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| menu, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| /** | |
| * 1. Correct `inline-block` display not defined in IE 8/9. | |
| * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. | |
| */ | |
| audio, | |
| canvas, | |
| progress, | |
| video { | |
| display: inline-block; /* 1 */ | |
| vertical-align: baseline; /* 2 */ | |
| } | |
| /** | |
| * Prevent modern browsers from displaying `audio` without controls. | |
| * Remove excess height in iOS 5 devices. | |
| */ | |
| audio:not([controls]) { | |
| display: none; | |
| height: 0; | |
| } | |
| /** | |
| * Address `[hidden]` styling not present in IE 8/9/10. | |
| * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. | |
| */ | |
| [hidden], | |
| template { | |
| display: none; | |
| } | |
| /* Links | |
| ========================================================================== */ | |
| /** | |
| * Remove the gray background color from active links in IE 10. | |
| */ | |
| a { | |
| background-color: transparent; | |
| } | |
| /** | |
| * Improve readability of focused elements when they are also in an | |
| * active/hover state. | |
| */ | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| /* Text-level semantics | |
| ========================================================================== */ | |
| /** | |
| * Address styling not present in IE 8/9/10/11, Safari, and Chrome. | |
| */ | |
| abbr[title] { | |
| border-bottom: 1px dotted; | |
| } | |
| /** | |
| * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. | |
| */ | |
| b, | |
| strong { | |
| font-weight: bold; | |
| } | |
| /** | |
| * Address styling not present in Safari and Chrome. | |
| */ | |
| dfn { | |
| font-style: italic; | |
| } | |
| /** | |
| * Address variable `h1` font-size and margin within `section` and `article` | |
| * contexts in Firefox 4+, Safari, and Chrome. | |
| */ | |
| h1 { | |
| font-size: 2em; | |
| margin: 0.67em 0; | |
| } | |
| /** | |
| * Address styling not present in IE 8/9. | |
| */ | |
| mark { | |
| background: #ff0; | |
| color: #000; | |
| } | |
| /** | |
| * Address inconsistent and variable font size in all browsers. | |
| */ | |
| small { | |
| font-size: 80%; | |
| } | |
| /** | |
| * Prevent `sub` and `sup` affecting `line-height` in all browsers. | |
| */ | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| /* Embedded content | |
| ========================================================================== */ | |
| /** | |
| * Remove border when inside `a` element in IE 8/9/10. | |
| */ | |
| img { | |
| border: 0; | |
| } | |
| /** | |
| * Correct overflow not hidden in IE 9/10/11. | |
| */ | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| /* Grouping content | |
| ========================================================================== */ | |
| /** | |
| * Address margin not present in IE 8/9 and Safari. | |
| */ | |
| figure { | |
| margin: 1em 40px; | |
| } | |
| /** | |
| * Address differences between Firefox and other browsers. | |
| */ | |
| hr { | |
| box-sizing: content-box; | |
| height: 0; | |
| } | |
| /** | |
| * Contain overflow in all browsers. | |
| */ | |
| pre { | |
| overflow: auto; | |
| } | |
| /** | |
| * Address odd `em`-unit font size rendering in all browsers. | |
| */ | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: monospace, monospace; | |
| font-size: 1em; | |
| } | |
| /* Forms | |
| ========================================================================== */ | |
| /** | |
| * Known limitation: by default, Chrome and Safari on OS X allow very limited | |
| * styling of `select`, unless a `border` property is set. | |
| */ | |
| /** | |
| * 1. Correct color not being inherited. | |
| * Known issue: affects color of disabled elements. | |
| * 2. Correct font properties not being inherited. | |
| * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. | |
| */ | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| color: inherit; /* 1 */ | |
| font: inherit; /* 2 */ | |
| margin: 0; /* 3 */ | |
| } | |
| /** | |
| * Address `overflow` set to `hidden` in IE 8/9/10/11. | |
| */ | |
| button { | |
| overflow: visible; | |
| } | |
| /** | |
| * Address inconsistent `text-transform` inheritance for `button` and `select`. | |
| * All other form control elements do not inherit `text-transform` values. | |
| * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. | |
| * Correct `select` style inheritance in Firefox. | |
| */ | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| /** | |
| * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | |
| * and `video` controls. | |
| * 2. Correct inability to style clickable `input` types in iOS. | |
| * 3. Improve usability and consistency of cursor style between image-type | |
| * `input` and others. | |
| */ | |
| button, | |
| html input[type="button"], /* 1 */ | |
| input[type="reset"], | |
| input[type="submit"] { | |
| -webkit-appearance: button; /* 2 */ | |
| cursor: pointer; /* 3 */ | |
| } | |
| /** | |
| * Re-set default cursor for disabled elements. | |
| */ | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default; | |
| } | |
| /** | |
| * Remove inner padding and border in Firefox 4+. | |
| */ | |
| button::-moz-focus-inner, | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| /** | |
| * Address Firefox 4+ setting `line-height` on `input` using `!important` in | |
| * the UA stylesheet. | |
| */ | |
| input { | |
| line-height: normal; | |
| } | |
| /** | |
| * It's recommended that you don't attempt to style these elements. | |
| * Firefox's implementation doesn't respect box-sizing, padding, or width. | |
| * | |
| * 1. Address box sizing set to `content-box` in IE 8/9/10. | |
| * 2. Remove excess padding in IE 8/9/10. | |
| */ | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| box-sizing: border-box; /* 1 */ | |
| padding: 0; /* 2 */ | |
| } | |
| /** | |
| * Fix the cursor style for Chrome's increment/decrement buttons. For certain | |
| * `font-size` values of the `input`, it causes the cursor style of the | |
| * decrement button to change from `default` to `text`. | |
| */ | |
| input[type="number"]::-webkit-inner-spin-button, | |
| input[type="number"]::-webkit-outer-spin-button { | |
| height: auto; | |
| } | |
| /** | |
| * 1. Address `appearance` set to `searchfield` in Safari and Chrome. | |
| * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. | |
| */ | |
| input[type="search"] { | |
| -webkit-appearance: textfield; /* 1 */ | |
| box-sizing: content-box; /* 2 */ | |
| } | |
| /** | |
| * Remove inner padding and search cancel button in Safari and Chrome on OS X. | |
| * Safari (but not Chrome) clips the cancel button when the search input has | |
| * padding (and `textfield` appearance). | |
| */ | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| /** | |
| * Define consistent border, margin, and padding. | |
| */ | |
| fieldset { | |
| border: 1px solid #c0c0c0; | |
| margin: 0 2px; | |
| padding: 0.35em 0.625em 0.75em; | |
| } | |
| /** | |
| * 1. Correct `color` not being inherited in IE 8/9/10/11. | |
| * 2. Remove padding so people aren't caught out if they zero out fieldsets. | |
| */ | |
| legend { | |
| border: 0; /* 1 */ | |
| padding: 0; /* 2 */ | |
| } | |
| /** | |
| * Remove default vertical scrollbar in IE 8/9/10/11. | |
| */ | |
| textarea { | |
| overflow: auto; | |
| } | |
| /** | |
| * Don't inherit the `font-weight` (applied by a rule above). | |
| * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. | |
| */ | |
| optgroup { | |
| font-weight: bold; | |
| } | |
| /* Tables | |
| ========================================================================== */ | |
| /** | |
| * Remove most spacing between table cells. | |
| */ | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| td, | |
| th { | |
| padding: 0; | |
| } | |
| /*------------------------------------*\ | |
| #RESET | |
| \*------------------------------------*/ | |
| /** | |
| * As well as using normalize.css, it is often advantageous to remove all | |
| * margins from certain elements. | |
| */ | |
| body, | |
| h1, h2, h3, h4, h5, h6, | |
| p, blockquote, pre, | |
| dl, dd, ol, ul, | |
| form, fieldset, legend, | |
| figure, | |
| table, th, td, caption, | |
| hr { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /** | |
| * Give a help cursor to elements that give extra info on `:hover`. | |
| */ | |
| abbr[title], | |
| dfn[title] { | |
| cursor: help; | |
| } | |
| /** | |
| * Remove underlines from potentially troublesome elements. | |
| */ | |
| u, | |
| ins { | |
| text-decoration: none; | |
| } | |
| /** | |
| * Apply faux underlines to inserted text via `border-bottom`. | |
| */ | |
| ins { | |
| border-bottom: 1px solid; | |
| } | |
| /*------------------------------------*\ | |
| #BOX-SIZING | |
| \*------------------------------------*/ | |
| /** | |
| * Set the global `box-sizing` state to `border-box`. | |
| * | |
| * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice | |
| * paulirish.com/2012/box-sizing-border-box-ftw | |
| */ | |
| html { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| * { | |
| &, | |
| &:before, | |
| &:after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; | |
| } | |
| } | |
| /*------------------------------------*\ | |
| #SHARED | |
| \*------------------------------------*/ | |
| /** | |
| * Where `margin-bottom` is concerned,this value will be the same as the | |
| * base line-height. This allows us to keep a consistent vertical rhythm. | |
| * As per: csswizardry.com/2012/06/single-direction-margin-declarations | |
| */ | |
| h1, h2, h3, h4, h5, h6, | |
| ul, ol, dl, | |
| blockquote, p, address, | |
| hr, | |
| table, | |
| fieldset, figure, | |
| pre { | |
| margin-bottom: $base-spacing-unit; | |
| } | |
| /** | |
| * Where `margin-left` is concerned we want to try and indent certain elements | |
| * by a consistent amount. Define that amount once,here. | |
| */ | |
| ul, ol, dd, | |
| %margin-left { | |
| margin-left: 2 * $base-spacing-unit; | |
| } | |
| /*------------------------------------*\ | |
| #FORMS | |
| \*------------------------------------*/ | |
| // Preconfigure these settings before the @import of this file. | |
| $form-font-family: sans-serif; | |
| $legend-font-size: 1rem; | |
| $fieldset-color-border: #005639; | |
| $fieldset-padding: 1.5rem; | |
| $legend-color: #FFF; | |
| $legend-color-bg: #005639; | |
| $legend-padding: 0.25rem 1rem; | |
| $form-font-family: sans-serif; | |
| $label-padding: 0.25rem 0; | |
| $label-color: #002317; | |
| /** | |
| * 1. Reset all properties to browser default. | |
| */ | |
| form { | |
| all: initial; /* [1] */ | |
| font-family: $form-font-family; | |
| } | |
| fieldset { | |
| font-size: $legend-font-size; | |
| border: 2px solid $fieldset-color-border; | |
| padding: $fieldset-padding; | |
| border-radius: 0.5em; | |
| } | |
| legend { | |
| color: $legend-color; | |
| background: $legend-color-bg; | |
| padding: $legend-padding; | |
| border-radius: 1rem; | |
| } | |
| label { | |
| font-weight: bold; | |
| font-size: .75rem; | |
| padding: $label-padding; | |
| color: $label-color; | |
| } | |
| /*------------------------------------*\ | |
| #LAYOUT | |
| \*------------------------------------*/ | |
| // Preconfigure these settings before the @import of this file. | |
| $layout-ns: null !default; | |
| $layout-gutter: 10px !default; | |
| /** | |
| * A simple layout object to be used in conjunction with our width utility | |
| * classes in order to rapidly construct layouts in the view. | |
| */ | |
| .#{$layout-ns}o-layout { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| margin-left: -$layout-gutter; | |
| } | |
| .#{$layout-ns}o-layout__item { | |
| display: inline-block; | |
| vertical-align: top; | |
| width: 100%; | |
| padding-left: $layout-gutter; | |
| } | |
| /** | |
| * Reverse layout items’ direction. | |
| */ | |
| .#{$layout-ns}o-layout--rev { | |
| direction: rtl; | |
| > .#{$layout-ns}o-layout__item { | |
| direction: ltr; | |
| } | |
| } | |
| /** | |
| * Different sizes of layout item (gutters). | |
| */ | |
| .#{$layout-ns}o-layout--small { | |
| margin-left: round(0.5 * -$layout-gutter); | |
| > .#{$layout-ns}o-layout__item { | |
| padding-left: round(0.5 * $layout-gutter); | |
| } | |
| } | |
| .#{$layout-ns}o-layout--large { | |
| margin-left: round(2 * -$layout-gutter); | |
| > .#{$layout-ns}o-layout__item { | |
| padding-left: round(2 * $layout-gutter); | |
| } | |
| } | |
| /*------------------------------------*\ | |
| #LIST-BARE | |
| \*------------------------------------*/ | |
| // Preconfigure these settings before the @import of this file. | |
| $list-bare-ns: null !default; | |
| /** | |
| * Remove bullts and indents from lists. | |
| */ | |
| .#{$list-bare-ns}o-list-bare { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| /*------------------------------------*\ | |
| #LIST-PAIR | |
| \*------------------------------------*/ | |
| // Preconfigure these settings before the @import of this file. | |
| $list-pair-ns: null !default; | |
| $list-pair-gap: 10px !default; | |
| /** | |
| * Key-value pair list, usually applied to DL/DT/DD. | |
| * | |
| * 1. Reset all properties to browser default. | |
| */ | |
| .#{$list-pair-ns}o-list-pair { | |
| all: initial; /* [1] */ | |
| } | |
| .#{$list-pair-ns}o-list-pair__key { | |
| } | |
| /** | |
| * 1. Remove indent from DD elements. | |
| */ | |
| .#{$list-pair-ns}o-list-pair__val { | |
| margin-left: 0; /* [1] */ | |
| margin-bottom: $list-pair-gap; | |
| } | |
| /*------------------------------------*\ | |
| #PACK | |
| \*------------------------------------*/ | |
| // Preconfigure these settings before the @import of this file. | |
| $pack-ns: null !default; | |
| /** | |
| * The Pack object simply forces an arbitrary number of elements to pack up | |
| * horizontally into all the space available in their parent. | |
| * | |
| * Example usage: | |
| * | |
| <div class="o-pack [o-pack--equal]"> | |
| <div class="o-pack__item"> | |
| ... | |
| </div> | |
| <div class="o-pack__item [o-pack__item--full]"> | |
| ... | |
| </div> | |
| <div class="o-pack__item"> | |
| ... | |
| </div> | |
| </div> | |
| * | |
| * 1. Reset all properties to browser default. | |
| * 2. This is where the magic happens. | |
| */ | |
| .#{$pack-ns}o-pack { | |
| all: initial; /* [1] */ | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| width: 100%; | |
| display: table; /* [2] */ | |
| } | |
| .#{$pack-ns}o-pack__item { | |
| display: table-cell; /* [2] */ | |
| } | |
| /** | |
| * Force one item to take up 100% of the space that the other items don’t | |
| * need. Cannot be used within `.o-pack--equal` parents. | |
| */ | |
| .#{$pack-ns}o-pack__item--full { | |
| width: 100%; | |
| } | |
| /** | |
| * Force all packed items to occupy the same amount of space as each other. | |
| */ | |
| .#{$pack-ns}o-pack--equal { | |
| table-layout: fixed; | |
| } | |
| /*------------------------------------*\ | |
| #FORMS | |
| \*------------------------------------*/ | |
| // Preconfigure these settings before the @import of this file. | |
| $input-ns: null !default; | |
| /** | |
| * Text input styles. | |
| */ | |
| // Preconfigure these settings before the @import of this file. | |
| $input-text-padding: 0.25rem !default; | |
| $input-text-color: #668 !default; | |
| $input-text-color-border-hover: rgba(39,41,43,.6) !default; | |
| $input-text-color-bg: #FFF !default; | |
| $input-text-color-shadow: rgba(0, 137, 91, .6) !default; | |
| $input-text-font-family: sans-serif !default; | |
| $input-text-font-size: 12px !default; | |
| /** | |
| * Configurable form item component | |
| * 1. Reset all properties to browser default | |
| * 2. box-shadow transition | |
| */ | |
| .#{$input-ns}c-input-text { | |
| all: initial; /* [1] */ | |
| border: 1px solid #C5C5C5; | |
| padding: $input-text-padding; | |
| color: $input-text-color; | |
| font-family: $input-text-font-family; | |
| font-size: $input-text-font-size; | |
| border-radius: .25rem; | |
| transition: 0.5s all; /* [2] */ | |
| &:focus { | |
| border-color: $input-text-color-border-hover; | |
| border-radius: 0 .2857rem .2857rem 0; | |
| background: $input-text-color-bg; | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),0 0 8px $input-text-color-shadow; | |
| } | |
| } | |
| /** | |
| * Custom radio inputs. | |
| */ | |
| // Preconfigure these settings before the @import of this file. | |
| $input-radio-color-bg: #005639 !default; | |
| $input-radio-color-border: #002317 !default; | |
| /** | |
| * High-level wrapper element for custom radio inputs. | |
| * | |
| * 1. Reset all properties to browser default. | |
| */ | |
| .#{$input-ns}c-input-radio-wrapper { | |
| all: initial; /* [1] */ | |
| display: inline-block; | |
| cursor: pointer; | |
| margin: 1rem 0; | |
| width: 100%; | |
| } | |
| /** | |
| * 1. Hide the native input element. | |
| * 2. Make so it sits on top of the input radio element. | |
| */ | |
| .c-input-radio { | |
| border: 0; | |
| opacity: 0; /* [1] */ | |
| height: 0; | |
| width: 0; | |
| overflow: hidden; | |
| position: absolute; /* [2] */ | |
| } | |
| /** | |
| * Dummy element to provide faux styling. | |
| */ | |
| .#{$input-ns}c-input-radio-dummy { | |
| display: block; | |
| /** | |
| * 1. Add some space to the right to accommodate the label content, for example. | |
| * 2. Move them to the right edge so they are all vertically aligned. | |
| */ | |
| &:after { | |
| content: ''; | |
| display: inline-block; | |
| width: 0.5rem; | |
| height: 0.5rem; | |
| border-radius: 1rem; | |
| border: 0.125rem solid #fff; | |
| box-shadow: 0 0 0 0.10rem $input-radio-color-border; | |
| margin-left: 0.75rem; /* [1] */ | |
| transition: 0.5s ease all; | |
| vertical-align: -0.125em; | |
| float: right; /* [2] */ | |
| .#{$input-ns}c-input-radio:checked + & { | |
| background: $input-radio-color-bg; | |
| box-shadow: 0 0 0 0.25rem $input-radio-color-border; | |
| } | |
| } | |
| } | |
| /*------------------------------------*\ | |
| #BUTTONS | |
| \*------------------------------------*/ | |
| // Preconfigure these settings before the @import of this file. | |
| $btn-ns: null !default; | |
| $btn-color: #fff !default; | |
| $btn-color-bg: #005639 !default; | |
| $btn-color-bg-hover: lighten($btn-color-bg, 10%) !default; | |
| $btn-padding: 10px !default; | |
| $btn-font-size: 12px !default; | |
| $btn-font-family: sans-serif !default; | |
| /** | |
| * Configurable button component. Can be applied to any HTML element necessary. | |
| * | |
| * 1. Reset all properties to browser default. | |
| * 2. Allow us to style box model properties. | |
| * 3. Line different sized buttons up a little nicer. | |
| * 4. Reset/normalize some styles. | |
| * 5. Force all button-styled elements to appear clickable. | |
| */ | |
| .#{$btn-ns}c-btn { | |
| all: initial; /* [1] */ | |
| display: inline-block; /* [2] */ | |
| vertical-align: middle; /* [3] */ | |
| text-align: center; /* [4] */ | |
| text-decoration: none; /* [4] */ | |
| cursor: pointer; /* [5] */ | |
| padding: $btn-padding; | |
| color: $btn-color; | |
| background-color: $btn-color-bg; | |
| font-family: $btn-font-family; | |
| font-size: $btn-font-size; | |
| &:hover, | |
| &:active, | |
| &:focus { | |
| text-decoration: none; /* [4] */ | |
| background-color: $btn-color-bg-hover; | |
| } | |
| /** | |
| * 1. Forbid interaction with buttons that are disabled. | |
| */ | |
| &[disabled], | |
| &.is-disabled { | |
| opacity: 0.5; | |
| pointer-events: none; /* [1] */ | |
| } | |
| } | |
| /** | |
| * Provide size variants by halving or doubling the padding of the standard | |
| * button. | |
| */ | |
| .#{$btn-ns}c-btn--small { | |
| padding: round(0.5 * $btn-padding); | |
| } | |
| .#{$btn-ns}c-btn--large { | |
| padding: round(2.0 * $btn-padding); | |
| } | |
| /** | |
| * Create buttons that will fill the entire width of the container they’re | |
| * placed inside. | |
| * | |
| * 1. Remove horizontal paddings so widths and paddings do not compound. | |
| */ | |
| .#{$btn-ns}c-btn--full { | |
| padding-right: 0; /* [1] */ | |
| padding-left: 0; /* [1] */ | |
| width: 100%; | |
| } | |
| /*------------------------------------*\ | |
| #COMMENTS | |
| \*------------------------------------*/ | |
| // Preconfigure these settings before the @import of this file. | |
| $comments-ns: null !default; | |
| $comments-color: #333 !default; | |
| $comments-color-border: #d9d9d9 !default; | |
| $comments-color-date: lighten($comments-color, 40%); | |
| $comments-color-label: $comments-color !default; | |
| $comments-color-label-bg: #e9e9e9 !default; | |
| $comments-font-family: sans-serif !default; | |
| $comments-font-size-title: 16px !default; | |
| $comments-font-size-author: 12px !default; | |
| $comments-font-size-date: 12px !default; | |
| $comments-font-size-label: 12px !default; | |
| $comments-font-size-text: 13px !default; | |
| $comments-padding: 20px !default; | |
| $comments-padding-label: 5px !default; | |
| /** | |
| * Configurable component for displaying comments. Comments are a text group | |
| * that capture the following information: | |
| * | |
| * - Title | |
| * - Author | |
| * - Date | |
| * - Labels (zero or more) | |
| * - Text | |
| * | |
| * Example usage: | |
| * | |
| * <div class="c-comment"> | |
| * <header class="c-comment__header"> | |
| * <h1 class="c-comment__title">Comment Title</h1> | |
| * <p class="c-comment__author">Joe Bloggs</p> | |
| * <time class="c-comment__date" datetime="2015-06-01 15:00"> | |
| * June 1st, 2015 at 3:00pm | |
| * </time> | |
| * <ul class="c-comment__labels"> | |
| * <li class="c-comment__label"> | |
| * General | |
| * </li> | |
| * </ul> | |
| * </header> | |
| * <div class="c-comment__text"> | |
| * Lorem ipsum.... | |
| * </div> | |
| * </div> | |
| */ | |
| .#{$comments-ns}c-comment { | |
| border-bottom: 1px $comments-color-border solid; | |
| padding: $comments-padding; | |
| } | |
| .#{$comments-ns}c-comment__header {} | |
| .#{$comments-ns}c-comment__title { | |
| all: initial; | |
| font-family: $comments-font-family; | |
| font-size: $comments-font-size-title; | |
| color: $comments-color; | |
| } | |
| .#{$comments-ns}c-comment__author { | |
| font-family: $comments-font-family; | |
| font-size: $comments-font-size-author; | |
| color: $comments-color; | |
| margin-bottom: 0; | |
| margin-top: 10px; | |
| } | |
| .#{$comments-ns}c-comment__date { | |
| display: block; | |
| margin-top: 5px; | |
| font-family: $comments-font-family; | |
| font-size: $comments-font-size-date; | |
| font-style: italic; | |
| color: $comments-color-date; | |
| } | |
| .#{$comments-ns}c-comment__labels { | |
| all: initial; | |
| display: flex; | |
| list-style: none; | |
| margin-top: 10px; | |
| } | |
| .#{$comments-ns}c-comment__label { | |
| background-color: $comments-color-label-bg; | |
| border-radius: 3px; | |
| color: $comments-color-label; | |
| font-family: $comments-font-family; | |
| font-size: $comments-font-size-label; | |
| padding: $comments-padding-label; | |
| margin-right: 5px; | |
| } | |
| .#{$comments-ns}c-comment__text { | |
| margin-top: 10px; | |
| margin-bottom: 0; | |
| font-family: $comments-font-family; | |
| font-size: $comments-font-size-text; | |
| line-height: 1.8; | |
| color: $comments-color; | |
| } | |
| /*------------------------------------*\ | |
| #MESSAGING | |
| \*------------------------------------*/ | |
| // Preconfigure these settings before the @import of this file. | |
| $msg-ns: null !default; | |
| $msg-color-bg: #f9f9f9 !default; | |
| $msg-color-border: desaturate(darken($msg-color-bg, 25%), 50%) !default; | |
| $msg-color: desaturate(darken($msg-color-bg, 75%), 50%) !default; | |
| $msg-color-bg-danger: #fee !default; | |
| $msg-color-border-danger: desaturate(darken($msg-color-bg-danger, 25%), 50%) !default; | |
| $msg-color-danger: desaturate(darken($msg-color-bg-danger, 60%), 50%) !default; | |
| $msg-color-bg-info: #e0f3ff !default; | |
| $msg-color-border-info: desaturate(darken($msg-color-bg-info, 25%), 50%) !default; | |
| $msg-color-info: desaturate(darken($msg-color-bg-info, 60%), 50%) !default; | |
| $msg-color-bg-success: #f0ffe0 !default; | |
| $msg-color-border-success: desaturate(darken($msg-color-bg-success, 40%), 50%) !default; | |
| $msg-color-success: desaturate(darken($msg-color-bg-success, 70%), 50%) !default; | |
| $msg-color-bg-warning: #fff6d9 !default; | |
| $msg-color-border-warning: desaturate(darken($msg-color-bg-warning, 35%), 50%) !default; | |
| $msg-color-warning: desaturate(darken($msg-color-bg-warning, 70%), 50%) !default; | |
| $msg-font-family: sans-serif !default; | |
| $msg-font-size: 12px !default; | |
| $msg-font-style: italic !default; | |
| $msg-padding: 15px !default; | |
| /** | |
| * Configurable messaging component. Provides a way to give context-specific messaging to the | |
| * user in response to some interaction. Supports 5 variants of messaging component: | |
| * | |
| * Danger: error, failure or dangerous actions | |
| * Info: general information, help and hints | |
| * Success: response to successfully completed action | |
| * Warning: non-blocking message about possibly undesirable action | |
| * Default (unspecified): generic messaging container | |
| * | |
| * Example usage (with icons from FontAwesome): | |
| * | |
| * <div class="c-message c-message--danger"> | |
| * <i class="c-message__icon fa fa-times-circle"></i> | |
| * <div class="c-message__text"> | |
| * There was a problem completing your request | |
| * </div> | |
| * </div> | |
| * | |
| * Icons are an optional addition to messaging components, but can provide an additional | |
| * visual cue about the outcome of an action. The messaging component has agnostic support | |
| * for any third-party icon library. | |
| * | |
| * 1. Reset all properties to browser default. | |
| * 2. Ensure gutter before following content. | |
| */ | |
| .#{$msg-ns}c-message { | |
| all: initial; /* [1] */ | |
| display: flex; | |
| align-items: center; | |
| padding: $msg-padding; | |
| margin-bottom: 10px; /* [2] */ | |
| background-color: $msg-color-bg; | |
| border: 1px $msg-color-border solid; | |
| border-radius: 5px; | |
| } | |
| .#{$msg-ns}c-message__icon { | |
| margin-right: 5px; | |
| color: $msg-color; | |
| font-size: $msg-font-size; | |
| .#{$msg-ns}c-message--danger > & { | |
| color: $msg-color-danger; | |
| } | |
| .#{$msg-ns}c-message--info > & { | |
| color: $msg-color-info; | |
| } | |
| .#{$msg-ns}c-message--success > & { | |
| color: $msg-color-success; | |
| } | |
| .#{$msg-ns}c-message--warning > & { | |
| color: $msg-color-warning; | |
| } | |
| } | |
| .#{$msg-ns}c-message__text { | |
| color: $msg-color; | |
| font-family: $msg-font-family; | |
| font-size: $msg-font-size; | |
| font-style: $msg-font-style; | |
| .#{$msg-ns}c-message--danger > & { | |
| color: $msg-color-danger; | |
| } | |
| .#{$msg-ns}c-message--info > & { | |
| color: $msg-color-info; | |
| } | |
| .#{$msg-ns}c-message--success > & { | |
| color: $msg-color-success; | |
| } | |
| .#{$msg-ns}c-message--warning > & { | |
| color: $msg-color-warning; | |
| } | |
| } | |
| .#{$msg-ns}c-message--danger { | |
| background-color: $msg-color-bg-danger; | |
| border-color: $msg-color-border-danger; | |
| } | |
| .#{$msg-ns}c-message--info { | |
| background-color: $msg-color-bg-info; | |
| border-color: $msg-color-border-info; | |
| } | |
| .#{$msg-ns}c-message--success { | |
| background-color: $msg-color-bg-success; | |
| border-color: $msg-color-border-success; | |
| } | |
| .#{$msg-ns}c-message--warning { | |
| background-color: $msg-color-bg-warning; | |
| border-color: $msg-color-border-warning; | |
| } | |
| /*------------------------------------*\ | |
| #FOO | |
| \*------------------------------------*/ | |
| // Preconfigure these settings before the @import of this file. | |
| $foo-ns: null !default; | |
| /** | |
| * 1. Reset all properties to browser default. | |
| */ | |
| .#{$foo-ns}foo { | |
| all: initial; /* [1] */ | |
| } | |
| /*------------------------------------*\ | |
| #WIDTHS | |
| \*------------------------------------*/ | |
| // Preconfigure these settings before the @import of this file. | |
| $widths-ns: null !default; | |
| // A mixin to spit out our width classes. Pass in the columns we want the widths | |
| // to have, and an optional suffix for responsive widths. E.g. to create thirds | |
| // and quarters for a small breakpoint: | |
| // | |
| // @include widths(3 4, -sm); | |
| @mixin widths($columns, $breakpoint: null) { | |
| // Loop through the number of columns for each denominator of our fractions. | |
| @each $denominator in $columns { | |
| // Begin creating a numerator for our fraction up until we hit the | |
| // denominator. | |
| @for $numerator from 1 through $denominator { | |
| // Build a class in the format `.u-3/4`. | |
| .#{$widths-ns}u-#{$numerator}\/#{$denominator}#{$breakpoint} { | |
| width: ($numerator / $denominator) * 100% !important; | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * A series of width helper classes that you can use to size things like grid | |
| * systems. Classes take a fraction-like format (e.g. `.u-2/3`). | |
| * | |
| * Use these in your markup, e.g.: | |
| * | |
| * <div class="u-7/12"> | |
| * | |
| */ | |
| /** | |
| * Generate width classes for all viewports. | |
| */ | |
| @include widths(1 2 3 4 5); | |
| /** | |
| * Generate width classes for small viewports. | |
| */ | |
| @media screen and (min-width: 720px) { | |
| @include widths(1 2 3 4 5, \@sm); | |
| } | |
| /** | |
| * Generate width classes for medium viewports. | |
| */ | |
| @media screen and (min-width: 1024px) { | |
| @include widths(1 2 3 4 5, \@md); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ | |
| /** | |
| * 1. Set default font family to sans-serif. | |
| * 2. Prevent iOS and IE text size adjust after device orientation change, | |
| * without disabling user zoom. | |
| */ | |
| html { | |
| font-family: sans-serif; | |
| /* 1 */ | |
| -ms-text-size-adjust: 100%; | |
| /* 2 */ | |
| -webkit-text-size-adjust: 100%; | |
| /* 2 */ | |
| } | |
| /** | |
| * Remove default margin. | |
| */ | |
| body { | |
| margin: 0; | |
| } | |
| /* HTML5 display definitions | |
| ========================================================================== */ | |
| /** | |
| * Correct `block` display not defined for any HTML5 element in IE 8/9. | |
| * Correct `block` display not defined for `details` or `summary` in IE 10/11 | |
| * and Firefox. | |
| * Correct `block` display not defined for `main` in IE 11. | |
| */ | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| menu, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| /** | |
| * 1. Correct `inline-block` display not defined in IE 8/9. | |
| * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. | |
| */ | |
| audio, | |
| canvas, | |
| progress, | |
| video { | |
| display: inline-block; | |
| /* 1 */ | |
| vertical-align: baseline; | |
| /* 2 */ | |
| } | |
| /** | |
| * Prevent modern browsers from displaying `audio` without controls. | |
| * Remove excess height in iOS 5 devices. | |
| */ | |
| audio:not([controls]) { | |
| display: none; | |
| height: 0; | |
| } | |
| /** | |
| * Address `[hidden]` styling not present in IE 8/9/10. | |
| * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. | |
| */ | |
| [hidden], | |
| template { | |
| display: none; | |
| } | |
| /* Links | |
| ========================================================================== */ | |
| /** | |
| * Remove the gray background color from active links in IE 10. | |
| */ | |
| a { | |
| background-color: transparent; | |
| } | |
| /** | |
| * Improve readability of focused elements when they are also in an | |
| * active/hover state. | |
| */ | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| /* Text-level semantics | |
| ========================================================================== */ | |
| /** | |
| * Address styling not present in IE 8/9/10/11, Safari, and Chrome. | |
| */ | |
| abbr[title] { | |
| border-bottom: 1px dotted; | |
| } | |
| /** | |
| * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. | |
| */ | |
| b, | |
| strong { | |
| font-weight: bold; | |
| } | |
| /** | |
| * Address styling not present in Safari and Chrome. | |
| */ | |
| dfn { | |
| font-style: italic; | |
| } | |
| /** | |
| * Address variable `h1` font-size and margin within `section` and `article` | |
| * contexts in Firefox 4+, Safari, and Chrome. | |
| */ | |
| h1 { | |
| font-size: 2em; | |
| margin: 0.67em 0; | |
| } | |
| /** | |
| * Address styling not present in IE 8/9. | |
| */ | |
| mark { | |
| background: #ff0; | |
| color: #000; | |
| } | |
| /** | |
| * Address inconsistent and variable font size in all browsers. | |
| */ | |
| small { | |
| font-size: 80%; | |
| } | |
| /** | |
| * Prevent `sub` and `sup` affecting `line-height` in all browsers. | |
| */ | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| /* Embedded content | |
| ========================================================================== */ | |
| /** | |
| * Remove border when inside `a` element in IE 8/9/10. | |
| */ | |
| img { | |
| border: 0; | |
| } | |
| /** | |
| * Correct overflow not hidden in IE 9/10/11. | |
| */ | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| /* Grouping content | |
| ========================================================================== */ | |
| /** | |
| * Address margin not present in IE 8/9 and Safari. | |
| */ | |
| figure { | |
| margin: 1em 40px; | |
| } | |
| /** | |
| * Address differences between Firefox and other browsers. | |
| */ | |
| hr { | |
| box-sizing: content-box; | |
| height: 0; | |
| } | |
| /** | |
| * Contain overflow in all browsers. | |
| */ | |
| pre { | |
| overflow: auto; | |
| } | |
| /** | |
| * Address odd `em`-unit font size rendering in all browsers. | |
| */ | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: monospace, monospace; | |
| font-size: 1em; | |
| } | |
| /* Forms | |
| ========================================================================== */ | |
| /** | |
| * Known limitation: by default, Chrome and Safari on OS X allow very limited | |
| * styling of `select`, unless a `border` property is set. | |
| */ | |
| /** | |
| * 1. Correct color not being inherited. | |
| * Known issue: affects color of disabled elements. | |
| * 2. Correct font properties not being inherited. | |
| * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. | |
| */ | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| color: inherit; | |
| /* 1 */ | |
| font: inherit; | |
| /* 2 */ | |
| margin: 0; | |
| /* 3 */ | |
| } | |
| /** | |
| * Address `overflow` set to `hidden` in IE 8/9/10/11. | |
| */ | |
| button { | |
| overflow: visible; | |
| } | |
| /** | |
| * Address inconsistent `text-transform` inheritance for `button` and `select`. | |
| * All other form control elements do not inherit `text-transform` values. | |
| * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. | |
| * Correct `select` style inheritance in Firefox. | |
| */ | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| /** | |
| * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | |
| * and `video` controls. | |
| * 2. Correct inability to style clickable `input` types in iOS. | |
| * 3. Improve usability and consistency of cursor style between image-type | |
| * `input` and others. | |
| */ | |
| button, | |
| html input[type="button"], input[type="reset"], | |
| input[type="submit"] { | |
| -webkit-appearance: button; | |
| /* 2 */ | |
| cursor: pointer; | |
| /* 3 */ | |
| } | |
| /** | |
| * Re-set default cursor for disabled elements. | |
| */ | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default; | |
| } | |
| /** | |
| * Remove inner padding and border in Firefox 4+. | |
| */ | |
| button::-moz-focus-inner, | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| /** | |
| * Address Firefox 4+ setting `line-height` on `input` using `!important` in | |
| * the UA stylesheet. | |
| */ | |
| input { | |
| line-height: normal; | |
| } | |
| /** | |
| * It's recommended that you don't attempt to style these elements. | |
| * Firefox's implementation doesn't respect box-sizing, padding, or width. | |
| * | |
| * 1. Address box sizing set to `content-box` in IE 8/9/10. | |
| * 2. Remove excess padding in IE 8/9/10. | |
| */ | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| box-sizing: border-box; | |
| /* 1 */ | |
| padding: 0; | |
| /* 2 */ | |
| } | |
| /** | |
| * Fix the cursor style for Chrome's increment/decrement buttons. For certain | |
| * `font-size` values of the `input`, it causes the cursor style of the | |
| * decrement button to change from `default` to `text`. | |
| */ | |
| input[type="number"]::-webkit-inner-spin-button, | |
| input[type="number"]::-webkit-outer-spin-button { | |
| height: auto; | |
| } | |
| /** | |
| * 1. Address `appearance` set to `searchfield` in Safari and Chrome. | |
| * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. | |
| */ | |
| input[type="search"] { | |
| -webkit-appearance: textfield; | |
| /* 1 */ | |
| box-sizing: content-box; | |
| /* 2 */ | |
| } | |
| /** | |
| * Remove inner padding and search cancel button in Safari and Chrome on OS X. | |
| * Safari (but not Chrome) clips the cancel button when the search input has | |
| * padding (and `textfield` appearance). | |
| */ | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| /** | |
| * Define consistent border, margin, and padding. | |
| */ | |
| fieldset { | |
| border: 1px solid #c0c0c0; | |
| margin: 0 2px; | |
| padding: 0.35em 0.625em 0.75em; | |
| } | |
| /** | |
| * 1. Correct `color` not being inherited in IE 8/9/10/11. | |
| * 2. Remove padding so people aren't caught out if they zero out fieldsets. | |
| */ | |
| legend { | |
| border: 0; | |
| /* 1 */ | |
| padding: 0; | |
| /* 2 */ | |
| } | |
| /** | |
| * Remove default vertical scrollbar in IE 8/9/10/11. | |
| */ | |
| textarea { | |
| overflow: auto; | |
| } | |
| /** | |
| * Don't inherit the `font-weight` (applied by a rule above). | |
| * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. | |
| */ | |
| optgroup { | |
| font-weight: bold; | |
| } | |
| /* Tables | |
| ========================================================================== */ | |
| /** | |
| * Remove most spacing between table cells. | |
| */ | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| td, | |
| th { | |
| padding: 0; | |
| } | |
| /*------------------------------------* #RESET | |
| \*------------------------------------*/ | |
| /** | |
| * As well as using normalize.css, it is often advantageous to remove all | |
| * margins from certain elements. | |
| */ | |
| body, | |
| h1, h2, h3, h4, h5, h6, | |
| p, blockquote, pre, | |
| dl, dd, ol, ul, | |
| form, fieldset, legend, | |
| figure, | |
| table, th, td, caption, | |
| hr { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /** | |
| * Give a help cursor to elements that give extra info on `:hover`. | |
| */ | |
| abbr[title], | |
| dfn[title] { | |
| cursor: help; | |
| } | |
| /** | |
| * Remove underlines from potentially troublesome elements. | |
| */ | |
| u, | |
| ins { | |
| text-decoration: none; | |
| } | |
| /** | |
| * Apply faux underlines to inserted text via `border-bottom`. | |
| */ | |
| ins { | |
| border-bottom: 1px solid; | |
| } | |
| /*------------------------------------* #BOX-SIZING | |
| \*------------------------------------*/ | |
| /** | |
| * Set the global `box-sizing` state to `border-box`. | |
| * | |
| * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice | |
| * paulirish.com/2012/box-sizing-border-box-ftw | |
| */ | |
| html { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| *, | |
| *:before, | |
| *:after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; | |
| } | |
| /*------------------------------------* #SHARED | |
| \*------------------------------------*/ | |
| /** | |
| * Where `margin-bottom` is concerned,this value will be the same as the | |
| * base line-height. This allows us to keep a consistent vertical rhythm. | |
| * As per: csswizardry.com/2012/06/single-direction-margin-declarations | |
| */ | |
| h1, h2, h3, h4, h5, h6, | |
| ul, ol, dl, | |
| blockquote, p, address, | |
| hr, | |
| table, | |
| fieldset, figure, | |
| pre { | |
| margin-bottom: 24px; | |
| } | |
| /** | |
| * Where `margin-left` is concerned we want to try and indent certain elements | |
| * by a consistent amount. Define that amount once,here. | |
| */ | |
| ul, ol, dd { | |
| margin-left: 48px; | |
| } | |
| /*------------------------------------* #FORMS | |
| \*------------------------------------*/ | |
| /** | |
| * 1. Reset all properties to browser default. | |
| */ | |
| form { | |
| all: initial; | |
| /* [1] */ | |
| font-family: sans-serif; | |
| } | |
| fieldset { | |
| font-size: 1rem; | |
| border: 2px solid #005639; | |
| padding: 1.5rem; | |
| border-radius: 0.5em; | |
| } | |
| legend { | |
| color: #FFF; | |
| background: #005639; | |
| padding: 0.25rem 1rem; | |
| border-radius: 1rem; | |
| } | |
| label { | |
| font-weight: bold; | |
| font-size: .75rem; | |
| padding: 0.25rem 0; | |
| color: #002317; | |
| } | |
| /*------------------------------------* #LAYOUT | |
| \*------------------------------------*/ | |
| /** | |
| * A simple layout object to be used in conjunction with our width utility | |
| * classes in order to rapidly construct layouts in the view. | |
| */ | |
| .o-layout { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| margin-left: -10px; | |
| } | |
| .o-layout__item { | |
| display: inline-block; | |
| vertical-align: top; | |
| width: 100%; | |
| padding-left: 10px; | |
| } | |
| /** | |
| * Reverse layout items’ direction. | |
| */ | |
| .o-layout--rev { | |
| direction: rtl; | |
| } | |
| .o-layout--rev > .o-layout__item { | |
| direction: ltr; | |
| } | |
| /** | |
| * Different sizes of layout item (gutters). | |
| */ | |
| .o-layout--small { | |
| margin-left: -5px; | |
| } | |
| .o-layout--small > .o-layout__item { | |
| padding-left: 5px; | |
| } | |
| .o-layout--large { | |
| margin-left: -20px; | |
| } | |
| .o-layout--large > .o-layout__item { | |
| padding-left: 20px; | |
| } | |
| /*------------------------------------* #LIST-BARE | |
| \*------------------------------------*/ | |
| /** | |
| * Remove bullts and indents from lists. | |
| */ | |
| .o-list-bare { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| /*------------------------------------* #LIST-PAIR | |
| \*------------------------------------*/ | |
| /** | |
| * Key-value pair list, usually applied to DL/DT/DD. | |
| * | |
| * 1. Reset all properties to browser default. | |
| */ | |
| .o-list-pair { | |
| all: initial; | |
| /* [1] */ | |
| } | |
| /** | |
| * 1. Remove indent from DD elements. | |
| */ | |
| .o-list-pair__val { | |
| margin-left: 0; | |
| /* [1] */ | |
| margin-bottom: 10px; | |
| } | |
| /*------------------------------------* #PACK | |
| \*------------------------------------*/ | |
| /** | |
| * The Pack object simply forces an arbitrary number of elements to pack up | |
| * horizontally into all the space available in their parent. | |
| * | |
| * Example usage: | |
| * | |
| <div class="o-pack [o-pack--equal]"> | |
| <div class="o-pack__item"> | |
| ... | |
| </div> | |
| <div class="o-pack__item [o-pack__item--full]"> | |
| ... | |
| </div> | |
| <div class="o-pack__item"> | |
| ... | |
| </div> | |
| </div> | |
| * | |
| * 1. Reset all properties to browser default. | |
| * 2. This is where the magic happens. | |
| */ | |
| .o-pack { | |
| all: initial; | |
| /* [1] */ | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| width: 100%; | |
| display: table; | |
| /* [2] */ | |
| } | |
| .o-pack__item { | |
| display: table-cell; | |
| /* [2] */ | |
| } | |
| /** | |
| * Force one item to take up 100% of the space that the other items don’t | |
| * need. Cannot be used within `.o-pack--equal` parents. | |
| */ | |
| .o-pack__item--full { | |
| width: 100%; | |
| } | |
| /** | |
| * Force all packed items to occupy the same amount of space as each other. | |
| */ | |
| .o-pack--equal { | |
| table-layout: fixed; | |
| } | |
| /*------------------------------------* #FORMS | |
| \*------------------------------------*/ | |
| /** | |
| * Text input styles. | |
| */ | |
| /** | |
| * Configurable form item component | |
| * 1. Reset all properties to browser default | |
| * 2. box-shadow transition | |
| */ | |
| .c-input-text { | |
| all: initial; | |
| /* [1] */ | |
| border: 1px solid #C5C5C5; | |
| padding: 0.25rem; | |
| color: #668; | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| border-radius: .25rem; | |
| transition: 0.5s all; | |
| /* [2] */ | |
| } | |
| .c-input-text:focus { | |
| border-color: rgba(39, 41, 43, 0.6); | |
| border-radius: 0 0.2857rem 0.2857rem 0; | |
| background: #FFF; | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 137, 91, 0.6); | |
| } | |
| /** | |
| * Custom radio inputs. | |
| */ | |
| /** | |
| * High-level wrapper element for custom radio inputs. | |
| * | |
| * 1. Reset all properties to browser default. | |
| */ | |
| .c-input-radio-wrapper { | |
| all: initial; | |
| /* [1] */ | |
| display: inline-block; | |
| cursor: pointer; | |
| margin: 1rem 0; | |
| width: 100%; | |
| } | |
| /** | |
| * 1. Hide the native input element. | |
| * 2. Make so it sits on top of the input radio element. | |
| */ | |
| .c-input-radio { | |
| border: 0; | |
| opacity: 0; | |
| /* [1] */ | |
| height: 0; | |
| width: 0; | |
| overflow: hidden; | |
| position: absolute; | |
| /* [2] */ | |
| } | |
| /** | |
| * Dummy element to provide faux styling. | |
| */ | |
| .c-input-radio-dummy { | |
| display: block; | |
| /** | |
| * 1. Add some space to the right to accommodate the label content, for example. | |
| * 2. Move them to the right edge so they are all vertically aligned. | |
| */ | |
| } | |
| .c-input-radio-dummy:after { | |
| content: ''; | |
| display: inline-block; | |
| width: 0.5rem; | |
| height: 0.5rem; | |
| border-radius: 1rem; | |
| border: 0.125rem solid #fff; | |
| box-shadow: 0 0 0 0.1rem #002317; | |
| margin-left: 0.75rem; | |
| /* [1] */ | |
| transition: 0.5s ease all; | |
| vertical-align: -0.125em; | |
| float: right; | |
| /* [2] */ | |
| } | |
| .c-input-radio:checked + .c-input-radio-dummy:after { | |
| background: #005639; | |
| box-shadow: 0 0 0 0.25rem #002317; | |
| } | |
| /*------------------------------------* #BUTTONS | |
| \*------------------------------------*/ | |
| /** | |
| * Configurable button component. Can be applied to any HTML element necessary. | |
| * | |
| * 1. Reset all properties to browser default. | |
| * 2. Allow us to style box model properties. | |
| * 3. Line different sized buttons up a little nicer. | |
| * 4. Reset/normalize some styles. | |
| * 5. Force all button-styled elements to appear clickable. | |
| */ | |
| .c-btn { | |
| all: initial; | |
| /* [1] */ | |
| display: inline-block; | |
| /* [2] */ | |
| vertical-align: middle; | |
| /* [3] */ | |
| text-align: center; | |
| /* [4] */ | |
| text-decoration: none; | |
| /* [4] */ | |
| cursor: pointer; | |
| /* [5] */ | |
| padding: 10px; | |
| color: #fff; | |
| background-color: #005639; | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| /** | |
| * 1. Forbid interaction with buttons that are disabled. | |
| */ | |
| } | |
| .c-btn:hover, | |
| .c-btn:active, | |
| .c-btn:focus { | |
| text-decoration: none; | |
| /* [4] */ | |
| background-color: #00895b; | |
| } | |
| .c-btn[disabled], | |
| .c-btn.is-disabled { | |
| opacity: 0.5; | |
| pointer-events: none; | |
| /* [1] */ | |
| } | |
| /** | |
| * Provide size variants by halving or doubling the padding of the standard | |
| * button. | |
| */ | |
| .c-btn--small { | |
| padding: 5px; | |
| } | |
| .c-btn--large { | |
| padding: 20px; | |
| } | |
| /** | |
| * Create buttons that will fill the entire width of the container they’re | |
| * placed inside. | |
| * | |
| * 1. Remove horizontal paddings so widths and paddings do not compound. | |
| */ | |
| .c-btn--full { | |
| padding-right: 0; | |
| /* [1] */ | |
| padding-left: 0; | |
| /* [1] */ | |
| width: 100%; | |
| } | |
| /*------------------------------------* #COMMENTS | |
| \*------------------------------------*/ | |
| /** | |
| * Configurable component for displaying comments. Comments are a text group | |
| * that capture the following information: | |
| * | |
| * - Title | |
| * - Author | |
| * - Date | |
| * - Labels (zero or more) | |
| * - Text | |
| * | |
| * Example usage: | |
| * | |
| * <div class="c-comment"> | |
| * <header class="c-comment__header"> | |
| * <h1 class="c-comment__title">Comment Title</h1> | |
| * <p class="c-comment__author">Joe Bloggs</p> | |
| * <time class="c-comment__date" datetime="2015-06-01 15:00"> | |
| * June 1st, 2015 at 3:00pm | |
| * </time> | |
| * <ul class="c-comment__labels"> | |
| * <li class="c-comment__label"> | |
| * General | |
| * </li> | |
| * </ul> | |
| * </header> | |
| * <div class="c-comment__text"> | |
| * Lorem ipsum.... | |
| * </div> | |
| * </div> | |
| */ | |
| .c-comment { | |
| border-bottom: 1px #d9d9d9 solid; | |
| padding: 20px; | |
| } | |
| .c-comment__title { | |
| all: initial; | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| color: #333; | |
| } | |
| .c-comment__author { | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| color: #333; | |
| margin-bottom: 0; | |
| margin-top: 10px; | |
| } | |
| .c-comment__date { | |
| display: block; | |
| margin-top: 5px; | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| font-style: italic; | |
| color: #999999; | |
| } | |
| .c-comment__labels { | |
| all: initial; | |
| display: flex; | |
| list-style: none; | |
| margin-top: 10px; | |
| } | |
| .c-comment__label { | |
| background-color: #e9e9e9; | |
| border-radius: 3px; | |
| color: #333; | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| padding: 5px; | |
| margin-right: 5px; | |
| } | |
| .c-comment__text { | |
| margin-top: 10px; | |
| margin-bottom: 0; | |
| font-family: sans-serif; | |
| font-size: 13px; | |
| line-height: 1.8; | |
| color: #333; | |
| } | |
| /*------------------------------------* #MESSAGING | |
| \*------------------------------------*/ | |
| /** | |
| * Configurable messaging component. Provides a way to give context-specific messaging to the | |
| * user in response to some interaction. Supports 5 variants of messaging component: | |
| * | |
| * Danger: error, failure or dangerous actions | |
| * Info: general information, help and hints | |
| * Success: response to successfully completed action | |
| * Warning: non-blocking message about possibly undesirable action | |
| * Default (unspecified): generic messaging container | |
| * | |
| * Example usage (with icons from FontAwesome): | |
| * | |
| * <div class="c-message c-message--danger"> | |
| * <i class="c-message__icon fa fa-times-circle"></i> | |
| * <div class="c-message__text"> | |
| * There was a problem completing your request | |
| * </div> | |
| * </div> | |
| * | |
| * Icons are an optional addition to messaging components, but can provide an additional | |
| * visual cue about the outcome of an action. The messaging component has agnostic support | |
| * for any third-party icon library. | |
| * | |
| * 1. Reset all properties to browser default. | |
| * 2. Ensure gutter before following content. | |
| */ | |
| .c-message { | |
| all: initial; | |
| /* [1] */ | |
| display: flex; | |
| align-items: center; | |
| padding: 15px; | |
| margin-bottom: 10px; | |
| /* [2] */ | |
| background-color: #f9f9f9; | |
| border: 1px #b9b9b9 solid; | |
| border-radius: 5px; | |
| } | |
| .c-message__icon { | |
| margin-right: 5px; | |
| color: #3a3a3a; | |
| font-size: 12px; | |
| } | |
| .c-message--danger > .c-message__icon { | |
| color: #8c2f2f; | |
| } | |
| .c-message--info > .c-message__icon { | |
| color: #2b6082; | |
| } | |
| .c-message--success > .c-message__icon { | |
| color: #3e5c1f; | |
| } | |
| .c-message--warning > .c-message__icon { | |
| color: #56491d; | |
| } | |
| .c-message__text { | |
| color: #3a3a3a; | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| font-style: italic; | |
| } | |
| .c-message--danger > .c-message__text { | |
| color: #8c2f2f; | |
| } | |
| .c-message--info > .c-message__text { | |
| color: #2b6082; | |
| } | |
| .c-message--success > .c-message__text { | |
| color: #3e5c1f; | |
| } | |
| .c-message--warning > .c-message__text { | |
| color: #56491d; | |
| } | |
| .c-message--danger { | |
| background-color: #fee; | |
| border-color: #db9393; | |
| } | |
| .c-message--info { | |
| background-color: #e0f3ff; | |
| border-color: #88b9d7; | |
| } | |
| .c-message--success { | |
| background-color: #f0ffe0; | |
| border-color: #8bc44f; | |
| } | |
| .c-message--warning { | |
| background-color: #fff6d9; | |
| border-color: #c9af5d; | |
| } | |
| /*------------------------------------* #FOO | |
| \*------------------------------------*/ | |
| /** | |
| * 1. Reset all properties to browser default. | |
| */ | |
| .foo { | |
| all: initial; | |
| /* [1] */ | |
| } | |
| /*------------------------------------* #WIDTHS | |
| \*------------------------------------*/ | |
| /** | |
| * A series of width helper classes that you can use to size things like grid | |
| * systems. Classes take a fraction-like format (e.g. `.u-2/3`). | |
| * | |
| * Use these in your markup, e.g.: | |
| * | |
| * <div class="u-7/12"> | |
| * | |
| */ | |
| /** | |
| * Generate width classes for all viewports. | |
| */ | |
| .u-1\/1 { | |
| width: 100% !important; | |
| } | |
| .u-1\/2 { | |
| width: 50% !important; | |
| } | |
| .u-2\/2 { | |
| width: 100% !important; | |
| } | |
| .u-1\/3 { | |
| width: 33.33333% !important; | |
| } | |
| .u-2\/3 { | |
| width: 66.66667% !important; | |
| } | |
| .u-3\/3 { | |
| width: 100% !important; | |
| } | |
| .u-1\/4 { | |
| width: 25% !important; | |
| } | |
| .u-2\/4 { | |
| width: 50% !important; | |
| } | |
| .u-3\/4 { | |
| width: 75% !important; | |
| } | |
| .u-4\/4 { | |
| width: 100% !important; | |
| } | |
| .u-1\/5 { | |
| width: 20% !important; | |
| } | |
| .u-2\/5 { | |
| width: 40% !important; | |
| } | |
| .u-3\/5 { | |
| width: 60% !important; | |
| } | |
| .u-4\/5 { | |
| width: 80% !important; | |
| } | |
| .u-5\/5 { | |
| width: 100% !important; | |
| } | |
| /** | |
| * Generate width classes for small viewports. | |
| */ | |
| @media screen and (min-width: 720px) { | |
| .u-1\/1\@sm { | |
| width: 100% !important; | |
| } | |
| .u-1\/2\@sm { | |
| width: 50% !important; | |
| } | |
| .u-2\/2\@sm { | |
| width: 100% !important; | |
| } | |
| .u-1\/3\@sm { | |
| width: 33.33333% !important; | |
| } | |
| .u-2\/3\@sm { | |
| width: 66.66667% !important; | |
| } | |
| .u-3\/3\@sm { | |
| width: 100% !important; | |
| } | |
| .u-1\/4\@sm { | |
| width: 25% !important; | |
| } | |
| .u-2\/4\@sm { | |
| width: 50% !important; | |
| } | |
| .u-3\/4\@sm { | |
| width: 75% !important; | |
| } | |
| .u-4\/4\@sm { | |
| width: 100% !important; | |
| } | |
| .u-1\/5\@sm { | |
| width: 20% !important; | |
| } | |
| .u-2\/5\@sm { | |
| width: 40% !important; | |
| } | |
| .u-3\/5\@sm { | |
| width: 60% !important; | |
| } | |
| .u-4\/5\@sm { | |
| width: 80% !important; | |
| } | |
| .u-5\/5\@sm { | |
| width: 100% !important; | |
| } | |
| } | |
| /** | |
| * Generate width classes for medium viewports. | |
| */ | |
| @media screen and (min-width: 1024px) { | |
| .u-1\/1\@md { | |
| width: 100% !important; | |
| } | |
| .u-1\/2\@md { | |
| width: 50% !important; | |
| } | |
| .u-2\/2\@md { | |
| width: 100% !important; | |
| } | |
| .u-1\/3\@md { | |
| width: 33.33333% !important; | |
| } | |
| .u-2\/3\@md { | |
| width: 66.66667% !important; | |
| } | |
| .u-3\/3\@md { | |
| width: 100% !important; | |
| } | |
| .u-1\/4\@md { | |
| width: 25% !important; | |
| } | |
| .u-2\/4\@md { | |
| width: 50% !important; | |
| } | |
| .u-3\/4\@md { | |
| width: 75% !important; | |
| } | |
| .u-4\/4\@md { | |
| width: 100% !important; | |
| } | |
| .u-1\/5\@md { | |
| width: 20% !important; | |
| } | |
| .u-2\/5\@md { | |
| width: 40% !important; | |
| } | |
| .u-3\/5\@md { | |
| width: 60% !important; | |
| } | |
| .u-4\/5\@md { | |
| width: 80% !important; | |
| } | |
| .u-5\/5\@md { | |
| width: 100% !important; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment