├── .gitignore ├── src ├── _styles.css ├── _lists.css ├── _code.css ├── _images.css ├── _utilities.css ├── _forms.css ├── _module-template.css ├── _debug-children.css ├── _opacity.css ├── _links.css ├── _box-sizing.css ├── _font-style.css ├── _tables.css ├── _white-space.css ├── _line-height.css ├── _outlines.css ├── _word-break.css ├── _text-align.css ├── _background-size.css ├── _clears.css ├── _letter-spacing.css ├── _position.css ├── _text-decoration.css ├── _vertical-align.css ├── _media-queries.css ├── _nested.css ├── _text-transform.css ├── _visibility.css ├── _floats.css ├── _border-style.css ├── _z-index.css ├── _rotations.css ├── _box-shadow.css ├── _font-family.css ├── _borders.css ├── _colors.css ├── _type-scale.css ├── _border-widths.css ├── _font-weight.css ├── _max-widths.css ├── _typography.css ├── _overflow.css ├── tachyons.css ├── _background-position.css ├── _display.css ├── _heights.css ├── _border-radius.css ├── _hovers.css ├── _border-colors.css ├── _coordinates.css ├── _widths.css ├── _aspect-ratios.css ├── _debug-grid.css ├── _debug.css ├── _skins.css ├── _flexbox.css ├── _negative-margins.css ├── _skins-pseudo.css ├── _normalize.css └── _spacing.css ├── index.html ├── bower.json ├── license ├── package.json ├── code-of-conduct.md └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_STORE 4 | *.swp 5 | -------------------------------------------------------------------------------- /src/_styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | STYLES 4 | 5 | Add custom styles here. 6 | 7 | */ 8 | 9 | -------------------------------------------------------------------------------- /src/_lists.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LISTS 4 | http://tachyons.io/docs/elements/lists/ 5 | 6 | */ 7 | 8 | .list { list-style-type: none; } 9 | -------------------------------------------------------------------------------- /src/_code.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CODE 4 | 5 | */ 6 | 7 | .pre { 8 | overflow-x: auto; 9 | overflow-y: hidden; 10 | overflow: scroll; 11 | } 12 | -------------------------------------------------------------------------------- /src/_images.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | IMAGES 4 | Docs: http://tachyons.io/docs/elements/images/ 5 | 6 | */ 7 | 8 | /* Responsive images! */ 9 | 10 | img { max-width: 100%; } 11 | 12 | -------------------------------------------------------------------------------- /src/_utilities.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | UTILITIES 4 | 5 | */ 6 | 7 | .overflow-container { 8 | overflow-y: scroll; 9 | } 10 | 11 | .center { 12 | margin-right: auto; 13 | margin-left: auto; 14 | } 15 | -------------------------------------------------------------------------------- /src/_forms.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FORMS 4 | 5 | */ 6 | 7 | .input-reset { 8 | -webkit-appearance: none; 9 | -moz-appearance: none; 10 | } 11 | 12 | .button-reset::-moz-focus-inner, 13 | .input-reset::-moz-focus-inner { 14 | border: 0; 15 | padding: 0; 16 | } 17 | -------------------------------------------------------------------------------- /src/_module-template.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | MODULE NAME 4 | 5 | Use this scaffolding to create or extend your own modules with tachyons 6 | style architecture. 7 | 8 | */ 9 | 10 | 11 | @media (--breakpoint-not-small) { 12 | 13 | } 14 | 15 | @media (--breakpoint-medium) { 16 | 17 | } 18 | 19 | @media (--breakpoint-large) { 20 | 21 | } 22 | 23 | -------------------------------------------------------------------------------- /src/_debug-children.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DEBUG CHILDREN 4 | Docs: http://tachyons.io/docs/debug/ 5 | 6 | Just add the debug class to any element to see outlines on its 7 | children. 8 | 9 | */ 10 | 11 | .debug * { outline: 1px solid gold; } 12 | .debug-white * { outline: 1px solid white; } 13 | .debug-black * { outline: 1px solid black; } 14 | 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tachyons", 3 | "description": "Functional CSS for humans", 4 | "main": "css/tachyons.min.css", 5 | "authors": [ 6 | "mrmrs" 7 | ], 8 | "license": "MIT", 9 | "keywords": [ 10 | "css", 11 | "design", 12 | "system", 13 | "responsive", 14 | "design" 15 | ], 16 | "homepage": "http://tachyons.io", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "test", 22 | "tests" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /src/_opacity.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | OPACITY 4 | Docs: http://tachyons.io/docs/themes/opacity/ 5 | 6 | */ 7 | 8 | .o-100 { opacity: 1; } 9 | .o-90 { opacity: .9; } 10 | .o-80 { opacity: .8; } 11 | .o-70 { opacity: .7; } 12 | .o-60 { opacity: .6; } 13 | .o-50 { opacity: .5; } 14 | .o-40 { opacity: .4; } 15 | .o-30 { opacity: .3; } 16 | .o-20 { opacity: .2; } 17 | .o-10 { opacity: .1; } 18 | .o-05 { opacity: .05; } 19 | .o-025 { opacity: .025; } 20 | .o-0 { opacity: 0; } 21 | -------------------------------------------------------------------------------- /src/_links.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LINKS 4 | Docs: http://tachyons.io/docs/elements/links/ 5 | 6 | */ 7 | 8 | .link { 9 | text-decoration: none; 10 | transition: color .15s ease-in; 11 | } 12 | 13 | .link:link, 14 | .link:visited { 15 | transition: color .15s ease-in; 16 | } 17 | .link:hover { 18 | transition: color .15s ease-in; 19 | } 20 | .link:active { 21 | transition: color .15s ease-in; 22 | } 23 | .link:focus { 24 | transition: color .15s ease-in; 25 | outline: 1px dotted currentColor; 26 | } 27 | 28 | -------------------------------------------------------------------------------- /src/_box-sizing.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BOX SIZING 4 | 5 | */ 6 | 7 | html, 8 | body, 9 | div, 10 | article, 11 | section, 12 | main, 13 | footer, 14 | header, 15 | form, 16 | fieldset, 17 | legend, 18 | pre, 19 | code, 20 | a, 21 | h1,h2,h3,h4,h5,h6, 22 | p, 23 | ul, 24 | ol, 25 | li, 26 | dl, 27 | dt, 28 | dd, 29 | textarea, 30 | table, 31 | td, 32 | th, 33 | tr, 34 | input[type="email"], 35 | input[type="number"], 36 | input[type="password"], 37 | input[type="tel"], 38 | input[type="text"], 39 | input[type="url"], 40 | .border-box { 41 | box-sizing: border-box; 42 | } 43 | 44 | -------------------------------------------------------------------------------- /src/_font-style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FONT STYLE 4 | Docs: http://tachyons.io/docs/typography/font-style/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | .i { font-style: italic; } 14 | .fs-normal { font-style: normal; } 15 | 16 | @media (--breakpoint-not-small) { 17 | .i-ns { font-style: italic; } 18 | .fs-normal-ns { font-style: normal; } 19 | } 20 | 21 | @media (--breakpoint-medium) { 22 | .i-m { font-style: italic; } 23 | .fs-normal-m { font-style: normal; } 24 | } 25 | 26 | @media (--breakpoint-large) { 27 | .i-l { font-style: italic; } 28 | .fs-normal-l { font-style: normal; } 29 | } 30 | -------------------------------------------------------------------------------- /src/_tables.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TABLES 4 | Docs: http://tachyons.io/docs/elements/tables/ 5 | 6 | */ 7 | 8 | .collapse { 9 | border-collapse: collapse; 10 | border-spacing: 0; 11 | } 12 | 13 | .striped--light-silver:nth-child(odd) { 14 | background-color: var(--light-silver); 15 | } 16 | 17 | .striped--moon-gray:nth-child(odd) { 18 | background-color: var(--moon-gray); 19 | } 20 | 21 | .striped--light-gray:nth-child(odd) { 22 | background-color: var(--light-gray); 23 | } 24 | 25 | .striped--near-white:nth-child(odd) { 26 | background-color: var(--near-white); 27 | } 28 | 29 | .stripe-light:nth-child(odd) { 30 | background-color: var(--white-10); 31 | } 32 | 33 | .stripe-dark:nth-child(odd) { 34 | background-color: var(--black-10); 35 | } 36 | -------------------------------------------------------------------------------- /src/_white-space.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WHITE SPACE 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | 13 | .ws-normal { white-space: normal; } 14 | .nowrap { white-space: nowrap; } 15 | .pre { white-space: pre; } 16 | 17 | @media (--breakpoint-not-small) { 18 | .ws-normal-ns { white-space: normal; } 19 | .nowrap-ns { white-space: nowrap; } 20 | .pre-ns { white-space: pre; } 21 | } 22 | 23 | @media (--breakpoint-medium) { 24 | .ws-normal-m { white-space: normal; } 25 | .nowrap-m { white-space: nowrap; } 26 | .pre-m { white-space: pre; } 27 | } 28 | 29 | @media (--breakpoint-large) { 30 | .ws-normal-l { white-space: normal; } 31 | .nowrap-l { white-space: nowrap; } 32 | .pre-l { white-space: pre; } 33 | } 34 | 35 | -------------------------------------------------------------------------------- /src/_line-height.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LINE HEIGHT / LEADING 4 | Docs: http://tachyons.io/docs/typography/line-height 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | .lh-solid { line-height: 1; } 14 | .lh-title { line-height: 1.25; } 15 | .lh-copy { line-height: 1.5; } 16 | 17 | @media (--breakpoint-not-small) { 18 | .lh-solid-ns { line-height: 1; } 19 | .lh-title-ns { line-height: 1.25; } 20 | .lh-copy-ns { line-height: 1.5; } 21 | } 22 | 23 | @media (--breakpoint-medium) { 24 | .lh-solid-m { line-height: 1; } 25 | .lh-title-m { line-height: 1.25; } 26 | .lh-copy-m { line-height: 1.5; } 27 | } 28 | 29 | @media (--breakpoint-large) { 30 | .lh-solid-l { line-height: 1; } 31 | .lh-title-l { line-height: 1.25; } 32 | .lh-copy-l { line-height: 1.5; } 33 | } 34 | 35 | -------------------------------------------------------------------------------- /src/_outlines.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | OUTLINES 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | .outline { outline: 1px solid; } 13 | .outline-transparent { outline: 1px solid transparent; } 14 | .outline-0 { outline: 0; } 15 | 16 | @media (--breakpoint-not-small) { 17 | .outline-ns { outline: 1px solid; } 18 | .outline-transparent-ns { outline: 1px solid transparent; } 19 | .outline-0-ns { outline: 0; } 20 | } 21 | 22 | @media (--breakpoint-medium) { 23 | .outline-m { outline: 1px solid; } 24 | .outline-transparent-m { outline: 1px solid transparent; } 25 | .outline-0-m { outline: 0; } 26 | } 27 | 28 | @media (--breakpoint-medium) { 29 | .outline-l { outline: 1px solid; } 30 | .outline-transparent-l { outline: 1px solid transparent; } 31 | .outline-0-l { outline: 0; } 32 | } 33 | -------------------------------------------------------------------------------- /src/_word-break.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WORD BREAK 4 | 5 | Base: 6 | word = word-break 7 | 8 | Media Query Extensions: 9 | -ns = not-small 10 | -m = medium 11 | -l = large 12 | 13 | */ 14 | 15 | .word-normal { word-break: normal; } 16 | .word-wrap { word-break: break-all; } 17 | .word-nowrap { word-break: keep-all; } 18 | 19 | @media (--breakpoint-not-small) { 20 | .word-normal-ns { word-break: normal; } 21 | .word-wrap-ns { word-break: break-all; } 22 | .word-nowrap-ns { word-break: keep-all; } 23 | } 24 | 25 | @media (--breakpoint-medium) { 26 | .word-normal-m { word-break: normal; } 27 | .word-wrap-m { word-break: break-all; } 28 | .word-nowrap-m { word-break: keep-all; } 29 | } 30 | 31 | @media (--breakpoint-large) { 32 | .word-normal-l { word-break: normal; } 33 | .word-wrap-l { word-break: break-all; } 34 | .word-nowrap-l { word-break: keep-all; } 35 | } 36 | 37 | -------------------------------------------------------------------------------- /src/_text-align.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT ALIGN 4 | Docs: http://tachyons.io/docs/typography/text-align/ 5 | 6 | Base 7 | t = text-align 8 | 9 | Modifiers 10 | l = left 11 | r = right 12 | c = center 13 | 14 | Media Query Extensions: 15 | -ns = not-small 16 | -m = medium 17 | -l = large 18 | 19 | */ 20 | 21 | .tl { text-align: left; } 22 | .tr { text-align: right; } 23 | .tc { text-align: center; } 24 | 25 | @media (--breakpoint-not-small) { 26 | .tl-ns { text-align: left; } 27 | .tr-ns { text-align: right; } 28 | .tc-ns { text-align: center; } 29 | } 30 | 31 | @media (--breakpoint-medium) { 32 | .tl-m { text-align: left; } 33 | .tr-m { text-align: right; } 34 | .tc-m { text-align: center; } 35 | } 36 | 37 | @media (--breakpoint-large) { 38 | .tl-l { text-align: left; } 39 | .tr-l { text-align: right; } 40 | .tc-l { text-align: center; } 41 | } 42 | 43 | -------------------------------------------------------------------------------- /src/_background-size.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BACKGROUND SIZE 4 | Docs: http://tachyons.io/docs/themes/background-size/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | /* 14 | Often used in combination with background image set as an inline style 15 | on an html element. 16 | */ 17 | 18 | .cover { background-size: cover!important; } 19 | .contain { background-size: contain!important; } 20 | 21 | @media (--breakpoint-not-small) { 22 | .cover-ns { background-size: cover!important; } 23 | .contain-ns { background-size: contain!important; } 24 | } 25 | 26 | @media (--breakpoint-medium) { 27 | .cover-m { background-size: cover!important; } 28 | .contain-m { background-size: contain!important; } 29 | } 30 | 31 | @media (--breakpoint-large) { 32 | .cover-l { background-size: cover!important; } 33 | .contain-l { background-size: contain!important; } 34 | } 35 | -------------------------------------------------------------------------------- /src/_clears.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CLEARFIX 4 | http://tachyons.io/docs/layout/clearfix/ 5 | 6 | */ 7 | 8 | /* Nicolas Gallaghers Clearfix solution 9 | Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ 10 | 11 | .cf:before, 12 | .cf:after { content: " "; display: table; } 13 | .cf:after { clear: both; } 14 | .cf { *zoom: 1; } 15 | 16 | .cl { clear: left; } 17 | .cr { clear: right; } 18 | .cb { clear: both; } 19 | .cn { clear: none; } 20 | 21 | @media (--breakpoint-not-small) { 22 | .cl-ns { clear: left; } 23 | .cr-ns { clear: right; } 24 | .cb-ns { clear: both; } 25 | .cn-ns { clear: none; } 26 | } 27 | 28 | @media (--breakpoint-medium) { 29 | .cl-m { clear: left; } 30 | .cr-m { clear: right; } 31 | .cb-m { clear: both; } 32 | .cn-m { clear: none; } 33 | } 34 | 35 | @media (--breakpoint-large) { 36 | .cl-l { clear: left; } 37 | .cr-l { clear: right; } 38 | .cb-l { clear: both; } 39 | .cn-l { clear: none; } 40 | } 41 | -------------------------------------------------------------------------------- /src/_letter-spacing.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LETTER SPACING 4 | Docs: http://tachyons.io/docs/typography/tracking/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | .tracked { letter-spacing: .1em; } 14 | .tracked-tight { letter-spacing: -.05em; } 15 | .tracked-mega { letter-spacing: .25em; } 16 | 17 | @media (--breakpoint-not-small) { 18 | .tracked-ns { letter-spacing: .1em; } 19 | .tracked-tight-ns { letter-spacing: -.05em; } 20 | .tracked-mega-ns { letter-spacing: .25em; } 21 | } 22 | 23 | @media (--breakpoint-medium) { 24 | .tracked-m { letter-spacing: .1em; } 25 | .tracked-tight-m { letter-spacing: -.05em; } 26 | .tracked-mega-m { letter-spacing: .25em; } 27 | } 28 | 29 | @media (--breakpoint-large) { 30 | .tracked-l { letter-spacing: .1em; } 31 | .tracked-tight-l { letter-spacing: -.05em; } 32 | .tracked-mega-l { letter-spacing: .25em; } 33 | } 34 | -------------------------------------------------------------------------------- /src/_position.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | POSITIONING 4 | Docs: http://tachyons.io/docs/layout/position/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | .static { position: static; } 14 | .relative { position: relative; } 15 | .absolute { position: absolute; } 16 | .fixed { position: fixed; } 17 | 18 | @media (--breakpoint-not-small) { 19 | .static-ns { position: static; } 20 | .relative-ns { position: relative; } 21 | .absolute-ns { position: absolute; } 22 | .fixed-ns { position: fixed; } 23 | } 24 | 25 | @media (--breakpoint-medium) { 26 | .static-m { position: static; } 27 | .relative-m { position: relative; } 28 | .absolute-m { position: absolute; } 29 | .fixed-m { position: fixed; } 30 | } 31 | 32 | @media (--breakpoint-large) { 33 | .static-l { position: static; } 34 | .relative-l { position: relative; } 35 | .absolute-l { position: absolute; } 36 | .fixed-l { position: fixed; } 37 | } 38 | -------------------------------------------------------------------------------- /src/_text-decoration.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT DECORATION 4 | Docs: http://tachyons.io/docs/typography/text-decoration/ 5 | 6 | 7 | Media Query Extensions: 8 | -ns = not-small 9 | -m = medium 10 | -l = large 11 | 12 | */ 13 | 14 | .strike { text-decoration: line-through; } 15 | .underline { text-decoration: underline; } 16 | .no-underline { text-decoration: none; } 17 | 18 | 19 | @media (--breakpoint-not-small) { 20 | .strike-ns { text-decoration: line-through; } 21 | .underline-ns { text-decoration: underline; } 22 | .no-underline-ns { text-decoration: none; } 23 | } 24 | 25 | @media (--breakpoint-medium) { 26 | .strike-m { text-decoration: line-through; } 27 | .underline-m { text-decoration: underline; } 28 | .no-underline-m { text-decoration: none; } 29 | } 30 | 31 | @media (--breakpoint-large) { 32 | .strike-l { text-decoration: line-through; } 33 | .underline-l { text-decoration: underline; } 34 | .no-underline-l { text-decoration: none; } 35 | } 36 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | 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: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /src/_vertical-align.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | VERTICAL ALIGN 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | .v-base { vertical-align: baseline; } 13 | .v-mid { vertical-align: middle; } 14 | .v-top { vertical-align: top; } 15 | .v-btm { vertical-align: bottom; } 16 | 17 | @media (--breakpoint-not-small) { 18 | .v-base-ns { vertical-align: baseline; } 19 | .v-mid-ns { vertical-align: middle; } 20 | .v-top-ns { vertical-align: top; } 21 | .v-btm-ns { vertical-align: bottom; } 22 | } 23 | 24 | @media (--breakpoint-medium) { 25 | .v-base-m { vertical-align: baseline; } 26 | .v-mid-m { vertical-align: middle; } 27 | .v-top-m { vertical-align: top; } 28 | .v-btm-m { vertical-align: bottom; } 29 | } 30 | 31 | @media (--breakpoint-large) { 32 | .v-base-l { vertical-align: baseline; } 33 | .v-mid-l { vertical-align: middle; } 34 | .v-top-l { vertical-align: top; } 35 | .v-btm-l { vertical-align: bottom; } 36 | } 37 | -------------------------------------------------------------------------------- /src/_media-queries.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CUSTOM MEDIA QUERIES 4 | 5 | Media query values can be changed to fit your own content. 6 | There are no magic bullets when it comes to media query width values. 7 | They should be declared in em units - and they should be set to meet 8 | the needs of your content. You can also add additional media queries, 9 | or remove some of the existing ones. 10 | 11 | These media queries can be referenced like so: 12 | 13 | @media (--breakpoint-not-small) { 14 | .medium-and-larger-specific-style { 15 | background-color: red; 16 | } 17 | } 18 | 19 | @media (--breakpoint-medium) { 20 | .medium-screen-specific-style { 21 | background-color: red; 22 | } 23 | } 24 | 25 | @media (--breakpoint-large) { 26 | .large-and-larger-screen-specific-style { 27 | background-color: red; 28 | } 29 | } 30 | 31 | */ 32 | 33 | /* Media Queries */ 34 | @custom-media --breakpoint-not-small screen and (min-width: 30em); 35 | @custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em); 36 | @custom-media --breakpoint-large screen and (min-width: 60em); 37 | -------------------------------------------------------------------------------- /src/_nested.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | NESTED 4 | Tachyons module for styling nested elements 5 | that are generated by a cms. 6 | 7 | */ 8 | 9 | .nested-copy-line-height p, 10 | .nested-copy-line-height ul, 11 | .nested-copy-line-height ol { 12 | line-height: 1.5; 13 | } 14 | 15 | .nested-headline-line-height h1, 16 | .nested-headline-line-height h2, 17 | .nested-headline-line-height h3, 18 | .nested-headline-line-height h4, 19 | .nested-headline-line-height h5, 20 | .nested-headline-line-height h6 { 21 | line-height: 1.25; 22 | } 23 | 24 | .nested-list-reset ul, 25 | .nested-list-reset ol { 26 | padding-left: 0; 27 | margin-left: 0; 28 | list-style-type: none; 29 | } 30 | 31 | .nested-copy-indent p+p { 32 | text-indent: 1em; 33 | margin-top: 0; 34 | margin-bottom: 0; 35 | } 36 | 37 | .nested-copy-seperator p+p { 38 | margin-top: 1.5em; 39 | } 40 | 41 | .nested-img img { 42 | width: 100%; 43 | max-width: 100%; 44 | display: block; 45 | } 46 | 47 | .nested-links a { 48 | color: var(--blue); 49 | transition: color .15s ease-in; 50 | } 51 | 52 | .nested-links a:hover, 53 | .nested-links a:focus { 54 | color: var(--light-blue); 55 | transition: color .15s ease-in; 56 | } 57 | 58 | -------------------------------------------------------------------------------- /src/_text-transform.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT TRANSFORM 4 | Docs: http://tachyons.io/docs/typography/text-transform/ 5 | 6 | Base: 7 | tt = text-transform 8 | 9 | Modifiers 10 | c = capitalize 11 | l = lowercase 12 | u = uppercase 13 | n = none 14 | 15 | Media Query Extensions: 16 | -ns = not-small 17 | -m = medium 18 | -l = large 19 | 20 | */ 21 | 22 | .ttc { text-transform: capitalize; } 23 | .ttl { text-transform: lowercase; } 24 | .ttu { text-transform: uppercase; } 25 | .ttn { text-transform: none; } 26 | 27 | @media (--breakpoint-not-small) { 28 | .ttc-ns { text-transform: capitalize; } 29 | .ttl-ns { text-transform: lowercase; } 30 | .ttu-ns { text-transform: uppercase; } 31 | .ttn-ns { text-transform: none; } 32 | } 33 | 34 | @media (--breakpoint-medium) { 35 | .ttc-m { text-transform: capitalize; } 36 | .ttl-m { text-transform: lowercase; } 37 | .ttu-m { text-transform: uppercase; } 38 | .ttn-m { text-transform: none; } 39 | } 40 | 41 | @media (--breakpoint-large) { 42 | .ttc-l { text-transform: capitalize; } 43 | .ttl-l { text-transform: lowercase; } 44 | .ttu-l { text-transform: uppercase; } 45 | .ttn-l { text-transform: none; } 46 | } 47 | -------------------------------------------------------------------------------- /src/_visibility.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | VISIBILITY 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | 13 | /* 14 | Text that is hidden but accessible 15 | Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 16 | */ 17 | 18 | .clip { 19 | position: fixed !important; 20 | _position: absolute !important; 21 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 22 | clip: rect(1px, 1px, 1px, 1px); 23 | } 24 | 25 | @media (--breakpoint-not-small) { 26 | .clip-ns { 27 | position: fixed !important; 28 | _position: absolute !important; 29 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 30 | clip: rect(1px, 1px, 1px, 1px); 31 | } 32 | } 33 | 34 | @media (--breakpoint-medium) { 35 | .clip-m { 36 | position: fixed !important; 37 | _position: absolute !important; 38 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 39 | clip: rect(1px, 1px, 1px, 1px); 40 | } 41 | } 42 | 43 | @media (--breakpoint-large) { 44 | .clip-l { 45 | position: fixed !important; 46 | _position: absolute !important; 47 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 48 | clip: rect(1px, 1px, 1px, 1px); 49 | } 50 | } 51 | 52 | -------------------------------------------------------------------------------- /src/_floats.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FLOATS 4 | http://tachyons.io/docs/layout/floats/ 5 | 6 | 1. Floated elements are automatically rendered as block level elements. 7 | Setting floats to display inline will fix the double margin bug in 8 | ie6. You know... just in case. 9 | 10 | 2. Don't forget to clearfix your floats with .cf 11 | 12 | Base: 13 | f = float 14 | 15 | Modifiers: 16 | l = left 17 | r = right 18 | n = none 19 | 20 | Media Query Extensions: 21 | -ns = not-small 22 | -m = medium 23 | -l = large 24 | 25 | */ 26 | 27 | 28 | 29 | .fl { float: left; _display: inline; } 30 | .fr { float: right; _display: inline; } 31 | .fn { float: none; } 32 | 33 | @media (--breakpoint-not-small) { 34 | .fl-ns { float: left; _display: inline; } 35 | .fr-ns { float: right; _display: inline; } 36 | .fn-ns { float: none; } 37 | } 38 | 39 | @media (--breakpoint-medium) { 40 | .fl-m { float: left; _display: inline; } 41 | .fr-m { float: right; _display: inline; } 42 | .fn-m { float: none; } 43 | } 44 | 45 | @media (--breakpoint-large) { 46 | .fl-l { float: left; _display: inline; } 47 | .fr-l { float: right; _display: inline; } 48 | .fn-l { float: none; } 49 | } 50 | -------------------------------------------------------------------------------- /src/_border-style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER STYLES 4 | Docs: http://tachyons.io/docs/themes/borders/ 5 | 6 | Depends on base border module in _borders.css 7 | 8 | Base: 9 | b = border-style 10 | 11 | Modifiers: 12 | --none = none 13 | --dotted = dotted 14 | --dashed = dashed 15 | --solid = solid 16 | 17 | Media Query Extensions: 18 | -ns = not-small 19 | -m = medium 20 | -l = large 21 | 22 | */ 23 | 24 | .b--dotted { border-style: dotted; } 25 | .b--dashed { border-style: dashed; } 26 | .b--solid { border-style: solid; } 27 | .b--none { border-style: none; } 28 | 29 | @media (--breakpoint-not-small) { 30 | .b--dotted-ns { border-style: dotted; } 31 | .b--dashed-ns { border-style: dashed; } 32 | .b--solid-ns { border-style: solid; } 33 | .b--none-ns { border-style: none; } 34 | } 35 | 36 | @media (--breakpoint-medium) { 37 | .b--dotted-m { border-style: dotted; } 38 | .b--dashed-m { border-style: dashed; } 39 | .b--solid-m { border-style: solid; } 40 | .b--none-m { border-style: none; } 41 | } 42 | 43 | @media (--breakpoint-large) { 44 | .b--dotted-l { border-style: dotted; } 45 | .b--dashed-l { border-style: dashed; } 46 | .b--solid-l { border-style: solid; } 47 | .b--none-l { border-style: none; } 48 | } 49 | -------------------------------------------------------------------------------- /src/_z-index.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Z-INDEX 4 | 5 | Base 6 | z = z-index 7 | 8 | Modifiers 9 | -0 = literal value 0 10 | -1 = literal value 1 11 | -2 = literal value 2 12 | -3 = literal value 3 13 | -4 = literal value 4 14 | -5 = literal value 5 15 | -999 = literal value 999 16 | -9999 = literal value 9999 17 | 18 | -max = largest accepted z-index value as integer 19 | 20 | -inherit = string value inherit 21 | -initial = string value initial 22 | -unset = string value unset 23 | 24 | MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index 25 | Spec: http://www.w3.org/TR/CSS2/zindex.html 26 | Articles: 27 | https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ 28 | 29 | Tips on extending: 30 | There might be a time worth using negative z-index values. 31 | Or if you are using tachyons with another project, you might need to 32 | adjust these values to suit your needs. 33 | 34 | */ 35 | 36 | .z-0 { z-index: 0; } 37 | .z-1 { z-index: 1; } 38 | .z-2 { z-index: 2; } 39 | .z-3 { z-index: 3; } 40 | .z-4 { z-index: 4; } 41 | .z-5 { z-index: 5; } 42 | 43 | .z-999 { z-index: 999; } 44 | .z-9999 { z-index: 9999; } 45 | 46 | .z-max { 47 | z-index: 2147483647; 48 | } 49 | 50 | .z-inherit { z-index: inherit; } 51 | .z-initial { z-index: initial; } 52 | .z-unset { z-index: unset; } 53 | 54 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tachyons", 3 | "version": "4.6.2", 4 | "description": "Functional CSS for humans", 5 | "author": "mrmrs", 6 | "style": "css/tachyons.min.css", 7 | "main": "css/tachyons.css", 8 | "files": [ 9 | "css", 10 | "src" 11 | ], 12 | "repository": "tachyons-css/tachyons", 13 | "keywords": [ 14 | "css", 15 | "oocss", 16 | "postcss", 17 | "functional css", 18 | "design", 19 | "responsive", 20 | "performance" 21 | ], 22 | "license": "MIT", 23 | "devDependencies": { 24 | "copy-files": "^0.1.0", 25 | "immutable-css-cli": "^1.1.1", 26 | "normalize.css": "^4.2.0", 27 | "tachyons-modules": "^1.1.8", 28 | "tachyons-cli": "^1.0.10", 29 | "watch": "^1.0.1" 30 | }, 31 | "contributors": [ 32 | { 33 | "name": "adam morse", 34 | "email": "hi@mrmrs.cc" 35 | }, 36 | { 37 | "name": "john otander", 38 | "url": "http://johnotander.com" 39 | } 40 | ], 41 | "scripts": { 42 | "start": "npm run build:watch", 43 | "mutations": "immutable-css src/tachyons.css --strict", 44 | "build": "npm run build:css && npm run build:minify", 45 | "build:css": "tachyons src/tachyons.css > css/tachyons.css", 46 | "build:minify": "tachyons src/tachyons.css -m > css/tachyons.min.css", 47 | "build:watch": "watch 'npm run build' ./src/" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/_rotations.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ROTATIONS 4 | 5 | */ 6 | 7 | .rotate-45 { transform: rotate(45deg); } 8 | .rotate-90 { transform: rotate(90deg); } 9 | .rotate-135 { transform: rotate(135deg); } 10 | .rotate-180 { transform: rotate(180deg); } 11 | .rotate-225 { transform: rotate(225deg); } 12 | .rotate-270 { transform: rotate(270deg); } 13 | .rotate-315 { transform: rotate(315deg); } 14 | 15 | @media (--breakpoint-not-small){ 16 | .rotate-45-ns { transform: rotate(45deg); } 17 | .rotate-90-ns { transform: rotate(90deg); } 18 | .rotate-135-ns { transform: rotate(135deg); } 19 | .rotate-180-ns { transform: rotate(180deg); } 20 | .rotate-225-ns { transform: rotate(225deg); } 21 | .rotate-270-ns { transform: rotate(270deg); } 22 | .rotate-315-ns { transform: rotate(315deg); } 23 | } 24 | 25 | @media (--breakpoint-medium){ 26 | .rotate-45-m { transform: rotate(45deg); } 27 | .rotate-90-m { transform: rotate(90deg); } 28 | .rotate-135-m { transform: rotate(135deg); } 29 | .rotate-180-m { transform: rotate(180deg); } 30 | .rotate-225-m { transform: rotate(225deg); } 31 | .rotate-270-m { transform: rotate(270deg); } 32 | .rotate-315-m { transform: rotate(315deg); } 33 | } 34 | 35 | @media (--breakpoint-large){ 36 | .rotate-45-l { transform: rotate(45deg); } 37 | .rotate-90-l { transform: rotate(90deg); } 38 | .rotate-135-l { transform: rotate(135deg); } 39 | .rotate-180-l { transform: rotate(180deg); } 40 | .rotate-225-l { transform: rotate(225deg); } 41 | .rotate-270-l { transform: rotate(270deg); } 42 | .rotate-315-l { transform: rotate(315deg); } 43 | } 44 | -------------------------------------------------------------------------------- /src/_box-shadow.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BOX-SHADOW 4 | Docs: http://tachyons.io/docs/themes/box-shadow/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | .shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } 14 | .shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } 15 | .shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } 16 | .shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } 17 | .shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } 18 | 19 | @media (--breakpoint-not-small) { 20 | .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } 21 | .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } 22 | .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } 23 | .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } 24 | .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } 25 | } 26 | 27 | @media (--breakpoint-medium) { 28 | .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } 29 | .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } 30 | .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } 31 | .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } 32 | .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } 33 | } 34 | 35 | @media (--breakpoint-large) { 36 | .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } 37 | .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } 38 | .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } 39 | .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } 40 | .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } 41 | } 42 | -------------------------------------------------------------------------------- /src/_font-family.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FONT FAMILY GROUPS 4 | Docs: http://tachyons.io/docs/typography/font-family/ 5 | 6 | */ 7 | 8 | 9 | .sans-serif { 10 | font-family: -apple-system, BlinkMacSystemFont, 11 | 'avenir next', avenir, 12 | 'helvetica neue', helvetica, 13 | ubuntu, 14 | roboto, noto, 15 | 'segoe ui', arial, 16 | sans-serif; 17 | } 18 | 19 | .serif { 20 | font-family: georgia, 21 | times, 22 | serif; 23 | } 24 | 25 | .system-sans-serif { 26 | font-family: sans-serif; 27 | } 28 | 29 | .system-serif { 30 | font-family: serif; 31 | } 32 | 33 | 34 | /* Monospaced Typefaces (for code) */ 35 | 36 | /* From http://cssfontstack.com */ 37 | code, .code { 38 | font-family: Consolas, 39 | monaco, 40 | monospace; 41 | } 42 | 43 | .courier { 44 | font-family: 'Courier Next', 45 | courier, 46 | monospace; 47 | } 48 | 49 | 50 | /* Sans-Serif Typefaces */ 51 | 52 | .helvetica { 53 | font-family: 'helvetica neue', helvetica, 54 | sans-serif; 55 | } 56 | 57 | .avenir { 58 | font-family: 'avenir next', avenir, 59 | sans-serif; 60 | } 61 | 62 | 63 | /* Serif Typefaces */ 64 | 65 | .athelas { 66 | font-family: athelas, 67 | georgia, 68 | serif; 69 | } 70 | 71 | .georgia { 72 | font-family: georgia, 73 | serif; 74 | } 75 | 76 | .times { 77 | font-family: times, 78 | serif; 79 | } 80 | 81 | .bodoni { 82 | font-family: "Bodoni MT", 83 | serif; 84 | } 85 | 86 | .calisto { 87 | font-family: "Calisto MT", 88 | serif; 89 | } 90 | 91 | .garamond { 92 | font-family: garamond, 93 | serif; 94 | } 95 | 96 | .baskerville { 97 | font-family: baskerville, 98 | serif; 99 | } 100 | 101 | -------------------------------------------------------------------------------- /src/_borders.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDERS 4 | Docs: http://tachyons.io/docs/themes/borders/ 5 | 6 | Base: 7 | b = border 8 | 9 | Modifiers: 10 | a = all 11 | t = top 12 | r = right 13 | b = bottom 14 | l = left 15 | n = none 16 | 17 | Media Query Extensions: 18 | -ns = not-small 19 | -m = medium 20 | -l = large 21 | 22 | */ 23 | 24 | .ba { border-style: solid; border-width: 1px; } 25 | .bt { border-top-style: solid; border-top-width: 1px; } 26 | .br { border-right-style: solid; border-right-width: 1px; } 27 | .bb { border-bottom-style: solid; border-bottom-width: 1px; } 28 | .bl { border-left-style: solid; border-left-width: 1px; } 29 | .bn { border-style: none; border-width: 0; } 30 | 31 | 32 | @media (--breakpoint-not-small) { 33 | .ba-ns { border-style: solid; border-width: 1px; } 34 | .bt-ns { border-top-style: solid; border-top-width: 1px; } 35 | .br-ns { border-right-style: solid; border-right-width: 1px; } 36 | .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } 37 | .bl-ns { border-left-style: solid; border-left-width: 1px; } 38 | .bn-ns { border-style: none; border-width: 0; } 39 | } 40 | 41 | @media (--breakpoint-medium) { 42 | .ba-m { border-style: solid; border-width: 1px; } 43 | .bt-m { border-top-style: solid; border-top-width: 1px; } 44 | .br-m { border-right-style: solid; border-right-width: 1px; } 45 | .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } 46 | .bl-m { border-left-style: solid; border-left-width: 1px; } 47 | .bn-m { border-style: none; border-width: 0; } 48 | } 49 | 50 | @media (--breakpoint-large) { 51 | .ba-l { border-style: solid; border-width: 1px; } 52 | .bt-l { border-top-style: solid; border-top-width: 1px; } 53 | .br-l { border-right-style: solid; border-right-width: 1px; } 54 | .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } 55 | .bl-l { border-left-style: solid; border-left-width: 1px; } 56 | .bn-l { border-style: none; border-width: 0; } 57 | } 58 | 59 | -------------------------------------------------------------------------------- /src/_colors.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Tachyons 4 | COLOR VARIABLES 5 | 6 | Grayscale 7 | - Solids 8 | - Transparencies 9 | Colors 10 | 11 | */ 12 | 13 | :root { 14 | --black: #000; 15 | --near-black: #111; 16 | --dark-gray:#333; 17 | --mid-gray:#555; 18 | --gray: #777; 19 | --silver: #999; 20 | --light-silver: #aaa; 21 | --moon-gray: #ccc; 22 | --light-gray: #eee; 23 | --near-white: #f4f4f4; 24 | --white: #fff; 25 | 26 | --transparent:transparent; 27 | 28 | --black-90: rgba(0,0,0,.9); 29 | --black-80: rgba(0,0,0,.8); 30 | --black-70: rgba(0,0,0,.7); 31 | --black-60: rgba(0,0,0,.6); 32 | --black-50: rgba(0,0,0,.5); 33 | --black-40: rgba(0,0,0,.4); 34 | --black-30: rgba(0,0,0,.3); 35 | --black-20: rgba(0,0,0,.2); 36 | --black-10: rgba(0,0,0,.1); 37 | --black-05: rgba(0,0,0,.05); 38 | --black-025: rgba(0,0,0,.025); 39 | --black-0125: rgba(0,0,0,.0125); 40 | 41 | --white-90: rgba(255,255,255,.9); 42 | --white-80: rgba(255,255,255,.8); 43 | --white-70: rgba(255,255,255,.7); 44 | --white-60: rgba(255,255,255,.6); 45 | --white-50: rgba(255,255,255,.5); 46 | --white-40: rgba(255,255,255,.4); 47 | --white-30: rgba(255,255,255,.3); 48 | --white-20: rgba(255,255,255,.2); 49 | --white-10: rgba(255,255,255,.1); 50 | --white-05: rgba(255,255,255,.05); 51 | --white-025: rgba(255,255,255,.025); 52 | --white-0125: rgba(255,255,255,.0125); 53 | 54 | --dark-red: #e7040f; 55 | --red: #ff4136; 56 | --light-red: #ff725c; 57 | --orange: #ff6300; 58 | --gold: #ffb700; 59 | --yellow: #ffd700; 60 | --light-yellow: #fbf1a9; 61 | --purple: #5e2ca5; 62 | --light-purple: #a463f2; 63 | --dark-pink: #d5008f; 64 | --hot-pink: #ff41b4; 65 | --pink: #ff80cc; 66 | --light-pink: #ffa3d7; 67 | --dark-green: #137752; 68 | --green: #19a974; 69 | --light-green: #9eebcf; 70 | --navy: #001b44; 71 | --dark-blue: #00449e; 72 | --blue: #357edd; 73 | --light-blue: #96ccff; 74 | --lightest-blue: #cdecff; 75 | --washed-blue: #f6fffe; 76 | --washed-green: #e8fdf5; 77 | --washed-yellow: #fffceb; 78 | --washed-red: #ffdfdf; 79 | 80 | } 81 | -------------------------------------------------------------------------------- /src/_type-scale.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TYPE SCALE 4 | Docs: http://tachyons.io/docs/typography/scale/ 5 | 6 | Base: 7 | f = font-size 8 | 9 | Modifiers 10 | 1 = 1st step in size scale 11 | 2 = 2nd step in size scale 12 | 3 = 3rd step in size scale 13 | 4 = 4th step in size scale 14 | 5 = 5th step in size scale 15 | 6 = 6th step in size scale 16 | 17 | Media Query Extensions: 18 | -ns = not-small 19 | -m = medium 20 | -l = large 21 | */ 22 | 23 | /* 24 | * For Hero/Marketing Titles 25 | * 26 | * These generally are too large for mobile 27 | * so be careful using them on smaller screens. 28 | * */ 29 | 30 | .f-6, 31 | .f-headline { 32 | font-size: 6rem; 33 | } 34 | .f-5, 35 | .f-subheadline { 36 | font-size: 5rem; 37 | } 38 | 39 | 40 | /* Type Scale */ 41 | 42 | .f1 { font-size: 3rem; } 43 | .f2 { font-size: 2.25rem; } 44 | .f3 { font-size: 1.5rem; } 45 | .f4 { font-size: 1.25rem; } 46 | .f5 { font-size: 1rem; } 47 | .f6 { font-size: .875rem; } 48 | 49 | @media (--breakpoint-not-small){ 50 | .f-6-ns, 51 | .f-headline-ns { font-size: 6rem; } 52 | .f-5-ns, 53 | .f-subheadline-ns { font-size: 5rem; } 54 | .f1-ns { font-size: 3rem; } 55 | .f2-ns { font-size: 2.25rem; } 56 | .f3-ns { font-size: 1.5rem; } 57 | .f4-ns { font-size: 1.25rem; } 58 | .f5-ns { font-size: 1rem; } 59 | .f6-ns { font-size: .875rem; } 60 | } 61 | 62 | @media (--breakpoint-medium) { 63 | .f-6-m, 64 | .f-headline-m { font-size: 6rem; } 65 | .f-5-m, 66 | .f-subheadline-m { font-size: 5rem; } 67 | .f1-m { font-size: 3rem; } 68 | .f2-m { font-size: 2.25rem; } 69 | .f3-m { font-size: 1.5rem; } 70 | .f4-m { font-size: 1.25rem; } 71 | .f5-m { font-size: 1rem; } 72 | .f6-m { font-size: .875rem; } 73 | } 74 | 75 | @media (--breakpoint-large) { 76 | .f-6-l, 77 | .f-headline-l { 78 | font-size: 6rem; 79 | } 80 | .f-5-l, 81 | .f-subheadline-l { 82 | font-size: 5rem; 83 | } 84 | .f1-l { font-size: 3rem; } 85 | .f2-l { font-size: 2.25rem; } 86 | .f3-l { font-size: 1.5rem; } 87 | .f4-l { font-size: 1.25rem; } 88 | .f5-l { font-size: 1rem; } 89 | .f6-l { font-size: .875rem; } 90 | } 91 | -------------------------------------------------------------------------------- /src/_border-widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER WIDTHS 4 | Docs: http://tachyons.io/docs/themes/borders/ 5 | 6 | Base: 7 | bw = border-width 8 | 9 | Modifiers: 10 | 0 = 0 width border 11 | 1 = 1st step in border-width scale 12 | 2 = 2nd step in border-width scale 13 | 3 = 3rd step in border-width scale 14 | 4 = 4th step in border-width scale 15 | 5 = 5th step in border-width scale 16 | 17 | Media Query Extensions: 18 | -ns = not-small 19 | -m = medium 20 | -l = large 21 | 22 | */ 23 | 24 | .bw0 { border-width: 0; } 25 | .bw1 { border-width: .125rem; } 26 | .bw2 { border-width: .25rem; } 27 | .bw3 { border-width: .5rem; } 28 | .bw4 { border-width: 1rem; } 29 | .bw5 { border-width: 2rem; } 30 | 31 | /* Resets */ 32 | .bt-0 { border-top-width: 0; } 33 | .br-0 { border-right-width: 0; } 34 | .bb-0 { border-bottom-width: 0; } 35 | .bl-0 { border-left-width: 0; } 36 | 37 | @media (--breakpoint-not-small) { 38 | .bw0-ns { border-width: 0; } 39 | .bw1-ns { border-width: .125rem; } 40 | .bw2-ns { border-width: .25rem; } 41 | .bw3-ns { border-width: .5rem; } 42 | .bw4-ns { border-width: 1rem; } 43 | .bw5-ns { border-width: 2rem; } 44 | .bt-0-ns { border-top-width: 0; } 45 | .br-0-ns { border-right-width: 0; } 46 | .bb-0-ns { border-bottom-width: 0; } 47 | .bl-0-ns { border-left-width: 0; } 48 | } 49 | 50 | @media (--breakpoint-medium) { 51 | .bw0-m { border-width: 0; } 52 | .bw1-m { border-width: .125rem; } 53 | .bw2-m { border-width: .25rem; } 54 | .bw3-m { border-width: .5rem; } 55 | .bw4-m { border-width: 1rem; } 56 | .bw5-m { border-width: 2rem; } 57 | .bt-0-m { border-top-width: 0; } 58 | .br-0-m { border-right-width: 0; } 59 | .bb-0-m { border-bottom-width: 0; } 60 | .bl-0-m { border-left-width: 0; } 61 | } 62 | 63 | @media (--breakpoint-large) { 64 | .bw0-l { border-width: 0; } 65 | .bw1-l { border-width: .125rem; } 66 | .bw2-l { border-width: .25rem; } 67 | .bw3-l { border-width: .5rem; } 68 | .bw4-l { border-width: 1rem; } 69 | .bw5-l { border-width: 2rem; } 70 | .bt-0-l { border-top-width: 0; } 71 | .br-0-l { border-right-width: 0; } 72 | .bb-0-l { border-bottom-width: 0; } 73 | .bl-0-l { border-left-width: 0; } 74 | } 75 | -------------------------------------------------------------------------------- /src/_font-weight.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FONT WEIGHT 4 | Docs: http://tachyons.io/docs/typography/font-weight/ 5 | 6 | Base 7 | fw = font-weight 8 | 9 | Modifiers: 10 | 1 = literal value 100 11 | 2 = literal value 200 12 | 3 = literal value 300 13 | 4 = literal value 400 14 | 5 = literal value 500 15 | 6 = literal value 600 16 | 7 = literal value 700 17 | 8 = literal value 800 18 | 9 = literal value 900 19 | 20 | Media Query Extensions: 21 | -ns = not-small 22 | -m = medium 23 | -l = large 24 | 25 | */ 26 | 27 | .normal { font-weight: normal; } 28 | .b { font-weight: bold; } 29 | .fw1 { font-weight: 100; } 30 | .fw2 { font-weight: 200; } 31 | .fw3 { font-weight: 300; } 32 | .fw4 { font-weight: 400; } 33 | .fw5 { font-weight: 500; } 34 | .fw6 { font-weight: 600; } 35 | .fw7 { font-weight: 700; } 36 | .fw8 { font-weight: 800; } 37 | .fw9 { font-weight: 900; } 38 | 39 | 40 | @media (--breakpoint-not-small) { 41 | .normal-ns { font-weight: normal; } 42 | .b-ns { font-weight: bold; } 43 | .fw1-ns { font-weight: 100; } 44 | .fw2-ns { font-weight: 200; } 45 | .fw3-ns { font-weight: 300; } 46 | .fw4-ns { font-weight: 400; } 47 | .fw5-ns { font-weight: 500; } 48 | .fw6-ns { font-weight: 600; } 49 | .fw7-ns { font-weight: 700; } 50 | .fw8-ns { font-weight: 800; } 51 | .fw9-ns { font-weight: 900; } 52 | } 53 | 54 | @media (--breakpoint-medium) { 55 | .normal-m { font-weight: normal; } 56 | .b-m { font-weight: bold; } 57 | .fw1-m { font-weight: 100; } 58 | .fw2-m { font-weight: 200; } 59 | .fw3-m { font-weight: 300; } 60 | .fw4-m { font-weight: 400; } 61 | .fw5-m { font-weight: 500; } 62 | .fw6-m { font-weight: 600; } 63 | .fw7-m { font-weight: 700; } 64 | .fw8-m { font-weight: 800; } 65 | .fw9-m { font-weight: 900; } 66 | } 67 | 68 | @media (--breakpoint-large) { 69 | .normal-l { font-weight: normal; } 70 | .b-l { font-weight: bold; } 71 | .fw1-l { font-weight: 100; } 72 | .fw2-l { font-weight: 200; } 73 | .fw3-l { font-weight: 300; } 74 | .fw4-l { font-weight: 400; } 75 | .fw5-l { font-weight: 500; } 76 | .fw6-l { font-weight: 600; } 77 | .fw7-l { font-weight: 700; } 78 | .fw8-l { font-weight: 800; } 79 | .fw9-l { font-weight: 900; } 80 | } 81 | -------------------------------------------------------------------------------- /src/_max-widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | MAX WIDTHS 4 | Docs: http://tachyons.io/docs/layout/max-widths/ 5 | 6 | Base: 7 | mw = max-width 8 | 9 | Modifiers 10 | 1 = 1st step in width scale 11 | 2 = 2nd step in width scale 12 | 3 = 3rd step in width scale 13 | 4 = 4th step in width scale 14 | 5 = 5th step in width scale 15 | 6 = 6st step in width scale 16 | 7 = 7nd step in width scale 17 | 8 = 8rd step in width scale 18 | 9 = 9th step in width scale 19 | 20 | -100 = literal value 100% 21 | 22 | -none = string value none 23 | 24 | 25 | Media Query Extensions: 26 | -ns = not-small 27 | -m = medium 28 | -l = large 29 | 30 | */ 31 | 32 | /* Max Width Percentages */ 33 | 34 | .mw-100 { max-width: 100%; } 35 | 36 | /* Max Width Scale */ 37 | 38 | .mw1 { max-width: 1rem; } 39 | .mw2 { max-width: 2rem; } 40 | .mw3 { max-width: 4rem; } 41 | .mw4 { max-width: 8rem; } 42 | .mw5 { max-width: 16rem; } 43 | .mw6 { max-width: 32rem; } 44 | .mw7 { max-width: 48rem; } 45 | .mw8 { max-width: 64rem; } 46 | .mw9 { max-width: 96rem; } 47 | 48 | /* Max Width String Properties */ 49 | 50 | .mw-none { max-width: none; } 51 | 52 | @media (--breakpoint-not-small) { 53 | .mw-100-ns { max-width: 100%; } 54 | 55 | .mw1-ns { max-width: 1rem; } 56 | .mw2-ns { max-width: 2rem; } 57 | .mw3-ns { max-width: 4rem; } 58 | .mw4-ns { max-width: 8rem; } 59 | .mw5-ns { max-width: 16rem; } 60 | .mw6-ns { max-width: 32rem; } 61 | .mw7-ns { max-width: 48rem; } 62 | .mw8-ns { max-width: 64rem; } 63 | .mw9-ns { max-width: 96rem; } 64 | 65 | .mw-none-ns { max-width: none; } 66 | } 67 | 68 | @media (--breakpoint-medium) { 69 | .mw-100-m { max-width: 100%; } 70 | 71 | .mw1-m { max-width: 1rem; } 72 | .mw2-m { max-width: 2rem; } 73 | .mw3-m { max-width: 4rem; } 74 | .mw4-m { max-width: 8rem; } 75 | .mw5-m { max-width: 16rem; } 76 | .mw6-m { max-width: 32rem; } 77 | .mw7-m { max-width: 48rem; } 78 | .mw8-m { max-width: 64rem; } 79 | .mw9-m { max-width: 96rem; } 80 | 81 | .mw-none-m { max-width: none; } 82 | } 83 | 84 | @media (--breakpoint-large) { 85 | .mw-100-l { max-width: 100%; } 86 | 87 | .mw1-l { max-width: 1rem; } 88 | .mw2-l { max-width: 2rem; } 89 | .mw3-l { max-width: 4rem; } 90 | .mw4-l { max-width: 8rem; } 91 | .mw5-l { max-width: 16rem; } 92 | .mw6-l { max-width: 32rem; } 93 | .mw7-l { max-width: 48rem; } 94 | .mw8-l { max-width: 64rem; } 95 | .mw9-l { max-width: 96rem; } 96 | 97 | .mw-none-l { max-width: none; } 98 | } 99 | -------------------------------------------------------------------------------- /src/_typography.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TYPOGRAPHY 4 | http://tachyons.io/docs/typography/measure/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | 14 | 15 | /* Measure is limited to ~66 characters */ 16 | .measure { 17 | max-width: 30em; 18 | } 19 | 20 | /* Measure is limited to ~80 characters */ 21 | .measure-wide { 22 | max-width: 34em; 23 | } 24 | 25 | /* Measure is limited to ~45 characters */ 26 | .measure-narrow { 27 | max-width: 20em; 28 | } 29 | 30 | /* Book paragraph style - paragraphs are indented with no vertical spacing. */ 31 | .indent { 32 | text-indent: 1em; 33 | margin-top: 0; 34 | margin-bottom: 0; 35 | } 36 | 37 | .small-caps { 38 | font-variant: small-caps; 39 | } 40 | 41 | /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ 42 | 43 | .truncate { 44 | white-space: nowrap; 45 | overflow: hidden; 46 | text-overflow: ellipsis; 47 | } 48 | 49 | @media (--breakpoint-not-small) { 50 | .measure-ns { 51 | max-width: 30em; 52 | } 53 | .measure-wide-ns { 54 | max-width: 34em; 55 | } 56 | .measure-narrow-ns { 57 | max-width: 20em; 58 | } 59 | .indent-ns { 60 | text-indent: 1em; 61 | margin-top: 0; 62 | margin-bottom: 0; 63 | } 64 | .small-caps-ns { 65 | font-variant: small-caps; 66 | } 67 | .truncate-ns { 68 | white-space: nowrap; 69 | overflow: hidden; 70 | text-overflow: ellipsis; 71 | } 72 | } 73 | 74 | @media (--breakpoint-medium) { 75 | .measure-m { 76 | max-width: 30em; 77 | } 78 | .measure-wide-m { 79 | max-width: 34em; 80 | } 81 | .measure-narrow-m { 82 | max-width: 20em; 83 | } 84 | .indent-m { 85 | text-indent: 1em; 86 | margin-top: 0; 87 | margin-bottom: 0; 88 | } 89 | .small-caps-m { 90 | font-variant: small-caps; 91 | } 92 | .truncate-m { 93 | white-space: nowrap; 94 | overflow: hidden; 95 | text-overflow: ellipsis; 96 | } 97 | } 98 | 99 | @media (--breakpoint-large) { 100 | .measure-l { 101 | max-width: 30em; 102 | } 103 | .measure-wide-l { 104 | max-width: 34em; 105 | } 106 | .measure-narrow-l { 107 | max-width: 20em; 108 | } 109 | .indent-l { 110 | text-indent: 1em; 111 | margin-top: 0; 112 | margin-bottom: 0; 113 | } 114 | .small-caps-l { 115 | font-variant: small-caps; 116 | } 117 | .truncate-l { 118 | white-space: nowrap; 119 | overflow: hidden; 120 | text-overflow: ellipsis; 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /src/_overflow.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | OVERFLOW 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | .overflow-visible { overflow: visible; } 13 | .overflow-hidden { overflow: hidden; } 14 | .overflow-scroll { overflow: scroll; } 15 | .overflow-auto { overflow: auto; } 16 | 17 | .overflow-x-visible { overflow-x: visible; } 18 | .overflow-x-hidden { overflow-x: hidden; } 19 | .overflow-x-scroll { overflow-x: scroll; } 20 | .overflow-x-auto { overflow-x: auto; } 21 | 22 | .overflow-y-visible { overflow-y: visible; } 23 | .overflow-y-hidden { overflow-y: hidden; } 24 | .overflow-y-scroll { overflow-y: scroll; } 25 | .overflow-y-auto { overflow-y: auto; } 26 | 27 | @media (--breakpoint-not-small) { 28 | .overflow-visible-ns { overflow: visible; } 29 | .overflow-hidden-ns { overflow: hidden; } 30 | .overflow-scroll-ns { overflow: scroll; } 31 | .overflow-auto-ns { overflow: auto; } 32 | .overflow-x-visible-ns { overflow-x: visible; } 33 | .overflow-x-hidden-ns { overflow-x: hidden; } 34 | .overflow-x-scroll-ns { overflow-x: scroll; } 35 | .overflow-x-auto-ns { overflow-x: auto; } 36 | 37 | .overflow-y-visible-ns { overflow-y: visible; } 38 | .overflow-y-hidden-ns { overflow-y: hidden; } 39 | .overflow-y-scroll-ns { overflow-y: scroll; } 40 | .overflow-y-auto-ns { overflow-y: auto; } 41 | } 42 | 43 | @media (--breakpoint-medium) { 44 | .overflow-visible-m { overflow: visible; } 45 | .overflow-hidden-m { overflow: hidden; } 46 | .overflow-scroll-m { overflow: scroll; } 47 | .overflow-auto-m { overflow: auto; } 48 | 49 | .overflow-x-visible-m { overflow-x: visible; } 50 | .overflow-x-hidden-m { overflow-x: hidden; } 51 | .overflow-x-scroll-m { overflow-x: scroll; } 52 | .overflow-x-auto-m { overflow-x: auto; } 53 | 54 | .overflow-y-visible-m { overflow-y: visible; } 55 | .overflow-y-hidden-m { overflow-y: hidden; } 56 | .overflow-y-scroll-m { overflow-y: scroll; } 57 | .overflow-y-auto-m { overflow-y: auto; } 58 | } 59 | 60 | @media (--breakpoint-large) { 61 | .overflow-visible-l { overflow: visible; } 62 | .overflow-hidden-l { overflow: hidden; } 63 | .overflow-scroll-l { overflow: scroll; } 64 | .overflow-auto-l { overflow: auto; } 65 | 66 | .overflow-x-visible-l { overflow-x: visible; } 67 | .overflow-x-hidden-l { overflow-x: hidden; } 68 | .overflow-x-scroll-l { overflow-x: scroll; } 69 | .overflow-x-auto-l { overflow-x: auto; } 70 | 71 | .overflow-y-visible-l { overflow-y: visible; } 72 | .overflow-y-hidden-l { overflow-y: hidden; } 73 | .overflow-y-scroll-l { overflow-y: scroll; } 74 | .overflow-y-auto-l { overflow-y: auto; } 75 | } 76 | -------------------------------------------------------------------------------- /src/tachyons.css: -------------------------------------------------------------------------------- 1 | /*! TACHYONS v4.6.1 | http://tachyons.io */ 2 | 3 | /* 4 | * 5 | * ________ ______ 6 | * ___ __/_____ _________ /______ ______________________ 7 | * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ 8 | * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) 9 | * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ 10 | * /____/ 11 | * 12 | * TABLE OF CONTENTS 13 | * 14 | * 1. External Library Includes 15 | * - Normalize.css | http://normalize.css.github.io 16 | * 2. Tachyons Modules 17 | * 3. Variables 18 | * - Media Queries 19 | * - Colors 20 | * 4. Debugging 21 | * - Debug all 22 | * - Debug children 23 | * 24 | */ 25 | 26 | 27 | /* External Library Includes */ 28 | @import './_normalize'; 29 | 30 | 31 | /* Modules */ 32 | @import './_box-sizing'; 33 | @import './_aspect-ratios'; 34 | @import './_images'; 35 | @import './_background-size'; 36 | @import './_background-position'; 37 | @import './_outlines'; 38 | @import './_borders'; 39 | @import './_border-colors'; 40 | @import './_border-radius'; 41 | @import './_border-style'; 42 | @import './_border-widths'; 43 | @import './_box-shadow'; 44 | @import './_code'; 45 | @import './_coordinates'; 46 | @import './_clears'; 47 | @import './_display'; 48 | @import './_flexbox'; 49 | @import './_floats'; 50 | @import './_font-family'; 51 | @import './_font-style'; 52 | @import './_font-weight'; 53 | @import './_forms'; 54 | @import './_heights'; 55 | @import './_letter-spacing'; 56 | @import './_line-height'; 57 | @import './_links'; 58 | @import './_lists'; 59 | @import './_max-widths'; 60 | @import './_widths'; 61 | @import './_overflow'; 62 | @import './_position'; 63 | @import './_opacity'; 64 | @import './_rotations'; 65 | @import './_skins'; 66 | @import './_skins-pseudo'; 67 | @import './_spacing'; 68 | @import './_negative-margins'; 69 | @import './_tables'; 70 | @import './_text-decoration'; 71 | @import './_text-align'; 72 | @import './_text-transform'; 73 | @import './_type-scale'; 74 | @import './_typography'; 75 | @import './_utilities'; 76 | @import './_visibility'; 77 | @import './_white-space'; 78 | @import './_vertical-align'; 79 | @import './_hovers'; 80 | @import './_z-index'; 81 | @import './_nested'; 82 | @import './_styles'; 83 | 84 | /* Variables */ 85 | /* Importing here will allow you to override any variables in the modules */ 86 | @import './_colors'; 87 | @import './_media-queries'; 88 | 89 | /* Debugging */ 90 | @import './_debug-children'; 91 | @import './_debug-grid'; 92 | 93 | /* Uncomment out the line below to help debug layout issues */ 94 | /* @import './_debug'; */ 95 | -------------------------------------------------------------------------------- /src/_background-position.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BACKGROUND POSITION 4 | 5 | Base: 6 | bg = background 7 | 8 | Modifiers: 9 | -center = center center 10 | -top = top center 11 | -right = center right 12 | -bottom = bottom center 13 | -left = center left 14 | 15 | Media Query Extensions: 16 | -ns = not-small 17 | -m = medium 18 | -l = large 19 | 20 | */ 21 | 22 | .bg-center { 23 | background-repeat: no-repeat; 24 | background-position: center center; 25 | } 26 | 27 | .bg-top { 28 | background-repeat: no-repeat; 29 | background-position: top center; 30 | } 31 | 32 | .bg-right { 33 | background-repeat: no-repeat; 34 | background-position: center right; 35 | } 36 | 37 | .bg-bottom { 38 | background-repeat: no-repeat; 39 | background-position: bottom center; 40 | } 41 | 42 | .bg-left { 43 | background-repeat: no-repeat; 44 | background-position: center left; 45 | } 46 | 47 | @media (--breakpoint-not-small) { 48 | .bg-center-ns { 49 | background-repeat: no-repeat; 50 | background-position: center center; 51 | } 52 | 53 | .bg-top-ns { 54 | background-repeat: no-repeat; 55 | background-position: top center; 56 | } 57 | 58 | .bg-right-ns { 59 | background-repeat: no-repeat; 60 | background-position: center right; 61 | } 62 | 63 | .bg-bottom-ns { 64 | background-repeat: no-repeat; 65 | background-position: bottom center; 66 | } 67 | 68 | .bg-left-ns { 69 | background-repeat: no-repeat; 70 | background-position: center left; 71 | } 72 | } 73 | 74 | @media (--breakpoint-medium) { 75 | .bg-center-m { 76 | background-repeat: no-repeat; 77 | background-position: center center; 78 | } 79 | 80 | .bg-top-m { 81 | background-repeat: no-repeat; 82 | background-position: top center; 83 | } 84 | 85 | .bg-right-m { 86 | background-repeat: no-repeat; 87 | background-position: center right; 88 | } 89 | 90 | .bg-bottom-m { 91 | background-repeat: no-repeat; 92 | background-position: bottom center; 93 | } 94 | 95 | .bg-left-m { 96 | background-repeat: no-repeat; 97 | background-position: center left; 98 | } 99 | } 100 | 101 | @media (--breakpoint-large) { 102 | .bg-center-l { 103 | background-repeat: no-repeat; 104 | background-position: center center; 105 | } 106 | 107 | .bg-top-l { 108 | background-repeat: no-repeat; 109 | background-position: top center; 110 | } 111 | 112 | .bg-right-l { 113 | background-repeat: no-repeat; 114 | background-position: center right; 115 | } 116 | 117 | .bg-bottom-l { 118 | background-repeat: no-repeat; 119 | background-position: bottom center; 120 | } 121 | 122 | .bg-left-l { 123 | background-repeat: no-repeat; 124 | background-position: center left; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /code-of-conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | ### Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, 8 | body size, disability, ethnicity, gender identity and expression, level of 9 | experience, nationality, personal appearance, race, religion, or sexual 10 | identity and orientation. 11 | 12 | ### Our Standards 13 | 14 | #### Examples of behavior that contributes to creating a positive environment include: 15 | 16 | * Using welcoming and inclusive language 17 | * Being respectful of differing viewpoints and experiences 18 | * Gracefully accepting constructive criticism 19 | * Focusing on what is best for the community 20 | * Showing empathy towards other community members 21 | 22 | #### Examples of unacceptable behavior by participants include: 23 | 24 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 25 | * Trolling, insulting/derogatory comments, and personal or political attacks 26 | * Public or private harassment 27 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 28 | * Other conduct which could reasonably be considered inappropriate in a professional setting 29 | 30 | ### Our Responsibilities 31 | 32 | Project maintainers are responsible for clarifying the standards of acceptable 33 | behavior and are expected to take appropriate and fair corrective action in 34 | response to any instances of unacceptable behavior. 35 | 36 | Project maintainers have the right and responsibility to remove, edit, or 37 | reject comments, commits, code, wiki edits, issues, and other contributions 38 | that are not aligned to this Code of Conduct, or to ban temporarily or 39 | permanently any contributor for other behaviors that they deem inappropriate, 40 | threatening, offensive, or harmful. 41 | 42 | ### Scope 43 | 44 | This Code of Conduct applies both within project spaces and in public spaces 45 | when an individual is representing the project or its community. Examples of 46 | representing a project or community include using an official project e-mail 47 | address, posting via an official social media account, or acting as an 48 | appointed representative at an online or offline event. Representation of a 49 | project may be further defined and clarified by project maintainers. 50 | 51 | ### Enforcement 52 | 53 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 54 | reported by contacting the project team at hi@mrmrs.cc. All 55 | complaints will be reviewed and investigated and will result in a response that 56 | is deemed necessary and appropriate to the circumstances. The project team is 57 | obligated to maintain confidentiality with regard to the reporter of an 58 | incident. Further details of specific enforcement policies may be posted 59 | separately. 60 | 61 | Project maintainers who do not follow or enforce the Code of Conduct in good 62 | faith may face temporary or permanent repercussions as determined by other 63 | members of the project's leadership. 64 | 65 | ### Attribution 66 | 67 | This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at http://contributor-covenant.org/version/1/4 68 | -------------------------------------------------------------------------------- /src/_display.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISPLAY 4 | Docs: http://tachyons.io/docs/layout/display 5 | 6 | Base: 7 | d = display 8 | 9 | Modifiers: 10 | n = none 11 | b = block 12 | ib = inline-block 13 | it = inline-table 14 | t = table 15 | tc = table-cell 16 | t-row = table-row 17 | t-columm = table-column 18 | t-column-group = table-column-group 19 | 20 | Media Query Extensions: 21 | -ns = not-small 22 | -m = medium 23 | -l = large 24 | 25 | */ 26 | 27 | .dn { display: none; } 28 | .di { display: inline; } 29 | .db { display: block; } 30 | .dib { display: inline-block; } 31 | .dit { display: inline-table; } 32 | .dt { display: table; } 33 | .dtc { display: table-cell; } 34 | .dt-row { display: table-row; } 35 | .dt-row-group { display: table-row-group; } 36 | .dt-column { display: table-column; } 37 | .dt-column-group { display: table-column-group; } 38 | 39 | /* 40 | This will set table to full width and then 41 | all cells will be equal width 42 | */ 43 | .dt--fixed { 44 | table-layout: fixed; 45 | width: 100%; 46 | } 47 | 48 | @media (--breakpoint-not-small) { 49 | .dn-ns { display: none; } 50 | .di-ns { display: inline; } 51 | .db-ns { display: block; } 52 | .dib-ns { display: inline-block; } 53 | .dit-ns { display: inline-table; } 54 | .dt-ns { display: table; } 55 | .dtc-ns { display: table-cell; } 56 | .dt-row-ns { display: table-row; } 57 | .dt-row-group-ns { display: table-row-group; } 58 | .dt-column-ns { display: table-column; } 59 | .dt-column-group-ns { display: table-column-group; } 60 | 61 | .dt--fixed-ns { 62 | table-layout: fixed; 63 | width: 100%; 64 | } 65 | } 66 | 67 | @media (--breakpoint-medium) { 68 | .dn-m { display: none; } 69 | .di-m { display: inline; } 70 | .db-m { display: block; } 71 | .dib-m { display: inline-block; } 72 | .dit-m { display: inline-table; } 73 | .dt-m { display: table; } 74 | .dtc-m { display: table-cell; } 75 | .dt-row-m { display: table-row; } 76 | .dt-row-group-m { display: table-row-group; } 77 | .dt-column-m { display: table-column; } 78 | .dt-column-group-m { display: table-column-group; } 79 | 80 | .dt--fixed-m { 81 | table-layout: fixed; 82 | width: 100%; 83 | } 84 | } 85 | 86 | @media (--breakpoint-large) { 87 | .dn-l { display: none; } 88 | .di-l { display: inline; } 89 | .db-l { display: block; } 90 | .dib-l { display: inline-block; } 91 | .dit-l { display: inline-table; } 92 | .dt-l { display: table; } 93 | .dtc-l { display: table-cell; } 94 | .dt-row-l { display: table-row; } 95 | .dt-row-group-l { display: table-row-group; } 96 | .dt-column-l { display: table-column; } 97 | .dt-column-group-l { display: table-column-group; } 98 | 99 | .dt--fixed-l { 100 | table-layout: fixed; 101 | width: 100%; 102 | } 103 | } 104 | 105 | -------------------------------------------------------------------------------- /src/_heights.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | HEIGHTS 4 | Docs: http://tachyons.io/docs/layout/heights/ 5 | 6 | Base: 7 | h = height 8 | min-h = min-height 9 | min-vh = min-height vertical screen height 10 | vh = vertical screen height 11 | 12 | Modifiers 13 | 1 = 1st step in height scale 14 | 2 = 2nd step in height scale 15 | 3 = 3rd step in height scale 16 | 4 = 4th step in height scale 17 | 5 = 5th step in height scale 18 | 19 | -25 = literal value 25% 20 | -50 = literal value 50% 21 | -75 = literal value 75% 22 | -100 = literal value 100% 23 | 24 | -auto = string value of auto 25 | -inherit = string value of inherit 26 | 27 | Media Query Extensions: 28 | -ns = not-small 29 | -m = medium 30 | -l = large 31 | 32 | */ 33 | 34 | /* Height Scale */ 35 | 36 | .h1 { height: 1rem; } 37 | .h2 { height: 2rem; } 38 | .h3 { height: 4rem; } 39 | .h4 { height: 8rem; } 40 | .h5 { height: 16rem; } 41 | 42 | /* Height Percentages - Based off of height of parent */ 43 | 44 | .h-25 { height: 25%; } 45 | .h-50 { height: 50%; } 46 | .h-75 { height: 75%; } 47 | .h-100 { height: 100%; } 48 | 49 | .min-h-100 { min-height: 100%; } 50 | 51 | /* Screen Height Percentage */ 52 | 53 | .vh-25 { height: 25vh; } 54 | .vh-50 { height: 50vh; } 55 | .vh-75 { height: 75vh; } 56 | .vh-100 { height: 100vh; } 57 | 58 | .min-vh-100 { min-height: 100vh; } 59 | 60 | 61 | /* String Properties */ 62 | 63 | .h-auto { height: auto; } 64 | .h-inherit { height: inherit; } 65 | 66 | @media (--breakpoint-not-small) { 67 | .h1-ns { height: 1rem; } 68 | .h2-ns { height: 2rem; } 69 | .h3-ns { height: 4rem; } 70 | .h4-ns { height: 8rem; } 71 | .h5-ns { height: 16rem; } 72 | .h-25-ns { height: 25%; } 73 | .h-50-ns { height: 50%; } 74 | .h-75-ns { height: 75%; } 75 | .h-100-ns { height: 100%; } 76 | .min-h-100-ns { min-height: 100%; } 77 | .vh-25-ns { height: 25vh; } 78 | .vh-50-ns { height: 50vh; } 79 | .vh-75-ns { height: 75vh; } 80 | .vh-100-ns { height: 100vh; } 81 | .min-vh-100-ns { min-height: 100vh; } 82 | .h-auto-ns { height: auto; } 83 | .h-inherit-ns { height: inherit; } 84 | } 85 | 86 | @media (--breakpoint-medium) { 87 | .h1-m { height: 1rem; } 88 | .h2-m { height: 2rem; } 89 | .h3-m { height: 4rem; } 90 | .h4-m { height: 8rem; } 91 | .h5-m { height: 16rem; } 92 | .h-25-m { height: 25%; } 93 | .h-50-m { height: 50%; } 94 | .h-75-m { height: 75%; } 95 | .h-100-m { height: 100%; } 96 | .min-h-100-m { min-height: 100%; } 97 | .vh-25-m { height: 25vh; } 98 | .vh-50-m { height: 50vh; } 99 | .vh-75-m { height: 75vh; } 100 | .vh-100-m { height: 100vh; } 101 | .min-vh-100-m { min-height: 100vh; } 102 | .h-auto-m { height: auto; } 103 | .h-inherit-m { height: inherit; } 104 | } 105 | 106 | @media (--breakpoint-large) { 107 | .h1-l { height: 1rem; } 108 | .h2-l { height: 2rem; } 109 | .h3-l { height: 4rem; } 110 | .h4-l { height: 8rem; } 111 | .h5-l { height: 16rem; } 112 | .h-25-l { height: 25%; } 113 | .h-50-l { height: 50%; } 114 | .h-75-l { height: 75%; } 115 | .h-100-l { height: 100%; } 116 | .min-h-100-l { min-height: 100%; } 117 | .vh-25-l { height: 25vh; } 118 | .vh-50-l { height: 50vh; } 119 | .vh-75-l { height: 75vh; } 120 | .vh-100-l { height: 100vh; } 121 | .min-vh-100-l { min-height: 100vh; } 122 | .h-auto-l { height: auto; } 123 | .h-inherit-l { height: inherit; } 124 | } 125 | -------------------------------------------------------------------------------- /src/_border-radius.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER RADIUS 4 | Docs: http://tachyons.io/docs/themes/border-radius/ 5 | 6 | Base: 7 | br = border-radius 8 | 9 | Modifiers: 10 | 0 = 0/none 11 | 1 = 1st step in scale 12 | 2 = 2nd step in scale 13 | 3 = 3rd step in scale 14 | 4 = 4th step in scale 15 | 16 | Literal values: 17 | -100 = 100% 18 | -pill = 9999px 19 | 20 | Media Query Extensions: 21 | -ns = not-small 22 | -m = medium 23 | -l = large 24 | 25 | */ 26 | 27 | .br0 { border-radius: 0; } 28 | .br1 { border-radius: .125rem; } 29 | .br2 { border-radius: .25rem; } 30 | .br3 { border-radius: .5rem; } 31 | .br4 { border-radius: 1rem; } 32 | .br-100 { border-radius: 100%; } 33 | .br-pill { border-radius: 9999px; } 34 | .br--bottom { 35 | border-top-left-radius: 0; 36 | border-top-right-radius: 0; 37 | } 38 | .br--top { 39 | border-bottom-left-radius: 0; 40 | border-bottom-right-radius: 0; 41 | } 42 | .br--right { 43 | border-top-left-radius: 0; 44 | border-bottom-left-radius: 0; 45 | } 46 | .br--left { 47 | border-top-right-radius: 0; 48 | border-bottom-right-radius: 0; 49 | } 50 | 51 | @media (--breakpoint-not-small) { 52 | .br0-ns { border-radius: 0; } 53 | .br1-ns { border-radius: .125rem; } 54 | .br2-ns { border-radius: .25rem; } 55 | .br3-ns { border-radius: .5rem; } 56 | .br4-ns { border-radius: 1rem; } 57 | .br-100-ns { border-radius: 100%; } 58 | .br-pill-ns { border-radius: 9999px; } 59 | .br--bottom-ns { 60 | border-top-left-radius: 0; 61 | border-top-right-radius: 0; 62 | } 63 | .br--top-ns { 64 | border-bottom-left-radius: 0; 65 | border-bottom-right-radius: 0; 66 | } 67 | .br--right-ns { 68 | border-top-left-radius: 0; 69 | border-bottom-left-radius: 0; 70 | } 71 | .br--left-ns { 72 | border-top-right-radius: 0; 73 | border-bottom-right-radius: 0; 74 | } 75 | } 76 | 77 | @media (--breakpoint-medium) { 78 | .br0-m { border-radius: 0; } 79 | .br1-m { border-radius: .125rem; } 80 | .br2-m { border-radius: .25rem; } 81 | .br3-m { border-radius: .5rem; } 82 | .br4-m { border-radius: 1rem; } 83 | .br-100-m { border-radius: 100%; } 84 | .br-pill-m { border-radius: 9999px; } 85 | .br--bottom-m { 86 | border-top-left-radius: 0; 87 | border-top-right-radius: 0; 88 | } 89 | .br--top-m { 90 | border-bottom-left-radius: 0; 91 | border-bottom-right-radius: 0; 92 | } 93 | .br--right-m { 94 | border-top-left-radius: 0; 95 | border-bottom-left-radius: 0; 96 | } 97 | .br--left-m { 98 | border-top-right-radius: 0; 99 | border-bottom-right-radius: 0; 100 | } 101 | } 102 | 103 | @media (--breakpoint-large) { 104 | .br0-l { border-radius: 0; } 105 | .br1-l { border-radius: .125rem; } 106 | .br2-l { border-radius: .25rem; } 107 | .br3-l { border-radius: .5rem; } 108 | .br4-l { border-radius: 1rem; } 109 | .br-100-l { border-radius: 100%; } 110 | .br-pill-l { border-radius: 9999px; } 111 | .br--bottom-l { 112 | border-top-left-radius: 0; 113 | border-top-right-radius: 0; 114 | } 115 | .br--top-l { 116 | border-bottom-left-radius: 0; 117 | border-bottom-right-radius: 0; 118 | } 119 | .br--right-l { 120 | border-top-left-radius: 0; 121 | border-bottom-left-radius: 0; 122 | } 123 | .br--left-l { 124 | border-top-right-radius: 0; 125 | border-bottom-right-radius: 0; 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/_hovers.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | HOVER EFFECTS 4 | Docs: http://tachyons.io/docs/themes/hovers/ 5 | 6 | - Dim 7 | - Glow 8 | - Hide Child 9 | - Underline text 10 | - Grow 11 | - Pointer 12 | - Shadow 13 | 14 | */ 15 | 16 | /* 17 | 18 | Dim element on hover by adding the dim class. 19 | 20 | */ 21 | .dim { 22 | opacity: 1; 23 | transition: opacity .15s ease-in; 24 | } 25 | .dim:hover, 26 | .dim:focus { 27 | opacity: .5; 28 | transition: opacity .15s ease-in; 29 | } 30 | .dim:active { 31 | opacity: .8; transition: opacity .15s ease-out; 32 | } 33 | 34 | /* 35 | 36 | Animate opacity to 100% on hover by adding the glow class. 37 | 38 | */ 39 | .glow { 40 | transition: opacity .15s ease-in; 41 | } 42 | .glow:hover, 43 | .glow:focus { 44 | opacity: 1; 45 | transition: opacity .15s ease-in; 46 | } 47 | 48 | /* 49 | 50 | Hide child & reveal on hover: 51 | 52 | Put the hide-child class on a parent element and any nested element with the 53 | child class will be hidden and displayed on hover or focus. 54 | 55 |
56 |
Hidden until hover or focus
57 |
Hidden until hover or focus
58 |
Hidden until hover or focus
59 |
Hidden until hover or focus
60 |
61 | */ 62 | 63 | .hide-child .child { 64 | opacity: 0; 65 | transition: opacity .15s ease-in; 66 | } 67 | .hide-child:hover .child, 68 | .hide-child:focus .child, 69 | .hide-child:active .child { 70 | opacity: 1; 71 | transition: opacity .15s ease-in; 72 | } 73 | 74 | .underline-hover:hover, 75 | .underline-hover:focus { 76 | text-decoration: underline; 77 | } 78 | 79 | /* Can combine this with overflow-hidden to make background images grow on hover 80 | * even if you are using background-size: cover */ 81 | 82 | .grow { 83 | -moz-osx-font-smoothing: grayscale; 84 | backface-visibility: hidden; 85 | transform: translateZ(0); 86 | transition: transform 0.25s ease-out; 87 | } 88 | 89 | .grow:hover, 90 | .grow:focus { 91 | transform: scale(1.05); 92 | } 93 | 94 | .grow:active { 95 | transform: scale(.90); 96 | } 97 | 98 | .grow-large { 99 | -moz-osx-font-smoothing: grayscale; 100 | backface-visibility: hidden; 101 | transform: translateZ(0); 102 | transition: transform .25s ease-in-out; 103 | } 104 | 105 | .grow-large:hover, 106 | .grow-large:focus { 107 | transform: scale(1.2); 108 | } 109 | 110 | .grow-large:active { 111 | transform: scale(.95); 112 | } 113 | 114 | /* Add pointer on hover */ 115 | 116 | .pointer:hover { 117 | cursor: pointer; 118 | } 119 | 120 | /* 121 | Add shadow on hover. 122 | 123 | Performant box-shadow animation pattern from 124 | http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 125 | */ 126 | 127 | .shadow-hover { 128 | cursor: pointer; 129 | position: relative; 130 | transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 131 | } 132 | 133 | .shadow-hover::after { 134 | content: ''; 135 | box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ); 136 | opacity: 0; 137 | position: absolute; 138 | top: 0; 139 | left: 0; 140 | width: 100%; 141 | height: 100%; 142 | z-index: -1; 143 | transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 144 | } 145 | 146 | .shadow-hover:hover::after, 147 | .shadow-hover:focus::after { 148 | opacity: 1; 149 | } 150 | 151 | /* Combine with classes in skins and skins-pseudo for 152 | * many different transition possibilities. */ 153 | 154 | .bg-animate, 155 | .bg-animate:hover, 156 | .bg-animate:focus { 157 | transition: background-color .15s ease-in-out; 158 | } 159 | 160 | -------------------------------------------------------------------------------- /src/_border-colors.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER COLORS 4 | Docs: http://tachyons.io/docs/themes/borders/ 5 | 6 | Border colors can be used to extend the base 7 | border classes ba,bt,bb,br,bl found in the _borders.css file. 8 | 9 | The base border class by default will set the color of the border 10 | to that of the current text color. These classes are for the cases 11 | where you desire for the text and border colors to be different. 12 | 13 | Base: 14 | b = border 15 | 16 | Modifiers: 17 | --color-name = each color variable name is also a border color name 18 | 19 | */ 20 | 21 | .b--black { border-color: var(--black); } 22 | .b--near-black { border-color: var(--near-black); } 23 | .b--dark-gray { border-color: var(--dark-gray); } 24 | .b--mid-gray { border-color: var(--mid-gray); } 25 | .b--gray { border-color: var(--gray); } 26 | .b--silver { border-color: var(--silver); } 27 | .b--light-silver { border-color: var(--light-silver); } 28 | .b--moon-gray { border-color: var(--moon-gray); } 29 | .b--light-gray { border-color: var(--light-gray); } 30 | .b--near-white { border-color: var(--near-white); } 31 | .b--white { border-color: var(--white); } 32 | 33 | .b--white-90 { border-color: var(--white-90); } 34 | .b--white-80 { border-color: var(--white-80); } 35 | .b--white-70 { border-color: var(--white-70); } 36 | .b--white-60 { border-color: var(--white-60); } 37 | .b--white-50 { border-color: var(--white-50); } 38 | .b--white-40 { border-color: var(--white-40); } 39 | .b--white-30 { border-color: var(--white-30); } 40 | .b--white-20 { border-color: var(--white-20); } 41 | .b--white-10 { border-color: var(--white-10); } 42 | .b--white-05 { border-color: var(--white-05); } 43 | .b--white-025 { border-color: var(--white-025); } 44 | .b--white-0125 { border-color: var(--white-0125); } 45 | 46 | .b--black-90 { border-color: var(--black-90); } 47 | .b--black-80 { border-color: var(--black-80); } 48 | .b--black-70 { border-color: var(--black-70); } 49 | .b--black-60 { border-color: var(--black-60); } 50 | .b--black-50 { border-color: var(--black-50); } 51 | .b--black-40 { border-color: var(--black-40); } 52 | .b--black-30 { border-color: var(--black-30); } 53 | .b--black-20 { border-color: var(--black-20); } 54 | .b--black-10 { border-color: var(--black-10); } 55 | .b--black-05 { border-color: var(--black-05); } 56 | .b--black-025 { border-color: var(--black-025); } 57 | .b--black-0125 { border-color: var(--black-0125); } 58 | 59 | .b--dark-red { border-color: var(--dark-red); } 60 | .b--red { border-color: var(--red); } 61 | .b--light-red { border-color: var(--light-red); } 62 | .b--orange { border-color: var(--orange); } 63 | .b--gold { border-color: var(--gold); } 64 | .b--yellow { border-color: var(--yellow); } 65 | .b--light-yellow { border-color: var(--light-yellow); } 66 | .b--purple { border-color: var(--purple); } 67 | .b--light-purple { border-color: var(--light-purple); } 68 | .b--dark-pink { border-color: var(--dark-pink); } 69 | .b--hot-pink { border-color: var(--hot-pink); } 70 | .b--pink { border-color: var(--pink); } 71 | .b--light-pink { border-color: var(--light-pink); } 72 | .b--dark-green { border-color: var(--dark-green); } 73 | .b--green { border-color: var(--green); } 74 | .b--light-green { border-color: var(--light-green); } 75 | .b--navy { border-color: var(--navy); } 76 | .b--dark-blue { border-color: var(--dark-blue); } 77 | .b--blue { border-color: var(--blue); } 78 | .b--light-blue { border-color: var(--light-blue); } 79 | .b--lightest-blue { border-color: var(--lightest-blue); } 80 | .b--washed-blue { border-color: var(--washed-blue); } 81 | .b--washed-green { border-color: var(--washed-green); } 82 | .b--washed-yellow { border-color: var(--washed-yellow); } 83 | .b--washed-red { border-color: var(--washed-red); } 84 | 85 | .b--transparent { border-color: var(--transparent); } 86 | -------------------------------------------------------------------------------- /src/_coordinates.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | COORDINATES 4 | Docs: http://tachyons.io/docs/layout/position/ 5 | 6 | Use in combination with the position module. 7 | 8 | Base: 9 | top 10 | bottom 11 | right 12 | left 13 | 14 | Modifiers: 15 | -0 = literal value 0 16 | -1 = literal value 1 17 | -2 = literal value 2 18 | --1 = literal value -1 19 | --2 = literal value -2 20 | 21 | Media Query Extensions: 22 | -ns = not-small 23 | -m = medium 24 | -l = large 25 | 26 | */ 27 | 28 | .top-0 { top: 0; } 29 | .right-0 { right: 0; } 30 | .bottom-0 { bottom: 0; } 31 | .left-0 { left: 0; } 32 | 33 | .top-1 { top: 1rem; } 34 | .right-1 { right: 1rem; } 35 | .bottom-1 { bottom: 1rem; } 36 | .left-1 { left: 1rem; } 37 | 38 | .top-2 { top: 2rem; } 39 | .right-2 { right: 2rem; } 40 | .bottom-2 { bottom: 2rem; } 41 | .left-2 { left: 2rem; } 42 | 43 | .top--1 { top: -1rem; } 44 | .right--1 { right: -1rem; } 45 | .bottom--1 { bottom: -1rem; } 46 | .left--1 { left: -1rem; } 47 | 48 | .top--2 { top: -2rem; } 49 | .right--2 { right: -2rem; } 50 | .bottom--2 { bottom: -2rem; } 51 | .left--2 { left: -2rem; } 52 | 53 | 54 | .absolute--fill { 55 | top: 0; 56 | right: 0; 57 | bottom: 0; 58 | left: 0; 59 | } 60 | 61 | @media (--breakpoint-not-small) { 62 | .top-0-ns { top: 0; } 63 | .left-0-ns { left: 0; } 64 | .right-0-ns { right: 0; } 65 | .bottom-0-ns { bottom: 0; } 66 | .top-1-ns { top: 1rem; } 67 | .left-1-ns { left: 1rem; } 68 | .right-1-ns { right: 1rem; } 69 | .bottom-1-ns { bottom: 1rem; } 70 | .top-2-ns { top: 2rem; } 71 | .left-2-ns { left: 2rem; } 72 | .right-2-ns { right: 2rem; } 73 | .bottom-2-ns { bottom: 2rem; } 74 | .top--1-ns { top: -1rem; } 75 | .right--1-ns { right: -1rem; } 76 | .bottom--1-ns { bottom: -1rem; } 77 | .left--1-ns { left: -1rem; } 78 | .top--2-ns { top: -2rem; } 79 | .right--2-ns { right: -2rem; } 80 | .bottom--2-ns { bottom: -2rem; } 81 | .left--2-ns { left: -2rem; } 82 | .absolute--fill-ns { 83 | top: 0; 84 | right: 0; 85 | bottom: 0; 86 | left: 0; 87 | } 88 | } 89 | 90 | @media (--breakpoint-medium) { 91 | .top-0-m { top: 0; } 92 | .left-0-m { left: 0; } 93 | .right-0-m { right: 0; } 94 | .bottom-0-m { bottom: 0; } 95 | .top-1-m { top: 1rem; } 96 | .left-1-m { left: 1rem; } 97 | .right-1-m { right: 1rem; } 98 | .bottom-1-m { bottom: 1rem; } 99 | .top-2-m { top: 2rem; } 100 | .left-2-m { left: 2rem; } 101 | .right-2-m { right: 2rem; } 102 | .bottom-2-m { bottom: 2rem; } 103 | .top--1-m { top: -1rem; } 104 | .right--1-m { right: -1rem; } 105 | .bottom--1-m { bottom: -1rem; } 106 | .left--1-m { left: -1rem; } 107 | .top--2-m { top: -2rem; } 108 | .right--2-m { right: -2rem; } 109 | .bottom--2-m { bottom: -2rem; } 110 | .left--2-m { left: -2rem; } 111 | .absolute--fill-m { 112 | top: 0; 113 | right: 0; 114 | bottom: 0; 115 | left: 0; 116 | } 117 | } 118 | 119 | @media (--breakpoint-large) { 120 | .top-0-l { top: 0; } 121 | .left-0-l { left: 0; } 122 | .right-0-l { right: 0; } 123 | .bottom-0-l { bottom: 0; } 124 | .top-1-l { top: 1rem; } 125 | .left-1-l { left: 1rem; } 126 | .right-1-l { right: 1rem; } 127 | .bottom-1-l { bottom: 1rem; } 128 | .top-2-l { top: 2rem; } 129 | .left-2-l { left: 2rem; } 130 | .right-2-l { right: 2rem; } 131 | .bottom-2-l { bottom: 2rem; } 132 | .top--1-l { top: -1rem; } 133 | .right--1-l { right: -1rem; } 134 | .bottom--1-l { bottom: -1rem; } 135 | .left--1-l { left: -1rem; } 136 | .top--2-l { top: -2rem; } 137 | .right--2-l { right: -2rem; } 138 | .bottom--2-l { bottom: -2rem; } 139 | .left--2-l { left: -2rem; } 140 | .absolute--fill-l { 141 | top: 0; 142 | right: 0; 143 | bottom: 0; 144 | left: 0; 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /src/_widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WIDTHS 4 | Docs: http://tachyons.io/docs/layout/widths/ 5 | 6 | Base: 7 | w = width 8 | 9 | Modifiers 10 | 1 = 1st step in width scale 11 | 2 = 2nd step in width scale 12 | 3 = 3rd step in width scale 13 | 4 = 4th step in width scale 14 | 5 = 5th step in width scale 15 | 16 | -10 = literal value 10% 17 | -20 = literal value 20% 18 | -25 = literal value 25% 19 | -30 = literal value 30% 20 | -33 = literal value 33% 21 | -34 = literal value 34% 22 | -40 = literal value 40% 23 | -50 = literal value 50% 24 | -60 = literal value 60% 25 | -70 = literal value 70% 26 | -75 = literal value 75% 27 | -80 = literal value 80% 28 | -90 = literal value 90% 29 | -100 = literal value 100% 30 | 31 | -third = 100% / 3 (Not supported in opera mini or IE8) 32 | -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) 33 | -auto = string value auto 34 | 35 | 36 | Media Query Extensions: 37 | -ns = not-small 38 | -m = medium 39 | -l = large 40 | 41 | */ 42 | 43 | /* Width Scale */ 44 | 45 | .w1 { width: 1rem; } 46 | .w2 { width: 2rem; } 47 | .w3 { width: 4rem; } 48 | .w4 { width: 8rem; } 49 | .w5 { width: 16rem; } 50 | 51 | .w-10 { width: 10%; } 52 | .w-20 { width: 20%; } 53 | .w-25 { width: 25%; } 54 | .w-30 { width: 30%; } 55 | .w-33 { width: 33%; } 56 | .w-34 { width: 34%; } 57 | .w-40 { width: 40%; } 58 | .w-50 { width: 50%; } 59 | .w-60 { width: 60%; } 60 | .w-70 { width: 70%; } 61 | .w-75 { width: 75%; } 62 | .w-80 { width: 80%; } 63 | .w-90 { width: 90%; } 64 | .w-100 { width: 100%; } 65 | 66 | .w-third { width: calc(100% / 3); } 67 | .w-two-thirds { width: calc(100% / 1.5); } 68 | .w-auto { width: auto; } 69 | 70 | @media (--breakpoint-not-small) { 71 | .w1-ns { width: 1rem; } 72 | .w2-ns { width: 2rem; } 73 | .w3-ns { width: 4rem; } 74 | .w4-ns { width: 8rem; } 75 | .w5-ns { width: 16rem; } 76 | .w-10-ns { width: 10%; } 77 | .w-20-ns { width: 20%; } 78 | .w-25-ns { width: 25%; } 79 | .w-30-ns { width: 30%; } 80 | .w-33-ns { width: 33%; } 81 | .w-34-ns { width: 34%; } 82 | .w-40-ns { width: 40%; } 83 | .w-50-ns { width: 50%; } 84 | .w-60-ns { width: 60%; } 85 | .w-70-ns { width: 70%; } 86 | .w-75-ns { width: 75%; } 87 | .w-80-ns { width: 80%; } 88 | .w-90-ns { width: 90%; } 89 | .w-100-ns { width: 100%; } 90 | .w-third-ns { width: calc(100% / 3); } 91 | .w-two-thirds-ns { width: calc(100% / 1.5); } 92 | .w-auto-ns { width: auto; } 93 | } 94 | 95 | @media (--breakpoint-medium) { 96 | .w1-m { width: 1rem; } 97 | .w2-m { width: 2rem; } 98 | .w3-m { width: 4rem; } 99 | .w4-m { width: 8rem; } 100 | .w5-m { width: 16rem; } 101 | .w-10-m { width: 10%; } 102 | .w-20-m { width: 20%; } 103 | .w-25-m { width: 25%; } 104 | .w-30-m { width: 30%; } 105 | .w-33-m { width: 33%; } 106 | .w-34-m { width: 34%; } 107 | .w-40-m { width: 40%; } 108 | .w-50-m { width: 50%; } 109 | .w-60-m { width: 60%; } 110 | .w-70-m { width: 70%; } 111 | .w-75-m { width: 75%; } 112 | .w-80-m { width: 80%; } 113 | .w-90-m { width: 90%; } 114 | .w-100-m { width: 100%; } 115 | .w-third-m { width: calc(100% / 3); } 116 | .w-two-thirds-m { width: calc(100% / 1.5); } 117 | .w-auto-m { width: auto; } 118 | } 119 | 120 | @media (--breakpoint-large) { 121 | .w1-l { width: 1rem; } 122 | .w2-l { width: 2rem; } 123 | .w3-l { width: 4rem; } 124 | .w4-l { width: 8rem; } 125 | .w5-l { width: 16rem; } 126 | .w-10-l { width: 10%; } 127 | .w-20-l { width: 20%; } 128 | .w-25-l { width: 25%; } 129 | .w-30-l { width: 30%; } 130 | .w-33-l { width: 33%; } 131 | .w-34-l { width: 34%; } 132 | .w-40-l { width: 40%; } 133 | .w-50-l { width: 50%; } 134 | .w-60-l { width: 60%; } 135 | .w-70-l { width: 70%; } 136 | .w-75-l { width: 75%; } 137 | .w-80-l { width: 80%; } 138 | .w-90-l { width: 90%; } 139 | .w-100-l { width: 100%; } 140 | .w-third-l { width: calc(100% / 3); } 141 | .w-two-thirds-l { width: calc(100% / 1.5); } 142 | .w-auto-l { width: auto; } 143 | } 144 | -------------------------------------------------------------------------------- /src/_aspect-ratios.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ASPECT RATIOS 4 | 5 | */ 6 | 7 | /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. 8 | * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e 9 | * Make sure there are no height and width attributes on the embedded media. 10 | * Adapted from: https://github.com/suitcss/components-flex-embed 11 | * 12 | * Example: 13 | * 14 | *
15 | * 16 | *
17 | * 18 | * */ 19 | 20 | .aspect-ratio { 21 | height: 0; 22 | position: relative; 23 | } 24 | 25 | .aspect-ratio--16x9 { padding-bottom: 56.25%; } 26 | .aspect-ratio--9x16 { padding-bottom: 177.77%; } 27 | 28 | .aspect-ratio--4x3 { padding-bottom: 75%; } 29 | .aspect-ratio--3x4 { padding-bottom: 133.33%; } 30 | 31 | .aspect-ratio--6x4 { padding-bottom: 66.6%; } 32 | .aspect-ratio--4x6 { padding-bottom: 150%; } 33 | 34 | .aspect-ratio--8x5 { padding-bottom: 62.5%; } 35 | .aspect-ratio--5x8 { padding-bottom: 160%; } 36 | 37 | .aspect-ratio--7x5 { padding-bottom: 71.42%; } 38 | .aspect-ratio--5x7 { padding-bottom: 140%; } 39 | 40 | .aspect-ratio--1x1 { padding-bottom: 100%; } 41 | 42 | .aspect-ratio--object { 43 | position: absolute; 44 | top: 0; 45 | right: 0; 46 | bottom: 0; 47 | left: 0; 48 | width: 100%; 49 | height: 100%; 50 | z-index: 100; 51 | } 52 | 53 | @media (--breakpoint-not-small){ 54 | .aspect-ratio-ns { 55 | height: 0; 56 | position: relative; 57 | } 58 | .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } 59 | .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } 60 | .aspect-ratio--4x3-ns { padding-bottom: 75%; } 61 | .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } 62 | .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } 63 | .aspect-ratio--4x6-ns { padding-bottom: 150%; } 64 | .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } 65 | .aspect-ratio--5x8-ns { padding-bottom: 160%; } 66 | .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } 67 | .aspect-ratio--5x7-ns { padding-bottom: 140%; } 68 | .aspect-ratio--1x1-ns { padding-bottom: 100%; } 69 | .aspect-ratio--object-ns { 70 | position: absolute; 71 | top: 0; 72 | right: 0; 73 | bottom: 0; 74 | left: 0; 75 | width: 100%; 76 | height: 100%; 77 | z-index: 100; 78 | } 79 | } 80 | 81 | @media (--breakpoint-medium){ 82 | .aspect-ratio-m { 83 | height: 0; 84 | position: relative; 85 | } 86 | .aspect-ratio--16x9-m { padding-bottom: 56.25%; } 87 | .aspect-ratio--9x16-m { padding-bottom: 177.77%; } 88 | .aspect-ratio--4x3-m { padding-bottom: 75%; } 89 | .aspect-ratio--3x4-m { padding-bottom: 133.33%; } 90 | .aspect-ratio--6x4-m { padding-bottom: 66.6%; } 91 | .aspect-ratio--4x6-m { padding-bottom: 150%; } 92 | .aspect-ratio--8x5-m { padding-bottom: 62.5%; } 93 | .aspect-ratio--5x8-m { padding-bottom: 160%; } 94 | .aspect-ratio--7x5-m { padding-bottom: 71.42%; } 95 | .aspect-ratio--5x7-m { padding-bottom: 140%; } 96 | .aspect-ratio--1x1-m { padding-bottom: 100%; } 97 | .aspect-ratio--object-m { 98 | position: absolute; 99 | top: 0; 100 | right: 0; 101 | bottom: 0; 102 | left: 0; 103 | width: 100%; 104 | height: 100%; 105 | z-index: 100; 106 | } 107 | } 108 | 109 | @media (--breakpoint-large){ 110 | .aspect-ratio-l { 111 | height: 0; 112 | position: relative; 113 | } 114 | .aspect-ratio--16x9-l { padding-bottom: 56.25%; } 115 | .aspect-ratio--9x16-l { padding-bottom: 177.77%; } 116 | .aspect-ratio--4x3-l { padding-bottom: 75%; } 117 | .aspect-ratio--3x4-l { padding-bottom: 133.33%; } 118 | .aspect-ratio--6x4-l { padding-bottom: 66.6%; } 119 | .aspect-ratio--4x6-l { padding-bottom: 150%; } 120 | .aspect-ratio--8x5-l { padding-bottom: 62.5%; } 121 | .aspect-ratio--5x8-l { padding-bottom: 160%; } 122 | .aspect-ratio--7x5-l { padding-bottom: 71.42%; } 123 | .aspect-ratio--5x7-l { padding-bottom: 140%; } 124 | .aspect-ratio--1x1-l { padding-bottom: 100%; } 125 | .aspect-ratio--object-l { 126 | position: absolute; 127 | top: 0; 128 | right: 0; 129 | bottom: 0; 130 | left: 0; 131 | width: 100%; 132 | height: 100%; 133 | z-index: 100; 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/_debug-grid.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DEBUG GRID 4 | http://tachyons.io/docs/debug-grid/ 5 | 6 | Can be useful for debugging layout issues 7 | or helping to make sure things line up perfectly. 8 | Just tack one of these classes onto a parent element. 9 | 10 | */ 11 | 12 | .debug-grid { 13 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; 14 | } 15 | 16 | .debug-grid-16 { 17 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; 18 | } 19 | 20 | .debug-grid-8-solid { 21 | background:white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left; 22 | } 23 | 24 | .debug-grid-16-solid { 25 | background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; 26 | } 27 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # TACHYONS 2 | 3 | Functional css for humans. 4 | 5 | Quickly build and design new UI without writing css. 6 | 7 | ## Principles 8 | 9 | * Everything should be 100% responsive 10 | * Everything should be readable on any device 11 | * Everything should be as fast as possible 12 | * Designing in the browser should be easy 13 | * It should be easy to change any interface or part of an interface without breaking any existing interfaces 14 | * Doing one thing extremely well promotes reusability and reduces repetition 15 | * Documentation helps promote reusability and shared knowledge 16 | * Css shouldn't impede accessibility or the default functionality of Html 17 | * You should send the smallest possible amount of code to the user 18 | 19 | ## Features 20 | 21 | * Mobile-first css architecture 22 | * 490 accessible color combinations 23 | * 8px baseline grid 24 | * Multiple debugging utilities to reduce layout struggles 25 | * Single-purpose class structure 26 | * Optimized for maximum gzip compression 27 | * Lightweight (~14kB) 28 | * Usable across projects 29 | * Growing open source component library 30 | * Works well with plain html, react, ember, angular, rails, and more 31 | * Infinitely nestable responsive grid system 32 | * Built with Postcss 33 | 34 | ## Getting started 35 | 36 | Docs can be found at http://tachyons.io/docs 37 | The modules are generally pretty small and thus quick and easy to read. 38 | 39 | ### Use the CDN 40 | 41 | The quickest and easiest way to start using tachyons is to include a reference 42 | to the minified file in the head of your html file. 43 | 44 | You can always grab the latest version with 45 | ```html 46 | 47 | ``` 48 | You can also specify a specific version. The latest version is 4.6.1 49 | ```html 50 | 51 | ``` 52 | 53 | ### Local Setup 54 | 55 | Clone the repo from github and install dependencies through npm. 56 | 57 | ``` 58 | git clone https://github.com/tachyons-css/tachyons.git 59 | cd tachyons 60 | npm install 61 | ``` 62 | 63 | #### Dev 64 | 65 | If you want to just use everything in tachyons/src as a jumping off point and 66 | edit all the code yourself, you can compile all of your wonderful changes by 67 | running 68 | 69 | ```npm start``` 70 | 71 | This will output both minified and unminified versions of the css to the css directory and watch the src directory for changes. 72 | It's aliased to the command: 73 | 74 | ```npm run build:watch``` 75 | 76 | If you'd like to just build the css once without watching the src directory run 77 | 78 | ```npm run build``` 79 | 80 | 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 81 | 82 | ```npm run mutations``` 83 | 84 | ## Docs 85 | The tachyons docs located at http://tachyons.io are all open source and located at https://github.com/tachyons-css/tachyons-css.github.io 86 | 87 | You can clone the docs and use them as a template for documenting your own design system / patterns / components. 88 | While not everything is automated, the component library generation makes it extremely easy to 89 | generate and organize the documentation for components as demonstrated at http://tachyons.io/components 90 | 91 | 92 | ## Contributing 93 | 94 | Please read our [code of conduct](https://github.com/tachyons-css/tachyons/blob/master/code-of-conduct.md) for contributors. 95 | 96 | ## Websites that Use Tachyons 97 | (if you have a project that uses Tachyons feel free to make a PR to add it to this list) 98 | 99 | * https://nicenice.co 100 | * https://coralproject.net 101 | * https://goldenstaterecord.com 102 | * http://www.sogol.co 103 | * https://segment.com 104 | * http://hicuties.com 105 | * https://urlbox.io 106 | * https://community.algolia.com/wordpress/ 107 | * http://studiocraft.cc 108 | * http://samueldregan.com 109 | * https://filmstrip.cf 110 | * https://voteplz.com 111 | * http://bluebottlecoffee.com 112 | * http://cyclelove.cc 113 | * http://topher.design 114 | * http://iheanyi.com/ 115 | * http://johnotander.com 116 | * https://vimgifs.com 117 | * http://jon.gold/txt 118 | * http://rene.jon.gold 119 | * https://tinychime.github.io/jekyons/ 120 | * http://prnt.cc 121 | * http://spenhar.com 122 | * http://randoma11y.com 123 | * http://www.csspurge.com 124 | * http://clrs.cc 125 | * https://cljsjs.github.io 126 | * https://www.getnoodl.es 127 | * https://natwelch.com 128 | * http://pesticide.io 129 | * http://zachhurd.com 130 | * http://gfffs.com 131 | * https://wordpress.org/themes/vanilla-milkshake/ 132 | * http://comics.hongkonggong.com/ 133 | * https://accessmyinfo.hk/#/ 134 | * https://accessmyinfo.org/#/ 135 | * http://rene.jon.gold 136 | * http://randoma11y.com 137 | * http://designbytyping.com 138 | * http://colepeters.com 139 | * https://atmin.github.io/funponent/ 140 | * http://blog.colepeters.com 141 | * http://aboutlife.com 142 | * http://joinoneroom.com 143 | * http://filipaonunes.com 144 | * https://vakra.band 145 | * http://tylernford.com 146 | * https://adventuretron.org 147 | * https://uptimeumbrella.com 148 | * http://www.talbs.me 149 | * http://seanoshea.me 150 | * https://www.hiaida.com 151 | * http://maxogden.github.io/screencat/ 152 | * http://numenta.com 153 | * https://windtoday.co 154 | * http://claudio.netlify.com 155 | * http://devday-ar.com 156 | * http://mrmrs.io/up 157 | * http://mrmrs.io/profile/ 158 | * http://mrmrs.io/gradients 159 | * http://mrmrs.io/btns/ 160 | * http://mrmrs.io/beats/ 161 | * http://mrmrs.io/writing 162 | * http://mrmrs.cc 163 | * http://mn-ml.cc 164 | * https://fontawesome.com 165 | 166 | And of course... 167 | * http://tachyons.io 168 | 169 | ## Help 170 | 171 | If you have a question or need help feel free to open an issue here or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com). 172 | 173 | ## License 174 | 175 | MIT 176 | -------------------------------------------------------------------------------- /src/_debug.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DEBUG (PESTICIDE) 4 | Docs: http://tachyons.io/docs/debug/ 5 | 6 | This is a partial you have to manually include in your 7 | build file. It places a different colored outline on 8 | each element which can help you debug layout issues. 9 | There is also a handy chrome extension that can 10 | be found at http://pesticide.io 11 | 12 | */ 13 | 14 | body { outline: 1px solid #2980B9!important; } 15 | article { outline: 1px solid #3498DB!important; } 16 | nav { outline: 1px solid #0088C3!important; } 17 | aside { outline: 1px solid #33A0CE!important; } 18 | section { outline: 1px solid #66B8DA!important; } 19 | header { outline: 1px solid #99CFE7!important; } 20 | footer { outline: 1px solid #CCE7F3!important; } 21 | h1 { outline: 1px solid #162544!important; } 22 | h2 { outline: 1px solid #314E6E!important; } 23 | h3 { outline: 1px solid #3E5E85!important; } 24 | h4 { outline: 1px solid #449BAF!important; } 25 | h5 { outline: 1px solid #C7D1CB!important; } 26 | h6 { outline: 1px solid #4371D0!important; } 27 | main { outline: 1px solid #2F4F90!important; } 28 | address { outline: 1px solid #1A2C51!important; } 29 | div { outline: 1px solid #036CDB!important; } 30 | 31 | 32 | p { outline: 1px solid #AC050B!important; } 33 | hr { outline: 1px solid #FF063F!important; } 34 | pre { outline: 1px solid #850440!important; } 35 | blockquote { outline: 1px solid #F1B8E7!important; } 36 | ol { outline: 1px solid #FF050C!important; } 37 | ul { outline: 1px solid #D90416!important; } 38 | li { outline: 1px solid #D90416!important; } 39 | dl { outline: 1px solid #FD3427!important; } 40 | dt { outline: 1px solid #FF0043!important; } 41 | dd { outline: 1px solid #E80174!important; } 42 | figure { outline: 1px solid #FF00BB!important; } 43 | figcaption { outline: 1px solid #BF0032!important; } 44 | 45 | 46 | 47 | table { outline: 1px solid #00CC99!important; } 48 | caption { outline: 1px solid #37FFC4!important; } 49 | thead { outline: 1px solid #98DACA!important; } 50 | tbody { outline: 1px solid #64A7A0!important; } 51 | tfoot { outline: 1px solid #22746B!important; } 52 | tr { outline: 1px solid #86C0B2!important; } 53 | th { outline: 1px solid #A1E7D6!important; } 54 | td { outline: 1px solid #3F5A54!important; } 55 | col { outline: 1px solid #6C9A8F!important; } 56 | colgroup { outline: 1px solid #6C9A9D!important; } 57 | 58 | 59 | button { outline: 1px solid #DA8301!important; } 60 | datalist { outline: 1px solid #C06000!important; } 61 | fieldset { outline: 1px solid #D95100!important; } 62 | form { outline: 1px solid #D23600!important; } 63 | input { outline: 1px solid #FCA600!important; } 64 | keygen { outline: 1px solid #B31E00!important; } 65 | label { outline: 1px solid #EE8900!important; } 66 | legend { outline: 1px solid #DE6D00!important; } 67 | meter { outline: 1px solid #E8630C!important; } 68 | optgroup { outline: 1px solid #B33600!important; } 69 | option { outline: 1px solid #FF8A00!important; } 70 | output { outline: 1px solid #FF9619!important; } 71 | progress { outline: 1px solid #E57C00!important; } 72 | select { outline: 1px solid #E26E0F!important; } 73 | textarea { outline: 1px solid #CC5400!important; } 74 | 75 | 76 | 77 | details { outline: 1px solid #33848F!important; } 78 | summary { outline: 1px solid #60A1A6!important; } 79 | command { outline: 1px solid #438DA1!important; } 80 | menu { outline: 1px solid #449DA6!important; } 81 | 82 | 83 | 84 | del { outline: 1px solid #BF0000!important; } 85 | ins { outline: 1px solid #400000!important; } 86 | 87 | 88 | 89 | img { outline: 1px solid #22746B!important; } 90 | iframe { outline: 1px solid #64A7A0!important; } 91 | embed { outline: 1px solid #98DACA!important; } 92 | object { outline: 1px solid #00CC99!important; } 93 | param { outline: 1px solid #37FFC4!important; } 94 | video { outline: 1px solid #6EE866!important; } 95 | audio { outline: 1px solid #027353!important; } 96 | source { outline: 1px solid #012426!important; } 97 | canvas { outline: 1px solid #A2F570!important; } 98 | track { outline: 1px solid #59A600!important; } 99 | map { outline: 1px solid #7BE500!important; } 100 | area { outline: 1px solid #305900!important; } 101 | 102 | 103 | 104 | a { outline: 1px solid #FF62AB!important; } 105 | em { outline: 1px solid #800B41!important; } 106 | strong { outline: 1px solid #FF1583!important; } 107 | i { outline: 1px solid #803156!important; } 108 | b { outline: 1px solid #CC1169!important; } 109 | u { outline: 1px solid #FF0430!important; } 110 | s { outline: 1px solid #F805E3!important; } 111 | small { outline: 1px solid #D107B2!important; } 112 | abbr { outline: 1px solid #4A0263!important; } 113 | q { outline: 1px solid #240018!important; } 114 | cite { outline: 1px solid #64003C!important; } 115 | dfn { outline: 1px solid #B4005A!important; } 116 | sub { outline: 1px solid #DBA0C8!important; } 117 | sup { outline: 1px solid #CC0256!important; } 118 | time { outline: 1px solid #D6606D!important; } 119 | code { outline: 1px solid #E04251!important; } 120 | kbd { outline: 1px solid #5E001F!important; } 121 | samp { outline: 1px solid #9C0033!important; } 122 | var { outline: 1px solid #D90047!important; } 123 | mark { outline: 1px solid #FF0053!important; } 124 | bdi { outline: 1px solid #BF3668!important; } 125 | bdo { outline: 1px solid #6F1400!important; } 126 | ruby { outline: 1px solid #FF7B93!important; } 127 | rt { outline: 1px solid #FF2F54!important; } 128 | rp { outline: 1px solid #803E49!important; } 129 | span { outline: 1px solid #CC2643!important; } 130 | br { outline: 1px solid #DB687D!important; } 131 | wbr { outline: 1px solid #DB175B!important; } 132 | 133 | -------------------------------------------------------------------------------- /src/_skins.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | SKINS 4 | Docs: http://tachyons.io/docs/themes/skins/ 5 | 6 | Classes for setting foreground and background colors on elements. 7 | If you haven't declared a border color, but set border on an element, it will 8 | be set to the current text color. 9 | 10 | */ 11 | 12 | /* Text colors */ 13 | 14 | .black-90 { color: var(--black-90); } 15 | .black-80 { color: var(--black-80); } 16 | .black-70 { color: var(--black-70); } 17 | .black-60 { color: var(--black-60); } 18 | .black-50 { color: var(--black-50); } 19 | .black-40 { color: var(--black-40); } 20 | .black-30 { color: var(--black-30); } 21 | .black-20 { color: var(--black-20); } 22 | .black-10 { color: var(--black-10); } 23 | .black-05 { color: var(--black-05); } 24 | 25 | .white-90 { color: var(--white-90); } 26 | .white-80 { color: var(--white-80); } 27 | .white-70 { color: var(--white-70); } 28 | .white-60 { color: var(--white-60); } 29 | .white-50 { color: var(--white-50); } 30 | .white-40 { color: var(--white-40); } 31 | .white-30 { color: var(--white-30); } 32 | .white-20 { color: var(--white-20); } 33 | .white-10 { color: var(--white-10); } 34 | 35 | .black { color: var(--black); } 36 | .near-black { color: var(--near-black); } 37 | .dark-gray { color: var(--dark-gray); } 38 | .mid-gray { color: var(--mid-gray); } 39 | .gray { color: var(--gray); } 40 | .silver { color: var(--silver); } 41 | .light-silver { color: var(--light-silver); } 42 | .moon-gray { color: var(--moon-gray); } 43 | .light-gray { color: var(--light-gray); } 44 | .near-white { color: var(--near-white); } 45 | .white { color: var(--white); } 46 | 47 | .dark-red { color: var(--dark-red); } 48 | .red { color: var(--red); } 49 | .light-red { color: var(--light-red); } 50 | .orange { color: var(--orange); } 51 | .gold { color: var(--gold); } 52 | .yellow { color: var(--yellow); } 53 | .light-yellow { color: var(--light-yellow); } 54 | .purple { color: var(--purple); } 55 | .light-purple { color: var(--light-purple); } 56 | .dark-pink { color: var(--dark-pink); } 57 | .hot-pink { color: var(--hot-pink); } 58 | .pink { color: var(--pink); } 59 | .light-pink { color: var(--light-pink); } 60 | .dark-green { color: var(--dark-green); } 61 | .green { color: var(--green); } 62 | .light-green { color: var(--light-green); } 63 | .navy { color: var(--navy); } 64 | .dark-blue { color: var(--dark-blue); } 65 | .blue { color: var(--blue); } 66 | .light-blue { color: var(--light-blue); } 67 | .lightest-blue { color: var(--lightest-blue); } 68 | .washed-blue { color: var(--washed-blue); } 69 | .washed-green { color: var(--washed-green); } 70 | .washed-yellow { color: var(--washed-yellow); } 71 | .washed-red { color: var(--washed-red); } 72 | 73 | .bg-black-90 { background-color: var(--black-90); } 74 | .bg-black-80 { background-color: var(--black-80); } 75 | .bg-black-70 { background-color: var(--black-70); } 76 | .bg-black-60 { background-color: var(--black-60); } 77 | .bg-black-50 { background-color: var(--black-50); } 78 | .bg-black-40 { background-color: var(--black-40); } 79 | .bg-black-30 { background-color: var(--black-30); } 80 | .bg-black-20 { background-color: var(--black-20); } 81 | .bg-black-10 { background-color: var(--black-10); } 82 | .bg-black-05 { background-color: var(--black-05); } 83 | .bg-white-90 { background-color: var(--white-90); } 84 | .bg-white-80 { background-color: var(--white-80); } 85 | .bg-white-70 { background-color: var(--white-70); } 86 | .bg-white-60 { background-color: var(--white-60); } 87 | .bg-white-50 { background-color: var(--white-50); } 88 | .bg-white-40 { background-color: var(--white-40); } 89 | .bg-white-30 { background-color: var(--white-30); } 90 | .bg-white-20 { background-color: var(--white-20); } 91 | .bg-white-10 { background-color: var(--white-10); } 92 | 93 | 94 | 95 | /* Background colors */ 96 | 97 | .bg-black { background-color: var(--black); } 98 | .bg-near-black { background-color: var(--near-black); } 99 | .bg-dark-gray { background-color: var(--dark-gray); } 100 | .bg-mid-gray { background-color: var(--mid-gray); } 101 | .bg-gray { background-color: var(--gray); } 102 | .bg-silver { background-color: var(--silver); } 103 | .bg-light-silver { background-color: var(--light-silver); } 104 | .bg-moon-gray { background-color: var(--moon-gray); } 105 | .bg-light-gray { background-color: var(--light-gray); } 106 | .bg-near-white { background-color: var(--near-white); } 107 | .bg-white { background-color: var(--white); } 108 | .bg-transparent { background-color: var(--transparent); } 109 | 110 | .bg-dark-red { background-color: var(--dark-red); } 111 | .bg-red { background-color: var(--red); } 112 | .bg-light-red { background-color: var(--light-red); } 113 | .bg-orange { background-color: var(--orange); } 114 | .bg-gold { background-color: var(--gold); } 115 | .bg-yellow { background-color: var(--yellow); } 116 | .bg-light-yellow { background-color: var(--light-yellow); } 117 | .bg-purple { background-color: var(--purple); } 118 | .bg-light-purple { background-color: var(--light-purple); } 119 | .bg-dark-pink { background-color: var(--dark-pink); } 120 | .bg-hot-pink { background-color: var(--hot-pink); } 121 | .bg-pink { background-color: var(--pink); } 122 | .bg-light-pink { background-color: var(--light-pink); } 123 | .bg-dark-green { background-color: var(--dark-green); } 124 | .bg-green { background-color: var(--green); } 125 | .bg-light-green { background-color: var(--light-green); } 126 | .bg-navy { background-color: var(--navy); } 127 | .bg-dark-blue { background-color: var(--dark-blue); } 128 | .bg-blue { background-color: var(--blue); } 129 | .bg-light-blue { background-color: var(--light-blue); } 130 | .bg-lightest-blue { background-color: var(--lightest-blue); } 131 | .bg-washed-blue { background-color: var(--washed-blue); } 132 | .bg-washed-green { background-color: var(--washed-green); } 133 | .bg-washed-yellow { background-color: var(--washed-yellow); } 134 | .bg-washed-red { background-color: var(--washed-red); } 135 | -------------------------------------------------------------------------------- /src/_flexbox.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FLEXBOX 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | .flex { display: flex; } 13 | .inline-flex { display: inline-flex; } 14 | 15 | /* 1. Fix for Chrome 44 bug. 16 | * https://code.google.com/p/chromium/issues/detail?id=506893 */ 17 | .flex-auto { 18 | flex: 1 1 auto; 19 | min-width: 0; /* 1 */ 20 | min-height: 0; /* 1 */ 21 | } 22 | 23 | .flex-none { flex: none; } 24 | 25 | .flex-column { flex-direction: column; } 26 | .flex-row { flex-direction: row; } 27 | .flex-wrap { flex-wrap: wrap; } 28 | 29 | .items-start { align-items: flex-start; } 30 | .items-end { align-items: flex-end; } 31 | .items-center { align-items: center; } 32 | .items-baseline { align-items: baseline; } 33 | .items-stretch { align-items: stretch; } 34 | 35 | .self-start { align-self: flex-start; } 36 | .self-end { align-self: flex-end; } 37 | .self-center { align-self: center; } 38 | .self-baseline { align-self: baseline; } 39 | .self-stretch { align-self: stretch; } 40 | 41 | .justify-start { justify-content: flex-start; } 42 | .justify-end { justify-content: flex-end; } 43 | .justify-center { justify-content: center; } 44 | .justify-between { justify-content: space-between; } 45 | .justify-around { justify-content: space-around; } 46 | 47 | .content-start { align-content: flex-start; } 48 | .content-end { align-content: flex-end; } 49 | .content-center { align-content: center; } 50 | .content-between { align-content: space-between; } 51 | .content-around { align-content: space-around; } 52 | .content-stretch { align-content: stretch; } 53 | 54 | .order-0 { order: 0; } 55 | .order-1 { order: 1; } 56 | .order-2 { order: 2; } 57 | .order-3 { order: 3; } 58 | .order-4 { order: 4; } 59 | .order-5 { order: 5; } 60 | .order-6 { order: 6; } 61 | .order-7 { order: 7; } 62 | .order-8 { order: 8; } 63 | .order-last { order: 99999; } 64 | 65 | @media (--breakpoint-not-small) { 66 | .flex-ns { display: flex; } 67 | .inline-flex-ns { display: inline-flex; } 68 | .flex-auto-ns { 69 | flex: 1 1 auto; 70 | min-width: 0; /* 1 */ 71 | min-height: 0; /* 1 */ 72 | } 73 | .flex-none-ns { flex: none; } 74 | .flex-column-ns { flex-direction: column; } 75 | .flex-row-ns { flex-direction: row; } 76 | .flex-wrap-ns { flex-wrap: wrap; } 77 | .items-start-ns { align-items: flex-start; } 78 | .items-end-ns { align-items: flex-end; } 79 | .items-center-ns { align-items: center; } 80 | .items-baseline-ns { align-items: baseline; } 81 | .items-stretch-ns { align-items: stretch; } 82 | 83 | .self-start-ns { align-self: flex-start; } 84 | .self-end-ns { align-self: flex-end; } 85 | .self-center-ns { align-self: center; } 86 | .self-baseline-ns { align-self: baseline; } 87 | .self-stretch-ns { align-self: stretch; } 88 | 89 | .justify-start-ns { justify-content: flex-start; } 90 | .justify-end-ns { justify-content: flex-end; } 91 | .justify-center-ns { justify-content: center; } 92 | .justify-between-ns { justify-content: space-between; } 93 | .justify-around-ns { justify-content: space-around; } 94 | 95 | .content-start-ns { align-content: flex-start; } 96 | .content-end-ns { align-content: flex-end; } 97 | .content-center-ns { align-content: center; } 98 | .content-between-ns { align-content: space-between; } 99 | .content-around-ns { align-content: space-around; } 100 | .content-stretch-ns { align-content: stretch; } 101 | 102 | .order-0-ns { order: 0; } 103 | .order-1-ns { order: 1; } 104 | .order-2-ns { order: 2; } 105 | .order-3-ns { order: 3; } 106 | .order-4-ns { order: 4; } 107 | .order-5-ns { order: 5; } 108 | .order-6-ns { order: 6; } 109 | .order-7-ns { order: 7; } 110 | .order-8-ns { order: 8; } 111 | .order-last-ns { order: 99999; } 112 | } 113 | @media (--breakpoint-medium) { 114 | .flex-m { display: flex; } 115 | .inline-flex-m { display: inline-flex; } 116 | .flex-auto-m { 117 | flex: 1 1 auto; 118 | min-width: 0; /* 1 */ 119 | min-height: 0; /* 1 */ 120 | } 121 | .flex-none-m { flex: none; } 122 | .flex-column-m { flex-direction: column; } 123 | .flex-row-m { flex-direction: row; } 124 | .flex-wrap-m { flex-wrap: wrap; } 125 | .items-start-m { align-items: flex-start; } 126 | .items-end-m { align-items: flex-end; } 127 | .items-center-m { align-items: center; } 128 | .items-baseline-m { align-items: baseline; } 129 | .items-stretch-m { align-items: stretch; } 130 | 131 | .self-start-m { align-self: flex-start; } 132 | .self-end-m { align-self: flex-end; } 133 | .self-center-m { align-self: center; } 134 | .self-baseline-m { align-self: baseline; } 135 | .self-stretch-m { align-self: stretch; } 136 | 137 | .justify-start-m { justify-content: flex-start; } 138 | .justify-end-m { justify-content: flex-end; } 139 | .justify-center-m { justify-content: center; } 140 | .justify-between-m { justify-content: space-between; } 141 | .justify-around-m { justify-content: space-around; } 142 | 143 | .content-start-m { align-content: flex-start; } 144 | .content-end-m { align-content: flex-end; } 145 | .content-center-m { align-content: center; } 146 | .content-between-m { align-content: space-between; } 147 | .content-around-m { align-content: space-around; } 148 | .content-stretch-m { align-content: stretch; } 149 | 150 | .order-0-m { order: 0; } 151 | .order-1-m { order: 1; } 152 | .order-2-m { order: 2; } 153 | .order-3-m { order: 3; } 154 | .order-4-m { order: 4; } 155 | .order-5-m { order: 5; } 156 | .order-6-m { order: 6; } 157 | .order-7-m { order: 7; } 158 | .order-8-m { order: 8; } 159 | .order-last-m { order: 99999; } 160 | } 161 | 162 | @media (--breakpoint-large) { 163 | .flex-l { display: flex; } 164 | .inline-flex-l { display: inline-flex; } 165 | .flex-auto-l { 166 | flex: 1 1 auto; 167 | min-width: 0; /* 1 */ 168 | min-height: 0; /* 1 */ 169 | } 170 | .flex-none-l { flex: none; } 171 | .flex-column-l { flex-direction: column; } 172 | .flex-row-l { flex-direction: row; } 173 | .flex-wrap-l { flex-wrap: wrap; } 174 | .items-start-l { align-items: flex-start; } 175 | .items-end-l { align-items: flex-end; } 176 | .items-center-l { align-items: center; } 177 | .items-baseline-l { align-items: baseline; } 178 | .items-stretch-l { align-items: stretch; } 179 | 180 | .self-start-l { align-self: flex-start; } 181 | .self-end-l { align-self: flex-end; } 182 | .self-center-l { align-self: center; } 183 | .self-baseline-l { align-self: baseline; } 184 | .self-stretch-l { align-self: stretch; } 185 | 186 | .justify-start-l { justify-content: flex-start; } 187 | .justify-end-l { justify-content: flex-end; } 188 | .justify-center-l { justify-content: center; } 189 | .justify-between-l { justify-content: space-between; } 190 | .justify-around-l { justify-content: space-around; } 191 | 192 | .content-start-l { align-content: flex-start; } 193 | .content-end-l { align-content: flex-end; } 194 | .content-center-l { align-content: center; } 195 | .content-between-l { align-content: space-between; } 196 | .content-around-l { align-content: space-around; } 197 | .content-stretch-l { align-content: stretch; } 198 | 199 | .order-0-l { order: 0; } 200 | .order-1-l { order: 1; } 201 | .order-2-l { order: 2; } 202 | .order-3-l { order: 3; } 203 | .order-4-l { order: 4; } 204 | .order-5-l { order: 5; } 205 | .order-6-l { order: 6; } 206 | .order-7-l { order: 7; } 207 | .order-8-l { order: 8; } 208 | .order-last-l { order: 99999; } 209 | } 210 | -------------------------------------------------------------------------------- /src/_negative-margins.css: -------------------------------------------------------------------------------- 1 | /* 2 | NEGATIVE MARGINS 3 | 4 | Base: 5 | n = negative 6 | 7 | Modifiers: 8 | a = all 9 | t = top 10 | r = right 11 | b = bottom 12 | l = left 13 | 14 | 1 = 1st step in spacing scale 15 | 2 = 2nd step in spacing scale 16 | 3 = 3rd step in spacing scale 17 | 4 = 4th step in spacing scale 18 | 5 = 5th step in spacing scale 19 | 6 = 6th step in spacing scale 20 | 7 = 7th step in spacing scale 21 | 22 | Media Query Extensions: 23 | -ns = not-small 24 | -m = medium 25 | -l = large 26 | 27 | */ 28 | 29 | 30 | 31 | .na1 { margin: -var(--spacing-extra-small); } 32 | .na2 { margin: -var(--spacing-small); } 33 | .na3 { margin: -var(--spacing-medium); } 34 | .na4 { margin: -var(--spacing-large); } 35 | .na5 { margin: -var(--spacing-extra-large); } 36 | .na6 { margin: -var(--spacing-extra-extra-large); } 37 | .na7 { margin: -var(--spacing-extra-extra-extra-large); } 38 | 39 | .nl1 { margin-left: -var(--spacing-extra-small); } 40 | .nl2 { margin-left: -var(--spacing-small); } 41 | .nl3 { margin-left: -var(--spacing-medium); } 42 | .nl4 { margin-left: -var(--spacing-large); } 43 | .nl5 { margin-left: -var(--spacing-extra-large); } 44 | .nl6 { margin-left: -var(--spacing-extra-extra-large); } 45 | .nl7 { margin-left: -var(--spacing-extra-extra-extra-large); } 46 | 47 | .nr1 { margin-right: -var(--spacing-extra-small); } 48 | .nr2 { margin-right: -var(--spacing-small); } 49 | .nr3 { margin-right: -var(--spacing-medium); } 50 | .nr4 { margin-right: -var(--spacing-large); } 51 | .nr5 { margin-right: -var(--spacing-extra-large); } 52 | .nr6 { margin-right: -var(--spacing-extra-extra-large); } 53 | .nr7 { margin-right: -var(--spacing-extra-extra-extra-large); } 54 | 55 | .nb1 { margin-bottom: -var(--spacing-extra-small); } 56 | .nb2 { margin-bottom: -var(--spacing-small); } 57 | .nb3 { margin-bottom: -var(--spacing-medium); } 58 | .nb4 { margin-bottom: -var(--spacing-large); } 59 | .nb5 { margin-bottom: -var(--spacing-extra-large); } 60 | .nb6 { margin-bottom: -var(--spacing-extra-extra-large); } 61 | .nb7 { margin-bottom: -var(--spacing-extra-extra-extra-large); } 62 | 63 | .nt1 { margin-top: -var(--spacing-extra-small); } 64 | .nt2 { margin-top: -var(--spacing-small); } 65 | .nt3 { margin-top: -var(--spacing-medium); } 66 | .nt4 { margin-top: -var(--spacing-large); } 67 | .nt5 { margin-top: -var(--spacing-extra-large); } 68 | .nt6 { margin-top: -var(--spacing-extra-extra-large); } 69 | .nt7 { margin-top: -var(--spacing-extra-extra-extra-large); } 70 | 71 | @media (--breakpoint-not-small) { 72 | 73 | .na1-ns { margin: -var(--spacing-extra-small); } 74 | .na2-ns { margin: -var(--spacing-small); } 75 | .na3-ns { margin: -var(--spacing-medium); } 76 | .na4-ns { margin: -var(--spacing-large); } 77 | .na5-ns { margin: -var(--spacing-extra-large); } 78 | .na6-ns { margin: -var(--spacing-extra-extra-large); } 79 | .na7-ns { margin: -var(--spacing-extra-extra-extra-large); } 80 | 81 | .nl1-ns { margin-left: -var(--spacing-extra-small); } 82 | .nl2-ns { margin-left: -var(--spacing-small); } 83 | .nl3-ns { margin-left: -var(--spacing-medium); } 84 | .nl4-ns { margin-left: -var(--spacing-large); } 85 | .nl5-ns { margin-left: -var(--spacing-extra-large); } 86 | .nl6-ns { margin-left: -var(--spacing-extra-extra-large); } 87 | .nl7-ns { margin-left: -var(--spacing-extra-extra-extra-large); } 88 | 89 | .nr1-ns { margin-right: -var(--spacing-extra-small); } 90 | .nr2-ns { margin-right: -var(--spacing-small); } 91 | .nr3-ns { margin-right: -var(--spacing-medium); } 92 | .nr4-ns { margin-right: -var(--spacing-large); } 93 | .nr5-ns { margin-right: -var(--spacing-extra-large); } 94 | .nr6-ns { margin-right: -var(--spacing-extra-extra-large); } 95 | .nr7-ns { margin-right: -var(--spacing-extra-extra-extra-large); } 96 | 97 | .nb1-ns { margin-bottom: -var(--spacing-extra-small); } 98 | .nb2-ns { margin-bottom: -var(--spacing-small); } 99 | .nb3-ns { margin-bottom: -var(--spacing-medium); } 100 | .nb4-ns { margin-bottom: -var(--spacing-large); } 101 | .nb5-ns { margin-bottom: -var(--spacing-extra-large); } 102 | .nb6-ns { margin-bottom: -var(--spacing-extra-extra-large); } 103 | .nb7-ns { margin-bottom: -var(--spacing-extra-extra-extra-large); } 104 | 105 | .nt1-ns { margin-top: -var(--spacing-extra-small); } 106 | .nt2-ns { margin-top: -var(--spacing-small); } 107 | .nt3-ns { margin-top: -var(--spacing-medium); } 108 | .nt4-ns { margin-top: -var(--spacing-large); } 109 | .nt5-ns { margin-top: -var(--spacing-extra-large); } 110 | .nt6-ns { margin-top: -var(--spacing-extra-extra-large); } 111 | .nt7-ns { margin-top: -var(--spacing-extra-extra-extra-large); } 112 | 113 | } 114 | 115 | @media (--breakpoint-medium) { 116 | .na1-m { margin: -var(--spacing-extra-small); } 117 | .na2-m { margin: -var(--spacing-small); } 118 | .na3-m { margin: -var(--spacing-medium); } 119 | .na4-m { margin: -var(--spacing-large); } 120 | .na5-m { margin: -var(--spacing-extra-large); } 121 | .na6-m { margin: -var(--spacing-extra-extra-large); } 122 | .na7-m { margin: -var(--spacing-extra-extra-extra-large); } 123 | 124 | .nl1-m { margin-left: -var(--spacing-extra-small); } 125 | .nl2-m { margin-left: -var(--spacing-small); } 126 | .nl3-m { margin-left: -var(--spacing-medium); } 127 | .nl4-m { margin-left: -var(--spacing-large); } 128 | .nl5-m { margin-left: -var(--spacing-extra-large); } 129 | .nl6-m { margin-left: -var(--spacing-extra-extra-large); } 130 | .nl7-m { margin-left: -var(--spacing-extra-extra-extra-large); } 131 | 132 | .nr1-m { margin-right: -var(--spacing-extra-small); } 133 | .nr2-m { margin-right: -var(--spacing-small); } 134 | .nr3-m { margin-right: -var(--spacing-medium); } 135 | .nr4-m { margin-right: -var(--spacing-large); } 136 | .nr5-m { margin-right: -var(--spacing-extra-large); } 137 | .nr6-m { margin-right: -var(--spacing-extra-extra-large); } 138 | .nr7-m { margin-right: -var(--spacing-extra-extra-extra-large); } 139 | 140 | .nb1-m { margin-bottom: -var(--spacing-extra-small); } 141 | .nb2-m { margin-bottom: -var(--spacing-small); } 142 | .nb3-m { margin-bottom: -var(--spacing-medium); } 143 | .nb4-m { margin-bottom: -var(--spacing-large); } 144 | .nb5-m { margin-bottom: -var(--spacing-extra-large); } 145 | .nb6-m { margin-bottom: -var(--spacing-extra-extra-large); } 146 | .nb7-m { margin-bottom: -var(--spacing-extra-extra-extra-large); } 147 | 148 | .nt1-m { margin-top: -var(--spacing-extra-small); } 149 | .nt2-m { margin-top: -var(--spacing-small); } 150 | .nt3-m { margin-top: -var(--spacing-medium); } 151 | .nt4-m { margin-top: -var(--spacing-large); } 152 | .nt5-m { margin-top: -var(--spacing-extra-large); } 153 | .nt6-m { margin-top: -var(--spacing-extra-extra-large); } 154 | .nt7-m { margin-top: -var(--spacing-extra-extra-extra-large); } 155 | 156 | } 157 | 158 | @media (--breakpoint-large) { 159 | .na1-l { margin: -var(--spacing-extra-small); } 160 | .na2-l { margin: -var(--spacing-small); } 161 | .na3-l { margin: -var(--spacing-medium); } 162 | .na4-l { margin: -var(--spacing-large); } 163 | .na5-l { margin: -var(--spacing-extra-large); } 164 | .na6-l { margin: -var(--spacing-extra-extra-large); } 165 | .na7-l { margin: -var(--spacing-extra-extra-extra-large); } 166 | 167 | .nl1-l { margin-left: -var(--spacing-extra-small); } 168 | .nl2-l { margin-left: -var(--spacing-small); } 169 | .nl3-l { margin-left: -var(--spacing-medium); } 170 | .nl4-l { margin-left: -var(--spacing-large); } 171 | .nl5-l { margin-left: -var(--spacing-extra-large); } 172 | .nl6-l { margin-left: -var(--spacing-extra-extra-large); } 173 | .nl7-l { margin-left: -var(--spacing-extra-extra-extra-large); } 174 | 175 | .nr1-l { margin-right: -var(--spacing-extra-small); } 176 | .nr2-l { margin-right: -var(--spacing-small); } 177 | .nr3-l { margin-right: -var(--spacing-medium); } 178 | .nr4-l { margin-right: -var(--spacing-large); } 179 | .nr5-l { margin-right: -var(--spacing-extra-large); } 180 | .nr6-l { margin-right: -var(--spacing-extra-extra-large); } 181 | .nr7-l { margin-right: -var(--spacing-extra-extra-extra-large); } 182 | 183 | .nb1-l { margin-bottom: -var(--spacing-extra-small); } 184 | .nb2-l { margin-bottom: -var(--spacing-small); } 185 | .nb3-l { margin-bottom: -var(--spacing-medium); } 186 | .nb4-l { margin-bottom: -var(--spacing-large); } 187 | .nb5-l { margin-bottom: -var(--spacing-extra-large); } 188 | .nb6-l { margin-bottom: -var(--spacing-extra-extra-large); } 189 | .nb7-l { margin-bottom: -var(--spacing-extra-extra-extra-large); } 190 | 191 | .nt1-l { margin-top: -var(--spacing-extra-small); } 192 | .nt2-l { margin-top: -var(--spacing-small); } 193 | .nt3-l { margin-top: -var(--spacing-medium); } 194 | .nt4-l { margin-top: -var(--spacing-large); } 195 | .nt5-l { margin-top: -var(--spacing-extra-large); } 196 | .nt6-l { margin-top: -var(--spacing-extra-extra-large); } 197 | .nt7-l { margin-top: -var(--spacing-extra-extra-extra-large); } 198 | } 199 | 200 | -------------------------------------------------------------------------------- /src/_skins-pseudo.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | SKINS:PSEUDO 4 | 5 | Customize the color of an element when 6 | it is focused or hovered over. 7 | 8 | */ 9 | 10 | .hover-black:hover, 11 | .hover-black:focus { color: var(--black); } 12 | .hover-near-black:hover, 13 | .hover-near-black:focus { color: var(--near-black); } 14 | .hover-dark-gray:hover, 15 | .hover-dark-gray:focus { color: var(--dark-gray); } 16 | .hover-mid-gray:hover, 17 | .hover-mid-gray:focus { color: var(--mid-gray); } 18 | .hover-gray:hover, 19 | .hover-gray:focus { color: var(--gray); } 20 | .hover-silver:hover, 21 | .hover-silver:focus { color: var(--silver); } 22 | .hover-light-silver:hover, 23 | .hover-light-silver:focus { color: var(--light-silver); } 24 | .hover-moon-gray:hover, 25 | .hover-moon-gray:focus { color: var(--moon-gray); } 26 | .hover-light-gray:hover, 27 | .hover-light-gray:focus { color: var(--light-gray); } 28 | .hover-near-white:hover, 29 | .hover-near-white:focus { color: var(--near-white); } 30 | .hover-white:hover, 31 | .hover-white:focus { color: var(--white); } 32 | 33 | .hover-black-90:hover, 34 | .hover-black-90:focus { color: var(--black-90); } 35 | .hover-black-80:hover, 36 | .hover-black-80:focus { color: var(--black-80); } 37 | .hover-black-70:hover, 38 | .hover-black-70:focus { color: var(--black-70); } 39 | .hover-black-60:hover, 40 | .hover-black-60:focus { color: var(--black-60); } 41 | .hover-black-50:hover, 42 | .hover-black-50:focus { color: var(--black-50); } 43 | .hover-black-40:hover, 44 | .hover-black-40:focus { color: var(--black-40); } 45 | .hover-black-30:hover, 46 | .hover-black-30:focus { color: var(--black-30); } 47 | .hover-black-20:hover, 48 | .hover-black-20:focus { color: var(--black-20); } 49 | .hover-black-10:hover, 50 | .hover-black-10:focus { color: var(--black-10); } 51 | .hover-white-90:hover, 52 | .hover-white-90:focus { color: var(--white-90); } 53 | .hover-white-80:hover, 54 | .hover-white-80:focus { color: var(--white-80); } 55 | .hover-white-70:hover, 56 | .hover-white-70:focus { color: var(--white-70); } 57 | .hover-white-60:hover, 58 | .hover-white-60:focus { color: var(--white-60); } 59 | .hover-white-50:hover, 60 | .hover-white-50:focus { color: var(--white-50); } 61 | .hover-white-40:hover, 62 | .hover-white-40:focus { color: var(--white-40); } 63 | .hover-white-30:hover, 64 | .hover-white-30:focus { color: var(--white-30); } 65 | .hover-white-20:hover, 66 | .hover-white-20:focus { color: var(--white-20); } 67 | .hover-white-10:hover, 68 | .hover-white-10:focus { color: var(--white-10); } 69 | 70 | .hover-bg-black:hover, 71 | .hover-bg-black:focus { background-color: var(--black); } 72 | .hover-bg-near-black:hover, 73 | .hover-bg-near-black:focus { background-color: var(--near-black); } 74 | .hover-bg-dark-gray:hover, 75 | .hover-bg-dark-gray:focus { background-color: var(--dark-gray); } 76 | .hover-bg-dark-gray:focus, 77 | .hover-bg-mid-gray:hover { background-color: var(--mid-gray); } 78 | .hover-bg-gray:hover, 79 | .hover-bg-gray:focus { background-color: var(--gray); } 80 | .hover-bg-silver:hover, 81 | .hover-bg-silver:focus { background-color: var(--silver); } 82 | .hover-bg-light-silver:hover, 83 | .hover-bg-light-silver:focus { background-color: var(--light-silver); } 84 | .hover-bg-moon-gray:hover, 85 | .hover-bg-moon-gray:focus { background-color: var(--moon-gray); } 86 | .hover-bg-light-gray:hover, 87 | .hover-bg-light-gray:focus { background-color: var(--light-gray); } 88 | .hover-bg-near-white:hover, 89 | .hover-bg-near-white:focus { background-color: var(--near-white); } 90 | .hover-bg-white:hover, 91 | .hover-bg-white:focus { background-color: var(--white); } 92 | .hover-bg-transparent:hover, 93 | .hover-bg-transparent:focus { background-color: var(--transparent); } 94 | 95 | .hover-bg-black-90:hover, 96 | .hover-bg-black-90:focus { background-color: var(--black-90); } 97 | .hover-bg-black-80:hover, 98 | .hover-bg-black-80:focus { background-color: var(--black-80); } 99 | .hover-bg-black-70:hover, 100 | .hover-bg-black-70:focus { background-color: var(--black-70); } 101 | .hover-bg-black-60:hover, 102 | .hover-bg-black-60:focus { background-color: var(--black-60); } 103 | .hover-bg-black-50:hover, 104 | .hover-bg-black-50:focus { background-color: var(--black-50); } 105 | .hover-bg-black-40:hover, 106 | .hover-bg-black-40:focus { background-color: var(--black-40); } 107 | .hover-bg-black-30:hover, 108 | .hover-bg-black-30:focus { background-color: var(--black-30); } 109 | .hover-bg-black-20:hover, 110 | .hover-bg-black-20:focus { background-color: var(--black-20); } 111 | .hover-bg-black-10:hover, 112 | .hover-bg-black-10:focus { background-color: var(--black-10); } 113 | .hover-bg-white-90:hover, 114 | .hover-bg-white-90:focus { background-color: var(--white-90); } 115 | .hover-bg-white-80:hover, 116 | .hover-bg-white-80:focus { background-color: var(--white-80); } 117 | .hover-bg-white-70:hover, 118 | .hover-bg-white-70:focus { background-color: var(--white-70); } 119 | .hover-bg-white-60:hover, 120 | .hover-bg-white-60:focus { background-color: var(--white-60); } 121 | .hover-bg-white-50:hover, 122 | .hover-bg-white-50:focus { background-color: var(--white-50); } 123 | .hover-bg-white-40:hover, 124 | .hover-bg-white-40:focus { background-color: var(--white-40); } 125 | .hover-bg-white-30:hover, 126 | .hover-bg-white-30:focus { background-color: var(--white-30); } 127 | .hover-bg-white-20:hover, 128 | .hover-bg-white-20:focus { background-color: var(--white-20); } 129 | .hover-bg-white-10:hover, 130 | .hover-bg-white-10:focus { background-color: var(--white-10); } 131 | 132 | .hover-dark-red:hover, 133 | .hover-dark-red:focus { color: var(--dark-red); } 134 | .hover-red:hover, 135 | .hover-red:focus { color: var(--red); } 136 | .hover-light-red:hover, 137 | .hover-light-red:focus { color: var(--light-red); } 138 | .hover-orange:hover, 139 | .hover-orange:focus { color: var(--orange); } 140 | .hover-gold:hover, 141 | .hover-gold:focus { color: var(--gold); } 142 | .hover-yellow:hover, 143 | .hover-yellow:focus { color: var(--yellow); } 144 | .hover-light-yellow:hover, 145 | .hover-light-yellow:focus { color: var(--light-yellow); } 146 | .hover-purple:hover, 147 | .hover-purple:focus { color: var(--purple); } 148 | .hover-light-purple:hover, 149 | .hover-light-purple:focus { color: var(--light-purple); } 150 | .hover-dark-pink:hover, 151 | .hover-dark-pink:focus { color: var(--dark-pink); } 152 | .hover-hot-pink:hover, 153 | .hover-hot-pink:focus { color: var(--hot-pink); } 154 | .hover-pink:hover, 155 | .hover-pink:focus { color: var(--pink); } 156 | .hover-light-pink:hover, 157 | .hover-light-pink:focus { color: var(--light-pink); } 158 | .hover-dark-green:hover, 159 | .hover-dark-green:focus { color: var(--dark-green); } 160 | .hover-green:hover, 161 | .hover-green:focus { color: var(--green); } 162 | .hover-light-green:hover, 163 | .hover-light-green:focus { color: var(--light-green); } 164 | .hover-navy:hover, 165 | .hover-navy:focus { color: var(--navy); } 166 | .hover-dark-blue:hover, 167 | .hover-dark-blue:focus { color: var(--dark-blue); } 168 | .hover-blue:hover, 169 | .hover-blue:focus { color: var(--blue); } 170 | .hover-light-blue:hover, 171 | .hover-light-blue:focus { color: var(--light-blue); } 172 | .hover-lightest-blue:hover, 173 | .hover-lightest-blue:focus { color: var(--lightest-blue); } 174 | .hover-washed-blue:hover, 175 | .hover-washed-blue:focus { color: var(--washed-blue); } 176 | .hover-washed-green:hover, 177 | .hover-washed-green:focus { color: var(--washed-green); } 178 | .hover-washed-yellow:hover, 179 | .hover-washed-yellow:focus { color: var(--washed-yellow); } 180 | .hover-washed-red:hover, 181 | .hover-washed-red:focus { color: var(--washed-red); } 182 | 183 | .hover-bg-dark-red:hover, 184 | .hover-bg-dark-red:focus { background-color: var(--dark-red); } 185 | .hover-bg-red:hover, 186 | .hover-bg-red:focus { background-color: var(--red); } 187 | .hover-bg-light-red:hover, 188 | .hover-bg-light-red:focus { background-color: var(--light-red); } 189 | .hover-bg-orange:hover, 190 | .hover-bg-orange:focus { background-color: var(--orange); } 191 | .hover-bg-gold:hover, 192 | .hover-bg-gold:focus { background-color: var(--gold); } 193 | .hover-bg-yellow:hover, 194 | .hover-bg-yellow:focus { background-color: var(--yellow); } 195 | .hover-bg-light-yellow:hover, 196 | .hover-bg-light-yellow:focus { background-color: var(--light-yellow); } 197 | .hover-bg-purple:hover, 198 | .hover-bg-purple:focus { background-color: var(--purple); } 199 | .hover-bg-light-purple:hover, 200 | .hover-bg-light-purple:focus { background-color: var(--light-purple); } 201 | .hover-bg-dark-pink:hover, 202 | .hover-bg-dark-pink:focus { background-color: var(--dark-pink); } 203 | .hover-bg-hot-pink:hover, 204 | .hover-bg-hot-pink:focus { background-color: var(--hot-pink); } 205 | .hover-bg-pink:hover, 206 | .hover-bg-pink:focus { background-color: var(--pink); } 207 | .hover-bg-light-pink:hover, 208 | .hover-bg-light-pink:focus { background-color: var(--light-pink); } 209 | .hover-bg-dark-green:hover, 210 | .hover-bg-dark-green:focus { background-color: var(--dark-green); } 211 | .hover-bg-green:hover, 212 | .hover-bg-green:focus { background-color: var(--green); } 213 | .hover-bg-light-green:hover, 214 | .hover-bg-light-green:focus { background-color: var(--light-green); } 215 | .hover-bg-navy:hover, 216 | .hover-bg-navy:focus { background-color: var(--navy); } 217 | .hover-bg-dark-blue:hover, 218 | .hover-bg-dark-blue:focus { background-color: var(--dark-blue); } 219 | .hover-bg-blue:hover, 220 | .hover-bg-blue:focus { background-color: var(--blue); } 221 | .hover-bg-light-blue:hover, 222 | .hover-bg-light-blue:focus { background-color: var(--light-blue); } 223 | .hover-bg-lightest-blue:hover, 224 | .hover-bg-lightest-blue:focus { background-color: var(--lightest-blue); } 225 | .hover-bg-washed-blue:hover, 226 | .hover-bg-washed-blue:focus { background-color: var(--washed-blue); } 227 | .hover-bg-washed-green:hover, 228 | .hover-bg-washed-green:focus { background-color: var(--washed-green); } 229 | .hover-bg-washed-yellow:hover, 230 | .hover-bg-washed-yellow:focus { background-color: var(--washed-yellow); } 231 | .hover-bg-washed-red:hover, 232 | .hover-bg-washed-red:focus { background-color: var(--washed-red); } 233 | 234 | -------------------------------------------------------------------------------- /src/_normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Correct the line height in all browsers. 6 | * 3. Prevent adjustments of font size after orientation changes in 7 | * IE on Windows Phone and in iOS. 8 | */ 9 | 10 | /* Document 11 | ========================================================================== */ 12 | 13 | html { 14 | font-family: sans-serif; /* 1 */ 15 | line-height: 1.15; /* 2 */ 16 | -ms-text-size-adjust: 100%; /* 3 */ 17 | -webkit-text-size-adjust: 100%; /* 3 */ 18 | } 19 | 20 | /* Sections 21 | ========================================================================== */ 22 | 23 | /** 24 | * Remove the margin in all browsers (opinionated). 25 | */ 26 | 27 | body { 28 | margin: 0; 29 | } 30 | 31 | /** 32 | * Add the correct display in IE 9-. 33 | */ 34 | 35 | article, 36 | aside, 37 | footer, 38 | header, 39 | nav, 40 | section { 41 | display: block; 42 | } 43 | 44 | /** 45 | * Correct the font size and margin on `h1` elements within `section` and 46 | * `article` contexts in Chrome, Firefox, and Safari. 47 | */ 48 | 49 | h1 { 50 | font-size: 2em; 51 | margin: 0.67em 0; 52 | } 53 | 54 | /* Grouping content 55 | ========================================================================== */ 56 | 57 | /** 58 | * Add the correct display in IE 9-. 59 | * 1. Add the correct display in IE. 60 | */ 61 | 62 | figcaption, 63 | figure, 64 | main { /* 1 */ 65 | display: block; 66 | } 67 | 68 | /** 69 | * Add the correct margin in IE 8. 70 | */ 71 | 72 | figure { 73 | margin: 1em 40px; 74 | } 75 | 76 | /** 77 | * 1. Add the correct box sizing in Firefox. 78 | * 2. Show the overflow in Edge and IE. 79 | */ 80 | 81 | hr { 82 | box-sizing: content-box; /* 1 */ 83 | height: 0; /* 1 */ 84 | overflow: visible; /* 2 */ 85 | } 86 | 87 | /** 88 | * 1. Correct the inheritance and scaling of font size in all browsers. 89 | * 2. Correct the odd `em` font sizing in all browsers. 90 | */ 91 | 92 | pre { 93 | font-family: monospace, monospace; /* 1 */ 94 | font-size: 1em; /* 2 */ 95 | } 96 | 97 | /* Text-level semantics 98 | ========================================================================== */ 99 | 100 | /** 101 | * 1. Remove the gray background on active links in IE 10. 102 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 103 | */ 104 | 105 | a { 106 | background-color: transparent; /* 1 */ 107 | -webkit-text-decoration-skip: objects; /* 2 */ 108 | } 109 | 110 | /** 111 | * Remove the outline on focused links when they are also active or hovered 112 | * in all browsers (opinionated). 113 | */ 114 | 115 | a:active, 116 | a:hover { 117 | outline-width: 0; 118 | } 119 | 120 | /** 121 | * 1. Remove the bottom border in Firefox 39-. 122 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 123 | */ 124 | 125 | abbr[title] { 126 | border-bottom: none; /* 1 */ 127 | text-decoration: underline; /* 2 */ 128 | text-decoration: underline dotted; /* 2 */ 129 | } 130 | 131 | /** 132 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 133 | */ 134 | 135 | b, 136 | strong { 137 | font-weight: inherit; 138 | } 139 | 140 | /** 141 | * Add the correct font weight in Chrome, Edge, and Safari. 142 | */ 143 | 144 | b, 145 | strong { 146 | font-weight: bolder; 147 | } 148 | 149 | /** 150 | * 1. Correct the inheritance and scaling of font size in all browsers. 151 | * 2. Correct the odd `em` font sizing in all browsers. 152 | */ 153 | 154 | code, 155 | kbd, 156 | samp { 157 | font-family: monospace, monospace; /* 1 */ 158 | font-size: 1em; /* 2 */ 159 | } 160 | 161 | /** 162 | * Add the correct font style in Android 4.3-. 163 | */ 164 | 165 | dfn { 166 | font-style: italic; 167 | } 168 | 169 | /** 170 | * Add the correct background and color in IE 9-. 171 | */ 172 | 173 | mark { 174 | background-color: #ff0; 175 | color: #000; 176 | } 177 | 178 | /** 179 | * Add the correct font size in all browsers. 180 | */ 181 | 182 | small { 183 | font-size: 80%; 184 | } 185 | 186 | /** 187 | * Prevent `sub` and `sup` elements from affecting the line height in 188 | * all browsers. 189 | */ 190 | 191 | sub, 192 | sup { 193 | font-size: 75%; 194 | line-height: 0; 195 | position: relative; 196 | vertical-align: baseline; 197 | } 198 | 199 | sub { 200 | bottom: -0.25em; 201 | } 202 | 203 | sup { 204 | top: -0.5em; 205 | } 206 | 207 | /* Embedded content 208 | ========================================================================== */ 209 | 210 | /** 211 | * Add the correct display in IE 9-. 212 | */ 213 | 214 | audio, 215 | video { 216 | display: inline-block; 217 | } 218 | 219 | /** 220 | * Add the correct display in iOS 4-7. 221 | */ 222 | 223 | audio:not([controls]) { 224 | display: none; 225 | height: 0; 226 | } 227 | 228 | /** 229 | * Remove the border on images inside links in IE 10-. 230 | */ 231 | 232 | img { 233 | border-style: none; 234 | } 235 | 236 | /** 237 | * Hide the overflow in IE. 238 | */ 239 | 240 | svg:not(:root) { 241 | overflow: hidden; 242 | } 243 | 244 | /* Forms 245 | ========================================================================== */ 246 | 247 | /** 248 | * 1. Change the font styles in all browsers (opinionated). 249 | * 2. Remove the margin in Firefox and Safari. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | font-family: sans-serif; /* 1 */ 258 | font-size: 100%; /* 1 */ 259 | line-height: 1.15; /* 1 */ 260 | margin: 0; /* 2 */ 261 | } 262 | 263 | /** 264 | * Show the overflow in IE. 265 | * 1. Show the overflow in Edge. 266 | */ 267 | 268 | button, 269 | input { /* 1 */ 270 | overflow: visible; 271 | } 272 | 273 | /** 274 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 275 | * 1. Remove the inheritance of text transform in Firefox. 276 | */ 277 | 278 | button, 279 | select { /* 1 */ 280 | text-transform: none; 281 | } 282 | 283 | /** 284 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 285 | * controls in Android 4. 286 | * 2. Correct the inability to style clickable types in iOS and Safari. 287 | */ 288 | 289 | button, 290 | html [type="button"], /* 1 */ 291 | [type="reset"], 292 | [type="submit"] { 293 | -webkit-appearance: button; /* 2 */ 294 | } 295 | 296 | /** 297 | * Remove the inner border and padding in Firefox. 298 | */ 299 | 300 | button::-moz-focus-inner, 301 | [type="button"]::-moz-focus-inner, 302 | [type="reset"]::-moz-focus-inner, 303 | [type="submit"]::-moz-focus-inner { 304 | border-style: none; 305 | padding: 0; 306 | } 307 | 308 | /** 309 | * Restore the focus styles unset by the previous rule. 310 | */ 311 | 312 | button:-moz-focusring, 313 | [type="button"]:-moz-focusring, 314 | [type="reset"]:-moz-focusring, 315 | [type="submit"]:-moz-focusring { 316 | outline: 1px dotted ButtonText; 317 | } 318 | 319 | /** 320 | * Change the border, margin, and padding in all browsers (opinionated). 321 | */ 322 | 323 | fieldset { 324 | border: 1px solid #c0c0c0; 325 | margin: 0 2px; 326 | padding: 0.35em 0.625em 0.75em; 327 | } 328 | 329 | /** 330 | * 1. Correct the text wrapping in Edge and IE. 331 | * 2. Correct the color inheritance from `fieldset` elements in IE. 332 | * 3. Remove the padding so developers are not caught out when they zero out 333 | * `fieldset` elements in all browsers. 334 | */ 335 | 336 | legend { 337 | box-sizing: border-box; /* 1 */ 338 | color: inherit; /* 2 */ 339 | display: table; /* 1 */ 340 | max-width: 100%; /* 1 */ 341 | padding: 0; /* 3 */ 342 | white-space: normal; /* 1 */ 343 | } 344 | 345 | /** 346 | * 1. Add the correct display in IE 9-. 347 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 348 | */ 349 | 350 | progress { 351 | display: inline-block; /* 1 */ 352 | vertical-align: baseline; /* 2 */ 353 | } 354 | 355 | /** 356 | * Remove the default vertical scrollbar in IE. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; 361 | } 362 | 363 | /** 364 | * 1. Add the correct box sizing in IE 10-. 365 | * 2. Remove the padding in IE 10-. 366 | */ 367 | 368 | [type="checkbox"], 369 | [type="radio"] { 370 | box-sizing: border-box; /* 1 */ 371 | padding: 0; /* 2 */ 372 | } 373 | 374 | /** 375 | * Correct the cursor style of increment and decrement buttons in Chrome. 376 | */ 377 | 378 | [type="number"]::-webkit-inner-spin-button, 379 | [type="number"]::-webkit-outer-spin-button { 380 | height: auto; 381 | } 382 | 383 | /** 384 | * 1. Correct the odd appearance in Chrome and Safari. 385 | * 2. Correct the outline style in Safari. 386 | */ 387 | 388 | [type="search"] { 389 | -webkit-appearance: textfield; /* 1 */ 390 | outline-offset: -2px; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 395 | */ 396 | 397 | [type="search"]::-webkit-search-cancel-button, 398 | [type="search"]::-webkit-search-decoration { 399 | -webkit-appearance: none; 400 | } 401 | 402 | /** 403 | * 1. Correct the inability to style clickable types in iOS and Safari. 404 | * 2. Change font properties to `inherit` in Safari. 405 | */ 406 | 407 | ::-webkit-file-upload-button { 408 | -webkit-appearance: button; /* 1 */ 409 | font: inherit; /* 2 */ 410 | } 411 | 412 | /* Interactive 413 | ========================================================================== */ 414 | 415 | /* 416 | * Add the correct display in IE 9-. 417 | * 1. Add the correct display in Edge, IE, and Firefox. 418 | */ 419 | 420 | details, /* 1 */ 421 | menu { 422 | display: block; 423 | } 424 | 425 | /* 426 | * Add the correct display in all browsers. 427 | */ 428 | 429 | summary { 430 | display: list-item; 431 | } 432 | 433 | /* Scripting 434 | ========================================================================== */ 435 | 436 | /** 437 | * Add the correct display in IE 9-. 438 | */ 439 | 440 | canvas { 441 | display: inline-block; 442 | } 443 | 444 | /** 445 | * Add the correct display in IE. 446 | */ 447 | 448 | template { 449 | display: none; 450 | } 451 | 452 | /* Hidden 453 | ========================================================================== */ 454 | 455 | /** 456 | * Add the correct display in IE 10-. 457 | */ 458 | 459 | [hidden] { 460 | display: none; 461 | } 462 | -------------------------------------------------------------------------------- /src/_spacing.css: -------------------------------------------------------------------------------- 1 | /* Variables */ 2 | 3 | :root { 4 | --spacing-none: 0; 5 | --spacing-extra-small: .25rem; 6 | --spacing-small: .5rem; 7 | --spacing-medium: 1rem; 8 | --spacing-large: 2rem; 9 | --spacing-extra-large: 4rem; 10 | --spacing-extra-extra-large: 8rem; 11 | --spacing-extra-extra-extra-large: 16rem; 12 | } 13 | 14 | /* 15 | SPACING 16 | Docs: http://tachyons.io/docs/layout/spacing/ 17 | 18 | An eight step powers of two scale ranging from 0 to 16rem. 19 | 20 | Base: 21 | p = padding 22 | m = margin 23 | 24 | Modifiers: 25 | a = all 26 | h = horizontal 27 | v = vertical 28 | t = top 29 | r = right 30 | b = bottom 31 | l = left 32 | 33 | 0 = none 34 | 1 = 1st step in spacing scale 35 | 2 = 2nd step in spacing scale 36 | 3 = 3rd step in spacing scale 37 | 4 = 4th step in spacing scale 38 | 5 = 5th step in spacing scale 39 | 6 = 6th step in spacing scale 40 | 7 = 7th step in spacing scale 41 | 42 | Media Query Extensions: 43 | -ns = not-small 44 | -m = medium 45 | -l = large 46 | 47 | */ 48 | 49 | 50 | .pa0 { padding: var(--spacing-none); } 51 | .pa1 { padding: var(--spacing-extra-small); } 52 | .pa2 { padding: var(--spacing-small); } 53 | .pa3 { padding: var(--spacing-medium); } 54 | .pa4 { padding: var(--spacing-large); } 55 | .pa5 { padding: var(--spacing-extra-large); } 56 | .pa6 { padding: var(--spacing-extra-extra-large); } 57 | .pa7 { padding: var(--spacing-extra-extra-extra-large); } 58 | 59 | .pl0 { padding-left: var(--spacing-none); } 60 | .pl1 { padding-left: var(--spacing-extra-small); } 61 | .pl2 { padding-left: var(--spacing-small); } 62 | .pl3 { padding-left: var(--spacing-medium); } 63 | .pl4 { padding-left: var(--spacing-large); } 64 | .pl5 { padding-left: var(--spacing-extra-large); } 65 | .pl6 { padding-left: var(--spacing-extra-extra-large); } 66 | .pl7 { padding-left: var(--spacing-extra-extra-extra-large); } 67 | 68 | .pr0 { padding-right: var(--spacing-none); } 69 | .pr1 { padding-right: var(--spacing-extra-small); } 70 | .pr2 { padding-right: var(--spacing-small); } 71 | .pr3 { padding-right: var(--spacing-medium); } 72 | .pr4 { padding-right: var(--spacing-large); } 73 | .pr5 { padding-right: var(--spacing-extra-large); } 74 | .pr6 { padding-right: var(--spacing-extra-extra-large); } 75 | .pr7 { padding-right: var(--spacing-extra-extra-extra-large); } 76 | 77 | .pb0 { padding-bottom: var(--spacing-none); } 78 | .pb1 { padding-bottom: var(--spacing-extra-small); } 79 | .pb2 { padding-bottom: var(--spacing-small); } 80 | .pb3 { padding-bottom: var(--spacing-medium); } 81 | .pb4 { padding-bottom: var(--spacing-large); } 82 | .pb5 { padding-bottom: var(--spacing-extra-large); } 83 | .pb6 { padding-bottom: var(--spacing-extra-extra-large); } 84 | .pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); } 85 | 86 | .pt0 { padding-top: var(--spacing-none); } 87 | .pt1 { padding-top: var(--spacing-extra-small); } 88 | .pt2 { padding-top: var(--spacing-small); } 89 | .pt3 { padding-top: var(--spacing-medium); } 90 | .pt4 { padding-top: var(--spacing-large); } 91 | .pt5 { padding-top: var(--spacing-extra-large); } 92 | .pt6 { padding-top: var(--spacing-extra-extra-large); } 93 | .pt7 { padding-top: var(--spacing-extra-extra-extra-large); } 94 | 95 | .pv0 { 96 | padding-top: var(--spacing-none); 97 | padding-bottom: var(--spacing-none); 98 | } 99 | .pv1 { 100 | padding-top: var(--spacing-extra-small); 101 | padding-bottom: var(--spacing-extra-small); 102 | } 103 | .pv2 { 104 | padding-top: var(--spacing-small); 105 | padding-bottom: var(--spacing-small); 106 | } 107 | .pv3 { 108 | padding-top: var(--spacing-medium); 109 | padding-bottom: var(--spacing-medium); 110 | } 111 | .pv4 { 112 | padding-top: var(--spacing-large); 113 | padding-bottom: var(--spacing-large); 114 | } 115 | .pv5 { 116 | padding-top: var(--spacing-extra-large); 117 | padding-bottom: var(--spacing-extra-large); 118 | } 119 | .pv6 { 120 | padding-top: var(--spacing-extra-extra-large); 121 | padding-bottom: var(--spacing-extra-extra-large); 122 | } 123 | 124 | .pv7 { 125 | padding-top: var(--spacing-extra-extra-extra-large); 126 | padding-bottom: var(--spacing-extra-extra-extra-large); 127 | } 128 | 129 | .ph0 { 130 | padding-left: var(--spacing-none); 131 | padding-right: var(--spacing-none); 132 | } 133 | 134 | .ph1 { 135 | padding-left: var(--spacing-extra-small); 136 | padding-right: var(--spacing-extra-small); 137 | } 138 | 139 | .ph2 { 140 | padding-left: var(--spacing-small); 141 | padding-right: var(--spacing-small); 142 | } 143 | 144 | .ph3 { 145 | padding-left: var(--spacing-medium); 146 | padding-right: var(--spacing-medium); 147 | } 148 | 149 | .ph4 { 150 | padding-left: var(--spacing-large); 151 | padding-right: var(--spacing-large); 152 | } 153 | 154 | .ph5 { 155 | padding-left: var(--spacing-extra-large); 156 | padding-right: var(--spacing-extra-large); 157 | } 158 | 159 | .ph6 { 160 | padding-left: var(--spacing-extra-extra-large); 161 | padding-right: var(--spacing-extra-extra-large); 162 | } 163 | 164 | .ph7 { 165 | padding-left: var(--spacing-extra-extra-extra-large); 166 | padding-right: var(--spacing-extra-extra-extra-large); 167 | } 168 | 169 | .ma0 { margin: var(--spacing-none); } 170 | .ma1 { margin: var(--spacing-extra-small); } 171 | .ma2 { margin: var(--spacing-small); } 172 | .ma3 { margin: var(--spacing-medium); } 173 | .ma4 { margin: var(--spacing-large); } 174 | .ma5 { margin: var(--spacing-extra-large); } 175 | .ma6 { margin: var(--spacing-extra-extra-large); } 176 | .ma7 { margin: var(--spacing-extra-extra-extra-large); } 177 | 178 | .ml0 { margin-left: var(--spacing-none); } 179 | .ml1 { margin-left: var(--spacing-extra-small); } 180 | .ml2 { margin-left: var(--spacing-small); } 181 | .ml3 { margin-left: var(--spacing-medium); } 182 | .ml4 { margin-left: var(--spacing-large); } 183 | .ml5 { margin-left: var(--spacing-extra-large); } 184 | .ml6 { margin-left: var(--spacing-extra-extra-large); } 185 | .ml7 { margin-left: var(--spacing-extra-extra-extra-large); } 186 | 187 | .mr0 { margin-right: var(--spacing-none); } 188 | .mr1 { margin-right: var(--spacing-extra-small); } 189 | .mr2 { margin-right: var(--spacing-small); } 190 | .mr3 { margin-right: var(--spacing-medium); } 191 | .mr4 { margin-right: var(--spacing-large); } 192 | .mr5 { margin-right: var(--spacing-extra-large); } 193 | .mr6 { margin-right: var(--spacing-extra-extra-large); } 194 | .mr7 { margin-right: var(--spacing-extra-extra-extra-large); } 195 | 196 | .mb0 { margin-bottom: var(--spacing-none); } 197 | .mb1 { margin-bottom: var(--spacing-extra-small); } 198 | .mb2 { margin-bottom: var(--spacing-small); } 199 | .mb3 { margin-bottom: var(--spacing-medium); } 200 | .mb4 { margin-bottom: var(--spacing-large); } 201 | .mb5 { margin-bottom: var(--spacing-extra-large); } 202 | .mb6 { margin-bottom: var(--spacing-extra-extra-large); } 203 | .mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); } 204 | 205 | .mt0 { margin-top: var(--spacing-none); } 206 | .mt1 { margin-top: var(--spacing-extra-small); } 207 | .mt2 { margin-top: var(--spacing-small); } 208 | .mt3 { margin-top: var(--spacing-medium); } 209 | .mt4 { margin-top: var(--spacing-large); } 210 | .mt5 { margin-top: var(--spacing-extra-large); } 211 | .mt6 { margin-top: var(--spacing-extra-extra-large); } 212 | .mt7 { margin-top: var(--spacing-extra-extra-extra-large); } 213 | 214 | .mv0 { 215 | margin-top: var(--spacing-none); 216 | margin-bottom: var(--spacing-none); 217 | } 218 | .mv1 { 219 | margin-top: var(--spacing-extra-small); 220 | margin-bottom: var(--spacing-extra-small); 221 | } 222 | .mv2 { 223 | margin-top: var(--spacing-small); 224 | margin-bottom: var(--spacing-small); 225 | } 226 | .mv3 { 227 | margin-top: var(--spacing-medium); 228 | margin-bottom: var(--spacing-medium); 229 | } 230 | .mv4 { 231 | margin-top: var(--spacing-large); 232 | margin-bottom: var(--spacing-large); 233 | } 234 | .mv5 { 235 | margin-top: var(--spacing-extra-large); 236 | margin-bottom: var(--spacing-extra-large); 237 | } 238 | .mv6 { 239 | margin-top: var(--spacing-extra-extra-large); 240 | margin-bottom: var(--spacing-extra-extra-large); 241 | } 242 | .mv7 { 243 | margin-top: var(--spacing-extra-extra-extra-large); 244 | margin-bottom: var(--spacing-extra-extra-extra-large); 245 | } 246 | 247 | .mh0 { 248 | margin-left: var(--spacing-none); 249 | margin-right: var(--spacing-none); 250 | } 251 | .mh1 { 252 | margin-left: var(--spacing-extra-small); 253 | margin-right: var(--spacing-extra-small); 254 | } 255 | .mh2 { 256 | margin-left: var(--spacing-small); 257 | margin-right: var(--spacing-small); 258 | } 259 | .mh3 { 260 | margin-left: var(--spacing-medium); 261 | margin-right: var(--spacing-medium); 262 | } 263 | .mh4 { 264 | margin-left: var(--spacing-large); 265 | margin-right: var(--spacing-large); 266 | } 267 | .mh5 { 268 | margin-left: var(--spacing-extra-large); 269 | margin-right: var(--spacing-extra-large); 270 | } 271 | .mh6 { 272 | margin-left: var(--spacing-extra-extra-large); 273 | margin-right: var(--spacing-extra-extra-large); 274 | } 275 | .mh7 { 276 | margin-left: var(--spacing-extra-extra-extra-large); 277 | margin-right: var(--spacing-extra-extra-extra-large); 278 | } 279 | 280 | @media (--breakpoint-not-small) { 281 | .pa0-ns { padding: var(--spacing-none); } 282 | .pa1-ns { padding: var(--spacing-extra-small); } 283 | .pa2-ns { padding: var(--spacing-small); } 284 | .pa3-ns { padding: var(--spacing-medium); } 285 | .pa4-ns { padding: var(--spacing-large); } 286 | .pa5-ns { padding: var(--spacing-extra-large); } 287 | .pa6-ns { padding: var(--spacing-extra-extra-large); } 288 | .pa7-ns { padding: var(--spacing-extra-extra-extra-large); } 289 | 290 | .pl0-ns { padding-left: var(--spacing-none); } 291 | .pl1-ns { padding-left: var(--spacing-extra-small); } 292 | .pl2-ns { padding-left: var(--spacing-small); } 293 | .pl3-ns { padding-left: var(--spacing-medium); } 294 | .pl4-ns { padding-left: var(--spacing-large); } 295 | .pl5-ns { padding-left: var(--spacing-extra-large); } 296 | .pl6-ns { padding-left: var(--spacing-extra-extra-large); } 297 | .pl7-ns { padding-left: var(--spacing-extra-extra-extra-large); } 298 | 299 | .pr0-ns { padding-right: var(--spacing-none); } 300 | .pr1-ns { padding-right: var(--spacing-extra-small); } 301 | .pr2-ns { padding-right: var(--spacing-small); } 302 | .pr3-ns { padding-right: var(--spacing-medium); } 303 | .pr4-ns { padding-right: var(--spacing-large); } 304 | .pr5-ns { padding-right: var(--spacing-extra-large); } 305 | .pr6-ns { padding-right: var(--spacing-extra-extra-large); } 306 | .pr7-ns { padding-right: var(--spacing-extra-extra-extra-large); } 307 | 308 | .pb0-ns { padding-bottom: var(--spacing-none); } 309 | .pb1-ns { padding-bottom: var(--spacing-extra-small); } 310 | .pb2-ns { padding-bottom: var(--spacing-small); } 311 | .pb3-ns { padding-bottom: var(--spacing-medium); } 312 | .pb4-ns { padding-bottom: var(--spacing-large); } 313 | .pb5-ns { padding-bottom: var(--spacing-extra-large); } 314 | .pb6-ns { padding-bottom: var(--spacing-extra-extra-large); } 315 | .pb7-ns { padding-bottom: var(--spacing-extra-extra-extra-large); } 316 | 317 | .pt0-ns { padding-top: var(--spacing-none); } 318 | .pt1-ns { padding-top: var(--spacing-extra-small); } 319 | .pt2-ns { padding-top: var(--spacing-small); } 320 | .pt3-ns { padding-top: var(--spacing-medium); } 321 | .pt4-ns { padding-top: var(--spacing-large); } 322 | .pt5-ns { padding-top: var(--spacing-extra-large); } 323 | .pt6-ns { padding-top: var(--spacing-extra-extra-large); } 324 | .pt7-ns { padding-top: var(--spacing-extra-extra-extra-large); } 325 | 326 | .pv0-ns { 327 | padding-top: var(--spacing-none); 328 | padding-bottom: var(--spacing-none); 329 | } 330 | .pv1-ns { 331 | padding-top: var(--spacing-extra-small); 332 | padding-bottom: var(--spacing-extra-small); 333 | } 334 | .pv2-ns { 335 | padding-top: var(--spacing-small); 336 | padding-bottom: var(--spacing-small); 337 | } 338 | .pv3-ns { 339 | padding-top: var(--spacing-medium); 340 | padding-bottom: var(--spacing-medium); 341 | } 342 | .pv4-ns { 343 | padding-top: var(--spacing-large); 344 | padding-bottom: var(--spacing-large); 345 | } 346 | .pv5-ns { 347 | padding-top: var(--spacing-extra-large); 348 | padding-bottom: var(--spacing-extra-large); 349 | } 350 | .pv6-ns { 351 | padding-top: var(--spacing-extra-extra-large); 352 | padding-bottom: var(--spacing-extra-extra-large); 353 | } 354 | .pv7-ns { 355 | padding-top: var(--spacing-extra-extra-extra-large); 356 | padding-bottom: var(--spacing-extra-extra-extra-large); 357 | } 358 | .ph0-ns { 359 | padding-left: var(--spacing-none); 360 | padding-right: var(--spacing-none); 361 | } 362 | .ph1-ns { 363 | padding-left: var(--spacing-extra-small); 364 | padding-right: var(--spacing-extra-small); 365 | } 366 | .ph2-ns { 367 | padding-left: var(--spacing-small); 368 | padding-right: var(--spacing-small); 369 | } 370 | .ph3-ns { 371 | padding-left: var(--spacing-medium); 372 | padding-right: var(--spacing-medium); 373 | } 374 | .ph4-ns { 375 | padding-left: var(--spacing-large); 376 | padding-right: var(--spacing-large); 377 | } 378 | .ph5-ns { 379 | padding-left: var(--spacing-extra-large); 380 | padding-right: var(--spacing-extra-large); 381 | } 382 | .ph6-ns { 383 | padding-left: var(--spacing-extra-extra-large); 384 | padding-right: var(--spacing-extra-extra-large); 385 | } 386 | .ph7-ns { 387 | padding-left: var(--spacing-extra-extra-extra-large); 388 | padding-right: var(--spacing-extra-extra-extra-large); 389 | } 390 | 391 | .ma0-ns { margin: var(--spacing-none); } 392 | .ma1-ns { margin: var(--spacing-extra-small); } 393 | .ma2-ns { margin: var(--spacing-small); } 394 | .ma3-ns { margin: var(--spacing-medium); } 395 | .ma4-ns { margin: var(--spacing-large); } 396 | .ma5-ns { margin: var(--spacing-extra-large); } 397 | .ma6-ns { margin: var(--spacing-extra-extra-large); } 398 | .ma7-ns { margin: var(--spacing-extra-extra-extra-large); } 399 | 400 | .ml0-ns { margin-left: var(--spacing-none); } 401 | .ml1-ns { margin-left: var(--spacing-extra-small); } 402 | .ml2-ns { margin-left: var(--spacing-small); } 403 | .ml3-ns { margin-left: var(--spacing-medium); } 404 | .ml4-ns { margin-left: var(--spacing-large); } 405 | .ml5-ns { margin-left: var(--spacing-extra-large); } 406 | .ml6-ns { margin-left: var(--spacing-extra-extra-large); } 407 | .ml7-ns { margin-left: var(--spacing-extra-extra-extra-large); } 408 | 409 | .mr0-ns { margin-right: var(--spacing-none); } 410 | .mr1-ns { margin-right: var(--spacing-extra-small); } 411 | .mr2-ns { margin-right: var(--spacing-small); } 412 | .mr3-ns { margin-right: var(--spacing-medium); } 413 | .mr4-ns { margin-right: var(--spacing-large); } 414 | .mr5-ns { margin-right: var(--spacing-extra-large); } 415 | .mr6-ns { margin-right: var(--spacing-extra-extra-large); } 416 | .mr7-ns { margin-right: var(--spacing-extra-extra-extra-large); } 417 | 418 | .mb0-ns { margin-bottom: var(--spacing-none); } 419 | .mb1-ns { margin-bottom: var(--spacing-extra-small); } 420 | .mb2-ns { margin-bottom: var(--spacing-small); } 421 | .mb3-ns { margin-bottom: var(--spacing-medium); } 422 | .mb4-ns { margin-bottom: var(--spacing-large); } 423 | .mb5-ns { margin-bottom: var(--spacing-extra-large); } 424 | .mb6-ns { margin-bottom: var(--spacing-extra-extra-large); } 425 | .mb7-ns { margin-bottom: var(--spacing-extra-extra-extra-large); } 426 | 427 | .mt0-ns { margin-top: var(--spacing-none); } 428 | .mt1-ns { margin-top: var(--spacing-extra-small); } 429 | .mt2-ns { margin-top: var(--spacing-small); } 430 | .mt3-ns { margin-top: var(--spacing-medium); } 431 | .mt4-ns { margin-top: var(--spacing-large); } 432 | .mt5-ns { margin-top: var(--spacing-extra-large); } 433 | .mt6-ns { margin-top: var(--spacing-extra-extra-large); } 434 | .mt7-ns { margin-top: var(--spacing-extra-extra-extra-large); } 435 | 436 | .mv0-ns { 437 | margin-top: var(--spacing-none); 438 | margin-bottom: var(--spacing-none); 439 | } 440 | .mv1-ns { 441 | margin-top: var(--spacing-extra-small); 442 | margin-bottom: var(--spacing-extra-small); 443 | } 444 | .mv2-ns { 445 | margin-top: var(--spacing-small); 446 | margin-bottom: var(--spacing-small); 447 | } 448 | .mv3-ns { 449 | margin-top: var(--spacing-medium); 450 | margin-bottom: var(--spacing-medium); 451 | } 452 | .mv4-ns { 453 | margin-top: var(--spacing-large); 454 | margin-bottom: var(--spacing-large); 455 | } 456 | .mv5-ns { 457 | margin-top: var(--spacing-extra-large); 458 | margin-bottom: var(--spacing-extra-large); 459 | } 460 | .mv6-ns { 461 | margin-top: var(--spacing-extra-extra-large); 462 | margin-bottom: var(--spacing-extra-extra-large); 463 | } 464 | .mv7-ns { 465 | margin-top: var(--spacing-extra-extra-extra-large); 466 | margin-bottom: var(--spacing-extra-extra-extra-large); 467 | } 468 | 469 | .mh0-ns { 470 | margin-left: var(--spacing-none); 471 | margin-right: var(--spacing-none); 472 | } 473 | .mh1-ns { 474 | margin-left: var(--spacing-extra-small); 475 | margin-right: var(--spacing-extra-small); 476 | } 477 | .mh2-ns { 478 | margin-left: var(--spacing-small); 479 | margin-right: var(--spacing-small); 480 | } 481 | .mh3-ns { 482 | margin-left: var(--spacing-medium); 483 | margin-right: var(--spacing-medium); 484 | } 485 | .mh4-ns { 486 | margin-left: var(--spacing-large); 487 | margin-right: var(--spacing-large); 488 | } 489 | .mh5-ns { 490 | margin-left: var(--spacing-extra-large); 491 | margin-right: var(--spacing-extra-large); 492 | } 493 | .mh6-ns { 494 | margin-left: var(--spacing-extra-extra-large); 495 | margin-right: var(--spacing-extra-extra-large); 496 | } 497 | .mh7-ns { 498 | margin-left: var(--spacing-extra-extra-extra-large); 499 | margin-right: var(--spacing-extra-extra-extra-large); 500 | } 501 | 502 | } 503 | 504 | @media (--breakpoint-medium) { 505 | .pa0-m { padding: var(--spacing-none); } 506 | .pa1-m { padding: var(--spacing-extra-small); } 507 | .pa2-m { padding: var(--spacing-small); } 508 | .pa3-m { padding: var(--spacing-medium); } 509 | .pa4-m { padding: var(--spacing-large); } 510 | .pa5-m { padding: var(--spacing-extra-large); } 511 | .pa6-m { padding: var(--spacing-extra-extra-large); } 512 | .pa7-m { padding: var(--spacing-extra-extra-extra-large); } 513 | 514 | .pl0-m { padding-left: var(--spacing-none); } 515 | .pl1-m { padding-left: var(--spacing-extra-small); } 516 | .pl2-m { padding-left: var(--spacing-small); } 517 | .pl3-m { padding-left: var(--spacing-medium); } 518 | .pl4-m { padding-left: var(--spacing-large); } 519 | .pl5-m { padding-left: var(--spacing-extra-large); } 520 | .pl6-m { padding-left: var(--spacing-extra-extra-large); } 521 | .pl7-m { padding-left: var(--spacing-extra-extra-extra-large); } 522 | 523 | .pr0-m { padding-right: var(--spacing-none); } 524 | .pr1-m { padding-right: var(--spacing-extra-small); } 525 | .pr2-m { padding-right: var(--spacing-small); } 526 | .pr3-m { padding-right: var(--spacing-medium); } 527 | .pr4-m { padding-right: var(--spacing-large); } 528 | .pr5-m { padding-right: var(--spacing-extra-large); } 529 | .pr6-m { padding-right: var(--spacing-extra-extra-large); } 530 | .pr7-m { padding-right: var(--spacing-extra-extra-extra-large); } 531 | 532 | .pb0-m { padding-bottom: var(--spacing-none); } 533 | .pb1-m { padding-bottom: var(--spacing-extra-small); } 534 | .pb2-m { padding-bottom: var(--spacing-small); } 535 | .pb3-m { padding-bottom: var(--spacing-medium); } 536 | .pb4-m { padding-bottom: var(--spacing-large); } 537 | .pb5-m { padding-bottom: var(--spacing-extra-large); } 538 | .pb6-m { padding-bottom: var(--spacing-extra-extra-large); } 539 | .pb7-m { padding-bottom: var(--spacing-extra-extra-extra-large); } 540 | 541 | .pt0-m { padding-top: var(--spacing-none); } 542 | .pt1-m { padding-top: var(--spacing-extra-small); } 543 | .pt2-m { padding-top: var(--spacing-small); } 544 | .pt3-m { padding-top: var(--spacing-medium); } 545 | .pt4-m { padding-top: var(--spacing-large); } 546 | .pt5-m { padding-top: var(--spacing-extra-large); } 547 | .pt6-m { padding-top: var(--spacing-extra-extra-large); } 548 | .pt7-m { padding-top: var(--spacing-extra-extra-extra-large); } 549 | 550 | .pv0-m { 551 | padding-top: var(--spacing-none); 552 | padding-bottom: var(--spacing-none); 553 | } 554 | .pv1-m { 555 | padding-top: var(--spacing-extra-small); 556 | padding-bottom: var(--spacing-extra-small); 557 | } 558 | .pv2-m { 559 | padding-top: var(--spacing-small); 560 | padding-bottom: var(--spacing-small); 561 | } 562 | .pv3-m { 563 | padding-top: var(--spacing-medium); 564 | padding-bottom: var(--spacing-medium); 565 | } 566 | .pv4-m { 567 | padding-top: var(--spacing-large); 568 | padding-bottom: var(--spacing-large); 569 | } 570 | .pv5-m { 571 | padding-top: var(--spacing-extra-large); 572 | padding-bottom: var(--spacing-extra-large); 573 | } 574 | .pv6-m { 575 | padding-top: var(--spacing-extra-extra-large); 576 | padding-bottom: var(--spacing-extra-extra-large); 577 | } 578 | .pv7-m { 579 | padding-top: var(--spacing-extra-extra-extra-large); 580 | padding-bottom: var(--spacing-extra-extra-extra-large); 581 | } 582 | 583 | .ph0-m { 584 | padding-left: var(--spacing-none); 585 | padding-right: var(--spacing-none); 586 | } 587 | .ph1-m { 588 | padding-left: var(--spacing-extra-small); 589 | padding-right: var(--spacing-extra-small); 590 | } 591 | .ph2-m { 592 | padding-left: var(--spacing-small); 593 | padding-right: var(--spacing-small); 594 | } 595 | .ph3-m { 596 | padding-left: var(--spacing-medium); 597 | padding-right: var(--spacing-medium); 598 | } 599 | .ph4-m { 600 | padding-left: var(--spacing-large); 601 | padding-right: var(--spacing-large); 602 | } 603 | .ph5-m { 604 | padding-left: var(--spacing-extra-large); 605 | padding-right: var(--spacing-extra-large); 606 | } 607 | .ph6-m { 608 | padding-left: var(--spacing-extra-extra-large); 609 | padding-right: var(--spacing-extra-extra-large); 610 | } 611 | .ph7-m { 612 | padding-left: var(--spacing-extra-extra-extra-large); 613 | padding-right: var(--spacing-extra-extra-extra-large); 614 | } 615 | 616 | .ma0-m { margin: var(--spacing-none); } 617 | .ma1-m { margin: var(--spacing-extra-small); } 618 | .ma2-m { margin: var(--spacing-small); } 619 | .ma3-m { margin: var(--spacing-medium); } 620 | .ma4-m { margin: var(--spacing-large); } 621 | .ma5-m { margin: var(--spacing-extra-large); } 622 | .ma6-m { margin: var(--spacing-extra-extra-large); } 623 | .ma7-m { margin: var(--spacing-extra-extra-extra-large); } 624 | 625 | .ml0-m { margin-left: var(--spacing-none); } 626 | .ml1-m { margin-left: var(--spacing-extra-small); } 627 | .ml2-m { margin-left: var(--spacing-small); } 628 | .ml3-m { margin-left: var(--spacing-medium); } 629 | .ml4-m { margin-left: var(--spacing-large); } 630 | .ml5-m { margin-left: var(--spacing-extra-large); } 631 | .ml6-m { margin-left: var(--spacing-extra-extra-large); } 632 | .ml7-m { margin-left: var(--spacing-extra-extra-extra-large); } 633 | 634 | .mr0-m { margin-right: var(--spacing-none); } 635 | .mr1-m { margin-right: var(--spacing-extra-small); } 636 | .mr2-m { margin-right: var(--spacing-small); } 637 | .mr3-m { margin-right: var(--spacing-medium); } 638 | .mr4-m { margin-right: var(--spacing-large); } 639 | .mr5-m { margin-right: var(--spacing-extra-large); } 640 | .mr6-m { margin-right: var(--spacing-extra-extra-large); } 641 | .mr7-m { margin-right: var(--spacing-extra-extra-extra-large); } 642 | 643 | .mb0-m { margin-bottom: var(--spacing-none); } 644 | .mb1-m { margin-bottom: var(--spacing-extra-small); } 645 | .mb2-m { margin-bottom: var(--spacing-small); } 646 | .mb3-m { margin-bottom: var(--spacing-medium); } 647 | .mb4-m { margin-bottom: var(--spacing-large); } 648 | .mb5-m { margin-bottom: var(--spacing-extra-large); } 649 | .mb6-m { margin-bottom: var(--spacing-extra-extra-large); } 650 | .mb7-m { margin-bottom: var(--spacing-extra-extra-extra-large); } 651 | 652 | .mt0-m { margin-top: var(--spacing-none); } 653 | .mt1-m { margin-top: var(--spacing-extra-small); } 654 | .mt2-m { margin-top: var(--spacing-small); } 655 | .mt3-m { margin-top: var(--spacing-medium); } 656 | .mt4-m { margin-top: var(--spacing-large); } 657 | .mt5-m { margin-top: var(--spacing-extra-large); } 658 | .mt6-m { margin-top: var(--spacing-extra-extra-large); } 659 | .mt7-m { margin-top: var(--spacing-extra-extra-extra-large); } 660 | 661 | .mv0-m { 662 | margin-top: var(--spacing-none); 663 | margin-bottom: var(--spacing-none); 664 | } 665 | .mv1-m { 666 | margin-top: var(--spacing-extra-small); 667 | margin-bottom: var(--spacing-extra-small); 668 | } 669 | .mv2-m { 670 | margin-top: var(--spacing-small); 671 | margin-bottom: var(--spacing-small); 672 | } 673 | .mv3-m { 674 | margin-top: var(--spacing-medium); 675 | margin-bottom: var(--spacing-medium); 676 | } 677 | .mv4-m { 678 | margin-top: var(--spacing-large); 679 | margin-bottom: var(--spacing-large); 680 | } 681 | .mv5-m { 682 | margin-top: var(--spacing-extra-large); 683 | margin-bottom: var(--spacing-extra-large); 684 | } 685 | .mv6-m { 686 | margin-top: var(--spacing-extra-extra-large); 687 | margin-bottom: var(--spacing-extra-extra-large); 688 | } 689 | .mv7-m { 690 | margin-top: var(--spacing-extra-extra-extra-large); 691 | margin-bottom: var(--spacing-extra-extra-extra-large); 692 | } 693 | 694 | .mh0-m { 695 | margin-left: var(--spacing-none); 696 | margin-right: var(--spacing-none); 697 | } 698 | .mh1-m { 699 | margin-left: var(--spacing-extra-small); 700 | margin-right: var(--spacing-extra-small); 701 | } 702 | .mh2-m { 703 | margin-left: var(--spacing-small); 704 | margin-right: var(--spacing-small); 705 | } 706 | .mh3-m { 707 | margin-left: var(--spacing-medium); 708 | margin-right: var(--spacing-medium); 709 | } 710 | .mh4-m { 711 | margin-left: var(--spacing-large); 712 | margin-right: var(--spacing-large); 713 | } 714 | .mh5-m { 715 | margin-left: var(--spacing-extra-large); 716 | margin-right: var(--spacing-extra-large); 717 | } 718 | .mh6-m { 719 | margin-left: var(--spacing-extra-extra-large); 720 | margin-right: var(--spacing-extra-extra-large); 721 | } 722 | .mh7-m { 723 | margin-left: var(--spacing-extra-extra-extra-large); 724 | margin-right: var(--spacing-extra-extra-extra-large); 725 | } 726 | 727 | } 728 | 729 | @media (--breakpoint-large) { 730 | .pa0-l { padding: var(--spacing-none); } 731 | .pa1-l { padding: var(--spacing-extra-small); } 732 | .pa2-l { padding: var(--spacing-small); } 733 | .pa3-l { padding: var(--spacing-medium); } 734 | .pa4-l { padding: var(--spacing-large); } 735 | .pa5-l { padding: var(--spacing-extra-large); } 736 | .pa6-l { padding: var(--spacing-extra-extra-large); } 737 | .pa7-l { padding: var(--spacing-extra-extra-extra-large); } 738 | 739 | .pl0-l { padding-left: var(--spacing-none); } 740 | .pl1-l { padding-left: var(--spacing-extra-small); } 741 | .pl2-l { padding-left: var(--spacing-small); } 742 | .pl3-l { padding-left: var(--spacing-medium); } 743 | .pl4-l { padding-left: var(--spacing-large); } 744 | .pl5-l { padding-left: var(--spacing-extra-large); } 745 | .pl6-l { padding-left: var(--spacing-extra-extra-large); } 746 | .pl7-l { padding-left: var(--spacing-extra-extra-extra-large); } 747 | 748 | .pr0-l { padding-right: var(--spacing-none); } 749 | .pr1-l { padding-right: var(--spacing-extra-small); } 750 | .pr2-l { padding-right: var(--spacing-small); } 751 | .pr3-l { padding-right: var(--spacing-medium); } 752 | .pr4-l { padding-right: var(--spacing-large); } 753 | .pr5-l { padding-right: var(--spacing-extra-large); } 754 | .pr6-l { padding-right: var(--spacing-extra-extra-large); } 755 | .pr7-l { padding-right: var(--spacing-extra-extra-extra-large); } 756 | 757 | .pb0-l { padding-bottom: var(--spacing-none); } 758 | .pb1-l { padding-bottom: var(--spacing-extra-small); } 759 | .pb2-l { padding-bottom: var(--spacing-small); } 760 | .pb3-l { padding-bottom: var(--spacing-medium); } 761 | .pb4-l { padding-bottom: var(--spacing-large); } 762 | .pb5-l { padding-bottom: var(--spacing-extra-large); } 763 | .pb6-l { padding-bottom: var(--spacing-extra-extra-large); } 764 | .pb7-l { padding-bottom: var(--spacing-extra-extra-extra-large); } 765 | 766 | .pt0-l { padding-top: var(--spacing-none); } 767 | .pt1-l { padding-top: var(--spacing-extra-small); } 768 | .pt2-l { padding-top: var(--spacing-small); } 769 | .pt3-l { padding-top: var(--spacing-medium); } 770 | .pt4-l { padding-top: var(--spacing-large); } 771 | .pt5-l { padding-top: var(--spacing-extra-large); } 772 | .pt6-l { padding-top: var(--spacing-extra-extra-large); } 773 | .pt7-l { padding-top: var(--spacing-extra-extra-extra-large); } 774 | 775 | .pv0-l { 776 | padding-top: var(--spacing-none); 777 | padding-bottom: var(--spacing-none); 778 | } 779 | .pv1-l { 780 | padding-top: var(--spacing-extra-small); 781 | padding-bottom: var(--spacing-extra-small); 782 | } 783 | .pv2-l { 784 | padding-top: var(--spacing-small); 785 | padding-bottom: var(--spacing-small); 786 | } 787 | .pv3-l { 788 | padding-top: var(--spacing-medium); 789 | padding-bottom: var(--spacing-medium); 790 | } 791 | .pv4-l { 792 | padding-top: var(--spacing-large); 793 | padding-bottom: var(--spacing-large); 794 | } 795 | .pv5-l { 796 | padding-top: var(--spacing-extra-large); 797 | padding-bottom: var(--spacing-extra-large); 798 | } 799 | .pv6-l { 800 | padding-top: var(--spacing-extra-extra-large); 801 | padding-bottom: var(--spacing-extra-extra-large); 802 | } 803 | .pv7-l { 804 | padding-top: var(--spacing-extra-extra-extra-large); 805 | padding-bottom: var(--spacing-extra-extra-extra-large); 806 | } 807 | 808 | .ph0-l { 809 | padding-left: var(--spacing-none); 810 | padding-right: var(--spacing-none); 811 | } 812 | .ph1-l { 813 | padding-left: var(--spacing-extra-small); 814 | padding-right: var(--spacing-extra-small); 815 | } 816 | .ph2-l { 817 | padding-left: var(--spacing-small); 818 | padding-right: var(--spacing-small); 819 | } 820 | .ph3-l { 821 | padding-left: var(--spacing-medium); 822 | padding-right: var(--spacing-medium); 823 | } 824 | .ph4-l { 825 | padding-left: var(--spacing-large); 826 | padding-right: var(--spacing-large); 827 | } 828 | .ph5-l { 829 | padding-left: var(--spacing-extra-large); 830 | padding-right: var(--spacing-extra-large); 831 | } 832 | .ph6-l { 833 | padding-left: var(--spacing-extra-extra-large); 834 | padding-right: var(--spacing-extra-extra-large); 835 | } 836 | .ph7-l { 837 | padding-left: var(--spacing-extra-extra-extra-large); 838 | padding-right: var(--spacing-extra-extra-extra-large); 839 | } 840 | 841 | .ma0-l { margin: var(--spacing-none); } 842 | .ma1-l { margin: var(--spacing-extra-small); } 843 | .ma2-l { margin: var(--spacing-small); } 844 | .ma3-l { margin: var(--spacing-medium); } 845 | .ma4-l { margin: var(--spacing-large); } 846 | .ma5-l { margin: var(--spacing-extra-large); } 847 | .ma6-l { margin: var(--spacing-extra-extra-large); } 848 | .ma7-l { margin: var(--spacing-extra-extra-extra-large); } 849 | 850 | .ml0-l { margin-left: var(--spacing-none); } 851 | .ml1-l { margin-left: var(--spacing-extra-small); } 852 | .ml2-l { margin-left: var(--spacing-small); } 853 | .ml3-l { margin-left: var(--spacing-medium); } 854 | .ml4-l { margin-left: var(--spacing-large); } 855 | .ml5-l { margin-left: var(--spacing-extra-large); } 856 | .ml6-l { margin-left: var(--spacing-extra-extra-large); } 857 | .ml7-l { margin-left: var(--spacing-extra-extra-extra-large); } 858 | 859 | .mr0-l { margin-right: var(--spacing-none); } 860 | .mr1-l { margin-right: var(--spacing-extra-small); } 861 | .mr2-l { margin-right: var(--spacing-small); } 862 | .mr3-l { margin-right: var(--spacing-medium); } 863 | .mr4-l { margin-right: var(--spacing-large); } 864 | .mr5-l { margin-right: var(--spacing-extra-large); } 865 | .mr6-l { margin-right: var(--spacing-extra-extra-large); } 866 | .mr7-l { margin-right: var(--spacing-extra-extra-extra-large); } 867 | 868 | .mb0-l { margin-bottom: var(--spacing-none); } 869 | .mb1-l { margin-bottom: var(--spacing-extra-small); } 870 | .mb2-l { margin-bottom: var(--spacing-small); } 871 | .mb3-l { margin-bottom: var(--spacing-medium); } 872 | .mb4-l { margin-bottom: var(--spacing-large); } 873 | .mb5-l { margin-bottom: var(--spacing-extra-large); } 874 | .mb6-l { margin-bottom: var(--spacing-extra-extra-large); } 875 | .mb7-l { margin-bottom: var(--spacing-extra-extra-extra-large); } 876 | 877 | .mt0-l { margin-top: var(--spacing-none); } 878 | .mt1-l { margin-top: var(--spacing-extra-small); } 879 | .mt2-l { margin-top: var(--spacing-small); } 880 | .mt3-l { margin-top: var(--spacing-medium); } 881 | .mt4-l { margin-top: var(--spacing-large); } 882 | .mt5-l { margin-top: var(--spacing-extra-large); } 883 | .mt6-l { margin-top: var(--spacing-extra-extra-large); } 884 | .mt7-l { margin-top: var(--spacing-extra-extra-extra-large); } 885 | 886 | .mv0-l { 887 | margin-top: var(--spacing-none); 888 | margin-bottom: var(--spacing-none); 889 | } 890 | .mv1-l { 891 | margin-top: var(--spacing-extra-small); 892 | margin-bottom: var(--spacing-extra-small); 893 | } 894 | .mv2-l { 895 | margin-top: var(--spacing-small); 896 | margin-bottom: var(--spacing-small); 897 | } 898 | .mv3-l { 899 | margin-top: var(--spacing-medium); 900 | margin-bottom: var(--spacing-medium); 901 | } 902 | .mv4-l { 903 | margin-top: var(--spacing-large); 904 | margin-bottom: var(--spacing-large); 905 | } 906 | .mv5-l { 907 | margin-top: var(--spacing-extra-large); 908 | margin-bottom: var(--spacing-extra-large); 909 | } 910 | .mv6-l { 911 | margin-top: var(--spacing-extra-extra-large); 912 | margin-bottom: var(--spacing-extra-extra-large); 913 | } 914 | .mv7-l { 915 | margin-top: var(--spacing-extra-extra-extra-large); 916 | margin-bottom: var(--spacing-extra-extra-extra-large); 917 | } 918 | 919 | .mh0-l { 920 | margin-left: var(--spacing-none); 921 | margin-right: var(--spacing-none); 922 | } 923 | .mh1-l { 924 | margin-left: var(--spacing-extra-small); 925 | margin-right: var(--spacing-extra-small); 926 | } 927 | .mh2-l { 928 | margin-left: var(--spacing-small); 929 | margin-right: var(--spacing-small); 930 | } 931 | .mh3-l { 932 | margin-left: var(--spacing-medium); 933 | margin-right: var(--spacing-medium); 934 | } 935 | .mh4-l { 936 | margin-left: var(--spacing-large); 937 | margin-right: var(--spacing-large); 938 | } 939 | .mh5-l { 940 | margin-left: var(--spacing-extra-large); 941 | margin-right: var(--spacing-extra-large); 942 | } 943 | .mh6-l { 944 | margin-left: var(--spacing-extra-extra-large); 945 | margin-right: var(--spacing-extra-extra-large); 946 | } 947 | .mh7-l { 948 | margin-left: var(--spacing-extra-extra-extra-large); 949 | margin-right: var(--spacing-extra-extra-extra-large); 950 | } 951 | } 952 | 953 | --------------------------------------------------------------------------------