normandy-css
Version:
Normandy CSS boilerplate and guidelines
1,765 lines (1,501 loc) • 44.2 kB
CSS
@charset "UTF-8";
/*!
* Calidae CSS Boilerplate v1.0.0
* https://bitbucket.org/calidae/calidae-css
*/
/**
* Calidae CSS Boilerplate follows a ITCSS architecture and BEM class naming.
* Read README.md for further details.
*/
/* ==========================================================================
SETTINGS
========================================================================== */
/**
* This layer defines all the global variables and configuration settings.
* Please notice that these are global scoped variables, such as font sizes,
* colors, responsive breakpoints.
*
* Try to keep every file short and clean.
*
* Place component or object specific settings within its own file so they are
* more modular and we achieve a higher separation of concerns.
*/
/* ==========================================================================
COLORS SETTINGS
========================================================================== */
/**
* The global colors file contains any project-wide color variables. Please
* maintain this file as short as possible, trying to avoid variables for
* similar colors.
*
*
*
* To add or modify the $global-colors map you can use native map-merge method
* in your custom _settings.colors.scss file:
*
* $custom-colors: (
* "branding-primary": hsl(164, 100%, 88%)
* );
* $global-colors: map-merge($global-colors, $custom-colors);
*
* or, in a one-liner:
* $global-colors: map-merge($global-colors,
("branding-primary": hsl(164, 100%, 88%)));
*
*
* Since we don't have color variables but color maps, you need to use the
* `map-get` Sass function if you want to use a specific color:
*
* .c-some-component {
* border-color: map-get($global-colors, "branding-primary");
* }
*
* Please notices that _utilities.colors.scss generates some handy helper
* classes to manage text and background colors.
*/
/* ==========================================================================
CORE SETTINGS
========================================================================== */
/**
* This file sets up normandy-css most important variables.
* These values should be defined soon and be modified with caution.
*/
/* stylelint-disable scss/dollar-variable-colon-space-after */
/**
* Baseline grid lines height.
* Every spacing metric should be based on this.
*/
/**
* How many grid lines should our spacing unit variants span?
* Each value should be an unitless integer.
*/
/**
* This will give us variables to create spacing values such as padding and
* margin utilities and mantain vertical rythm across the project.
*
* It is not recommended that you modify these following variables
* (it can break your vertical rhythm).
*/
/**
* Base typographical styles and baseline grid. Make sure you define these
* values in pixels: they will converted to more appropriate units.
*/
/* stylelint-enable scss/dollar-variable-colon-space-after */
/* ==========================================================================
DO NOT MODIFY ANYTHING BELOW THIS POINT
========================================================================== */
/* ==========================================================================
GLOBAL FONT SIZES
========================================================================== */
/**
* The global font sizes settings file contains any project-wide font-size
* variables. They are mostly used to give headings its size and to generate
* font-size utility classes.
*/
/* ==========================================================================
GLOBAL SETTINGS
========================================================================== */
/**
* The global settings file contains any project-wide variables; things that
* need to be made available to the entire codebase.
*/
/* ========================================================================
RESPONSIVE SETTINGS
======================================================================== */
/* stylelint-disable max-line-length */
/**
* Responsive settings file contains project-wide responsive variables.
* These values should be defined soon and be modified with caution.
*
* Normandy-css uses SassMQ as a media queries utility so we customize their
* own variables.
* https://github.com/sass-mq/sass-mq
*
*
* Some media query best practices:
*
* 1. Before using a media query, ask yourself the following question:
* 'Do I need a media query at all?'. Flexbox and Grid are responsive by
* default, so media queries should be used sparingly.
* 2. Avoid targeting devices. Add breakpoints when design requires so.
* 3. Take into account different media queries. For instance, pointer type
* based media queries.
* 4. Take a mobile-first approach. Set media "min-width" (or similar) media
* queries, so they modify code's behavior on larger screens.
*
* Read more:
* http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
* https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/
* https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
*/
/* stylelint-enable max-line-length */
/* ==========================================================================
TOOLS
========================================================================== */
/**
* This layer defines site-wide mixins and functions.
*
* Please notice that both Settings and Tools should not output any compiled
* CSS code.
*/
/* ==========================================================================
FONT-SIZE TOOLS
========================================================================== */
/**
* Generates a rem font-size (with pixel fallback) and a baseline-compatible
* unitless line-height from a pixel font-size value. Basic usage is simply:
*
* @include font-size(18px);
*
* You can force a specific line-height by passing it as the second argument:
*
* @include font-size(16px, 1);
*/
/* stylelint-disable max-line-length */
/* stylelint-enable max-line-length */
/* ==========================================================================
GENERIC
========================================================================== */
/**
* Low-specificity, far-reaching rulesets such as resets.
*
* This is the first layer which generates actual CSS.
*/
/* ==========================================================================
BOX-SIZING
========================================================================== */
/**
* More sensible default box-sizing:
* css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
*/
html {
box-sizing: border-box; }
*, *::before, *::after {
box-sizing: inherit; }
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0; }
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block; }
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block; }
/**
* 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 */ }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/* Text-level semantics
========================================================================== */
/**
* 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 */ }
/**
* 1. Remove the bottom border in Chrome 57- and 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; }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic; }
/**
* 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
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block; }
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none; }
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden; }
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */ }
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
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"],
[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; }
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em; }
/**
* 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 */ }
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */ }
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* 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 macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 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 */ }
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block; }
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item; }
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block; }
/**
* Add the correct display in IE.
*/
template {
display: none; }
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none; }
/* ==========================================================================
RESET
========================================================================== */
/**
* A very simple reset that sits on top of Normalize.css.
*/
/* stylelint-disable selector-list-comma-newline-after */
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,
li > ul {
margin-bottom: 0; }
/**
* Remove default table spacing.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
/**
* 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
* on fieldsets.
*/
fieldset {
min-width: 0;
/* [1] */
border: 0; }
/* stylelint-enable selector-list-comma-newline-after */
/* ==========================================================================
BASE
========================================================================== */
/**
* Contains classless styling, i.e., how a <h1> would look without any class.
*
* Attributes on this layer are usually configured on early stages of a
* project and are not modified later.
*/
/* ==========================================================================
IMAGE ELEMENT
========================================================================== */
/**
* 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.
*/
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.
*/
/* stylelint-disable selector-no-qualifying-type */
img[width],
img[height] {
/* [1] */
max-width: none; }
/* stylelint-enable selector-no-qualifying-type */
/* ==========================================================================
PAGE ELEMENT
========================================================================== */
/**
* Simple page-level setup.
*
* 1. 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 ems, the `line-height` is calculated to exist unitlessly.
* 2. 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.
* 3. Ensure the page always fills at least the entire height of the viewport.
*/
html {
font-size: 1em;
/* [1] */
line-height: 1.5;
/* [1] */
overflow-y: scroll;
/* [2] */
min-height: 100%;
/* [3] */ }
/* ==========================================================================
HEADING ELEMENTS
========================================================================== */
/**
* Simple default styles for headings 1 through 6.
*
* We have all of our heading font sizes defined here. Passing these pixel
* values into our `font-size()` mixin will generate a rem-based `font-size`
* with a pixel fallback, as well as generating a `line-height` that will
* sit on our baseline grid.
*/
h1 {
font-size: 32px;
font-size: 2rem;
line-height: 1.3125; }
h2 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.28571; }
h3 {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.25; }
h4 {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.5; }
h5 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333; }
h6 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5; }
/* ==========================================================================
OBJECTS
========================================================================== */
/**
* Namespace: .o-classname
*
* Contains the implementation of various design patterns such as de famous
* media object. Objects are abstract, so they have no specific UI
* implementation. They help us abstract out the repetitive, shared and
* purely structural aspects of the UI into reusable objects.
*
* The idea is to keep these cosmetic-free in order to keep them reusable
* across component instances and, ultimately, across projects.
* That's why you would want to chose agnostic names that aren't specific to
* the type of object. For example, choose .o-box over .o-profile-box.
*
* Please be really careful if you need to modify any attribute of an Object.
* You probably shouldn't.
*/
/* ==========================================================================
MEDIA OBJECT
========================================================================== */
/**
* Place any image- and text-like content side-by-side, as per:
* https://goo.gl/MDV4HS
*
* The Flexbox version of the Media Objects allows it to behave as a flag,
* placing the image both at the bottom or the center of the whole element.
*
* 1. Image vertically aligned at top by default.
*/
.o-media {
display: flex;
align-items: flex-start;
/* [1] */ }
.o-media__img {
margin-right: 24px; }
.o-media__img > img {
display: block; }
.o-media__body {
flex: 1; }
.o-media__body,
.o-media__body > :last-child {
margin-bottom: 0; }
/* Alignment variants.
========================================================================== */
/**
* Vertically align the image- and body-content differently.
*/
.o-media--center {
align-items: center; }
.o-media--bottom {
align-items: flex-end; }
/**
* Allows media img to stretch to fit the container.
*/
.o-media--stretch {
align-items: stretch; }
/* Size variants.
========================================================================== */
/**
* Modify the amount of space between our image and our text. We also have
* reversible options for all available sizes.
*/
/* Gutterless media objects.
========================================================================== */
.o-media--flush > .o-media__img {
margin-right: 0;
margin-left: 0; }
.o-media--flush.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 0; }
.o-media--tiny > .o-media__img {
margin-right: 6px; }
.o-media--tiny.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 6px; }
.o-media--small > .o-media__img {
margin-right: 12px; }
.o-media--small.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 12px; }
.o-media--large > .o-media__img {
margin-right: 48px; }
.o-media--large.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 48px; }
.o-media--huge > .o-media__img {
margin-right: 96px; }
.o-media--huge.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 96px; }
/* Reversed media objects.
========================================================================== */
.o-media--reverse {
flex-direction: row-reverse; }
.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 24px; }
/* ==========================================================================
BLOCK OBJECT
========================================================================== */
/**
* Stacked image-with-text object. A simple abstraction to cover a very commonly
* occurring design pattern.
*/
.o-block {
display: block;
text-align: center; }
.o-block__img {
margin-bottom: 24px;
/* Size variants.
===================================================================== */ }
.o-block--flush > .o-block__img {
margin-bottom: 0; }
.o-block--tiny > .o-block__img {
margin-bottom: 6px; }
.o-block--small > .o-block__img {
margin-bottom: 12px; }
.o-block--large > .o-block__img {
margin-bottom: 48px; }
.o-block--huge > .o-block__img {
margin-bottom: 96px; }
.o-block__body {
display: block; }
/* Alignment variants.
========================================================================== */
.o-block--right {
text-align: right; }
.o-block--left {
text-align: left; }
/* ==========================================================================
WRAPPER OBJECT
========================================================================== */
/**
* Page-level constraining and wrapping elements.
*/
.o-wrapper {
padding-right: 24px;
padding-left: 24px;
margin-right: auto;
margin-left: auto;
max-width: 1200px; }
/* Size variants.
========================================================================== */
.o-wrapper--flush {
padding-right: 0;
padding-left: 0; }
.o-wrapper--tiny {
padding-right: 6px;
padding-left: 6px; }
.o-wrapper--small {
padding-right: 12px;
padding-left: 12px; }
.o-wrapper--large {
padding-right: 48px;
padding-left: 48px; }
.o-wrapper--huge {
padding-right: 96px;
padding-left: 96px; }
/* ==========================================================================
COVER OBJECT
========================================================================== */
/**
* Place any text as a cover from an image.
*
* 1. Opinionated placement of background image.
*/
.o-cover {
display: flex;
background-position: center;
/* [1] */
background-size: cover;
/* [1] */ }
/**
* 1. Center the body into parent element.
* https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6
*/
.o-cover__body {
margin: auto;
/* 1 */
padding: 24px;
/* Size variants.
========================================================================= */
/* Alignment variants.
========================================================================= */
/**
* Vertically align the image- and body-content differently.
*/ }
.o-cover--flush .o-cover__body {
padding: 0; }
.o-cover--tiny .o-cover__body {
padding: 6px; }
.o-cover--small .o-cover__body {
padding: 12px; }
.o-cover--large .o-cover__body {
padding: 48px; }
.o-cover--huge .o-cover__body {
padding: 96px; }
.o-cover--top .o-cover__body {
margin-top: 0; }
.o-cover--bottom .o-cover__body {
margin-bottom: 0; }
.o-cover--left .o-cover__body {
margin-left: 0; }
.o-cover--right .o-cover__body {
margin-right: 0; }
/* ==========================================================================
LIST OBJECT
========================================================================== */
/**
* Unstyled inline or blocked lists.
*
* 1. We need to defensively reset any box-model properties.
*/
.o-list {
margin: 0;
/* [1] */
padding: 0;
/* [1] */
list-style: none; }
.o-list__item {
display: inline-block; }
/* Display modifiers.
========================================================================== */
.o-list--block > .o-list__item {
display: block; }
/* ==========================================================================
COMPONENTS
========================================================================== */
/**
* Namespace: .c-classname
*
* Specific UI components.
*
* This is where the majority of the work takes place. since adding new
* components and features usually makes up the vast majority of development.
* UI components are often composed of Objects and Components.
*
* All of the changes made to a Component styles should be detectable in the
* current context. Modifying these styles should be safe and have no side
* effects.
*/
/* ==========================================================================
UTILITIES
========================================================================== */
/**
* Namespace: .u-classname
*
* The helpers, or “override” layer, should contain high-specificity selectors.
* These are things like utility classes such as .u-hide, which can be reused
* and are not tied to any specific piece of UI.
*
* VERY IMPORTANT: Please keep in mind the Single Responsibility Principle
* when defining utility classes. Every class should do only one thing.
* Utilities should be defined once, and never need changing.
*
* They are to be used as a last resort when no other CSS hooks are available,
* or to tackle completely unique circumstances.
*
* They are only one step away from inline styles, so should be used sparingly.
* If you are using a lot of utility classes you might be able to abstract them
* out into a reusable Component or Object.
*/
/* ==========================================================================
#COLOR UTILITY
========================================================================== */
.u-text-branding-primary {
color: #acc743 ; }
.u-background-branding-primary {
background-color: #acc743 ; }
.u-text-notify-success {
color: #4cae4f ; }
.u-background-notify-success {
background-color: #4cae4f ; }
.u-text-notify-info {
color: #28b5f6 ; }
.u-background-notify-info {
background-color: #28b5f6 ; }
.u-text-notify-warning {
color: #ff9900 ; }
.u-background-notify-warning {
background-color: #ff9900 ; }
.u-text-notify-danger {
color: #f44034 ; }
.u-background-notify-danger {
background-color: #f44034 ; }
/* ==========================================================================
#FLEXBOX UTILITY
========================================================================== */
/**
* In the flex layout model, the children of a flex container can be laid out
* in any direction, and can “flex” their sizes, either growing to fill unused
* space or shrinking to avoid overflowing the parent. Both horizontal and
* vertical alignment of the children can be easily manipulated.
*
* Flexbox spec: https://www.w3.org/TR/css-flexbox/
*/
.u-flex {
display: flex ; }
.u-flex-inline {
display: inline-flex ; }
/**
* This is the DEFAULT value. It sizes the item based on its width/height
* properties (or its content if not set). It makes the flex item inflexible
* when there is some free space left, but allows it to shrink to its minimum
* when there is not enough space.
*
* This is equivalent to setting "flex: 0 1 auto".
*/
.u-flex-initial {
flex: initial ; }
/**
* The item is given the specified proportion (1) of the free space in the
* container. If all items in the flex container use this pattern, their sizes
* will be proportional to the specified flex factor.
*
* This is equivalent to setting "flex: 1 1 0px".
*/
.u-flex-1 {
flex: 1 ; }
/**
* Beware, this is not the default value. The item is sized according to its
* width and height properties, but grows to absorb any extra free space in the
* flex container, and shrinks to its minimum size to fit the container.
*
* This is equivalent to setting "flex: 1 1 auto".
*/
.u-flex-auto {
flex: auto ; }
/**
* The item is sized according to its width and height properties. It is fully
* inflexible: it neither shrinks nor grows in relation to the flex container.
*
* This is equivalent to setting "flex: 0 0 auto".
*/
.u-flex-none {
flex: none ; }
/* Direction.
========================================================================== */
.u-flex-row {
flex-direction: row ; }
.u-flex-row-reverse {
flex-direction: row-reverse ; }
.u-flex-column {
flex-direction: column ; }
.u-flex-column-reverse {
flex-direction: column-reverse ; }
/* Vertical and horizontal centering.
========================================================================== */
.u-flex-no-wrap {
flex-wrap: nowrap ; }
.u-flex-wrap {
flex-wrap: wrap ; }
.u-flex-wrap-reverse {
flex-wrap: wrap-reverse ; }
/* Vertical and horizontal centering.
========================================================================== */
/**
* It makes sense to create a full-centerer utility class since it's so
* commonly used.
*
* 1. Align items in Main Axis
* 2. Align items in Cross Axis
*/
.u-flex-center {
align-items: center ;
/* [1] */
justify-content: center ;
/* [2] */ }
/* Positioning a single element along a container's cross axis.
========================================================================== */
.u-flex-self-auto {
align-self: auto ; }
.u-flex-self-start {
align-self: flex-start ; }
.u-flex-self-center {
align-self: center ; }
.u-flex-self-end {
align-self: flex-end ; }
.u-flex-self-stretch {
align-self: stretch ; }
.u-flex-self-baseline {
align-self: baseline ; }
/* Positioning flex items along a container's cross axis.
========================================================================== */
.u-flex-items-stretch {
align-items: stretch ; }
.u-flex-items-start {
align-items: flex-start ; }
.u-flex-items-center {
align-items: center ; }
.u-flex-items-end {
align-items: flex-end ; }
.u-flex-items-baseline {
align-items: baseline ; }
/* Positioning flex items along a container's main axis.
========================================================================== */
.u-flex-justify-start {
justify-content: flex-start ; }
.u-flex-justify-center {
justify-content: center ; }
.u-flex-justify-end {
justify-content: flex-end ; }
.u-flex-justify-between {
justify-content: space-between ; }
.u-flex-justify-around {
justify-content: space-around ; }
.u-flex-justify-evenly {
justify-content: space-evenly ; }
/* ==========================================================================
HEIGHT UTILITY
========================================================================== */
/**
* Basic common height utilities.
*/
.u-height-none {
height: 0 ; }
.u-height-full {
height: 100% ; }
.u-height-screen {
height: 100vh ; }
/* ==========================================================================
HIDE UTILITY
========================================================================== */
/**
* Hide visually and from screen readers.
*/
.u-hidden {
display: none ; }
/* ==========================================================================
PRINT UTILITIES
========================================================================== */
/**
* Very crude, reset-like styles taken from the HTML5 Boilerplate:
* https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md
* https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
*/
/* stylelint-disable selector-no-qualifying-type */
@media print {
/**
* 1. Black prints faster: http://www.sanbeiji.com/archives/953
*/
*,
*::before,
*::after,
*::first-letter,
*::first-line {
background: transparent ;
color: #000 ;
/* [1] */
box-shadow: none ;
text-shadow: none ; }
a,
a:visited {
text-decoration: underline; }
a[href]::after {
content: " (" attr(href) ")"; }
abbr[title]::after {
content: " (" attr(title) ")"; }
/**
* Don't show links that are fragment identifiers, or use the `javascript:`
* pseudo protocol.
*/
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: ""; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
/**
* Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group; }
tr,
img {
page-break-inside: avoid; }
img {
max-width: 100% ; }
p,
h2,
h3 {
orphans: 3;
widows: 3; }
h2,
h3 {
page-break-after: avoid; } }
/* stylelint-enable selector-no-qualifying-type */
/* ==========================================================================
SPACING UTILITIES
========================================================================== */
/**
* Utility classes to put specific spacing values onto elements. The loop below
* will generate us a suite of classes like:
*
* .u-mt {}
* .u-pl-large {}
* .u-mr-small {}
* .u-p {}
* .u-pr-none {}
* .u-ph {}
* .u-pv-small {}
* .u-m-auto {}
*/
/* stylelint-disable string-quotes */
/* stylelint-disable max-nesting-depth */
/* stylelint-disable max-line-length */
.u-p {
padding: 24px ; }
.u-p-tiny {
padding: 6px ; }
.u-p-small {
padding: 12px ; }
.u-p-large {
padding: 48px ; }
.u-p-huge {
padding: 96px ; }
.u-p-none {
padding: 0 ; }
.u-p-auto {
padding: auto ; }
.u-pt {
padding-top: 24px ; }
.u-pt-tiny {
padding-top: 6px ; }
.u-pt-small {
padding-top: 12px ; }
.u-pt-large {
padding-top: 48px ; }
.u-pt-huge {
padding-top: 96px ; }
.u-pt-none {
padding-top: 0 ; }
.u-pt-auto {
padding-top: auto ; }
.u-pr {
padding-right: 24px ; }
.u-pr-tiny {
padding-right: 6px ; }
.u-pr-small {
padding-right: 12px ; }
.u-pr-large {
padding-right: 48px ; }
.u-pr-huge {
padding-right: 96px ; }
.u-pr-none {
padding-right: 0 ; }
.u-pr-auto {
padding-right: auto ; }
.u-pb {
padding-bottom: 24px ; }
.u-pb-tiny {
padding-bottom: 6px ; }
.u-pb-small {
padding-bottom: 12px ; }
.u-pb-large {
padding-bottom: 48px ; }
.u-pb-huge {
padding-bottom: 96px ; }
.u-pb-none {
padding-bottom: 0 ; }
.u-pb-auto {
padding-bottom: auto ; }
.u-pl {
padding-left: 24px ; }
.u-pl-tiny {
padding-left: 6px ; }
.u-pl-small {
padding-left: 12px ; }
.u-pl-large {
padding-left: 48px ; }
.u-pl-huge {
padding-left: 96px ; }
.u-pl-none {
padding-left: 0 ; }
.u-pl-auto {
padding-left: auto ; }
.u-ph {
padding-left: 24px ;
padding-right: 24px ; }
.u-ph-tiny {
padding-left: 6px ;
padding-right: 6px ; }
.u-ph-small {
padding-left: 12px ;
padding-right: 12px ; }
.u-ph-large {
padding-left: 48px ;
padding-right: 48px ; }
.u-ph-huge {
padding-left: 96px ;
padding-right: 96px ; }
.u-ph-none {
padding-left: 0 ;
padding-right: 0 ; }
.u-ph-auto {
padding-left: auto ;
padding-right: auto ; }
.u-pv {
padding-top: 24px ;
padding-bottom: 24px ; }
.u-pv-tiny {
padding-top: 6px ;
padding-bottom: 6px ; }
.u-pv-small {
padding-top: 12px ;
padding-bottom: 12px ; }
.u-pv-large {
padding-top: 48px ;
padding-bottom: 48px ; }
.u-pv-huge {
padding-top: 96px ;
padding-bottom: 96px ; }
.u-pv-none {
padding-top: 0 ;
padding-bottom: 0 ; }
.u-pv-auto {
padding-top: auto ;
padding-bottom: auto ; }
.u-m {
margin: 24px ; }
.u-m-tiny {
margin: 6px ; }
.u-m-small {
margin: 12px ; }
.u-m-large {
margin: 48px ; }
.u-m-huge {
margin: 96px ; }
.u-m-none {
margin: 0 ; }
.u-m-auto {
margin: auto ; }
.u-mt {
margin-top: 24px ; }
.u-mt-tiny {
margin-top: 6px ; }
.u-mt-small {
margin-top: 12px ; }
.u-mt-large {
margin-top: 48px ; }
.u-mt-huge {
margin-top: 96px ; }
.u-mt-none {
margin-top: 0 ; }
.u-mt-auto {
margin-top: auto ; }
.u-mr {
margin-right: 24px ; }
.u-mr-tiny {
margin-right: 6px ; }
.u-mr-small {
margin-right: 12px ; }
.u-mr-large {
margin-right: 48px ; }
.u-mr-huge {
margin-right: 96px ; }
.u-mr-none {
margin-right: 0 ; }
.u-mr-auto {
margin-right: auto ; }
.u-mb {
margin-bottom: 24px ; }
.u-mb-tiny {
margin-bottom: 6px ; }
.u-mb-small {
margin-bottom: 12px ; }
.u-mb-large {
margin-bottom: 48px ; }
.u-mb-huge {
margin-bottom: 96px ; }
.u-mb-none {
margin-bottom: 0 ; }
.u-mb-auto {
margin-bottom: auto ; }
.u-ml {
margin-left: 24px ; }
.u-ml-tiny {
margin-left: 6px ; }
.u-ml-small {
margin-left: 12px ; }
.u-ml-large {
margin-left: 48px ; }
.u-ml-huge {
margin-left: 96px ; }
.u-ml-none {
margin-left: 0 ; }
.u-ml-auto {
margin-left: auto ; }
.u-mh {
margin-left: 24px ;
margin-right: 24px ; }
.u-mh-tiny {
margin-left: 6px ;
margin-right: 6px ; }
.u-mh-small {
margin-left: 12px ;
margin-right: 12px ; }
.u-mh-large {
margin-left: 48px ;
margin-right: 48px ; }
.u-mh-huge {
margin-left: 96px ;
margin-right: 96px ; }
.u-mh-none {
margin-left: 0 ;
margin-right: 0 ; }
.u-mh-auto {
margin-left: auto ;
margin-right: auto ; }
.u-mv {
margin-top: 24px ;
margin-bottom: 24px ; }
.u-mv-tiny {
margin-top: 6px ;
margin-bottom: 6px ; }
.u-mv-small {
margin-top: 12px ;
margin-bottom: 12px ; }
.u-mv-large {
margin-top: 48px ;
margin-bottom: 48px ; }
.u-mv-huge {
margin-top: 96px ;
margin-bottom: 96px ; }
.u-mv-none {
margin-top: 0 ;
margin-bottom: 0 ; }
.u-mv-auto {
margin-top: auto ;
margin-bottom: auto ; }
/* Responsive utilities.
========================================================================== */
/**
* You can create reponsive spacings by modifying the Sass maps below.
*
* This would generate classes such as:
*
* .u-m-small@mobile {}
* .u-m-small@tablet {}
* .u-m-small@desktop {}
* .u-m-small@wide {}
* .u-mb-small@mobile {}
* .u-mb-small@tablet {}
* .u-mb-small@desktop {}
* .u-mb-small@wide {}
*
* If you want every spacing defined above to have responsive variants, you
* can mirror the spacing maps:
*
* $responsive-spacing-directions: $spacing-directions !default;
* $responsive-spacing-properties: $spacing-properties !default;
* $responsive-spacing-sizes: $spacing-sizes !default;
*
* WARNING: This will generate a huge chunk of extra CSS. Be selective.
*/
/* stylelint-enable string-quotes */
/* stylelint-enable max-nesting-depth */
/* stylelint-enable max-line-length */
/* ==========================================================================
#TEXT UTILITY
========================================================================== */
/**
* Usual text utility classes to overcome the common text management needs.
*/
/* Alignment.
========================================================================== */
.u-text-left {
text-align: left ; }
.u-text-center {
text-align: center ; }
.u-text-right {
text-align: right ; }
.u-text-justify {
text-align: justify ; }
/* Sizing.
========================================================================== */
.u-text-h1 {
font-size: 32px ;
font-size: 2rem ; }
.u-text-h2 {
font-size: 28px ;
font-size: 1.75rem ; }
.u-text-h3 {
font-size: 24px ;
font-size: 1.5rem ; }
.u-text-h4 {
font-size: 20px ;
font-size: 1.25rem ; }
.u-text-h5 {
font-size: 18px ;
font-size: 1.125rem ; }
.u-text-h6 {
font-size: 16px ;
font-size: 1rem ; }
/* Weights.
========================================================================== */
.u-text-hairline {
font-weight: 100 ; }
.u-text-thin {
font-weight: 200 ; }
.u-text-light {
font-weight: 300 ; }
.u-text-normal {
font-weight: 400 ; }
.u-text-medium {
font-weight: 500 ; }
.u-text-semibold {
font-weight: 600 ; }
.u-text-bold {
font-weight: 700 ; }
.u-text-extrabold {
font-weight: 800 ; }
.u-text-black {
font-weight: 900 ; }
/* Style.
========================================================================== */
.u-text-italic {
font-style: italic ; }
/* Transform.
========================================================================== */
.u-text-uppercase {
text-transform: uppercase ; }
.u-text-lowercase {
text-transform: lowercase ; }
.u-text-capitalize {
text-transform: capitalize ; }
/* Decoration.
========================================================================== */
.u-text-underline {
text-decoration: underline ; }
.u-text-line-through {
text-decoration: line-through ; }
.u-text-no-underline {
text-decoration: none ; }
/* ==========================================================================
WIDTH UTILITY
========================================================================== */
/**
* Basic common width utilities.
*/
.u-width-none {
width: 0 ; }
.u-width-full {
width: 100% ; }
.u-width-screen {
width: 100vw ; }