mirror of
https://github.com/tachyons-css/tachyons.git
synced 2026-02-06 18:21:47 +00:00
Compare commits
No commits in common. "main" and "4.9.1" have entirely different histories.
24
bower.json
Normal file
24
bower.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "tachyons",
|
||||
"description": "Functional CSS for humans",
|
||||
"main": "css/tachyons.css",
|
||||
"authors": [
|
||||
"mrmrs"
|
||||
],
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"css",
|
||||
"design",
|
||||
"system",
|
||||
"responsive",
|
||||
"design"
|
||||
],
|
||||
"homepage": "http://tachyons.io",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
600
css/tachyons.css
600
css/tachyons.css
@ -1,4 +1,4 @@
|
||||
/*! TACHYONS v4.12.0 | http://tachyons.io */
|
||||
/*! TACHYONS v4.9.0 | http://tachyons.io */
|
||||
/*
|
||||
*
|
||||
* ________ ______
|
||||
@ -22,20 +22,25 @@
|
||||
*
|
||||
*/
|
||||
/* External Library Includes */
|
||||
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
/*! 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 iOS.
|
||||
* 2. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }
|
||||
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.
|
||||
* 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.
|
||||
@ -43,6 +48,15 @@ body { margin: 0; }
|
||||
h1 { font-size: 2em; margin: .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.
|
||||
@ -56,14 +70,19 @@ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
a { background-color: transparent; }
|
||||
a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 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 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ }
|
||||
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.
|
||||
*/
|
||||
@ -73,6 +92,14 @@ b, strong { font-weight: bolder; }
|
||||
* 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.
|
||||
*/
|
||||
@ -87,16 +114,28 @@ sup { top: -0.5em; }
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
* 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.
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }
|
||||
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.
|
||||
@ -108,9 +147,12 @@ button, input {/* 1 */ overflow: visible; }
|
||||
*/
|
||||
button, select {/* 1 */ text-transform: none; }
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
|
||||
button, html [type="button"], /* 1 */
|
||||
[type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
@ -133,16 +175,17 @@ fieldset { padding: .35em .75em .625em; }
|
||||
*/
|
||||
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
progress { vertical-align: baseline; }
|
||||
progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
* 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.
|
||||
* 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 */ }
|
||||
/**
|
||||
@ -156,8 +199,9 @@ textarea { overflow: auto; }
|
||||
*/
|
||||
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
* 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.
|
||||
@ -167,21 +211,29 @@ textarea { overflow: auto; }
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
details { display: block; }
|
||||
details, /* 1 */
|
||||
menu { display: block; }
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
summary { display: list-item; }
|
||||
/* Misc
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
* 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.
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
[hidden] { display: none; }
|
||||
/* Modules */
|
||||
@ -397,8 +449,6 @@ img { max-width: 100%; }
|
||||
.b--washed-red { border-color: #ffdfdf; }
|
||||
.b--transparent { border-color: transparent; }
|
||||
.b--inherit { border-color: inherit; }
|
||||
.b--initial { border-color: initial; }
|
||||
.b--unset { border-color: unset; }
|
||||
/*
|
||||
|
||||
BORDER RADIUS
|
||||
@ -435,9 +485,6 @@ img { max-width: 100%; }
|
||||
.br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
|
||||
.br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
||||
.br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; }
|
||||
.br-inherit { border-radius: inherit; }
|
||||
.br-initial { border-radius: initial; }
|
||||
.br-unset { border-radius: unset; }
|
||||
/*
|
||||
|
||||
BORDER STYLES
|
||||
@ -632,54 +679,54 @@ img { max-width: 100%; }
|
||||
-l = large
|
||||
|
||||
*/
|
||||
.flex { display: flex; }
|
||||
.inline-flex { display: inline-flex; }
|
||||
.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
|
||||
.inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
|
||||
/* 1. Fix for Chrome 44 bug.
|
||||
* https://code.google.com/p/chromium/issues/detail?id=506893 */
|
||||
.flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
|
||||
.flex-none { flex: none; }
|
||||
.flex-column { flex-direction: column; }
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-nowrap { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse { flex-direction: column-reverse; }
|
||||
.flex-row-reverse { flex-direction: row-reverse; }
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-end { align-items: flex-end; }
|
||||
.items-center { align-items: center; }
|
||||
.items-baseline { align-items: baseline; }
|
||||
.items-stretch { align-items: stretch; }
|
||||
.self-start { align-self: flex-start; }
|
||||
.self-end { align-self: flex-end; }
|
||||
.self-center { align-self: center; }
|
||||
.self-baseline { align-self: baseline; }
|
||||
.self-stretch { align-self: stretch; }
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-around { justify-content: space-around; }
|
||||
.content-start { align-content: flex-start; }
|
||||
.content-end { align-content: flex-end; }
|
||||
.content-center { align-content: center; }
|
||||
.content-between { align-content: space-between; }
|
||||
.content-around { align-content: space-around; }
|
||||
.content-stretch { align-content: stretch; }
|
||||
.order-0 { order: 0; }
|
||||
.order-1 { order: 1; }
|
||||
.order-2 { order: 2; }
|
||||
.order-3 { order: 3; }
|
||||
.order-4 { order: 4; }
|
||||
.order-5 { order: 5; }
|
||||
.order-6 { order: 6; }
|
||||
.order-7 { order: 7; }
|
||||
.order-8 { order: 8; }
|
||||
.order-last { order: 99999; }
|
||||
.flex-grow-0 { flex-grow: 0; }
|
||||
.flex-grow-1 { flex-grow: 1; }
|
||||
.flex-shrink-0 { flex-shrink: 0; }
|
||||
.flex-shrink-1 { flex-shrink: 1; }
|
||||
.flex-auto { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
|
||||
.flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
|
||||
.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
|
||||
.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
|
||||
.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
|
||||
.flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
|
||||
.flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
|
||||
.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
|
||||
.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
|
||||
.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
|
||||
.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
|
||||
.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
|
||||
.self-start { -ms-flex-item-align: start; align-self: flex-start; }
|
||||
.self-end { -ms-flex-item-align: end; align-self: flex-end; }
|
||||
.self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
|
||||
.self-baseline { -ms-flex-item-align: baseline; align-self: baseline; }
|
||||
.self-stretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
|
||||
.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
|
||||
.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
|
||||
.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
|
||||
.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
|
||||
.justify-around { -ms-flex-pack: distribute; justify-content: space-around; }
|
||||
.content-start { -ms-flex-line-pack: start; align-content: flex-start; }
|
||||
.content-end { -ms-flex-line-pack: end; align-content: flex-end; }
|
||||
.content-center { -ms-flex-line-pack: center; align-content: center; }
|
||||
.content-between { -ms-flex-line-pack: justify; align-content: space-between; }
|
||||
.content-around { -ms-flex-line-pack: distribute; align-content: space-around; }
|
||||
.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; }
|
||||
.order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
|
||||
.order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
|
||||
.order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
|
||||
.order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
|
||||
.order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
|
||||
.order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
|
||||
.order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
|
||||
.order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
|
||||
.order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
|
||||
.order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
|
||||
.flex-grow-0 { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
|
||||
.flex-grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
|
||||
.flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; }
|
||||
.flex-shrink-1 { -ms-flex-negative: 1; flex-shrink: 1; }
|
||||
/*
|
||||
|
||||
FLOATS
|
||||
@ -993,8 +1040,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.w-80 { width: 80%; }
|
||||
.w-90 { width: 90%; }
|
||||
.w-100 { width: 100%; }
|
||||
.w-third { width: 33.33333%; }
|
||||
.w-two-thirds { width: 66.66667%; }
|
||||
.w-third { width: calc( 100% / 3 ); }
|
||||
.w-two-thirds { width: calc( 100% / 1.5 ); }
|
||||
.w-auto { width: auto; }
|
||||
/*
|
||||
|
||||
@ -1131,7 +1178,6 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.washed-yellow { color: #fffceb; }
|
||||
.washed-red { color: #ffdfdf; }
|
||||
.color-inherit { color: inherit; }
|
||||
/* Background colors */
|
||||
.bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); }
|
||||
.bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); }
|
||||
.bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); }
|
||||
@ -1151,6 +1197,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.bg-white-30 { background-color: rgba( 255, 255, 255, .3 ); }
|
||||
.bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); }
|
||||
.bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); }
|
||||
/* Background colors */
|
||||
.bg-black { background-color: #000; }
|
||||
.bg-near-black { background-color: #111; }
|
||||
.bg-dark-gray { background-color: #333; }
|
||||
@ -1591,36 +1638,36 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
-l = large
|
||||
|
||||
*/
|
||||
.na1 { margin: -0.25rem; }
|
||||
.na2 { margin: -0.5rem; }
|
||||
.na1 { margin: -.25rem; }
|
||||
.na2 { margin: -.5rem; }
|
||||
.na3 { margin: -1rem; }
|
||||
.na4 { margin: -2rem; }
|
||||
.na5 { margin: -4rem; }
|
||||
.na6 { margin: -8rem; }
|
||||
.na7 { margin: -16rem; }
|
||||
.nl1 { margin-left: -0.25rem; }
|
||||
.nl2 { margin-left: -0.5rem; }
|
||||
.nl1 { margin-left: -.25rem; }
|
||||
.nl2 { margin-left: -.5rem; }
|
||||
.nl3 { margin-left: -1rem; }
|
||||
.nl4 { margin-left: -2rem; }
|
||||
.nl5 { margin-left: -4rem; }
|
||||
.nl6 { margin-left: -8rem; }
|
||||
.nl7 { margin-left: -16rem; }
|
||||
.nr1 { margin-right: -0.25rem; }
|
||||
.nr2 { margin-right: -0.5rem; }
|
||||
.nr1 { margin-right: -.25rem; }
|
||||
.nr2 { margin-right: -.5rem; }
|
||||
.nr3 { margin-right: -1rem; }
|
||||
.nr4 { margin-right: -2rem; }
|
||||
.nr5 { margin-right: -4rem; }
|
||||
.nr6 { margin-right: -8rem; }
|
||||
.nr7 { margin-right: -16rem; }
|
||||
.nb1 { margin-bottom: -0.25rem; }
|
||||
.nb2 { margin-bottom: -0.5rem; }
|
||||
.nb1 { margin-bottom: -.25rem; }
|
||||
.nb2 { margin-bottom: -.5rem; }
|
||||
.nb3 { margin-bottom: -1rem; }
|
||||
.nb4 { margin-bottom: -2rem; }
|
||||
.nb5 { margin-bottom: -4rem; }
|
||||
.nb6 { margin-bottom: -8rem; }
|
||||
.nb7 { margin-bottom: -16rem; }
|
||||
.nt1 { margin-top: -0.25rem; }
|
||||
.nt2 { margin-top: -0.5rem; }
|
||||
.nt1 { margin-top: -.25rem; }
|
||||
.nt2 { margin-top: -.5rem; }
|
||||
.nt3 { margin-top: -1rem; }
|
||||
.nt4 { margin-top: -2rem; }
|
||||
.nt5 { margin-top: -4rem; }
|
||||
@ -2075,9 +2122,6 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
|
||||
.br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
||||
.br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; }
|
||||
.br-inherit-ns { border-radius: inherit; }
|
||||
.br-initial-ns { border-radius: initial; }
|
||||
.br-unset-ns { border-radius: unset; }
|
||||
.b--dotted-ns { border-style: dotted; }
|
||||
.b--dashed-ns { border-style: dashed; }
|
||||
.b--solid-ns { border-style: solid; }
|
||||
@ -2134,54 +2178,54 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.dt-column-ns { display: table-column; }
|
||||
.dt-column-group-ns { display: table-column-group; }
|
||||
.dt--fixed-ns { table-layout: fixed; width: 100%; }
|
||||
.flex-ns { display: flex; }
|
||||
.inline-flex-ns { display: inline-flex; }
|
||||
.flex-auto-ns { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
|
||||
.flex-none-ns { flex: none; }
|
||||
.flex-column-ns { flex-direction: column; }
|
||||
.flex-row-ns { flex-direction: row; }
|
||||
.flex-wrap-ns { flex-wrap: wrap; }
|
||||
.flex-nowrap-ns { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse-ns { flex-direction: column-reverse; }
|
||||
.flex-row-reverse-ns { flex-direction: row-reverse; }
|
||||
.items-start-ns { align-items: flex-start; }
|
||||
.items-end-ns { align-items: flex-end; }
|
||||
.items-center-ns { align-items: center; }
|
||||
.items-baseline-ns { align-items: baseline; }
|
||||
.items-stretch-ns { align-items: stretch; }
|
||||
.self-start-ns { align-self: flex-start; }
|
||||
.self-end-ns { align-self: flex-end; }
|
||||
.self-center-ns { align-self: center; }
|
||||
.self-baseline-ns { align-self: baseline; }
|
||||
.self-stretch-ns { align-self: stretch; }
|
||||
.justify-start-ns { justify-content: flex-start; }
|
||||
.justify-end-ns { justify-content: flex-end; }
|
||||
.justify-center-ns { justify-content: center; }
|
||||
.justify-between-ns { justify-content: space-between; }
|
||||
.justify-around-ns { justify-content: space-around; }
|
||||
.content-start-ns { align-content: flex-start; }
|
||||
.content-end-ns { align-content: flex-end; }
|
||||
.content-center-ns { align-content: center; }
|
||||
.content-between-ns { align-content: space-between; }
|
||||
.content-around-ns { align-content: space-around; }
|
||||
.content-stretch-ns { align-content: stretch; }
|
||||
.order-0-ns { order: 0; }
|
||||
.order-1-ns { order: 1; }
|
||||
.order-2-ns { order: 2; }
|
||||
.order-3-ns { order: 3; }
|
||||
.order-4-ns { order: 4; }
|
||||
.order-5-ns { order: 5; }
|
||||
.order-6-ns { order: 6; }
|
||||
.order-7-ns { order: 7; }
|
||||
.order-8-ns { order: 8; }
|
||||
.order-last-ns { order: 99999; }
|
||||
.flex-grow-0-ns { flex-grow: 0; }
|
||||
.flex-grow-1-ns { flex-grow: 1; }
|
||||
.flex-shrink-0-ns { flex-shrink: 0; }
|
||||
.flex-shrink-1-ns { flex-shrink: 1; }
|
||||
.fl-ns { float: left; _display: inline; }
|
||||
.fr-ns { float: right; _display: inline; }
|
||||
.flex-ns { display: -webkit-box; display: -ms-flexbox; display: flex; }
|
||||
.inline-flex-ns { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
|
||||
.flex-auto-ns { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
|
||||
.flex-none-ns { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
|
||||
.flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
|
||||
.flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
|
||||
.flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; }
|
||||
.flex-nowrap-ns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-ns { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse-ns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
|
||||
.flex-row-reverse-ns { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
|
||||
.items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
|
||||
.items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
|
||||
.items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
|
||||
.items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
|
||||
.items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
|
||||
.self-start-ns { -ms-flex-item-align: start; align-self: flex-start; }
|
||||
.self-end-ns { -ms-flex-item-align: end; align-self: flex-end; }
|
||||
.self-center-ns { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
|
||||
.self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; }
|
||||
.self-stretch-ns { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
|
||||
.justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
|
||||
.justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
|
||||
.justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
|
||||
.justify-between-ns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
|
||||
.justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; }
|
||||
.content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; }
|
||||
.content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; }
|
||||
.content-center-ns { -ms-flex-line-pack: center; align-content: center; }
|
||||
.content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; }
|
||||
.content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; }
|
||||
.content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; }
|
||||
.order-0-ns { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
|
||||
.order-1-ns { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
|
||||
.order-2-ns { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
|
||||
.order-3-ns { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
|
||||
.order-4-ns { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
|
||||
.order-5-ns { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
|
||||
.order-6-ns { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
|
||||
.order-7-ns { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
|
||||
.order-8-ns { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
|
||||
.order-last-ns { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
|
||||
.flex-grow-0-ns { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
|
||||
.flex-grow-1-ns { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
|
||||
.flex-shrink-0-ns { -ms-flex-negative: 0; flex-shrink: 0; }
|
||||
.flex-shrink-1-ns { -ms-flex-negative: 1; flex-shrink: 1; }
|
||||
.fl-ns { float: left; display: inline; }
|
||||
.fr-ns { float: right; display: inline; }
|
||||
.fn-ns { float: none; }
|
||||
.i-ns { font-style: italic; }
|
||||
.fs-normal-ns { font-style: normal; }
|
||||
@ -2249,8 +2293,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.w-80-ns { width: 80%; }
|
||||
.w-90-ns { width: 90%; }
|
||||
.w-100-ns { width: 100%; }
|
||||
.w-third-ns { width: 33.33333%; }
|
||||
.w-two-thirds-ns { width: 66.66667%; }
|
||||
.w-third-ns { width: calc( 100% / 3 ); }
|
||||
.w-two-thirds-ns { width: calc( 100% / 1.5 ); }
|
||||
.w-auto-ns { width: auto; }
|
||||
.overflow-visible-ns { overflow: visible; }
|
||||
.overflow-hidden-ns { overflow: hidden; }
|
||||
@ -2387,36 +2431,36 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.mh5-ns { margin-left: 4rem; margin-right: 4rem; }
|
||||
.mh6-ns { margin-left: 8rem; margin-right: 8rem; }
|
||||
.mh7-ns { margin-left: 16rem; margin-right: 16rem; }
|
||||
.na1-ns { margin: -0.25rem; }
|
||||
.na2-ns { margin: -0.5rem; }
|
||||
.na1-ns { margin: -.25rem; }
|
||||
.na2-ns { margin: -.5rem; }
|
||||
.na3-ns { margin: -1rem; }
|
||||
.na4-ns { margin: -2rem; }
|
||||
.na5-ns { margin: -4rem; }
|
||||
.na6-ns { margin: -8rem; }
|
||||
.na7-ns { margin: -16rem; }
|
||||
.nl1-ns { margin-left: -0.25rem; }
|
||||
.nl2-ns { margin-left: -0.5rem; }
|
||||
.nl1-ns { margin-left: -.25rem; }
|
||||
.nl2-ns { margin-left: -.5rem; }
|
||||
.nl3-ns { margin-left: -1rem; }
|
||||
.nl4-ns { margin-left: -2rem; }
|
||||
.nl5-ns { margin-left: -4rem; }
|
||||
.nl6-ns { margin-left: -8rem; }
|
||||
.nl7-ns { margin-left: -16rem; }
|
||||
.nr1-ns { margin-right: -0.25rem; }
|
||||
.nr2-ns { margin-right: -0.5rem; }
|
||||
.nr1-ns { margin-right: -.25rem; }
|
||||
.nr2-ns { margin-right: -.5rem; }
|
||||
.nr3-ns { margin-right: -1rem; }
|
||||
.nr4-ns { margin-right: -2rem; }
|
||||
.nr5-ns { margin-right: -4rem; }
|
||||
.nr6-ns { margin-right: -8rem; }
|
||||
.nr7-ns { margin-right: -16rem; }
|
||||
.nb1-ns { margin-bottom: -0.25rem; }
|
||||
.nb2-ns { margin-bottom: -0.5rem; }
|
||||
.nb1-ns { margin-bottom: -.25rem; }
|
||||
.nb2-ns { margin-bottom: -.5rem; }
|
||||
.nb3-ns { margin-bottom: -1rem; }
|
||||
.nb4-ns { margin-bottom: -2rem; }
|
||||
.nb5-ns { margin-bottom: -4rem; }
|
||||
.nb6-ns { margin-bottom: -8rem; }
|
||||
.nb7-ns { margin-bottom: -16rem; }
|
||||
.nt1-ns { margin-top: -0.25rem; }
|
||||
.nt2-ns { margin-top: -0.5rem; }
|
||||
.nt1-ns { margin-top: -.25rem; }
|
||||
.nt2-ns { margin-top: -.5rem; }
|
||||
.nt3-ns { margin-top: -1rem; }
|
||||
.nt4-ns { margin-top: -2rem; }
|
||||
.nt5-ns { margin-top: -4rem; }
|
||||
@ -2451,7 +2495,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.center-ns { margin-right: auto; margin-left: auto; }
|
||||
.mr-auto-ns { margin-right: auto; }
|
||||
.ml-auto-ns { margin-left: auto; }
|
||||
.clip-ns { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
|
||||
.clip-ns { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
|
||||
.ws-normal-ns { white-space: normal; }
|
||||
.nowrap-ns { white-space: nowrap; }
|
||||
.pre-ns { white-space: pre; }
|
||||
@ -2501,9 +2545,6 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
|
||||
.br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
||||
.br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; }
|
||||
.br-inherit-m { border-radius: inherit; }
|
||||
.br-initial-m { border-radius: initial; }
|
||||
.br-unset-m { border-radius: unset; }
|
||||
.b--dotted-m { border-style: dotted; }
|
||||
.b--dashed-m { border-style: dashed; }
|
||||
.b--solid-m { border-style: solid; }
|
||||
@ -2560,54 +2601,54 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.dt-column-m { display: table-column; }
|
||||
.dt-column-group-m { display: table-column-group; }
|
||||
.dt--fixed-m { table-layout: fixed; width: 100%; }
|
||||
.flex-m { display: flex; }
|
||||
.inline-flex-m { display: inline-flex; }
|
||||
.flex-auto-m { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
|
||||
.flex-none-m { flex: none; }
|
||||
.flex-column-m { flex-direction: column; }
|
||||
.flex-row-m { flex-direction: row; }
|
||||
.flex-wrap-m { flex-wrap: wrap; }
|
||||
.flex-nowrap-m { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse-m { flex-direction: column-reverse; }
|
||||
.flex-row-reverse-m { flex-direction: row-reverse; }
|
||||
.items-start-m { align-items: flex-start; }
|
||||
.items-end-m { align-items: flex-end; }
|
||||
.items-center-m { align-items: center; }
|
||||
.items-baseline-m { align-items: baseline; }
|
||||
.items-stretch-m { align-items: stretch; }
|
||||
.self-start-m { align-self: flex-start; }
|
||||
.self-end-m { align-self: flex-end; }
|
||||
.self-center-m { align-self: center; }
|
||||
.self-baseline-m { align-self: baseline; }
|
||||
.self-stretch-m { align-self: stretch; }
|
||||
.justify-start-m { justify-content: flex-start; }
|
||||
.justify-end-m { justify-content: flex-end; }
|
||||
.justify-center-m { justify-content: center; }
|
||||
.justify-between-m { justify-content: space-between; }
|
||||
.justify-around-m { justify-content: space-around; }
|
||||
.content-start-m { align-content: flex-start; }
|
||||
.content-end-m { align-content: flex-end; }
|
||||
.content-center-m { align-content: center; }
|
||||
.content-between-m { align-content: space-between; }
|
||||
.content-around-m { align-content: space-around; }
|
||||
.content-stretch-m { align-content: stretch; }
|
||||
.order-0-m { order: 0; }
|
||||
.order-1-m { order: 1; }
|
||||
.order-2-m { order: 2; }
|
||||
.order-3-m { order: 3; }
|
||||
.order-4-m { order: 4; }
|
||||
.order-5-m { order: 5; }
|
||||
.order-6-m { order: 6; }
|
||||
.order-7-m { order: 7; }
|
||||
.order-8-m { order: 8; }
|
||||
.order-last-m { order: 99999; }
|
||||
.flex-grow-0-m { flex-grow: 0; }
|
||||
.flex-grow-1-m { flex-grow: 1; }
|
||||
.flex-shrink-0-m { flex-shrink: 0; }
|
||||
.flex-shrink-1-m { flex-shrink: 1; }
|
||||
.fl-m { float: left; _display: inline; }
|
||||
.fr-m { float: right; _display: inline; }
|
||||
.flex-m { display: -webkit-box; display: -ms-flexbox; display: flex; }
|
||||
.inline-flex-m { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
|
||||
.flex-auto-m { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
|
||||
.flex-none-m { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
|
||||
.flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
|
||||
.flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
|
||||
.flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; }
|
||||
.flex-nowrap-m { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-m { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse-m { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
|
||||
.flex-row-reverse-m { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
|
||||
.items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
|
||||
.items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
|
||||
.items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
|
||||
.items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
|
||||
.items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
|
||||
.self-start-m { -ms-flex-item-align: start; align-self: flex-start; }
|
||||
.self-end-m { -ms-flex-item-align: end; align-self: flex-end; }
|
||||
.self-center-m { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
|
||||
.self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; }
|
||||
.self-stretch-m { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
|
||||
.justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
|
||||
.justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
|
||||
.justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
|
||||
.justify-between-m { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
|
||||
.justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; }
|
||||
.content-start-m { -ms-flex-line-pack: start; align-content: flex-start; }
|
||||
.content-end-m { -ms-flex-line-pack: end; align-content: flex-end; }
|
||||
.content-center-m { -ms-flex-line-pack: center; align-content: center; }
|
||||
.content-between-m { -ms-flex-line-pack: justify; align-content: space-between; }
|
||||
.content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; }
|
||||
.content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; }
|
||||
.order-0-m { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
|
||||
.order-1-m { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
|
||||
.order-2-m { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
|
||||
.order-3-m { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
|
||||
.order-4-m { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
|
||||
.order-5-m { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
|
||||
.order-6-m { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
|
||||
.order-7-m { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
|
||||
.order-8-m { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
|
||||
.order-last-m { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
|
||||
.flex-grow-0-m { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
|
||||
.flex-grow-1-m { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
|
||||
.flex-shrink-0-m { -ms-flex-negative: 0; flex-shrink: 0; }
|
||||
.flex-shrink-1-m { -ms-flex-negative: 1; flex-shrink: 1; }
|
||||
.fl-m { float: left; display: inline; }
|
||||
.fr-m { float: right; display: inline; }
|
||||
.fn-m { float: none; }
|
||||
.i-m { font-style: italic; }
|
||||
.fs-normal-m { font-style: normal; }
|
||||
@ -2675,8 +2716,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.w-80-m { width: 80%; }
|
||||
.w-90-m { width: 90%; }
|
||||
.w-100-m { width: 100%; }
|
||||
.w-third-m { width: 33.33333%; }
|
||||
.w-two-thirds-m { width: 66.66667%; }
|
||||
.w-third-m { width: calc( 100% / 3 ); }
|
||||
.w-two-thirds-m { width: calc( 100% / 1.5 ); }
|
||||
.w-auto-m { width: auto; }
|
||||
.overflow-visible-m { overflow: visible; }
|
||||
.overflow-hidden-m { overflow: hidden; }
|
||||
@ -2813,36 +2854,36 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.mh5-m { margin-left: 4rem; margin-right: 4rem; }
|
||||
.mh6-m { margin-left: 8rem; margin-right: 8rem; }
|
||||
.mh7-m { margin-left: 16rem; margin-right: 16rem; }
|
||||
.na1-m { margin: -0.25rem; }
|
||||
.na2-m { margin: -0.5rem; }
|
||||
.na1-m { margin: -.25rem; }
|
||||
.na2-m { margin: -.5rem; }
|
||||
.na3-m { margin: -1rem; }
|
||||
.na4-m { margin: -2rem; }
|
||||
.na5-m { margin: -4rem; }
|
||||
.na6-m { margin: -8rem; }
|
||||
.na7-m { margin: -16rem; }
|
||||
.nl1-m { margin-left: -0.25rem; }
|
||||
.nl2-m { margin-left: -0.5rem; }
|
||||
.nl1-m { margin-left: -.25rem; }
|
||||
.nl2-m { margin-left: -.5rem; }
|
||||
.nl3-m { margin-left: -1rem; }
|
||||
.nl4-m { margin-left: -2rem; }
|
||||
.nl5-m { margin-left: -4rem; }
|
||||
.nl6-m { margin-left: -8rem; }
|
||||
.nl7-m { margin-left: -16rem; }
|
||||
.nr1-m { margin-right: -0.25rem; }
|
||||
.nr2-m { margin-right: -0.5rem; }
|
||||
.nr1-m { margin-right: -.25rem; }
|
||||
.nr2-m { margin-right: -.5rem; }
|
||||
.nr3-m { margin-right: -1rem; }
|
||||
.nr4-m { margin-right: -2rem; }
|
||||
.nr5-m { margin-right: -4rem; }
|
||||
.nr6-m { margin-right: -8rem; }
|
||||
.nr7-m { margin-right: -16rem; }
|
||||
.nb1-m { margin-bottom: -0.25rem; }
|
||||
.nb2-m { margin-bottom: -0.5rem; }
|
||||
.nb1-m { margin-bottom: -.25rem; }
|
||||
.nb2-m { margin-bottom: -.5rem; }
|
||||
.nb3-m { margin-bottom: -1rem; }
|
||||
.nb4-m { margin-bottom: -2rem; }
|
||||
.nb5-m { margin-bottom: -4rem; }
|
||||
.nb6-m { margin-bottom: -8rem; }
|
||||
.nb7-m { margin-bottom: -16rem; }
|
||||
.nt1-m { margin-top: -0.25rem; }
|
||||
.nt2-m { margin-top: -0.5rem; }
|
||||
.nt1-m { margin-top: -.25rem; }
|
||||
.nt2-m { margin-top: -.5rem; }
|
||||
.nt3-m { margin-top: -1rem; }
|
||||
.nt4-m { margin-top: -2rem; }
|
||||
.nt5-m { margin-top: -4rem; }
|
||||
@ -2877,7 +2918,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.center-m { margin-right: auto; margin-left: auto; }
|
||||
.mr-auto-m { margin-right: auto; }
|
||||
.ml-auto-m { margin-left: auto; }
|
||||
.clip-m { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
|
||||
.clip-m { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
|
||||
.ws-normal-m { white-space: normal; }
|
||||
.nowrap-m { white-space: nowrap; }
|
||||
.pre-m { white-space: pre; }
|
||||
@ -2927,9 +2968,6 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
|
||||
.br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
||||
.br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; }
|
||||
.br-inherit-l { border-radius: inherit; }
|
||||
.br-initial-l { border-radius: initial; }
|
||||
.br-unset-l { border-radius: unset; }
|
||||
.b--dotted-l { border-style: dotted; }
|
||||
.b--dashed-l { border-style: dashed; }
|
||||
.b--solid-l { border-style: solid; }
|
||||
@ -2986,54 +3024,54 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.dt-column-l { display: table-column; }
|
||||
.dt-column-group-l { display: table-column-group; }
|
||||
.dt--fixed-l { table-layout: fixed; width: 100%; }
|
||||
.flex-l { display: flex; }
|
||||
.inline-flex-l { display: inline-flex; }
|
||||
.flex-auto-l { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
|
||||
.flex-none-l { flex: none; }
|
||||
.flex-column-l { flex-direction: column; }
|
||||
.flex-row-l { flex-direction: row; }
|
||||
.flex-wrap-l { flex-wrap: wrap; }
|
||||
.flex-nowrap-l { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse-l { flex-direction: column-reverse; }
|
||||
.flex-row-reverse-l { flex-direction: row-reverse; }
|
||||
.items-start-l { align-items: flex-start; }
|
||||
.items-end-l { align-items: flex-end; }
|
||||
.items-center-l { align-items: center; }
|
||||
.items-baseline-l { align-items: baseline; }
|
||||
.items-stretch-l { align-items: stretch; }
|
||||
.self-start-l { align-self: flex-start; }
|
||||
.self-end-l { align-self: flex-end; }
|
||||
.self-center-l { align-self: center; }
|
||||
.self-baseline-l { align-self: baseline; }
|
||||
.self-stretch-l { align-self: stretch; }
|
||||
.justify-start-l { justify-content: flex-start; }
|
||||
.justify-end-l { justify-content: flex-end; }
|
||||
.justify-center-l { justify-content: center; }
|
||||
.justify-between-l { justify-content: space-between; }
|
||||
.justify-around-l { justify-content: space-around; }
|
||||
.content-start-l { align-content: flex-start; }
|
||||
.content-end-l { align-content: flex-end; }
|
||||
.content-center-l { align-content: center; }
|
||||
.content-between-l { align-content: space-between; }
|
||||
.content-around-l { align-content: space-around; }
|
||||
.content-stretch-l { align-content: stretch; }
|
||||
.order-0-l { order: 0; }
|
||||
.order-1-l { order: 1; }
|
||||
.order-2-l { order: 2; }
|
||||
.order-3-l { order: 3; }
|
||||
.order-4-l { order: 4; }
|
||||
.order-5-l { order: 5; }
|
||||
.order-6-l { order: 6; }
|
||||
.order-7-l { order: 7; }
|
||||
.order-8-l { order: 8; }
|
||||
.order-last-l { order: 99999; }
|
||||
.flex-grow-0-l { flex-grow: 0; }
|
||||
.flex-grow-1-l { flex-grow: 1; }
|
||||
.flex-shrink-0-l { flex-shrink: 0; }
|
||||
.flex-shrink-1-l { flex-shrink: 1; }
|
||||
.fl-l { float: left; _display: inline; }
|
||||
.fr-l { float: right; _display: inline; }
|
||||
.flex-l { display: -webkit-box; display: -ms-flexbox; display: flex; }
|
||||
.inline-flex-l { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
|
||||
.flex-auto-l { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
|
||||
.flex-none-l { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
|
||||
.flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
|
||||
.flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
|
||||
.flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; }
|
||||
.flex-nowrap-l { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-l { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse-l { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
|
||||
.flex-row-reverse-l { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
|
||||
.items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
|
||||
.items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
|
||||
.items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
|
||||
.items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
|
||||
.items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
|
||||
.self-start-l { -ms-flex-item-align: start; align-self: flex-start; }
|
||||
.self-end-l { -ms-flex-item-align: end; align-self: flex-end; }
|
||||
.self-center-l { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
|
||||
.self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; }
|
||||
.self-stretch-l { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
|
||||
.justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
|
||||
.justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
|
||||
.justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
|
||||
.justify-between-l { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
|
||||
.justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; }
|
||||
.content-start-l { -ms-flex-line-pack: start; align-content: flex-start; }
|
||||
.content-end-l { -ms-flex-line-pack: end; align-content: flex-end; }
|
||||
.content-center-l { -ms-flex-line-pack: center; align-content: center; }
|
||||
.content-between-l { -ms-flex-line-pack: justify; align-content: space-between; }
|
||||
.content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; }
|
||||
.content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; }
|
||||
.order-0-l { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
|
||||
.order-1-l { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
|
||||
.order-2-l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
|
||||
.order-3-l { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
|
||||
.order-4-l { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
|
||||
.order-5-l { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
|
||||
.order-6-l { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
|
||||
.order-7-l { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
|
||||
.order-8-l { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
|
||||
.order-last-l { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
|
||||
.flex-grow-0-l { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
|
||||
.flex-grow-1-l { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
|
||||
.flex-shrink-0-l { -ms-flex-negative: 0; flex-shrink: 0; }
|
||||
.flex-shrink-1-l { -ms-flex-negative: 1; flex-shrink: 1; }
|
||||
.fl-l { float: left; display: inline; }
|
||||
.fr-l { float: right; display: inline; }
|
||||
.fn-l { float: none; }
|
||||
.i-l { font-style: italic; }
|
||||
.fs-normal-l { font-style: normal; }
|
||||
@ -3101,8 +3139,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.w-80-l { width: 80%; }
|
||||
.w-90-l { width: 90%; }
|
||||
.w-100-l { width: 100%; }
|
||||
.w-third-l { width: 33.33333%; }
|
||||
.w-two-thirds-l { width: 66.66667%; }
|
||||
.w-third-l { width: calc( 100% / 3 ); }
|
||||
.w-two-thirds-l { width: calc( 100% / 1.5 ); }
|
||||
.w-auto-l { width: auto; }
|
||||
.overflow-visible-l { overflow: visible; }
|
||||
.overflow-hidden-l { overflow: hidden; }
|
||||
@ -3239,36 +3277,36 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.mh5-l { margin-left: 4rem; margin-right: 4rem; }
|
||||
.mh6-l { margin-left: 8rem; margin-right: 8rem; }
|
||||
.mh7-l { margin-left: 16rem; margin-right: 16rem; }
|
||||
.na1-l { margin: -0.25rem; }
|
||||
.na2-l { margin: -0.5rem; }
|
||||
.na1-l { margin: -.25rem; }
|
||||
.na2-l { margin: -.5rem; }
|
||||
.na3-l { margin: -1rem; }
|
||||
.na4-l { margin: -2rem; }
|
||||
.na5-l { margin: -4rem; }
|
||||
.na6-l { margin: -8rem; }
|
||||
.na7-l { margin: -16rem; }
|
||||
.nl1-l { margin-left: -0.25rem; }
|
||||
.nl2-l { margin-left: -0.5rem; }
|
||||
.nl1-l { margin-left: -.25rem; }
|
||||
.nl2-l { margin-left: -.5rem; }
|
||||
.nl3-l { margin-left: -1rem; }
|
||||
.nl4-l { margin-left: -2rem; }
|
||||
.nl5-l { margin-left: -4rem; }
|
||||
.nl6-l { margin-left: -8rem; }
|
||||
.nl7-l { margin-left: -16rem; }
|
||||
.nr1-l { margin-right: -0.25rem; }
|
||||
.nr2-l { margin-right: -0.5rem; }
|
||||
.nr1-l { margin-right: -.25rem; }
|
||||
.nr2-l { margin-right: -.5rem; }
|
||||
.nr3-l { margin-right: -1rem; }
|
||||
.nr4-l { margin-right: -2rem; }
|
||||
.nr5-l { margin-right: -4rem; }
|
||||
.nr6-l { margin-right: -8rem; }
|
||||
.nr7-l { margin-right: -16rem; }
|
||||
.nb1-l { margin-bottom: -0.25rem; }
|
||||
.nb2-l { margin-bottom: -0.5rem; }
|
||||
.nb1-l { margin-bottom: -.25rem; }
|
||||
.nb2-l { margin-bottom: -.5rem; }
|
||||
.nb3-l { margin-bottom: -1rem; }
|
||||
.nb4-l { margin-bottom: -2rem; }
|
||||
.nb5-l { margin-bottom: -4rem; }
|
||||
.nb6-l { margin-bottom: -8rem; }
|
||||
.nb7-l { margin-bottom: -16rem; }
|
||||
.nt1-l { margin-top: -0.25rem; }
|
||||
.nt2-l { margin-top: -0.5rem; }
|
||||
.nt1-l { margin-top: -.25rem; }
|
||||
.nt2-l { margin-top: -.5rem; }
|
||||
.nt3-l { margin-top: -1rem; }
|
||||
.nt4-l { margin-top: -2rem; }
|
||||
.nt5-l { margin-top: -4rem; }
|
||||
@ -3303,7 +3341,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
||||
.center-l { margin-right: auto; margin-left: auto; }
|
||||
.mr-auto-l { margin-right: auto; }
|
||||
.ml-auto-l { margin-left: auto; }
|
||||
.clip-l { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
|
||||
.clip-l { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
|
||||
.ws-normal-l { white-space: normal; }
|
||||
.nowrap-l { white-space: nowrap; }
|
||||
.pre-l { white-space: pre; }
|
||||
|
||||
4
css/tachyons.min.css
vendored
4
css/tachyons.min.css
vendored
File diff suppressed because one or more lines are too long
2
license
2
license
@ -1,7 +1,5 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright © 2020 Adam Morse & John Otander
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
321
llms.txt
321
llms.txt
@ -1,321 +0,0 @@
|
||||
# Tachyons CSS
|
||||
|
||||
> Functional CSS for humans. Quickly build and design new UI without writing CSS.
|
||||
|
||||
Tachyons is a functional/atomic CSS framework that provides single-purpose utility classes. Instead of writing custom CSS, you compose classes directly in HTML to style elements. The framework is mobile-first, lightweight (~14kB), and optimized for maximum gzip compression.
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
/css/ # Compiled CSS output
|
||||
tachyons.css # Full compiled CSS
|
||||
tachyons.min.css # Minified production CSS
|
||||
|
||||
/src/ # Source CSS modules (PostCSS)
|
||||
tachyons.css # Main entry point that imports all modules
|
||||
_*.css # Individual module files (prefixed with underscore)
|
||||
```
|
||||
|
||||
## Core Principles
|
||||
|
||||
- Everything should be 100% responsive
|
||||
- Single-purpose class structure (one class = one CSS property)
|
||||
- Mobile-first CSS architecture
|
||||
- 8px baseline grid for spacing
|
||||
- Designing in the browser should be easy
|
||||
- Changes to one interface shouldn't break others
|
||||
|
||||
## Naming Conventions
|
||||
|
||||
Tachyons uses abbreviated class names following consistent patterns:
|
||||
|
||||
### Base + Modifier Pattern
|
||||
Classes follow the pattern: `{property}{value}` or `{property}{direction}{value}`
|
||||
|
||||
Examples:
|
||||
- `pa3` = padding-all: 1rem
|
||||
- `mt2` = margin-top: 0.5rem
|
||||
- `f4` = font-size: 1.25rem
|
||||
- `w-50` = width: 50%
|
||||
|
||||
### Responsive Suffixes
|
||||
All classes support responsive variants via breakpoint suffixes:
|
||||
|
||||
| Suffix | Breakpoint | Description |
|
||||
|--------|------------|-------------|
|
||||
| (none) | All | Mobile-first base styles |
|
||||
| `-ns` | ≥30em (480px) | Not small (medium and up) |
|
||||
| `-m` | 30em–60em | Medium only |
|
||||
| `-l` | ≥60em (960px) | Large and up |
|
||||
|
||||
Example: `dn db-ns` = display:none on mobile, display:block on medium+
|
||||
|
||||
## Spacing Scale
|
||||
|
||||
Uses powers of two scale (8px baseline):
|
||||
|
||||
| Step | Value | CSS Variable |
|
||||
|------|-------|--------------|
|
||||
| 0 | 0 | --spacing-none |
|
||||
| 1 | 0.25rem (4px) | --spacing-extra-small |
|
||||
| 2 | 0.5rem (8px) | --spacing-small |
|
||||
| 3 | 1rem (16px) | --spacing-medium |
|
||||
| 4 | 2rem (32px) | --spacing-large |
|
||||
| 5 | 4rem (64px) | --spacing-extra-large |
|
||||
| 6 | 8rem (128px) | --spacing-extra-extra-large |
|
||||
| 7 | 16rem (256px) | --spacing-extra-extra-extra-large |
|
||||
|
||||
### Spacing Classes
|
||||
- **Padding**: `pa`, `pl`, `pr`, `pt`, `pb`, `pv` (vertical), `ph` (horizontal)
|
||||
- **Margin**: `ma`, `ml`, `mr`, `mt`, `mb`, `mv` (vertical), `mh` (horizontal)
|
||||
|
||||
Examples: `pa3`, `mt4`, `ph2-ns`, `mb0-l`
|
||||
|
||||
## Type Scale
|
||||
|
||||
| Class | Size |
|
||||
|-------|------|
|
||||
| `.f-headline`, `.f-6` | 6rem |
|
||||
| `.f-subheadline`, `.f-5` | 5rem |
|
||||
| `.f1` | 3rem |
|
||||
| `.f2` | 2.25rem |
|
||||
| `.f3` | 1.5rem |
|
||||
| `.f4` | 1.25rem |
|
||||
| `.f5` | 1rem |
|
||||
| `.f6` | 0.875rem |
|
||||
| `.f7` | 0.75rem (use sparingly) |
|
||||
|
||||
## Width Scale
|
||||
|
||||
### Fixed Widths (powers of 2)
|
||||
| Class | Width |
|
||||
|-------|-------|
|
||||
| `.w1` | 1rem |
|
||||
| `.w2` | 2rem |
|
||||
| `.w3` | 4rem |
|
||||
| `.w4` | 8rem |
|
||||
| `.w5` | 16rem |
|
||||
|
||||
### Percentage Widths
|
||||
`.w-10`, `.w-20`, `.w-25`, `.w-30`, `.w-33`, `.w-34`, `.w-40`, `.w-50`, `.w-60`, `.w-70`, `.w-75`, `.w-80`, `.w-90`, `.w-100`
|
||||
|
||||
Also: `.w-third`, `.w-two-thirds`, `.w-auto`
|
||||
|
||||
## Color System
|
||||
|
||||
### Grayscale
|
||||
`black`, `near-black`, `dark-gray`, `mid-gray`, `gray`, `silver`, `light-silver`, `moon-gray`, `light-gray`, `near-white`, `white`
|
||||
|
||||
### Transparency
|
||||
- Black: `black-90` through `black-05` (90% to 5% opacity)
|
||||
- White: `white-90` through `white-10`
|
||||
|
||||
### Colors
|
||||
`dark-red`, `red`, `light-red`, `orange`, `gold`, `yellow`, `light-yellow`, `purple`, `light-purple`, `dark-pink`, `hot-pink`, `pink`, `light-pink`, `dark-green`, `green`, `light-green`, `navy`, `dark-blue`, `blue`, `light-blue`, `lightest-blue`, `washed-blue`, `washed-green`, `washed-yellow`, `washed-red`
|
||||
|
||||
### Color Classes
|
||||
- **Text color**: Use color name directly (e.g., `blue`, `dark-gray`)
|
||||
- **Background**: Prefix with `bg-` (e.g., `bg-blue`, `bg-dark-gray`)
|
||||
- **Border**: Prefix with `b--` (e.g., `b--blue`, `b--dark-gray`)
|
||||
|
||||
## Common Class Categories
|
||||
|
||||
### Display
|
||||
`dn` (none), `di` (inline), `db` (block), `dib` (inline-block), `dt` (table), `dtc` (table-cell), `flex`, `inline-flex`
|
||||
|
||||
### Flexbox
|
||||
- Container: `flex`, `inline-flex`, `flex-column`, `flex-row`, `flex-wrap`
|
||||
- Alignment: `items-center`, `items-start`, `items-end`, `items-baseline`, `items-stretch`
|
||||
- Justify: `justify-center`, `justify-start`, `justify-end`, `justify-between`, `justify-around`
|
||||
- Self: `self-center`, `self-start`, `self-end`
|
||||
- Flex: `flex-auto`, `flex-none`, `flex-grow-0`, `flex-grow-1`, `flex-shrink-0`, `flex-shrink-1`
|
||||
- Order: `order-0` through `order-8`, `order-last`
|
||||
|
||||
### Position
|
||||
`static`, `relative`, `absolute`, `fixed`, `sticky`
|
||||
|
||||
### Coordinates
|
||||
`top-0`, `right-0`, `bottom-0`, `left-0`, `top-1`, `top-2`, etc.
|
||||
|
||||
### Border Radius
|
||||
`br0`, `br1`, `br2`, `br3`, `br4`, `br-100` (circle), `br-pill` (rounded pill)
|
||||
Directional: `br--top`, `br--bottom`, `br--left`, `br--right`
|
||||
|
||||
### Borders
|
||||
- Width: `bw0`, `bw1`, `bw2`, `bw3`, `bw4`, `bw5`
|
||||
- Style: `b--solid`, `b--dashed`, `b--dotted`, `b--none`
|
||||
- Sides: `ba` (all), `bt` (top), `br` (right), `bb` (bottom), `bl` (left), `bn` (none)
|
||||
|
||||
### Typography
|
||||
- Weight: `fw1` (100) through `fw9` (900), `normal`, `b` (bold)
|
||||
- Style: `i` (italic), `fs-normal`
|
||||
- Alignment: `tl` (left), `tr` (right), `tc` (center), `tj` (justify)
|
||||
- Transform: `ttc` (capitalize), `ttl` (lowercase), `ttu` (uppercase), `ttn` (none)
|
||||
- Decoration: `no-underline`, `underline`, `strike`
|
||||
- Line height: `lh-solid` (1), `lh-title` (1.25), `lh-copy` (1.5)
|
||||
- Letter spacing: `tracked`, `tracked-tight`, `tracked-mega`
|
||||
|
||||
### Visibility
|
||||
`o-0` through `o-100` (opacity), `v-hidden`, `v-visible`, `clip` (visually hidden)
|
||||
|
||||
### Overflow
|
||||
`overflow-visible`, `overflow-hidden`, `overflow-scroll`, `overflow-auto`
|
||||
X/Y: `overflow-x-visible`, `overflow-y-hidden`, etc.
|
||||
|
||||
### Heights
|
||||
Fixed: `h1`, `h2`, `h3`, `h4`, `h5` (1rem to 16rem)
|
||||
Percentage: `h-25`, `h-50`, `h-75`, `h-100`
|
||||
Viewport: `vh-25`, `vh-50`, `vh-75`, `vh-100`, `min-vh-100`
|
||||
|
||||
### Max Width
|
||||
`mw1` through `mw9`, `mw-100`, `mw-none`
|
||||
|
||||
### Z-Index
|
||||
`z-0`, `z-1`, `z-2`, `z-3`, `z-4`, `z-5`, `z-999`, `z-9999`, `z-max`, `z-inherit`, `z-initial`, `z-unset`
|
||||
|
||||
### Floats & Clears
|
||||
`fl` (left), `fr` (right), `fn` (none), `cf` (clearfix)
|
||||
|
||||
### Lists
|
||||
`list` (removes default styling)
|
||||
|
||||
### Box Sizing
|
||||
`border-box` (applied globally via `*`)
|
||||
|
||||
### Hovers
|
||||
Prefix with `hover-` for hover states: `hover-bg-blue`, `hover-black`, etc.
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Card Component
|
||||
```html
|
||||
<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
|
||||
<div class="tc">
|
||||
<img src="avatar.jpg" class="br-100 h4 w4 dib ba b--black-05 pa2">
|
||||
<h1 class="f3 mb2">Jane Doe</h1>
|
||||
<h2 class="f5 fw4 gray mt0">Designer</h2>
|
||||
</div>
|
||||
</article>
|
||||
```
|
||||
|
||||
### Responsive Navigation
|
||||
```html
|
||||
<nav class="flex flex-column flex-row-ns justify-between items-center pa3">
|
||||
<a class="f4 fw6 link black">Logo</a>
|
||||
<div class="flex flex-column flex-row-ns">
|
||||
<a class="link black pa2">About</a>
|
||||
<a class="link black pa2">Work</a>
|
||||
<a class="link black pa2">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### Button
|
||||
```html
|
||||
<a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-blue">
|
||||
Click Me
|
||||
</a>
|
||||
```
|
||||
|
||||
### Responsive Grid
|
||||
```html
|
||||
<div class="cf">
|
||||
<div class="fl w-100 w-50-m w-25-l pa2">Column 1</div>
|
||||
<div class="fl w-100 w-50-m w-25-l pa2">Column 2</div>
|
||||
<div class="fl w-100 w-50-m w-25-l pa2">Column 3</div>
|
||||
<div class="fl w-100 w-50-m w-25-l pa2">Column 4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Flexbox Grid
|
||||
```html
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-100 w-50-m w-25-l pa2">Column 1</div>
|
||||
<div class="w-100 w-50-m w-25-l pa2">Column 2</div>
|
||||
<div class="w-100 w-50-m w-25-l pa2">Column 3</div>
|
||||
<div class="w-100 w-50-m w-25-l pa2">Column 4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Build Commands
|
||||
|
||||
```bash
|
||||
npm install # Install dependencies
|
||||
npm start # Build and watch for changes
|
||||
npm run build # Build CSS once
|
||||
npm run mutations # Check for class mutations/redefinitions
|
||||
```
|
||||
|
||||
## CDN Usage
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
|
||||
```
|
||||
|
||||
## Source Modules
|
||||
|
||||
The source is organized into focused single-responsibility modules:
|
||||
|
||||
| Module | Description |
|
||||
|--------|-------------|
|
||||
| `_normalize.css` | CSS reset/normalization |
|
||||
| `_box-sizing.css` | Border-box sizing |
|
||||
| `_spacing.css` | Margin and padding |
|
||||
| `_type-scale.css` | Font sizes |
|
||||
| `_typography.css` | Font families, measures |
|
||||
| `_widths.css` | Width utilities |
|
||||
| `_heights.css` | Height utilities |
|
||||
| `_max-widths.css` | Max-width utilities |
|
||||
| `_display.css` | Display properties |
|
||||
| `_flexbox.css` | Flexbox utilities |
|
||||
| `_position.css` | Position utilities |
|
||||
| `_coordinates.css` | Top/right/bottom/left |
|
||||
| `_floats.css` | Float utilities |
|
||||
| `_colors.css` | CSS color variables |
|
||||
| `_skins.css` | Text and background colors |
|
||||
| `_border-colors.css` | Border colors |
|
||||
| `_borders.css` | Border utilities |
|
||||
| `_border-radius.css` | Border radius |
|
||||
| `_border-widths.css` | Border widths |
|
||||
| `_border-style.css` | Border styles |
|
||||
| `_box-shadow.css` | Box shadows |
|
||||
| `_opacity.css` | Opacity utilities |
|
||||
| `_overflow.css` | Overflow utilities |
|
||||
| `_visibility.css` | Visibility utilities |
|
||||
| `_z-index.css` | Z-index scale |
|
||||
| `_hovers.css` | Hover state utilities |
|
||||
| `_font-family.css` | Font stacks |
|
||||
| `_font-weight.css` | Font weights |
|
||||
| `_font-style.css` | Italic/normal |
|
||||
| `_line-height.css` | Line heights |
|
||||
| `_letter-spacing.css` | Letter spacing |
|
||||
| `_text-align.css` | Text alignment |
|
||||
| `_text-transform.css` | Text transforms |
|
||||
| `_text-decoration.css` | Underlines, etc. |
|
||||
| `_vertical-align.css` | Vertical alignment |
|
||||
| `_white-space.css` | White space handling |
|
||||
| `_word-break.css` | Word breaking |
|
||||
| `_aspect-ratios.css` | Aspect ratio containers |
|
||||
| `_images.css` | Image utilities |
|
||||
| `_background-size.css` | Background sizing |
|
||||
| `_background-position.css` | Background positioning |
|
||||
| `_lists.css` | List styling |
|
||||
| `_tables.css` | Table utilities |
|
||||
| `_forms.css` | Form element resets |
|
||||
| `_utilities.css` | Misc utilities |
|
||||
| `_negative-margins.css` | Negative margin utilities |
|
||||
| `_debug.css` | Layout debugging |
|
||||
| `_debug-children.css` | Debug children outlines |
|
||||
| `_debug-grid.css` | Grid overlay debugging |
|
||||
| `_media-queries.css` | Breakpoint definitions |
|
||||
|
||||
## Key CSS Variables
|
||||
|
||||
Spacing, colors, and breakpoints are defined as CSS custom properties in their respective modules. Override these in your own CSS to customize the design system.
|
||||
|
||||
## Documentation
|
||||
|
||||
Full documentation: http://tachyons.io/docs
|
||||
Component library: http://tachyons.io/components
|
||||
GitHub: https://github.com/tachyons-css/tachyons
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tachyons",
|
||||
"version": "4.12.0",
|
||||
"version": "4.9.1",
|
||||
"description": "Functional CSS for humans",
|
||||
"author": "mrmrs",
|
||||
"style": "css/tachyons.min.css",
|
||||
@ -23,9 +23,9 @@
|
||||
"devDependencies": {
|
||||
"copy-files": "^0.1.0",
|
||||
"immutable-css-cli": "^1.1.1",
|
||||
"normalize.css": "^8.0.0",
|
||||
"normalize.css": "^7.0.0",
|
||||
"tachyons-modules": "^1.1.10",
|
||||
"tachyons-cli": "^1.3.2",
|
||||
"tachyons-cli": "^1.0.11",
|
||||
"watch": "^1.0.2"
|
||||
},
|
||||
"contributors": [
|
||||
@ -43,7 +43,7 @@
|
||||
"mutations": "immutable-css src/tachyons.css --strict",
|
||||
"build": "npm run build:css && npm run build:minify",
|
||||
"build:css": "tachyons src/tachyons.css > css/tachyons.css",
|
||||
"build:minify": "tachyons src/tachyons.css --minify > css/tachyons.min.css",
|
||||
"build:minify": "tachyons src/tachyons.css -m > css/tachyons.min.css",
|
||||
"build:watch": "watch \"npm run build\" ./src/"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# TACHYONS
|
||||
|
||||
Functional CSS for humans.
|
||||
Functional css for humans.
|
||||
|
||||
Quickly build and design new UI without writing CSS.
|
||||
Quickly build and design new UI without writing css.
|
||||
|
||||
## Principles
|
||||
|
||||
@ -13,12 +13,12 @@ Quickly build and design new UI without writing CSS.
|
||||
* It should be easy to change any interface or part of an interface without breaking any existing interfaces
|
||||
* Doing one thing extremely well promotes reusability and reduces repetition
|
||||
* Documentation helps promote reusability and shared knowledge
|
||||
* CSS shouldn't impede accessibility or the default functionality of HTML
|
||||
* Css shouldn't impede accessibility or the default functionality of Html
|
||||
* You should send the smallest possible amount of code to the user
|
||||
|
||||
## Features
|
||||
|
||||
* Mobile-first CSS architecture
|
||||
* Mobile-first css architecture
|
||||
* 490 accessible color combinations
|
||||
* 8px baseline grid
|
||||
* Multiple debugging utilities to reduce layout struggles
|
||||
@ -27,27 +27,32 @@ Quickly build and design new UI without writing CSS.
|
||||
* Lightweight (~14kB)
|
||||
* Usable across projects
|
||||
* Growing open source component library
|
||||
* Works well with plain HTML, React, Ember, Angular, Rails and more
|
||||
* Works well with plain html, react, ember, angular, rails, and more
|
||||
* Infinitely nestable responsive grid system
|
||||
* Built with PostCSS
|
||||
* Built with Postcss
|
||||
|
||||
## Getting Started
|
||||
## Getting started
|
||||
|
||||
Docs can be found at http://tachyons.io/docs
|
||||
The modules are generally pretty small and thus quick and easy to read.
|
||||
|
||||
### Use the CDN
|
||||
|
||||
The quickest and easiest way to start using Tachyons is to include a reference
|
||||
to the minified file in the head of your HTML file.
|
||||
The quickest and easiest way to start using tachyons is to include a reference
|
||||
to the minified file in the head of your html file.
|
||||
|
||||
You can always grab the latest version with
|
||||
```html
|
||||
<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
|
||||
```
|
||||
You can also specify a specific version. The latest version is 4.9.1
|
||||
```html
|
||||
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.9.1/css/tachyons.min.css">
|
||||
```
|
||||
|
||||
### Local Setup
|
||||
|
||||
Clone the repo from Github and install dependencies through npm.
|
||||
Clone the repo from github and install dependencies through npm.
|
||||
|
||||
```
|
||||
git clone https://github.com/tachyons-css/tachyons.git
|
||||
@ -59,36 +64,30 @@ npm install
|
||||
|
||||
If you want to just use everything in tachyons/src as a jumping off point and
|
||||
edit all the code yourself, you can compile all of your wonderful changes by
|
||||
running:
|
||||
running
|
||||
|
||||
```npm start```
|
||||
|
||||
This will output both minified and unminified versions of the CSS to the CSS directory and watch the src directory for changes.
|
||||
This will output both minified and unminified versions of the css to the css directory and watch the src directory for changes.
|
||||
It's aliased to the command:
|
||||
|
||||
```npm run build:watch```
|
||||
|
||||
If you'd like to just build the CSS once without watching the src directory, run:
|
||||
If you'd like to just build the css once without watching the src directory run
|
||||
|
||||
```npm run build```
|
||||
|
||||
If you want to check that a class hasn't been redefined or 'mutated,' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own CSS and want to make sure there are no naming collisions. To do this run the command:
|
||||
If you want to check that a class hasn't been redefined or 'mutated' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own css and want to make sure there are no naming collisions. To do this run the command
|
||||
|
||||
```npm run mutations```
|
||||
|
||||
## Docs
|
||||
|
||||
The tachyons docs located at http://tachyons.io are all open source and located at https://github.com/tachyons-css/tachyons-css.github.io
|
||||
|
||||
You can clone the docs and use them as a template for documenting your own design system / patterns / components.
|
||||
While not everything is automated, the component library generation makes it extremely easy to
|
||||
generate and organize the documentation for components as demonstrated at http://tachyons.io/components
|
||||
|
||||
### Community Resources
|
||||
|
||||
- [DWYL Learn Tachyons](https://github.com/dwyl/learn-tachyons): Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS
|
||||
- [Tachyons TLDR](https://tachyons-tldr.now.sh/#/classes): Quick lookup for Tachyons classes, scales and color palette
|
||||
- [Tachyons Pro](https://tachyonspro.netlify.app/): Fun quiz for memorizing class names
|
||||
|
||||
## Contributing
|
||||
|
||||
@ -97,22 +96,45 @@ Please read our [code of conduct](https://github.com/tachyons-css/tachyons/blob/
|
||||
## Tachyons in Production
|
||||
|
||||
A longer list of sites that use tachyons in production can be found in sites.md
|
||||
We love letting the community see what people are building. Please add your link to sites.md in a PR or by opening an issue if you're willing to share to your site or project.
|
||||
We love letting the community see what people are building so please add your link to sites.md in a PR or by opening an issue if you're willing to share to your site or project.
|
||||
|
||||
**Featured Sites**
|
||||
|
||||
* https://interfacelovers.com
|
||||
* https://npmjs.com
|
||||
* https://womenwho.design
|
||||
* https://friendstalkfrontend.com
|
||||
* https://play.webvr.rocks
|
||||
* https://gohugo.io
|
||||
* https://coralproject.net
|
||||
* http://www.philipyoungg.com
|
||||
* https://gitpoint.co
|
||||
* https://2017.nodeconf.com.ar
|
||||
* https://goldenstaterecord.com
|
||||
* http://hicuties.com
|
||||
* https://urlbox.io
|
||||
* https://fontawesome.com
|
||||
* https://purple3.herokuapp.com
|
||||
* http://blunt.af/tachy.app/
|
||||
* https://fenderdigital.github.io/css-utilities/intro/
|
||||
* https://play.cash
|
||||
* https://bitmidi.com
|
||||
|
||||
And of course...
|
||||
* http://tachyons.io
|
||||
|
||||
## Sponsors
|
||||
|
||||
Development of Tachyons is supported by
|
||||
|
||||
* [Digital Ocean](https://digitalocean.com)
|
||||
* [DWYL](https://dwyl.com)
|
||||
* [VTEX](https://lab.vtex.com)
|
||||
* [Manifold](https://manifold.co)
|
||||
|
||||
## Help
|
||||
|
||||
If you have a question or need help feel free to [open an issue here](https://github.com/tachyons-css/tachyons/issues/new) or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com).
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
17
sites.md
17
sites.md
@ -1,6 +1,4 @@
|
||||
* https://gohugo.io
|
||||
* https://npmjs.com
|
||||
* https://www.offen.dev
|
||||
* https://interfacelovers.com
|
||||
* https://friendstalkfrontend.com
|
||||
* http://www.philipyoungg.com
|
||||
@ -22,7 +20,7 @@
|
||||
* https://segment.com
|
||||
* http://hicuties.com
|
||||
* https://urlbox.io
|
||||
* https://loronarecords.com
|
||||
* https://loronarecords.com
|
||||
* https://community.algolia.com/wordpress/
|
||||
* http://studiocraft.cc
|
||||
* http://samueldregan.com
|
||||
@ -96,16 +94,3 @@
|
||||
* https://gaest.com
|
||||
* https://aravindh.net
|
||||
* https://www.starklabs.io/
|
||||
* https://pylon.design
|
||||
* https://lasttramfrom.com/
|
||||
* https://www.stepahead.de
|
||||
* https://cryptocurrencyjobs.co/
|
||||
* https://foundlo.st
|
||||
* https://jjude.com
|
||||
* http://www.spokesman.com
|
||||
* https://beta.observablehq.com/
|
||||
* https://www.medienblau.de
|
||||
* https://c.atet.in
|
||||
* https://tools.kaklabs.com
|
||||
* https://eppendocs.de
|
||||
* https://sparrowmobile.com/
|
||||
|
||||
@ -84,5 +84,3 @@
|
||||
|
||||
.b--transparent { border-color: var(--transparent); }
|
||||
.b--inherit { border-color: inherit; }
|
||||
.b--initial { border-color: initial; }
|
||||
.b--unset { border-color: unset; }
|
||||
|
||||
@ -47,9 +47,6 @@
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.br-inherit { border-radius: inherit; }
|
||||
.br-initial { border-radius: initial; }
|
||||
.br-unset { border-radius: unset; }
|
||||
|
||||
@media (--breakpoint-not-small) {
|
||||
.br0-ns { border-radius: 0; }
|
||||
@ -75,9 +72,6 @@
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.br-inherit-ns { border-radius: inherit; }
|
||||
.br-initial-ns { border-radius: initial; }
|
||||
.br-unset-ns { border-radius: unset; }
|
||||
}
|
||||
|
||||
@media (--breakpoint-medium) {
|
||||
@ -104,9 +98,6 @@
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.br-inherit-m { border-radius: inherit; }
|
||||
.br-initial-m { border-radius: initial; }
|
||||
.br-unset-m { border-radius: unset; }
|
||||
}
|
||||
|
||||
@media (--breakpoint-large) {
|
||||
@ -133,7 +124,4 @@
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.br-inherit-l { border-radius: inherit; }
|
||||
.br-initial-l { border-radius: initial; }
|
||||
.br-unset-l { border-radius: unset; }
|
||||
}
|
||||
|
||||
@ -28,172 +28,172 @@
|
||||
|
||||
|
||||
|
||||
.na1 { margin: calc(-1 * var(--spacing-extra-small)); }
|
||||
.na2 { margin: calc(-1 * var(--spacing-small)); }
|
||||
.na3 { margin: calc(-1 * var(--spacing-medium)); }
|
||||
.na4 { margin: calc(-1 * var(--spacing-large)); }
|
||||
.na5 { margin: calc(-1 * var(--spacing-extra-large)); }
|
||||
.na6 { margin: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.na7 { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.na1 { margin: -var(--spacing-extra-small); }
|
||||
.na2 { margin: -var(--spacing-small); }
|
||||
.na3 { margin: -var(--spacing-medium); }
|
||||
.na4 { margin: -var(--spacing-large); }
|
||||
.na5 { margin: -var(--spacing-extra-large); }
|
||||
.na6 { margin: -var(--spacing-extra-extra-large); }
|
||||
.na7 { margin: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nl1 { margin-left: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nl2 { margin-left: calc(-1 * var(--spacing-small)); }
|
||||
.nl3 { margin-left: calc(-1 * var(--spacing-medium)); }
|
||||
.nl4 { margin-left: calc(-1 * var(--spacing-large)); }
|
||||
.nl5 { margin-left: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nl6 { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nl7 { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nl1 { margin-left: -var(--spacing-extra-small); }
|
||||
.nl2 { margin-left: -var(--spacing-small); }
|
||||
.nl3 { margin-left: -var(--spacing-medium); }
|
||||
.nl4 { margin-left: -var(--spacing-large); }
|
||||
.nl5 { margin-left: -var(--spacing-extra-large); }
|
||||
.nl6 { margin-left: -var(--spacing-extra-extra-large); }
|
||||
.nl7 { margin-left: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nr1 { margin-right: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nr2 { margin-right: calc(-1 * var(--spacing-small)); }
|
||||
.nr3 { margin-right: calc(-1 * var(--spacing-medium)); }
|
||||
.nr4 { margin-right: calc(-1 * var(--spacing-large)); }
|
||||
.nr5 { margin-right: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nr6 { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nr7 { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nr1 { margin-right: -var(--spacing-extra-small); }
|
||||
.nr2 { margin-right: -var(--spacing-small); }
|
||||
.nr3 { margin-right: -var(--spacing-medium); }
|
||||
.nr4 { margin-right: -var(--spacing-large); }
|
||||
.nr5 { margin-right: -var(--spacing-extra-large); }
|
||||
.nr6 { margin-right: -var(--spacing-extra-extra-large); }
|
||||
.nr7 { margin-right: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nb1 { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nb2 { margin-bottom: calc(-1 * var(--spacing-small)); }
|
||||
.nb3 { margin-bottom: calc(-1 * var(--spacing-medium)); }
|
||||
.nb4 { margin-bottom: calc(-1 * var(--spacing-large)); }
|
||||
.nb5 { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nb6 { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nb7 { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nb1 { margin-bottom: -var(--spacing-extra-small); }
|
||||
.nb2 { margin-bottom: -var(--spacing-small); }
|
||||
.nb3 { margin-bottom: -var(--spacing-medium); }
|
||||
.nb4 { margin-bottom: -var(--spacing-large); }
|
||||
.nb5 { margin-bottom: -var(--spacing-extra-large); }
|
||||
.nb6 { margin-bottom: -var(--spacing-extra-extra-large); }
|
||||
.nb7 { margin-bottom: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nt1 { margin-top: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nt2 { margin-top: calc(-1 * var(--spacing-small)); }
|
||||
.nt3 { margin-top: calc(-1 * var(--spacing-medium)); }
|
||||
.nt4 { margin-top: calc(-1 * var(--spacing-large)); }
|
||||
.nt5 { margin-top: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nt6 { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nt7 { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nt1 { margin-top: -var(--spacing-extra-small); }
|
||||
.nt2 { margin-top: -var(--spacing-small); }
|
||||
.nt3 { margin-top: -var(--spacing-medium); }
|
||||
.nt4 { margin-top: -var(--spacing-large); }
|
||||
.nt5 { margin-top: -var(--spacing-extra-large); }
|
||||
.nt6 { margin-top: -var(--spacing-extra-extra-large); }
|
||||
.nt7 { margin-top: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
@media (--breakpoint-not-small) {
|
||||
|
||||
.na1-ns { margin: calc(-1 * var(--spacing-extra-small)); }
|
||||
.na2-ns { margin: calc(-1 * var(--spacing-small)); }
|
||||
.na3-ns { margin: calc(-1 * var(--spacing-medium)); }
|
||||
.na4-ns { margin: calc(-1 * var(--spacing-large)); }
|
||||
.na5-ns { margin: calc(-1 * var(--spacing-extra-large)); }
|
||||
.na6-ns { margin: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.na7-ns { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.na1-ns { margin: -var(--spacing-extra-small); }
|
||||
.na2-ns { margin: -var(--spacing-small); }
|
||||
.na3-ns { margin: -var(--spacing-medium); }
|
||||
.na4-ns { margin: -var(--spacing-large); }
|
||||
.na5-ns { margin: -var(--spacing-extra-large); }
|
||||
.na6-ns { margin: -var(--spacing-extra-extra-large); }
|
||||
.na7-ns { margin: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nl1-ns { margin-left: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nl2-ns { margin-left: calc(-1 * var(--spacing-small)); }
|
||||
.nl3-ns { margin-left: calc(-1 * var(--spacing-medium)); }
|
||||
.nl4-ns { margin-left: calc(-1 * var(--spacing-large)); }
|
||||
.nl5-ns { margin-left: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nl6-ns { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nl7-ns { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nl1-ns { margin-left: -var(--spacing-extra-small); }
|
||||
.nl2-ns { margin-left: -var(--spacing-small); }
|
||||
.nl3-ns { margin-left: -var(--spacing-medium); }
|
||||
.nl4-ns { margin-left: -var(--spacing-large); }
|
||||
.nl5-ns { margin-left: -var(--spacing-extra-large); }
|
||||
.nl6-ns { margin-left: -var(--spacing-extra-extra-large); }
|
||||
.nl7-ns { margin-left: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nr1-ns { margin-right: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nr2-ns { margin-right: calc(-1 * var(--spacing-small)); }
|
||||
.nr3-ns { margin-right: calc(-1 * var(--spacing-medium)); }
|
||||
.nr4-ns { margin-right: calc(-1 * var(--spacing-large)); }
|
||||
.nr5-ns { margin-right: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nr6-ns { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nr7-ns { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nr1-ns { margin-right: -var(--spacing-extra-small); }
|
||||
.nr2-ns { margin-right: -var(--spacing-small); }
|
||||
.nr3-ns { margin-right: -var(--spacing-medium); }
|
||||
.nr4-ns { margin-right: -var(--spacing-large); }
|
||||
.nr5-ns { margin-right: -var(--spacing-extra-large); }
|
||||
.nr6-ns { margin-right: -var(--spacing-extra-extra-large); }
|
||||
.nr7-ns { margin-right: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nb1-ns { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nb2-ns { margin-bottom: calc(-1 * var(--spacing-small)); }
|
||||
.nb3-ns { margin-bottom: calc(-1 * var(--spacing-medium)); }
|
||||
.nb4-ns { margin-bottom: calc(-1 * var(--spacing-large)); }
|
||||
.nb5-ns { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nb6-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nb7-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nb1-ns { margin-bottom: -var(--spacing-extra-small); }
|
||||
.nb2-ns { margin-bottom: -var(--spacing-small); }
|
||||
.nb3-ns { margin-bottom: -var(--spacing-medium); }
|
||||
.nb4-ns { margin-bottom: -var(--spacing-large); }
|
||||
.nb5-ns { margin-bottom: -var(--spacing-extra-large); }
|
||||
.nb6-ns { margin-bottom: -var(--spacing-extra-extra-large); }
|
||||
.nb7-ns { margin-bottom: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nt1-ns { margin-top: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nt2-ns { margin-top: calc(-1 * var(--spacing-small)); }
|
||||
.nt3-ns { margin-top: calc(-1 * var(--spacing-medium)); }
|
||||
.nt4-ns { margin-top: calc(-1 * var(--spacing-large)); }
|
||||
.nt5-ns { margin-top: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nt6-ns { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nt7-ns { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nt1-ns { margin-top: -var(--spacing-extra-small); }
|
||||
.nt2-ns { margin-top: -var(--spacing-small); }
|
||||
.nt3-ns { margin-top: -var(--spacing-medium); }
|
||||
.nt4-ns { margin-top: -var(--spacing-large); }
|
||||
.nt5-ns { margin-top: -var(--spacing-extra-large); }
|
||||
.nt6-ns { margin-top: -var(--spacing-extra-extra-large); }
|
||||
.nt7-ns { margin-top: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
}
|
||||
|
||||
@media (--breakpoint-medium) {
|
||||
.na1-m { margin: calc(-1 * var(--spacing-extra-small)); }
|
||||
.na2-m { margin: calc(-1 * var(--spacing-small)); }
|
||||
.na3-m { margin: calc(-1 * var(--spacing-medium)); }
|
||||
.na4-m { margin: calc(-1 * var(--spacing-large)); }
|
||||
.na5-m { margin: calc(-1 * var(--spacing-extra-large)); }
|
||||
.na6-m { margin: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.na7-m { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.na1-m { margin: -var(--spacing-extra-small); }
|
||||
.na2-m { margin: -var(--spacing-small); }
|
||||
.na3-m { margin: -var(--spacing-medium); }
|
||||
.na4-m { margin: -var(--spacing-large); }
|
||||
.na5-m { margin: -var(--spacing-extra-large); }
|
||||
.na6-m { margin: -var(--spacing-extra-extra-large); }
|
||||
.na7-m { margin: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nl1-m { margin-left: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nl2-m { margin-left: calc(-1 * var(--spacing-small)); }
|
||||
.nl3-m { margin-left: calc(-1 * var(--spacing-medium)); }
|
||||
.nl4-m { margin-left: calc(-1 * var(--spacing-large)); }
|
||||
.nl5-m { margin-left: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nl6-m { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nl7-m { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nl1-m { margin-left: -var(--spacing-extra-small); }
|
||||
.nl2-m { margin-left: -var(--spacing-small); }
|
||||
.nl3-m { margin-left: -var(--spacing-medium); }
|
||||
.nl4-m { margin-left: -var(--spacing-large); }
|
||||
.nl5-m { margin-left: -var(--spacing-extra-large); }
|
||||
.nl6-m { margin-left: -var(--spacing-extra-extra-large); }
|
||||
.nl7-m { margin-left: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nr1-m { margin-right: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nr2-m { margin-right: calc(-1 * var(--spacing-small)); }
|
||||
.nr3-m { margin-right: calc(-1 * var(--spacing-medium)); }
|
||||
.nr4-m { margin-right: calc(-1 * var(--spacing-large)); }
|
||||
.nr5-m { margin-right: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nr6-m { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nr7-m { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nr1-m { margin-right: -var(--spacing-extra-small); }
|
||||
.nr2-m { margin-right: -var(--spacing-small); }
|
||||
.nr3-m { margin-right: -var(--spacing-medium); }
|
||||
.nr4-m { margin-right: -var(--spacing-large); }
|
||||
.nr5-m { margin-right: -var(--spacing-extra-large); }
|
||||
.nr6-m { margin-right: -var(--spacing-extra-extra-large); }
|
||||
.nr7-m { margin-right: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nb1-m { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nb2-m { margin-bottom: calc(-1 * var(--spacing-small)); }
|
||||
.nb3-m { margin-bottom: calc(-1 * var(--spacing-medium)); }
|
||||
.nb4-m { margin-bottom: calc(-1 * var(--spacing-large)); }
|
||||
.nb5-m { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nb6-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nb7-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nb1-m { margin-bottom: -var(--spacing-extra-small); }
|
||||
.nb2-m { margin-bottom: -var(--spacing-small); }
|
||||
.nb3-m { margin-bottom: -var(--spacing-medium); }
|
||||
.nb4-m { margin-bottom: -var(--spacing-large); }
|
||||
.nb5-m { margin-bottom: -var(--spacing-extra-large); }
|
||||
.nb6-m { margin-bottom: -var(--spacing-extra-extra-large); }
|
||||
.nb7-m { margin-bottom: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nt1-m { margin-top: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nt2-m { margin-top: calc(-1 * var(--spacing-small)); }
|
||||
.nt3-m { margin-top: calc(-1 * var(--spacing-medium)); }
|
||||
.nt4-m { margin-top: calc(-1 * var(--spacing-large)); }
|
||||
.nt5-m { margin-top: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nt6-m { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nt7-m { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nt1-m { margin-top: -var(--spacing-extra-small); }
|
||||
.nt2-m { margin-top: -var(--spacing-small); }
|
||||
.nt3-m { margin-top: -var(--spacing-medium); }
|
||||
.nt4-m { margin-top: -var(--spacing-large); }
|
||||
.nt5-m { margin-top: -var(--spacing-extra-large); }
|
||||
.nt6-m { margin-top: -var(--spacing-extra-extra-large); }
|
||||
.nt7-m { margin-top: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
}
|
||||
|
||||
@media (--breakpoint-large) {
|
||||
.na1-l { margin: calc(-1 * var(--spacing-extra-small)); }
|
||||
.na2-l { margin: calc(-1 * var(--spacing-small)); }
|
||||
.na3-l { margin: calc(-1 * var(--spacing-medium)); }
|
||||
.na4-l { margin: calc(-1 * var(--spacing-large)); }
|
||||
.na5-l { margin: calc(-1 * var(--spacing-extra-large)); }
|
||||
.na6-l { margin: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.na7-l { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.na1-l { margin: -var(--spacing-extra-small); }
|
||||
.na2-l { margin: -var(--spacing-small); }
|
||||
.na3-l { margin: -var(--spacing-medium); }
|
||||
.na4-l { margin: -var(--spacing-large); }
|
||||
.na5-l { margin: -var(--spacing-extra-large); }
|
||||
.na6-l { margin: -var(--spacing-extra-extra-large); }
|
||||
.na7-l { margin: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nl1-l { margin-left: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nl2-l { margin-left: calc(-1 * var(--spacing-small)); }
|
||||
.nl3-l { margin-left: calc(-1 * var(--spacing-medium)); }
|
||||
.nl4-l { margin-left: calc(-1 * var(--spacing-large)); }
|
||||
.nl5-l { margin-left: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nl6-l { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nl7-l { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nl1-l { margin-left: -var(--spacing-extra-small); }
|
||||
.nl2-l { margin-left: -var(--spacing-small); }
|
||||
.nl3-l { margin-left: -var(--spacing-medium); }
|
||||
.nl4-l { margin-left: -var(--spacing-large); }
|
||||
.nl5-l { margin-left: -var(--spacing-extra-large); }
|
||||
.nl6-l { margin-left: -var(--spacing-extra-extra-large); }
|
||||
.nl7-l { margin-left: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nr1-l { margin-right: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nr2-l { margin-right: calc(-1 * var(--spacing-small)); }
|
||||
.nr3-l { margin-right: calc(-1 * var(--spacing-medium)); }
|
||||
.nr4-l { margin-right: calc(-1 * var(--spacing-large)); }
|
||||
.nr5-l { margin-right: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nr6-l { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nr7-l { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nr1-l { margin-right: -var(--spacing-extra-small); }
|
||||
.nr2-l { margin-right: -var(--spacing-small); }
|
||||
.nr3-l { margin-right: -var(--spacing-medium); }
|
||||
.nr4-l { margin-right: -var(--spacing-large); }
|
||||
.nr5-l { margin-right: -var(--spacing-extra-large); }
|
||||
.nr6-l { margin-right: -var(--spacing-extra-extra-large); }
|
||||
.nr7-l { margin-right: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nb1-l { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nb2-l { margin-bottom: calc(-1 * var(--spacing-small)); }
|
||||
.nb3-l { margin-bottom: calc(-1 * var(--spacing-medium)); }
|
||||
.nb4-l { margin-bottom: calc(-1 * var(--spacing-large)); }
|
||||
.nb5-l { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nb6-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nb7-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nb1-l { margin-bottom: -var(--spacing-extra-small); }
|
||||
.nb2-l { margin-bottom: -var(--spacing-small); }
|
||||
.nb3-l { margin-bottom: -var(--spacing-medium); }
|
||||
.nb4-l { margin-bottom: -var(--spacing-large); }
|
||||
.nb5-l { margin-bottom: -var(--spacing-extra-large); }
|
||||
.nb6-l { margin-bottom: -var(--spacing-extra-extra-large); }
|
||||
.nb7-l { margin-bottom: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nt1-l { margin-top: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nt2-l { margin-top: calc(-1 * var(--spacing-small)); }
|
||||
.nt3-l { margin-top: calc(-1 * var(--spacing-medium)); }
|
||||
.nt4-l { margin-top: calc(-1 * var(--spacing-large)); }
|
||||
.nt5-l { margin-top: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nt6-l { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nt7-l { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
.nt1-l { margin-top: -var(--spacing-extra-small); }
|
||||
.nt2-l { margin-top: -var(--spacing-small); }
|
||||
.nt3-l { margin-top: -var(--spacing-medium); }
|
||||
.nt4-l { margin-top: -var(--spacing-large); }
|
||||
.nt5-l { margin-top: -var(--spacing-extra-large); }
|
||||
.nt6-l { margin-top: -var(--spacing-extra-extra-large); }
|
||||
.nt7-l { margin-top: -var(--spacing-extra-extra-extra-large); }
|
||||
}
|
||||
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
/*! 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 iOS.
|
||||
* 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 */
|
||||
}
|
||||
|
||||
@ -17,13 +19,26 @@ html {
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
* 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.
|
||||
@ -37,6 +52,25 @@ h1 {
|
||||
/* 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.
|
||||
@ -62,15 +96,17 @@ pre {
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
@ -80,6 +116,15 @@ abbr[title] {
|
||||
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.
|
||||
*/
|
||||
@ -101,6 +146,23 @@ samp {
|
||||
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.
|
||||
*/
|
||||
@ -134,18 +196,44 @@ sup {
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
* 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.
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
@ -154,7 +242,7 @@ input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
@ -181,14 +269,16 @@ select { /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@ -239,15 +329,17 @@ legend {
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
@ -255,8 +347,8 @@ textarea {
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
@ -285,9 +377,10 @@ textarea {
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
* 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;
|
||||
}
|
||||
@ -306,10 +399,12 @@ textarea {
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -321,19 +416,30 @@ summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
* 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.
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
|
||||
@ -71,10 +71,6 @@
|
||||
.washed-red { color: var(--washed-red); }
|
||||
.color-inherit { color: inherit; }
|
||||
|
||||
|
||||
|
||||
/* Background colors */
|
||||
|
||||
.bg-black-90 { background-color: var(--black-90); }
|
||||
.bg-black-80 { background-color: var(--black-80); }
|
||||
.bg-black-70 { background-color: var(--black-70); }
|
||||
@ -95,6 +91,10 @@
|
||||
.bg-white-20 { background-color: var(--white-20); }
|
||||
.bg-white-10 { background-color: var(--white-10); }
|
||||
|
||||
|
||||
|
||||
/* Background colors */
|
||||
|
||||
.bg-black { background-color: var(--black); }
|
||||
.bg-near-black { background-color: var(--near-black); }
|
||||
.bg-dark-gray { background-color: var(--dark-gray); }
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! TACHYONS v4.12.0 | http://tachyons.io */
|
||||
/*! TACHYONS v4.9.0 | http://tachyons.io */
|
||||
|
||||
/*
|
||||
*
|
||||
|
||||
Loading…
Reference in New Issue
Block a user