Skip to content

Instantly share code, notes, and snippets.

@alienlebarge

alienlebarge/00-postcss-blanklinesgate.md

Last active September 14, 2016 07:09
Show Gist options
  • Save alienlebarge/87621a7d14c0536f87f37742596a16c5 to your computer and use it in GitHub Desktop.
Save alienlebarge/87621a7d14c0536f87f37742596a16c5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
00-postcss-blanklinesgate.md
Raw
01-in-5lines.css
/**
* CONTENTS
*
* SETTINGS
* Global...............Project-wide variables and settings.
* Fontface.............Set the font to use.
* Responsive...........Breakpoint.
*
* TOOLS
* Mixins...............Useful mixins.
* Clearfix.............Micro clearfix mixin.
*
* GENERIC
* Normalize.css........A level playing field.
* Reset................Reset styles.
* Box-sizing...........Better default `box-sizing`.
* Shared...............Vertical rhythm.
*
* BASE
* Page.................Fonts, colors and all stuff for `<html>.
* Headings.............H1–H6 styles.
* Paragraph............P style.
* Small................Small text.
* Strong...............Strong text.
* Subs.................Subscript element style.
* Lists................UL, OL & DL styles.
* Anchors..............Links styles.
* Images...............Images styles.
* Tables...............Tables styles.
* Figures..............Figures styles.
* Quotes...............Quotes styles.
* Abbreviation.........Abbreviation styles.
* Code.................Code, keyborad input, etc. styles.
* Horizontale rueles...Horizontal rules styles.
* Selections...........Text highlight color.
*
* OBJECTS
* Wrappers.............Wrapping and constraining elements.
* List-bare............Remove list style.
* List-inline..........Displays a list as one horizontal row.
* Layouts..............Grid system.
* Boxes................Boxes.
* Tables...............Tables.
*
* COMPONENTS
* Buttons..............Buttons.
* Forms................Forms, input and buttons.
* Navbar...............Top bar.
* Header...............Header components styles.
* Inline texts.........Fraction, Small-caps, etc.
* Boxes................Boxes styles.
* Backgrounds..........Change backgrounds color
* Small................Small text styles.
* Strong...............Strong text styles.
* Quotes...............Stlyles for quotes.
* Breadcrumb ..........Styles for breadcrumb.
* Images ..............Images shapes.
* List-abbreviations...List with displayed abbreviation title.
*
* UTILITIES
* Clearfix.............Text helpers.
* Headings.............Headings styles for texts.
* Colors...............Text colors.
* Text utilities.......Center texts..
* Utilities............Responsive headings styles for texts.
* Responsive utilities.Hide and show content depending on viewport.
* Spacing..............Utilities to work with spaces.
* Print................Toggling content for print..
*/
/**
* SETINGS
*/
@import "settings/_settings.global.css";
@import "settings/_settings.fontface.css";
@import "settings/_settings.responsive.css";
/**
* TOOLS
*/
@import "tools/_tools.mixins.css";
@import "tools/_tools.clearfix.css";
/**
* GENERIC
*/
@import "generic/_generic.box-sizing.css";
@import "normalize.css";
@import "generic/_generic.reset.css";
@import "generic/_generic.shared.css";
/**
* ELEMENTS
*/
@import "elements/_elements.page.css";
@import "elements/_elements.headings.css";
@import "elements/_elements.paragraph.css";
@import "elements/_elements.small.css";
@import "elements/_elements.strong.css";
@import "elements/_elements.subs.css";
@import "elements/_elements.lists.css";
@import "elements/_elements.anchors.css";
@import "elements/_elements.images.css";
@import "elements/_elements.tables.css";
@import "elements/_elements.figures.css";
@import "elements/_elements.quotes.css";
@import "elements/_elements.abbreviation.css";
@import "elements/_elements.code.css";
@import "elements/_elements.horizontale-rules.css";
@import "elements/_elements.selections.css";
/**
* OBJECTS
*/
@import "objects/_objects.wrappers.css";
@import "objects/_objects.list-bare.css";
@import "objects/_objects.list-inline.css";
@import "objects/_objects.layouts.css";
@import "objects/_objects.box.css";
@import "objects/_objects.tables.css";
/**
* COMPONENTS
*/
@import "components/_components.buttons.css";
@import "components/_components.forms.css";
@import "components/_components.navbar.css";
@import "components/_components.header.css";
@import "components/_components.inline-texts.css";
@import "components/_components.box.css";
@import "components/_components.backgrounds.css";
@import "components/_components.small.css";
@import "components/_components.strong.css";
@import "components/_components.quotes.css";
@import "components/_components.page-title.css";
@import "components/_components.breadcrumb.css";
@import "components/_components.images.css";
@import "components/_components.list-abbreviations.css";
/**
* UTILITIES
*/
@import "utilities/_utilities.clearfix.css";
@import "utilities/_utilities.headings.css";
@import "utilities/_utilities.colors.css";
@import "utilities/_utilities.fonts.css";
@import "utilities/_utilities.text-utilities.css";
@import "utilities/_utilities.utilities.css";
@import "utilities/_utilities.utilities-responsive.css";
@import "utilities/_utilities.spacing.css";
@import "utilities/_utilities.layout.css";
@import "utilities/_utilities.print.css";
Raw
01-out-5lines.css
/**
* CONTENTS
*
* SETTINGS
* Global...............Project-wide variables and settings.
* Fontface.............Set the font to use.
* Responsive...........Breakpoint.
*
* TOOLS
* Mixins...............Useful mixins.
* Clearfix.............Micro clearfix mixin.
*
* GENERIC
* Normalize.css........A level playing field.
* Reset................Reset styles.
* Box-sizing...........Better default `box-sizing`.
* Shared...............Vertical rhythm.
*
* BASE
* Page.................Fonts, colors and all stuff for `<html>.
* Headings.............H1–H6 styles.
* Paragraph............P style.
* Small................Small text.
* Strong...............Strong text.
* Subs.................Subscript element style.
* Lists................UL, OL & DL styles.
* Anchors..............Links styles.
* Images...............Images styles.
* Tables...............Tables styles.
* Figures..............Figures styles.
* Quotes...............Quotes styles.
* Abbreviation.........Abbreviation styles.
* Code.................Code, keyborad input, etc. styles.
* Horizontale rueles...Horizontal rules styles.
* Selections...........Text highlight color.
*
* OBJECTS
* Wrappers.............Wrapping and constraining elements.
* List-bare............Remove list style.
* List-inline..........Displays a list as one horizontal row.
* Layouts..............Grid system.
* Boxes................Boxes.
* Tables...............Tables.
*
* COMPONENTS
* Buttons..............Buttons.
* Forms................Forms, input and buttons.
* Navbar...............Top bar.
* Header...............Header components styles.
* Inline texts.........Fraction, Small-caps, etc.
* Boxes................Boxes styles.
* Backgrounds..........Change backgrounds color
* Small................Small text styles.
* Strong...............Strong text styles.
* Quotes...............Stlyles for quotes.
* Breadcrumb ..........Styles for breadcrumb.
* Images ..............Images shapes.
* List-abbreviations...List with displayed abbreviation title.
*
* UTILITIES
* Clearfix.............Text helpers.
* Headings.............Headings styles for texts.
* Colors...............Text colors.
* Text utilities.......Center texts..
* Utilities............Responsive headings styles for texts.
* Responsive utilities.Hide and show content depending on viewport.
* Spacing..............Utilities to work with spaces.
* Print................Toggling content for print..
*/
/**
* SETINGS
*/
/* ------------------------------------ *\
#GLOBAL
\* ------------------------------------ */
/**
* The global settings file contains any project-wide variables; things that
* need to be made available to the entire codebase.
*/
/**
* Typography
*/
:root {
--global-font-size: 1.125rem;
--global-line-height: 1.5;
--global-small-font-size: calc( 1rem / 1.26 );
}
/**
* Colors
*/
:root {
/* Primary color */
--color-base: rgba(83, 101, 113, 1); /* #536571 */
--color-gray-dark: rgba(39, 60, 70, 1); /* #273c46 */
--color-gray-light: rgba(105, 121, 131, 1); /* #697983 */
--color-gray-lighter: rgba(170, 182, 189, 1); /* #aab6bd */
--color-gray-lightest: rgba(220, 227, 232, 1); /* #dce3e8 */
--color-primary: rgba(2, 133, 26, 1); /* #02851a */
--color-primary-dark: rgba(30, 94, 2, 1); /* #1e5e02 */
--color-primary-light: rgba(64, 217, 64, 1); /* #40d940 */
--color-primary-lighter: rgba(153, 255, 51, 1); /* #99ff33 */
--color-primary-lightest: rgba(204, 255, 153, 1); /* #ccff99 */
--color-white: rgba(255, 255, 255, 1);
--color-black: rgba(0, 0, 0, 1);
/* Secondary colors */
--color-primary-alt: rgba(153, 0, 255, 1); /* #9900ff */
/* Special state */
--color-focus: rgba(58, 149, 207, 1);
--color-visited: rgba(77, 52, 146, 1);
}
/**
* Animation
*/
:root {
--transition: .3333s;
}
/**
* Spacing
*
* 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.
*/
:root {
--global-spacing-unit: calc(
var(--global-line-height) * var(--global-font-size)
);
--global-spacing-unit--tiny: calc(var(--global-spacing-unit) * .25);
--global-spacing-unit--small: calc(var(--global-spacing-unit) * .5);
--global-spacing-unit--large: calc(var(--global-spacing-unit) * 2);
--global-spacing-unit--huge: calc(var(--global-spacing-unit) * 4);
}
/* ------------------------------------ *\
#FONTFACE
\* ------------------------------------ */
/**
* Variables
*/
:root {
/* Base font */
--global-text-color: var(--color-base);
--global-font-family: "Palatino Linotype",
Palatino,
Palladio,
"URW Palladio L",
"Book Antiqua",
Baskerville,
"Bookman Old Style",
"Bitstream Charter",
"Nimbus Roman No9 L",
Garamond,
"Apple Garamond",
"ITC Garamond Narrow",
"New Century Schoolbook",
"Century Schoolbook",
"Century Schoolbook L",
Georgia,
serif;
--global-font-weight: 400;
--global-font-weight-bold: 700;
/* Enhance base font */
--enhance-global-font-family: "MetaSerifWeb", var(--global-font-family);
--enhance-global-font-weight-regular: 500;
--enhance-global-font-weight-bold: 700;
/* Heading font */
--heading-font-family: -apple-system,
".SFNSText-Regular",
"San Francisco",
"Roboto",
"Segoe UI",
"Helvetica Neue",
"Lucida Grande",
sans-serif;
--heading-font-weight-regular: normal;
--heading-font-weight-bold: bold;
/* Enhance heading font */
--enhance-heading-font-family: "MetaWeb", var(--heading-font-family);
--enhance-heading-font-weight-regular: 400;
--enhance-heading-font-weight-bold: 700;
/* Monospaced font */
--monospaced-font-family: Consolas,
"Liberation Mono",
Menlo,
Courier,
monospace;
--monospaced-font-size: .8rem;
}
/**
* Meta Serif
*/
/* Normal normal */
@font-face {
font-weight: normal; /* or 400 */
font-style: normal;
font-family: MetaSerifWeb;
src: url("../fonts/MetaSerifWeb-Book.woff") format("woff");
}
/* Normal italic */
@font-face {
font-weight: normal; /* or 400 */
font-style: italic;
font-family: MetaSerifWeb;
src: url("../fonts/MetaSerifWeb-BookItalic.woff") format("woff");
}
/* Bold normal */
@font-face {
font-weight: bold; /* or 700 */
font-style: normal;
font-family: MetaSerifWeb;
src: url("../fonts/MetaSerifWeb-Bold.woff") format("woff");
}
/* Bold itlaic */
@font-face {
font-weight: bold;
font-style: italic;
font-family: MetaSerifWeb;
src: url("../fonts/MetaSerifWeb-BoldItalic.woff") format("woff");
}
/**
* Meta Web Condensed
*/
/* Normal normal */
@font-face {
font-weight: normal; /* or 400 */
font-style: normal;
font-family: MetaWeb;
src: url("../fonts/MetaWeb-CondBook.woff") format("woff");
}
/* Normal italic */
@font-face {
font-weight: normal; /* or 400 */
font-style: italic;
font-family: MetaWeb;
src: url("../fonts/MetaWeb-CondBookItalic.woff") format("woff");
}
/* Bold normal */
@font-face {
font-weight: bold; /* or 700 */
font-style: normal;
font-family: MetaWeb;
src: url("../fonts/MetaWeb-CondBold.woff") format("woff");
}
/* Bold itlaic */
@font-face {
font-weight: bold; /* or 700 */
font-style: italic;
font-family: MetaWeb;
src: url("../fonts/MetaWeb-CondBoldItalic.woff") format("woff");
}
/* ------------------------------------ *\
#SETTINGS-RESPONSIVE
\* ------------------------------------ */
/**
* Hold our breakpoint aliases and conditions in a list.
*
* These can be invoked later on via `@media (--palm) {...}`
*/
@custom-media --palm screen and (max-width: 44.9375em);
@custom-media --lap screen and (min-width: 45em) and (max-width: 63.9375em);
@custom-media --lap-and-up screen and (min-width: 45em);
@custom-media --portable screen and (max-width: 63.9375em);
@custom-media --desk screen and (min-width: 64em);
@custom-media --retina (min-resolution: 192dpi),
(min-resolution: 2dppx);
@custom-media --print print;
/**
* TOOLS
*/
/* ------------------------------------ *\
#MIXINS
\* ------------------------------------ */
/**
* Mor readable bodytext
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
@define-mixin font-bodytext {
font-variant-ligatures: common-ligatures, contextual;
font-variant-numeric: oldstyle-nums, proportional-nums;
font-feature-settings: "kern", "liga", "clig", "calt", "onum", "pnum";
font-kerning: normal;
}
/**
* Mor readable headings
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
@define-mixin font-headings {
font-variant-ligatures: common-ligatures, contextual,
discretionary-ligatures;
font-feature-settings: "kern", "liga", "clig", "calt", "dlig";
font-kerning: normal;
}
/**
* More readable sub text
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
@define-mixin font-sub {
font-variant-ligatures: common-ligatures, contextual;
font-variant-position: sub;
font-feature-settings: "kern", "liga", "clig", "calt", "subs";
font-kerning: normal;
}
/**
* OpenType feature for small caps
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
*
* 1. Safari iOs doesn't support `font-feature` so we use `text-transform` to
* make the texte uppercase. http://caniuse.com/#search=font-feature
*/
@define-mixin font-small-caps {
font-variant-ligatures: common-ligatures, contextual;
font-variant-numeric: oldstyle-nums, proportional-nums;
font-variant-caps: all-small-caps;
font-feature-settings: "kern", "liga", "clig", "calt", "onum", "pnum",
"smcp", "c2sc";
font-kerning: normal;
text-transform: uppercase; /* [1] */
}
/**
* OpenType feature for data
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
@define-mixin font-data {
font-variant-ligatures: common-ligatures, contextual;
font-variant-numeric: lining-nums, tabular-nums;
font-feature-settings: "kern", "liga", "clig", "calt", "lnum", "tnum";
font-kerning: normal;
}
/* ------------------------------------ *\
    #CLEARFIX
\* ------------------------------------ */
/**
* Mixin to drop micro clearfix into a selector. Further reading:
* http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
*
* .usage {
* @mixin clearfix;
* }
*/
@define-mixin clearfix {
&::after {
display: block !important;
clear: both !important;
content: "" !important;
}
}
/**
* GENERIC
*/
/* ------------------------------------ *\
#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 {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
display: block;
}
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template, /* 1 */
[hidden] {
display: none;
}
/* Links
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* Forms
========================================================================== */
/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font: inherit; /* 1 */
margin: 0; /* 2 */
}
/**
* Restore the font weight unset by the previous rule.
*/
optgroup {
font-weight: bold;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* ------------------------------------ *\
#RESET
\* ------------------------------------ */
/**
* A very simple reset that sits on top of Normalize.css.
*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
dd,
ol,
ul,
figure,
hr,
fieldset,
legend {
margin: 0;
padding: 0;
}
/**
* Remove trailing margins from nested lists.
*/
li > {
ol,
ul {
margin-bottom: 0;
}
}
/**
* Remove default table spacing.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ------------------------------------ *\
#SHARED
\* ------------------------------------ */
/**
* Shared declarations for certain elements.
*/
/**
* Always declare margins in the same direction:
* csswizardry.com/2012/06/single-direction-margin-declarations
*/
address,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre
dl,
ol,
ul,
figure,
hr,
table,
fieldset {
margin-bottom: var(--global-spacing-unit);
}
/**
* Consistent indentation for lists.
*/
dd, ol, ul {
margin-left: calc(2 * var(--global-spacing-unit));
}
/**
* ELEMENTS
*/
/* ------------------------------------ *\
#PAGE
\* ------------------------------------ */
/**
* High-, page-level styling.
*
* 1. Ensure the page always fills at least the entire height of the viewport.
* 2. Set the default `font-size` and `line-height` for the entire project,
* sourced from our default variables. The `font-size` is calculated to exist
* in rems, the `line-height` is calculated to exist unitlessly.
* 3. Set the standards opentype features for a more readable text.
* See http://practice.typekit.com/lesson/caring-about-opentype-features/
* 4. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
* navigating between pages that do/do not have enough content to produce
* scrollbars naturally.
* 5. Use webfont only when it's loaded to avoid FOIT
*/
html {
min-height: 100%; /* [1] */
font-size: var(--global-font-size); /* [2] */
font-weight: var(--global-font-weight);
font-family: var(--global-font-family);
font-variant-ligatures: common-ligatures, contextual; /* [3] */
font-feature-settings: "kern", "liga", "clig", "calt"; /* [3] */
font-kerning: normal; /* [3] */
line-height: var(--global-line-height); /* [1] */
color: var(--global-text-color);
text-rendering: optimizeLegibility;
overflow-y: scroll; /* [4] */
&.wf-metaserifweb-n4-active {
font-weight: var(--enhance-global-font-weight-regular); /* [5] */
font-family: var(--enhance-global-font-family); /* [5] */
}
}
/* ------------------------------------ *\
#HEADINGS
\* ------------------------------------ */
/**
* Headings 1–6.
*
* Simple default styles for headings 1 through 6. Anything more opinionated
* than simple font-size changes should likely be applied via classes (see:
* http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
*
* 1. Use webfont only when it's loaded to avoid FOIT
*/
:root {
--typographic-ratio: 1.26;
/* h1 */
--heading-size-1: calc(
1rem
* var(--typographic-ratio)
* var(--typographic-ratio)
* var(--typographic-ratio)
);
--heading-line-height-1: calc(
var(--global-line-height)
/ var(--typographic-ratio)
);
/* h2 */
--heading-size-2: calc(
1rem
* var(--typographic-ratio)
* var(--typographic-ratio)
);
--heading-line-height-2: calc(
var(--global-line-height)
/ var(--typographic-ratio)
);
/* h3 */
--heading-size-3: calc( 1rem * var(--typographic-ratio) );
--heading-line-height-3: calc(
var(--global-line-height)
/ var(--typographic-ratio)
);
/* h4 */
--heading-size-4: 1rem;
--heading-line-height-4: var(--global-line-height);
/* h5 */
--heading-size-5: calc( 1rem / var(--typographic-ratio) );
--heading-line-height-5: var(--global-line-height);
/* h6 */
--heading-size-6: calc( 1rem / var(--typographic-ratio) );
--heading-line-height-6: var(--global-line-height);
}
h1 {
font-size: var(--heading-size-1);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-1);
}
h2 {
font-size: var(--heading-size-2);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-2);
}
h3 {
font-size: var(--heading-size-3);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-3);
}
h4 {
font-size: var(--heading-size-4);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-4);
}
h5 {
font-size: var(--heading-size-5);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-5);
}
h6 {
font-size: var(--heading-size-6);
font-weight: var(--heading-font-weight-regular);
line-height: var(--heading-line-height-6);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--heading-font-family);
@mixin font-headings;
}
.wf-metaweb-n7-active {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--enhance-heading-font-family); /* [1] */
}
h1,
h2,
h3,
h4,
h5 {
font-weight: var(--enhance-heading-font-weight-bold);
}
h6 {
font-weight: var(--enhance-heading-font-weight-regular);
}
}
/* ------------------------------------ *\
#PARAGRAPH
\* ------------------------------------ */
p {
@mixin font-bodytext;
}
/**
* The `.lede` class is used to make the introductory text (usually a paragraph)
* of a document slightly larger: en.wikipedia.org/wiki/Lede_(news)
*/
:root {
--lede-size: 1.26;
}
.lede {
font-size: calc( 1rem * var(--lede-size) );
}
/* ------------------------------------ *\
#SMALL
\* ------------------------------------ */
/**
* Small text
*/
:root{
--small-font-size: var(--global-small-font-size);
--small-font-family: var(--global-font-family);
--enhance-small-font-family: var(--enhance-global-font-family);
}
@define-mixin small $class,
$font-size: var(--small-font-size),
$font-family: var(--small-font-family),
$enhance-font-family: var(--enhance-small-font-family) {
/**
* <<$(class)>>
*
* 1. Use webfont only when it's loaded to avoid FOIT
*/
$(class) {
font-size: $font-size;
font-family: $font-family;
}
.wf-active $(class) {
font-family: $enhance-font-family; /* [1] */
}
}
@mixin small small;
/* ------------------------------------ *\
#STRONG
\* ------------------------------------ */
/**
* Strong
*/
b,
strong {
font-weight: bold;
}
/**
* Strong weight
*
* 1. Enhance webfont use 700 for strong text.
*/
.wf-active b,
.wf-active strong {
font-weight: var(--enhance-global-font-weight-bold);
}
/* ------------------------------------ *\
#SUBS
\* ------------------------------------ */
/**
* Subscript Element
*
* 1. Override normalize.css if font with subscript features is loaded.
*/
sub {
@mixin font-sub;
}
.wf-active sub {
bottom: 0; /* [1] */
font-size: 100%; /* [1] */
}
/* ------------------------------------ *\
#LISTS
\* ------------------------------------ */
/**
* Remove extra vertical spacing when nesting lists.
*
* 1. Without it, if there's buttons in the list, they would be collapsed.
*/
li {
@mixin font-bodytext;
margin-bottom: var(--global-spacing-unit--tiny); /* [1] */
}
/* ------------------------------------ *\
#LINK
\* ------------------------------------ */
:root {
--link-color: var(--color-base);
--link-hover-color: var(--color-focus);
--link-visited-color: var(--color-visited);
--link-color-transition: var(--transition);
}
a {
color: var(--link-color);
transition: var(--transition);
}
a:hover,
a:focus,
a:active {
color: var(--link-hover-color);
transition: var(--transition);
}
a:visited {
color: var(--link-visited-color);
transition: var(--transition);
}
/* ------------------------------------ *\
#SILENT-LINK
\* ------------------------------------ */
/**
* Link without visual modification.
*/
.silent-link {
text-decoration: none;
transition: var(--transition);
}
/* ------------------------------------ *\
#IMAGES
\* ------------------------------------ */
/**
* 1. Fluid images for responsive purposes.
* 2. Offset `alt` text from surrounding copy.
* 3. Setting `vertical-align` removes the whitespace that appears under `img`
* elements when they are dropped into a page as-is. Safer alternative to
* using `display: block;`.
*/
img {
max-width: 100%; /* [1] */
font-style: italic; /* [2] */
vertical-align: middle; /* [3] */
}
/**
* 1. If a `width` and/or `height` attribute have been explicitly defined, let’s
* not make the image fluid.
*/
img[width], /* [1] */
img[height] { /* [1] */
max-width: none;
}
/* ------------------------------------ *\
#TABLES
\* ------------------------------------ */
/**
* 1. Ensure tables fill up as much space as possible.
*/
table {
width: 100%; /* [1] */
}
/**
* Enable OpenType features to make more readable data
* More info here:
* http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
td {
@mixin font-data;
}
/* ------------------------------------ *\
#FIGURES
\* ------------------------------------ */
/**
* Reset default margins.
*/
figure {
margin-right: 0;
margin-left: 0;
}
/* ------------------------------------ *\
#QUOTES
\* ------------------------------------ */
:root {
--blockquote-text-color: var(--global-text-color);
--blockquote-left-margin: var(--global-spacing-unit--large);
--blockquote-border-width: calc(var(--global-spacing-unit--tiny) / 2);
--blockquote-border-color: var(--blockquote-text-color);
--blockquote-border-style: solid;
}
/**
* Blockquote
*
* 1. Unicode for En dash and Space.
*/
blockquote {
font-style: italic;
border-left: var(--blockquote-border-width)
var(--blockquote-border-color)
var(--blockquote-border-style);
margin-left: @padding-left;
padding-left: calc( var(--blockquote-left-margin) / 2 );
}
blockquote cite::before {
content: "\2013\0020"; /* [1] */
}
/**
* Inline quotations and source citations
*/
cite,
q {
font-style: italic;
}
/* ------------------------------------ *\
#ABBREVIATION
\* ------------------------------------ */
/**
* Better `<abbr>`
*
* 1. Make `<abbr>` more readable.
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
* 2. Display title attribute value if the device's primary input does not
* have hover
*/
:root{
--abbr-font-size: var(--global-small-font-size);
}
abbr {
@mixin font-small-caps; /* [1] */
}
@media (hover: none) {
abbr::after {
font-size: var(--abbr-font-size); /* [2] */
/* stylelint-disable function-whitespace-after */
content: " ("attr(title)")"; /* [2] */
/* stylelint-enable function-whitespace-after */
}
}
/* ------------------------------------ *\
#CODE
\* ------------------------------------ */
:root {
--code-text-background: var(--color-gray-lighter);
}
/**
* Code, preformated text and other robotic styles
*/
code,
pre {
font-size: var(--monospaced-font-size);
font-family: var(--monospaced-font-family);
letter-spacing: normal;
white-space: pre;
word-spacing: normal;
tab-size: 4;
cursor: text;
}
/**
* Inline computer text style
*
* 1. `<code>` inside a `<pre>` has no background. This avoid alpha color
* overlay.
*/
code {
background: var(--code-text-background);
}
pre > code {
background: none; /* [1] */
}
tt, code, kbd, samp {
font-family: var(--monospaced-font-family);
}
/* ------------------------------------ *\
#HORIZONTALE RULES
\* ------------------------------------ */
/**
* Horizontale rules
*/
:root{
--hr-color: var(--color-gray-light);
}
hr {
height: 1px;
background: var(--hr-color);
border: 0;
}
/* ------------------------------------ *\
#SELECTIONS
\* ------------------------------------ */
/**
* Selections color
*
* Overrides browser-level or system-level text highlight color.
*/
:root {
--color-selection: var(--color-focus);
}
::selection {
background: var(--color-selection);
}
/**
* OBJECTS
*/
/* ------------------------------------ *\
#WRAPPERS
\* ------------------------------------ */
:root {
--wrapper-width: 64rem; /* 1024px */
--wrapper-padding: var(--global-spacing-unit--tiny);
}
/**
* Container
*
* 1. Center horizontaly
*/
.o-wrapper {
@mixin clearfix;
max-width: var(--wrapper-width);
margin-right: auto; /* [1] */
margin-left: auto; /* [1] */
padding-right: var(--global-spacing-unit--tiny);
padding-left: var(--global-spacing-unit--tiny);
@media (--lap-and-up) {
padding-right: var(--global-spacing-unit);
padding-left: var(--global-spacing-unit);
}
}
/**
* Container offset
*
* Get out of the container
*/
.o-wrapper--offset {
margin-right: -var(--global-spacing-unit--tiny);
margin-left: -var(--global-spacing-unit--tiny);
@media (--lap-and-up) {
margin-right: -var(--global-spacing-unit);
margin-left: -var(--global-spacing-unit);
}
}
/* ------------------------------------ *\
#LIST-BARE
\* ------------------------------------ */
/**
* The o-list-bare object simply removes any indents and bullet points from
* lists.
*/
.o-list-bare {
margin-left: 0;
list-style: none;
}
/* ------------------------------------ *\
#LIST-INLINE
\* ------------------------------------ */
/**
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin-left: 0;
list-style: none;
&__item {
display: inline-block;
}
}
/* ------------------------------------ *\
#LAYOUT
\* ------------------------------------ */
:root {
--layout-gutter: var(--global-spacing-unit--small);
}
/**
* The layout is based on lost framework
* https://github.com/corysimmons/lost
*/
@lost gutter 1rem;
/**
* Layout
*/
.o-layout {
lost-flex-container: row;
}
/**
* Layout items
*
* 1. Add gutter on the right of all elements
* 2. Last element of the row hase no gutter on the right
*/
@for $flex-grow from 1 to 3 {
/* Layout extensible diemension */
.o-layout__item--flex-$(flex-grow) {
flex: $flex-grow;
&:nth-child(1n) {
margin-right: var(--layout-gutter); /* [1] */
margin-left: 0; /* [1] */
}
&:last-child {
margin-right: 0; /* [2] */
}
}
}
/**
* Flex item ordering
*
* 1. Put item as the last one
*/
@for $i from 1 to 6 {
.o-layout__item--order-$i {
order: $(i);
}
}
.o-layout__item--order-last {
order: 99; /* [1] */
}
@media (--lap-and-up) {
@for $i from 1 to 6 {
.o-layout__item--lap-and-up--order-$i {
order: $(i);
}
}
.o-layout__item--order-last\@lap-and-up {
order: 99; /* [1] */
}
}
/**
* Items with fixed width
*/
/* Default items size (on palm) */
.o-layout__item--1-1,
.o-layout__item--1-2,
.o-layout__item--1-3,
.o-layout__item--2-3,
.o-layout__item--1-4,
.o-layout__item--3-4 {
lost-column: 1/1 flex;
}
.o-layout__item--1-6,
.o-layout__item--5-6,
.o-layout__item--1-12 {
lost-column: 1/2 flex;
}
/* Items size on lap and up */
@media (--lap-and-up) {
.o-layout__item--1-2,
.o-layout__item--1-4,
.o-layout__item--3-4,
.o-layout__item--1-2\@lap-and-up {
lost-column: 1/2 flex;
}
.o-layout__item--1-3,
.o-layout__item--1-6,
.o-layout__item--1-3\@lap-and-up {
lost-column: 1/3 flex;
}
.o-layout__item--2-3,
.o-layout__item--5-6,
.o-layout__item--2-3\@lap-and-up {
lost-column: 2/3 2 flex;
}
.o-layout__item--1-12,
.o-layout__item--1-4\@lap-and-up {
lost-column: 1/4 flex;
}
.o-layout__item--3-4\@lap-and-up {
lost-column: 3/4 flex;
}
}
/* Items size on desk and up */
@media (--desk) {
.o-layout__item--1-4 {
lost-column: 1/4 flex;
}
.o-layout__item--3-4 {
lost-column: 3/4 2 flex;
}
.o-layout__item--1-6 {
lost-column: 1/6 flex;
}
.o-layout__item--5-6 {
lost-column: 5/6 2 flex;
}
.o-layout__item--1-12 {
lost-column: 1/12 flex;
}
}
/**
* Move items
*/
@for $fraction from 1 to 12 {
.o-layout__item--move--$(fraction)-12 {
lost-move: $fraction/12;
}
.o-layout__item--move---$(fraction)-12 {
lost-move: -$fraction/12;
}
}
@each $query, $breakpoint in (--palm, --lap, --lap-and-up, --portable, --desk),
(palm, lap, lap-and-up, portable, desk) {
@media ($(query)) {
@for $fraction from 1 to 12 {
.o-layout__item--move--$(fraction)-12\@$(breakpoint) {
lost-move: $fraction/12;
}
.o-layout__item--move---$(fraction)-12\@$(breakpoint) {
lost-move: -$fraction/12;
}
}
}
}
/* ------------------------------------ *\
#BOX
\* ------------------------------------ */
/**
* The box object simply boxes off content.
*/
:root {
--box-padding: var(--global-spacing-unit);
}
/**
* 1. So we can apply the `.box` class to naturally-inline elements.
* 2. Clearfix
*/
.o-box {
display: block; /* [1] */
padding: var(--box-padding);
@mixin clearfix;
> :last-child {
margin-bottom: 0;
}
}
/* ------------------------------------ *\
#TABLES
\* ------------------------------------ */
:root {
--table-border-width: 1px;
--table-border-style: solid;
--table-border-color: var(--global-text-color);
--table-padding: calc(var(--global-spacing-unit) / 4);
--table-padding--cosy: calc(var(--global-spacing-unit) / 2);
--table-padding--comfy: calc(var(--global-spacing-unit));
--table-background-color: var(--color-gray-light);
}
/**
* Table default layout
*
* 1. Allow the table to scroll horizontally
* 2. Reset scroll horizontally for mobile
*/
.o-table {
display: block; /* [1] */
width: 100%;
border-collapse: collapse;
overflow-x: auto; /* [1] */
thead,
tfoot {
background-color: var(--table-background-color);
}
th,
td {
border: var(--table-border-width)
var(--table-border-style)
var(--table-border-color);
padding: var(--table-padding);
}
@media (--lap-and-up) {
display: table; /* [2] */
overflow-x: visible; /* [2] */
}
}
/**
* Add borders only to `table`’s rows.
*/
.o-table--borderless {
&,
th,
td {
border: 0 var(--table-border-style) var(--table-border-color);
}
thead,
tfoot {
background-color: transparent;
}
}
.table--borderless {
border-top-width: var(--table-border-width);
th,
td {
border-bottom-width: var(--table-border-width);
}
}
/**
* COMPONENTS
*/
/* ------------------------------------ *\
#BUTTONS
\* ------------------------------------ */
:root {
/* Colors */
--button-background: var(--color-primary);
--button-color: var(--color-white);
/* Hover */
--button-background-hover: var(--color-black);
--button-color-hover: var(--button-color);
/* Active */
--button-background-active: var(--color-base);
--button-color-active: var(--button-color);
/* UI */
--button-padding: calc(var(--global-spacing-unit) / 2);
--button-border-width: 1px;
--button-border-style: none;
--button-border-color: var(--color-base);
--button-border-radius: calc(var(--global-spacing-unit) / 8);
}
/**
* 1. Allow us to style box model properties.
* 2. Make buttons inherit font styles (often necessary when styling `input`s
* as buttons).
* 3. Reset/normalize some styles.
* 4. Subtract the border size from the padding value so that buttons do not
* grow larger as we add borders.
* 5. Line different sized buttons up a little nicer.
* 6. Fixes odd inner spacing in IE7.
* 7. Force all button-styled elements to appear clickable.
* 8. Hover state color
* 9. Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
*/
@define-mixin button {
display: inline-block; /* [1] */
font: inherit; /* [2] */
font-weight: 700;
text-align: center; /* [3] */
background-color: var(--button-background);
border: var(--button-border-width)
var(--button-border-style)
var(--button-border-color);
border-radius: var(--button-border-radius);
margin: 0; /* [3] */
padding: calc(var(--button-padding) - var(--button-border-width))
calc(var(--button-padding) * 2 - var(--button-border-width)); /* [4] */
vertical-align: middle; /* [5] */
overflow: visible; /* [6] */
cursor: pointer; /* [7] */
&,
&:hover,
&.is-hover,
&:active,
&.is-active,
&:focus
&.is-focus {
color: var(--button-color);
text-decoration: none; /* [3] */
}
&:hover,
&.is-hover {
color: var(--button-color-hover);
background-color: var(--button-background-hover); /* [8] */
}
&:active,
&.is-active {
color: var(--button-color-active);
background-color: var(--button-background-active); /* [8] */
}
&:focus,
&.is-focus {
box-shadow: 0 0 3px var(--color-focus), 0 0 7px var(--color-focus);
}
&::-moz-focus-inner {
border: 0; /* [9] */
padding: 0; /* [9] */
}
}
.c-button {
@mixin button;
}
/**
* Use fonts only when loaded
*/
.wf-active [class^="vd-c-button"] {
font-family: var(--enhance-heading-font-family);
}
/**
* State buttons
*
* Color variations
*/
@define-mixin button,
$text-color,
$background-color,
$text-color-hover,
$background-color-hover,
$text-color-active,
$backgroundcolor-active {
color: $text-color;
background-color: $background-color;
&:hover,
&.is-hover {
color: $text-color-hover;
background-color: $background-color-hover;
}
&:active,
&.is-active {
color: $text-color-active;
background-color: $backgroundcolor-active;
}
}
/* Button secondary */
:root {
--button-text-color-secondary: var(--button-color);
--button-background-color-secondary: var(--color-gray-light);
--button-text-color-secondary-hover: var(--button-color);
--button-background-color-secondary-hover: var(--button-background-hover);
--button-text-color-secondary-active: var(--color-white);
--button-background-color-secondary-active: var(--color-base);
}
@define-mixin button--secondary {
@mixin button,
var(--button-text-color-secondary),
var(--button-background-color-secondary),
var(--button-text-color-secondary-hover),
var(--button-background-color-secondary-hover),
var(--button-text-color-secondary-active),
var(--button-background-color-secondary-active);
}
.c-button--secondary {
@mixin button--secondary;
}
/* Button transparent */
:root {
--button-text-color-transparent: inherit;
--button-background-color-transparent: inherit;
--button-text-color-transparent-hover: inherit;
--button-background-color-transparent-hover: inherit;
--button-text-color-transparent-active: inherit;
--button-background-color-transparent-active: inherit;
}
@define-mixin button--transparent {
@mixin button,
inherit,
var(--button-background-color-transparent),
var(--button-text-color-transparent-hover),
var(--button-background-color-transparent-hover),
var(--button-text-color-transparent-active),
var(--button-background-color-transparent-active);
}
.c-button--transparent {
@mixin button--transparent;
}
/* Button disabled */
:root {
--button-text-color-disabled: inherit;
--button-background-color-disabled: var(--color-gray-light);
}
.c-button--disabled,
[type="submit"][disabled] {
&,
&:hover,
&:focus,
&:active {
color: var(--button-text-color-disabled);
background-color: var(--button-background-color-disabled);
cursor: not-allowed;
}
}
/**
* Size of buttons
*
* Size variation
*/
@define-mixin button--block {
display: block;
width: 100%;
}
.c-button--block {
@mixin button--block;
}
/* ------------------------------------ *\
#FORMS
\* ------------------------------------ */
:root {
--form-spacing: var(--global-spacing-unit);
--form-active-color: var(--color-primary-alt);
--form-text-color: var(--color-base);
--form-background-color: var(--color-gray-lighter);
--form-page-background-color: var(--color-white);
--form-border-color: var(--color-gray-light);
--form-border-radius: .25rem;
}
/*
* WTF, forms?
* Released under MIT and copyright 2014 Mark Otto.
* http://wtfforms.com
*
* Embedded icons from Open Iconic.
* Released under MIT and copyright 2014 Waybury.
* http://useiconic.com/open
*/
/*
* Checkboxes and radios
*
* 1. Put the input behind the label so it doesn't overlay text
*/
.c-form-control {
position: relative;
display: inline-block;
color: var(--form-text-color);
padding-left: var(--form-spacing);
cursor: pointer;
input {
position: absolute;
z-index: -1;
opacity: 0;
}
&__indicator {
position: absolute;
top: var(--form-border-radius);
left: 0;
display: block;
width: 1rem;
height: 1rem;
font-size: 65%;
line-height: 1rem;
color: var(--form-background-color);
text-align: center;
background-color: var(--form-background-color);
background-size: 50% 50%;
background-position: center center;
background-repeat: no-repeat;
user-select: none;
}
}
/* Hover state */
/* Uncomment if you need it, but be aware of the sticky iOS states.
.c-form-control:hover .c-form-control__indicator {
color: var(--form-page-background-color);
background-color: #ccc;
}
*/
/**
* States
*
* 1. Focus
* 2. Checked
* 3. Active
*/
.c-form-control input {
&:focus ~ .c-form-control__indicator {
box-shadow:
0 0 0 .075rem var(--form-page-background-color),
0 0 0 .2rem var(--form-active-color); /* [1] */
}
&:checked ~ .c-form-control__indicator {
color: var(--form-page-background-color); /* [2] */
background-color: var(--form-active-color); /* [2] */
}
&:active ~ .c-form-control__indicator {
color: var(--form-page-background-color); /* [3] */
background-color: var(--form-active-color); /* [3] */
}
}
/* Checkbox modifiers */
.c-checkbox .c-form-control__indicator {
border-radius: var(--form-border-radius);
}
.c-checkbox input:checked ~ .c-form-control__indicator {
/* stylelint-disable function-url-quotes */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
/* stylelint-enable function-url-quotes */
}
/* Radio modifiers */
.c-radio .c-form-control__indicator {
border-radius: 50%;
}
.c-radio input:checked ~ .c-form-control__indicator {
/* stylelint-disable function-url-quotes */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
/* stylelint-enable function-url-quotes */
}
/* Alternately, use another character */
.c-form-control-x input:checked ~ .c-form-control__indicator {
/* stylelint-disable function-url-quotes */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjQsMEwwLDEuNGwwLjcsMC43bDEuOCwxLjhMMC43LDUuN0wwLDYuNGwxLjQsMS40bDAuNy0wLjdsMS44LTEuOGwxLjgsMS44bDAuNywwLjdsMS40LTEuNEw3LjEsNS43DQoJTDUuMywzLjlsMS44LTEuOGwwLjctMC43TDYuNCwwTDUuNywwLjdMMy45LDIuNUwyLjEsMC43QzIuMSwwLjcsMS40LDAsMS40LDB6Ii8+DQo8L3N2Zz4NCg==);
/* stylelint-enable function-url-quotes */
}
.c-form-control-dash input:checked ~ .c-form-control__indicator {
/* stylelint-disable function-url-quotes */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
/* stylelint-enable function-url-quotes */
}
/*
* Select
*
* 1. Undo the Firefox inner focus ring
* 2. Dropdown arrow
*/
.c-select {
position: relative;
display: inline-block;
color: var(--form-text-color);
select {
display: inline-block;
width: 100%;
line-height: 1.5;
color: var(--form-text-color);
background-color: var(--form-background-color);
border: 0;
border-radius: var(--form-border-radius);
margin: 0;
padding: .5rem 2.25rem .5rem 1rem;
cursor: pointer;
outline: 0;
appearance: none;
&:focus:-moz-focusring {
color: transparent; /* [1] */
text-shadow: 0 0 0 rgba(0, 0, 0, 1); /* [1] */
}
}
&::after { /* [2] */
position: absolute;
top: 50%;
right: 1var(--form-border-radius);
display: inline-block;
width: 0;
height: 0;
border-top: .35rem solid;
border-right: .35rem solid transparent;
border-bottom: .35rem solid transparent;
border-left: .35rem solid transparent;
margin-top: -.15rem;
content: "";
pointer-events: none;
}
}
/* Hover state */
/* Uncomment if you need it, but be aware of the sticky iOS states.
.c-select select:hover {
background-color: var(--form-border-color);
}
*/
/**
* States
*
* 1. Focus
* 2. Active/open
* 3. Hide the arrow in IE10 and up
*/
.c-select select {
&:focus {
box-shadow:
0 0 0 .075rem var(--form-page-background-color),
0 0 0 .2rem var(--form-active-color); /* [1] */
}
&:active {
color: var(--form-page-background-color); /* [2] */
background-color: var(--form-active-color); /* [2] */
}
&::-ms-expand {
display: none; /* [3] */
}
}
/* Media query to target Firefox only */
@-moz-document url-prefix("") {
/* Firefox hack to hide the arrow */
.c-select select {
text-indent: .01px;
text-overflow: "";
padding-right: 1rem;
}
/* <option> elements inherit styles from <select>, so reset them. */
.c-select option {
background-color: var(--form-page-background-color);
}
}
/* IE9 hack to hide the arrow */
@media screen and (min-width: 0\0) {
.c-select select {
z-index: 1;
padding: .5rem var(--form-spacing) .5rem 1rem;
}
.c-select::after {
z-index: 5;
}
.c-select::before {
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
z-index: 2;
display: block;
width: var(--form-spacing);
background-color: var(--form-background-color);
content: "";
}
.c-select select:hover,
.c-select select:focus,
.c-select select:active {
color: var(--form-text-color);
background-color: var(--form-background-color);
}
}
/*
* File
*/
.file {
position: relative;
display: inline-block;
height: 2.5rem;
cursor: pointer;
input {
min-width: 14rem;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
}
&--custom {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 5;
height: 2.5rem;
line-height: 1.5;
color: var(--form-text-color);
background-color: var(--form-page-background-color);
border: .075rem solid var(--form-border-color);
border-radius: var(--form-border-radius);
padding: .5rem 1rem;
box-shadow: inset 0 .2rem .4rem rgba(0, 0, 0, .05);
user-select: none;
&::after {
content: "Choose file...";
}
&::before {
position: absolute;
top: -.075rem;
right: -.075rem;
bottom: -.075rem;
z-index: 6;
display: block;
height: 2.5rem;
line-height: 1.5;
color: var(--form-text-color);
background-color: var(--form-background-color);
border: .075rem solid var(--form-border-color);
border-radius:
0 var(--form-border-radius)
var(--form-border-radius)
0;
padding: .5rem 1rem;
content: "Browse";
}
}
}
/* Focus */
.file input:focus ~ .file--custom {
box-shadow:
0 0 0 .075rem var(--form-page-background-color),
0 0 0 .2rem var(--form-active-color);
}
/*
* Progress
*
* 1. IE10 uses `color` to set the bar background-color
* 2. Remove Firefox and Opera border
* 3. Reset the default appearance
*/
.c-progress {
display: inline-block;
height: 1rem;
&[value] {
color: var(--form-active-color); /* [1] */
border: 0; /* [2] */
appearance: none; /* [3] */
&::-webkit-progress-bar {
background-color: var(--form-background-color);
border-radius: .2rem;
}
&::-webkit-progress-value {
background-color: var(--form-active-color);
border-top-left-radius: .2rem;
border-bottom-left-radius: .2rem;
}
}
&[value="100"]::-webkit-progress-value {
border-top-right-radius: .2rem;
border-bottom-right-radius: .2rem;
}
}
/* Firefox styles must be entirely separate or it busts Webkit styles. */
@-moz-document url-prefix("") {
.c-progress[value] {
background-color: var(--form-background-color);
border-radius: .2rem;
}
.c-progress[value]::-moz-progress-bar {
background-color: var(--form-active-color);
border-top-left-radius: .2rem;
border-bottom-left-radius: .2rem;
}
.c-progress[value="100"]::-moz-progress-bar {
border-top-right-radius: .2rem;
border-bottom-right-radius: .2rem;
}
}
/* IE9 hacks to accompany custom markup. We don't need to scope this via media
queries, but I feel better doing it anyway. */
@media screen and (min-width: 0\0) {
.c-progress {
background-color: var(--form-background-color);
border-radius: .2rem;
}
.c-progress-bar {
display: inline-block;
height: 1rem;
text-indent: -999rem; /* Simulate hiding of value as in native
`<progress>` */
background-color: var(--form-active-color);
border-top-left-radius: .2rem;
border-bottom-left-radius: .2rem;
}
.c-progress[width="100%"] {
border-top-right-radius: .2rem;
border-bottom-right-radius: .2rem;
}
}
/*
* Control layouts
*/
.c-form-controls {
&--stacked {
margin: 1rem 0;
.c-form-control,
.c-progress {
display: block;
}
.c-form-control + .c-form-control,
.c-progress + .c-progress {
margin-top: .5rem;
}
}
&--inline {
margin: 1rem 0;
.c-form-control {
display: inline-block;
height: 1rem;
+ .c-form-control {
margin-left: 1rem;
}
}
}
}
/* ------------------------------------ *\
#NAVBAR
\* ------------------------------------ */
/**
* Navbar
*
* If the navbare use list, be sure to remove list styles. Use a classe like
* `.o-list-bare`.
*
* 1. Only the first element is align on the left
* 2. Size of the logo. On palm, it's the same size of a button .
* 3. positionning the text aside of the logo
*/
.c-navbar {
display: flex;
flex-wrap: wrap;
> :nth-child(1) {
margin-right: auto; /* [1] */
}
}
.c-navbar__logo {
@media (--lap-and-up) {
display: flex; /* [3] */
}
source,
img {
height: calc(
var(--button-padding)
+ var(--button-border-width)
+ 1rem
+ var(--button-border-width)
+ var(--button-padding)
); /* [2] */
@media (--lap-and-up) {
height: 4rem; /* [2] */
}
}
}
.c-navbar__site-title {
@media (--lap-and-up) {
display: flex; /* [3] */
flex-direction: column; /* [3] */
}
}
/* ------------------------------------ *\
#HEADER
\* ------------------------------------ */
/**
* Set the colors of the header.
*/
:root {
--header-background-color: var(--color-base);
--header-color: var(--color-white);
}
.c-header {
background-color: var(--header-background-color);
&,
a,
a:hover {
color: var(--header-color);
}
}
/**
* Header primary links
*
* 1. Button are buttons only on palm.
* 2. Use enhanced fonts only when loaded.
*/
@media (--palm) {
.c-header-button {
@mixin button; /* [1] */
@mixin button--block; /* [1] */
&--secondary {
@mixin button--secondary;
}
}
.wf-active .c-header-button {
font-family: var(--enhance-heading-font-family); /* [2] */
}
}
/* ------------------------------------ *\
#INLINE TEXTS
\* ------------------------------------ */
/**
* Fractions
*
* Enable OpenType feature for fraction
* More info here:
* http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
.c-fraction {
font-variant-ligatures: common-ligatures, contextual;
font-variant-numeric: diagonal-fractions;
font-feature-settings: "kern", "liga", "clig", "calt", "frac";
font-kerning: normal;
}
/**
* Footnotes
*
* Enable OpenType feature for footnotes
* More info here:
* http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
.c-footnote {
@mixin font-sub;
}
/**
* Small caps
*/
.c-small-caps {
@mixin font-small-caps;
}
/* ------------------------------------ *\
#BOX
\* ------------------------------------ */
:root {
/* UI */
--box-margin-bottom: var(--global-spacing-unit);
/* Colors */
--box-default-background-color: var(--color-gray-light);
--box-transaction-background-color: var(--color-primary-alt);
--box-transaction-text-color: var(--color-white);
/* Info colors */
--box-info-background-color: var(--color-gray-lightest);
}
/**
* Default box UI
*/
.c-box--default {
background-color: var(--box-default-background-color);
margin-bottom: var(--box-margin-bottom);
}
/**
* Transaction confiration UI
*/
.c-box--transaction {
text-align: center;
background-color: var(--box-transaction-background-color);
margin-bottom: var(--box-margin-bottom);
* {
color: var(--box-transaction-text-color);
}
}
.c-box--info {
background-color: var(--box-info-background-color);
margin-bottom: var(--box-margin-bottom);
}
/* ------------------------------------ *\
#BACKGROUNDS
\* ------------------------------------ */
/**
* Add vertical space on items that have a background color.
*
* 1. Remove margin bottom of the last child to avoid double bottom space
* (padding + margin)
*/
.c-background {
padding-top: var(--global-spacing-unit);
padding-bottom: var(--global-spacing-unit);
> :last-child {
margin-bottom: 0;
}
& + :not(.c-background) {
margin-top: var(--global-spacing-unit);
}
}
@each $color in primary,
base,
gray-dark,
gray-light,
gray-lighter,
gray-lightest,
primary,
primary-dark,
primary-light,
primary-lighter,
primary-lightest,
white,
black,
primary-alt,
focus,
visited {
.c-background--$(color) {
background-color: var(--color-$(color));
}
}
/* ------------------------------------ *\
#SMALL
\* ------------------------------------ */
/**
* Small text
*/
@mixin small .c-small;
/* ------------------------------------ *\
#STRONG
\* ------------------------------------ */
/**
* Strong text
*/
.c-strong {
font-weight: bold;
}
.wf-active .c-strong {
font-weight: var(--enhance-global-font-weight-bold);
}
/* ------------------------------------ *\
#QUOTES
\* ------------------------------------ */
/**
* Blockquote class
*/
.c-blockquote {
@extend blockquote;
}
/* ------------------------------------ *\
#PAGE-TITLE
\* ------------------------------------ */
/**
* Put title/text over an image
*
* 1. To avoid collapsed text on a small image, this style only applied on
* palm-and-up viewport
* 2. Position the text at the top
* 3. Position the overlay over the image
* 4. Avoid a problem of overlaping at the bottom of the image
*/
@media (--lap-and-up) { /* [1] */
.c-page-title--image {
position: relative; /* [2] */
color: var(--color-white);
&__over-text {
position: absolute; /* [2] */
top: var(--global-spacing-unit);
padding-left: var(--global-spacing-unit);
}
&__figure {
position: relative; /* [3] */
&::after {
position: absolute; /* [3] */
top: 0; /* [3] */
left: 0; /* [3] */
width: 100%;
height: 100%;
background:
linear-gradient(
rgba(0, 0, 0, .75),
rgba(0, 0, 0, 0)
);
content: "\A";
}
}
&__image {
width: 100%;
vertical-align: top; /* [4] */
}
}
}
/* ------------------------------------ *\
#BREADCRUMP
\* ------------------------------------ */
/**
* Breadcrumb
*
* 1. Only show the last element on mobile
*/
.c-breadcrumb {
@media (--palm) {
> li:not(:last-child) {
display: hidden; /* [1] */
}
}
> li::before {
content: "< ";
}
}
/* ------------------------------------ *\
#IMAGES
\* ------------------------------------ */
/**
* Perfect circle
*/
.c-image-circle {
border-radius: 50%;
}
/* ------------------------------------ *\
#LIST-ABBREVIATIONS
\* ------------------------------------ */
.c-list-abbreviations {
abbr {
@mixin font-headings;
font-variant-caps: normal;
&[title] {
text-decoration: none;
}
&::after {
@mixin font-bodytext;
display: block;
font-size: var(--global-font-size);
font-variant-caps: initial;
color: var(--color-gray-light);
text-transform: none;
/* stylelint-disable function-whitespace-after */
content: attr(title); /* [2] */
/* stylelint-enable function-whitespace-after */
}
}
}
/**
* UTILITIES
*/
/* ------------------------------------ *\
#CLEARFIX
\* ------------------------------------ */
/**
* Micro clearfix. Further reading:
* http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
*
*/
.u-clearfix {
@mixin clearfix;
}
/* ------------------------------------ *\
#HEADINGS
\* ------------------------------------ */
/**
* Redefine all of our basic heading styles against utility classes so as to
* allow for double stranded heading hierarchy, e.g. we semantically need an H2,
* but we want it to be sized like an H1:
*
* <h2 class="u-h1"></h2>
*
*/
.u-h1 {
font-size: var(--heading-size-1);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-1);
}
.u-h2 {
font-size: var(--heading-size-2);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-2);
}
.u-h3 {
font-size: var(--heading-size-3);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-3);
}
.u-h4 {
font-size: var(--heading-size-4);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-4);
}
.u-h5 {
font-size: var(--heading-size-5);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-5);
}
.u-h6 {
font-size: var(--heading-size-6);
font-weight: var(--heading-font-weight-regular);
line-height: var(--heading-line-height-6);
}
.u-h1,
.u-h2,
.u-h3,
.u-h4,
.u-h5,
.u-h6 {
font-family: var(--heading-font-family);
@mixin font-headings;
}
.wf-metaweb-n7-active {
.u-h1,
.u-h2,
.u-h3,
.u-h4,
.u-h5,
.u-h6 {
font-family: var(--enhance-heading-font-family); /* [1] */
}
.u-h1,
.u-h2,
.u-h3,
.u-h4,
.u-h5 {
font-weight: var(--enhance-heading-font-weight-bold);
}
.u-h6 {
font-weight: var(--enhance-heading-font-weight-regular);
}
}
/* ------------------------------------ *\
#COLORS
\* ------------------------------------ */
/**
* Set text color
*
* Be sure that the contrast meet the standard of accessibility.
*/
@each $color in primary,
base,
gray-dark,
gray-light,
gray-lighter,
gray-lightest,
primary,
primary-dark,
primary-light,
primary-lighter,
primary-lightest,
white,
black,
primary-alt,
focus,
visited {
.u-color-text--$(color) {
color: var(--color-$(color));
}
}
/* ------------------------------------ *\
#FONT
\* ------------------------------------ */
/**
* Use these helper classes to cause other elements to adopt the heading
* fonts., e.g.:
*
* <p class="vd-u-font-heading">Lorem ipsum</h2>
*
* 1. Apply enhanced font only if it is loaded
*/
.u-font-heading {
font-family: var(--heading-font-family);
@mixin font-headings;
}
.wf-metaweb-n4-active {
.u-font-heading {
font-family: var(--enhance-heading-font-family); /* [1] */
}
}
/* ------------------------------------ *\
// #TEXT-UTILITIES
\* ------------------------------------ */
/**
* Center text
*/
.u-text-center {
text-align: center;
}
/* ------------------------------------ *\
// #UTILITIES
\* ------------------------------------ */
/**
* Visually hide content.
*
* Use it when you want to hide something but keep it available to screen
* readers and assistive technology. It will not use up space in the document
* flow.
*/
.u-visually-hidden {
display: hidden;
}
/**
* Hide content
*
* Use disappear when you want to remove something completely from the page.
* This includes hiding the item screen readers and assistive technology. It
* will do this with `display: none !important;`.
*/
.u-hidden {
display: disappear;
}
/* ------------------------------------ *\
#RESPONSIVE-UTILITIES
\* ------------------------------------ */
/**
* Visually hide content depending on viewports.
*
* Use it when you want to hide something but keep it available to screen
* readers and assistive technology. It will not use up space in the document
* flow.
*/
@media (--palm) {
.u-visually-hidden\@palm {
display: hidden;
}
}
@media (--lap) {
.u-visually-hidden\@lap {
display: hidden;
}
}
@media (--lap-and-up) {
.u-visually-hidden\@lap-and-up {
display: hidden;
}
}
@media (--portable) {
.u-visually-hidden\@portable {
display: hidden;
}
}
@media (--desk) {
.u-visually-hidden\@desk {
display: hidden;
}
}
/**
* Hide content depending of the viewport
*
* Use disappear when you want to remove something completely from the page.
* This includes hiding the item screen readers and assistive technology. It
* will do this with `display: none !important;`.
*/
@media (--palm) {
.u-hidden\@palm {
display: disappear;
}
}
@media (--lap) {
.u-hidden\@lap {
display: disappear;
}
}
@media (--lap-and-up) {
.u-hidden\@lap-and-up {
display: disappear;
}
}
@media (--portable) {
.u-hidden\@portable {
display: disappear;
}
}
@media (--desk) {
.u-hidden\@desk {
display: disappear;
}
}
/* ------------------------------------ *\
#SPACING
\* ------------------------------------ */
/**
* Margin and padding helper classes. Use these to tweak layout on a micro
* level.
*
* `.(m|p)(t|r|b|l|h|v)(-|+|0) {}` = margin/padding
* top/right/bottom/left/horizontal/vertical less/more/none
*/
:root {
--margin: var(--global-spacing-unit);
--padding: var(--global-spacing-unit);
}
/**
* Margin helper classes.
*
* Add margins.
*/
.u-m {
margin: var(--margin);
}
.u-mt {
margin-top: var(--margin);
}
.u-mr {
margin-right: var(--margin);
}
.u-mb {
margin-bottom: var(--margin);
}
.u-ml {
margin-left: var(--margin);
}
.u-mh {
margin-right: var(--margin);
margin-left: var(--margin);
}
.u-mv {
margin-top: var(--margin);
margin-bottom: var(--margin);
}
/**
* Remove margins.
*/
.u-m0 {
margin: 0 !important;
}
.u-mt0 {
margin-top: 0 !important;
}
.u-mr0 {
margin-right: 0 !important;
}
.u-mb0 {
margin-bottom: 0 !important;
}
.u-ml0 {
margin-left: 0 !important;
}
.u-mh0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.u-mv0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/**
* Padding helper classes.
*
* Add paddings.
*/
.u-p {
padding: var(--padding) !important;
}
.u-pt {
padding-top: var(--padding) !important;
}
.u-pr {
padding-right: var(--padding) !important;
}
.u-pb {
padding-bottom: var(--padding) !important;
}
.u-pl {
padding-left: var(--padding) !important;
}
.u-ph {
padding-right: var(--padding) !important;
padding-left: var(--padding) !important;
}
.u-pv {
padding-top: var(--padding) !important;
padding-bottom: var(--padding) !important;
}
/**
* Remove paddings.
*/
.u-p0 {
padding: 0 !important;
}
.u-pt0 {
padding-top: 0 !important;
}
.u-pr0 {
padding-right: 0 !important;
}
.u-pb0 {
padding-bottom: 0 !important;
}
.u-pl0 {
padding-left: 0 !important;
}
.u-ph0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.u-pv0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ------------------------------------ *\
#SPACING
\* ------------------------------------ */
/**
* Gutter helper classes for layout. Use these to tweak layout on a micro
* level. It can be usefull if the layout items use more than 100% of the
* width and wrap on the following line
*/
:root {
--layout-trumps-gutter: var(--layout-gutter);
}
/**
* Gutter helper classes.
*
* Add gutter.
*/
.u-gr {
margin-right: var(--layout-trumps-gutter) !important;
}
.u-gl {
margin-left: var(--layout-trumps-gutter) !important;
}
@media (--lap-and-up) {
.u-gr\@lap-and-up {
margin-right: var(--layout-trumps-gutter) !important;
}
.u-gl\@lap-and-up {
margin-left: var(--layout-trumps-gutter) !important;
}
}
/**
* Remove gutter
*/
.u-gr0 {
margin-right: 0 !important;
}
.u-gl0 {
margin-left: 0 !important;
}
@media (--lap-and-up) {
.u-gr0\@lap-and-up {
margin-right: 0 !important;
}
.u-gl0\@lap-and-up {
margin-left: 0 !important;
}
}
/* ------------------------------------ *\
// #PRINT
\* ------------------------------------ */
/**
* Toggle content for print.
*/
@media (--print){
.u-hidden\@print {
display: disappear;
}
}
Raw
02-in-1lines.css
/**
* CONTENTS
*
* SETTINGS
* Global...............Project-wide variables and settings.
* Fontface.............Set the font to use.
* Responsive...........Breakpoint.
*
* TOOLS
* Mixins...............Useful mixins.
* Clearfix.............Micro clearfix mixin.
*
* GENERIC
* Normalize.css........A level playing field.
* Reset................Reset styles.
* Box-sizing...........Better default `box-sizing`.
* Shared...............Vertical rhythm.
*
* BASE
* Page.................Fonts, colors and all stuff for `<html>.
* Headings.............H1–H6 styles.
* Paragraph............P style.
* Small................Small text.
* Strong...............Strong text.
* Subs.................Subscript element style.
* Lists................UL, OL & DL styles.
* Anchors..............Links styles.
* Images...............Images styles.
* Tables...............Tables styles.
* Figures..............Figures styles.
* Quotes...............Quotes styles.
* Abbreviation.........Abbreviation styles.
* Code.................Code, keyborad input, etc. styles.
* Horizontale rueles...Horizontal rules styles.
* Selections...........Text highlight color.
*
* OBJECTS
* Wrappers.............Wrapping and constraining elements.
* List-bare............Remove list style.
* List-inline..........Displays a list as one horizontal row.
* Layouts..............Grid system.
* Boxes................Boxes.
* Tables...............Tables.
*
* COMPONENTS
* Buttons..............Buttons.
* Forms................Forms, input and buttons.
* Navbar...............Top bar.
* Header...............Header components styles.
* Inline texts.........Fraction, Small-caps, etc.
* Boxes................Boxes styles.
* Backgrounds..........Change backgrounds color
* Small................Small text styles.
* Strong...............Strong text styles.
* Quotes...............Stlyles for quotes.
* Breadcrumb ..........Styles for breadcrumb.
* Images ..............Images shapes.
* List-abbreviations...List with displayed abbreviation title.
*
* UTILITIES
* Clearfix.............Text helpers.
* Headings.............Headings styles for texts.
* Colors...............Text colors.
* Text utilities.......Center texts..
* Utilities............Responsive headings styles for texts.
* Responsive utilities.Hide and show content depending on viewport.
* Spacing..............Utilities to work with spaces.
* Print................Toggling content for print..
*/
/**
* SETINGS
*/
@import "settings/_settings.global.css";
@import "settings/_settings.fontface.css";
@import "settings/_settings.responsive.css";
/**
* TOOLS
*/
@import "tools/_tools.mixins.css";
@import "tools/_tools.clearfix.css";
/**
* GENERIC
*/
@import "generic/_generic.box-sizing.css";
@import "normalize.css";
@import "generic/_generic.reset.css";
@import "generic/_generic.shared.css";
/**
* ELEMENTS
*/
@import "elements/_elements.page.css";
@import "elements/_elements.headings.css";
@import "elements/_elements.paragraph.css";
@import "elements/_elements.small.css";
@import "elements/_elements.strong.css";
@import "elements/_elements.subs.css";
@import "elements/_elements.lists.css";
@import "elements/_elements.anchors.css";
@import "elements/_elements.images.css";
@import "elements/_elements.tables.css";
@import "elements/_elements.figures.css";
@import "elements/_elements.quotes.css";
@import "elements/_elements.abbreviation.css";
@import "elements/_elements.code.css";
@import "elements/_elements.horizontale-rules.css";
@import "elements/_elements.selections.css";
/**
* OBJECTS
*/
@import "objects/_objects.wrappers.css";
@import "objects/_objects.list-bare.css";
@import "objects/_objects.list-inline.css";
@import "objects/_objects.layouts.css";
@import "objects/_objects.box.css";
@import "objects/_objects.tables.css";
/**
* COMPONENTS
*/
@import "components/_components.buttons.css";
@import "components/_components.forms.css";
@import "components/_components.navbar.css";
@import "components/_components.header.css";
@import "components/_components.inline-texts.css";
@import "components/_components.box.css";
@import "components/_components.backgrounds.css";
@import "components/_components.small.css";
@import "components/_components.strong.css";
@import "components/_components.quotes.css";
@import "components/_components.page-title.css";
@import "components/_components.breadcrumb.css";
@import "components/_components.images.css";
@import "components/_components.list-abbreviations.css";
/**
* UTILITIES
*/
@import "utilities/_utilities.clearfix.css";
@import "utilities/_utilities.headings.css";
@import "utilities/_utilities.colors.css";
@import "utilities/_utilities.fonts.css";
@import "utilities/_utilities.text-utilities.css";
@import "utilities/_utilities.utilities.css";
@import "utilities/_utilities.utilities-responsive.css";
@import "utilities/_utilities.spacing.css";
@import "utilities/_utilities.layout.css";
@import "utilities/_utilities.print.css";
Raw
02-out-1lines.css
/**
* CONTENTS
*
* SETTINGS
* Global...............Project-wide variables and settings.
* Fontface.............Set the font to use.
* Responsive...........Breakpoint.
*
* TOOLS
* Mixins...............Useful mixins.
* Clearfix.............Micro clearfix mixin.
*
* GENERIC
* Normalize.css........A level playing field.
* Reset................Reset styles.
* Box-sizing...........Better default `box-sizing`.
* Shared...............Vertical rhythm.
*
* BASE
* Page.................Fonts, colors and all stuff for `<html>.
* Headings.............H1–H6 styles.
* Paragraph............P style.
* Small................Small text.
* Strong...............Strong text.
* Subs.................Subscript element style.
* Lists................UL, OL & DL styles.
* Anchors..............Links styles.
* Images...............Images styles.
* Tables...............Tables styles.
* Figures..............Figures styles.
* Quotes...............Quotes styles.
* Abbreviation.........Abbreviation styles.
* Code.................Code, keyborad input, etc. styles.
* Horizontale rueles...Horizontal rules styles.
* Selections...........Text highlight color.
*
* OBJECTS
* Wrappers.............Wrapping and constraining elements.
* List-bare............Remove list style.
* List-inline..........Displays a list as one horizontal row.
* Layouts..............Grid system.
* Boxes................Boxes.
* Tables...............Tables.
*
* COMPONENTS
* Buttons..............Buttons.
* Forms................Forms, input and buttons.
* Navbar...............Top bar.
* Header...............Header components styles.
* Inline texts.........Fraction, Small-caps, etc.
* Boxes................Boxes styles.
* Backgrounds..........Change backgrounds color
* Small................Small text styles.
* Strong...............Strong text styles.
* Quotes...............Stlyles for quotes.
* Breadcrumb ..........Styles for breadcrumb.
* Images ..............Images shapes.
* List-abbreviations...List with displayed abbreviation title.
*
* UTILITIES
* Clearfix.............Text helpers.
* Headings.............Headings styles for texts.
* Colors...............Text colors.
* Text utilities.......Center texts..
* Utilities............Responsive headings styles for texts.
* Responsive utilities.Hide and show content depending on viewport.
* Spacing..............Utilities to work with spaces.
* Print................Toggling content for print..
*/
/**
* SETINGS
*/
/* ------------------------------------ *\
#GLOBAL
\* ------------------------------------ */
/**
* The global settings file contains any project-wide variables; things that
* need to be made available to the entire codebase.
*/
/**
* Typography
*/
:root {
--global-font-size: 1.125rem;
--global-line-height: 1.5;
--global-small-font-size: calc( 1rem / 1.26 );
}
/**
* Colors
*/
:root {
/* Primary color */
--color-base: rgba(83, 101, 113, 1); /* #536571 */
--color-gray-dark: rgba(39, 60, 70, 1); /* #273c46 */
--color-gray-light: rgba(105, 121, 131, 1); /* #697983 */
--color-gray-lighter: rgba(170, 182, 189, 1); /* #aab6bd */
--color-gray-lightest: rgba(220, 227, 232, 1); /* #dce3e8 */
--color-primary: rgba(2, 133, 26, 1); /* #02851a */
--color-primary-dark: rgba(30, 94, 2, 1); /* #1e5e02 */
--color-primary-light: rgba(64, 217, 64, 1); /* #40d940 */
--color-primary-lighter: rgba(153, 255, 51, 1); /* #99ff33 */
--color-primary-lightest: rgba(204, 255, 153, 1); /* #ccff99 */
--color-white: rgba(255, 255, 255, 1);
--color-black: rgba(0, 0, 0, 1);
/* Secondary colors */
--color-primary-alt: rgba(153, 0, 255, 1); /* #9900ff */
/* Special state */
--color-focus: rgba(58, 149, 207, 1);
--color-visited: rgba(77, 52, 146, 1);
}
/**
* Animation
*/
:root {
--transition: .3333s;
}
/**
* Spacing
*
* 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.
*/
:root {
--global-spacing-unit: calc(
var(--global-line-height) * var(--global-font-size)
);
--global-spacing-unit--tiny: calc(var(--global-spacing-unit) * .25);
--global-spacing-unit--small: calc(var(--global-spacing-unit) * .5);
--global-spacing-unit--large: calc(var(--global-spacing-unit) * 2);
--global-spacing-unit--huge: calc(var(--global-spacing-unit) * 4);
}
/* ------------------------------------ *\
#FONTFACE
\* ------------------------------------ */
/**
* Variables
*/
:root {
/* Base font */
--global-text-color: var(--color-base);
--global-font-family: "Palatino Linotype",
Palatino,
Palladio,
"URW Palladio L",
"Book Antiqua",
Baskerville,
"Bookman Old Style",
"Bitstream Charter",
"Nimbus Roman No9 L",
Garamond,
"Apple Garamond",
"ITC Garamond Narrow",
"New Century Schoolbook",
"Century Schoolbook",
"Century Schoolbook L",
Georgia,
serif;
--global-font-weight: 400;
--global-font-weight-bold: 700;
/* Enhance base font */
--enhance-global-font-family: "MetaSerifWeb", var(--global-font-family);
--enhance-global-font-weight-regular: 500;
--enhance-global-font-weight-bold: 700;
/* Heading font */
--heading-font-family: -apple-system,
".SFNSText-Regular",
"San Francisco",
"Roboto",
"Segoe UI",
"Helvetica Neue",
"Lucida Grande",
sans-serif;
--heading-font-weight-regular: normal;
--heading-font-weight-bold: bold;
/* Enhance heading font */
--enhance-heading-font-family: "MetaWeb", var(--heading-font-family);
--enhance-heading-font-weight-regular: 400;
--enhance-heading-font-weight-bold: 700;
/* Monospaced font */
--monospaced-font-family: Consolas,
"Liberation Mono",
Menlo,
Courier,
monospace;
--monospaced-font-size: .8rem;
}
/**
* Meta Serif
*/
/* Normal normal */
@font-face {
font-weight: normal; /* or 400 */
font-style: normal;
font-family: MetaSerifWeb;
src: url("../fonts/MetaSerifWeb-Book.woff") format("woff");
}
/* Normal italic */
@font-face {
font-weight: normal; /* or 400 */
font-style: italic;
font-family: MetaSerifWeb;
src: url("../fonts/MetaSerifWeb-BookItalic.woff") format("woff");
}
/* Bold normal */
@font-face {
font-weight: bold; /* or 700 */
font-style: normal;
font-family: MetaSerifWeb;
src: url("../fonts/MetaSerifWeb-Bold.woff") format("woff");
}
/* Bold itlaic */
@font-face {
font-weight: bold;
font-style: italic;
font-family: MetaSerifWeb;
src: url("../fonts/MetaSerifWeb-BoldItalic.woff") format("woff");
}
/**
* Meta Web Condensed
*/
/* Normal normal */
@font-face {
font-weight: normal; /* or 400 */
font-style: normal;
font-family: MetaWeb;
src: url("../fonts/MetaWeb-CondBook.woff") format("woff");
}
/* Normal italic */
@font-face {
font-weight: normal; /* or 400 */
font-style: italic;
font-family: MetaWeb;
src: url("../fonts/MetaWeb-CondBookItalic.woff") format("woff");
}
/* Bold normal */
@font-face {
font-weight: bold; /* or 700 */
font-style: normal;
font-family: MetaWeb;
src: url("../fonts/MetaWeb-CondBold.woff") format("woff");
}
/* Bold itlaic */
@font-face {
font-weight: bold; /* or 700 */
font-style: italic;
font-family: MetaWeb;
src: url("../fonts/MetaWeb-CondBoldItalic.woff") format("woff");
}
/* ------------------------------------ *\
#SETTINGS-RESPONSIVE
\* ------------------------------------ */
/**
* Hold our breakpoint aliases and conditions in a list.
*
* These can be invoked later on via `@media (--palm) {...}`
*/
@custom-media --palm screen and (max-width: 44.9375em);
@custom-media --lap screen and (min-width: 45em) and (max-width: 63.9375em);
@custom-media --lap-and-up screen and (min-width: 45em);
@custom-media --portable screen and (max-width: 63.9375em);
@custom-media --desk screen and (min-width: 64em);
@custom-media --retina (min-resolution: 192dpi),
(min-resolution: 2dppx);
@custom-media --print print;
/**
* TOOLS
*/
/* ------------------------------------ *\
#MIXINS
\* ------------------------------------ */
/**
* Mor readable bodytext
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
@define-mixin font-bodytext {
font-variant-ligatures: common-ligatures, contextual;
font-variant-numeric: oldstyle-nums, proportional-nums;
font-feature-settings: "kern", "liga", "clig", "calt", "onum", "pnum";
font-kerning: normal;
}
/**
* Mor readable headings
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
@define-mixin font-headings {
font-variant-ligatures: common-ligatures, contextual,
discretionary-ligatures;
font-feature-settings: "kern", "liga", "clig", "calt", "dlig";
font-kerning: normal;
}
/**
* More readable sub text
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
@define-mixin font-sub {
font-variant-ligatures: common-ligatures, contextual;
font-variant-position: sub;
font-feature-settings: "kern", "liga", "clig", "calt", "subs";
font-kerning: normal;
}
/**
* OpenType feature for small caps
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
*
* 1. Safari iOs doesn't support `font-feature` so we use `text-transform` to
* make the texte uppercase. http://caniuse.com/#search=font-feature
*/
@define-mixin font-small-caps {
font-variant-ligatures: common-ligatures, contextual;
font-variant-numeric: oldstyle-nums, proportional-nums;
font-variant-caps: all-small-caps;
font-feature-settings: "kern", "liga", "clig", "calt", "onum", "pnum",
"smcp", "c2sc";
font-kerning: normal;
text-transform: uppercase; /* [1] */
}
/**
* OpenType feature for data
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
@define-mixin font-data {
font-variant-ligatures: common-ligatures, contextual;
font-variant-numeric: lining-nums, tabular-nums;
font-feature-settings: "kern", "liga", "clig", "calt", "lnum", "tnum";
font-kerning: normal;
}
/* ------------------------------------ *\
    #CLEARFIX
\* ------------------------------------ */
/**
* Mixin to drop micro clearfix into a selector. Further reading:
* http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
*
* .usage {
* @mixin clearfix;
* }
*/
@define-mixin clearfix {
&::after {
display: block !important;
clear: both !important;
content: "" !important;
}
}
/**
* GENERIC
*/
/* ------------------------------------ *\
#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 {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
display: block;
}
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template, /* 1 */
[hidden] {
display: none;
}
/* Links
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* Forms
========================================================================== */
/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font: inherit; /* 1 */
margin: 0; /* 2 */
}
/**
* Restore the font weight unset by the previous rule.
*/
optgroup {
font-weight: bold;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* ------------------------------------ *\
#RESET
\* ------------------------------------ */
/**
* A very simple reset that sits on top of Normalize.css.
*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
dd,
ol,
ul,
figure,
hr,
fieldset,
legend {
margin: 0;
padding: 0;
}
/**
* Remove trailing margins from nested lists.
*/
li > {
ol,
ul {
margin-bottom: 0;
}
}
/**
* Remove default table spacing.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ------------------------------------ *\
#SHARED
\* ------------------------------------ */
/**
* Shared declarations for certain elements.
*/
/**
* Always declare margins in the same direction:
* csswizardry.com/2012/06/single-direction-margin-declarations
*/
address,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre
dl,
ol,
ul,
figure,
hr,
table,
fieldset {
margin-bottom: var(--global-spacing-unit);
}
/**
* Consistent indentation for lists.
*/
dd, ol, ul {
margin-left: calc(2 * var(--global-spacing-unit));
}
/**
* ELEMENTS
*/
/* ------------------------------------ *\
#PAGE
\* ------------------------------------ */
/**
* High-, page-level styling.
*
* 1. Ensure the page always fills at least the entire height of the viewport.
* 2. Set the default `font-size` and `line-height` for the entire project,
* sourced from our default variables. The `font-size` is calculated to exist
* in rems, the `line-height` is calculated to exist unitlessly.
* 3. Set the standards opentype features for a more readable text.
* See http://practice.typekit.com/lesson/caring-about-opentype-features/
* 4. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
* navigating between pages that do/do not have enough content to produce
* scrollbars naturally.
* 5. Use webfont only when it's loaded to avoid FOIT
*/
html {
min-height: 100%; /* [1] */
font-size: var(--global-font-size); /* [2] */
font-weight: var(--global-font-weight);
font-family: var(--global-font-family);
font-variant-ligatures: common-ligatures, contextual; /* [3] */
font-feature-settings: "kern", "liga", "clig", "calt"; /* [3] */
font-kerning: normal; /* [3] */
line-height: var(--global-line-height); /* [1] */
color: var(--global-text-color);
text-rendering: optimizeLegibility;
overflow-y: scroll; /* [4] */
&.wf-metaserifweb-n4-active {
font-weight: var(--enhance-global-font-weight-regular); /* [5] */
font-family: var(--enhance-global-font-family); /* [5] */
}
}
/* ------------------------------------ *\
#HEADINGS
\* ------------------------------------ */
/**
* Headings 1–6.
*
* Simple default styles for headings 1 through 6. Anything more opinionated
* than simple font-size changes should likely be applied via classes (see:
* http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
*
* 1. Use webfont only when it's loaded to avoid FOIT
*/
:root {
--typographic-ratio: 1.26;
/* h1 */
--heading-size-1: calc(
1rem
* var(--typographic-ratio)
* var(--typographic-ratio)
* var(--typographic-ratio)
);
--heading-line-height-1: calc(
var(--global-line-height)
/ var(--typographic-ratio)
);
/* h2 */
--heading-size-2: calc(
1rem
* var(--typographic-ratio)
* var(--typographic-ratio)
);
--heading-line-height-2: calc(
var(--global-line-height)
/ var(--typographic-ratio)
);
/* h3 */
--heading-size-3: calc( 1rem * var(--typographic-ratio) );
--heading-line-height-3: calc(
var(--global-line-height)
/ var(--typographic-ratio)
);
/* h4 */
--heading-size-4: 1rem;
--heading-line-height-4: var(--global-line-height);
/* h5 */
--heading-size-5: calc( 1rem / var(--typographic-ratio) );
--heading-line-height-5: var(--global-line-height);
/* h6 */
--heading-size-6: calc( 1rem / var(--typographic-ratio) );
--heading-line-height-6: var(--global-line-height);
}
h1 {
font-size: var(--heading-size-1);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-1);
}
h2 {
font-size: var(--heading-size-2);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-2);
}
h3 {
font-size: var(--heading-size-3);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-3);
}
h4 {
font-size: var(--heading-size-4);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-4);
}
h5 {
font-size: var(--heading-size-5);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-5);
}
h6 {
font-size: var(--heading-size-6);
font-weight: var(--heading-font-weight-regular);
line-height: var(--heading-line-height-6);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--heading-font-family);
@mixin font-headings;
}
.wf-metaweb-n7-active {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--enhance-heading-font-family); /* [1] */
}
h1,
h2,
h3,
h4,
h5 {
font-weight: var(--enhance-heading-font-weight-bold);
}
h6 {
font-weight: var(--enhance-heading-font-weight-regular);
}
}
/* ------------------------------------ *\
#PARAGRAPH
\* ------------------------------------ */
p {
@mixin font-bodytext;
}
/**
* The `.lede` class is used to make the introductory text (usually a paragraph)
* of a document slightly larger: en.wikipedia.org/wiki/Lede_(news)
*/
:root {
--lede-size: 1.26;
}
.lede {
font-size: calc( 1rem * var(--lede-size) );
}
/* ------------------------------------ *\
#SMALL
\* ------------------------------------ */
/**
* Small text
*/
:root{
--small-font-size: var(--global-small-font-size);
--small-font-family: var(--global-font-family);
--enhance-small-font-family: var(--enhance-global-font-family);
}
@define-mixin small $class,
$font-size: var(--small-font-size),
$font-family: var(--small-font-family),
$enhance-font-family: var(--enhance-small-font-family) {
/**
* <<$(class)>>
*
* 1. Use webfont only when it's loaded to avoid FOIT
*/
$(class) {
font-size: $font-size;
font-family: $font-family;
}
.wf-active $(class) {
font-family: $enhance-font-family; /* [1] */
}
}
@mixin small small;
/* ------------------------------------ *\
#STRONG
\* ------------------------------------ */
/**
* Strong
*/
b,
strong {
font-weight: bold;
}
/**
* Strong weight
*
* 1. Enhance webfont use 700 for strong text.
*/
.wf-active b,
.wf-active strong {
font-weight: var(--enhance-global-font-weight-bold);
}
/* ------------------------------------ *\
#SUBS
\* ------------------------------------ */
/**
* Subscript Element
*
* 1. Override normalize.css if font with subscript features is loaded.
*/
sub {
@mixin font-sub;
}
.wf-active sub {
bottom: 0; /* [1] */
font-size: 100%; /* [1] */
}
/* ------------------------------------ *\
#LISTS
\* ------------------------------------ */
/**
* Remove extra vertical spacing when nesting lists.
*
* 1. Without it, if there's buttons in the list, they would be collapsed.
*/
li {
@mixin font-bodytext;
margin-bottom: var(--global-spacing-unit--tiny); /* [1] */
}
/* ------------------------------------ *\
#LINK
\* ------------------------------------ */
:root {
--link-color: var(--color-base);
--link-hover-color: var(--color-focus);
--link-visited-color: var(--color-visited);
--link-color-transition: var(--transition);
}
a {
color: var(--link-color);
transition: var(--transition);
}
a:hover,
a:focus,
a:active {
color: var(--link-hover-color);
transition: var(--transition);
}
a:visited {
color: var(--link-visited-color);
transition: var(--transition);
}
/* ------------------------------------ *\
#SILENT-LINK
\* ------------------------------------ */
/**
* Link without visual modification.
*/
.silent-link {
text-decoration: none;
transition: var(--transition);
}
/* ------------------------------------ *\
#IMAGES
\* ------------------------------------ */
/**
* 1. Fluid images for responsive purposes.
* 2. Offset `alt` text from surrounding copy.
* 3. Setting `vertical-align` removes the whitespace that appears under `img`
* elements when they are dropped into a page as-is. Safer alternative to
* using `display: block;`.
*/
img {
max-width: 100%; /* [1] */
font-style: italic; /* [2] */
vertical-align: middle; /* [3] */
}
/**
* 1. If a `width` and/or `height` attribute have been explicitly defined, let’s
* not make the image fluid.
*/
img[width], /* [1] */
img[height] { /* [1] */
max-width: none;
}
/* ------------------------------------ *\
#TABLES
\* ------------------------------------ */
/**
* 1. Ensure tables fill up as much space as possible.
*/
table {
width: 100%; /* [1] */
}
/**
* Enable OpenType features to make more readable data
* More info here:
* http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
td {
@mixin font-data;
}
/* ------------------------------------ *\
#FIGURES
\* ------------------------------------ */
/**
* Reset default margins.
*/
figure {
margin-right: 0;
margin-left: 0;
}
/* ------------------------------------ *\
#QUOTES
\* ------------------------------------ */
:root {
--blockquote-text-color: var(--global-text-color);
--blockquote-left-margin: var(--global-spacing-unit--large);
--blockquote-border-width: calc(var(--global-spacing-unit--tiny) / 2);
--blockquote-border-color: var(--blockquote-text-color);
--blockquote-border-style: solid;
}
/**
* Blockquote
*
* 1. Unicode for En dash and Space.
*/
blockquote {
font-style: italic;
border-left: var(--blockquote-border-width)
var(--blockquote-border-color)
var(--blockquote-border-style);
margin-left: @padding-left;
padding-left: calc( var(--blockquote-left-margin) / 2 );
}
blockquote cite::before {
content: "\2013\0020"; /* [1] */
}
/**
* Inline quotations and source citations
*/
cite,
q {
font-style: italic;
}
/* ------------------------------------ *\
#ABBREVIATION
\* ------------------------------------ */
/**
* Better `<abbr>`
*
* 1. Make `<abbr>` more readable.
* see http://practice.typekit.com/lesson/caring-about-opentype-features/
* 2. Display title attribute value if the device's primary input does not
* have hover
*/
:root{
--abbr-font-size: var(--global-small-font-size);
}
abbr {
@mixin font-small-caps; /* [1] */
}
@media (hover: none) {
abbr::after {
font-size: var(--abbr-font-size); /* [2] */
/* stylelint-disable function-whitespace-after */
content: " ("attr(title)")"; /* [2] */
/* stylelint-enable function-whitespace-after */
}
}
/* ------------------------------------ *\
#CODE
\* ------------------------------------ */
:root {
--code-text-background: var(--color-gray-lighter);
}
/**
* Code, preformated text and other robotic styles
*/
code,
pre {
font-size: var(--monospaced-font-size);
font-family: var(--monospaced-font-family);
letter-spacing: normal;
white-space: pre;
word-spacing: normal;
tab-size: 4;
cursor: text;
}
/**
* Inline computer text style
*
* 1. `<code>` inside a `<pre>` has no background. This avoid alpha color
* overlay.
*/
code {
background: var(--code-text-background);
}
pre > code {
background: none; /* [1] */
}
tt, code, kbd, samp {
font-family: var(--monospaced-font-family);
}
/* ------------------------------------ *\
#HORIZONTALE RULES
\* ------------------------------------ */
/**
* Horizontale rules
*/
:root{
--hr-color: var(--color-gray-light);
}
hr {
height: 1px;
background: var(--hr-color);
border: 0;
}
/* ------------------------------------ *\
#SELECTIONS
\* ------------------------------------ */
/**
* Selections color
*
* Overrides browser-level or system-level text highlight color.
*/
:root {
--color-selection: var(--color-focus);
}
::selection {
background: var(--color-selection);
}
/**
* OBJECTS
*/
/* ------------------------------------ *\
#WRAPPERS
\* ------------------------------------ */
:root {
--wrapper-width: 64rem; /* 1024px */
--wrapper-padding: var(--global-spacing-unit--tiny);
}
/**
* Container
*
* 1. Center horizontaly
*/
.o-wrapper {
@mixin clearfix;
max-width: var(--wrapper-width);
margin-right: auto; /* [1] */
margin-left: auto; /* [1] */
padding-right: var(--global-spacing-unit--tiny);
padding-left: var(--global-spacing-unit--tiny);
@media (--lap-and-up) {
padding-right: var(--global-spacing-unit);
padding-left: var(--global-spacing-unit);
}
}
/**
* Container offset
*
* Get out of the container
*/
.o-wrapper--offset {
margin-right: -var(--global-spacing-unit--tiny);
margin-left: -var(--global-spacing-unit--tiny);
@media (--lap-and-up) {
margin-right: -var(--global-spacing-unit);
margin-left: -var(--global-spacing-unit);
}
}
/* ------------------------------------ *\
#LIST-BARE
\* ------------------------------------ */
/**
* The o-list-bare object simply removes any indents and bullet points from
* lists.
*/
.o-list-bare {
margin-left: 0;
list-style: none;
}
/* ------------------------------------ *\
#LIST-INLINE
\* ------------------------------------ */
/**
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin-left: 0;
list-style: none;
&__item {
display: inline-block;
}
}
/* ------------------------------------ *\
#LAYOUT
\* ------------------------------------ */
:root {
--layout-gutter: var(--global-spacing-unit--small);
}
/**
* The layout is based on lost framework
* https://github.com/corysimmons/lost
*/
@lost gutter 1rem;
/**
* Layout
*/
.o-layout {
lost-flex-container: row;
}
/**
* Layout items
*
* 1. Add gutter on the right of all elements
* 2. Last element of the row hase no gutter on the right
*/
@for $flex-grow from 1 to 3 {
/* Layout extensible diemension */
.o-layout__item--flex-$(flex-grow) {
flex: $flex-grow;
&:nth-child(1n) {
margin-right: var(--layout-gutter); /* [1] */
margin-left: 0; /* [1] */
}
&:last-child {
margin-right: 0; /* [2] */
}
}
}
/**
* Flex item ordering
*
* 1. Put item as the last one
*/
@for $i from 1 to 6 {
.o-layout__item--order-$i {
order: $(i);
}
}
.o-layout__item--order-last {
order: 99; /* [1] */
}
@media (--lap-and-up) {
@for $i from 1 to 6 {
.o-layout__item--lap-and-up--order-$i {
order: $(i);
}
}
.o-layout__item--order-last\@lap-and-up {
order: 99; /* [1] */
}
}
/**
* Items with fixed width
*/
/* Default items size (on palm) */
.o-layout__item--1-1,
.o-layout__item--1-2,
.o-layout__item--1-3,
.o-layout__item--2-3,
.o-layout__item--1-4,
.o-layout__item--3-4 {
lost-column: 1/1 flex;
}
.o-layout__item--1-6,
.o-layout__item--5-6,
.o-layout__item--1-12 {
lost-column: 1/2 flex;
}
/* Items size on lap and up */
@media (--lap-and-up) {
.o-layout__item--1-2,
.o-layout__item--1-4,
.o-layout__item--3-4,
.o-layout__item--1-2\@lap-and-up {
lost-column: 1/2 flex;
}
.o-layout__item--1-3,
.o-layout__item--1-6,
.o-layout__item--1-3\@lap-and-up {
lost-column: 1/3 flex;
}
.o-layout__item--2-3,
.o-layout__item--5-6,
.o-layout__item--2-3\@lap-and-up {
lost-column: 2/3 2 flex;
}
.o-layout__item--1-12,
.o-layout__item--1-4\@lap-and-up {
lost-column: 1/4 flex;
}
.o-layout__item--3-4\@lap-and-up {
lost-column: 3/4 flex;
}
}
/* Items size on desk and up */
@media (--desk) {
.o-layout__item--1-4 {
lost-column: 1/4 flex;
}
.o-layout__item--3-4 {
lost-column: 3/4 2 flex;
}
.o-layout__item--1-6 {
lost-column: 1/6 flex;
}
.o-layout__item--5-6 {
lost-column: 5/6 2 flex;
}
.o-layout__item--1-12 {
lost-column: 1/12 flex;
}
}
/**
* Move items
*/
@for $fraction from 1 to 12 {
.o-layout__item--move--$(fraction)-12 {
lost-move: $fraction/12;
}
.o-layout__item--move---$(fraction)-12 {
lost-move: -$fraction/12;
}
}
@each $query, $breakpoint in (--palm, --lap, --lap-and-up, --portable, --desk),
(palm, lap, lap-and-up, portable, desk) {
@media ($(query)) {
@for $fraction from 1 to 12 {
.o-layout__item--move--$(fraction)-12\@$(breakpoint) {
lost-move: $fraction/12;
}
.o-layout__item--move---$(fraction)-12\@$(breakpoint) {
lost-move: -$fraction/12;
}
}
}
}
/* ------------------------------------ *\
#BOX
\* ------------------------------------ */
/**
* The box object simply boxes off content.
*/
:root {
--box-padding: var(--global-spacing-unit);
}
/**
* 1. So we can apply the `.box` class to naturally-inline elements.
* 2. Clearfix
*/
.o-box {
display: block; /* [1] */
padding: var(--box-padding);
@mixin clearfix;
> :last-child {
margin-bottom: 0;
}
}
/* ------------------------------------ *\
#TABLES
\* ------------------------------------ */
:root {
--table-border-width: 1px;
--table-border-style: solid;
--table-border-color: var(--global-text-color);
--table-padding: calc(var(--global-spacing-unit) / 4);
--table-padding--cosy: calc(var(--global-spacing-unit) / 2);
--table-padding--comfy: calc(var(--global-spacing-unit));
--table-background-color: var(--color-gray-light);
}
/**
* Table default layout
*
* 1. Allow the table to scroll horizontally
* 2. Reset scroll horizontally for mobile
*/
.o-table {
display: block; /* [1] */
width: 100%;
border-collapse: collapse;
overflow-x: auto; /* [1] */
thead,
tfoot {
background-color: var(--table-background-color);
}
th,
td {
border: var(--table-border-width)
var(--table-border-style)
var(--table-border-color);
padding: var(--table-padding);
}
@media (--lap-and-up) {
display: table; /* [2] */
overflow-x: visible; /* [2] */
}
}
/**
* Add borders only to `table`’s rows.
*/
.o-table--borderless {
&,
th,
td {
border: 0 var(--table-border-style) var(--table-border-color);
}
thead,
tfoot {
background-color: transparent;
}
}
.table--borderless {
border-top-width: var(--table-border-width);
th,
td {
border-bottom-width: var(--table-border-width);
}
}
/**
* COMPONENTS
*/
/* ------------------------------------ *\
#BUTTONS
\* ------------------------------------ */
:root {
/* Colors */
--button-background: var(--color-primary);
--button-color: var(--color-white);
/* Hover */
--button-background-hover: var(--color-black);
--button-color-hover: var(--button-color);
/* Active */
--button-background-active: var(--color-base);
--button-color-active: var(--button-color);
/* UI */
--button-padding: calc(var(--global-spacing-unit) / 2);
--button-border-width: 1px;
--button-border-style: none;
--button-border-color: var(--color-base);
--button-border-radius: calc(var(--global-spacing-unit) / 8);
}
/**
* 1. Allow us to style box model properties.
* 2. Make buttons inherit font styles (often necessary when styling `input`s
* as buttons).
* 3. Reset/normalize some styles.
* 4. Subtract the border size from the padding value so that buttons do not
* grow larger as we add borders.
* 5. Line different sized buttons up a little nicer.
* 6. Fixes odd inner spacing in IE7.
* 7. Force all button-styled elements to appear clickable.
* 8. Hover state color
* 9. Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
*/
@define-mixin button {
display: inline-block; /* [1] */
font: inherit; /* [2] */
font-weight: 700;
text-align: center; /* [3] */
background-color: var(--button-background);
border: var(--button-border-width)
var(--button-border-style)
var(--button-border-color);
border-radius: var(--button-border-radius);
margin: 0; /* [3] */
padding: calc(var(--button-padding) - var(--button-border-width))
calc(var(--button-padding) * 2 - var(--button-border-width)); /* [4] */
vertical-align: middle; /* [5] */
overflow: visible; /* [6] */
cursor: pointer; /* [7] */
&,
&:hover,
&.is-hover,
&:active,
&.is-active,
&:focus
&.is-focus {
color: var(--button-color);
text-decoration: none; /* [3] */
}
&:hover,
&.is-hover {
color: var(--button-color-hover);
background-color: var(--button-background-hover); /* [8] */
}
&:active,
&.is-active {
color: var(--button-color-active);
background-color: var(--button-background-active); /* [8] */
}
&:focus,
&.is-focus {
box-shadow: 0 0 3px var(--color-focus), 0 0 7px var(--color-focus);
}
&::-moz-focus-inner {
border: 0; /* [9] */
padding: 0; /* [9] */
}
}
.c-button {
@mixin button;
}
/**
* Use fonts only when loaded
*/
.wf-active [class^="vd-c-button"] {
font-family: var(--enhance-heading-font-family);
}
/**
* State buttons
*
* Color variations
*/
@define-mixin button,
$text-color,
$background-color,
$text-color-hover,
$background-color-hover,
$text-color-active,
$backgroundcolor-active {
color: $text-color;
background-color: $background-color;
&:hover,
&.is-hover {
color: $text-color-hover;
background-color: $background-color-hover;
}
&:active,
&.is-active {
color: $text-color-active;
background-color: $backgroundcolor-active;
}
}
/* Button secondary */
:root {
--button-text-color-secondary: var(--button-color);
--button-background-color-secondary: var(--color-gray-light);
--button-text-color-secondary-hover: var(--button-color);
--button-background-color-secondary-hover: var(--button-background-hover);
--button-text-color-secondary-active: var(--color-white);
--button-background-color-secondary-active: var(--color-base);
}
@define-mixin button--secondary {
@mixin button,
var(--button-text-color-secondary),
var(--button-background-color-secondary),
var(--button-text-color-secondary-hover),
var(--button-background-color-secondary-hover),
var(--button-text-color-secondary-active),
var(--button-background-color-secondary-active);
}
.c-button--secondary {
@mixin button--secondary;
}
/* Button transparent */
:root {
--button-text-color-transparent: inherit;
--button-background-color-transparent: inherit;
--button-text-color-transparent-hover: inherit;
--button-background-color-transparent-hover: inherit;
--button-text-color-transparent-active: inherit;
--button-background-color-transparent-active: inherit;
}
@define-mixin button--transparent {
@mixin button,
inherit,
var(--button-background-color-transparent),
var(--button-text-color-transparent-hover),
var(--button-background-color-transparent-hover),
var(--button-text-color-transparent-active),
var(--button-background-color-transparent-active);
}
.c-button--transparent {
@mixin button--transparent;
}
/* Button disabled */
:root {
--button-text-color-disabled: inherit;
--button-background-color-disabled: var(--color-gray-light);
}
.c-button--disabled,
[type="submit"][disabled] {
&,
&:hover,
&:focus,
&:active {
color: var(--button-text-color-disabled);
background-color: var(--button-background-color-disabled);
cursor: not-allowed;
}
}
/**
* Size of buttons
*
* Size variation
*/
@define-mixin button--block {
display: block;
width: 100%;
}
.c-button--block {
@mixin button--block;
}
/* ------------------------------------ *\
#FORMS
\* ------------------------------------ */
:root {
--form-spacing: var(--global-spacing-unit);
--form-active-color: var(--color-primary-alt);
--form-text-color: var(--color-base);
--form-background-color: var(--color-gray-lighter);
--form-page-background-color: var(--color-white);
--form-border-color: var(--color-gray-light);
--form-border-radius: .25rem;
}
/*
* WTF, forms?
* Released under MIT and copyright 2014 Mark Otto.
* http://wtfforms.com
*
* Embedded icons from Open Iconic.
* Released under MIT and copyright 2014 Waybury.
* http://useiconic.com/open
*/
/*
* Checkboxes and radios
*
* 1. Put the input behind the label so it doesn't overlay text
*/
.c-form-control {
position: relative;
display: inline-block;
color: var(--form-text-color);
padding-left: var(--form-spacing);
cursor: pointer;
input {
position: absolute;
z-index: -1;
opacity: 0;
}
&__indicator {
position: absolute;
top: var(--form-border-radius);
left: 0;
display: block;
width: 1rem;
height: 1rem;
font-size: 65%;
line-height: 1rem;
color: var(--form-background-color);
text-align: center;
background-color: var(--form-background-color);
background-size: 50% 50%;
background-position: center center;
background-repeat: no-repeat;
user-select: none;
}
}
/* Hover state */
/* Uncomment if you need it, but be aware of the sticky iOS states.
.c-form-control:hover .c-form-control__indicator {
color: var(--form-page-background-color);
background-color: #ccc;
}
*/
/**
* States
*
* 1. Focus
* 2. Checked
* 3. Active
*/
.c-form-control input {
&:focus ~ .c-form-control__indicator {
box-shadow:
0 0 0 .075rem var(--form-page-background-color),
0 0 0 .2rem var(--form-active-color); /* [1] */
}
&:checked ~ .c-form-control__indicator {
color: var(--form-page-background-color); /* [2] */
background-color: var(--form-active-color); /* [2] */
}
&:active ~ .c-form-control__indicator {
color: var(--form-page-background-color); /* [3] */
background-color: var(--form-active-color); /* [3] */
}
}
/* Checkbox modifiers */
.c-checkbox .c-form-control__indicator {
border-radius: var(--form-border-radius);
}
.c-checkbox input:checked ~ .c-form-control__indicator {
/* stylelint-disable function-url-quotes */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
/* stylelint-enable function-url-quotes */
}
/* Radio modifiers */
.c-radio .c-form-control__indicator {
border-radius: 50%;
}
.c-radio input:checked ~ .c-form-control__indicator {
/* stylelint-disable function-url-quotes */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
/* stylelint-enable function-url-quotes */
}
/* Alternately, use another character */
.c-form-control-x input:checked ~ .c-form-control__indicator {
/* stylelint-disable function-url-quotes */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjQsMEwwLDEuNGwwLjcsMC43bDEuOCwxLjhMMC43LDUuN0wwLDYuNGwxLjQsMS40bDAuNy0wLjdsMS44LTEuOGwxLjgsMS44bDAuNywwLjdsMS40LTEuNEw3LjEsNS43DQoJTDUuMywzLjlsMS44LTEuOGwwLjctMC43TDYuNCwwTDUuNywwLjdMMy45LDIuNUwyLjEsMC43QzIuMSwwLjcsMS40LDAsMS40LDB6Ii8+DQo8L3N2Zz4NCg==);
/* stylelint-enable function-url-quotes */
}
.c-form-control-dash input:checked ~ .c-form-control__indicator {
/* stylelint-disable function-url-quotes */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
/* stylelint-enable function-url-quotes */
}
/*
* Select
*
* 1. Undo the Firefox inner focus ring
* 2. Dropdown arrow
*/
.c-select {
position: relative;
display: inline-block;
color: var(--form-text-color);
select {
display: inline-block;
width: 100%;
line-height: 1.5;
color: var(--form-text-color);
background-color: var(--form-background-color);
border: 0;
border-radius: var(--form-border-radius);
margin: 0;
padding: .5rem 2.25rem .5rem 1rem;
cursor: pointer;
outline: 0;
appearance: none;
&:focus:-moz-focusring {
color: transparent; /* [1] */
text-shadow: 0 0 0 rgba(0, 0, 0, 1); /* [1] */
}
}
&::after { /* [2] */
position: absolute;
top: 50%;
right: 1var(--form-border-radius);
display: inline-block;
width: 0;
height: 0;
border-top: .35rem solid;
border-right: .35rem solid transparent;
border-bottom: .35rem solid transparent;
border-left: .35rem solid transparent;
margin-top: -.15rem;
content: "";
pointer-events: none;
}
}
/* Hover state */
/* Uncomment if you need it, but be aware of the sticky iOS states.
.c-select select:hover {
background-color: var(--form-border-color);
}
*/
/**
* States
*
* 1. Focus
* 2. Active/open
* 3. Hide the arrow in IE10 and up
*/
.c-select select {
&:focus {
box-shadow:
0 0 0 .075rem var(--form-page-background-color),
0 0 0 .2rem var(--form-active-color); /* [1] */
}
&:active {
color: var(--form-page-background-color); /* [2] */
background-color: var(--form-active-color); /* [2] */
}
&::-ms-expand {
display: none; /* [3] */
}
}
/* Media query to target Firefox only */
@-moz-document url-prefix("") {
/* Firefox hack to hide the arrow */
.c-select select {
text-indent: .01px;
text-overflow: "";
padding-right: 1rem;
}
/* <option> elements inherit styles from <select>, so reset them. */
.c-select option {
background-color: var(--form-page-background-color);
}
}
/* IE9 hack to hide the arrow */
@media screen and (min-width: 0\0) {
.c-select select {
z-index: 1;
padding: .5rem var(--form-spacing) .5rem 1rem;
}
.c-select::after {
z-index: 5;
}
.c-select::before {
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
z-index: 2;
display: block;
width: var(--form-spacing);
background-color: var(--form-background-color);
content: "";
}
.c-select select:hover,
.c-select select:focus,
.c-select select:active {
color: var(--form-text-color);
background-color: var(--form-background-color);
}
}
/*
* File
*/
.file {
position: relative;
display: inline-block;
height: 2.5rem;
cursor: pointer;
input {
min-width: 14rem;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
}
&--custom {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 5;
height: 2.5rem;
line-height: 1.5;
color: var(--form-text-color);
background-color: var(--form-page-background-color);
border: .075rem solid var(--form-border-color);
border-radius: var(--form-border-radius);
padding: .5rem 1rem;
box-shadow: inset 0 .2rem .4rem rgba(0, 0, 0, .05);
user-select: none;
&::after {
content: "Choose file...";
}
&::before {
position: absolute;
top: -.075rem;
right: -.075rem;
bottom: -.075rem;
z-index: 6;
display: block;
height: 2.5rem;
line-height: 1.5;
color: var(--form-text-color);
background-color: var(--form-background-color);
border: .075rem solid var(--form-border-color);
border-radius:
0 var(--form-border-radius)
var(--form-border-radius)
0;
padding: .5rem 1rem;
content: "Browse";
}
}
}
/* Focus */
.file input:focus ~ .file--custom {
box-shadow:
0 0 0 .075rem var(--form-page-background-color),
0 0 0 .2rem var(--form-active-color);
}
/*
* Progress
*
* 1. IE10 uses `color` to set the bar background-color
* 2. Remove Firefox and Opera border
* 3. Reset the default appearance
*/
.c-progress {
display: inline-block;
height: 1rem;
&[value] {
color: var(--form-active-color); /* [1] */
border: 0; /* [2] */
appearance: none; /* [3] */
&::-webkit-progress-bar {
background-color: var(--form-background-color);
border-radius: .2rem;
}
&::-webkit-progress-value {
background-color: var(--form-active-color);
border-top-left-radius: .2rem;
border-bottom-left-radius: .2rem;
}
}
&[value="100"]::-webkit-progress-value {
border-top-right-radius: .2rem;
border-bottom-right-radius: .2rem;
}
}
/* Firefox styles must be entirely separate or it busts Webkit styles. */
@-moz-document url-prefix("") {
.c-progress[value] {
background-color: var(--form-background-color);
border-radius: .2rem;
}
.c-progress[value]::-moz-progress-bar {
background-color: var(--form-active-color);
border-top-left-radius: .2rem;
border-bottom-left-radius: .2rem;
}
.c-progress[value="100"]::-moz-progress-bar {
border-top-right-radius: .2rem;
border-bottom-right-radius: .2rem;
}
}
/* IE9 hacks to accompany custom markup. We don't need to scope this via media
queries, but I feel better doing it anyway. */
@media screen and (min-width: 0\0) {
.c-progress {
background-color: var(--form-background-color);
border-radius: .2rem;
}
.c-progress-bar {
display: inline-block;
height: 1rem;
text-indent: -999rem; /* Simulate hiding of value as in native
`<progress>` */
background-color: var(--form-active-color);
border-top-left-radius: .2rem;
border-bottom-left-radius: .2rem;
}
.c-progress[width="100%"] {
border-top-right-radius: .2rem;
border-bottom-right-radius: .2rem;
}
}
/*
* Control layouts
*/
.c-form-controls {
&--stacked {
margin: 1rem 0;
.c-form-control,
.c-progress {
display: block;
}
.c-form-control + .c-form-control,
.c-progress + .c-progress {
margin-top: .5rem;
}
}
&--inline {
margin: 1rem 0;
.c-form-control {
display: inline-block;
height: 1rem;
+ .c-form-control {
margin-left: 1rem;
}
}
}
}
/* ------------------------------------ *\
#NAVBAR
\* ------------------------------------ */
/**
* Navbar
*
* If the navbare use list, be sure to remove list styles. Use a classe like
* `.o-list-bare`.
*
* 1. Only the first element is align on the left
* 2. Size of the logo. On palm, it's the same size of a button .
* 3. positionning the text aside of the logo
*/
.c-navbar {
display: flex;
flex-wrap: wrap;
> :nth-child(1) {
margin-right: auto; /* [1] */
}
}
.c-navbar__logo {
@media (--lap-and-up) {
display: flex; /* [3] */
}
source,
img {
height: calc(
var(--button-padding)
+ var(--button-border-width)
+ 1rem
+ var(--button-border-width)
+ var(--button-padding)
); /* [2] */
@media (--lap-and-up) {
height: 4rem; /* [2] */
}
}
}
.c-navbar__site-title {
@media (--lap-and-up) {
display: flex; /* [3] */
flex-direction: column; /* [3] */
}
}
/* ------------------------------------ *\
#HEADER
\* ------------------------------------ */
/**
* Set the colors of the header.
*/
:root {
--header-background-color: var(--color-base);
--header-color: var(--color-white);
}
.c-header {
background-color: var(--header-background-color);
&,
a,
a:hover {
color: var(--header-color);
}
}
/**
* Header primary links
*
* 1. Button are buttons only on palm.
* 2. Use enhanced fonts only when loaded.
*/
@media (--palm) {
.c-header-button {
@mixin button; /* [1] */
@mixin button--block; /* [1] */
&--secondary {
@mixin button--secondary;
}
}
.wf-active .c-header-button {
font-family: var(--enhance-heading-font-family); /* [2] */
}
}
/* ------------------------------------ *\
#INLINE TEXTS
\* ------------------------------------ */
/**
* Fractions
*
* Enable OpenType feature for fraction
* More info here:
* http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
.c-fraction {
font-variant-ligatures: common-ligatures, contextual;
font-variant-numeric: diagonal-fractions;
font-feature-settings: "kern", "liga", "clig", "calt", "frac";
font-kerning: normal;
}
/**
* Footnotes
*
* Enable OpenType feature for footnotes
* More info here:
* http://practice.typekit.com/lesson/caring-about-opentype-features/
*/
.c-footnote {
@mixin font-sub;
}
/**
* Small caps
*/
.c-small-caps {
@mixin font-small-caps;
}
/* ------------------------------------ *\
#BOX
\* ------------------------------------ */
:root {
/* UI */
--box-margin-bottom: var(--global-spacing-unit);
/* Colors */
--box-default-background-color: var(--color-gray-light);
--box-transaction-background-color: var(--color-primary-alt);
--box-transaction-text-color: var(--color-white);
/* Info colors */
--box-info-background-color: var(--color-gray-lightest);
}
/**
* Default box UI
*/
.c-box--default {
background-color: var(--box-default-background-color);
margin-bottom: var(--box-margin-bottom);
}
/**
* Transaction confiration UI
*/
.c-box--transaction {
text-align: center;
background-color: var(--box-transaction-background-color);
margin-bottom: var(--box-margin-bottom);
* {
color: var(--box-transaction-text-color);
}
}
.c-box--info {
background-color: var(--box-info-background-color);
margin-bottom: var(--box-margin-bottom);
}
/* ------------------------------------ *\
#BACKGROUNDS
\* ------------------------------------ */
/**
* Add vertical space on items that have a background color.
*
* 1. Remove margin bottom of the last child to avoid double bottom space
* (padding + margin)
*/
.c-background {
padding-top: var(--global-spacing-unit);
padding-bottom: var(--global-spacing-unit);
> :last-child {
margin-bottom: 0;
}
& + :not(.c-background) {
margin-top: var(--global-spacing-unit);
}
}
@each $color in primary,
base,
gray-dark,
gray-light,
gray-lighter,
gray-lightest,
primary,
primary-dark,
primary-light,
primary-lighter,
primary-lightest,
white,
black,
primary-alt,
focus,
visited {
.c-background--$(color) {
background-color: var(--color-$(color));
}
}
/* ------------------------------------ *\
#SMALL
\* ------------------------------------ */
/**
* Small text
*/
@mixin small .c-small;
/* ------------------------------------ *\
#STRONG
\* ------------------------------------ */
/**
* Strong text
*/
.c-strong {
font-weight: bold;
}
.wf-active .c-strong {
font-weight: var(--enhance-global-font-weight-bold);
}
/* ------------------------------------ *\
#QUOTES
\* ------------------------------------ */
/**
* Blockquote class
*/
.c-blockquote {
@extend blockquote;
}
/* ------------------------------------ *\
#PAGE-TITLE
\* ------------------------------------ */
/**
* Put title/text over an image
*
* 1. To avoid collapsed text on a small image, this style only applied on
* palm-and-up viewport
* 2. Position the text at the top
* 3. Position the overlay over the image
* 4. Avoid a problem of overlaping at the bottom of the image
*/
@media (--lap-and-up) { /* [1] */
.c-page-title--image {
position: relative; /* [2] */
color: var(--color-white);
&__over-text {
position: absolute; /* [2] */
top: var(--global-spacing-unit);
padding-left: var(--global-spacing-unit);
}
&__figure {
position: relative; /* [3] */
&::after {
position: absolute; /* [3] */
top: 0; /* [3] */
left: 0; /* [3] */
width: 100%;
height: 100%;
background:
linear-gradient(
rgba(0, 0, 0, .75),
rgba(0, 0, 0, 0)
);
content: "\A";
}
}
&__image {
width: 100%;
vertical-align: top; /* [4] */
}
}
}
/* ------------------------------------ *\
#BREADCRUMP
\* ------------------------------------ */
/**
* Breadcrumb
*
* 1. Only show the last element on mobile
*/
.c-breadcrumb {
@media (--palm) {
> li:not(:last-child) {
display: hidden; /* [1] */
}
}
> li::before {
content: "< ";
}
}
/* ------------------------------------ *\
#IMAGES
\* ------------------------------------ */
/**
* Perfect circle
*/
.c-image-circle {
border-radius: 50%;
}
/* ------------------------------------ *\
#LIST-ABBREVIATIONS
\* ------------------------------------ */
.c-list-abbreviations {
abbr {
@mixin font-headings;
font-variant-caps: normal;
&[title] {
text-decoration: none;
}
&::after {
@mixin font-bodytext;
display: block;
font-size: var(--global-font-size);
font-variant-caps: initial;
color: var(--color-gray-light);
text-transform: none;
/* stylelint-disable function-whitespace-after */
content: attr(title); /* [2] */
/* stylelint-enable function-whitespace-after */
}
}
}
/**
* UTILITIES
*/
/* ------------------------------------ *\
#CLEARFIX
\* ------------------------------------ */
/**
* Micro clearfix. Further reading:
* http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
*
*/
.u-clearfix {
@mixin clearfix;
}
/* ------------------------------------ *\
#HEADINGS
\* ------------------------------------ */
/**
* Redefine all of our basic heading styles against utility classes so as to
* allow for double stranded heading hierarchy, e.g. we semantically need an H2,
* but we want it to be sized like an H1:
*
* <h2 class="u-h1"></h2>
*
*/
.u-h1 {
font-size: var(--heading-size-1);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-1);
}
.u-h2 {
font-size: var(--heading-size-2);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-2);
}
.u-h3 {
font-size: var(--heading-size-3);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-3);
}
.u-h4 {
font-size: var(--heading-size-4);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-4);
}
.u-h5 {
font-size: var(--heading-size-5);
font-weight: var(--heading-font-weight-bold);
line-height: var(--heading-line-height-5);
}
.u-h6 {
font-size: var(--heading-size-6);
font-weight: var(--heading-font-weight-regular);
line-height: var(--heading-line-height-6);
}
.u-h1,
.u-h2,
.u-h3,
.u-h4,
.u-h5,
.u-h6 {
font-family: var(--heading-font-family);
@mixin font-headings;
}
.wf-metaweb-n7-active {
.u-h1,
.u-h2,
.u-h3,
.u-h4,
.u-h5,
.u-h6 {
font-family: var(--enhance-heading-font-family); /* [1] */
}
.u-h1,
.u-h2,
.u-h3,
.u-h4,
.u-h5 {
font-weight: var(--enhance-heading-font-weight-bold);
}
.u-h6 {
font-weight: var(--enhance-heading-font-weight-regular);
}
}
/* ------------------------------------ *\
#COLORS
\* ------------------------------------ */
/**
* Set text color
*
* Be sure that the contrast meet the standard of accessibility.
*/
@each $color in primary,
base,
gray-dark,
gray-light,
gray-lighter,
gray-lightest,
primary,
primary-dark,
primary-light,
primary-lighter,
primary-lightest,
white,
black,
primary-alt,
focus,
visited {
.u-color-text--$(color) {
color: var(--color-$(color));
}
}
/* ------------------------------------ *\
#FONT
\* ------------------------------------ */
/**
* Use these helper classes to cause other elements to adopt the heading
* fonts., e.g.:
*
* <p class="vd-u-font-heading">Lorem ipsum</h2>
*
* 1. Apply enhanced font only if it is loaded
*/
.u-font-heading {
font-family: var(--heading-font-family);
@mixin font-headings;
}
.wf-metaweb-n4-active {
.u-font-heading {
font-family: var(--enhance-heading-font-family); /* [1] */
}
}
/* ------------------------------------ *\
// #TEXT-UTILITIES
\* ------------------------------------ */
/**
* Center text
*/
.u-text-center {
text-align: center;
}
/* ------------------------------------ *\
// #UTILITIES
\* ------------------------------------ */
/**
* Visually hide content.
*
* Use it when you want to hide something but keep it available to screen
* readers and assistive technology. It will not use up space in the document
* flow.
*/
.u-visually-hidden {
display: hidden;
}
/**
* Hide content
*
* Use disappear when you want to remove something completely from the page.
* This includes hiding the item screen readers and assistive technology. It
* will do this with `display: none !important;`.
*/
.u-hidden {
display: disappear;
}
/* ------------------------------------ *\
#RESPONSIVE-UTILITIES
\* ------------------------------------ */
/**
* Visually hide content depending on viewports.
*
* Use it when you want to hide something but keep it available to screen
* readers and assistive technology. It will not use up space in the document
* flow.
*/
@media (--palm) {
.u-visually-hidden\@palm {
display: hidden;
}
}
@media (--lap) {
.u-visually-hidden\@lap {
display: hidden;
}
}
@media (--lap-and-up) {
.u-visually-hidden\@lap-and-up {
display: hidden;
}
}
@media (--portable) {
.u-visually-hidden\@portable {
display: hidden;
}
}
@media (--desk) {
.u-visually-hidden\@desk {
display: hidden;
}
}
/**
* Hide content depending of the viewport
*
* Use disappear when you want to remove something completely from the page.
* This includes hiding the item screen readers and assistive technology. It
* will do this with `display: none !important;`.
*/
@media (--palm) {
.u-hidden\@palm {
display: disappear;
}
}
@media (--lap) {
.u-hidden\@lap {
display: disappear;
}
}
@media (--lap-and-up) {
.u-hidden\@lap-and-up {
display: disappear;
}
}
@media (--portable) {
.u-hidden\@portable {
display: disappear;
}
}
@media (--desk) {
.u-hidden\@desk {
display: disappear;
}
}
/* ------------------------------------ *\
#SPACING
\* ------------------------------------ */
/**
* Margin and padding helper classes. Use these to tweak layout on a micro
* level.
*
* `.(m|p)(t|r|b|l|h|v)(-|+|0) {}` = margin/padding
* top/right/bottom/left/horizontal/vertical less/more/none
*/
:root {
--margin: var(--global-spacing-unit);
--padding: var(--global-spacing-unit);
}
/**
* Margin helper classes.
*
* Add margins.
*/
.u-m {
margin: var(--margin);
}
.u-mt {
margin-top: var(--margin);
}
.u-mr {
margin-right: var(--margin);
}
.u-mb {
margin-bottom: var(--margin);
}
.u-ml {
margin-left: var(--margin);
}
.u-mh {
margin-right: var(--margin);
margin-left: var(--margin);
}
.u-mv {
margin-top: var(--margin);
margin-bottom: var(--margin);
}
/**
* Remove margins.
*/
.u-m0 {
margin: 0 !important;
}
.u-mt0 {
margin-top: 0 !important;
}
.u-mr0 {
margin-right: 0 !important;
}
.u-mb0 {
margin-bottom: 0 !important;
}
.u-ml0 {
margin-left: 0 !important;
}
.u-mh0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.u-mv0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/**
* Padding helper classes.
*
* Add paddings.
*/
.u-p {
padding: var(--padding) !important;
}
.u-pt {
padding-top: var(--padding) !important;
}
.u-pr {
padding-right: var(--padding) !important;
}
.u-pb {
padding-bottom: var(--padding) !important;
}
.u-pl {
padding-left: var(--padding) !important;
}
.u-ph {
padding-right: var(--padding) !important;
padding-left: var(--padding) !important;
}
.u-pv {
padding-top: var(--padding) !important;
padding-bottom: var(--padding) !important;
}
/**
* Remove paddings.
*/
.u-p0 {
padding: 0 !important;
}
.u-pt0 {
padding-top: 0 !important;
}
.u-pr0 {
padding-right: 0 !important;
}
.u-pb0 {
padding-bottom: 0 !important;
}
.u-pl0 {
padding-left: 0 !important;
}
.u-ph0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.u-pv0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ------------------------------------ *\
#SPACING
\* ------------------------------------ */
/**
* Gutter helper classes for layout. Use these to tweak layout on a micro
* level. It can be usefull if the layout items use more than 100% of the
* width and wrap on the following line
*/
:root {
--layout-trumps-gutter: var(--layout-gutter);
}
/**
* Gutter helper classes.
*
* Add gutter.
*/
.u-gr {
margin-right: var(--layout-trumps-gutter) !important;
}
.u-gl {
margin-left: var(--layout-trumps-gutter) !important;
}
@media (--lap-and-up) {
.u-gr\@lap-and-up {
margin-right: var(--layout-trumps-gutter) !important;
}
.u-gl\@lap-and-up {
margin-left: var(--layout-trumps-gutter) !important;
}
}
/**
* Remove gutter
*/
.u-gr0 {
margin-right: 0 !important;
}
.u-gl0 {
margin-left: 0 !important;
}
@media (--lap-and-up) {
.u-gr0\@lap-and-up {
margin-right: 0 !important;
}
.u-gl0\@lap-and-up {
margin-left: 0 !important;
}
}
/* ------------------------------------ *\
// #PRINT
\* ------------------------------------ */
/**
* Toggle content for print.
*/
@media (--print){
.u-hidden\@print {
display: disappear;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment