/*------------------------------------*\
STYLE.CSS
\*------------------------------------*/
/**
*
* sass --watch style.scss:style.min.css --style compressed
*
* Here we pull in some variables, include the inuit.css framework, then add our
* project-specific components afterwards.
*/
/**
* Setup
*/
/*------------------------------------*\
VARS.SCSS
\*------------------------------------*/
/**
* Any variables you find set in inuit.css’ `_vars.scss` that you do not wish to
* keep, simply redefine here. This means that if inuit.css, for example, sets
* your `$base-font-size` at 16px and you wish it to be 14px, simply redeclare
* that variable in this file. inuit.css ignores its own variables in favour of
* using your own, so you can completely modify how inuit.css works without ever
* having to alter the framework itself.
*/
/*------------------------------------*\
$OBJECTS-AND-ABSTRACTIONS
\*------------------------------------*/
/**
* All of inuit.css’ objects and abstractions are initially turned off by
* default. This means that you start any project with as little as possible,
* and introducing objects and abstractions is as simple as switching the
* following variables to `true`.
*/
/*------------------------------------*\
$OVERRIDES
\*------------------------------------*/
/**
* Place any variables that should override inuit.css’ defaults here.
*/
/*------------------------------------*\
$CUSTOM
\*------------------------------------*/
/**
* Place any of your own variables that sit on top of inuit.css here.
*/
/*------------------------------------*\
INUIT.CSS
\*------------------------------------*/
/*!*
*
* inuitcss.com -- @inuitcss -- @csswizardry
*
*/
/**
* inuit.css acts as a base stylesheet which you should extend with your own
* theme stylesheet.
*
* inuit.css aims to do the heavy lifting; sorting objects and abstractions,
* design patterns and fiddly bits of CSS, whilst leaving as much design as
* possible to you. inuit.css is the scaffolding to your decorator.
*
* This stylesheet is heavily documented and contains lots of comments, please
* take care to read and refer to them as you build. For further support please
* tweet at @inuitcss.
*
* Owing to the amount of comments please only ever use minified CSS in
* production. This file is purely a dev document.
*
* The table of contents below maps to section titles of the same name, to jump
* to any section simply run a find for $[SECTION-TITLE].
*
* Most objects and abstractions come with a chunk of markup that you should be
* able to paste into any view to quickly see how the CSS works in conjunction
* with the correct HTML.
*
* inuit.css is written to this standard: github.com/csswizardry/CSS-Guidelines
*
* LICENSE
*
* Copyright 2013 Harry Roberts
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* Thank you for choosing inuit.css. May your web fonts render perfectly.
*/
/*------------------------------------*\
$CONTENTS
\*------------------------------------*/
/**
* CONTENTS............You’re reading it!
* WARNING.............Here be dragons!
* IMPORTS.............Begin importing the sections below
*
* MIXINS..............Super-simple Sass stuff
* NORMALIZE...........normalize.css
* RESET...............Set some defaults
* CLEARFIX............
* SHARED..............Shared declarations
*
* MAIN................High-level elements like `html`, `body`, etc.
* HEADINGS............Double-stranded heading hierarchy
* PARAGRAPHS..........
* SMALLPRINT..........Smaller text elements like `small`
* QUOTES..............
* CODE................
* LISTS...............
* IMAGES..............
* TABLES..............
* FORMS...............
*
* GRIDS...............Fluid, proportional and nestable grids
* FLEXBOX.............Crudely emulate flexbox
* COLUMNS.............CSS3 columns
* NAV.................A simple abstraction to put a list in horizontal nav mode
* OPTIONS.............Grouped nav items
* PAGINATION..........Very stripped back, basic paginator
* BREADCRUMB..........Simple breadcrumb trail object
* MEDIA...............Media object
* MARGINALIA..........Simple marginalia content
* ISLAND..............Boxed off content
* BLOCK-LIST..........Blocky lists of content
* MATRIX..............Gridded lists
* SPLIT...............A simple split-in-two object
* THIS-OR-THIS........Options object
* LINK-COMPLEX........
* FLYOUT..............Flyout-on-hover object
* ARROWS..............CSS arrows
* SPRITE..............Generic spriting element
* ICON-TEXT...........Icon and text couplings
* BEAUTONS............Use the beautons micro library
* LOZENGES............Basic lozenge styles
* RULES...............Horizontal rules
* STATS...............Simple stats object
* GREYBOX.............Wireframing styles
*
* WIDTHS..............Width classes for use alongside the grid system etc.
* PUSH................Push classes for manipulating grids
* PULL................Pull classes for manipulating grids
* BRAND...............Helper class to apply brand treatment to elements
* HELPER..............A series of helper classes to use arbitrarily
* DEBUG...............Enable to add visual flags for debugging purposes
*/
/*------------------------------------*\
$WARNING
\*------------------------------------*/
/*
* inuit.css, being an OO framework, works in keeping with the open/closed
* principle. The variables you set previously are now being used throughout
* inuit.css to style everything we need for a base. Any custom styles SHOULD
* NOT be added or modified in inuit.css directly, but added via your theme
* stylesheet as per the open/closed principle:
*
* csswizardry.com/2012/06/the-open-closed-principle-applied-to-css
*
* Try not to edit any CSS beyond this point; if you find you need to do so
* it is a failing of the framework so please tweet at @inuitcss.
*/
/*------------------------------------*\
$IMPORTS
\*------------------------------------*/
/**
* Generic utility styles etc.
*/
/*------------------------------------*\
$DEFAULTS
\*------------------------------------*/
/**
* inuit.css’ default variables. Redefine these in your `_vars.scss` file (found
* in the inuit.css-web-template) to override them.
*/
/*------------------------------------*\
$DEBUG
\*------------------------------------*/
/**
* Debug mode will visually highlight any potential markup/accessibility quirks
* in the browser. Set to `true` or `false`.
*/
/*------------------------------------*\
$BORDER-BOX
\*------------------------------------*/
/**
* Do you want all elements to adopt `box-sizing:border-box;` as per
* paulirish.com/2012/box-sizing-border-box-ftw ?
*/
/*------------------------------------*\
$BASE
\*------------------------------------*/
/**
* Base stuff
*/
/**
* Base font-family.
*/
/**
* Default colour for objects’ borders etc.
*/
/*------------------------------------*\
$RESPONSIVE
\*------------------------------------*/
/**
* Responsiveness?
*/
/**
* Responsiveness for widescreen/high resolution desktop monitors and beyond?
* Note: `$responsive` variable above must be set to true before enabling this.
*/
/**
* Responsive push and pull produce a LOT of code, only turn them on if you
* definitely need them.
*/
/**
* Note: `$push` variable above must be set to true before enabling these.
*/
/**
* Note: `$pull` variable above must be set to true before enabling these.
*/
/**
* Tell inuit.css when breakpoints start.
*/
/*------------------------------------*\
$FONT-SIZES
\*------------------------------------*/
/**
* Font-sizes (in pixels). Refer to relevant sections for their implementations.
*/
/*------------------------------------*\
$QUOTES
\*------------------------------------*/
/**
* English quote marks?
*/
/**
* If you want English quotes then please do not edit these; they’re only here
* because Sass needs them.
*/
/**
* If you need non-English quotes, please alter the following values accordingly:
*/
/*------------------------------------*\
$BRAND
\*------------------------------------*/
/**
* Brand stuff
*/
/**
* How big would you like round corners to be by default?
*/
/*------------------------------------*\
$OBJECTS AND ABSTRACTIONS
\*------------------------------------*/
/**
* Which objects and abstractions would you like to use?
*/
/*------------------------------------*\
$FRAMEWORK
\*------------------------------------*/
/**
* inuit.css will work these next ones out for use within the framework.
*
* Assign our `$base-line-height` to a new spacing var for more transparency.
*/
/*------------------------------------*\
$MIXINS
\*------------------------------------*/
/**
* Create a fully formed type style (sizing and vertical rhythm) by passing in a
* single value, e.g.:
*
`@include font-size(10px);`
*
* Thanks to @redclov3r for the `line-height` Sass:
* twitter.com/redclov3r/status/250301539321798657
*/
/**
* Style any number of headings in one fell swoop, e.g.:
*
.foo{
@include headings(1, 3){
color:#BADA55;
}
}
*
* With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
* @thierrylemoulec for refining and improving my initial mixin.
*/
/**
* Create vendor-prefixed CSS in one go, e.g.
*
`@include vendor(border-radius, 4px);`
*
*/
/**
* Create CSS keyframe animations for all vendors in one go, e.g.:
*
.foo{
@include vendor(animation, shrink 3s);
}
@include keyframe(shrink){
from{
font-size:5em;
}
}
*
* Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
*/
/**
* Force overly long spans of text to truncate, e.g.:
*
`@include truncate(100%);`
*
* Where `$truncation-boundary` is a united measurement.
*/
/**
* CSS arrows!!! But... before you read on, you might want to grab a coffee...
*
* This mixin creates a CSS arrow on a given element. We can have the arrow
* appear in one of 12 locations, thus:
*
* 01 02 03
* +------------------+
* 12 | | 04
* | |
* 11 | | 05
* | |
* 10 | | 06
* +------------------+
* 09 08 07
*
* You pass this position in along with a desired arrow color and optional
* border color, for example:
*
* `@include arrow(top, left, red)`
*
* for just a single, red arrow, or:
*
* `@include arrow(bottom, center, red, black)`
*
* which will create a red triangle with a black border which sits at the bottom
* center of the element. Call the mixin thus:
*
.foo{
background-color:#BADA55;
border:1px solid #ACE;
@include arrow(top, left, #BADA55, #ACE);
}
*
*/
/**
* Media query mixin.
*
* It’s not great practice to define solid breakpoints up-front, preferring to
* modify your design when it needs it, rather than assuming you’ll want a
* change at ‘mobile’. However, as inuit.css is required to take a hands off
* approach to design decisions, this is the closest we can get to baked-in
* responsiveness. It’s flexible enough to allow you to set your own breakpoints
* but solid enough to be frameworkified.
*
* We define some broad breakpoints in our vars file that are picked up here
* for use in a simple media query mixin. Our options are:
*
* palm
* lap
* lap-and-up
* portable
* desk
* desk-wide
*
* Not using a media query will, naturally, serve styles to all devices.
*
* `@include media-query(palm){ [styles here] }`
*
* We work out your end points for you:
*/
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Correct `block` display not defined in IE 8/9.
*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block; }
/*
* Correct `inline-block` display not defined in IE 8/9.
*/
audio, canvas, video {
display: inline-block; }
/*
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/*
* Address styling not present in IE 8/9.
*/
[hidden] {
display: none; }
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */ }
/*
* Remove default margin.
*/
body {
margin: 0; }
/* ==========================================================================
Links
========================================================================== */
/*
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted; }
/*
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active, a:hover {
outline: 0; }
/* ==========================================================================
Typography
========================================================================== */
/*
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/*
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/*
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b, strong {
font-weight: bold; }
/*
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic; }
/*
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0; }
/*
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000; }
/*
* Correct font family set oddly in Safari 5 and Chrome.
*/
code, kbd, pre, samp {
font-family: monospace, serif;
font-size: 1em; }
/*
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap; }
/*
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019"; }
/*
* 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.
*/
img {
border: 0; }
/*
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden; }
/* ==========================================================================
Figures
========================================================================== */
/*
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0; }
/* ==========================================================================
Forms
========================================================================== */
/*
* 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.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */ }
/*
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button, input, select, textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 2 */
margin: 0;
/* 3 */ }
/*
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button, input {
line-height: normal; }
/*
* 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 Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
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; }
/*
* 1. Address box sizing set to `content-box` in IE 8/9.
* 2. Remove excess padding in IE 8/9.
*/
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/*
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box; }
/*
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/*
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
/*------------------------------------*\
$RESET
\*------------------------------------*/
/**
* A more considered reset; more of a restart...
* As per: csswizardry.com/2011/10/reset-restarted
*/
/**
* Let’s make the box model all nice, shall we...?
*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
/**
* The usual...
*/
h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, form, fieldset, legend, 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 underline via `border-bottom`.
*/
ins {
border-bottom: 1px solid; }
/**
* So that `alt` text is visually offset if images don’t load.
*/
img {
font-style: italic; }
/**
* Give form elements some cursor interactions...
*/
label, input, textarea, button, select, option {
cursor: pointer; }
.text-input:active, .text-input:focus, textarea:active, textarea:focus {
cursor: text;
outline: none; }
/*------------------------------------*\
$CLEARFIX
\*------------------------------------*/
/**
* Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
* Extend the clearfix class with Sass to avoid the `.cf` class appearing over
* and over in your markup.
*/
.cf:after, .grid:after, .ui-main-nav:after, .ui-footer .siluette-footer > .width-container > ul:after, .ui-gen-list:after, .ui-gen-list-v2 .ui-gen-list-item:after, .ui-gen-article-v2:after, .ui-root-main .ui-language-select:after {
content: "";
display: table;
clear: both; }
/*------------------------------------*\
$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
*/
/**
* Base elements
*/
.form-fields > li {
margin-bottom: 20px;
margin-bottom: 1.66667rem; }
.islet .form-fields > li {
margin-bottom: 10px;
margin-bottom: 0.83333rem; }
/**
* Doubled up `margin-bottom` helper class.
*/
.landmark {
margin-bottom: 40px;
margin-bottom: 3.33333rem; }
/**
* `hr` elements only take up a few pixels, so we need to give them special
* treatment regarding vertical rhythm.
*/
hr {
margin-bottom: 18px;
margin-bottom: 1.5rem; }
/**
* 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: 40px;
margin-left: 3.33333rem; }
/**
* Base styles; unclassed HTML elements etc.
*/
/*------------------------------------*\
$MAIN
\*------------------------------------*/
html {
font: 0.75em/1.33333 "Open Sans";
overflow-y: scroll;
min-height: 100%; }
/*------------------------------------*\
$HEADINGS
\*------------------------------------*/
/**
* As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
*
* When we define a heading we also define a corresponding class to go with it.
* This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded
* heading hierarchy.
*/
h1, .alpha {
font-size: 36px;
font-size: 3rem;
line-height: 1.33333; }
h2, .beta {
font-size: 30px;
font-size: 2.5rem;
line-height: 1.06667; }
h3, .gamma {
font-size: 24px;
font-size: 2rem;
line-height: 1.33333; }
h4, .delta {
font-size: 20px;
font-size: 1.66667rem;
line-height: 1.6; }
h5, .epsilon {
font-size: 16px;
font-size: 1.33333rem;
line-height: 1; }
h6, .zeta {
font-size: 14px;
font-size: 1.16667rem;
line-height: 1.14286; }
/**
* Heading groups and generic any-heading class.
* To target any heading of any level simply apply a class of `.hN`, e.g.:
*
inuit.css
Best. Framework. Ever!
*
*/
hgroup .hN {
margin-bottom: 0; }
/**
* A series of classes for setting massive type; for use in heroes, mastheads,
* promos, etc.
*/
.giga {
font-size: 96px;
font-size: 8rem;
line-height: 1; }
.mega {
font-size: 72px;
font-size: 6rem;
line-height: 1.11111; }
.kilo {
font-size: 48px;
font-size: 4rem;
line-height: 1; }
/*------------------------------------*\
$PARAGRAPHS
\*------------------------------------*/
/**
* The `.lede` class is used to make the introductory text (usually a paragraph)
* of a document slightly larger.
*/
.lede, .lead {
font-size: 13.5px;
font-size: 1.125rem;
line-height: 1.18519; }
/*------------------------------------*\
$SMALLPRINT
\*------------------------------------*/
/**
* A series of classes for setting tiny type; for use in smallprint etc.
*/
.smallprint, .milli {
font-size: 12px;
font-size: 1rem;
line-height: 1.33333; }
.micro {
font-size: 10px;
font-size: 0.83333rem;
line-height: 1.6; }
/*------------------------------------*\
$QUOTES
\*------------------------------------*/
/**
* If English quotes are set in `_vars.scss`, define them here.
*/
/**
* Big up @boblet: html5doctor.com/blockquote-q-cite
*/
/**
* Inline quotes.
*/
q {
quotes: "\2018" "\2019" "\201C" "\201D"; }
q:before {
content: "\2018";
content: open-quote; }
q:after {
content: "\2019";
content: close-quote; }
q q:before {
content: "\201C";
content: open-quote; }
q q:after {
content: "\201D";
content: close-quote; }
blockquote {
quotes: "\201C" "\201D"; }
blockquote p:before {
content: "\201C";
content: open-quote; }
blockquote p:after {
content: "";
content: no-close-quote; }
blockquote p:last-of-type:after {
content: "\201D";
content: close-quote; }
blockquote q:before {
content: "\2018";
content: open-quote; }
blockquote q:after {
content: "\2019";
content: close-quote; }
/**
*
Insanity: doing the same thing over and over again and expecting
different results.
Albert Einstein
*
*/
blockquote {
/**
* .4em is roughly equal to the width of the opening “ that we wish to hang.
*/
text-indent: -0.41em; }
blockquote p:last-of-type {
margin-bottom: 0; }
.source {
display: block;
text-indent: 0; }
.source:before {
content: "\2014"; }
/*------------------------------------*\
$CODE
\*------------------------------------*/
/**
* Use an explicit font stack to ensure browsers render correct `line-height`.
*/
pre {
overflow: auto; }
pre mark {
background: none;
border-bottom: 1px solid;
color: inherit; }
/**
* Add comments to your code examples, e.g.:
*
</div><!-- /wrapper -->
*
*/
.code-comment {
/**
* Override this setting in your theme stylesheet
*/
opacity: 0.75;
filter: alpha(opacity=75); }
/**
* You can add line numbers to your code examples but be warned, it requires
* some pretty funky looking markup, e.g.:
*
.nav{
list-style:none;
margin-left:0;
}
.nav > li,
.nav > li > a{
display:inline-block;
*display:inline-block;
zoom:1;
}
*
* 1. Make the list look like code.
* 2. Give the list flush numbers with a leading zero.
* 3. Make sure lines of code don’t wrap.
* 4. Give the code form by forcing the `code` to honour white-space.
*/
.line-numbers {
font-family: monospace, serif;
/* [1] */
list-style: decimal-leading-zero inside;
/* [2] */
white-space: nowrap;
/* [3] */
overflow: auto;
/* [3] */
margin-left: 0; }
.line-numbers code {
white-space: pre;
/* [4] */ }
/*------------------------------------*\
$IMAGES
\*------------------------------------*/
/**
* Demo: jsfiddle.net/inuitcss/yMtur
*/
/**
* Fluid images.
*/
img {
max-width: 100%; }
/**
* Non-fluid images if you specify `width` and/or `height` attributes.
*/
img[width], img[height] {
max-width: none; }
/**
* Rounded images.
*/
.img--round {
border-radius: 4px; }
/**
* Image placement variations.
*/
.img--right {
float: right;
margin-bottom: 20px;
margin-left: 20px; }
.img--left {
float: left;
margin-right: 20px;
margin-bottom: 20px; }
.img--center {
display: block;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto; }
/**
* Keep your images on your baseline.
*
* Please note, these will not work too nicely with fluid images and will
* distort when resized below a certain width. Use with caution.
*/
.img--short {
height: 100px; }
.img--medium {
height: 200px; }
.img--tall {
height: 300px; }
/**
* Images in `figure` elements.
*/
figure > img {
display: block; }
/*------------------------------------*\
$LISTS
\*------------------------------------*/
/**
* Remove vertical spacing from nested lists.
*/
li > ul, li > ol {
margin-bottom: 0; }
/**
* Have a numbered `ul` without the semantics implied by using an `ol`.
*/
/*ul*/
.numbered-list {
list-style-type: decimal; }
/*------------------------------------*\
$TABLES
\*------------------------------------*/
/**
* We have a lot at our disposal for making very complex table constructs, e.g.:
*
Foo
Bar
Lorem
Ipsum
Dolor
Sit
Sit
Dolor
03.788
Lorem
Dolor
32.210
Lorem
Dolor
47.797
Lorem
Sit
Dolor
09.640
Lorem
Dolor
12.117
Lorem
*
*/
table {
width: 100%; }
th, td {
padding: 5px;
text-align: left; }
@media screen and (min-width: 480px) {
th, td {
padding: 10px; } }
/**
* Cell alignments
*/
[colspan] {
text-align: center; }
[colspan="1"] {
text-align: left; }
[rowspan] {
vertical-align: middle; }
[rowspan="1"] {
vertical-align: top; }
.numerical {
text-align: right; }
/**
* In the HTML above we see several `col` elements with classes whose numbers
* represent a percentage width for that column. We leave one column free of a
* class so that column can soak up the effects of any accidental breakage in
* the table.
*/
.t5 {
width: 5%; }
.t10 {
width: 10%; }
.t12 {
width: 12.5%; }
/* 1/8 */
.t15 {
width: 15%; }
.t20 {
width: 20%; }
.t25 {
width: 25%; }
/* 1/4 */
.t30 {
width: 30%; }
.t33 {
width: 33.333%; }
/* 1/3 */
.t35 {
width: 35%; }
.t37 {
width: 37.5%; }
/* 3/8 */
.t40 {
width: 40%; }
.t45 {
width: 45%; }
.t50 {
width: 50%; }
/* 1/2 */
.t55 {
width: 55%; }
.t60 {
width: 60%; }
.t62 {
width: 62.5%; }
/* 5/8 */
.t65 {
width: 65%; }
.t66 {
width: 66.666%; }
/* 2/3 */
.t70 {
width: 70%; }
.t75 {
width: 75%; }
/* 3/4*/
.t80 {
width: 80%; }
.t85 {
width: 85%; }
.t87 {
width: 87.5%; }
/* 7/8 */
.t90 {
width: 90%; }
.t95 {
width: 95%; }
/**
* Bordered tables
*/
.table--bordered th, .table--bordered td {
border: 1px solid #ccc; }
.table--bordered th:empty, .table--bordered td:empty {
border: none; }
.table--bordered thead tr:last-child th {
border-bottom-width: 2px; }
.table--bordered tbody tr th:last-of-type {
border-right-width: 2px; }
/**
* Striped tables
*/
.table--striped tbody tr:nth-of-type(odd) {
background-color: #ffc;
/* Override this color in your theme stylesheet */ }
/**
* Data table
*/
.table--data {
font: 12px/1.5 sans-serif; }
/*------------------------------------*\
$FORMS
\*------------------------------------*/
/**
*
* Demo: jsfiddle.net/inuitcss/MhHHU
*
*/
fieldset {
padding: 20px; }
/**
* Text inputs
*
* Instead of a `[type]` selector for each kind of form input, we just use a
* class to target any/every one, e.g.:
*
*/
/**
* Group sets of form fields in a list, e.g.:
*
*
*/
.form-fields {
list-style: none;
margin: 0; }
.form-fields > li:last-child {
margin-bottom: 0; }
/**
* Labels
*
* Define a `.label` class as well as a `label` element. This means we can apply
* label-like styling to meta-labels for groups of options where a `label`
* element is not suitable, e.g.:
*
Select an option below:
*
*/
label, .label {
display: block; }
/**
* Extra help text in `label`s, e.g.:
*
*
*/
.additional {
display: block;
font-weight: normal; }
/*
* Groups of checkboxes and radios, e.g.:
*
*
*/
.check-list {
list-style: none;
margin: 0; }
/*
* Labels in check-lists
*/
.check-label, .check-list label, .check-list .label {
display: inline-block; }
/**
* Spoken forms are for forms that read like spoken word, e.g.:
*
Hello, my is
. My home
is
*
*/
.spoken-form label {
display: inline-block;
font: inherit; }
/**
* Extra help text displayed after a field when that field is in focus, e.g.:
*
.edu emails only
*
* We leave the help text in the document flow and merely set it to
* `visibility:hidden;`. This means that it won’t interfere with anything once
* it reappears.
*
*/
/*small*/
.extra-help {
display: inline-block;
visibility: hidden; }
.text-input:active + .extra-help, .text-input:focus + .extra-help {
visibility: visible; }
/**
* Objects and abstractions
*/
/*------------------------------------*\
$GRIDS
\*------------------------------------*/
/**
* Fluid and nestable grid system, e.g.:
*
One third grid
Two thirds grid
One half grid
One quarter grid
One quarter grid
*
* Demo: jsfiddle.net/inuitcss/CLYUC
*
*/
/**
* Grid wrapper
*/
.grid {
margin-left: -20px;
list-style: none;
margin-bottom: 0; }
/**
* Very infrequently occuring grid wrappers as children of grid wrappers.
*/
.grid > .grid {
margin-left: 0; }
/**
* Grid
*/
.grid__item {
display: inline-block;
width: 100%;
padding-left: 20px;
vertical-align: top;
float: left; }
/**
* Style trumps; helper and brand classes
*/
/*------------------------------------*\
$WIDTHS
\*------------------------------------*/
/**
* Sizes in human readable format. These are used in conjunction with other
* objects and abstractions found in inuit.css, most commonly the grid system
* and faux flexbox.
*
* We have a mixin to generate our widths and their breakpoint-specific
* variations.
*/
/**
* Whole
*/
.one-whole {
width: 100%; }
/**
* Halves
*/
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
width: 50%; }
/**
* Thirds
*/
.one-third, .two-sixths, .four-twelfths {
width: 33.333%; }
.two-thirds, .four-sixths, .eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.one-quarter, .two-eighths, .three-twelfths {
width: 25%; }
.three-quarters, .six-eighths, .nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.one-fifth, .two-tenths {
width: 20%; }
.two-fifths, .four-tenths {
width: 40%; }
.three-fifths, .six-tenths {
width: 60%; }
.four-fifths, .eight-tenths {
width: 80%; }
/**
* Sixths
*/
.one-sixth, .two-twelfths {
width: 16.666%; }
.five-sixths, .ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.one-eighth {
width: 12.5%; }
.three-eighths {
width: 37.5%; }
.five-eighths {
width: 62.5%; }
.seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.one-tenth {
width: 10%; }
.three-tenths {
width: 30%; }
.seven-tenths {
width: 70%; }
.nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.one-twelfth {
width: 8.333%; }
.five-twelfths {
width: 41.666%; }
.seven-twelfths {
width: 58.333%; }
.eleven-twelfths {
width: 91.666%; }
/**
* If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
* access to these classes. You can define at which breakpoint you’d like an
* element to be a certain size, e.g.:
*
* `
...
`
*
* This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
* horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
* at ‘mobile’ sizes.
*
* Demo: jsfiddle.net/inuitcss/WS4Ge
*
*/
@media only screen and (max-width: 480px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/
.palm-one-whole {
width: 100%; }
.palm-one-half, .palm-two-quarters, .palm-three-sixths, .palm-four-eighths, .palm-five-tenths, .palm-six-twelfths {
width: 50%; }
.palm-one-third, .palm-two-sixths, .palm-four-twelfths {
width: 33.333%; }
.palm-two-thirds, .palm-four-sixths, .palm-eight-twelfths {
width: 66.666%; }
.palm-one-quarter, .palm-two-eighths, .palm-three-twelfths {
width: 25%; }
.palm-three-quarters, .palm-six-eighths, .palm-nine-twelfths {
width: 75%; }
.palm-one-fifth, .palm-two-tenths {
width: 20%; }
.palm-two-fifths, .palm-four-tenths {
width: 40%; }
.palm-three-fifths, .palm-six-tenths {
width: 60%; }
.palm-four-fifths, .palm-eight-tenths {
width: 80%; }
.palm-one-sixth, .palm-two-twelfths {
width: 16.666%; }
.palm-five-sixths, .palm-ten-twelfths {
width: 83.333%; }
.palm-one-eighth {
width: 12.5%; }
.palm-three-eighths {
width: 37.5%; }
.palm-five-eighths {
width: 62.5%; }
.palm-seven-eighths {
width: 87.5%; }
.palm-one-tenth {
width: 10%; }
.palm-three-tenths {
width: 30%; }
.palm-seven-tenths {
width: 70%; }
.palm-nine-tenths {
width: 90%; }
.palm-one-twelfth {
width: 8.333%; }
.palm-five-twelfths {
width: 41.666%; }
.palm-seven-twelfths {
width: 58.333%; }
.palm-eleven-twelfths {
width: 91.666%; } }
@media only screen and (min-width: 481px) and (max-width: 1023px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/
.lap-one-whole {
width: 100%; }
.lap-one-half, .lap-two-quarters, .lap-three-sixths, .lap-four-eighths, .lap-five-tenths, .lap-six-twelfths {
width: 50%; }
.lap-one-third, .lap-two-sixths, .lap-four-twelfths {
width: 33.333%; }
.lap-two-thirds, .lap-four-sixths, .lap-eight-twelfths {
width: 66.666%; }
.lap-one-quarter, .lap-two-eighths, .lap-three-twelfths {
width: 25%; }
.lap-three-quarters, .lap-six-eighths, .lap-nine-twelfths {
width: 75%; }
.lap-one-fifth, .lap-two-tenths {
width: 20%; }
.lap-two-fifths, .lap-four-tenths {
width: 40%; }
.lap-three-fifths, .lap-six-tenths {
width: 60%; }
.lap-four-fifths, .lap-eight-tenths {
width: 80%; }
.lap-one-sixth, .lap-two-twelfths {
width: 16.666%; }
.lap-five-sixths, .lap-ten-twelfths {
width: 83.333%; }
.lap-one-eighth {
width: 12.5%; }
.lap-three-eighths {
width: 37.5%; }
.lap-five-eighths {
width: 62.5%; }
.lap-seven-eighths {
width: 87.5%; }
.lap-one-tenth {
width: 10%; }
.lap-three-tenths {
width: 30%; }
.lap-seven-tenths {
width: 70%; }
.lap-nine-tenths {
width: 90%; }
.lap-one-twelfth {
width: 8.333%; }
.lap-five-twelfths {
width: 41.666%; }
.lap-seven-twelfths {
width: 58.333%; }
.lap-eleven-twelfths {
width: 91.666%; } }
@media only screen and (min-width: 481px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/
.lap-and-up-one-whole {
width: 100%; }
.lap-and-up-one-half, .lap-and-up-two-quarters, .lap-and-up-three-sixths, .lap-and-up-four-eighths, .lap-and-up-five-tenths, .lap-and-up-six-twelfths {
width: 50%; }
.lap-and-up-one-third, .lap-and-up-two-sixths, .lap-and-up-four-twelfths {
width: 33.333%; }
.lap-and-up-two-thirds, .lap-and-up-four-sixths, .lap-and-up-eight-twelfths {
width: 66.666%; }
.lap-and-up-one-quarter, .lap-and-up-two-eighths, .lap-and-up-three-twelfths {
width: 25%; }
.lap-and-up-three-quarters, .lap-and-up-six-eighths, .lap-and-up-nine-twelfths {
width: 75%; }
.lap-and-up-one-fifth, .lap-and-up-two-tenths {
width: 20%; }
.lap-and-up-two-fifths, .lap-and-up-four-tenths {
width: 40%; }
.lap-and-up-three-fifths, .lap-and-up-six-tenths {
width: 60%; }
.lap-and-up-four-fifths, .lap-and-up-eight-tenths {
width: 80%; }
.lap-and-up-one-sixth, .lap-and-up-two-twelfths {
width: 16.666%; }
.lap-and-up-five-sixths, .lap-and-up-ten-twelfths {
width: 83.333%; }
.lap-and-up-one-eighth {
width: 12.5%; }
.lap-and-up-three-eighths {
width: 37.5%; }
.lap-and-up-five-eighths {
width: 62.5%; }
.lap-and-up-seven-eighths {
width: 87.5%; }
.lap-and-up-one-tenth {
width: 10%; }
.lap-and-up-three-tenths {
width: 30%; }
.lap-and-up-seven-tenths {
width: 70%; }
.lap-and-up-nine-tenths {
width: 90%; }
.lap-and-up-one-twelfth {
width: 8.333%; }
.lap-and-up-five-twelfths {
width: 41.666%; }
.lap-and-up-seven-twelfths {
width: 58.333%; }
.lap-and-up-eleven-twelfths {
width: 91.666%; } }
@media only screen and (max-width: 1023px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/
.portable-one-whole {
width: 100%; }
.portable-one-half, .portable-two-quarters, .portable-three-sixths, .portable-four-eighths, .portable-five-tenths, .portable-six-twelfths {
width: 50%; }
.portable-one-third, .portable-two-sixths, .portable-four-twelfths {
width: 33.333%; }
.portable-two-thirds, .portable-four-sixths, .portable-eight-twelfths {
width: 66.666%; }
.portable-one-quarter, .portable-two-eighths, .portable-three-twelfths {
width: 25%; }
.portable-three-quarters, .portable-six-eighths, .portable-nine-twelfths {
width: 75%; }
.portable-one-fifth, .portable-two-tenths {
width: 20%; }
.portable-two-fifths, .portable-four-tenths {
width: 40%; }
.portable-three-fifths, .portable-six-tenths {
width: 60%; }
.portable-four-fifths, .portable-eight-tenths {
width: 80%; }
.portable-one-sixth, .portable-two-twelfths {
width: 16.666%; }
.portable-five-sixths, .portable-ten-twelfths {
width: 83.333%; }
.portable-one-eighth {
width: 12.5%; }
.portable-three-eighths {
width: 37.5%; }
.portable-five-eighths {
width: 62.5%; }
.portable-seven-eighths {
width: 87.5%; }
.portable-one-tenth {
width: 10%; }
.portable-three-tenths {
width: 30%; }
.portable-seven-tenths {
width: 70%; }
.portable-nine-tenths {
width: 90%; }
.portable-one-twelfth {
width: 8.333%; }
.portable-five-twelfths {
width: 41.666%; }
.portable-seven-twelfths {
width: 58.333%; }
.portable-eleven-twelfths {
width: 91.666%; } }
@media only screen and (min-width: 1024px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/
.desk-one-whole {
width: 100%; }
.desk-one-half, .desk-two-quarters, .desk-three-sixths, .desk-four-eighths, .desk-five-tenths, .desk-six-twelfths {
width: 50%; }
.desk-one-third, .desk-two-sixths, .desk-four-twelfths {
width: 33.333%; }
.desk-two-thirds, .desk-four-sixths, .desk-eight-twelfths {
width: 66.666%; }
.desk-one-quarter, .desk-two-eighths, .desk-three-twelfths {
width: 25%; }
.desk-three-quarters, .desk-six-eighths, .desk-nine-twelfths {
width: 75%; }
.desk-one-fifth, .desk-two-tenths {
width: 20%; }
.desk-two-fifths, .desk-four-tenths {
width: 40%; }
.desk-three-fifths, .desk-six-tenths {
width: 60%; }
.desk-four-fifths, .desk-eight-tenths {
width: 80%; }
.desk-one-sixth, .desk-two-twelfths {
width: 16.666%; }
.desk-five-sixths, .desk-ten-twelfths {
width: 83.333%; }
.desk-one-eighth {
width: 12.5%; }
.desk-three-eighths {
width: 37.5%; }
.desk-five-eighths {
width: 62.5%; }
.desk-seven-eighths {
width: 87.5%; }
.desk-one-tenth {
width: 10%; }
.desk-three-tenths {
width: 30%; }
.desk-seven-tenths {
width: 70%; }
.desk-nine-tenths {
width: 90%; }
.desk-one-twelfth {
width: 8.333%; }
.desk-five-twelfths {
width: 41.666%; }
.desk-seven-twelfths {
width: 58.333%; }
.desk-eleven-twelfths {
width: 91.666%; } }
/**
* If you have set the additional `$responsive-extra` variable to ‘true’ in
* `_vars.scss` then you now have access to the following class available to
* accomodate much larger screen resolutions.
*/
/* endif */
/*------------------------------------*\
$PUSH
\*------------------------------------*/
/**
* Push classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$PULL
\*------------------------------------*/
/**
* Pull classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$BRAND
\*------------------------------------*/
/**
* `.brand` is a quick and simple way to apply your brand face and/or color to
* any element using a handy helper class.
*/
.brand {
font-family: "Open Sans!important";
color: #e74c3c!important; }
.brand-face {
font-family: "Open Sans!important"; }
.brand-color, .brand-colour {
color: #e74c3c!important; }
/*------------------------------------*\
$HELPER
\*------------------------------------*/
/**
* A series of helper classes to use arbitrarily. Only use a helper class if an
* element/component doesn’t already have a class to which you could apply this
* styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
* that ruleset as opposed to adding the `.float--left` class to the markup.
*
* A lot of these classes carry `!important` as you will always want them to win
* out over other selectors.
*/
/**
* Add/remove floats
*/
.float--right {
float: right !important; }
.float--left {
float: left !important; }
.float--none {
float: none !important; }
/**
* Text alignment
*/
.text--left {
text-align: left !important; }
.text--center, .ui-footer.sv {
text-align: center !important; }
.text--right {
text-align: right !important; }
/**
* Font weights
*/
.weight--light {
font-weight: 300 !important; }
.weight--normal {
font-weight: 400 !important; }
.weight--semibold {
font-weight: 600 !important; }
/**
* Add/remove margins
*/
.push {
margin: 20px !important; }
.push--top {
margin-top: 20px !important; }
.push--right {
margin-right: 20px !important; }
.push--bottom {
margin-bottom: 20px !important; }
.push--left {
margin-left: 20px !important; }
.push--ends {
margin-top: 20px !important;
margin-bottom: 20px !important; }
.push--sides {
margin-right: 20px !important;
margin-left: 20px !important; }
.push-half {
margin: 10px !important; }
.push-half--top {
margin-top: 10px !important; }
.push-half--right {
margin-right: 10px !important; }
.push-half--bottom {
margin-bottom: 10px !important; }
.push-half--left {
margin-left: 10px !important; }
.push-half--ends {
margin-top: 10px !important;
margin-bottom: 10px !important; }
.push-half--sides {
margin-right: 10px !important;
margin-left: 10px !important; }
.flush {
margin: 0 !important; }
.flush--top {
margin-top: 0 !important; }
.flush--right {
margin-right: 0 !important; }
.flush--bottom {
margin-bottom: 0 !important; }
.flush--left {
margin-left: 0 !important; }
.flush--ends {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.flush--sides {
margin-right: 0 !important;
margin-left: 0 !important; }
/**
* Add/remove paddings
*/
.soft {
padding: 20px !important; }
.soft--top {
padding-top: 20px !important; }
.soft--right {
padding-right: 20px !important; }
.soft--bottom {
padding-bottom: 20px !important; }
.soft--left {
padding-left: 20px !important; }
.soft--ends {
padding-top: 20px !important;
padding-bottom: 20px !important; }
.soft--sides {
padding-right: 20px !important;
padding-left: 20px !important; }
.soft-half {
padding: 10px !important; }
.soft-half--top {
padding-top: 10px !important; }
.soft-half--right {
padding-right: 10px !important; }
.soft-half--bottom {
padding-bottom: 10px !important; }
.soft-half--left {
padding-left: 10px !important; }
.soft-half--ends {
padding-top: 10px !important;
padding-bottom: 10px !important; }
.soft-half--sides {
padding-right: 10px !important;
padding-left: 10px !important; }
.hard {
padding: 0 !important; }
.hard--top {
padding-top: 0 !important; }
.hard--right {
padding-right: 0 !important; }
.hard--bottom {
padding-bottom: 0 !important; }
.hard--left {
padding-left: 0 !important; }
.hard--ends {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.hard--sides {
padding-right: 0 !important;
padding-left: 0 !important; }
/**
* Pull items full width of `.island` parents.
*/
.full-bleed {
margin-right: -20px !important;
margin-left: -20px !important; }
.islet .full-bleed {
margin-right: -10px !important;
margin-left: -10px !important; }
/**
* Add a help cursor to any element that gives the user extra information on
* `:hover`.
*/
.informative {
cursor: help !important; }
/**
* Mute an object by reducing its opacity.
*/
.muted {
opacity: 0.5 !important;
filter: alpha(opacity=50) !important; }
/**
* Align items to the right where they imply progression/movement forward, e.g.:
*