├── .npmrc ├── .gitignore ├── src ├── _styles.css ├── _code.css ├── _lists.css ├── _all.css ├── _forms.css ├── _debug-children.css ├── _box-sizing.css ├── _module-template.css ├── _text-decoration.css ├── _tables.css ├── _clears.css ├── _links.css ├── _container-type.css ├── _images.css ├── _debug-grid.css ├── _font-family.css ├── _z-index.css ├── _font-style.css ├── _media-queries.css ├── _white-space.css ├── _flex-wrap.css ├── _floats.css ├── _text-shadow.css ├── _word-break.css ├── _text-align.css ├── _gradients.css ├── _border-style.css ├── _visibility.css ├── _justify-self.css ├── _nested.css ├── _vertical-align.css ├── _utilities.css ├── _position.css ├── _text-transform.css ├── _flex-direction.css ├── _letter-spacing.css ├── _align-self.css ├── _align-items.css ├── _outlines.css ├── _gap.css ├── _grid-auto-flow.css ├── _flexbox.css ├── _order.css ├── _justify-content.css ├── _line-height.css ├── _align-content.css ├── _rotations.css ├── _opacity.css ├── _gap-row.css ├── _display.css ├── _background-position.css ├── _gap-column.css ├── _borders.css ├── _overflow.css ├── _font-weight.css ├── tachyons.css ├── _aspect-ratios.css ├── _border-widths.css ├── _filters.css ├── _hovers.css ├── _backdrop-filters.css ├── _typography.css ├── _box-shadow.css ├── _debug.css ├── _glass.css ├── _background-size.css ├── _coordinates.css ├── _max-widths.css ├── _normalize.css ├── _grid-row.css ├── _border-radius.css ├── _heights.css ├── _widths.css └── _type-scale.css ├── bower.json ├── license ├── package.json ├── code-of-conduct.md └── readme.md /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false -------------------------------------------------------------------------------- /.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/_code.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CODE 4 | 5 | */ 6 | 7 | .pre { 8 | max-width: 100%; 9 | overflow: auto; 10 | } -------------------------------------------------------------------------------- /src/_lists.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LISTS 4 | http://tachyons.io/docs/elements/lists/ 5 | 6 | */ 7 | 8 | .list, .liststyletype-none { list-style-type: none; } 9 | -------------------------------------------------------------------------------- /src/_all.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ALL 4 | 5 | MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/all 6 | 7 | */ 8 | 9 | .unset, 10 | .all-unset { all: unset; } 11 | .initial, 12 | .all-initial { all: initial; } 13 | .inherit, 14 | .all-inherit { all: inherit; } 15 | .revert, 16 | .all-revert { all: revert; } 17 | -------------------------------------------------------------------------------- /src/_forms.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FORMS 4 | 5 | */ 6 | 7 | .input-reset, 8 | .inputreset { 9 | -webkit-appearance: none; 10 | -moz-appearance: none; 11 | } 12 | 13 | .button-reset::-moz-focus-inner, 14 | .buttonreset::-moz-focus-inner, 15 | .input-reset::-moz-focus-inner, 16 | .inputreset::-moz-focus-inner { 17 | border: 0; 18 | padding: 0; 19 | } -------------------------------------------------------------------------------- /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 * { 12 | --debug-color: 128 0 90; 13 | --debug-opacity: .8; 14 | outline: 1px solid rbg(var(--debug-color, 128 0 90) / (--debug-opacity, .8)); 15 | } -------------------------------------------------------------------------------- /src/_box-sizing.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BOX SIZING 4 | 5 | */ 6 | 7 | *, 8 | *::before, 9 | *::after, 10 | .border-box, 11 | .boxsizing-borderbox, 12 | .border-box::before, 13 | .boxsizing-borderbox::before, 14 | .border-box::after, 15 | .boxsizing-borderbox::after { box-sizing: border-box; } 16 | 17 | .content-box, 18 | .boxsizing-contentbox { box-sizing: content-box; } 19 | -------------------------------------------------------------------------------- /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-small) { 12 | 13 | } 14 | 15 | @media (--breakpoint-medium) { 16 | 17 | } 18 | 19 | @media (--breakpoint-large) { 20 | 21 | } 22 | 23 | @media (--breakpoint-xlarge) { 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/_text-decoration.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT DECORATION 4 | Docs: http://tachyons.io/docs/typography/text-decoration/ 5 | 6 | */ 7 | 8 | .strike, 9 | .strikethrough, 10 | .linethrough, 11 | .textdecoration-linethrough { text-decoration: line-through; } 12 | 13 | .underline, 14 | .textdecoration-underline { text-decoration: underline; } 15 | 16 | .nounderline, 17 | .textdecoration-none { text-decoration: none; } 18 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tachyons", 3 | "description": "Functional CSS for humans", 4 | "main": "css/tachyons.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/_tables.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TABLES 4 | Docs: http://tachyons.io/docs/elements/tables/ 5 | 6 | */ 7 | 8 | .collapse, 9 | .bordercollapse-collapse { 10 | border-collapse: collapse; 11 | border-spacing: 0; 12 | } 13 | 14 | .stripedlight:nth-child(odd), 15 | .backgroundcolor-stripedlight:nth-child(odd) { 16 | background-color: var(--gray-10); 17 | } 18 | 19 | .striped--dark:nth-child(odd), 20 | .backgroundcolor-stripeddark:nth-child(odd) { 21 | background-color: var(--gray-0); 22 | } -------------------------------------------------------------------------------- /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 | .clearfix:before, 12 | .clearfix:after { content: " "; display: table; } 13 | .clearfix:after { clear: both; } 14 | .clearfix { *zoom: 1; } 15 | 16 | .clear-left { clear: left; } 17 | .clear-right { clear: right; } 18 | .clear-both { clear: both; } 19 | .clear-none { clear: none; } 20 | 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: all .15s ease-in; 11 | } 12 | 13 | .link:link, 14 | .link:visited { 15 | transition: all .15s ease-in; 16 | } 17 | .link:hover { 18 | transition: all .15s ease-in; 19 | } 20 | .link:active { 21 | transition: all .15s ease-in; 22 | } 23 | .link:focus { 24 | transition: all .15s ease-in; 25 | outline: 1px dotted currentColor; 26 | } 27 | 28 | -------------------------------------------------------------------------------- /src/_container-type.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CONTAINER-TYPE 4 | 5 | MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/container-type 6 | 7 | */ 8 | 9 | /* 10 | To be completed; waiting for variables 11 | to work on container queries (or need 12 | a postCSS workaround) 13 | */ 14 | 15 | .container-size, 16 | .containertype-size { container-type: size; } 17 | 18 | .root, 19 | .container-inline, 20 | .containertype-inlinesize { container-type: inline-size; } 21 | 22 | .container-normal, 23 | .containertype-normal { container-type: normal; } 24 | -------------------------------------------------------------------------------- /src/_images.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | IMAGES 4 | Docs: http://tachyons.io/docs/elements/images/ 5 | 6 | */ 7 | 8 | /* Responsive images! */ 9 | img { display: block; max-width: 100%; } 10 | 11 | .random-image, 12 | .backgroundimage-randomimage { background-image: url( https://source.unsplash.com/random/ ); background-size: cover; } 13 | .random-image-landscape, 14 | .backgroundimage-randomimagelandscape { background-image: url( https://source.unsplash.com/random/1920x1080 ); background-size: cover; } 15 | .random-image-portrait, 16 | .backgroundimage-randomimageportrait { background-image: url( https://source.unsplash.com/random/1080x1920 ); background-size: cover; } 17 | 18 | -------------------------------------------------------------------------------- /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 this class onto a parent element. 9 | 10 | */ 11 | 12 | .debug-grid { 13 | --grid-size: 16px; 14 | --grid-color: var(--magenta-9); 15 | 16 | background-image: 17 | repeating-linear-gradient(0deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size)), 18 | repeating-linear-gradient(90deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size)); 19 | background-size: 100% var(--grid-size); 20 | } -------------------------------------------------------------------------------- /src/_font-family.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FONT FAMILY GROUPS 4 | Docs: http://tachyons.io/docs/typography/font-family/ 5 | 6 | */ 7 | 8 | .fontfamily-heading { font-family: var(--font-family-heading, sans-serif); } 9 | .fontfamily-body { font-family: var(--font-family-body, sans-serif); } 10 | .fontfamily-monospace { font-family: var(--font-family-mono, monospace); } 11 | 12 | /* Legacy font stacks below */ 13 | 14 | .fontfamily-sansserif { 15 | font-family: -apple-system, BlinkMacSystemFont, 16 | 'avenir next', avenir, 17 | 'helvetica neue', helvetica, 18 | ubuntu, 19 | roboto, noto, 20 | 'segoe ui', arial, 21 | sans-serif; 22 | } 23 | .fontfamily-serif { 24 | font-family: georgia, 25 | times, 26 | serif; 27 | } -------------------------------------------------------------------------------- /src/_z-index.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Z-INDEX 4 | 5 | MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index 6 | Spec: http://www.w3.org/TR/CSS2/zindex.html 7 | Articles: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ 8 | 9 | Tips on extending: 10 | There might be a time worth using negative z-index values. 11 | Or if you are using tachyons with another project, you might need to 12 | adjust these values to suit your needs. 13 | 14 | */ 15 | 16 | .zindex-0 { z-index: 0; } 17 | .zindex-1 { z-index: 1; } 18 | .zindex-2 { z-index: 2; } 19 | .zindex-3 { z-index: 3; } 20 | .zindex-4 { z-index: 4; } 21 | .zindex-5 { z-index: 5; } 22 | 23 | .zindex-999 { z-index: 999; } 24 | .zindex-9999 { z-index: 9999; } 25 | 26 | .zindex-max { 27 | z-index: 2147483647; 28 | } 29 | 30 | .zindex-inherit { z-index: inherit; } 31 | .zindex-initial { z-index: initial; } 32 | .zindex-unset { z-index: unset; } 33 | -------------------------------------------------------------------------------- /src/_font-style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FONT STYLE 4 | Docs: http://tachyons.io/docs/typography/font-style/ 5 | 6 | */ 7 | 8 | .fontstyle-italic, .i { font-style: italic; } 9 | .fontstyle-normal { font-style: normal; } 10 | 11 | @media (--breakpoint-small) { 12 | .fontstyle-italic-mediaS, 13 | .i-mediaS { font-style: italic; } 14 | .fontstyle-normal-mediaS { font-style: normal; } 15 | } 16 | 17 | @media (--breakpoint-medium) { 18 | .fontstyle-italic-mediaM, 19 | .i-mediaM { font-style: italic; } 20 | .fontstyle-normal-mediaM { font-style: normal; } 21 | } 22 | 23 | @media (--breakpoint-large) { 24 | .fontstyle-italic-mediaL, 25 | .i-mediaL { font-style: italic; } 26 | .fontstyle-normal-mediaL { font-style: normal; } 27 | } 28 | 29 | @media (--breakpoint-xlarge) { 30 | .fontstyle-italic-mediaXL, 31 | .i-mediaXL { font-style: italic; } 32 | .fontstyle-normal-mediaXL { font-style: normal; } 33 | } 34 | -------------------------------------------------------------------------------- /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/_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 (min-width:30em) { 14 | .example-s { 15 | background-color: red; 16 | } 17 | } 18 | 19 | @media (min-width:48em) { 20 | .example-m { 21 | background-color: red; 22 | } 23 | } 24 | 25 | @media (min-width:64em) { 26 | .example-l { 27 | background-color: red; 28 | } 29 | } 30 | 31 | */ 32 | /* Media Queries */ 33 | @custom-media --breakpoint-small screen and (min-width: 30em); 34 | @custom-media --breakpoint-medium screen and (min-width: 48em); 35 | @custom-media --breakpoint-large screen and (min-width: 64em); 36 | @custom-media --breakpoint-xlarge screen and (min-width: 80em); -------------------------------------------------------------------------------- /src/_white-space.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WHITE SPACE 4 | 5 | */ 6 | 7 | 8 | .whitespace-normal { white-space: normal; } 9 | .whitespace-nowrap { white-space: nowrap; } 10 | .whitespace-pre { white-space: pre; } 11 | 12 | @media (--breakpoint-small) { 13 | .whitespace-normal-mediaS { white-space: normal; } 14 | .whitespace-nowrap-mediaS { white-space: nowrap; } 15 | .whitespace-pre-mediaS { white-space: pre; } 16 | } 17 | 18 | @media (--breakpoint-medium) { 19 | .whitespace-normal-mediaM { white-space: normal; } 20 | .whitespace-nowrap-mediaM { white-space: nowrap; } 21 | .whitespace-pre-mediaM { white-space: pre; } 22 | } 23 | 24 | @media (--breakpoint-large) { 25 | .whitespace-normal-mediaL { white-space: normal; } 26 | .whitespace-nowrap-mediaL { white-space: nowrap; } 27 | .whitespace-pre-mediaL { white-space: pre; } 28 | } 29 | 30 | @media (--breakpoint-xlarge) { 31 | .whitespace-normal-mediaXL { white-space: normal; } 32 | .whitespace-nowrap-mediaXL { white-space: nowrap; } 33 | .whitespace-pre-mediaXL { white-space: pre; } 34 | } 35 | 36 | -------------------------------------------------------------------------------- /src/_flex-wrap.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FLEX-WRAP 4 | 5 | */ 6 | 7 | .flexwrap-wrap { flex-wrap: wrap; } 8 | .flexwrap-nowrap { flex-wrap: nowrap; } 9 | .flexwrap-wrapreverse { flex-wrap: wrap-reverse; } 10 | 11 | @media (--breakpoint-small) { 12 | .flexwrap-wrap-mediaS { flex-wrap: wrap; } 13 | .flexwrap-nowrap-mediaS { flex-wrap: nowrap; } 14 | .flexwrap-wrapreverse-mediaS { flex-wrap: wrap-reverse; } 15 | } 16 | 17 | @media (--breakpoint-medium) { 18 | .flexwrap-wrap-mediaM { flex-wrap: wrap; } 19 | .flexwrap-nowrap-mediaM { flex-wrap: nowrap; } 20 | .flexwrap-wrapreverse-mediaM { flex-wrap: wrap-reverse; } 21 | } 22 | 23 | @media (--breakpoint-large) { 24 | .flexwrap-wrap-mediaL { flex-wrap: wrap; } 25 | .flexwrap-nowrap-mediaL { flex-wrap: nowrap; } 26 | .flexwrap-wrapreverse-mediaL { flex-wrap: wrap-reverse; } 27 | } 28 | 29 | @media (--breakpoint-xlarge) { 30 | .flexwrap-wrap-mediaXL { flex-wrap: wrap; } 31 | .flexwrap-nowrap-mediaXL { flex-wrap: nowrap; } 32 | .flexwrap-wrapreverse-mediaXL { flex-wrap: wrap-reverse; } 33 | } -------------------------------------------------------------------------------- /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 .clearfix 11 | 12 | */ 13 | 14 | 15 | 16 | .float-left { float: left; } 17 | .float-right { float: right } 18 | .float-none { float: none; } 19 | 20 | @media (--breakpoint-small) { 21 | .float-left-mediaS { float: left } 22 | .float-right-mediaS { float: right } 23 | .float-none-mediaS { float: none; } 24 | } 25 | 26 | @media (--breakpoint-medium) { 27 | .float-left-mediaM { float: left } 28 | .float-right-mediaM { float: right } 29 | .float-none-mediaM { float: none; } 30 | } 31 | 32 | @media (--breakpoint-large) { 33 | .float-left-mediaL { float: left } 34 | .float-right-mediaL { float: right } 35 | .float-none-mediaL { float: none; } 36 | } 37 | 38 | @media (--breakpoint-xlarge) { 39 | .float-left-mediaXL { float: left } 40 | .float-right-mediaXL { float: right } 41 | .float-none-mediaXL { float: none; } 42 | } 43 | -------------------------------------------------------------------------------- /src/_text-shadow.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT-SHADOW 4 | Docs: http://tachyons.io/docs/themes/text-shadow/ 5 | 6 | */ 7 | 8 | .textshadow-1 { text-shadow: rgb(var(--shadow-color)) -4px 4px 0px; } 9 | .textshadow-2 { text-shadow: rgb(var(--shadow-color)) -8px 8px 0px; } 10 | .textshadow-3 { text-shadow: rgb(var(--shadow-color) / var(--shadow-opacity ,.5)) -8px 8px 0px; } 11 | .textshadow-4 { text-shadow: rgba(var(--shadow-color) / var(--shadow-opacity, .5)) -4px 4px 8px; } 12 | .textshadow-5 { text-shadow: rgb(var(--shadow-color)) 2px 0px 0px, rgb(var(--shadow-color)) 0px 2px 0px, rgb(var(--shadow-color)) -2px 0px 0px, rgb(var(--shadow-color)) 0px -2px 0px, rgb(var(--shadow-color)) -2px -2px 0px, rgb(var(--shadow-color)) 2px -2px 0px, rgb(var(--shadow-color)) 2px 2px 0px, rgb(var(--shadow-color)) -2px 2px 0px; } 13 | .textshadow-6 { text-shadow: rgb(var(--shadow-color-invert)) 2px 0px 0px, rgb(var(--shadow-color-invert)) 0px 2px 0px, rgb(var(--shadow-color-invert)) -2px 0px 0px, rgb(var(--shadow-color-invert)) 0px -2px 0px, rgb(var(--shadow-color-invert)) -2px -2px 0px, rgb(var(--shadow-color-invert)) 2px -2px 0px, rgb(var(--shadow-color-invert)) 2px 2px 0px, rgb(var(--shadow-color-invert)) -2px 2px 0px; } 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/_word-break.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WORD BREAK 4 | 5 | */ 6 | 7 | .wordbreak-normal { word-break: normal; } 8 | .wordbreak-wrap, .wordbreak-breakall { word-break: break-all; } 9 | .wordbreak-nowrap, .wordbreak-keepall { word-break: keep-all; } 10 | 11 | @media (--breakpoint-small) { 12 | .wordbreak-normal-mediaS { word-break: normal; } 13 | .wordbreak-wrap-mediaS, .wordbreak-breakall-mediaS { word-break: break-all; } 14 | .wordbreak-nowrap-mediaS, .wordbreak-keepall-mediaS { word-break: keep-all; } 15 | } 16 | 17 | @media (--breakpoint-medium) { 18 | .wordbreak-normal-mediaM { word-break: normal; } 19 | .wordbreak-wrap-mediaM, .wordbreak-breakall-mediaM { word-break: break-all; } 20 | .wordbreak-nowrap-mediaM, .wordbreak-keepall-mediaM { word-break: keep-all; } 21 | } 22 | 23 | @media (--breakpoint-large) { 24 | .wordbreak-normal-mediaL { word-break: normal; } 25 | .wordbreak-wrap-mediaL, .wordbreak-breakall-mediaL { word-break: break-all; } 26 | .wordbreak-nowrap-mediaL, .wordbreak-keepall-mediaL { word-break: keep-all; } 27 | } 28 | 29 | @media (--breakpoint-xlarge) { 30 | .wordbreak-normal-mediaXL { word-break: normal; } 31 | .wordbreak-wrap-mediaXL, .wordbreak-breakall-mediaXL { word-break: break-all; } 32 | .wordbreak-nowrap-mediaXL, .wordbreak-keepall-mediaXL { word-break: keep-all; } 33 | } -------------------------------------------------------------------------------- /src/_text-align.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT ALIGN 4 | Docs: http://tachyons.io/docs/typography/text-align/ 5 | 6 | */ 7 | 8 | .textalign-left { text-align: left; } 9 | .textalign-right { text-align: right; } 10 | .textalign-center { text-align: center; } 11 | .textalign-justify { text-align: justify; } 12 | 13 | @media (--breakpoint-small) { 14 | .textalign-left-mediaS { text-align: left; } 15 | .textalign-right-mediaS { text-align: right; } 16 | .textalign-center-mediaS { text-align: center; } 17 | .textalign-justify-mediaS { text-align: justify; } 18 | } 19 | 20 | @media (--breakpoint-medium) { 21 | .textalign-left-mediaM { text-align: left; } 22 | .textalign-right-mediaM { text-align: right; } 23 | .textalign-center-mediaM { text-align: center; } 24 | .textalign-justify-mediaM { text-align: justify; } 25 | } 26 | 27 | @media (--breakpoint-large) { 28 | .textalign-left-mediaL { text-align: left; } 29 | .textalign-right-mediaL { text-align: right; } 30 | .textalign-center-mediaL { text-align: center; } 31 | .textalign-justify-mediaL { text-align: justify; } 32 | } 33 | 34 | @media (--breakpoint-xlarge) { 35 | .textalign-left-mediaXL { text-align: left; } 36 | .textalign-right-mediaXL { text-align: right; } 37 | .textalign-center-mediaXL { text-align: center; } 38 | .textalign-justify-mediaXL { text-align: justify; } 39 | } -------------------------------------------------------------------------------- /src/_gradients.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | GRADIENTS 4 | 5 | 6 | */ 7 | 8 | .gradient-1 { 9 | background: linear-gradient( 10 | var(--gradient-degree), 11 | var(--gradient-color-1), 12 | var(--gradient-color-2) 13 | ); 14 | } 15 | 16 | .gradient-2 { 17 | background: linear-gradient( 18 | var(--gradient-degree), 19 | var(--gradient-color-1) var(--gradient-stop), 20 | var(--gradient-color-2) var(--gradient-stop) 21 | ); 22 | } 23 | 24 | .gradient-3 { 25 | background: repeating-linear-gradient( 26 | var(--gradient-degree), 27 | transparent 0px, 28 | transparent var(--gradient-stripe-width), 29 | var(--gradient-color-1) var(--gradient-stripe-width), 30 | var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2)) 31 | ); 32 | } 33 | 34 | .gradient-4 { 35 | background: repeating-radial-gradient( 36 | circle, 37 | transparent 0px, 38 | transparent var(--gradient-stripe-width), 39 | var(--gradient-color-1) var(--gradient-stripe-width), 40 | var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2)) 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/_border-style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER STYLES 4 | Docs: http://tachyons.io/docs/themes/borders/ 5 | 6 | */ 7 | 8 | .borderstyle-dotted { border-style: dotted; } 9 | .borderstyle-dashed { border-style: dashed; } 10 | .borderstyle-solid { border-style: solid; } 11 | .borderstyle-none { border-style: none; } 12 | 13 | @media (--breakpoint-small) { 14 | .borderstyle-dotted-mediaS { border-style: dotted; } 15 | .borderstyle-dashed-mediaS { border-style: dashed; } 16 | .borderstyle-solid-mediaS { border-style: solid; } 17 | .borderstyle-none-mediaS { border-style: none; } 18 | } 19 | 20 | @media (--breakpoint-medium) { 21 | .borderstyle-dotted-mediaM { border-style: dotted; } 22 | .borderstyle-dashed-mediaM { border-style: dashed; } 23 | .borderstyle-solid-mediaM { border-style: solid; } 24 | .borderstyle-none-mediaM { border-style: none; } 25 | } 26 | 27 | @media (--breakpoint-large) { 28 | .borderstyle-dotted-mediaL { border-style: dotted; } 29 | .borderstyle-dashed-mediaL { border-style: dashed; } 30 | .borderstyle-solid-mediaL { border-style: solid; } 31 | .borderstyle-none-mediaL { border-style: none; } 32 | } 33 | 34 | @media (--breakpoint-xlarge) { 35 | .borderstyle-dotted-mediaXL { border-style: dotted; } 36 | .borderstyle-dashed-mediaXL { border-style: dashed; } 37 | .borderstyle-solid-mediaXL { border-style: solid; } 38 | .borderstyle-none-mediaXL { border-style: none; } 39 | } 40 | -------------------------------------------------------------------------------- /src/_visibility.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | VISIBILITY 4 | 5 | Text that is hidden but accessible 6 | Ref: https://accessibility.18f.gov/hidden-content/ 7 | Ref: https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/ 8 | 9 | */ 10 | 11 | .clip, 12 | .sr-only, 13 | .screen-reader-text { 14 | border: 0; 15 | clip: rect(0 0 0 0); 16 | height: 1px; 17 | margin: -1px; 18 | overflow: hidden; 19 | padding: 0; 20 | position: absolute; 21 | width: 1px; 22 | } 23 | 24 | @media (--breakpoint-small) { 25 | .clip-mediaS, 26 | .sr-only-mediaS, 27 | .screen-reader-text-mediaS { 28 | border: 0; 29 | clip: rect(0 0 0 0); 30 | height: 1px; 31 | margin: -1px; 32 | overflow: hidden; 33 | padding: 0; 34 | position: absolute; 35 | width: 1px; 36 | } 37 | } 38 | 39 | @media (--breakpoint-medium) { 40 | .clip-mediaM, 41 | .sr-only-mediaM, 42 | .screen-reader-text-mediaM { 43 | border: 0; 44 | clip: rect(0 0 0 0); 45 | height: 1px; 46 | margin: -1px; 47 | overflow: hidden; 48 | padding: 0; 49 | position: absolute; 50 | width: 1px; 51 | } 52 | } 53 | 54 | @media (--breakpoint-large) { 55 | .clip-mediaL, 56 | .sr-only-mediaL, 57 | .screen-reader-text-mediaL { 58 | border: 0; 59 | clip: rect(0 0 0 0); 60 | height: 1px; 61 | margin: -1px; 62 | overflow: hidden; 63 | padding: 0; 64 | position: absolute; 65 | width: 1px; 66 | } 67 | } -------------------------------------------------------------------------------- /src/_justify-self.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | JUSTIFY-SELF 4 | 5 | MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self 6 | 7 | */ 8 | 9 | .justifyself-start { justify-self: start; } 10 | .justifyself-end { justify-self: end; } 11 | .justifyself-center { justify-self: center; } 12 | .justifyself-stretch { justify-self: stretch; } 13 | 14 | 15 | @media (--breakpoint-small) { 16 | .justifyself-start-mediaS { justify-self: start; } 17 | .justifyself-end-mediaS { justify-self: end; } 18 | .justifyself-center-mediaS { justify-self: center; } 19 | .justifyself-stretch-mediaS { justify-self: stretch; } 20 | } 21 | 22 | @media (--breakpoint-medium) { 23 | .justifyself-start-mediaM { justify-self: start; } 24 | .justifyself-end-mediaM { justify-self: end; } 25 | .justifyself-center-mediaM { justify-self: center; } 26 | .justifyself-stretch-mediaM { justify-self: stretch; } 27 | } 28 | 29 | @media (--breakpoint-large) { 30 | .justifyself-start-mediaL { justify-self: start; } 31 | .justifyself-end-mediaL { justify-self: end; } 32 | .justifyself-center-mediaL { justify-self: center; } 33 | .justifyself-stretch-mediaL { justify-self: stretch; } 34 | } 35 | 36 | @media (--breakpoint-xlarge) { 37 | .justifyself-start-mediaXL { justify-self: start; } 38 | .justifyself-end-mediaXL { justify-self: end; } 39 | .justifyself-center-mediaXL { justify-self: center; } 40 | .justifyself-stretch-mediaXL { justify-self: stretch; } 41 | } -------------------------------------------------------------------------------- /src/_nested.css: -------------------------------------------------------------------------------- 1 | /* 2 | NESTED 3 | Tachyons module for styling nested elements 4 | that are generated by a cms. 5 | */ 6 | 7 | .nested-copy-line-height p, .nested-copy-lineheight p, 8 | .nested-copy-line-height ul, .nested-copy-lineheight ul, 9 | .nested-copy-line-height ol, .nested-copy-lineheight ol { 10 | line-height: var(--line-height-body, 1.5); 11 | } 12 | 13 | .nested-headline-line-height h1, .nested-headline-lineheight h1, 14 | .nested-headline-line-height h2, .nested-headline-lineheight h2, 15 | .nested-headline-line-height h3, .nested-headline-lineheight h3, 16 | .nested-headline-line-height h4, .nested-headline-lineheight h4, 17 | .nested-headline-line-height h5, .nested-headline-lineheight h5, 18 | .nested-headline-line-height h6, .nested-headline-lineheight h6 { 19 | line-height: var(--line-height-title, 1.25); 20 | } 21 | 22 | .nested-list-reset ul, 23 | .nested-list-reset ol { 24 | padding-left: 0; 25 | margin-left: 0; 26 | list-style-type: none; 27 | } 28 | 29 | .nested-copy-indent p+p { 30 | text-indent: 1em; 31 | margin-top: 0; 32 | margin-bottom: 0; 33 | } 34 | 35 | .nested-copy-separator p+p { 36 | margin-top: 1.5em; 37 | } 38 | 39 | .nested-img img { 40 | width: 100%; 41 | max-width: 100%; 42 | display: block; 43 | } 44 | 45 | .nested-links a { 46 | color: var(--blue-5); 47 | transition: color .15s ease-in; 48 | } 49 | 50 | .nested-links a:hover, 51 | .nested-links a:focus { 52 | color: var(--blue-3); 53 | transition: color .15s ease-in; 54 | } 55 | -------------------------------------------------------------------------------- /src/_vertical-align.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | VERTICAL ALIGN 4 | 5 | */ 6 | 7 | .verticalalign-baseline { vertical-align: baseline; } 8 | .verticalalign-middle { vertical-align: middle; } 9 | .verticalalign-top { vertical-align: top; } 10 | .verticalalign-bottom { vertical-align: bottom; } 11 | 12 | @media (--breakpoint-small) { 13 | .verticalalign-baseline-mediaS { vertical-align: baseline; } 14 | .verticalalign-middle-mediaS { vertical-align: middle; } 15 | .verticalalign-top-mediaS { vertical-align: top; } 16 | .verticalalign-bottom-mediaS { vertical-align: bottom; } 17 | } 18 | 19 | @media (--breakpoint-medium) { 20 | .verticalalign-baseline-mediaM { vertical-align: baseline; } 21 | .verticalalign-middle-mediaM { vertical-align: middle; } 22 | .verticalalign-top-mediaM { vertical-align: top; } 23 | .verticalalign-bottom-mediaM { vertical-align: bottom; } 24 | } 25 | 26 | @media (--breakpoint-large) { 27 | .verticalalign-baseline-mediaL { vertical-align: baseline; } 28 | .verticalalign-middle-mediaL { vertical-align: middle; } 29 | .verticalalign-top-mediaL { vertical-align: top; } 30 | .verticalalign-bottom-mediaL { vertical-align: bottom; } 31 | } 32 | 33 | @media (--breakpoint-xlarge) { 34 | .verticalalign-baseline-mediaXL { vertical-align: baseline; } 35 | .verticalalign-middle-mediaXL { vertical-align: middle; } 36 | .verticalalign-top-mediaXL { vertical-align: top; } 37 | .verticalalign-bottom-mediaXL { vertical-align: bottom; } 38 | } 39 | -------------------------------------------------------------------------------- /src/_utilities.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | UTILITIES 4 | 5 | */ 6 | 7 | .center, 8 | .marginhorizontal-auto { 9 | margin-right: auto; 10 | margin-left: auto; 11 | } 12 | .marginright-auto { 13 | margin-right: auto; 14 | } 15 | .marginleft-auto { 16 | margin-left: auto; 17 | } 18 | 19 | @media (--breakpoint-small){ 20 | .center-mediaS, 21 | .marginhorizontal-auto-mediaS { 22 | margin-right: auto; 23 | margin-left: auto; 24 | } 25 | .marginright-auto-mediaS { 26 | margin-right: auto; 27 | } 28 | .marginleft-auto-mediaS { 29 | margin-left: auto; 30 | } 31 | } 32 | 33 | @media (--breakpoint-medium){ 34 | .center-mediaM, 35 | .marginhorizontal-auto-mediaM { 36 | margin-right: auto; 37 | margin-left: auto; 38 | } 39 | .marginright-auto-mediaM { 40 | margin-right: auto; 41 | } 42 | .marginleft-auto-mediaM { 43 | margin-left: auto; 44 | } 45 | } 46 | 47 | @media (--breakpoint-large){ 48 | .center-mediaL, 49 | .marginhorizontal-auto-mediaL { 50 | margin-right: auto; 51 | margin-left: auto; 52 | } 53 | .marginright-auto-mediaL { 54 | margin-right: auto; 55 | } 56 | .marginleft-auto-mediaL { 57 | margin-left: auto; 58 | } 59 | } 60 | 61 | @media (--breakpoint-xlarge){ 62 | .center-mediaXL, 63 | .marginhorizontal-auto-mediaXL { 64 | margin-right: auto; 65 | margin-left: auto; 66 | } 67 | .marginright-auto-mediaXL { 68 | margin-right: auto; 69 | } 70 | .marginleft-auto-mediaXL { 71 | margin-left: auto; 72 | } 73 | } -------------------------------------------------------------------------------- /src/_position.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | POSITIONING 4 | Docs: http://tachyons.io/docs/layout/position/ 5 | 6 | */ 7 | 8 | .position-static { position: static; } 9 | .position-relative { position: relative; } 10 | .position-absolute { position: absolute; } 11 | .position-fixed { position: fixed; } 12 | .position-sticky { position: sticky; } 13 | 14 | @media (--breakpoint-small) { 15 | .position-static-mediaS { position: static; } 16 | .position-relative-mediaS { position: relative; } 17 | .position-absolute-mediaS { position: absolute; } 18 | .position-fixed-mediaS { position: fixed; } 19 | .position-sticky-mediaS { position: sticky; } 20 | } 21 | 22 | @media (--breakpoint-medium) { 23 | .position-static-mediaM { position: static; } 24 | .position-relative-mediaM { position: relative; } 25 | .position-absolute-mediaM { position: absolute; } 26 | .position-fixed-mediaM { position: fixed; } 27 | .position-sticky-mediaM { position: sticky; } 28 | } 29 | 30 | @media (--breakpoint-large) { 31 | .position-static-mediaL { position: static; } 32 | .position-relative-mediaL { position: relative; } 33 | .position-absolute-mediaL { position: absolute; } 34 | .position-fixed-mediaL { position: fixed; } 35 | .position-sticky-mediaL { position: sticky; } 36 | } 37 | 38 | @media (--breakpoint-xlarge) { 39 | .position-static-mediaXL { position: static; } 40 | .position-relative-mediaXL { position: relative; } 41 | .position-absolute-mediaXL { position: absolute; } 42 | .position-fixed-mediaXL { position: fixed; } 43 | .position-sticky-mediaXL { position: sticky; } 44 | } 45 | -------------------------------------------------------------------------------- /src/_text-transform.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT TRANSFORM 4 | Docs: http://tachyons.io/docs/typography/text-transform/ 5 | 6 | */ 7 | 8 | .texttransform-capitalize { text-transform: capitalize; } 9 | .texttransform-lowercase { text-transform: lowercase; } 10 | .texttransform-uppercase { text-transform: uppercase; } 11 | .texttransform-none { text-transform: none; } 12 | 13 | @media (--breakpoint-small) { 14 | .texttransform-capitalize-mediaS { text-transform: capitalize; } 15 | .texttransform-lowercase-mediaS { text-transform: lowercase; } 16 | .texttransform-uppercase-mediaS { text-transform: uppercase; } 17 | .texttransform-none-mediaS { text-transform: none; } 18 | } 19 | 20 | @media (--breakpoint-medium) { 21 | .texttransform-capitalize-mediaM { text-transform: capitalize; } 22 | .texttransform-lowercase-mediaM { text-transform: lowercase; } 23 | .texttransform-uppercase-mediaM { text-transform: uppercase; } 24 | .texttransform-none-mediaM { text-transform: none; } 25 | } 26 | 27 | @media (--breakpoint-large) { 28 | .texttransform-capitalize-mediaL { text-transform: capitalize; } 29 | .texttransform-lowercase-mediaL { text-transform: lowercase; } 30 | .texttransform-uppercase-mediaL { text-transform: uppercase; } 31 | .texttransform-none-mediaL { text-transform: none; } 32 | } 33 | 34 | @media (--breakpoint-xlarge) { 35 | .texttransform-capitalize-mediaXL { text-transform: capitalize; } 36 | .texttransform-lowercase-mediaXL { text-transform: lowercase; } 37 | .texttransform-uppercase-mediaXL { text-transform: uppercase; } 38 | .texttransform-none-mediaXL { text-transform: none; } 39 | } 40 | -------------------------------------------------------------------------------- /src/_flex-direction.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FLEX-DIRECTION 4 | 5 | */ 6 | 7 | .flexdirection-column { flex-direction: column; } 8 | .flexdirection-row { flex-direction: row; } 9 | .flexdirection-columnreverse { flex-direction: column-reverse; } 10 | .flexdirection-rowreverse { flex-direction: row-reverse; } 11 | 12 | @media (--breakpoint-small) { 13 | .flexdirection-column-mediaS { flex-direction: column; } 14 | .flexdirection-row-mediaS { flex-direction: row; } 15 | .flexdirection-columnreverse-mediaS { flex-direction: column-reverse; } 16 | .flexdirection-rowreverse-mediaS { flex-direction: row-reverse; } 17 | } 18 | @media (--breakpoint-medium) { 19 | .flexdirection-column-mediaM { flex-direction: column; } 20 | .flexdirection-row-mediaM { flex-direction: row; } 21 | .flexdirection-columnreverse-mediaM { flex-direction: column-reverse; } 22 | .flexdirection-rowreverse-mediaM { flex-direction: row-reverse; } 23 | } 24 | @media (--breakpoint-large) { 25 | .flexdirection-column-mediaL { flex-direction: column; } 26 | .flexdirection-row-mediaL { flex-direction: row; } 27 | .flexdirection-columnreverse-mediaL { flex-direction: column-reverse; } 28 | .flexdirection-rowreverse-mediaL { flex-direction: row-reverse; } 29 | } 30 | 31 | @media (--breakpoint-xlarge) { 32 | .flexdirection-column-mediaXL { flex-direction: column; } 33 | .flexdirection-row-mediaXL { flex-direction: row; } 34 | .flexdirection-columnreverse-mediaXL { flex-direction: column-reverse; } 35 | .flexdirection-rowreverse-mediaXL { flex-direction: row-reverse; } 36 | } -------------------------------------------------------------------------------- /src/_letter-spacing.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LETTER SPACING 4 | Docs: http://tachyons.io/docs/typography/tracking/ 5 | 6 | */ 7 | 8 | .letterspacing-tracked { letter-spacing: var( --letter-spacing-tracked, .1em ) } 9 | .letterspacing-tight { letter-spacing: var( --letter-spacing-tight, -0.05em ); } 10 | .letterspacing-mega { letter-spacing: var( --letter-spacing-large, .25em ) } 11 | 12 | @media (--breakpoint-small) { 13 | .letterspacing-tracked-mediaS { letter-spacing: var( --letter-spacing-tracked, .1em ) } 14 | .letterspacing-tight-media { letter-spacing: var( --letter-spacing-tight, -0.05em ); } 15 | .letterspacing-mega-mediaS { letter-spacing: var( --letter-spacing-large, .25em ) } 16 | } 17 | 18 | @media (--breakpoint-medium) { 19 | .letterspacing-tracked-mediaM { letter-spacing: var( --letter-spacing-tracked, .1em ) } 20 | .letterspacing-tight-mediaM { letter-spacing: var( --letter-spacing-tight, -0.05em ); } 21 | .letterspacing-mega-mediaM { letter-spacing: var( --letter-spacing-large, .25em ) } 22 | } 23 | 24 | @media (--breakpoint-large) { 25 | .letterspacing-tracked-mediaL { letter-spacing: var( --letter-spacing-tracked, .1em ) } 26 | .letterspacing-tight-mediaL { letter-spacing: var( --letter-spacing-tight, -0.05em ); } 27 | .letterspacing-mega-mediaL { letter-spacing: var( --letter-spacing-large, .25em ) } 28 | } 29 | 30 | @media (--breakpoint-xlarge) { 31 | .letterspacing-tracked-mediaXL { letter-spacing: var( --letter-spacing-tracked, .1em ) } 32 | .letterspacing-tight-mediaXL { letter-spacing: var( --letter-spacing-tight, -0.05em ); } 33 | .letterspacing-mega-mediaXL { letter-spacing: var( --letter-spacing-large, .25em ) } 34 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tachyons", 3 | "version": "5.0.0.alpha", 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 | "keywords": [ 13 | "UI", 14 | "UI design", 15 | "css", 16 | "oocss", 17 | "postcss", 18 | "functional css", 19 | "utility css", 20 | "design", 21 | "responsive", 22 | "performance" 23 | ], 24 | "license": "MIT", 25 | "devDependencies": { 26 | "brotli-size": "^4.0.0", 27 | "copy-files": "^0.1.0", 28 | "immutable-css-cli": "^1.1.1", 29 | "normalize.css": "^8.0.1", 30 | "tachyons-cli": "^1.3.3", 31 | "tachyons-modules": "^1.1.10", 32 | "watch": "^1.0.2" 33 | }, 34 | "contributors": [ 35 | { 36 | "name": "Adam Morse", 37 | "url": "https://mrmrs.cc" 38 | }, 39 | { 40 | "name": "John Otander", 41 | "url": "https://johnotander.com" 42 | }, 43 | { 44 | "name": "Jason Li", 45 | "url": "https://byjasonli.com" 46 | } 47 | ], 48 | "scripts": { 49 | "start": "npm run build:watch", 50 | "mutations": "immutable-css src/tachyons.css --strict", 51 | "build": "npm run build:css && npm run build:minify", 52 | "build:css": "tachyons src/tachyons.css --preserveVariables > css/tachyons-verbose.css", 53 | "build:minify": "tachyons src/tachyons.css --minify --preserveVariables > css/tachyons-verbose.min.css", 54 | "build:watch": "watch \"npm run build\" ./src/" 55 | }, 56 | "dependencies": { 57 | "brotli": "^1.3.3", 58 | "gzip-size": "^7.0.0" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/_align-self.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ALIGN-SELF 4 | 5 | */ 6 | 7 | .alignself-flexstart { align-self: flex-start; } 8 | .alignself-flexend { align-self: flex-end; } 9 | .alignself-center { align-self: center; } 10 | .alignself-baseline { align-self: baseline; } 11 | .alignself-stretch { align-self: stretch; } 12 | 13 | @media (--breakpoint-small) { 14 | .alignself-flexstart-mediaS { align-self: flex-start; } 15 | .alignself-flexend-mediaS { align-self: flex-end; } 16 | .alignself-center-mediaS { align-self: center; } 17 | .alignself-baseline-mediaS { align-self: baseline; } 18 | .alignself-stretch-mediaS { align-self: stretch; } 19 | } 20 | 21 | @media (--breakpoint-medium) { 22 | .alignself-flexstart-mediaM { align-self: flex-start; } 23 | .alignself-flexend-mediaM { align-self: flex-end; } 24 | .alignself-center-mediaM { align-self: center; } 25 | .alignself-baseline-mediaM { align-self: baseline; } 26 | .alignself-stretch-mediaM { align-self: stretch; } 27 | } 28 | 29 | @media (--breakpoint-large) { 30 | .alignself-flexstart-mediaL { align-self: flex-start; } 31 | .alignself-flexend-mediaL { align-self: flex-end; } 32 | .alignself-center-mediaL { align-self: center; } 33 | .alignself-baseline-mediaL { align-self: baseline; } 34 | .alignself-stretch-mediaL { align-self: stretch; } 35 | } 36 | 37 | @media (--breakpoint-xlarge) { 38 | .alignself-flexstart-mediaXL { align-self: flex-start; } 39 | .alignself-flexend-mediaXL { align-self: flex-end; } 40 | .alignself-center-mediaXL { align-self: center; } 41 | .alignself-baseline-mediaXL { align-self: baseline; } 42 | .alignself-stretch-mediaXL { align-self: stretch; } 43 | } 44 | -------------------------------------------------------------------------------- /src/_align-items.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ALIGN-ITEMS 4 | 5 | */ 6 | 7 | .alignitems-flexstart { align-items: flex-start; } 8 | .alignitems-flexend { align-items: flex-end; } 9 | .alignitems-center { align-items: center; } 10 | .alignitems-baseline { align-items: baseline; } 11 | .alignitems-stretch { align-items: stretch; } 12 | 13 | @media (--breakpoint-small) { 14 | .alignitems-flexstart-mediaS { align-items: flex-start; } 15 | .alignitems-flexend-mediaS { align-items: flex-end; } 16 | .alignitems-center-mediaS { align-items: center; } 17 | .alignitems-baseline-mediaS { align-items: baseline; } 18 | .alignitems-stretch-mediaS { align-items: stretch; } 19 | } 20 | 21 | @media (--breakpoint-medium) { 22 | .alignitems-flexstart-mediaM { align-items: flex-start; } 23 | .alignitems-flexend-mediaM { align-items: flex-end; } 24 | .alignitems-center-mediaM { align-items: center; } 25 | .alignitems-baseline-mediaM { align-items: baseline; } 26 | .alignitems-stretch-mediaM { align-items: stretch; } 27 | } 28 | 29 | @media (--breakpoint-large) { 30 | .alignitems-flexstart-mediaL { align-items: flex-start; } 31 | .alignitems-flexend-mediaL { align-items: flex-end; } 32 | .alignitems-center-mediaL { align-items: center; } 33 | .alignitems-baseline-mediaL { align-items: baseline; } 34 | .alignitems-stretch-mediaL { align-items: stretch; } 35 | } 36 | 37 | @media (--breakpoint-xlarge) { 38 | .alignitems-flexstart-mediaXL { align-items: flex-start; } 39 | .alignitems-flexend-mediaXL { align-items: flex-end; } 40 | .alignitems-center-mediaXL { align-items: center; } 41 | .alignitems-baseline-mediaXL { align-items: baseline; } 42 | .alignitems-stretch-mediaXL { align-items: stretch; } 43 | } -------------------------------------------------------------------------------- /src/_outlines.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | OUTLINES 4 | 5 | */ 6 | 7 | .outline { outline: var(--border-width, 1px) solid currentColor; } 8 | .outline-color { outline: var(--border-width, 1px) solid var(--border-color, gray); } 9 | .outline-transparent { outline: var(--border-width, 1px) solid transparent; } 10 | .outline-0 { outline: 0; } 11 | 12 | @media (--breakpoint-small) { 13 | .outline-mediaS { outline: var(--border-width, 1px) solid currentColor; } 14 | .outline-color-mediaS { outline: var(--border-width, 1px) solid var(--border-color, gray); } 15 | .outline-transparent-mediaS { outline: var(--border-width, 1px) solid transparent; } 16 | .outline-0-mediaS { outline: 0; } 17 | } 18 | 19 | @media (--breakpoint-medium) { 20 | .outline-mediaM { outline: var(--border-width, 1px) solid currentColor; } 21 | .outline-color-mediaM { outline: var(--border-width, 1px) solid var(--border-color, gray); } 22 | .outline-transparent-mediaM { outline: var(--border-width, 1px) solid transparent; } 23 | .outline-0-mediaM { outline: 0; } 24 | } 25 | 26 | @media (--breakpoint-large) { 27 | .outline-mediaL { outline: var(--border-width, 1px) solid currentColor; } 28 | .outline-color-mediaL { outline: var(--border-width, 1px) solid var(--border-color, gray); } 29 | .outline-transparent-mediaL { outline: var(--border-width, 1px) solid transparent; } 30 | .outline-0-mediaL { outline: 0; } 31 | } 32 | 33 | @media (--breakpoint-xlarge) { 34 | .outline-mediaXL { outline: var(--border-width, 1px) solid currentColor; } 35 | .outline-color-mediaXL { outline: var(--border-width, 1px) solid var(--border-color, gray); } 36 | .outline-transparent-mediaXL { outline: var(--border-width, 1px) solid transparent; } 37 | .outline-0-mediaXL { outline: 0; } 38 | } 39 | -------------------------------------------------------------------------------- /src/_gap.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | GAP: GRID AND FLEX SPACING 4 | Docs: http://tachyons.io/docs/layout/gap/ 5 | 6 | */ 7 | 8 | 9 | .gap-0 { gap: var(--spacing-0, 0); } 10 | .gap-1 { gap: var(--spacing-1, 4px); } 11 | .gap-2 { gap: var(--spacing-2, 8px); } 12 | .gap-3 { gap: var(--spacing-3, 16px); } 13 | .gap-4 { gap: var(--spacing-4, 32px); } 14 | .gap-5 { gap: var(--spacing-5, 64px); } 15 | .gap-6 { gap: var(--spacing-6, 128px); } 16 | .gap-7 { gap: var(--spacing-7, 256px); } 17 | 18 | @media (--breakpoint-small) { 19 | .gap-0-mediaS { gap: var(--spacing-0, 0); } 20 | .gap-1-mediaS { gap: var(--spacing-1, 4px); } 21 | .gap-2-mediaS { gap: var(--spacing-2, 8px); } 22 | .gap-3-mediaS { gap: var(--spacing-3, 16px); } 23 | .gap-4-mediaS { gap: var(--spacing-4, 32px); } 24 | .gap-5-mediaS { gap: var(--spacing-5, 64px); } 25 | .gap-6-mediaS { gap: var(--spacing-6, 128px); } 26 | .gap-7-mediaS { gap: var(--spacing-7, 256px); } 27 | } 28 | @media (--breakpoint-medium) { 29 | .gap-0-mediaM { gap: var(--spacing-0, 0); } 30 | .gap-1-mediaM { gap: var(--spacing-1, 4px); } 31 | .gap-2-mediaM { gap: var(--spacing-2, 8px); } 32 | .gap-3-mediaM { gap: var(--spacing-3, 16px); } 33 | .gap-4-mediaM { gap: var(--spacing-4, 32px); } 34 | .gap-5-mediaM { gap: var(--spacing-5, 64px); } 35 | .gap-6-mediaM { gap: var(--spacing-6, 128px); } 36 | .gap-7-mediaM { gap: var(--spacing-7, 256px); } 37 | } 38 | @media (--breakpoint-xlarge) { 39 | .gap-0-mediaXL { gap: var(--spacing-0, 0); } 40 | .gap-1-mediaXL { gap: var(--spacing-1, 4px); } 41 | .gap-2-mediaXL { gap: var(--spacing-2, 8px); } 42 | .gap-3-mediaXL { gap: var(--spacing-3, 16px); } 43 | .gap-4-mediaXL { gap: var(--spacing-4, 32px); } 44 | .gap-5-mediaXL { gap: var(--spacing-5, 64px); } 45 | .gap-6-mediaXL { gap: var(--spacing-6, 128px); } 46 | .gap-7-mediaXL { gap: var(--spacing-7, 256px); } 47 | } 48 | -------------------------------------------------------------------------------- /src/_grid-auto-flow.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Grid Auto Flow 4 | 5 | */ 6 | 7 | .gridautoflow-row { grid-auto-flow: row; } 8 | .gridautoflow-column { grid-auto-flow: column; } 9 | .gridautoflow-dense { grid-auto-flow: dense; } 10 | .gridautoflow-rowdense { grid-auto-flow: row dense; } 11 | .gridautoflow-columndense { grid-auto-flow: column dense; } 12 | 13 | 14 | @media (--breakpoint-small) { 15 | .gridautoflow-row-mediaS { grid-auto-flow: row; } 16 | .gridautoflow-column-mediaS { grid-auto-flow: column; } 17 | .gridautoflow-dense-mediaS { grid-auto-flow: dense; } 18 | .gridautoflow-rowdense-mediaS { grid-auto-flow: row dense; } 19 | .gridautoflow-columndense-mediaS { grid-auto-flow: column dense; } 20 | } 21 | 22 | @media (--breakpoint-medium) { 23 | .gridautoflow-row-mediaM { grid-auto-flow: row; } 24 | .gridautoflow-column-mediaM { grid-auto-flow: column; } 25 | .gridautoflow-dense-mediaM { grid-auto-flow: dense; } 26 | .gridautoflow-rowdense-mediaM { grid-auto-flow: row dense; } 27 | .gridautoflow-columndense-mediaM { grid-auto-flow: column dense; } 28 | } 29 | 30 | @media (--breakpoint-large) { 31 | .gridautoflow-row-mediaL { grid-auto-flow: row; } 32 | .gridautoflow-column-mediaL { grid-auto-flow: column; } 33 | .gridautoflow-dense-mediaL { grid-auto-flow: dense; } 34 | .gridautoflow-rowdense-mediaL { grid-auto-flow: row dense; } 35 | .gridautoflow-columndense-mediaL { grid-auto-flow: column dense; } 36 | } 37 | 38 | @media (--breakpoint-xlarge) { 39 | .gridautoflow-row-mediaXL { grid-auto-flow: row; } 40 | .gridautoflow-column-mediaXL { grid-auto-flow: column; } 41 | .gridautoflow-dense-mediaXL { grid-auto-flow: dense; } 42 | .gridautoflow-rowdense-mediaXL { grid-auto-flow: row dense; } 43 | .gridautoflow-columndense-mediaXL { grid-auto-flow: column dense; } 44 | } -------------------------------------------------------------------------------- /src/_flexbox.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FLEXBOX 4 | 5 | */ 6 | /* 1. Fix for Chrome 44 bug. 7 | * https://code.google.com/p/chromium/issues/detail?id=506893 */ 8 | .flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 9 | .flex-none { flex: none; } 10 | .flexgrow-0 { flex-grow: 0; } 11 | .flexgrow-1 { flex-grow: 1; } 12 | .flexshrink-0 { flex-shrink: 0; } 13 | .flexshrink-1 { flex-shrink: 1; } 14 | 15 | @media (--breakpoint-small) { 16 | .flex-auto-mediaS { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 17 | .flex-none-mediaS { flex: none; } 18 | .flexgrow-0-mediaS { flex-grow: 0; } 19 | .flexgrow-1-mediaS { flex-grow: 1; } 20 | .flexshrink-0-mediaS { flex-shrink: 0; } 21 | .flexshrink-1-mediaS { flex-shrink: 1; } 22 | } 23 | 24 | @media (--breakpoint-medium) { 25 | .flex-auto-mediaM { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 26 | .flex-none-mediaM { flex: none; } 27 | .flexgrow-0-mediaM { flex-grow: 0; } 28 | .flexgrow-1-mediaM { flex-grow: 1; } 29 | .flexshrink-0-mediaM { flex-shrink: 0; } 30 | .flexshrink-1-mediaM { flex-shrink: 1; } 31 | } 32 | 33 | @media (--breakpoint-large) { 34 | .flex-auto-mediaL { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 35 | .flex-none-mediaL { flex: none; } 36 | .flexgrow-0-mediaL { flex-grow: 0; } 37 | .flexgrow-1-mediaL { flex-grow: 1; } 38 | .flexshrink-0-mediaL { flex-shrink: 0; } 39 | .flexshrink-1-mediaL { flex-shrink: 1; } 40 | } 41 | 42 | @media (--breakpoint-xlarge) { 43 | .flex-auto-mediaXL { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 44 | .flex-none-mediaXL { flex: none; } 45 | .flexgrow-0-mediaXL { flex-grow: 0; } 46 | .flexgrow-1-mediaXL { flex-grow: 1; } 47 | .flexshrink-0-mediaXL { flex-shrink: 0; } 48 | .flexshrink-1-mediaXL { flex-shrink: 1; } 49 | } 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/_order.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ORDER 4 | 5 | */ 6 | 7 | .order-0 { order: 0; } 8 | .order-1 { order: 1; } 9 | .order-2 { order: 2; } 10 | .order-3 { order: 3; } 11 | .order-4 { order: 4; } 12 | .order-5 { order: 5; } 13 | .order-6 { order: 6; } 14 | .order-7 { order: 7; } 15 | .order-8 { order: 8; } 16 | .order-last, 17 | .order-99999 { order: 99999; } 18 | 19 | 20 | @media (--breakpoint-small) { 21 | .order-0-mediaS { order: 0; } 22 | .order-1-mediaS { order: 1; } 23 | .order-2-mediaS { order: 2; } 24 | .order-3-mediaS { order: 3; } 25 | .order-4-mediaS { order: 4; } 26 | .order-5-mediaS { order: 5; } 27 | .order-6-mediaS { order: 6; } 28 | .order-7-mediaS { order: 7; } 29 | .order-8-mediaS { order: 8; } 30 | .order-last-mediaS, 31 | .order-99999-mediaS { order: 99999; } 32 | } 33 | 34 | @media (--breakpoint-medium) { 35 | .order-0-mediaM { order: 0; } 36 | .order-1-mediaM { order: 1; } 37 | .order-2-mediaM { order: 2; } 38 | .order-3-mediaM { order: 3; } 39 | .order-4-mediaL { order: 4; } 40 | .order-5-mediaM { order: 5; } 41 | .order-6-mediaM { order: 6; } 42 | .order-7-mediaM { order: 7; } 43 | .order-8-mediaM { order: 8; } 44 | .order-last-mediaM, 45 | .order-99999-mediaM { order: 99999; } 46 | } 47 | 48 | @media (--breakpoint-large) { 49 | .order-0-mediaL { order: 0; } 50 | .order-1-mediaL { order: 1; } 51 | .order-2-mediaL { order: 2; } 52 | .order-3-mediaL { order: 3; } 53 | .order-4-mediaL { order: 4; } 54 | .order-5-mediaL { order: 5; } 55 | .order-6-mediaL { order: 6; } 56 | .order-7-mediaL { order: 7; } 57 | .order-8-mediaL { order: 8; } 58 | .order-last-mediaL, 59 | .order-99999-mediaL { order: 99999; } 60 | } 61 | 62 | @media (--breakpoint-xlarge) { 63 | .order-0-mediaXL { order: 0; } 64 | .order-1-mediaXL { order: 1; } 65 | .order-2-mediaXL { order: 2; } 66 | .order-3-mediaXL { order: 3; } 67 | .order-4-mediaXL { order: 4; } 68 | .order-5-mediaXL { order: 5; } 69 | .order-6-mediaXL { order: 6; } 70 | .order-7-mediaXL { order: 7; } 71 | .order-8-mediaXL { order: 8; } 72 | .order-last-mediaXL, 73 | .order-99999-mediaXL { order: 99999; } 74 | } 75 | -------------------------------------------------------------------------------- /src/_justify-content.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | JUSTIFY-CONTENT 4 | 5 | MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content 6 | 7 | */ 8 | 9 | .justifycontent-flexstart { justify-content: flex-start; } 10 | .justifycontent-flexend { justify-content: flex-end; } 11 | .justifycontent-center { justify-content: center; } 12 | .justifycontent-spacebetween { justify-content: space-between; } 13 | .justifycontent-spacearound { justify-content: space-around; } 14 | 15 | 16 | @media (--breakpoint-small) { 17 | .justifycontent-flexstart-mediaS { justify-content: flex-start; } 18 | .justifycontent-flexend-mediaS { justify-content: flex-end; } 19 | .justifycontent-center-mediaS { justify-content: center; } 20 | .justifycontent-spacebetween-mediaS { justify-content: space-between; } 21 | .justifycontent-spacearound-mediaS { justify-content: space-around; } 22 | } 23 | 24 | @media (--breakpoint-medium) { 25 | .justifycontent-flexstart-mediaM { justify-content: flex-start; } 26 | .justifycontent-flexend-mediaM { justify-content: flex-end; } 27 | .justifycontent-center-mediaM { justify-content: center; } 28 | .justifycontent-spacebetween-mediaM { justify-content: space-between; } 29 | .justifycontent-spacearound-mediaM { justify-content: space-around; } 30 | } 31 | 32 | @media (--breakpoint-large) { 33 | .justifycontent-flexstart-mediaL { justify-content: flex-start; } 34 | .justifycontent-flexend-mediaL { justify-content: flex-end; } 35 | .justifycontent-center-mediaL { justify-content: center; } 36 | .justifycontent-spacebetween-mediaL { justify-content: space-between; } 37 | .justifycontent-spacearound-mediaL { justify-content: space-around; } 38 | } 39 | 40 | @media (--breakpoint-xlarge) { 41 | .justifycontent-flexstart-mediaXL { justify-content: flex-start; } 42 | .justifycontent-flexend-mediaXL { justify-content: flex-end; } 43 | .justifycontent-center-mediaXL { justify-content: center; } 44 | .justifycontent-spacebetween-mediaXL { justify-content: space-between; } 45 | .justifycontent-spacearound-mediaXL { justify-content: space-around; } 46 | } 47 | 48 | -------------------------------------------------------------------------------- /src/_line-height.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LINE HEIGHT / LEADING 4 | Docs: http://tachyons.io/docs/typography/line-height 5 | 6 | */ 7 | 8 | .lineheight-solid { line-height: var(--line-height-solid, 1); } 9 | .lineheight-title { line-height: var(--line-height-title, 1.25); } 10 | .lineheight-body { line-height: var(--line-height-body, 1.5); } 11 | .lineheight-1 { line-height: 1; } 12 | .lineheight-1p25 { line-height: 1.25; } 13 | .lineheight-1p5 { line-height: 1.5; } 14 | 15 | @media (--breakpoint-small) { 16 | .lineheight-solid-mediaS { line-height: var(--line-height-solid, 1); } 17 | .lineheight-title-mediaS { line-height: var(--line-height-title, 1.25); } 18 | .lineheight-body-mediaS { line-height: var(--line-height-body, 1.5); } 19 | .lineheight-1-mediaS { line-height: 1; } 20 | .lineheight-1p25-mediaS { line-height: 1.25; } 21 | .lineheight-1p5-mediaS { line-height: 1.5; } 22 | } 23 | 24 | @media (--breakpoint-medium) { 25 | .lineheight-solid-mediaM { line-height: var(--line-height-solid, 1); } 26 | .lineheight-title-mediaM { line-height: var(--line-height-title, 1.25); } 27 | .lineheight-body-mediaM { line-height: var(--line-height-body, 1.5); } 28 | .lineheight-1-mediaM { line-height: 1; } 29 | .lineheight-1p25-mediaM { line-height: 1.25; } 30 | .lineheight-1p5-mediaM { line-height: 1.5; } 31 | } 32 | 33 | @media (--breakpoint-large) { 34 | .lineheight-solid-mediaL { line-height: var(--line-height-solid, 1); } 35 | .lineheight-title-mediaL { line-height: var(--line-height-title, 1.25); } 36 | .lineheight-body-mediaL { line-height: var(--line-height-body, 1.5); } 37 | .lineheight-1-mediaL { line-height: 1; } 38 | .lineheight-1p25-mediaL { line-height: 1.25; } 39 | .lineheight-1p5-mediaL { line-height: 1.5; } 40 | } 41 | 42 | @media (--breakpoint-xlarge) { 43 | .lineheight-solid-mediaXL { line-height: var(--line-height-solid, 1); } 44 | .lineheight-title-mediaXL { line-height: var(--line-height-title, 1.25); } 45 | .lineheight-body-mediaXL { line-height: var(--line-height-body, 1.5); } 46 | .lineheight-1-mediaXL { line-height: 1; } 47 | .lineheight-1p25-mediaXL { line-height: 1.25; } 48 | .lineheight-1p5-mediaXL { line-height: 1.5; } 49 | } 50 | -------------------------------------------------------------------------------- /src/_align-content.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ALIGN-CONTENT 4 | 5 | Media Query Extensions: 6 | -s = small 7 | -m = medium 8 | -l = large 9 | 10 | MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content 11 | 12 | */ 13 | 14 | .aligncontent-flexstart { align-content: flex-start; } 15 | .aligncontent-flexend { align-content: flex-end; } 16 | .aligncontent-center { align-content: center; } 17 | .aligncontent-spacebetween { align-content: space-between; } 18 | .aligncontent-spacearound { align-content: space-around; } 19 | .aligncontent-stretch { align-content: stretch; } 20 | 21 | 22 | @media (--breakpoint-small) { 23 | .aligncontent-flexstart-mediaS { align-content: flex-start; } 24 | .aligncontent-flexend-mediaS { align-content: flex-end; } 25 | .aligncontent-center-mediaS { align-content: center; } 26 | .aligncontent-spacebetween-mediaS { align-content: space-between; } 27 | .aligncontent-spacearound-mediaS { align-content: space-around; } 28 | .aligncontent-stretch-mediaS { align-content: stretch; } 29 | } 30 | 31 | @media (--breakpoint-medium) { 32 | .aligncontent-flexstart-mediaM { align-content: flex-start; } 33 | .aligncontent-flexend-mediaM { align-content: flex-end; } 34 | .aligncontent-center-mediaM { align-content: center; } 35 | .aligncontent-spacebetween-mediaM { align-content: space-between; } 36 | .aligncontent-spacearound-mediaM { align-content: space-around; } 37 | .aligncontent-stretch-mediaM { align-content: stretch; } 38 | } 39 | 40 | @media (--breakpoint-large) { 41 | .aligncontent-flexstart-mediaL { align-content: flex-start; } 42 | .aligncontent-flexend-mediaL { align-content: flex-end; } 43 | .aligncontent-center-mediaL { align-content: center; } 44 | .aligncontent-spacebetween-mediaL { align-content: space-between; } 45 | .aligncontent-spacearound-mediaL { align-content: space-around; } 46 | .aligncontent-stretch-mediaL { align-content: stretch; } 47 | } 48 | 49 | @media (--breakpoint-xlarge) { 50 | .aligncontent-flexstart-mediaXL { align-content: flex-start; } 51 | .aligncontent-flexend-mediaXL { align-content: flex-end; } 52 | .aligncontent-center-mediaXL { align-content: center; } 53 | .aligncontent-spacebetween-mediaXL { align-content: space-between; } 54 | .aligncontent-spacearound-mediaXL { align-content: space-around; } 55 | .aligncontent-stretch-mediaXL { align-content: stretch; } 56 | } -------------------------------------------------------------------------------- /src/_rotations.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ROTATIONS 4 | 5 | */ 6 | 7 | .transform-rotate45deg { transform: rotate(45deg); } 8 | .transform-rotate90deg { transform: rotate(90deg); } 9 | .transform-rotate135deg { transform: rotate(135deg); } 10 | .transform-rotate180deg { transform: rotate(180deg); } 11 | .transform-rotate225deg { transform: rotate(225deg); } 12 | .transform-rotate270deg { transform: rotate(270deg); } 13 | .transform-rotate315deg { transform: rotate(315deg); } 14 | 15 | @media (--breakpoint-small){ 16 | .transform-rotate45deg-mediaS { transform: rotate(45deg); } 17 | .transform-rotate90deg-mediaS { transform: rotate(90deg); } 18 | .transform-rotate135deg-mediaS { transform: rotate(135deg); } 19 | .transform-rotate180deg-mediaS { transform: rotate(180deg); } 20 | .transform-rotate225deg-mediaS { transform: rotate(225deg); } 21 | .transform-rotate270deg-mediaS { transform: rotate(270deg); } 22 | .transform-rotate315deg-mediaS { transform: rotate(315deg); } 23 | } 24 | 25 | @media (--breakpoint-medium){ 26 | .transform-rotate45deg-mediaM { transform: rotate(45deg); } 27 | .transform-rotate90deg-mediaM { transform: rotate(90deg); } 28 | .transform-rotate135deg-mediaM { transform: rotate(135deg); } 29 | .transform-rotate180deg-mediaM { transform: rotate(180deg); } 30 | .transform-rotate225deg-mediaM { transform: rotate(225deg); } 31 | .transform-rotate270deg-mediaM { transform: rotate(270deg); } 32 | .transform-rotate315deg-mediaM { transform: rotate(315deg); } 33 | } 34 | 35 | @media (--breakpoint-large){ 36 | .transform-rotate45deg-mediaL { transform: rotate(45deg); } 37 | .transform-rotate90deg-mediaL { transform: rotate(90deg); } 38 | .transform-rotate135deg-mediaL { transform: rotate(135deg); } 39 | .transform-rotate180deg-mediaL { transform: rotate(180deg); } 40 | .transform-rotate225deg-mediaL { transform: rotate(225deg); } 41 | .transform-rotate270deg-mediaL { transform: rotate(270deg); } 42 | .transform-rotate315deg-mediaL { transform: rotate(315deg); } 43 | } 44 | 45 | @media (--breakpoint-xlarge){ 46 | .transform-rotate45deg-mediaXL { transform: rotate(45deg); } 47 | .transform-rotate90deg-mediaXL { transform: rotate(90deg); } 48 | .transform-rotate135deg-mediaXL { transform: rotate(135deg); } 49 | .transform-rotate180deg-mediaXL { transform: rotate(180deg); } 50 | .transform-rotate225deg-mediaXL { transform: rotate(225deg); } 51 | .transform-rotate270deg-mediaXL { transform: rotate(270deg); } 52 | .transform-rotate315deg-mediaXL { transform: rotate(315deg); } 53 | } 54 | -------------------------------------------------------------------------------- /src/_opacity.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | OPACITY 4 | Docs: http://tachyons.io/docs/themes/opacity/ 5 | 6 | */ 7 | 8 | /* 9 | Tachyons Verbose implementation note: 10 | Not using step variables for now, because not 11 | sure how to make opacity-1 both the first step 12 | but also when opacity value is 1 (i.e. 100%) 13 | */ 14 | 15 | .opacity-1 { opacity: var(--opacity-1, 1); } 16 | .opacity-0p9 { opacity: var(--opacity-0p9,.9); } 17 | .opacity-0p8 { opacity: var(--opacity-10,.8); } 18 | .opacity-0p7 { opacity: var(--opacity-9,.7); } 19 | .opacity-0p6 { opacity: var(--opacity-8,.6); } 20 | .opacity-0p5 { opacity: var(--opacity-7,.5); } 21 | .opacity-0p4 { opacity: var(--opacity-6,.4); } 22 | .opacity-0p3 { opacity: var(--opacity-5,.3); } 23 | .opacity-0p2 { opacity: var(--opacity-4,.2); } 24 | .opacity-0p1 { opacity: var(--opacity-3,.1); } 25 | .opacity-0p05 { opacity: var(--opacity-2,.05); } 26 | .opacity-0p025 { opacity: var(--opacity-1,.025);} 27 | .opacity-0 { opacity: var(--opacity-0,0); } 28 | 29 | .opacity-hover-1 { opacity: var(--opacity-1, 1); } 30 | .opacity-hover-0p9 { opacity: var(--opacity-0p9,.9); } 31 | .opacity-hover-0p8 { opacity: var(--opacity-10,.8); } 32 | .opacity-hover-0p7 { opacity: var(--opacity-9,.7); } 33 | .opacity-hover-0p6 { opacity: var(--opacity-8,.6); } 34 | .opacity-hover-0p5 { opacity: var(--opacity-7,.5); } 35 | .opacity-hover-0p4 { opacity: var(--opacity-6,.4); } 36 | .opacity-hover-0p3 { opacity: var(--opacity-5,.3); } 37 | .opacity-hover-0p2 { opacity: var(--opacity-4,.2); } 38 | .opacity-hover-0p1 { opacity: var(--opacity-3,.1); } 39 | .opacity-hover-0p05 { opacity: var(--opacity-2,.05); } 40 | .opacity-hover-0p025 { opacity: var(--opacity-1,.025);} 41 | .opacity-hover-0 { opacity: var(--opacity-0,0); } 42 | 43 | .opacity-focus-1 { opacity: var(--opacity-1, 1); } 44 | .opacity-focus-0p9 { opacity: var(--opacity-0p9,.9); } 45 | .opacity-focus-0p8 { opacity: var(--opacity-10,.8); } 46 | .opacity-focus-0p7 { opacity: var(--opacity-9,.7); } 47 | .opacity-focus-0p6 { opacity: var(--opacity-8,.6); } 48 | .opacity-focus-0p5 { opacity: var(--opacity-7,.5); } 49 | .opacity-focus-0p4 { opacity: var(--opacity-6,.4); } 50 | .opacity-focus-0p3 { opacity: var(--opacity-5,.3); } 51 | .opacity-focus-0p2 { opacity: var(--opacity-4,.2); } 52 | .opacity-focus-0p1 { opacity: var(--opacity-3,.1); } 53 | .opacity-focus-0p05 { opacity: var(--opacity-2,.05); } 54 | .opacity-focus-0p025 { opacity: var(--opacity-1,.025);} 55 | .opacity-focus-0 { opacity: var(--opacity-0,0); } -------------------------------------------------------------------------------- /src/_gap-row.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | GAP: GRID AND FLEX SPACING 4 | Docs: http://tachyons.io/docs/layout/gap/ 5 | 6 | */ 7 | 8 | .rowgap-0 { row-gap: var(--spacing-0, 0); } 9 | .rowgap-1 { row-gap: var(--spacing-1, 4px); } 10 | .rowgap-2 { row-gap: var(--spacing-2, 8px); } 11 | .rowgap-3 { row-gap: var(--spacing-3, 16px); } 12 | .rowgap-4 { row-gap: var(--spacing-4, 32px); } 13 | .rowgap-5 { row-gap: var(--spacing-5, 64px); } 14 | .rowgap-6 { row-gap: var(--spacing-6, 128px); } 15 | .rowgap-7 { row-gap: var(--spacing-7, 256px); } 16 | 17 | @media (--breakpoint-small) { 18 | .rowgap-0-mediaS { row-gap: var(--spacing-0, 0); } 19 | .rowgap-1-mediaS { row-gap: var(--spacing-1, 4px); } 20 | .rowgap-2-mediaS { row-gap: var(--spacing-2, 8px); } 21 | .rowgap-3-mediaS { row-gap: var(--spacing-3, 16px); } 22 | .rowgap-4-mediaS { row-gap: var(--spacing-4, 32px); } 23 | .rowgap-5-mediaS { row-gap: var(--spacing-5, 64px); } 24 | .rowgap-6-mediaS { row-gap: var(--spacing-6, 128px); } 25 | .rowgap-7-mediaS { row-gap: var(--spacing-7, 256px); } 26 | } 27 | 28 | @media (--breakpoint-medium) { 29 | .rowgap-0-mediaM { row-gap: var(--spacing-0, 0); } 30 | .rowgap-1-mediaM { row-gap: var(--spacing-1, 4px); } 31 | .rowgap-2-mediaM { row-gap: var(--spacing-2, 8px); } 32 | .rowgap-3-mediaM { row-gap: var(--spacing-3, 16px); } 33 | .rowgap-4-mediaM { row-gap: var(--spacing-4, 32px); } 34 | .rowgap-5-mediaM { row-gap: var(--spacing-5, 64px); } 35 | .rowgap-6-mediaM { row-gap: var(--spacing-6, 128px); } 36 | .rowgap-7-mediaM { row-gap: var(--spacing-7, 256px); } 37 | } 38 | 39 | @media (--breakpoint-large) { 40 | .rowgap-0-mediaL { row-gap: var(--spacing-0, 0); } 41 | .rowgap-1-mediaL { row-gap: var(--spacing-1, 4px); } 42 | .rowgap-2-mediaL { row-gap: var(--spacing-2, 8px); } 43 | .rowgap-3-mediaL { row-gap: var(--spacing-3, 16px); } 44 | .rowgap-4-mediaL { row-gap: var(--spacing-4, 32px); } 45 | .rowgap-5-mediaL { row-gap: var(--spacing-5, 64px); } 46 | .rowgap-6-mediaL { row-gap: var(--spacing-6, 128px); } 47 | .rowgap-7-mediaL { row-gap: var(--spacing-7, 256px); } 48 | } 49 | 50 | @media (--breakpoint-xlarge) { 51 | .rowgap-0-mediaXL { row-gap: var(--spacing-0, 0); } 52 | .rowgap-1-mediaXL { row-gap: var(--spacing-1, 4px); } 53 | .rowgap-2-mediaXL { row-gap: var(--spacing-2, 8px); } 54 | .rowgap-3-mediaXL { row-gap: var(--spacing-3, 16px); } 55 | .rowgap-4-mediaXL { row-gap: var(--spacing-4, 32px); } 56 | .rowgap-5-mediaXL { row-gap: var(--spacing-5, 64px); } 57 | .rowgap-6-mediaXL { row-gap: var(--spacing-6, 128px); } 58 | .rowgap-7-mediaXL { row-gap: var(--spacing-7, 256px); } 59 | } 60 | -------------------------------------------------------------------------------- /src/_display.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISPLAY 4 | Docs: http://tachyons.io/docs/layout/display 5 | 6 | */ 7 | 8 | .display-none { display: none; } 9 | .display-inline { display: inline; } 10 | .display-block { display: block; } 11 | .display-inlineblock { display: inline-block; } 12 | .display-flex { display: flex; } 13 | .display-inlineflex { display: inline-flex; } 14 | .display-grid { display: grid; } 15 | .display-inlinegrid { display: inline-grid; } 16 | 17 | 18 | @media (--breakpoint-small) { 19 | .display-none-mediaS { display: none; } 20 | .display-inline-mediaS { display: inline; } 21 | .display-block-mediaS { display: block; } 22 | .display-inlineblock-mediaS { display: inline-block; } 23 | .display-flex-mediaS { display: flex; } 24 | .display-inlineflex-mediaS { display: inline-flex; } 25 | .display-grid-mediaS { display: grid; } 26 | .display-inlinegrid-mediaS { display: inline-grid; } 27 | } 28 | 29 | @media (--breakpoint-medium) { 30 | .display-none-mediaM { display: none; } 31 | .display-inline-mediaM { display: inline; } 32 | .display-block-mediaM { display: block; } 33 | .display-inlineblock-mediaM { display: inline-block; } 34 | .display-flex-mediaM { display: flex; } 35 | .display-inlineflex-mediaM { display: inline-flex; } 36 | .display-grid-mediaM { display: grid; } 37 | .display-inlinegrid-mediaM { display: inline-grid; } 38 | } 39 | 40 | @media (--breakpoint-large) { 41 | .display-none-mediaL { display: none; } 42 | .display-inline-mediaL { display: inline; } 43 | .display-block-mediaL { display: block; } 44 | .display-inlineblock-mediaL { display: inline-block; } 45 | .display-flex-mediaL { display: flex; } 46 | .display-inlineflex-mediaL { display: inline-flex; } 47 | .display-grid-mediaL { display: grid; } 48 | .display-inlinegrid-mediaL { display: inline-grid; } 49 | } 50 | 51 | @media (--breakpoint-xlarge) { 52 | .display-none-mediaXL { display: none; } 53 | .display-inline-mediaXL { display: inline; } 54 | .display-block-mediaXL { display: block; } 55 | .display-inlineblock-mediaXL { display: inline-block; } 56 | .display-flex-mediaXL { display: flex; } 57 | .display-inlineflex-mediaXL { display: inline-flex; } 58 | .display-grid-mediaXL { display: grid; } 59 | .display-inlinegrid-mediaXL { display: inline-grid; } 60 | } -------------------------------------------------------------------------------- /src/_background-position.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BACKGROUND POSITION 4 | 5 | */ 6 | 7 | .backgroundrepeat-norepeat { background-repeat: no-repeat; } 8 | .backgroundposition-centercenter { background-position: center center; } 9 | .backgroundposition-topcenter { background-position: top center; } 10 | .backgroundposition-centerright { background-position: center right; } 11 | .backgroundposition-bottomcenter { background-position: bottom center; } 12 | .backgroundposition-centerleft { background-position: center left; } 13 | 14 | @media (--breakpoint-small) { 15 | .backgroundrepeat-norepeat-mediaS { background-repeat: no-repeat; } 16 | .backgroundposition-centercenter-mediaS { background-position: center center; } 17 | .backgroundposition-topcenter-mediaS { background-position: top center; } 18 | .backgroundposition-centerright-mediaS { background-position: center right; } 19 | .backgroundposition-bottomcenter-mediaS { background-position: bottom center; } 20 | .backgroundposition-centerleft-mediaS { background-position: center left; } 21 | } 22 | 23 | @media (--breakpoint-medium) { 24 | .backgroundrepeat-norepeat-mediaM { background-repeat: no-repeat; } 25 | .backgroundposition-centercenter-mediaM { background-position: center center; } 26 | .backgroundposition-topcenter-mediaM { background-position: top center; } 27 | .backgroundposition-centerright-mediaM { background-position: center right; } 28 | .backgroundposition-bottomcenter-mediaM { background-position: bottom center; } 29 | .backgroundposition-centerleft-mediaM { background-position: center left; } 30 | } 31 | 32 | @media (--breakpoint-large) { 33 | .backgroundrepeat-norepeat-mediaL { background-repeat: no-repeat; } 34 | .backgroundposition-centercenter-mediaL { background-position: center center; } 35 | .backgroundposition-topcenter-mediaL { background-position: top center; } 36 | .backgroundposition-centerright-mediaL { background-position: center right; } 37 | .backgroundposition-bottomcenter-mediaL { background-position: bottom center; } 38 | .backgroundposition-centerleft-mediaL { background-position: center left; } 39 | 40 | } 41 | 42 | @media (--breakpoint-xlarge) { 43 | .backgroundrepeat-norepeat-mediaXL { background-repeat: no-repeat; } 44 | .backgroundposition-centercenter-mediaXL { background-position: center center; } 45 | .backgroundposition-topcenter-mediaXL { background-position: top center; } 46 | .backgroundposition-centerright-mediaXL { background-position: center right; } 47 | .backgroundposition-bottomcenter-mediaXL { background-position: bottom center; } 48 | .backgroundposition-centerleft-mediaXL { background-position: center left; } 49 | 50 | } -------------------------------------------------------------------------------- /src/_gap-column.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | GAP: GRID AND FLEX SPACING 4 | Docs: http://tachyons.io/docs/layout/gap/ 5 | 6 | */ 7 | 8 | .columngap-0 { column-gap: var(--spacing-0, 0); } 9 | .columngap-1 { column-gap: var(--spacing-1, 4px); } 10 | .columngap-2 { column-gap: var(--spacing-2, 8px); } 11 | .columngap-3 { column-gap: var(--spacing-3, 16px); } 12 | .columngap-4 { column-gap: var(--spacing-4, 32px); } 13 | .columngap-5 { column-gap: var(--spacing-5, 64px); } 14 | .columngap-6 { column-gap: var(--spacing-6, 128px); } 15 | .columngap-7 { column-gap: var(--spacing-7, 256px); } 16 | 17 | @media (--breakpoint-small) { 18 | .columngap-0-mediaS { column-gap: var(--spacing-0, 0); } 19 | .columngap-1-mediaS { column-gap: var(--spacing-1, 4px); } 20 | .columngap-2-mediaS { column-gap: var(--spacing-2, 8px); } 21 | .columngap-3-mediaS { column-gap: var(--spacing-3, 16px); } 22 | .columngap-4-mediaS { column-gap: var(--spacing-4, 32px); } 23 | .columngap-5-mediaS { column-gap: var(--spacing-5, 64px); } 24 | .columngap-6-mediaS { column-gap: var(--spacing-6, 128px); } 25 | .columngap-7-mediaS { column-gap: var(--spacing-7, 256px); } 26 | } 27 | 28 | @media (--breakpoint-medium) { 29 | .columngap-0-mediaM { column-gap: var(--spacing-0, 0); } 30 | .columngap-1-mediaM { column-gap: var(--spacing-1, 4px); } 31 | .columngap-2-mediaM { column-gap: var(--spacing-2, 8px); } 32 | .columngap-3-mediaM { column-gap: var(--spacing-3, 16px); } 33 | .columngap-4-mediaM { column-gap: var(--spacing-4, 32px); } 34 | .columngap-5-mediaM { column-gap: var(--spacing-5, 64px); } 35 | .columngap-6-mediaM { column-gap: var(--spacing-6, 128px); } 36 | .columngap-7-mediaM { column-gap: var(--spacing-7, 256px); } 37 | } 38 | 39 | @media (--breakpoint-large) { 40 | .columngap-0-mediaL { column-gap: var(--spacing-0, 0); } 41 | .columngap-1-mediaL { column-gap: var(--spacing-1, 4px); } 42 | .columngap-2-mediaL { column-gap: var(--spacing-2, 8px); } 43 | .columngap-3-mediaL { column-gap: var(--spacing-3, 16px); } 44 | .columngap-4-mediaL { column-gap: var(--spacing-4, 32px); } 45 | .columngap-5-mediaL { column-gap: var(--spacing-5, 64px); } 46 | .columngap-6-mediaL { column-gap: var(--spacing-6, 128px); } 47 | .columngap-7-mediaL { column-gap: var(--spacing-7, 256px); } 48 | } 49 | 50 | @media (--breakpoint-xlarge) { 51 | .columngap-0-mediaXL { column-gap: var(--spacing-0, 0); } 52 | .columngap-1-mediaXL { column-gap: var(--spacing-1, 4px); } 53 | .columngap-2-mediaXL { column-gap: var(--spacing-2, 8px); } 54 | .columngap-3-mediaXL { column-gap: var(--spacing-3, 16px); } 55 | .columngap-4-mediaXL { column-gap: var(--spacing-4, 32px); } 56 | .columngap-5-mediaXL { column-gap: var(--spacing-5, 64px); } 57 | .columngap-6-mediaXL { column-gap: var(--spacing-6, 128px); } 58 | .columngap-7-mediaXL { column-gap: var(--spacing-7, 256px); } 59 | } -------------------------------------------------------------------------------- /src/_borders.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER BASE 4 | Docs: http://tachyons.io/docs/themes/borders/ 5 | 6 | */ 7 | 8 | .border-all { border-style: solid; border-width: var( --border-width, 1px ); } 9 | .border-top { border-top-style: solid; border-top-width: var( --border-width, 1px ); } 10 | .border-right { border-right-style: solid; border-right-width: var( --border-width, 1px ); } 11 | .border-bottom { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); } 12 | .border-left { border-left-style: solid; border-left-width: var( --border-width, 1px ); } 13 | .border-none { border-style: none; border-width: 0; } 14 | 15 | @media (--breakpoint-small) { 16 | .border-all-mediaS { border-style: solid; border-width: var( --border-width, 1px ); } 17 | .border-top-mediaS { border-top-style: solid; border-top-width: var( --border-width, 1px ); } 18 | .border-right-mediaS { border-right-style: solid; border-right-width: var( --border-width, 1px ); } 19 | .border-bottom-mediaS { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); } 20 | .border-left-mediaS { border-left-style: solid; border-left-width: var( --border-width, 1px ); } 21 | .border-none-mediaS { border-style: none; border-width: 0; } 22 | } 23 | 24 | @media (--breakpoint-medium) { 25 | .border-all-mediaM { border-style: solid; border-width: var( --border-width, 1px ); } 26 | .border-top-mediaM { border-top-style: solid; border-top-width: var( --border-width, 1px ); } 27 | .border-right-mediaM { border-right-style: solid; border-right-width: var( --border-width, 1px ); } 28 | .border-bottom-mediaM { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); } 29 | .border-left-mediaM { border-left-style: solid; border-left-width: var( --border-width, 1px ); } 30 | .border-none-mediaM { border-style: none; border-width: 0; } 31 | } 32 | 33 | @media (--breakpoint-large) { 34 | .border-all-mediaL { border-style: solid; border-width: var( --border-width, 1px ); } 35 | .border-top-mediaL { border-top-style: solid; border-top-width: var( --border-width, 1px ); } 36 | .border-right-mediaL { border-right-style: solid; border-right-width: var( --border-width, 1px ); } 37 | .border-bottom-mediaL { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); } 38 | .border-left-mediaL { border-left-style: solid; border-left-width: var( --border-width, 1px ); } 39 | .border-none-mediaL { border-style: none; border-width: 0; } 40 | } 41 | 42 | @media (--breakpoint-xlarge) { 43 | .border-all-mediaXL { border-style: solid; border-width: var( --border-width, 1px ); } 44 | .border-top-mediaXL { border-top-style: solid; border-top-width: var( --border-width, 1px ); } 45 | .border-right-mediaXL { border-right-style: solid; border-right-width: var( --border-width, 1px ); } 46 | .border-bottom-mediaXL { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); } 47 | .border-left-mediaXL { border-left-style: solid; border-left-width: var( --border-width, 1px ); } 48 | .border-none-mediaXL { border-style: none; border-width: 0; } 49 | } -------------------------------------------------------------------------------- /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/_overflow.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | OVERFLOW 4 | 5 | */ 6 | 7 | .overflow-visible { overflow: visible; } 8 | .overflow-hidden { overflow: hidden; } 9 | .overflow-scroll { overflow: scroll; } 10 | .overflow-auto { overflow: auto; } 11 | 12 | .overflowx-visible { overflow-x: visible; } 13 | .overflowx-hidden { overflow-x: hidden; } 14 | .overflowx-scroll { overflow-x: scroll; } 15 | .overflowx-auto { overflow-x: auto; } 16 | 17 | .overflowy-visible { overflow-y: visible; } 18 | .overflowy-hidden { overflow-y: hidden; } 19 | .overflowy-scroll { overflow-y: scroll; } 20 | .overflowy-auto { overflow-y: auto; } 21 | 22 | @media (--breakpoint-small) { 23 | .overflow-visible-mediaS { overflow: visible; } 24 | .overflow-hidden-mediaS { overflow: hidden; } 25 | .overflow-scroll-mediaS { overflow: scroll; } 26 | .overflow-auto-mediaS { overflow: auto; } 27 | 28 | .overflowx-visible-mediaS { overflow-x: visible; } 29 | .overflowx-hidden-mediaS { overflow-x: hidden; } 30 | .overflowx-scroll-mediaS { overflow-x: scroll; } 31 | .overflowx-auto-mediaS { overflow-x: auto; } 32 | 33 | .overflowy-visible-mediaS { overflow-y: visible; } 34 | .overflowy-hidden-mediaS { overflow-y: hidden; } 35 | .overflowy-scroll-mediaS { overflow-y: scroll; } 36 | .overflowy-auto-mediaS { overflow-y: auto; } 37 | } 38 | 39 | @media (--breakpoint-medium) { 40 | .overflow-visible-mediaM { overflow: visible; } 41 | .overflow-hidden-mediaM { overflow: hidden; } 42 | .overflow-scroll-mediaM { overflow: scroll; } 43 | .overflow-auto-mediaM { overflow: auto; } 44 | 45 | .overflowx-visible-mediaM { overflow-x: visible; } 46 | .overflowx-hidden-mediaM { overflow-x: hidden; } 47 | .overflowx-scroll-mediaM { overflow-x: scroll; } 48 | .overflowx-auto-mediaM { overflow-x: auto; } 49 | 50 | .overflowy-visible-mediaM { overflow-y: visible; } 51 | .overflowy-hidden-mediaM { overflow-y: hidden; } 52 | .overflowy-scroll-mediaM { overflow-y: scroll; } 53 | .overflowy-auto-mediaM { overflow-y: auto; } 54 | } 55 | 56 | @media (--breakpoint-large) { 57 | .overflow-visible-mediaL { overflow: visible; } 58 | .overflow-hidden-mediaL { overflow: hidden; } 59 | .overflow-scroll-mediaL { overflow: scroll; } 60 | .overflow-auto-mediaL { overflow: auto; } 61 | 62 | .overflowx-visible-mediaL { overflow-x: visible; } 63 | .overflowx-hidden-mediaL { overflow-x: hidden; } 64 | .overflowx-scroll-mediaL { overflow-x: scroll; } 65 | .overflowx-auto-mediaL { overflow-x: auto; } 66 | 67 | .overflowy-visible-mediaL { overflow-y: visible; } 68 | .overflowy-hidden-mediaL { overflow-y: hidden; } 69 | .overflowy-scroll-mediaL { overflow-y: scroll; } 70 | .overflowy-auto-mediaL { overflow-y: auto; } 71 | } 72 | 73 | @media (--breakpoint-xlarge) { 74 | .overflow-visible-mediaXL { overflow: visible; } 75 | .overflow-hidden-mediaXL { overflow: hidden; } 76 | .overflow-scroll-mediaXL { overflow: scroll; } 77 | .overflow-auto-mediaXL { overflow: auto; } 78 | 79 | .overflowx-visible-mediaXL { overflow-x: visible; } 80 | .overflowx-hidden-mediaXL { overflow-x: hidden; } 81 | .overflowx-scroll-mediaXL { overflow-x: scroll; } 82 | .overflowx-auto-mediaXL { overflow-x: auto; } 83 | 84 | .overflowy-visible-mediaXL { overflow-y: visible; } 85 | .overflowy-hidden-mediaXL { overflow-y: hidden; } 86 | .overflowy-scroll-mediaXL { overflow-y: scroll; } 87 | .overflowy-auto-mediaXL { overflow-y: auto; } 88 | } 89 | -------------------------------------------------------------------------------- /src/_font-weight.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FONT WEIGHT 4 | Docs: http://tachyons.io/docs/typography/font-weight/ 5 | 6 | */ 7 | 8 | .normal, .fontweight-normal { font-weight: normal; } 9 | .b, .fontweight-bold { font-weight: bold; } 10 | .fontweight-100 { font-weight: 100; } 11 | .fontweight-200 { font-weight: 200; } 12 | .fontweight-300 { font-weight: 300; } 13 | .fontweight-400 { font-weight: 400; } 14 | .fontweight-500 { font-weight: 500; } 15 | .fontweight-600 { font-weight: 600; } 16 | .fontweight-700 { font-weight: 700; } 17 | .fontweight-800 { font-weight: 800; } 18 | .fontweight-900 { font-weight: 900; } 19 | 20 | 21 | @media (--breakpoint-small) { 22 | .normal-mediaS, .fontweight-normal-mediaS { font-weight: normal; } 23 | .b-mediaS, .fontweight-bold-mediaS { font-weight: bold; } 24 | .fontweight-100-mediaS { font-weight: 100; } 25 | .fontweight-200-mediaS { font-weight: 200; } 26 | .fontweight-300-mediaS { font-weight: 300; } 27 | .fontweight-400-mediaS { font-weight: 400; } 28 | .fontweight-500-mediaS { font-weight: 500; } 29 | .fontweight-600-mediaS { font-weight: 600; } 30 | .fontweight-700-mediaS { font-weight: 700; } 31 | .fontweight-800-mediaS { font-weight: 800; } 32 | .fontweight-900-mediaS { font-weight: 900; } 33 | } 34 | 35 | @media (--breakpoint-medium) { 36 | .normal-mediaM, .fontweight-normal-mediaM { font-weight: normal; } 37 | .b-mediaM, .fontweight-bold-mediaM { font-weight: bold; } 38 | .fontweight-100-mediaM { font-weight: 100; } 39 | .fontweight-200-mediaM { font-weight: 200; } 40 | .fontweight-300-mediaM { font-weight: 300; } 41 | .fontweight-400-mediaM { font-weight: 400; } 42 | .fontweight-500-mediaM { font-weight: 500; } 43 | .fontweight-600-mediaM { font-weight: 600; } 44 | .fontweight-700-mediaM { font-weight: 700; } 45 | .fontweight-800-mediaM { font-weight: 800; } 46 | .fontweight-900-mediaM { font-weight: 900; } 47 | } 48 | 49 | @media (--breakpoint-large) { 50 | .normal-mediaL, .fontweight-normal-mediaL { font-weight: normal; } 51 | .b-mediaL, .fontweight-bold-mediaL { font-weight: bold; } 52 | .fontweight-100-mediaL { font-weight: 100; } 53 | .fontweight-200-mediaL { font-weight: 200; } 54 | .fontweight-300-mediaL { font-weight: 300; } 55 | .fontweight-400-mediaL { font-weight: 400; } 56 | .fontweight-500-mediaL { font-weight: 500; } 57 | .fontweight-600-mediaL { font-weight: 600; } 58 | .fontweight-700-mediaL { font-weight: 700; } 59 | .fontweight-800-mediaL { font-weight: 800; } 60 | .fontweight-900-mediaL { font-weight: 900; } 61 | } 62 | 63 | @media (--breakpoint-xlarge) { 64 | .normal-mediaXL, .fontweight-normal-mediaXL { font-weight: normal; } 65 | .b-mediaXL, .fontweight-bold-mediaXL { font-weight: bold; } 66 | .fontweight-100-mediaXL { font-weight: 100; } 67 | .fontweight-200-mediaXL { font-weight: 200; } 68 | .fontweight-300-mediaXL { font-weight: 300; } 69 | .fontweight-400-mediaXL { font-weight: 400; } 70 | .fontweight-500-mediaXL { font-weight: 500; } 71 | .fontweight-600-mediaXL { font-weight: 600; } 72 | .fontweight-700-mediaXL { font-weight: 700; } 73 | .fontweight-800-mediaXL { font-weight: 800; } 74 | .fontweight-900-mediaXL { font-weight: 900; } 75 | } 76 | -------------------------------------------------------------------------------- /src/tachyons.css: -------------------------------------------------------------------------------- 1 | /*! TACHYONS VERBOSE v5.0.0.alpha */ 2 | /* 3 | * ████████╗ █████╗ ██████╗██╗ ██╗██╗ ██╗ ██████╗ ███╗ ██╗███████╗ 4 | * ╚══██╔══╝██╔══██╗██╔════╝██║ ██║╚██╗ ██╔╝██╔═══██╗████╗ ██║██╔════╝ 5 | * ██║ ███████║██║ ███████║ ╚████╔╝ ██║ ██║██╔██╗ ██║███████╗ 6 | * ██║ ██╔══██║██║ ██╔══██║ ╚██╔╝ ██║ ██║██║╚██╗██║╚════██║ 7 | * ██║ ██║ ██║╚██████╗██║ ██║ ██║ ╚██████╔╝██║ ╚████║███████║ 8 | * ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝╚══════╝ 9 | * 10 | * ██ ██ ███████ ██████ ██████ ██████ ███████ ███████ 11 | * ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ 12 | * ██ ██ █████ ██████ ██████ ██ ██ ███████ █████ 13 | * ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ 14 | * ████ ███████ ██ ██ ██████ ██████ ███████ ███████ 15 | * 16 | * 17 | * 18 | * TABLE OF CONTENTS 19 | * 20 | * 1. External Library Includes 21 | * - Normalize.css | http://normalize.css.github.io 22 | * 2. Tachyons Modules 23 | * 3. Variables 24 | * - Media Queries 25 | * - Colors 26 | * 4. Debugging 27 | * - Debug all 28 | * - Debug children 29 | * 30 | */ 31 | 32 | /* External Library Includes */ 33 | @import './_normalize'; 34 | 35 | /* Variables */ 36 | /* Importing here will allow you to override any variables in the modules */ 37 | @import './_media-queries'; 38 | @import './_variables'; 39 | 40 | @import './_gradients'; 41 | 42 | /* Modules */ 43 | @import './_box-sizing'; 44 | @import './_container-type'; 45 | @import './_all'; 46 | @import './_aspect-ratios'; 47 | @import './_images'; 48 | @import './_background-size'; 49 | @import './_background-position'; 50 | @import './_outlines'; 51 | @import './_borders'; 52 | @import './_border-colors'; 53 | @import './_border-radius'; 54 | @import './_border-style'; 55 | @import './_border-widths'; 56 | @import './_box-shadow'; 57 | @import './_text-shadow'; 58 | @import './_code'; 59 | @import './_coordinates'; 60 | @import './_clears'; 61 | @import './_display'; 62 | @import './_glass'; 63 | @import './_gap'; 64 | @import './_gap-column'; 65 | @import './_gap-row'; 66 | @import './_grid-template-columns'; 67 | @import './_grid-column'; 68 | @import './_grid-row'; 69 | @import './_grid-auto-flow'; 70 | /* Duplicate of filters? */ 71 | /* @import './_backdrop-filters'; */ 72 | @import './_filters'; 73 | @import './_flexbox'; 74 | @import './_flex-direction'; 75 | @import './_flex-wrap'; 76 | @import './_align-items'; 77 | @import './_align-content'; 78 | @import './_align-self'; 79 | @import './_justify-self'; 80 | @import './_justify-content'; 81 | @import './_order'; 82 | @import './_floats'; 83 | @import './_font-family'; 84 | @import './_font-style'; 85 | @import './_font-weight'; 86 | @import './_forms'; 87 | @import './_heights'; 88 | @import './_letter-spacing'; 89 | @import './_line-height'; 90 | @import './_links'; 91 | @import './_lists'; 92 | @import './_max-widths'; 93 | @import './_widths'; 94 | @import './_overflow'; 95 | @import './_position'; 96 | @import './_opacity'; 97 | @import './_rotations'; 98 | @import './_skins'; 99 | @import './_skins-pseudo'; 100 | @import './_spacing'; 101 | @import './_negative-margins'; 102 | @import './_tables'; 103 | @import './_text-decoration'; 104 | @import './_text-align'; 105 | @import './_text-transform'; 106 | @import './_type-scale'; 107 | @import './_typography'; 108 | @import './_utilities'; 109 | @import './_visibility'; 110 | @import './_white-space'; 111 | @import './_vertical-align'; 112 | @import './_hovers'; 113 | @import './_z-index'; 114 | @import './_nested'; 115 | @import './_styles'; 116 | 117 | /* Debugging */ 118 | @import './_debug-children'; 119 | @import './_debug-grid'; 120 | -------------------------------------------------------------------------------- /src/_aspect-ratios.css: -------------------------------------------------------------------------------- 1 | /* 2 | ASPECT RATIOS 3 | */ 4 | 5 | /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. 6 | * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e 7 | * Make sure there are no height and width attributes on the embedded media. 8 | * Adapted from: https://github.com/suitcss/components-flex-embed 9 | * 10 | * Example: 11 | * 12 | *
13 | * 14 | *
15 | * 16 | * */ 17 | 18 | .aspectratio-16x9 { aspect-ratio: 16 / 9; } 19 | .aspectratio-9x16 { aspect-ratio: 9 / 16; } 20 | 21 | .aspectratio-4x3 { aspect-ratio: 4 / 3; } 22 | .aspectratio-3x4 { aspect-ratio: 3 / 4; } 23 | 24 | .aspectratio-6x4 { aspect-ratio: 6 / 4; } 25 | .aspectratio-4x6 { aspect-ratio: 4 / 6; } 26 | 27 | .aspectratio-8x5 { aspect-ratio: 8 / 5; } 28 | .aspectratio-5x8 { aspect-ratio: 5 / 8; } 29 | 30 | .aspectratio-7x5 { aspect-ratio: 7 / 5; } 31 | .aspectratio-5x7 { aspect-ratio: 5 / 7; } 32 | 33 | .aspectratio-square, 34 | .aspectratio-1x1 { aspect-ratio: 1 / 1; } 35 | 36 | @media (--breakpoint-small) { 37 | 38 | .aspectratio-16x9-mediaS { aspect-ratio: 16 / 9; } 39 | .aspectratio-9x16-mediaS { aspect-ratio: 9 / 16; } 40 | 41 | .aspectratio-4x3-mediaS { aspect-ratio: 4 / 3; } 42 | .aspectratio-3x4-mediaS { aspect-ratio: 3 / 4; } 43 | 44 | .aspectratio-6x4-mediaS { aspect-ratio: 6 / 4; } 45 | .aspectratio-4x6-mediaS { aspect-ratio: 4 / 6; } 46 | 47 | .aspectratio-8x5-mediaS { aspect-ratio: 8 / 5; } 48 | .aspectratio-5x8-mediaS { aspect-ratio: 5 / 8; } 49 | 50 | .aspectratio-7x5-mediaS { aspect-ratio: 7 / 5; } 51 | .aspectratio-5x7-mediaS { aspect-ratio: 5 / 7; } 52 | 53 | .aspectratio-square-mediaS, 54 | .aspectratio-1x1-mediaS { aspect-ratio: 1 / 1; } 55 | } 56 | @media (--breakpoint-medium) { 57 | 58 | .aspectratio-16x9-mediaM { aspect-ratio: 16 / 9; } 59 | .aspectratio-9x16-mediaM { aspect-ratio: 9 / 16; } 60 | 61 | .aspectratio-4x3-mediaM { aspect-ratio: 4 / 3; } 62 | .aspectratio-3x4-mediaM { aspect-ratio: 3 / 4; } 63 | 64 | .aspectratio-6x4-mediaM { aspect-ratio: 6 / 4; } 65 | .aspectratio-4x6-mediaM { aspect-ratio: 4 / 6; } 66 | 67 | .aspectratio-8x5-mediaM { aspect-ratio: 8 / 5; } 68 | .aspectratio-5x8-mediaM { aspect-ratio: 5 / 8; } 69 | 70 | .aspectratio-7x5-mediaM { aspect-ratio: 7 / 5; } 71 | .aspectratio-5x7-mediaM { aspect-ratio: 5 / 7; } 72 | 73 | .aspectratio-square-mediaM, 74 | .aspectratio-1x1-mediaM { aspect-ratio: 1 / 1; } 75 | 76 | } 77 | @media (--breakpoint-large) { 78 | 79 | .aspectratio-16x9-mediaL { aspect-ratio: 16 / 9; } 80 | .aspectratio-9x16-mediaL { aspect-ratio: 9 / 16; } 81 | 82 | .aspectratio-4x3-mediaL { aspect-ratio: 4 / 3; } 83 | .aspectratio-3x4-mediaL { aspect-ratio: 3 / 4; } 84 | 85 | .aspectratio-6x4-mediaL { aspect-ratio: 6 / 4; } 86 | .aspectratio-4x6-mediaL { aspect-ratio: 4 / 6; } 87 | 88 | .aspectratio-8x5-mediaL { aspect-ratio: 8 / 5; } 89 | .aspectratio-5x8-mediaL { aspect-ratio: 5 / 8; } 90 | 91 | .aspectratio-7x5-mediaL { aspect-ratio: 7 / 5; } 92 | .aspectratio-5x7-mediaL { aspect-ratio: 5 / 7; } 93 | 94 | .aspectratio-square-mediaL, 95 | .aspectratio-1x1-mediaL { aspect-ratio: 1 / 1; } 96 | 97 | } 98 | 99 | @media (--breakpoint-xlarge) { 100 | 101 | .aspectratio-16x9-mediaXL { aspect-ratio: 16 / 9; } 102 | .aspectratio-9x16-mediaXL { aspect-ratio: 9 / 16; } 103 | 104 | .aspectratio-4x3-mediaXL { aspect-ratio: 4 / 3; } 105 | .aspectratio-3x4-mediaXL { aspect-ratio: 3 / 4; } 106 | 107 | .aspectratio-6x4-mediaXL { aspect-ratio: 6 / 4; } 108 | .aspectratio-4x6-mediaXL { aspect-ratio: 4 / 6; } 109 | 110 | .aspectratio-8x5-mediaXL { aspect-ratio: 8 / 5; } 111 | .aspectratio-5x8-mediaXL { aspect-ratio: 5 / 8; } 112 | 113 | .aspectratio-7x5-mediaXL { aspect-ratio: 7 / 5; } 114 | .aspectratio-5x7-mediaXL { aspect-ratio: 5 / 7; } 115 | 116 | .aspectratio-square-mediaXL, 117 | .aspectratio-1x1-mediaXL { aspect-ratio: 1 / 1; } 118 | 119 | } 120 | -------------------------------------------------------------------------------- /src/_border-widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER WIDTHS 4 | Docs: http://tachyons.io/docs/themes/borders/ 5 | 6 | Modifiers: 7 | 0 = 0 width border 8 | 1 = 1st step in border-width scale 9 | 2 = 2nd step in border-width scale 10 | 3 = 3rd step in border-width scale 11 | 4 = 4th step in border-width scale 12 | 5 = 5th step in border-width scale 13 | 14 | */ 15 | 16 | 17 | .borderwidth { border-width: var( --borderwidth-1, 1px ); } 18 | .borderwidth-0 { border-width: var( --borderwidth-0, 0 ); } 19 | .borderwidth-1 { border-width: var( --borderwidth-1, 1px ); } 20 | .borderwidth-2 { border-width: var( --borderwidth-2, 2px ); } 21 | .borderwidth-3 { border-width: var( --borderwidth-3, 4px ); } 22 | .borderwidth-4 { border-width: var( --borderwidth-4, 8px ); } 23 | .borderwidth-5 { border-width: var( --borderwidth-5, 16px ); } 24 | 25 | /* Resets */ 26 | .bordertopwidth-0 { border-top-width: 0; } 27 | .borderrightwidth-0 { border-right-width: 0; } 28 | .borderbottomwidth-0 { border-bottom-width: 0; } 29 | .borderleftwidth-0 { border-left-width: 0; } 30 | 31 | 32 | @media (--breakpoint-not-small) { 33 | .borderwidth-mediaS { border-width: var( --borderwidth-1, 1px ); } 34 | .borderwidth-0-mediaS { border-width: var( --borderwidth-0, 0 ); } 35 | .borderwidth-1-mediaS { border-width: var( --borderwidth-1, 1px ); } 36 | .borderwidth-2-mediaS { border-width: var( --borderwidth-2, 2px ); } 37 | .borderwidth-3-mediaS { border-width: var( --borderwidth-3, 4px ); } 38 | .borderwidth-4-mediaS { border-width: var( --borderwidth-4, 8px ); } 39 | .borderwidth-5-mediaS { border-width: var( --borderwidth-5, 16px ); } 40 | 41 | .bordertopwidth-0-mediaS { border-top-width: 0; } 42 | .borderrightwidth-0-mediaS { border-right-width: 0; } 43 | .borderbottomwidth-0-mediaS { border-bottom-width: 0; } 44 | .borderleftwidth-0-mediaS { border-left-width: 0; } 45 | } 46 | 47 | @media (--breakpoint-medium) { 48 | .borderwidth-mediaM { border-width: var( --borderwidth-1, 1px ); } 49 | .borderwidth-0-mediaM { border-width: var( --borderwidth-0, 0 ); } 50 | .borderwidth-1-mediaM { border-width: var( --borderwidth-1, 1px ); } 51 | .borderwidth-2-mediaM { border-width: var( --borderwidth-2, 2px ); } 52 | .borderwidth-3-mediaM { border-width: var( --borderwidth-3, 4px ); } 53 | .borderwidth-4-mediaM { border-width: var( --borderwidth-4, 8px ); } 54 | .borderwidth-5-mediaM { border-width: var( --borderwidth-5, 16px ); } 55 | 56 | .bordertopwidth-0-mediaM { border-top-width: 0; } 57 | .borderrightwidth-0-mediaM { border-right-width: 0; } 58 | .borderbottomwidth-0-mediaM { border-bottom-width: 0; } 59 | .borderleftwidth-0-mediaM { border-left-width: 0; } 60 | } 61 | 62 | @media (--breakpoint-large) { 63 | .borderwidth-mediaL { border-width: var( --borderwidth-1, 1px ); } 64 | .borderwidth-0-mediaL { border-width: var( --borderwidth-0, 0 ); } 65 | .borderwidth-1-mediaL { border-width: var( --borderwidth-1, 1px ); } 66 | .borderwidth-2-mediaL { border-width: var( --borderwidth-2, 2px ); } 67 | .borderwidth-3-mediaL { border-width: var( --borderwidth-3, 4px ); } 68 | .borderwidth-4-mediaL { border-width: var( --borderwidth-4, 8px ); } 69 | .borderwidth-5-mediaL { border-width: var( --borderwidth-5, 16px ); } 70 | 71 | .bordertopwidth-0-mediaL { border-top-width: 0; } 72 | .borderrightwidth-0-mediaL { border-right-width: 0; } 73 | .borderbottomwidth-0-mediaL { border-bottom-width: 0; } 74 | .borderleftwidth-0-mediaL { border-left-width: 0; } 75 | } 76 | 77 | @media (--breakpoint-xlarge) { 78 | .borderwidth-mediaXL { border-width: var( --borderwidth-1, 1px ); } 79 | .borderwidth-0-mediaXL { border-width: var( --borderwidth-0, 0 ); } 80 | .borderwidth-1-mediaXL { border-width: var( --borderwidth-1, 1px ); } 81 | .borderwidth-2-mediaXL { border-width: var( --borderwidth-2, 2px ); } 82 | .borderwidth-3-mediaXL { border-width: var( --borderwidth-3, 4px ); } 83 | .borderwidth-4-mediaXL { border-width: var( --borderwidth-4, 8px ); } 84 | .borderwidth-5-mediaXL { border-width: var( --borderwidth-5, 16px ); } 85 | 86 | .bordertopwidth-0-mediaXL { border-top-width: 0; } 87 | .borderrightwidth-0-mediaXL { border-right-width: 0; } 88 | .borderbottomwidth-0-mediaXL { border-bottom-width: 0; } 89 | .borderleftwidth-0-mediaXL { border-left-width: 0; } 90 | } 91 | -------------------------------------------------------------------------------- /src/_filters.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FILTER EFFECTS 4 | 5 | - Blur 6 | - Grayscale 7 | - Hue Rotate 8 | - Invert 9 | 10 | */ 11 | 12 | .filter-none { filter: none; } 13 | 14 | .filter-blur1, 15 | .filter-blur4px { filter: blur(4px); } 16 | .filter-blur2, 17 | .filter-blur16px { filter: blur(16px); } 18 | .filter-blur3, 19 | .filter-blur96px { filter: blur(96px); } 20 | 21 | .filter-grayscale0, 22 | .filter-grayscale1 { filter: grayscale(0); } 23 | .filter-grayscale2, 24 | .filter-grayscale50percent { filter: grayscale(50%); } 25 | .filter-grayscale3, 26 | .filter-grayscale100percent { filter: grayscale(100%); } 27 | 28 | .filter-huerotate0 { filter: hue-rotate(0deg);} 29 | .filter-huerotate1, 30 | .filter-huerotate45deg { filter: hue-rotate(45deg);} 31 | .filter-huerotate2, 32 | .filter-huerotate90deg { filter: hue-rotate(90deg);} 33 | .filter-huerotate3, 34 | .filter-huerotate135deg { filter: hue-rotate(135deg);} 35 | .filter-huerotate4, 36 | .filter-huerotate180deg { filter: hue-rotate(180deg);} 37 | .filter-huerotate5, 38 | .filter-huerotate225deg { filter: hue-rotate(225deg);} 39 | .filter-huerotate6, 40 | .filter-huerotate270deg { filter: hue-rotate(270deg);} 41 | .filter-huerotate7, 42 | .filter-huerotate315deg { filter: hue-rotate(315deg);} 43 | 44 | .filter-invert, 45 | .filter-invert100percent { filter: invert(100%); } 46 | 47 | /* TODO: Add drop-shadow */ 48 | 49 | .filter-none-hover:hover { filter: none; } 50 | 51 | .filter-blur1-hover:hover, 52 | .filter-blur4px-hover:hover { filter: blur(4px); } 53 | .filter-blur2-hover:hover, 54 | .filter-blur16px-hover:hover { filter: blur(16px); } 55 | .filter-blur3-hover:hover, 56 | .filter-blur96px-hover:hover { filter: blur(96px); } 57 | 58 | .filter-grayscale0-hover:hover, 59 | .filter-grayscale1-hover:hover { filter: grayscale(0); } 60 | .filter-grayscale2-hover:hover, 61 | .filter-grayscale50percent-hover:hover { filter: grayscale(50%); } 62 | .filter-grayscale3-hover:hover, 63 | .filter-grayscale100percent-hover:hover { filter: grayscale(100%); } 64 | 65 | .filter-huerotate0:hover { filter: hue-rotate(0deg);} 66 | .filter-huerotate1:hover, 67 | .filter-huerotate45deg:hover { filter: hue-rotate(45deg);} 68 | .filter-huerotate2:hover, 69 | .filter-huerotate90deg:hover { filter: hue-rotate(90deg);} 70 | .filter-huerotate3:hover, 71 | .filter-huerotate135deg:hover { filter: hue-rotate(135deg);} 72 | .filter-huerotate4:hover, 73 | .filter-huerotate180deg:hover { filter: hue-rotate(180deg);} 74 | .filter-huerotate5:hover, 75 | .filter-huerotate225deg:hover { filter: hue-rotate(225deg);} 76 | .filter-huerotate6:hover, 77 | .filter-huerotate270deg:hover { filter: hue-rotate(270deg);} 78 | .filter-huerotate7:hover, 79 | .filter-huerotate315deg:hover { filter: hue-rotate(315deg);} 80 | 81 | .filter-invert-hover:hover, 82 | .filter-invert100percent:hover { filter: invert(100%); } 83 | 84 | .filter-blur1-focus:focus, 85 | .filter-blur4px-focus:focus { filter: blur(4px); } 86 | .filter-blur2-focus:focus, 87 | .filter-blur16px-focus:focus { filter: blur(16px); } 88 | .filter-blur3-focus:focus, 89 | .filter-blur96px-focus:focus { filter: blur(96px); } 90 | 91 | .filter-grayscale1-focus:focus, 92 | .filter-grayscale0-focus:focus { filter: grayscale(0); } 93 | .filter-grayscale2-focus:focus, 94 | .filter-grayscale50percent-focus:focus { filter: grayscale(50%); } 95 | .filter-grayscale3-focus:focus, 96 | .filter-grayscale100percent-focus:focus { filter: grayscale(100%); } 97 | 98 | .filter-huerotate0-focus:focus { filter: hue-rotate(0deg);} 99 | .filter-huerotate1-focus:focus, 100 | .filter-huerotate45deg-focus:focus { filter: hue-rotate(45deg);} 101 | .filter-huerotate2-focus:focus, 102 | .filter-huerotate90deg-focus:focus { filter: hue-rotate(90deg);} 103 | .filter-huerotate3-focus:focus, 104 | .filter-huerotate135deg-focus:focus { filter: hue-rotate(135deg);} 105 | .filter-huerotate4-focus:focus, 106 | .filter-huerotate180deg-focus:focus { filter: hue-rotate(180deg);} 107 | .filter-huerotate5-focus:focus, 108 | .filter-huerotate225deg-focus:focus { filter: hue-rotate(225deg);} 109 | .filter-huerotate6-focus:focus, 110 | .filter-huerotate270deg-focus:focus { filter: hue-rotate(270deg);} 111 | .filter-huerotate7-focus:focus, 112 | .filter-huerotate315deg-focus:focus { filter: hue-rotate(315deg);} 113 | 114 | .filter-invert-focus:focus, 115 | .filter-invert100percent-focus:focus { filter: invert(100%); } 116 | -------------------------------------------------------------------------------- /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 | .hover-dim { 22 | opacity: 1; 23 | transition: opacity .15s ease-in; 24 | } 25 | .hover-dim:hover, 26 | .hover-dim:focus { 27 | opacity: .5; 28 | transition: opacity .15s ease-in; 29 | } 30 | .hover-dim:active { 31 | opacity: .8; transition: opacity .15s ease-out; 32 | } 33 | 34 | /* 35 | Animate opacity to 100% on hover by adding the glow class. 36 | */ 37 | .hover-glow { 38 | transition: opacity .15s ease-in; 39 | } 40 | .hover-glow:hover, 41 | .hover-glow:focus { 42 | opacity: 1; 43 | transition: opacity .15s ease-in; 44 | } 45 | 46 | /* 47 | 48 | Hide child & reveal on hover: 49 | 50 | Put the hidechild class on a parent element and any nested element with the 51 | child class will be hidden and displayed on hover or focus. 52 | 53 |
54 |
Hidden until hover or focus
55 |
Hidden until hover or focus
56 |
Hidden until hover or focus
57 |
Hidden until hover or focus
58 |
59 | */ 60 | 61 | .hover-hidechild .child { 62 | opacity: 0; 63 | transition: opacity .15s ease-in; 64 | } 65 | .hover-hidechild:hover .child, 66 | .hover-hidechild:focus .child, 67 | .hover-hidechild:active .child { 68 | opacity: 1; 69 | transition: opacity .15s ease-in; 70 | } 71 | 72 | .hover-underline:hover, 73 | .hover-underline:focus { 74 | text-decoration: underline; 75 | } 76 | 77 | /* Can combine this with overflow-hidden to make background images grow on hover 78 | * even if you are using background-size: cover */ 79 | 80 | .hover-grow { 81 | -moz-osx-font-smoothing: grayscale; 82 | backface-visibility: hidden; 83 | transform: translateZ(0); 84 | transition: transform 0.25s ease-out; 85 | } 86 | 87 | .hover-grow:hover, 88 | .hover-grow:focus { 89 | transform: scale(1.05); 90 | } 91 | 92 | .hover-grow:active { 93 | transform: scale(.90); 94 | } 95 | 96 | .hover-growlarge { 97 | -moz-osx-font-smoothing: grayscale; 98 | backface-visibility: hidden; 99 | transform: translateZ(0); 100 | transition: transform .25s ease-in-out; 101 | } 102 | 103 | .hover-growlarge:hover, 104 | .hover-growlarge:focus { 105 | transform: scale(1.2); 106 | } 107 | 108 | .hover-growlarge:active { 109 | transform: scale(.95); 110 | } 111 | 112 | /* Add pointer on hover */ 113 | 114 | .hover-pointer:hover, 115 | .cursor-pointer { 116 | cursor: pointer; 117 | } 118 | 119 | .transition-all { 120 | transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1); 121 | } 122 | 123 | /* 124 | * TODO: Test and rename 125 | Add shadow on hover. 126 | 127 | Performant box-shadow animation pattern from 128 | http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 129 | 130 | .shadow-hover { 131 | cursor: pointer; 132 | position: relative; 133 | transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 134 | } 135 | 136 | .shadow-hover::after { 137 | content: ''; 138 | box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ); 139 | border-radius: inherit; 140 | opacity: 0; 141 | position: absolute; 142 | top: 0; 143 | left: 0; 144 | width: 100%; 145 | height: 100%; 146 | z-index: -1; 147 | transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 148 | } 149 | 150 | .shadow-hover:hover::after, 151 | .shadow-hover:focus::after { 152 | opacity: 1; 153 | } 154 | */ 155 | 156 | /* Combine with classes in skins and skins-pseudo for 157 | * many different transition possibilities. */ 158 | 159 | .transition-backgroundcolor { 160 | transition: background-color .25s ease-in-out; 161 | } 162 | 163 | .transition-color { 164 | transition: color .25s ease-in-out; 165 | } 166 | 167 | .hover-filter-none:hover { filter: none; } 168 | 169 | .hover-filter-blur-none:hover { filter: blur(0); } 170 | .hover-filter-blur:hover { filter: blur(96px); } 171 | 172 | .hover-grayscale-0:hover { filter: grayscale(0); } 173 | .hover-grayscale-50percent:hover { filter: grayscale(50%); } 174 | .hover-grayscale-100percent:hover { filter: grayscale(100%); } 175 | -------------------------------------------------------------------------------- /src/_backdrop-filters.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BACKDROP-FILTER EFFECTS 4 | 5 | - Blur 6 | - Grayscale 7 | - Hue Rotate 8 | - Invert 9 | - INTERACTIONS 10 | - Hover 11 | - Focus 12 | 13 | */ 14 | 15 | .filter-none { filter: none; } 16 | 17 | .filter-blur1, 18 | .filter-blur4px { filter: blur(4px); } 19 | .filter-blur2, 20 | .filter-blur16px { filter: blur(16px); } 21 | .filter-blur3, 22 | .filter-blur96px { filter: blur(96px); } 23 | 24 | .filter-grayscale0, 25 | .filter-grayscale1 { filter: grayscale(0); } 26 | .filter-grayscale2, 27 | .filter-grayscale50percent { filter: grayscale(50%); } 28 | .filter-grayscale3, 29 | .filter-grayscale100percent { filter: grayscale(100%); } 30 | 31 | .filter-huerotate0 { filter: hue-rotate(0deg);} 32 | .filter-huerotate1, 33 | .filter-huerotate45deg { filter: hue-rotate(45deg);} 34 | .filter-huerotate2, 35 | .filter-huerotate90deg { filter: hue-rotate(90deg);} 36 | .filter-huerotate3, 37 | .filter-huerotate135deg { filter: hue-rotate(135deg);} 38 | .filter-huerotate4, 39 | .filter-huerotate180deg { filter: hue-rotate(180deg);} 40 | .filter-huerotate5, 41 | .filter-huerotate225deg { filter: hue-rotate(225deg);} 42 | .filter-huerotate6, 43 | .filter-huerotate270deg { filter: hue-rotate(270deg);} 44 | .filter-huerotate7, 45 | .filter-huerotate315deg { filter: hue-rotate(315deg);} 46 | 47 | .filter-invert, 48 | .filter-invert100percent { filter: invert(100%); } 49 | 50 | /* TODO: Add drop-shadow */ 51 | 52 | .filter-none-hover:hover { filter: none; } 53 | 54 | .filter-blur1-hover:hover, 55 | .filter-blur4px-hover:hover { filter: blur(4px); } 56 | .filter-blur2-hover:hover, 57 | .filter-blur16px-hover:hover { filter: blur(16px); } 58 | .filter-blur3-hover:hover, 59 | .filter-blur96px-hover:hover { filter: blur(96px); } 60 | 61 | .filter-grayscale0-hover:hover, 62 | .filter-grayscale1-hover:hover { filter: grayscale(0); } 63 | .filter-grayscale2-hover:hover, 64 | .filter-grayscale50percent-hover:hover { filter: grayscale(50%); } 65 | .filter-grayscale3-hover:hover, 66 | .filter-grayscale100percent-hover:hover { filter: grayscale(100%); } 67 | 68 | .filter-huerotate0:hover { filter: hue-rotate(0deg);} 69 | .filter-huerotate1:hover, 70 | .filter-huerotate45deg:hover { filter: hue-rotate(45deg);} 71 | .filter-huerotate2:hover, 72 | .filter-huerotate90deg:hover { filter: hue-rotate(90deg);} 73 | .filter-huerotate3:hover, 74 | .filter-huerotate135deg:hover { filter: hue-rotate(135deg);} 75 | .filter-huerotate4:hover, 76 | .filter-huerotate180deg:hover { filter: hue-rotate(180deg);} 77 | .filter-huerotate5:hover, 78 | .filter-huerotate225deg:hover { filter: hue-rotate(225deg);} 79 | .filter-huerotate6:hover, 80 | .filter-huerotate270deg:hover { filter: hue-rotate(270deg);} 81 | .filter-huerotate7:hover, 82 | .filter-huerotate315deg:hover { filter: hue-rotate(315deg);} 83 | 84 | .filter-invert-hover:hover, 85 | .filter-invert100percent:hover { filter: invert(100%); } 86 | 87 | .filter-blur1-focus:focus, 88 | .filter-blur4px-focus:focus { filter: blur(4px); } 89 | .filter-blur2-focus:focus, 90 | .filter-blur16px-focus:focus { filter: blur(16px); } 91 | .filter-blur3-focus:focus, 92 | .filter-blur96px-focus:focus { filter: blur(96px); } 93 | 94 | .filter-grayscale1-focus:focus, 95 | .filter-grayscale0-focus:focus { filter: grayscale(0); } 96 | .filter-grayscale2-focus:focus, 97 | .filter-grayscale50percent-focus:focus { filter: grayscale(50%); } 98 | .filter-grayscale3-focus:focus, 99 | .filter-grayscale100percent-focus:focus { filter: grayscale(100%); } 100 | 101 | .filter-huerotate0-focus:focus { filter: hue-rotate(0deg);} 102 | .filter-huerotate1-focus:focus, 103 | .filter-huerotate45deg-focus:focus { filter: hue-rotate(45deg);} 104 | .filter-huerotate2-focus:focus, 105 | .filter-huerotate90deg-focus:focus { filter: hue-rotate(90deg);} 106 | .filter-huerotate3-focus:focus, 107 | .filter-huerotate135deg-focus:focus { filter: hue-rotate(135deg);} 108 | .filter-huerotate4-focus:focus, 109 | .filter-huerotate180deg-focus:focus { filter: hue-rotate(180deg);} 110 | .filter-huerotate5-focus:focus, 111 | .filter-huerotate225deg-focus:focus { filter: hue-rotate(225deg);} 112 | .filter-huerotate6-focus:focus, 113 | .filter-huerotate270deg-focus:focus { filter: hue-rotate(270deg);} 114 | .filter-huerotate7-focus:focus, 115 | .filter-huerotate315deg-focus:focus { filter: hue-rotate(315deg);} 116 | 117 | .filter-invert-focus:focus, 118 | .filter-invert100percent-focus:focus { filter: invert(100%); } 119 | -------------------------------------------------------------------------------- /src/_typography.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TYPOGRAPHY 4 | http://tachyons.io/docs/typography/measure/ 5 | 6 | */ 7 | 8 | /* Measure is limited to 66 characters */ 9 | .measure, 10 | .maxwidth-measure { 11 | max-width: var(--measure, 66ch); 12 | } 13 | 14 | /* Measure is limited to ~80 characters */ 15 | .measure-wide, 16 | .measurewide, 17 | .maxwidth-measurewide { 18 | max-width: var(--measure-wide, 80ch); 19 | } 20 | 21 | /* Measure is limited to 45 characters */ 22 | .measure-narrow, 23 | .measurenarrow, 24 | .maxwidth-measurenarrow { 25 | max-width: var(--measure-narrow, 45ch); 26 | } 27 | 28 | /* Book paragraph style - paragraphs are indented with no vertical spacing. */ 29 | .indent, 30 | .textindent-1 { 31 | text-indent: 1em; 32 | margin-top: 0; 33 | margin-bottom: 0; 34 | } 35 | 36 | .small-caps, 37 | .smallcaps, 38 | .fontvariant-smallcaps { 39 | font-variant: small-caps; 40 | } 41 | 42 | /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ 43 | .truncate { 44 | white-space: nowrap; 45 | overflow: hidden; 46 | text-overflow: ellipsis; 47 | } 48 | 49 | 50 | @media (--breakpoint-small) { 51 | 52 | .measure-mediaS, 53 | .maxwidth-measure-mediaS { 54 | max-width: var(--measure, 66ch); 55 | } 56 | .measure-wide-mediaS, 57 | .measurewide-mediaS, 58 | .maxwidth-measurewide-mediaS { 59 | max-width: var(--measure-wide, 80ch); 60 | } 61 | .measure-narrow-mediaS, 62 | .measurenarrow-mediaS, 63 | .maxwidth-measurenarrow-mediaS { 64 | max-width: var(--measure-narrow, 45ch); 65 | } 66 | .indent-mediaS, 67 | .textindent-1-mediaS { 68 | text-indent: 1em; 69 | margin-top: 0; 70 | margin-bottom: 0; 71 | } 72 | .small-caps-mediaS, 73 | .smallcaps-mediaS, 74 | .fontvariant-smallcaps-mediaS { 75 | font-variant: small-caps; 76 | } 77 | .truncate-mediaS { 78 | white-space: nowrap; 79 | overflow: hidden; 80 | text-overflow: ellipsis; 81 | } 82 | } 83 | 84 | @media (--breakpoint-medium) { 85 | 86 | .measure-mediaM, 87 | .maxwidth-measure-mediaM { 88 | max-width: var(--measure, 66ch); 89 | } 90 | .measure-wide-mediaM, 91 | .measurewide-mediaM, 92 | .maxwidth-measurewide-mediaM { 93 | max-width: var(--measure-wide, 80ch); 94 | } 95 | .measure-narrow-mediaM, 96 | .measurenarrow-mediaM, 97 | .maxwidth-measurenarrow-mediaM { 98 | max-width: var(--measure-narrow, 45ch); 99 | } 100 | .indent-mediaM, 101 | .textindent-1-mediaM { 102 | text-indent: 1em; 103 | margin-top: 0; 104 | margin-bottom: 0; 105 | } 106 | .small-caps-mediaM, 107 | .smallcaps-mediaM, 108 | .fontvariant-smallcaps-mediaM { 109 | font-variant: small-caps; 110 | } 111 | .truncate-mediaM { 112 | white-space: nowrap; 113 | overflow: hidden; 114 | text-overflow: ellipsis; 115 | } 116 | } 117 | 118 | @media (--breakpoint-large) { 119 | 120 | .measure-mediaL, 121 | .maxwidth-measure-mediaL { 122 | max-width: var(--measure, 66ch); 123 | } 124 | .measure-wide-mediaL, 125 | .measurewide-mediaL, 126 | .maxwidth-measurewide-mediaL { 127 | max-width: var(--measure-wide, 80ch); 128 | } 129 | .measure-narrow-mediaL, 130 | .measurenarrow-mediaL, 131 | .maxwidth-measurenarrow-mediaL { 132 | max-width: var(--measure-narrow, 45ch); 133 | } 134 | .indent-mediaL, 135 | .textindent-1-mediaL { 136 | text-indent: 1em; 137 | margin-top: 0; 138 | margin-bottom: 0; 139 | } 140 | .small-caps-mediaL, 141 | .smallcaps-mediaL, 142 | .fontvariant-smallcaps-mediaL { 143 | font-variant: small-caps; 144 | } 145 | .truncate-mediaL { 146 | white-space: nowrap; 147 | overflow: hidden; 148 | text-overflow: ellipsis; 149 | } 150 | } 151 | 152 | @media (--breakpoint-xlarge) { 153 | 154 | .measure-mediaXL, 155 | .maxwidth-measure-mediaXL { 156 | max-width: var(--measure, 66ch); 157 | } 158 | .measure-wide-mediaXL, 159 | .measurewide-mediaXL, 160 | .maxwidth-measurewide-mediaXL { 161 | max-width: var(--measure-wide, 80ch); 162 | } 163 | .measure-narrow-mediaXL, 164 | .measurenarrow-mediaXL, 165 | .maxwidth-measurenarrow-mediaXL { 166 | max-width: var(--measure-narrow, 45ch); 167 | } 168 | .indent-mediaXL, 169 | .textindent-1-mediaXL { 170 | text-indent: 1em; 171 | margin-top: 0; 172 | margin-bottom: 0; 173 | } 174 | .small-caps-mediaXL, 175 | .smallcaps-mediaXL, 176 | .fontvariant-smallcaps-mediaXL { 177 | font-variant: small-caps; 178 | } 179 | .truncate-mediaXL { 180 | white-space: nowrap; 181 | overflow: hidden; 182 | text-overflow: ellipsis; 183 | } 184 | } 185 | -------------------------------------------------------------------------------- /src/_box-shadow.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BOX-SHADOW 4 | Docs: http://tachyons.io/docs/themes/box-shadow/ 5 | 6 | REF 7 | Layered shadows: https://tobiasahlin.com/blog/layered-smooth-box-shadows/ 8 | 9 | */ 10 | 11 | .boxshadow { 12 | box-shadow: var(--shadow, inset 0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .5))); 13 | } 14 | 15 | .boxshadow-hover:hover, 16 | .boxshadow-hover:focus { 17 | --shadow-opacity: .6; 18 | } 19 | 20 | /* 21 | * TODO: potential pattern 22 | .shadow-hover:hover { 23 | --shadow-opacity: .09; 24 | --shadow-x: 1px; 25 | --shadow-y: 1px; 26 | --shadow-blur: 1px; 27 | --shadow-spread: 1px; 28 | --shadow-multiplier: 2; 29 | } 30 | */ 31 | 32 | /* Box shadow based borders */ 33 | 34 | .boxshadow-border1 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); } 35 | .boxshadow-border2 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .25)); } 36 | .boxshadow-border3 { box-shadow: inset 0 0 var(--shadow-border-width) 0 currentColor; } 37 | .boxshadow-border4 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color-light, 255 255 255) / var(--shadow-opacity, .125)); } 38 | .boxshadow-border5 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125))} 39 | .boxshadow-border6 { box-shadow: inset 0 0 2px 0 currentColor; } 40 | 41 | .boxshadow-1 { 42 | box-shadow: 43 | 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 44 | 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 45 | 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 46 | 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 47 | 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); 48 | } 49 | 50 | .boxshadow-2 { 51 | box-shadow: 52 | 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 53 | 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 54 | 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 55 | 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); 56 | } 57 | 58 | .boxshadow-3 { 59 | --shadow-opacity: .11; 60 | box-shadow: 61 | 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 62 | 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 63 | 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 64 | 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 65 | 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 66 | 0 32px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)); 67 | } 68 | 69 | .boxshadow-4 { 70 | --shadow-opacity: .05; 71 | box-shadow: 72 | 0 1px 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.25) * 5)), 73 | 0 2px 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 4)), 74 | 0 4px 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.15) * 3)), 75 | 0 8px 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.10) * 2)), 76 | 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.05)); 77 | } 78 | 79 | .boxshadow-5 { 80 | --shadow-opacity: .08; 81 | box-shadow: 82 | 0 var(--shadow-y) 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.08) * 1)), 83 | 0 calc(var(--shadow-y) * 2) 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.12) * 1.5)), 84 | 0 calc(var(--shadow-y) * 4) 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.16) * 2)), 85 | 0 calc(var(--shadow-y) * 8) 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 2.5)); 86 | } 87 | 88 | .boxshadow-6 { 89 | --shadow-opacity: .07; 90 | box-shadow: 91 | 0 1px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 92 | 0 2px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 93 | 0 4px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 94 | 0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 95 | 0 16px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 96 | 0 32px 64px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)); 97 | } 98 | 99 | .boxshadow-7 { 100 | --shadow-opacity: .11; 101 | box-shadow: 102 | 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 103 | 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 104 | 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 105 | 0 6px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 106 | 0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)); 107 | } 108 | 109 | .boxshadow-8 { 110 | --shadow-opacity: .09; 111 | box-shadow: 112 | 0 2px 1px rgb(var(--shadow-color, 0 0 0) / 0.09), 113 | 0 4px 2px rgb(var(--shadow-color, 0 0 0) / 0.09), 114 | 0 8px 4px rgb(var(--shadow-color, 0 0 0) / 0.09), 115 | 0 16px 8px rgb(var(--shadow-color, 0 0 0) / 0.09), 116 | 0 32px 16px rgb(var(--shadow-color, 0 0 0) / 0.09); 117 | } -------------------------------------------------------------------------------- /src/_debug.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DEBUG (PESTICIDE) 4 | Docs: http://tachyons.io/docs/debug/ 5 | This is a partial you have to manually include in your 6 | build file. It places a different colored outline on 7 | each element which can help you debug layout issues. 8 | There is also a handy chrome extension that can 9 | be found at http://pesticide.io 10 | */ 11 | 12 | body { outline: 1px solid #2980B9!important; } 13 | article { outline: 1px solid #3498DB!important; } 14 | nav { outline: 1px solid #0088C3!important; } 15 | aside { outline: 1px solid #33A0CE!important; } 16 | section { outline: 1px solid #66B8DA!important; } 17 | header { outline: 1px solid #99CFE7!important; } 18 | footer { outline: 1px solid #CCE7F3!important; } 19 | h1 { outline: 1px solid #162544!important; } 20 | h2 { outline: 1px solid #314E6E!important; } 21 | h3 { outline: 1px solid #3E5E85!important; } 22 | h4 { outline: 1px solid #449BAF!important; } 23 | h5 { outline: 1px solid #C7D1CB!important; } 24 | h6 { outline: 1px solid #4371D0!important; } 25 | main { outline: 1px solid #2F4F90!important; } 26 | address { outline: 1px solid #1A2C51!important; } 27 | div { outline: 1px solid #036CDB!important; } 28 | 29 | 30 | p { outline: 1px solid #AC050B!important; } 31 | hr { outline: 1px solid #FF063F!important; } 32 | pre { outline: 1px solid #850440!important; } 33 | blockquote { outline: 1px solid #F1B8E7!important; } 34 | ol { outline: 1px solid #FF050C!important; } 35 | ul { outline: 1px solid #D90416!important; } 36 | li { outline: 1px solid #D90416!important; } 37 | dl { outline: 1px solid #FD3427!important; } 38 | dt { outline: 1px solid #FF0043!important; } 39 | dd { outline: 1px solid #E80174!important; } 40 | figure { outline: 1px solid #FF00BB!important; } 41 | figcaption { outline: 1px solid #BF0032!important; } 42 | 43 | 44 | 45 | table { outline: 1px solid #00CC99!important; } 46 | caption { outline: 1px solid #37FFC4!important; } 47 | thead { outline: 1px solid #98DACA!important; } 48 | tbody { outline: 1px solid #64A7A0!important; } 49 | tfoot { outline: 1px solid #22746B!important; } 50 | tr { outline: 1px solid #86C0B2!important; } 51 | th { outline: 1px solid #A1E7D6!important; } 52 | td { outline: 1px solid #3F5A54!important; } 53 | col { outline: 1px solid #6C9A8F!important; } 54 | colgroup { outline: 1px solid #6C9A9D!important; } 55 | 56 | 57 | button { outline: 1px solid #DA8301!important; } 58 | datalist { outline: 1px solid #C06000!important; } 59 | fieldset { outline: 1px solid #D95100!important; } 60 | form { outline: 1px solid #D23600!important; } 61 | input { outline: 1px solid #FCA600!important; } 62 | keygen { outline: 1px solid #B31E00!important; } 63 | label { outline: 1px solid #EE8900!important; } 64 | legend { outline: 1px solid #DE6D00!important; } 65 | meter { outline: 1px solid #E8630C!important; } 66 | optgroup { outline: 1px solid #B33600!important; } 67 | option { outline: 1px solid #FF8A00!important; } 68 | output { outline: 1px solid #FF9619!important; } 69 | progress { outline: 1px solid #E57C00!important; } 70 | select { outline: 1px solid #E26E0F!important; } 71 | textarea { outline: 1px solid #CC5400!important; } 72 | 73 | 74 | 75 | details { outline: 1px solid #33848F!important; } 76 | summary { outline: 1px solid #60A1A6!important; } 77 | command { outline: 1px solid #438DA1!important; } 78 | menu { outline: 1px solid #449DA6!important; } 79 | 80 | 81 | 82 | del { outline: 1px solid #BF0000!important; } 83 | ins { outline: 1px solid #400000!important; } 84 | 85 | 86 | 87 | img { outline: 1px solid #22746B!important; } 88 | iframe { outline: 1px solid #64A7A0!important; } 89 | embed { outline: 1px solid #98DACA!important; } 90 | object { outline: 1px solid #00CC99!important; } 91 | param { outline: 1px solid #37FFC4!important; } 92 | video { outline: 1px solid #6EE866!important; } 93 | audio { outline: 1px solid #027353!important; } 94 | source { outline: 1px solid #012426!important; } 95 | canvas { outline: 1px solid #A2F570!important; } 96 | track { outline: 1px solid #59A600!important; } 97 | map { outline: 1px solid #7BE500!important; } 98 | area { outline: 1px solid #305900!important; } 99 | 100 | 101 | 102 | a { outline: 1px solid #FF62AB!important; } 103 | em { outline: 1px solid #800B41!important; } 104 | strong { outline: 1px solid #FF1583!important; } 105 | i { outline: 1px solid #803156!important; } 106 | b { outline: 1px solid #CC1169!important; } 107 | u { outline: 1px solid #FF0430!important; } 108 | s { outline: 1px solid #F805E3!important; } 109 | small { outline: 1px solid #D107B2!important; } 110 | abbr { outline: 1px solid #4A0263!important; } 111 | q { outline: 1px solid #240018!important; } 112 | cite { outline: 1px solid #64003C!important; } 113 | dfn { outline: 1px solid #B4005A!important; } 114 | sub { outline: 1px solid #DBA0C8!important; } 115 | sup { outline: 1px solid #CC0256!important; } 116 | time { outline: 1px solid #D6606D!important; } 117 | code { outline: 1px solid #E04251!important; } 118 | kbd { outline: 1px solid #5E001F!important; } 119 | samp { outline: 1px solid #9C0033!important; } 120 | var { outline: 1px solid #D90047!important; } 121 | mark { outline: 1px solid #FF0053!important; } 122 | bdi { outline: 1px solid #BF3668!important; } 123 | bdo { outline: 1px solid #6F1400!important; } 124 | ruby { outline: 1px solid #FF7B93!important; } 125 | rt { outline: 1px solid #FF2F54!important; } 126 | rp { outline: 1px solid #803E49!important; } 127 | span { outline: 1px solid #CC2643!important; } 128 | br { outline: 1px solid #DB687D!important; } 129 | wbr { outline: 1px solid #DB175B!important; } 130 | 131 | -------------------------------------------------------------------------------- /src/_glass.css: -------------------------------------------------------------------------------- 1 | .glass1 { 2 | background: rgba(255, 255, 255, 0); 3 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px); 4 | border: 1px solid rgba(255, 255, 255, 0.15); 5 | } 6 | 7 | .glass2 { 8 | background: rgba(255, 255, 255, 0.05); 9 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 10 | backdrop-filter: blur(20px); 11 | border: 1px solid rgba(255, 255, 255, 0.15); 12 | } 13 | 14 | .glass3 { 15 | background: rgba(255, 255, 255, 0.15); 16 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 17 | backdrop-filter: blur(20px); 18 | border: 1px solid rgba(255, 255, 255, 0.15); 19 | } 20 | 21 | .glass4 { 22 | background: rgba(255, 255, 255, 0.25); 23 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 24 | backdrop-filter: blur(20px); 25 | border: 1px solid rgba(255, 255, 255, 0.15); 26 | } 27 | 28 | .glass5 { 29 | background: rgba(255, 255, 255, 0); 30 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 31 | backdrop-filter: blur(16px); 32 | border: 1px solid rgba(255, 255, 255, 0.15); 33 | } 34 | 35 | .glass6 { 36 | background: rgba(255, 255, 255, 0.05); 37 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 38 | backdrop-filter: blur(16px); 39 | border: 1px solid rgba(255, 255, 255, 0.15); 40 | } 41 | 42 | .glass7 { 43 | background: rgba(255, 255, 255, 0.15); 44 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 45 | backdrop-filter: blur(16px); 46 | border: 1px solid rgba(255, 255, 255, 0.15); 47 | } 48 | 49 | .glass8 { 50 | background: rgba(255, 255, 255, 0.25); 51 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 52 | backdrop-filter: blur(16px); 53 | border: 1px solid rgba(255, 255, 255, 0.15); 54 | } 55 | 56 | .glass9 { 57 | background: rgba(255, 255, 255, 0.25); 58 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 59 | border: 1px solid rgba(255, 255, 255, 0.15); 60 | } 61 | 62 | .glass10 { 63 | background: rgba(255, 255, 255, 0); 64 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 65 | border: 1px solid rgba(255, 255, 255, 0.15); 66 | } 67 | 68 | .glass1-hover:hover { 69 | background: rgba(255, 255, 255, 0); 70 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 71 | backdrop-filter: blur(20px); 72 | border: 1px solid rgba(255, 255, 255, 0.15); 73 | } 74 | 75 | .glass2-hover:hover { 76 | background: rgba(255, 255, 255, 0.05); 77 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 78 | backdrop-filter: blur(20px); 79 | border: 1px solid rgba(255, 255, 255, 0.15); 80 | } 81 | 82 | .glass3-hover:hover { 83 | background: rgba(255, 255, 255, 0.15); 84 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 85 | backdrop-filter: blur(20px); 86 | border: 1px solid rgba(255, 255, 255, 0.15); 87 | } 88 | 89 | .glass4-hover:hover { 90 | background: rgba(255, 255, 255, 0.25); 91 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 92 | backdrop-filter: blur(20px); 93 | border: 1px solid rgba(255, 255, 255, 0.15); 94 | } 95 | 96 | .glass5-hover:hover { 97 | background: rgba(255, 255, 255, 0); 98 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 99 | backdrop-filter: blur(16px); 100 | border: 1px solid rgba(255, 255, 255, 0.15); 101 | } 102 | 103 | .glass6-hover:hover { 104 | background: rgba(255, 255, 255, 0.05); 105 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 106 | backdrop-filter: blur(16px); 107 | border: 1px solid rgba(255, 255, 255, 0.15); 108 | } 109 | 110 | .glass7-hover:hover { 111 | background: rgba(255, 255, 255, 0.15); 112 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 113 | backdrop-filter: blur(16px); 114 | border: 1px solid rgba(255, 255, 255, 0.15); 115 | } 116 | 117 | .glass8-hover:hover { 118 | background: rgba(255, 255, 255, 0.25); 119 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 120 | backdrop-filter: blur(16px); 121 | border: 1px solid rgba(255, 255, 255, 0.15); 122 | } 123 | 124 | .glass9-hover:hover { 125 | background: rgba(255, 255, 255, 0.25); 126 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 127 | border: 1px solid rgba(255, 255, 255, 0.15); 128 | } 129 | 130 | .glass10-hover:hover { 131 | background: rgba(255, 255, 255, 0); 132 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 133 | border: 1px solid rgba(255, 255, 255, 0.15); 134 | } 135 | 136 | .glass1-focus:focus { 137 | background: rgba(255, 255, 255, 0); 138 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 139 | backdrop-filter: blur(20px); 140 | border: 1px solid rgba(255, 255, 255, 0.15); 141 | } 142 | 143 | .glass2-focus:focus { 144 | background: rgba(255, 255, 255, 0.05); 145 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 146 | backdrop-filter: blur(20px); 147 | border: 1px solid rgba(255, 255, 255, 0.15); 148 | } 149 | 150 | .glass3-focus:focus { 151 | background: rgba(255, 255, 255, 0.15); 152 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 153 | backdrop-filter: blur(20px); 154 | border: 1px solid rgba(255, 255, 255, 0.15); 155 | } 156 | 157 | .glass4-focus:focus { 158 | background: rgba(255, 255, 255, 0.25); 159 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 160 | backdrop-filter: blur(20px); 161 | border: 1px solid rgba(255, 255, 255, 0.15); 162 | } 163 | 164 | .glass5-focus:focus { 165 | background: rgba(255, 255, 255, 0); 166 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 167 | backdrop-filter: blur(16px); 168 | border: 1px solid rgba(255, 255, 255, 0.15); 169 | } 170 | 171 | .glass6-focus:focus { 172 | background: rgba(255, 255, 255, 0.05); 173 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 174 | backdrop-filter: blur(16px); 175 | border: 1px solid rgba(255, 255, 255, 0.15); 176 | } 177 | 178 | .glass7-focus:focus { 179 | background: rgba(255, 255, 255, 0.15); 180 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 181 | backdrop-filter: blur(16px); 182 | border: 1px solid rgba(255, 255, 255, 0.15); 183 | } 184 | 185 | .glass8-focus:focus { 186 | background: rgba(255, 255, 255, 0.25); 187 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 188 | backdrop-filter: blur(16px); 189 | border: 1px solid rgba(255, 255, 255, 0.15); 190 | } 191 | 192 | .glass9-focus:focus { 193 | background: rgba(255, 255, 255, 0.25); 194 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 195 | border: 1px solid rgba(255, 255, 255, 0.15); 196 | } 197 | 198 | .glass10-focus:focus { 199 | background: rgba(255, 255, 255, 0); 200 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 201 | border: 1px solid rgba(255, 255, 255, 0.15); 202 | } 203 | -------------------------------------------------------------------------------- /src/_background-size.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BACKGROUND SIZE 4 | Docs: http://tachyons.io/docs/themes/background-size/ 5 | 6 | Media Query Extensions: 7 | -mediaS = small 8 | -mediaM = medium 9 | -mediaL = large 10 | 11 | Container Query Extensions: 12 | -containerS = small 13 | -containerM = medium 14 | -containerL = large 15 | 16 | */ 17 | 18 | /* 19 | Often used in combination with background image set as an inline style 20 | on an html element. 21 | */ 22 | 23 | .backgroundsize-cover { background-size: cover!important; } 24 | .backgroundsize-contain { background-size: contain!important; } 25 | 26 | .backgroundsize-1 { background-size: 4px; } 27 | .backgroundsize-2 { background-size: 8px; } 28 | .backgroundsize-3 { background-size: 16px; } 29 | .backgroundsize-4 { background-size: 32px; } 30 | .backgroundsize-5 { background-size: 64px; } 31 | .backgroundsize-6 { background-size: 100%; } 32 | .backgroundsize-7 { background-size: 150%; } 33 | .backgroundsize-8 { background-size: 200%; } 34 | 35 | .backgroundsize-4px { background-size: 4px; } 36 | .backgroundsize-8px { background-size: 8px; } 37 | .backgroundsize-16px { background-size: 16px; } 38 | .backgroundsize-32px { background-size: 32px; } 39 | .backgroundsize-64px { background-size: 64px; } 40 | .backgroundsize-100percent { background-size: 100%; } 41 | .backgroundsize-150percent { background-size: 150%; } 42 | .backgroundsize-200percent { background-size: 200%; } 43 | 44 | @media (--breakpoint-small) { 45 | .backgroundsize-cover-s { background-size: cover!important; } 46 | .backgroundsize-contain-s { background-size: contain!important; } 47 | 48 | .backgroundsize-1-mediaS { background-size: 4px; } 49 | .backgroundsize-2-mediaS { background-size: 8px; } 50 | .backgroundsize-3-mediaS { background-size: 16px; } 51 | .backgroundsize-4-mediaS { background-size: 32px; } 52 | .backgroundsize-5-mediaS { background-size: 64px; } 53 | .backgroundsize-6-mediaS { background-size: 100%; } 54 | .backgroundsize-7-mediaS { background-size: 150%; } 55 | .backgroundsize-8-mediaS { background-size: 200%; } 56 | 57 | .backgroundsize-4px-mediaS { background-size: 4px; } 58 | .backgroundsize-8px-mediaS { background-size: 8px; } 59 | .backgroundsize-16px-mediaS { background-size: 16px; } 60 | .backgroundsize-32px-mediaS { background-size: 32px; } 61 | .backgroundsize-64px-mediaS { background-size: 64px; } 62 | .backgroundsize-100percent-mediaS { background-size: 100%; } 63 | .backgroundsize-150percent-mediaS { background-size: 150%; } 64 | .backgroundsize-200percent-mediaS { background-size: 200%; } 65 | } 66 | 67 | @media (--breakpoint-medium) { 68 | .backgroundsize-cover-mediaM { background-size: cover!important; } 69 | .backgroundsize-contain-mediaM { background-size: contain!important; } 70 | 71 | .backgroundsize-1-mediaM { background-size: 4px; } 72 | .backgroundsize-2-mediaM { background-size: 8px; } 73 | .backgroundsize-3-mediaM { background-size: 16px; } 74 | .backgroundsize-4-mediaM { background-size: 32px; } 75 | .backgroundsize-5-mediaM { background-size: 64px; } 76 | .backgroundsize-6-mediaM { background-size: 100%; } 77 | .backgroundsize-7-mediaM { background-size: 150%; } 78 | .backgroundsize-8-mediaM { background-size: 200%; } 79 | 80 | .backgroundsize-4px-mediaM { background-size: 4px; } 81 | .backgroundsize-8px-mediaM { background-size: 8px; } 82 | .backgroundsize-16px-mediaM { background-size: 16px; } 83 | .backgroundsize-32px-mediaM { background-size: 32px; } 84 | .backgroundsize-64px-mediaM { background-size: 64px; } 85 | .backgroundsize-100percent-mediaM { background-size: 100%; } 86 | .backgroundsize-150percent-mediaM { background-size: 150%; } 87 | .backgroundsize-200percent-mediaM { background-size: 200%; } 88 | } 89 | 90 | @media (--breakpoint-large) { 91 | .backgroundsize-cover-mediaL { background-size: cover!important; } 92 | .backgroundsize-contain-mediaL { background-size: contain!important; } 93 | 94 | .backgroundsize-1-mediaL { background-size: 4px; } 95 | .backgroundsize-2-mediaL { background-size: 8px; } 96 | .backgroundsize-3-mediaL { background-size: 16px; } 97 | .backgroundsize-4-mediaL { background-size: 32px; } 98 | .backgroundsize-5-mediaL { background-size: 64px; } 99 | .backgroundsize-6-mediaL { background-size: 100%; } 100 | .backgroundsize-7-mediaL { background-size: 150%; } 101 | .backgroundsize-8-mediaL { background-size: 200%; } 102 | 103 | .backgroundsize-4px-mediaL { background-size: 4px; } 104 | .backgroundsize-8px-mediaL { background-size: 8px; } 105 | .backgroundsize-16px-mediaL { background-size: 16px; } 106 | .backgroundsize-32px-mediaL { background-size: 32px; } 107 | .backgroundsize-64px-mediaL { background-size: 64px; } 108 | .backgroundsize-100percent-mediaL { background-size: 100%; } 109 | .backgroundsize-150percent-mediaL { background-size: 150%; } 110 | .backgroundsize-200percent-mediaL { background-size: 200%; } 111 | } 112 | 113 | 114 | @media (--breakpoint-xlarge) { 115 | .backgroundsize-cover-mediaXL { background-size: cover!important; } 116 | .backgroundsize-contain-mediaXL { background-size: contain!important; } 117 | 118 | .backgroundsize-1-mediaXL { background-size: 4px; } 119 | .backgroundsize-2-mediaXL { background-size: 8px; } 120 | .backgroundsize-3-mediaXL { background-size: 16px; } 121 | .backgroundsize-4-mediaXL { background-size: 32px; } 122 | .backgroundsize-5-mediaXL { background-size: 64px; } 123 | .backgroundsize-6-mediaXL { background-size: 100%; } 124 | .backgroundsize-7-mediaXL { background-size: 150%; } 125 | .backgroundsize-8-mediaXL { background-size: 200%; } 126 | 127 | .backgroundsize-4px-mediaXL { background-size: 4px; } 128 | .backgroundsize-8px-mediaXL { background-size: 8px; } 129 | .backgroundsize-16px-mediaXL { background-size: 16px; } 130 | .backgroundsize-32px-mediaXL { background-size: 32px; } 131 | .backgroundsize-64px-mediaXL { background-size: 64px; } 132 | .backgroundsize-100percent-mediaXL { background-size: 100%; } 133 | .backgroundsize-150percent-mediaXL { background-size: 150%; } 134 | .backgroundsize-200percent-mediaXL { background-size: 200%; } 135 | } -------------------------------------------------------------------------------- /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 | */ 9 | 10 | .top-0 { top: 0; } 11 | .right-0 { right: 0; } 12 | .bottom-0 { bottom: 0; } 13 | .left-0 { left: 0; } 14 | 15 | .top-1 { top: var(--size, 1rem); } 16 | .right-1 { right: var(--size, 1rem); } 17 | .bottom-1 { bottom: var(--size, 1rem); } 18 | .left-1 { left: var(--size, 1rem); } 19 | .top-2 { top: calc(var(--size, 1rem) * 2); } 20 | .right-2 { right: calc(var(--size, 1rem) * 2); } 21 | .bottom-2 { bottom: calc(var(--size, 1rem) * 2); } 22 | .left-2 { left: calc(var(--size, 1rem) * 2); } 23 | 24 | .top-minus1 { top: calc(var(--size, 1rem) * -1); } 25 | .right-minus1 { right: calc(var(--size, 1rem) * -1); } 26 | .bottom-minus1 { bottom: calc(var(--size, 1rem) * -1); } 27 | .left-minus1 { left: calc(var(--size, 1rem) * -1); } 28 | .top-minus2 { top: calc(var(--size, 1rem) * -2); } 29 | .right-minus2 { right: calc(var(--size, 1rem) * -2); } 30 | .bottom-minus2 { bottom: calc(var(--size, 1rem) * -2); } 31 | .left-minus2 { left: calc(var(--size, 1rem) * -2); } 32 | 33 | .inset-0 { inset: 0; } 34 | 35 | @media (--breakpoint-small) { 36 | .top-0-mediaS { top: 0; } 37 | .right-0-mediaS { right: 0; } 38 | .bottom-0-mediaS { bottom: 0; } 39 | .left-0-mediaS { left: 0; } 40 | 41 | .top-1-mediaS { top: var(--size, 1rem); } 42 | .right-1-mediaS { right: var(--size, 1rem); } 43 | .bottom-1-mediaS { bottom: var(--size, 1rem); } 44 | .left-1-mediaS { left: var(--size, 1rem); } 45 | .top-2-mediaS { top: calc(var(--size, 1rem) * 2); } 46 | .right-2-mediaS { right: calc(var(--size, 1rem) * 2); } 47 | .bottom-2-mediaS { bottom: calc(var(--size, 1rem) * 2); } 48 | .left-2-mediaS { left: calc(var(--size, 1rem) * 2); } 49 | 50 | .top-minus1-mediaS { top: calc(var(--size, 1rem) * -1); } 51 | .right-minus1-mediaS { right: calc(var(--size, 1rem) * -1); } 52 | .bottom-minus1-mediaS { bottom: calc(var(--size, 1rem) * -1); } 53 | .left-minus1-mediaS { left: calc(var(--size, 1rem) * -1); } 54 | .top-minus2-mediaS { top: calc(var(--size, 1rem) * -2); } 55 | .right-minus2-mediaS { right: calc(var(--size, 1rem) * -2); } 56 | .bottom-minus2-mediaS { bottom: calc(var(--size, 1rem) * -2); } 57 | .left-minus2-mediaS { left: calc(var(--size, 1rem) * -2); } 58 | 59 | .inset-0-mediaS { inset: 0; } 60 | } 61 | 62 | @media (--breakpoint-medium) { 63 | .top-0-mediaM { top: 0; } 64 | .right-0-mediaM { right: 0; } 65 | .bottom-0-mediaM { bottom: 0; } 66 | .left-0-mediaM { left: 0; } 67 | 68 | .top-1-mediaM { top: var(--size, 1rem); } 69 | .right-1-mediaM { right: var(--size, 1rem); } 70 | .bottom-1-mediaM { bottom: var(--size, 1rem); } 71 | .left-1-mediaM { left: var(--size, 1rem); } 72 | .top-2-mediaM { top: calc(var(--size, 1rem) * 2); } 73 | .right-2-mediaM { right: calc(var(--size, 1rem) * 2); } 74 | .bottom-2-mediaM { bottom: calc(var(--size, 1rem) * 2); } 75 | .left-2-mediaM { left: calc(var(--size, 1rem) * 2); } 76 | 77 | .top-minus1-mediaM { top: calc(var(--size, 1rem) * -1); } 78 | .right-minus1-mediaM { right: calc(var(--size, 1rem) * -1); } 79 | .bottom-minus1-mediaM { bottom: calc(var(--size, 1rem) * -1); } 80 | .left-minus1-mediaM { left: calc(var(--size, 1rem) * -1); } 81 | .top-minus2-mediaM { top: calc(var(--size, 1rem) * -2); } 82 | .right-minus2-mediaM { right: calc(var(--size, 1rem) * -2); } 83 | .bottom-minus2-mediaM { bottom: calc(var(--size, 1rem) * -2); } 84 | .left-minus2-mediaM { left: calc(var(--size, 1rem) * -2); } 85 | 86 | .inset-0-mediaM { inset: 0; } 87 | } 88 | 89 | @media (--breakpoint-large) { 90 | .top-0-mediaL { top: 0; } 91 | .right-0-mediaL { right: 0; } 92 | .bottom-0-mediaL { bottom: 0; } 93 | .left-0-mediaL { left: 0; } 94 | 95 | .top-1-mediaL { top: var(--size, 1rem); } 96 | .right-1-mediaL { right: var(--size, 1rem); } 97 | .bottom-1-mediaL { bottom: var(--size, 1rem); } 98 | .left-1-mediaL { left: var(--size, 1rem); } 99 | .top-2-mediaL { top: calc(var(--size, 1rem) * 2); } 100 | .right-2-mediaL { right: calc(var(--size, 1rem) * 2); } 101 | .bottom-2-mediaL { bottom: calc(var(--size, 1rem) * 2); } 102 | .left-2-mediaL { left: calc(var(--size, 1rem) * 2); } 103 | 104 | .top-minus1-mediaL { top: calc(var(--size, 1rem) * -1); } 105 | .right-minus1-mediaL { right: calc(var(--size, 1rem) * -1); } 106 | .bottom-minus1-mediaL { bottom: calc(var(--size, 1rem) * -1); } 107 | .left-minus1-mediaL { left: calc(var(--size, 1rem) * -1); } 108 | .top-minus2-mediaL { top: calc(var(--size, 1rem) * -2); } 109 | .right-minus2-mediaL { right: calc(var(--size, 1rem) * -2); } 110 | .bottom-minus2-mediaL { bottom: calc(var(--size, 1rem) * -2); } 111 | .left-minus2-mediaL { left: calc(var(--size, 1rem) * -2); } 112 | 113 | .inset-0-mediaL { inset: 0; } 114 | } 115 | 116 | @media (--breakpoint-xlarge) { 117 | .top-0-mediaXL { top: 0; } 118 | .right-0-mediaXL { right: 0; } 119 | .bottom-0-mediaXL { bottom: 0; } 120 | .left-0-mediaXL { left: 0; } 121 | 122 | .top-1-mediaXL { top: var(--size, 1rem); } 123 | .right-1-mediaXL { right: var(--size, 1rem); } 124 | .bottom-1-mediaXL { bottom: var(--size, 1rem); } 125 | .left-1-mediaXL { left: var(--size, 1rem); } 126 | .top-2-mediaXL { top: calc(var(--size, 1rem) * 2); } 127 | .right-2-mediaXL { right: calc(var(--size, 1rem) * 2); } 128 | .bottom-2-mediaXL { bottom: calc(var(--size, 1rem) * 2); } 129 | .left-2-mediaXL { left: calc(var(--size, 1rem) * 2); } 130 | 131 | .top-minus1-mediaXL { top: calc(var(--size, 1rem) * -1); } 132 | .right-minus1-mediaXL { right: calc(var(--size, 1rem) * -1); } 133 | .bottom-minus1-mediaXL { bottom: calc(var(--size, 1rem) * -1); } 134 | .left-minus1-mediaXL { left: calc(var(--size, 1rem) * -1); } 135 | .top-minus2-mediaXL { top: calc(var(--size, 1rem) * -2); } 136 | .right-minus2-mediaXL { right: calc(var(--size, 1rem) * -2); } 137 | .bottom-minus2-mediaXL { bottom: calc(var(--size, 1rem) * -2); } 138 | .left-minus2-mediaXL { left: calc(var(--size, 1rem) * -2); } 139 | 140 | .inset-0-mediaXL { inset: 0; } 141 | } 142 | 143 | -------------------------------------------------------------------------------- /src/_max-widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | MAX WIDTHS 4 | Docs: http://tachyons.io/docs/layout/max-widths/ 5 | 6 | */ 7 | 8 | /* Max Width Percentages */ 9 | 10 | .maxwidth-100percent { max-width: 100%; } 11 | 12 | /* Max Width Scale */ 13 | 14 | .maxwidth-1 { height: var(--size-1, 1rem); } 15 | .maxwidth-2 { height: var(--size-2, 2rem); } 16 | .maxwidth-3 { height: var(--size-3, 3rem); } 17 | .maxwidth-4 { height: var(--size-4, 4rem); } 18 | .maxwidth-5 { height: var(--size-5, 8rem); } 19 | .maxwidth-6 { height: var(--size-6, 16rem); } 20 | .maxwidth-7 { height: var(--size-7, 32rem); } 21 | .maxwidth-8 { height: var(--size-8, 64rem); } 22 | .maxwidth-9 { height: var(--size-9, 96rem); } 23 | 24 | /* Max Width Scale (Tachyons Verbose specific) */ 25 | 26 | .maxwidth-medium { max-width: var(--size-medium); } 27 | .maxwidth-large { max-width: var(--size-large); } 28 | .maxwidth-xlarge { max-width: var(--size-xlarge); } 29 | .maxwidth-xxlarge { max-width: var(--size-xxlarge); } 30 | .maxwidth-xxxlarge { max-width: var(--size-xxxlarge); } 31 | .maxwidth-xxxxlarge { max-width: var(--size-xxxxlarge); } 32 | .maxwidth-xxxxxlarge { max-width: var(--size-xxxxxlarge); } 33 | .maxwidth-xxxxxxlarge { max-width: var(--size-xxxxxxlarge); } 34 | .maxwidth-xxxxxxxlarge { max-width: var(--size-xxxxxxxlarge); } 35 | 36 | /* Max Width String Properties */ 37 | 38 | .maxwidth-none { max-width: none; } 39 | 40 | @media (--breakpoint-small) { 41 | .maxwidth-100percent-mediaS { max-width: 100%; } 42 | 43 | .maxwidth-1-mediaS { height: var(--size-1, 1rem); } 44 | .maxwidth-2-mediaS { height: var(--size-2, 2rem); } 45 | .maxwidth-3-mediaS { height: var(--size-3, 3rem); } 46 | .maxwidth-4-mediaS { height: var(--size-4, 4rem); } 47 | .maxwidth-5-mediaS { height: var(--size-5, 8rem); } 48 | .maxwidth-6-mediaS { height: var(--size-6, 16rem); } 49 | .maxwidth-7-mediaS { height: var(--size-7, 32rem); } 50 | .maxwidth-8-mediaS { height: var(--size-8, 64rem); } 51 | .maxwidth-9-mediaS { height: var(--size-9, 96rem); } 52 | 53 | .maxwidth-medium-mediaS { max-width: var(--size-medium); } 54 | .maxwidth-large-mediaS { max-width: var(--size-large); } 55 | .maxwidth-xlarge-mediaS { max-width: var(--size-xlarge); } 56 | .maxwidth-xxlarge-mediaS { max-width: var(--size-xxlarge); } 57 | .maxwidth-xxxlarge-mediaS { max-width: var(--size-xxxlarge); } 58 | .maxwidth-xxxxlarge-mediaS { max-width: var(--size-xxxxlarge); } 59 | .maxwidth-xxxxxlarge-mediaS { max-width: var(--size-xxxxxlarge); } 60 | .maxwidth-xxxxxxlarge-mediaS { max-width: var(--size-xxxxxxlarge); } 61 | .maxwidth-xxxxxxxlarge-mediaS { max-width: var(--size-xxxxxxxlarge); } 62 | 63 | .maxwidth-none-mediaS { max-width: none; } 64 | } 65 | 66 | @media (--breakpoint-medium) { 67 | .maxwidth-100percent-mediaM { max-width: 100%; } 68 | 69 | .maxwidth-1-mediaM { height: var(--size-1, 1rem); } 70 | .maxwidth-2-mediaM { height: var(--size-2, 2rem); } 71 | .maxwidth-3-mediaM { height: var(--size-3, 3rem); } 72 | .maxwidth-4-mediaM { height: var(--size-4, 4rem); } 73 | .maxwidth-5-mediaM { height: var(--size-5, 8rem); } 74 | .maxwidth-6-mediaM { height: var(--size-6, 16rem); } 75 | .maxwidth-7-mediaM { height: var(--size-7, 32rem); } 76 | .maxwidth-8-mediaM { height: var(--size-8, 64rem); } 77 | .maxwidth-9-mediaM { height: var(--size-9, 96rem); } 78 | 79 | .maxwidth-medium-mediaM { max-width: var(--size-medium); } 80 | .maxwidth-large-mediaM { max-width: var(--size-large); } 81 | .maxwidth-xlarge-mediaM { max-width: var(--size-xlarge); } 82 | .maxwidth-xxlarge-mediaM { max-width: var(--size-xxlarge); } 83 | .maxwidth-xxxlarge-mediaM { max-width: var(--size-xxxlarge); } 84 | .maxwidth-xxxxlarge-mediaM { max-width: var(--size-xxxxlarge); } 85 | .maxwidth-xxxxxlarge-mediaM { max-width: var(--size-xxxxxlarge); } 86 | .maxwidth-xxxxxxlarge-mediaM { max-width: var(--size-xxxxxxlarge); } 87 | .maxwidth-xxxxxxxlarge-mediaM { max-width: var(--size-xxxxxxxlarge); } 88 | 89 | .maxwidth-none-mediaM { max-width: none; } 90 | } 91 | 92 | @media (--breakpoint-large) { 93 | .maxwidth-100percent-mediaL { max-width: 100%; } 94 | 95 | .maxwidth-1-mediaL { height: var(--size-1, 1rem); } 96 | .maxwidth-2-mediaL { height: var(--size-2, 2rem); } 97 | .maxwidth-3-mediaL { height: var(--size-3, 3rem); } 98 | .maxwidth-4-mediaL { height: var(--size-4, 4rem); } 99 | .maxwidth-5-mediaL { height: var(--size-5, 8rem); } 100 | .maxwidth-6-mediaL { height: var(--size-6, 16rem); } 101 | .maxwidth-7-mediaL { height: var(--size-7, 32rem); } 102 | .maxwidth-8-mediaL { height: var(--size-8, 64rem); } 103 | .maxwidth-9-mediaL { height: var(--size-9, 96rem); } 104 | 105 | .maxwidth-medium-mediaL { max-width: var(--size-medium); } 106 | .maxwidth-large-mediaL { max-width: var(--size-large); } 107 | .maxwidth-xlarge-mediaL { max-width: var(--size-xlarge); } 108 | .maxwidth-xxlarge-mediaL { max-width: var(--size-xxlarge); } 109 | .maxwidth-xxxlarge-mediaL { max-width: var(--size-xxxlarge); } 110 | .maxwidth-xxxxlarge-mediaL { max-width: var(--size-xxxxlarge); } 111 | .maxwidth-xxxxxlarge-mediaL { max-width: var(--size-xxxxxlarge); } 112 | .maxwidth-xxxxxxlarge-mediaL { max-width: var(--size-xxxxxxlarge); } 113 | .maxwidth-xxxxxxxlarge-mediaL { max-width: var(--size-xxxxxxxlarge); } 114 | 115 | .maxwidth-none-mediaL { max-width: none; } 116 | } 117 | 118 | @media (--breakpoint-xlarge) { 119 | .maxwidth-100percent-mediaXL { max-width: 100%; } 120 | 121 | .maxwidth-1-mediaXL { height: var(--size-1, 1rem); } 122 | .maxwidth-2-mediaXL { height: var(--size-2, 2rem); } 123 | .maxwidth-3-mediaXL { height: var(--size-3, 3rem); } 124 | .maxwidth-4-mediaXL { height: var(--size-4, 4rem); } 125 | .maxwidth-5-mediaXL { height: var(--size-5, 8rem); } 126 | .maxwidth-6-mediaXL { height: var(--size-6, 16rem); } 127 | .maxwidth-7-mediaXL { height: var(--size-7, 32rem); } 128 | .maxwidth-8-mediaXL { height: var(--size-8, 64rem); } 129 | .maxwidth-9-mediaXL { height: var(--size-9, 96rem); } 130 | 131 | .maxwidth-medium-mediaXL { max-width: var(--size-medium); } 132 | .maxwidth-large-mediaXL { max-width: var(--size-large); } 133 | .maxwidth-xlarge-mediaXL { max-width: var(--size-xlarge); } 134 | .maxwidth-xxlarge-mediaXL { max-width: var(--size-xxlarge); } 135 | .maxwidth-xxxlarge-mediaXL { max-width: var(--size-xxxlarge); } 136 | .maxwidth-xxxxlarge-mediaXL { max-width: var(--size-xxxxlarge); } 137 | .maxwidth-xxxxxlarge-mediaXL { max-width: var(--size-xxxxxlarge); } 138 | .maxwidth-xxxxxxlarge-mediaXL { max-width: var(--size-xxxxxxlarge); } 139 | .maxwidth-xxxxxxxlarge-mediaXL { max-width: var(--size-xxxxxxxlarge); } 140 | 141 | .maxwidth-none-mediaXL { max-width: none; } 142 | } 143 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # TACHYONS Verbose 2 | 3 | Functional css for humans. Verbose edition. 4 | 5 | Quickly build and design new UI without writing css. 6 | 7 | Version 5.0.0.alpha 8 | 9 | ## Principles 10 | 11 | * Everything should be 100% responsive 12 | * Everything should be readable on any device 13 | * Everything should be as fast as possible 14 | * Designing in the browser should be easy 15 | * It should be easy to change any interface or part of an interface without breaking any existing interfaces 16 | * Doing one thing extremely well promotes reusability and reduces repetition 17 | * Documentation helps promote reusability and shared knowledge 18 | * Css shouldn't impede accessibility or the default functionality of Html 19 | * You should send the smallest possible amount of code to the user 20 | 21 | ## Features 22 | 23 | * Mobile-first css architecture 24 | * 8px baseline grid 25 | * Multiple debugging utilities to reduce layout struggles 26 | * Single-purpose class structure 27 | * Optimized for maximum gzip compression 28 | * Lightweight 29 | * Usable across projects 30 | * Growing open source component library 31 | * Works well with plain html, react, ember, angular, rails, and more 32 | * Infinitely nestable responsive grid system 33 | * Works out of the box but easy to customize and extend 34 | 35 | ## Verbose? 36 | 37 | The main difference between [Tachyons](https://github.com/tachyons-css/tachyons/) and [Tachyons Verbose](https://github.com/tachyons-css/tachyons-verbose) is the latter spells out all of its classes. So instead of `dib`, we will spell it out as `display-inlineblock`. Our naming conventions stay close to the original CSS properties so that you don't have to remember an extra acronym or naming convention. As a bonus, if your memory is rusty about CSS property names and values, using Tachyons Verbose will help you remember that too. In short, it's functional CSS with the lightest cognitive load possible, and the only downside is that the code initially looks "ugly" because there are a lot of words in the class declaration. 38 | 39 | ### Verbose class naming conventions 40 | 41 | Tachyons Verbose classes use an unambiguous naming formula: 42 | 43 | `.propertyname-value-mediaquerysize` 44 | 45 | As you can see, hyphens are only used to separate the properties from their values, or to add on a conditional media query. For example: 46 | 47 | - `.textalign-center` maps to `{ text-align: center; }` 48 | - `.position-absolute` maps to `{ position: absolute; }` 49 | 50 | Media queries are labeled as `mediaS`, `mediaM`, `mediaL` or `mediaXL` for small, medium and large screen sizes. In the future, we will support container queries as well, which is why we decided there was need to clarify these are for `@media` queries. So: 51 | 52 | - `.textalign-center-mediaS` maps to `{ text-align: center; }` when the screen size is `30em` or more. You can set what the media query breakpoints are at in `src/_media-queries.css`. 53 | 54 | Because CSS class names don't support most symbols and punctuation marks, we had to make our workarounds for certain values. For example: 55 | 56 | - `.width-100percent` maps to `{ width: 100%; }` 57 | - `.lineheight-1p5` maps to `{ line-height: 1.5; }` as in "one point five" 58 | - `.margin-minus2` maps to `{ margin: calc(-1 * var(--spacing-2)); }` where "minus" also means negative 59 | 60 | As you can see, some of our class names use double dash `--` variables that you can adjust in `src/_variables.css`. 61 | 62 | ## Tachyons Verbose specific implementation 63 | 64 | This release of Tachyons Verbose is a verbose fork of the [Tachyons v5.0.0.beta](https://github.com/tachyons-css/tachyons/tree/v5-final-final). Aside from different naming conventions, we also made a few additions: 65 | 66 | - If specific values are referenced in size scale, you can refer to both as a part of the scale and as the literal value. E.g. 1`backgroundsize-3` and `.backgroundsize-16px` both map to `{ background-size: 16px; }`. 67 | - In parallel to the numerical size scales, we also use `small`, `medium` ad `large` for heights, widths, margins and paddings. In this scheme, `padding-medium` gives 1 rem of padding. To increase the size use `large`, `xlarge`, `xxlarge`, `xxxlarge`, etc. To decrease use `small`, `xsmall`, `xxsmall`, `xxxsmall`, etc. 68 | - Tachyons v5.0.0.beta replaces all media queries with container queries. Tachyons Verbose hasn't changed over yet because a) container query support is still relatively new, and b) we haven't been able to use dynamic variables for container query breakpoints yet. 69 | 70 | ## What to know if you're an existing user of Tachyons Verbose (v4 from 2018) 71 | 72 | - Most of the stuff is still the same! Don't fret about having to learn a completely new thing. 73 | - You can now adjust scales, sizes and colors in `src/_variables.css`. 74 | - The font scale (`f1` or `fontsize-2`) runs linearly with `1` being the smallest and `12` being the biggest. 75 | - The colors have new names. E.g. `backgroundcolor-red` is no longer a class, but you get a whole spectrum from `backgroundcolor-red1` to `backgroundcolor-red11`. 76 | - Media queries are no longer referenced with a simple `-m` or `l` suffix. They are now referenced as `-mediaM` and `mediaL`. Oh and `-ns` is now `-mediaS`. 77 | - But hey, there's a new media query size at `mediaXL`. 78 | - The legacy v4 files are the `css` folder in case previous users want to reference them or want to link to both the legacy and new versions at the same time for a more gradual transition. 79 | - We renamed our CSS files to `tachyons-verbose.css`. 80 | 81 | ## Getting Started 82 | 83 | ### Local setup 84 | 85 | Download the repo from github and install dependencies through npm. 86 | 87 | ``` 88 | cd tachyons-verbose 89 | npm install 90 | ``` 91 | 92 | #### Dev 93 | 94 | If you want to just use everything in tachyons/src as a jumping off point and edit all the code yourself, you can compile all of your wonderful changes by running 95 | 96 | ```npm start``` 97 | 98 | This will output both minified and unminified versions of the css to the css directory and watch the src directory for changes. It's aliased to the command: 99 | 100 | If you want to recompile everything from src everytime you save a change - you can run the following command, which will compile and minify the css 101 | 102 | ```npm run build:watch``` 103 | 104 | If you'd like to just build the css once without watching the src directory run 105 | 106 | ```npm run build``` 107 | 108 | 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 109 | 110 | ```npm run mutations``` 111 | 112 | ## Contributing 113 | 114 | Please read our [code of conduct](https://github.com/tachyons-css/tachyons-verbose/blob/master/code-of-conduct.md) for contributors. 115 | 116 | ## Help 117 | 118 | If you have a question or need help feel free to [open an issue here](https://github.com/tachyons-css/tachyons-verbose/issues/new). 119 | 120 | ## About Tachyons 121 | 122 | For more information about (non-verbose) Tachyons, check out [tachyons.io](https://tachyons.io/) and its docs section at [https://tachyons.io/docs/](https://tachyons.io/docs/). -------------------------------------------------------------------------------- /src/_normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /src/_grid-row.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Grid Row 4 | Docs: http://tachyons.io/docs/layout/grid-column-row 5 | 6 | This sets the width of the element via declaring how many columns wide it should be 7 | 8 | Base: 9 | cols = columns 10 | 11 | */ 12 | 13 | .gridrow-auto { grid-row: auto; } 14 | 15 | .gridrowstart-1 { grid-row-start: 1; } 16 | .gridrowstart-2 { grid-row-start: 2; } 17 | .gridrowstart-3 { grid-row-start: 3; } 18 | .gridrowstart-4 { grid-row-start: 4; } 19 | .gridrowstart-5 { grid-row-start: 5; } 20 | .gridrowstart-6 { grid-row-start: 6; } 21 | .gridrowstart-7 { grid-row-start: 7; } 22 | .gridrowstart-8 { grid-row-start: 8; } 23 | .gridrowstart-9 { grid-row-start: 9; } 24 | .gridrowstart-10 { grid-row-start: 10; } 25 | .gridrowstart-11 { grid-row-start: 11; } 26 | .gridrowstart-12 { grid-row-start: 12; } 27 | .gridrowstart-13 { grid-row-start: 13; } 28 | .gridrowstart-14 { grid-row-start: 14; } 29 | .gridrowstart-15 { grid-row-start: 15; } 30 | .gridrowstart-16 { grid-row-start: 16; } 31 | 32 | .gridrowend-1 { grid-row-end: 1; } 33 | .gridrowend-2 { grid-row-end: 2; } 34 | .gridrowend-3 { grid-row-end: 3; } 35 | .gridrowend-4 { grid-row-end: 4; } 36 | .gridrowend-5 { grid-row-end: 5; } 37 | .gridrowend-6 { grid-row-end: 6; } 38 | .gridrowend-7 { grid-row-end: 7; } 39 | .gridrowend-8 { grid-row-end: 8; } 40 | .gridrowend-9 { grid-row-end: 9; } 41 | .gridrowend-10 { grid-row-end: 10; } 42 | .gridrowend-11 { grid-row-end: 11; } 43 | .gridrowend-12 { grid-row-end: 12; } 44 | .gridrowend-13 { grid-row-end: 13; } 45 | .gridrowend-14 { grid-row-end: 14; } 46 | .gridrowend-15 { grid-row-end: 15; } 47 | .gridrowend-16 { grid-row-end: 16; } 48 | 49 | @media (--breakpoint-small) { 50 | .gridrow-auto-mediaS { grid-row: auto; } 51 | 52 | .gridrowstart-1-mediaS { grid-row-start: 1; } 53 | .gridrowstart-2-mediaS { grid-row-start: 2; } 54 | .gridrowstart-3-mediaS { grid-row-start: 3; } 55 | .gridrowstart-4-mediaS { grid-row-start: 4; } 56 | .gridrowstart-5-mediaS { grid-row-start: 5; } 57 | .gridrowstart-6-mediaS { grid-row-start: 6; } 58 | .gridrowstart-7-mediaS { grid-row-start: 7; } 59 | .gridrowstart-8-mediaS { grid-row-start: 8; } 60 | .gridrowstart-9-mediaS { grid-row-start: 9; } 61 | .gridrowstart-10-mediaS { grid-row-start: 10; } 62 | .gridrowstart-11-mediaS { grid-row-start: 11; } 63 | .gridrowstart-12-mediaS { grid-row-start: 12; } 64 | .gridrowstart-13-mediaS { grid-row-start: 13; } 65 | .gridrowstart-14-mediaS { grid-row-start: 14; } 66 | .gridrowstart-15-mediaS { grid-row-start: 15; } 67 | .gridrowstart-16-mediaS { grid-row-start: 16; } 68 | 69 | .gridrowend-1-mediaS { grid-row-end: 1; } 70 | .gridrowend-2-mediaS { grid-row-end: 2; } 71 | .gridrowend-3-mediaS { grid-row-end: 3; } 72 | .gridrowend-4-mediaS { grid-row-end: 4; } 73 | .gridrowend-5-mediaS { grid-row-end: 5; } 74 | .gridrowend-6-mediaS { grid-row-end: 6; } 75 | .gridrowend-7-mediaS { grid-row-end: 7; } 76 | .gridrowend-8-mediaS { grid-row-end: 8; } 77 | .gridrowend-9-mediaS { grid-row-end: 9; } 78 | .gridrowend-10-mediaS { grid-row-end: 10; } 79 | .gridrowend-11-mediaS { grid-row-end: 11; } 80 | .gridrowend-12-mediaS { grid-row-end: 12; } 81 | .gridrowend-13-mediaS { grid-row-end: 13; } 82 | .gridrowend-14-mediaS { grid-row-end: 14; } 83 | .gridrowend-15-mediaS { grid-row-end: 15; } 84 | .gridrowend-16-mediaS { grid-row-end: 16; } 85 | } 86 | 87 | @media (--breakpoint-medium) { 88 | .gridrow-auto-mediaM { grid-row: auto; } 89 | 90 | .gridrowstart-1-mediaM { grid-row-start: 1; } 91 | .gridrowstart-2-mediaM { grid-row-start: 2; } 92 | .gridrowstart-3-mediaM { grid-row-start: 3; } 93 | .gridrowstart-4-mediaM { grid-row-start: 4; } 94 | .gridrowstart-5-mediaM { grid-row-start: 5; } 95 | .gridrowstart-6-mediaM { grid-row-start: 6; } 96 | .gridrowstart-7-mediaM { grid-row-start: 7; } 97 | .gridrowstart-8-mediaM { grid-row-start: 8; } 98 | .gridrowstart-9-mediaM { grid-row-start: 9; } 99 | .gridrowstart-10-mediaM { grid-row-start: 10; } 100 | .gridrowstart-11-mediaM { grid-row-start: 11; } 101 | .gridrowstart-12-mediaM { grid-row-start: 12; } 102 | .gridrowstart-13-mediaM { grid-row-start: 13; } 103 | .gridrowstart-14-mediaM { grid-row-start: 14; } 104 | .gridrowstart-15-mediaM { grid-row-start: 15; } 105 | .gridrowstart-16-mediaM { grid-row-start: 16; } 106 | 107 | .gridrowend-1-mediaM { grid-row-end: 1; } 108 | .gridrowend-2-mediaM { grid-row-end: 2; } 109 | .gridrowend-3-mediaM { grid-row-end: 3; } 110 | .gridrowend-4-mediaM { grid-row-end: 4; } 111 | .gridrowend-5-mediaM { grid-row-end: 5; } 112 | .gridrowend-6-mediaM { grid-row-end: 6; } 113 | .gridrowend-7-mediaM { grid-row-end: 7; } 114 | .gridrowend-8-mediaM { grid-row-end: 8; } 115 | .gridrowend-9-mediaM { grid-row-end: 9; } 116 | .gridrowend-10-mediaM { grid-row-end: 10; } 117 | .gridrowend-11-mediaM { grid-row-end: 11; } 118 | .gridrowend-12-mediaM { grid-row-end: 12; } 119 | .gridrowend-13-mediaM { grid-row-end: 13; } 120 | .gridrowend-14-mediaM { grid-row-end: 14; } 121 | .gridrowend-15-mediaM { grid-row-end: 15; } 122 | .gridrowend-16-mediaM { grid-row-end: 16; } 123 | } 124 | 125 | @media (--breakpoint-large) { 126 | .gridrow-auto-mediaL { grid-row: auto; } 127 | 128 | .gridrowstart-1-mediaL { grid-row-start: 1; } 129 | .gridrowstart-2-mediaL { grid-row-start: 2; } 130 | .gridrowstart-3-mediaL { grid-row-start: 3; } 131 | .gridrowstart-4-mediaL { grid-row-start: 4; } 132 | .gridrowstart-5-mediaL { grid-row-start: 5; } 133 | .gridrowstart-6-mediaL { grid-row-start: 6; } 134 | .gridrowstart-7-mediaL { grid-row-start: 7; } 135 | .gridrowstart-8-mediaL { grid-row-start: 8; } 136 | .gridrowstart-9-mediaL { grid-row-start: 9; } 137 | .gridrowstart-10-mediaL { grid-row-start: 10; } 138 | .gridrowstart-11-mediaL { grid-row-start: 11; } 139 | .gridrowstart-12-mediaL { grid-row-start: 12; } 140 | .gridrowstart-13-mediaL { grid-row-start: 13; } 141 | .gridrowstart-14-mediaL { grid-row-start: 14; } 142 | .gridrowstart-15-mediaL { grid-row-start: 15; } 143 | .gridrowstart-16-mediaL { grid-row-start: 16; } 144 | 145 | .gridrowend-1-mediaL { grid-row-end: 1; } 146 | .gridrowend-2-mediaL { grid-row-end: 2; } 147 | .gridrowend-3-mediaL { grid-row-end: 3; } 148 | .gridrowend-4-mediaL { grid-row-end: 4; } 149 | .gridrowend-5-mediaL { grid-row-end: 5; } 150 | .gridrowend-6-mediaL { grid-row-end: 6; } 151 | .gridrowend-7-mediaL { grid-row-end: 7; } 152 | .gridrowend-8-mediaL { grid-row-end: 8; } 153 | .gridrowend-9-mediaL { grid-row-end: 9; } 154 | .gridrowend-10-mediaL { grid-row-end: 10; } 155 | .gridrowend-11-mediaL { grid-row-end: 11; } 156 | .gridrowend-12-mediaL { grid-row-end: 12; } 157 | .gridrowend-13-mediaL { grid-row-end: 13; } 158 | .gridrowend-14-mediaL { grid-row-end: 14; } 159 | .gridrowend-15-mediaL { grid-row-end: 15; } 160 | .gridrowend-16-mediaL { grid-row-end: 16; } 161 | } 162 | 163 | @media (--breakpoint-xlarge) { 164 | .gridrow-auto-mediaXL { grid-row: auto; } 165 | 166 | .gridrowstart-1-mediaXL { grid-row-start: 1; } 167 | .gridrowstart-2-mediaXL { grid-row-start: 2; } 168 | .gridrowstart-3-mediaXL { grid-row-start: 3; } 169 | .gridrowstart-4-mediaXL { grid-row-start: 4; } 170 | .gridrowstart-5-mediaXL { grid-row-start: 5; } 171 | .gridrowstart-6-mediaXL { grid-row-start: 6; } 172 | .gridrowstart-7-mediaXL { grid-row-start: 7; } 173 | .gridrowstart-8-mediaXL { grid-row-start: 8; } 174 | .gridrowstart-9-mediaXL { grid-row-start: 9; } 175 | .gridrowstart-10-mediaXL { grid-row-start: 10; } 176 | .gridrowstart-11-mediaXL { grid-row-start: 11; } 177 | .gridrowstart-12-mediaXL { grid-row-start: 12; } 178 | .gridrowstart-13-mediaXL { grid-row-start: 13; } 179 | .gridrowstart-14-mediaXL { grid-row-start: 14; } 180 | .gridrowstart-15-mediaXL { grid-row-start: 15; } 181 | .gridrowstart-16-mediaXL { grid-row-start: 16; } 182 | 183 | .gridrowend-1-mediaXL { grid-row-end: 1; } 184 | .gridrowend-2-mediaXL { grid-row-end: 2; } 185 | .gridrowend-3-mediaXL { grid-row-end: 3; } 186 | .gridrowend-4-mediaXL { grid-row-end: 4; } 187 | .gridrowend-5-mediaXL { grid-row-end: 5; } 188 | .gridrowend-6-mediaXL { grid-row-end: 6; } 189 | .gridrowend-7-mediaXL { grid-row-end: 7; } 190 | .gridrowend-8-mediaXL { grid-row-end: 8; } 191 | .gridrowend-9-mediaXL { grid-row-end: 9; } 192 | .gridrowend-10-mediaXL { grid-row-end: 10; } 193 | .gridrowend-11-mediaXL { grid-row-end: 11; } 194 | .gridrowend-12-mediaXL { grid-row-end: 12; } 195 | .gridrowend-13-mediaXL { grid-row-end: 13; } 196 | .gridrowend-14-mediaXL { grid-row-end: 14; } 197 | .gridrowend-15-mediaXL { grid-row-end: 15; } 198 | .gridrowend-16-mediaXL { grid-row-end: 16; } 199 | } 200 | -------------------------------------------------------------------------------- /src/_border-radius.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER RADIUS 4 | Docs: http://tachyons.io/docs/themes/border-radius/ 5 | Interactive examples: https://components.ai/u/system/cl7crcjia022509masfvq73ny/cl7ztbozs1650909l6rllmvpko 6 | 7 | */ 8 | 9 | 10 | .borderradius-primary { border-radius: var( --border-radius, 6px ); } 11 | .borderradius-0 { border-radius: var( --border-radius-0, 0 ); } 12 | .borderradius-1 { border-radius: var( --border-radius-1, 4px ); } 13 | .borderradius-2 { border-radius: var( --border-radius-2, 6px ); } 14 | .borderradius-3 { border-radius: var( --border-radius-3, 8px ); } 15 | .borderradius-4 { border-radius: var( --border-radius-4, 12px ); } 16 | .borderradius-5 { border-radius: var( --border-radius-5, 16px ); } 17 | .borderradius-6 { border-radius: var( --border-radius-6, 20px ); } 18 | .borderradius-7 { border-radius: var( --border-radius-7, 24px ); } 19 | .borderradius-8 { border-radius: var( --border-radius-8, 32px ); } 20 | .borderradius-9 { border-radius: var( --border-radius-9, 48px ); } 21 | .borderradius-10 { border-radius: var( --border-radius-10, 64px ); } 22 | .borderradius-11 { border-radius: var( --border-radius-11, 9999px ); } 23 | .borderradius-bottom { border-top-left-radius: 0; border-top-right-radius: 0; } 24 | .borderradius-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } 25 | .borderradius-right { border-top-left-radius: 0; border-bottom-left-radius: 0; } 26 | .borderradius-left { border-top-right-radius: 0; border-bottom-right-radius: 0; } 27 | .borderradius-inherit { border-radius: inherit; } 28 | .borderradius-initial { border-radius: initial; } 29 | .borderradius-unset { border-radius: unset; } 30 | 31 | 32 | @media (--breakpoint-small) { 33 | .borderradius-primary-mediaS { border-radius: var( --border-radius, 6px ); } 34 | .borderradius-0-mediaS { border-radius: var( --border-radius-0, 0 ); } 35 | .borderradius-1-mediaS { border-radius: var( --border-radius-1, 4px ); } 36 | .borderradius-2-mediaS { border-radius: var( --border-radius-2, 6px ); } 37 | .borderradius-3-mediaS { border-radius: var( --border-radius-3, 8px ); } 38 | .borderradius-4-mediaS { border-radius: var( --border-radius-4, 12px ); } 39 | .borderradius-5-mediaS { border-radius: var( --border-radius-5, 16px ); } 40 | .borderradius-6-mediaS { border-radius: var( --border-radius-6, 20px ); } 41 | .borderradius-7-mediaS { border-radius: var( --border-radius-7, 24px ); } 42 | .borderradius-8-mediaS { border-radius: var( --border-radius-8, 32px ); } 43 | .borderradius-9-mediaS { border-radius: var( --border-radius-9, 48px ); } 44 | .borderradius-10-mediaS { border-radius: var( --border-radius-10, 64px ); } 45 | .borderradius-11-mediaS { border-radius: var( --border-radius-11, 9999px ); } 46 | .borderradius-bottom-mediaS { border-top-left-radius: 0; border-top-right-radius: 0; } 47 | .borderradius-top-mediaS { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } 48 | .borderradius-right-mediaS { border-top-left-radius: 0; border-bottom-left-radius: 0; } 49 | .borderradius-left-mediaS { border-top-right-radius: 0; border-bottom-right-radius: 0; } 50 | .borderradius-inherit-mediaS { border-radius: inherit; } 51 | .borderradius-initial-mediaS { border-radius: initial; } 52 | .borderradius-unset-mediaS { border-radius: unset; } 53 | } 54 | 55 | @media (--breakpoint-medium) { 56 | .borderradius-primary-mediaM { border-radius: var( --border-radius, 6px ); } 57 | .borderradius-0-mediaM { border-radius: var( --border-radius-0, 0 ); } 58 | .borderradius-1-mediaM { border-radius: var( --border-radius-1, 4px ); } 59 | .borderradius-2-mediaM { border-radius: var( --border-radius-2, 6px ); } 60 | .borderradius-3-mediaM { border-radius: var( --border-radius-3, 8px ); } 61 | .borderradius-4-mediaM { border-radius: var( --border-radius-4, 12px ); } 62 | .borderradius-5-mediaM { border-radius: var( --border-radius-5, 16px ); } 63 | .borderradius-6-mediaM { border-radius: var( --border-radius-6, 20px ); } 64 | .borderradius-7-mediaM { border-radius: var( --border-radius-7, 24px ); } 65 | .borderradius-8-mediaM { border-radius: var( --border-radius-8, 32px ); } 66 | .borderradius-9-mediaM { border-radius: var( --border-radius-9, 48px ); } 67 | .borderradius-10-mediaM { border-radius: var( --border-radius-10, 64px ); } 68 | .borderradius-11-mediaM { border-radius: var( --border-radius-11, 9999px ); } 69 | .borderradius-bottom-mediaM { border-top-left-radius: 0; border-top-right-radius: 0; } 70 | .borderradius-top-mediaM { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } 71 | .borderradius-right-mediaM { border-top-left-radius: 0; border-bottom-left-radius: 0; } 72 | .borderradius-left-mediaM { border-top-right-radius: 0; border-bottom-right-radius: 0; } 73 | .borderradius-inherit-mediaM { border-radius: inherit; } 74 | .borderradius-initial-mediaM { border-radius: initial; } 75 | .borderradius-unset-mediaM { border-radius: unset; } 76 | } 77 | 78 | @media (--breakpoint-large) { 79 | .borderradius-primary-mediaL { border-radius: var( --border-radius, 6px ); } 80 | .borderradius-0-mediaL { border-radius: var( --border-radius-0, 0 ); } 81 | .borderradius-1-mediaL { border-radius: var( --border-radius-1, 4px ); } 82 | .borderradius-2-mediaL { border-radius: var( --border-radius-2, 6px ); } 83 | .borderradius-3-mediaL { border-radius: var( --border-radius-3, 8px ); } 84 | .borderradius-4-mediaL { border-radius: var( --border-radius-4, 12px ); } 85 | .borderradius-5-mediaL { border-radius: var( --border-radius-5, 16px ); } 86 | .borderradius-6-mediaL { border-radius: var( --border-radius-6, 20px ); } 87 | .borderradius-7-mediaL { border-radius: var( --border-radius-7, 24px ); } 88 | .borderradius-8-mediaL { border-radius: var( --border-radius-8, 32px ); } 89 | .borderradius-9-mediaL { border-radius: var( --border-radius-9, 48px ); } 90 | .borderradius-10-mediaL { border-radius: var( --border-radius-10, 64px ); } 91 | .borderradius-11-mediaL { border-radius: var( --border-radius-11, 9999px ); } 92 | .borderradius-bottom-mediaL { border-top-left-radius: 0; border-top-right-radius: 0; } 93 | .borderradius-top-mediaL { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } 94 | .borderradius-right-mediaL { border-top-left-radius: 0; border-bottom-left-radius: 0; } 95 | .borderradius-left-mediaL { border-top-right-radius: 0; border-bottom-right-radius: 0; } 96 | .borderradius-inherit-mediaL { border-radius: inherit; } 97 | .borderradius-initial-mediaL { border-radius: initial; } 98 | .borderradius-unset-mediaL { border-radius: unset; } 99 | } 100 | 101 | 102 | @media (--breakpoint-xlarge) { 103 | .borderradius-primary-mediaXL { border-radius: var( --border-radius, 6px ); } 104 | .borderradius-0-mediaXL { border-radius: var( --border-radius-0, 0 ); } 105 | .borderradius-1-mediaXL { border-radius: var( --border-radius-1, 4px ); } 106 | .borderradius-2-mediaXL { border-radius: var( --border-radius-2, 6px ); } 107 | .borderradius-3-mediaXL { border-radius: var( --border-radius-3, 8px ); } 108 | .borderradius-4-mediaXL { border-radius: var( --border-radius-4, 12px ); } 109 | .borderradius-5-mediaXL { border-radius: var( --border-radius-5, 16px ); } 110 | .borderradius-6-mediaXL { border-radius: var( --border-radius-6, 20px ); } 111 | .borderradius-7-mediaXL { border-radius: var( --border-radius-7, 24px ); } 112 | .borderradius-8-mediaXL { border-radius: var( --border-radius-8, 32px ); } 113 | .borderradius-9-mediaXL { border-radius: var( --border-radius-9, 48px ); } 114 | .borderradius-10-mediaXL { border-radius: var( --border-radius-10, 64px ); } 115 | .borderradius-11-mediaXL { border-radius: var( --border-radius-11, 9999px ); } 116 | .borderradius-bottom-mediaXL { border-top-left-radius: 0; border-top-right-radius: 0; } 117 | .borderradius-top-mediaXL { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } 118 | .borderradius-right-mediaXL { border-top-left-radius: 0; border-bottom-left-radius: 0; } 119 | .borderradius-left-mediaXL { border-top-right-radius: 0; border-bottom-right-radius: 0; } 120 | .borderradius-inherit-mediaXL { border-radius: inherit; } 121 | .borderradius-initial-mediaXL { border-radius: initial; } 122 | .borderradius-unset-mediaXL { border-radius: unset; } 123 | } 124 | -------------------------------------------------------------------------------- /src/_heights.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | HEIGHTS 4 | Docs: http://tachyons.io/docs/layout/heights/ 5 | */ 6 | 7 | /* Height Scale */ 8 | 9 | .height-0 { height: var(--size-0, 0); } 10 | .height-1 { height: var(--size-1, 1rem); } 11 | .height-2 { height: var(--size-2, 2rem); } 12 | .height-3 { height: var(--size-3, 3rem); } 13 | .height-4 { height: var(--size-4, 4rem); } 14 | .height-5 { height: var(--size-5, 8rem); } 15 | .height-6 { height: var(--size-6, 16rem); } 16 | .height-7 { height: var(--size-7, 32rem); } 17 | .height-8 { height: var(--size-8, 64rem); } 18 | 19 | /* Height Scale (Tachyons Verbose-specific) */ 20 | 21 | .height-xxxsmall { height: var(--size-xxxsmall); } 22 | .height-xxsmall { height: var(--size-xxsmall); } 23 | .height-xsmall { height: var(--size-xsmall); } 24 | .height-small { height: var(--size-small); } 25 | .height-medium { height: var(--size-medium); } 26 | .height-large { height: var(--size-large); } 27 | .height-xlarge { height: var(--size-xlarge); } 28 | .height-xxlarge { height: var(--size-xxlarge); } 29 | .height-xxxlarge { height: var(--size-xxxlarge); } 30 | .height-xxxxlarge { height: var(--size-xxxxlarge); } 31 | 32 | /* Height Percentages - Based off of height of parent */ 33 | 34 | .height-25percent { height: 25%; } 35 | .height-50percent { height: 50%; } 36 | .height-75percent { height: 75%; } 37 | .height-100percent { height: 100%; } 38 | 39 | .minheight-100percent { min-height: 100%; } 40 | 41 | /* Screen Height Percentage */ 42 | 43 | .height-25vh { height: 25vh; } 44 | .height-50vh { height: 50vh; } 45 | .height-75vh { height: 75vh; } 46 | .height-100vh { height: 100vh; } 47 | 48 | .minheight-100vh { min-height: 100vh; } 49 | 50 | /* String Properties */ 51 | 52 | .height-auto { height: auto; } 53 | .height-inherit { height: inherit; } 54 | 55 | 56 | @media (--breakpoint-small) { 57 | .height-0-mediaS { height: var(--size-0, 0); } 58 | .height-1-mediaS { height: var(--size-1, 1rem); } 59 | .height-2-mediaS { height: var(--size-2, 2rem); } 60 | .height-3-mediaS { height: var(--size-3, 3rem); } 61 | .height-4-mediaS { height: var(--size-4, 4rem); } 62 | .height-5-mediaS { height: var(--size-5, 8rem); } 63 | .height-6-mediaS { height: var(--size-6, 16rem); } 64 | .height-7-mediaS { height: var(--size-7, 32rem); } 65 | .height-8-mediaS { height: var(--size-8, 64rem); } 66 | 67 | .height-xxxsmall-mediaS { height: var(--size-xxxsmall); } 68 | .height-xxsmall-mediaS { height: var(--size-xxsmall); } 69 | .height-xsmall-mediaS { height: var(--size-xsmall); } 70 | .height-small-mediaS { height: var(--size-small); } 71 | .height-medium-mediaS { height: var(--size-medium); } 72 | .height-large-mediaS { height: var(--size-large); } 73 | .height-xlarge-mediaS { height: var(--size-xlarge); } 74 | .height-xxlarge-mediaS { height: var(--size-xxlarge); } 75 | .height-xxxlarge-mediaS { height: var(--size-xxxlarge); } 76 | .height-xxxxlarge-mediaS { height: var(--size-xxxxlarge); } 77 | 78 | .height-25percent-mediaS { height: 25%; } 79 | .height-50percent-mediaS { height: 50%; } 80 | .height-75percent-mediaS { height: 75%; } 81 | .height-100percent-mediaS { height: 100%; } 82 | 83 | .minheight-100percent-mediaS { min-height: 100%; } 84 | 85 | .height-25vh-mediaS { height: 25vh; } 86 | .height-50vh-mediaS { height: 50vh; } 87 | .height-75vh-mediaS { height: 75vh; } 88 | .height-100vh-mediaS { height: 100vh; } 89 | 90 | .minheight-100vh-mediaS { min-height: 100vh; } 91 | 92 | .height-auto-mediaS { height: auto; } 93 | .height-inherit-mediaS { height: inherit; } 94 | } 95 | @media (--breakpoint-medium) { 96 | .height-0-mediaM { height: var(--size-0, 0); } 97 | .height-1-mediaM { height: var(--size-1, 1rem); } 98 | .height-2-mediaM { height: var(--size-2, 2rem); } 99 | .height-3-mediaM { height: var(--size-3, 3rem); } 100 | .height-4-mediaM { height: var(--size-4, 4rem); } 101 | .height-5-mediaM { height: var(--size-5, 8rem); } 102 | .height-6-mediaM { height: var(--size-6, 16rem); } 103 | .height-7-mediaM { height: var(--size-7, 32rem); } 104 | .height-8-mediaM { height: var(--size-8, 64rem); } 105 | 106 | .height-xxxsmall-mediaM { height: var(--size-xxxsmall); } 107 | .height-xxsmall-mediaM { height: var(--size-xxsmall); } 108 | .height-xsmall-mediaM { height: var(--size-xsmall); } 109 | .height-small-mediaM { height: var(--size-small); } 110 | .height-medium-mediaM { height: var(--size-medium); } 111 | .height-large-mediaM { height: var(--size-large); } 112 | .height-xlarge-mediaM { height: var(--size-xlarge); } 113 | .height-xxlarge-mediaM { height: var(--size-xxlarge); } 114 | .height-xxxlarge-mediaM { height: var(--size-xxxlarge); } 115 | .height-xxxxlarge-mediaM { height: var(--size-xxxxlarge); } 116 | 117 | .height-25percent-mediaM { height: 25%; } 118 | .height-50percent-mediaM { height: 50%; } 119 | .height-75percent-mediaM { height: 75%; } 120 | .height-100percent-mediaM { height: 100%; } 121 | 122 | .minheight-100percent-mediaM { min-height: 100%; } 123 | 124 | .height-25vh-mediaM { height: 25vh; } 125 | .height-50vh-mediaM { height: 50vh; } 126 | .height-75vh-mediaM { height: 75vh; } 127 | .height-100vh-mediaM { height: 100vh; } 128 | 129 | .minheight-100vh-mediaM { min-height: 100vh; } 130 | 131 | .height-auto-mediaM { height: auto; } 132 | .height-inherit-mediaM { height: inherit; } 133 | } 134 | @media (--breakpoint-large) { 135 | .height-0-mediaL { height: var(--size-0, 0); } 136 | .height-1-mediaL { height: var(--size-1, 1rem); } 137 | .height-2-mediaL { height: var(--size-2, 2rem); } 138 | .height-3-mediaL { height: var(--size-3, 3rem); } 139 | .height-4-mediaL { height: var(--size-4, 4rem); } 140 | .height-5-mediaL { height: var(--size-5, 8rem); } 141 | .height-6-mediaL { height: var(--size-6, 16rem); } 142 | .height-7-mediaL { height: var(--size-7, 32rem); } 143 | .height-8-mediaL { height: var(--size-8, 64rem); } 144 | 145 | .height-xxxsmall-mediaL { height: var(--size-xxxsmall); } 146 | .height-xxsmall-mediaL { height: var(--size-xxsmall); } 147 | .height-xsmall-mediaL { height: var(--size-xsmall); } 148 | .height-small-mediaL { height: var(--size-small); } 149 | .height-medium-mediaL { height: var(--size-medium); } 150 | .height-large-mediaL { height: var(--size-large); } 151 | .height-xlarge-mediaL { height: var(--size-xlarge); } 152 | .height-xxlarge-mediaL { height: var(--size-xxlarge); } 153 | .height-xxxlarge-mediaL { height: var(--size-xxxlarge); } 154 | .height-xxxxlarge-mediaL { height: var(--size-xxxxlarge); } 155 | 156 | .height-25percent-mediaL { height: 25%; } 157 | .height-50percent-mediaL { height: 50%; } 158 | .height-75percent-mediaL { height: 75%; } 159 | .height-100percent-mediaL { height: 100%; } 160 | 161 | .minheight-100percent-mediaL { min-height: 100%; } 162 | 163 | .height-25vh-mediaL { height: 25vh; } 164 | .height-50vh-mediaL { height: 50vh; } 165 | .height-75vh-mediaL { height: 75vh; } 166 | .height-100vh-mediaL { height: 100vh; } 167 | 168 | .minheight-100vh-mediaL { min-height: 100vh; } 169 | 170 | .height-auto-mediaL { height: auto; } 171 | .height-inherit-mediaL { height: inherit; } 172 | } 173 | 174 | @media (--breakpoint-xlarge) { 175 | .height-0-mediaXL { height: var(--size-0, 0); } 176 | .height-1-mediaXL { height: var(--size-1, 1rem); } 177 | .height-2-mediaXL { height: var(--size-2, 2rem); } 178 | .height-3-mediaXL { height: var(--size-3, 3rem); } 179 | .height-4-mediaXL { height: var(--size-4, 4rem); } 180 | .height-5-mediaXL { height: var(--size-5, 8rem); } 181 | .height-6-mediaXL { height: var(--size-6, 16rem); } 182 | .height-7-mediaXL { height: var(--size-7, 32rem); } 183 | .height-8-mediaXL { height: var(--size-8, 64rem); } 184 | 185 | .height-xxxsmall-mediaXL { height: var(--size-xxxsmall); } 186 | .height-xxsmall-mediaXL { height: var(--size-xxsmall); } 187 | .height-xsmall-mediaXL { height: var(--size-xsmall); } 188 | .height-small-mediaXL { height: var(--size-small); } 189 | .height-medium-mediaXL { height: var(--size-medium); } 190 | .height-large-mediaXL { height: var(--size-large); } 191 | .height-xlarge-mediaXL { height: var(--size-xlarge); } 192 | .height-xxlarge-mediaXL { height: var(--size-xxlarge); } 193 | .height-xxxlarge-mediaXL { height: var(--size-xxxlarge); } 194 | .height-xxxxlarge-mediaXL { height: var(--size-xxxxlarge); } 195 | 196 | .height-25percent-mediaXL { height: 25%; } 197 | .height-50percent-mediaXL { height: 50%; } 198 | .height-75percent-mediaXL { height: 75%; } 199 | .height-100percent-mediaXL { height: 100%; } 200 | 201 | .minheight-100percent-mediaXL { min-height: 100%; } 202 | 203 | .height-25vh-mediaXL { height: 25vh; } 204 | .height-50vh-mediaXL { height: 50vh; } 205 | .height-75vh-mediaXL { height: 75vh; } 206 | .height-100vh-mediaXL { height: 100vh; } 207 | 208 | .minheight-100vh-mediaXL { min-height: 100vh; } 209 | 210 | .height-auto-mediaXL { height: auto; } 211 | .height-inherit-mediaXL { height: inherit; } 212 | } -------------------------------------------------------------------------------- /src/_widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WIDTHS 4 | Docs: http://tachyons.io/docs/layout/widths/ 5 | 6 | Modifiers 7 | -third = 100% / 3 (Not supported in opera mini or IE8) 8 | -twothirds = 100% / 1.5 (Not supported in opera mini or IE8) 9 | -auto = string value auto 10 | 11 | */ 12 | 13 | /* Width Scale */ 14 | 15 | .width-0 { width: var(--size-0, 0); } 16 | .width-1 { width: var(--size-1, 1rem); } 17 | .width-2 { width: var(--size-2, 2rem); } 18 | .width-3 { width: var(--size-3, 3rem); } 19 | .width-4 { width: var(--size-4, 4rem); } 20 | .width-5 { width: var(--size-5, 8rem); } 21 | .width-6 { width: var(--size-6, 16rem); } 22 | .width-7 { width: var(--size-7, 32rem); } 23 | .width-8 { width: var(--size-8, 64rem); } 24 | 25 | /* Width Scale (Tachyons Verbose specific) */ 26 | 27 | .width-xxxsmall { width: var(--size-xxxsmall); } 28 | .width-xxsmall { width: var(--size-xxsmall); } 29 | .width-xsmall { width: var(--size-xsmall); } 30 | .width-small { width: var(--size-small); } 31 | .width-medium { width: var(--size-medium); } 32 | .width-large { width: var(--size-large); } 33 | .width-xlarge { width: var(--size-xlarge); } 34 | .width-xxlarge { width: var(--size-xxlarge); } 35 | .width-xxxlarge { width: var(--size-xxxlarge); } 36 | .width-xxxxlarge { width: var(--size-xxxxlarge); } 37 | 38 | .width-third { width: calc(100% / 3); } 39 | .width-twothirds { width: calc(100% / 1.5); } 40 | .width-auto { width: auto; } 41 | 42 | .width-10percent { width: 10%; } 43 | .width-20percent { width: 20%; } 44 | .width-25percent { width: 25%; } 45 | .width-30percent { width: 30%; } 46 | .width-33percent { width: 33%; } 47 | .width-34percent { width: 34%; } 48 | .width-40percent { width: 40%; } 49 | .width-50percent { width: 50%; } 50 | .width-60percent { width: 60%; } 51 | .width-67percent { width: 67%; } 52 | .width-70percent { width: 70%; } 53 | .width-75percent { width: 75%; } 54 | .width-80percent { width: 80%; } 55 | .width-90percent { width: 90%; } 56 | .width-100percent { width: 100%; } 57 | 58 | @media (--breakpoint-small) { 59 | .width-0-mediaS { width: var(--size-0, 0); } 60 | .width-1-mediaS { width: var(--size-1, 1rem); } 61 | .width-2-mediaS { width: var(--size-2, 2rem); } 62 | .width-3-mediaS { width: var(--size-3, 3rem); } 63 | .width-4-mediaS { width: var(--size-4, 4rem); } 64 | .width-5-mediaS { width: var(--size-5, 8rem); } 65 | .width-6-mediaS { width: var(--size-6, 16rem); } 66 | .width-7-mediaS { width: var(--size-7, 32rem); } 67 | .width-8-mediaS { width: var(--size-8, 64rem); } 68 | 69 | .width-xxxsmall-mediaS { width: var(--size-xxxsmall); } 70 | .width-xxsmall-mediaS { width: var(--size-xxsmall); } 71 | .width-xsmall-mediaS { width: var(--size-xsmall); } 72 | .width-small-mediaS { width: var(--size-small); } 73 | .width-medium-mediaS { width: var(--size-medium); } 74 | .width-large-mediaS { width: var(--size-large); } 75 | .width-xlarge-mediaS { width: var(--size-xlarge); } 76 | .width-xxlarge-mediaS { width: var(--size-xxlarge); } 77 | .width-xxxlarge-mediaS { width: var(--size-xxxlarge); } 78 | .width-xxxxlarge-mediaS { width: var(--size-xxxxlarge); } 79 | 80 | .width-third-mediaS { width: calc(100% / 3); } 81 | .width-twothirds-mediaS { width: calc(100% / 1.5); } 82 | .width-auto-mediaS { width: auto; } 83 | 84 | .width-10percent-mediaS { width: 10%; } 85 | .width-20percent-mediaS { width: 20%; } 86 | .width-25percent-mediaS { width: 25%; } 87 | .width-30percent-mediaS { width: 30%; } 88 | .width-33percent-mediaS { width: 33%; } 89 | .width-34percent-mediaS { width: 34%; } 90 | .width-40percent-mediaS { width: 40%; } 91 | .width-50percent-mediaS { width: 50%; } 92 | .width-60percent-mediaS { width: 60%; } 93 | .width-67percent-mediaS { width: 67%; } 94 | .width-70percent-mediaS { width: 70%; } 95 | .width-75percent-mediaS { width: 75%; } 96 | .width-80percent-mediaS { width: 80%; } 97 | .width-90percent-mediaS { width: 90%; } 98 | .width-100percent-mediaS { width: 100%; } 99 | } 100 | 101 | @media (--breakpoint-medium) { 102 | .width-0-mediaM { width: var(--size-0, 0); } 103 | .width-1-mediaM { width: var(--size-1, 1rem); } 104 | .width-2-mediaM { width: var(--size-2, 2rem); } 105 | .width-3-mediaM { width: var(--size-3, 3rem); } 106 | .width-4-mediaM { width: var(--size-4, 4rem); } 107 | .width-5-mediaM { width: var(--size-5, 8rem); } 108 | .width-6-mediaM { width: var(--size-6, 16rem); } 109 | .width-7-mediaM { width: var(--size-7, 32rem); } 110 | .width-8-mediaM { width: var(--size-8, 64rem); } 111 | 112 | .width-xxxsmall-mediaM { width: var(--size-xxxsmall); } 113 | .width-xxsmall-mediaM { width: var(--size-xxsmall); } 114 | .width-xsmall-mediaM { width: var(--size-xsmall); } 115 | .width-small-mediaM { width: var(--size-small); } 116 | .width-medium-mediaM { width: var(--size-medium); } 117 | .width-large-mediaM { width: var(--size-large); } 118 | .width-xlarge-mediaM { width: var(--size-xlarge); } 119 | .width-xxlarge-mediaM { width: var(--size-xxlarge); } 120 | .width-xxxlarge-mediaM { width: var(--size-xxxlarge); } 121 | .width-xxxxlarge-mediaM { width: var(--size-xxxxlarge); } 122 | 123 | .width-third-mediaM { width: calc(100% / 3); } 124 | .width-twothirds-mediaM { width: calc(100% / 1.5); } 125 | .width-auto-mediaM { width: auto; } 126 | 127 | .width-10percent-mediaM { width: 10%; } 128 | .width-20percent-mediaM { width: 20%; } 129 | .width-25percent-mediaM { width: 25%; } 130 | .width-30percent-mediaM { width: 30%; } 131 | .width-33percent-mediaM { width: 33%; } 132 | .width-34percent-mediaM { width: 34%; } 133 | .width-40percent-mediaM { width: 40%; } 134 | .width-50percent-mediaM { width: 50%; } 135 | .width-60percent-mediaM { width: 60%; } 136 | .width-67percent-mediaM { width: 67%; } 137 | .width-70percent-mediaM { width: 70%; } 138 | .width-75percent-mediaM { width: 75%; } 139 | .width-80percent-mediaM { width: 80%; } 140 | .width-90percent-mediaM { width: 90%; } 141 | .width-100percent-mediaM { width: 100%; } 142 | } 143 | 144 | @media (--breakpoint-large) { 145 | .width-0-mediaL { width: var(--size-0, 0); } 146 | .width-1-mediaL { width: var(--size-1, 1rem); } 147 | .width-2-mediaL { width: var(--size-2, 2rem); } 148 | .width-3-mediaL { width: var(--size-3, 3rem); } 149 | .width-4-mediaL { width: var(--size-4, 4rem); } 150 | .width-5-mediaL { width: var(--size-5, 8rem); } 151 | .width-6-mediaL { width: var(--size-6, 16rem); } 152 | .width-7-mediaL { width: var(--size-7, 32rem); } 153 | .width-8-mediaL { width: var(--size-8, 64rem); } 154 | 155 | .width-xxxsmall-mediaL { width: var(--size-xxxsmall); } 156 | .width-xxsmall-mediaL { width: var(--size-xxsmall); } 157 | .width-xsmall-mediaL { width: var(--size-xsmall); } 158 | .width-small-mediaL { width: var(--size-small); } 159 | .width-medium-mediaL { width: var(--size-medium); } 160 | .width-large-mediaL { width: var(--size-large); } 161 | .width-xlarge-mediaL { width: var(--size-xlarge); } 162 | .width-xxlarge-mediaL { width: var(--size-xxlarge); } 163 | .width-xxxlarge-mediaL { width: var(--size-xxxlarge); } 164 | .width-xxxxlarge-mediaL { width: var(--size-xxxxlarge); } 165 | 166 | .width-third-mediaL { width: calc(100% / 3); } 167 | .width-twothirds-mediaL { width: calc(100% / 1.5); } 168 | .width-auto-mediaL { width: auto; } 169 | 170 | .width-10percent-mediaL { width: 10%; } 171 | .width-20percent-mediaL { width: 20%; } 172 | .width-25percent-mediaL { width: 25%; } 173 | .width-30percent-mediaL { width: 30%; } 174 | .width-33percent-mediaL { width: 33%; } 175 | .width-34percent-mediaL { width: 34%; } 176 | .width-40percent-mediaL { width: 40%; } 177 | .width-50percent-mediaL { width: 50%; } 178 | .width-60percent-mediaL { width: 60%; } 179 | .width-67percent-mediaL { width: 67%; } 180 | .width-70percent-mediaL { width: 70%; } 181 | .width-75percent-mediaL { width: 75%; } 182 | .width-80percent-mediaL { width: 80%; } 183 | .width-90percent-mediaL { width: 90%; } 184 | .width-100percent-mediaL { width: 100%; } 185 | } 186 | 187 | @media (--breakpoint-xlarge) { 188 | .width-0-mediaXL { width: var(--size-0, 0); } 189 | .width-1-mediaXL { width: var(--size-1, 1rem); } 190 | .width-2-mediaXL { width: var(--size-2, 2rem); } 191 | .width-3-mediaXL { width: var(--size-3, 3rem); } 192 | .width-4-mediaXL { width: var(--size-4, 4rem); } 193 | .width-5-mediaXL { width: var(--size-5, 8rem); } 194 | .width-6-mediaXL { width: var(--size-6, 16rem); } 195 | .width-7-mediaXL { width: var(--size-7, 32rem); } 196 | .width-8-mediaXL { width: var(--size-8, 64rem); } 197 | 198 | .width-xxxsmall-mediaXL { width: var(--size-xxxsmall); } 199 | .width-xxsmall-mediaXL { width: var(--size-xxsmall); } 200 | .width-xsmall-mediaXL { width: var(--size-xsmall); } 201 | .width-small-mediaXL { width: var(--size-small); } 202 | .width-medium-mediaXL { width: var(--size-medium); } 203 | .width-large-mediaXL { width: var(--size-large); } 204 | .width-xlarge-mediaXL { width: var(--size-xlarge); } 205 | .width-xxlarge-mediaXL { width: var(--size-xxlarge); } 206 | .width-xxxlarge-mediaXL { width: var(--size-xxxlarge); } 207 | .width-xxxxlarge-mediaXL { width: var(--size-xxxxlarge); } 208 | 209 | .width-third-mediaXL { width: calc(100% / 3); } 210 | .width-twothirds-mediaXL { width: calc(100% / 1.5); } 211 | .width-auto-mediaXL { width: auto; } 212 | 213 | .width-10percent-mediaXL { width: 10%; } 214 | .width-20percent-mediaXL { width: 20%; } 215 | .width-25percent-mediaXL { width: 25%; } 216 | .width-30percent-mediaXL { width: 30%; } 217 | .width-33percent-mediaXL { width: 33%; } 218 | .width-34percent-mediaXL { width: 34%; } 219 | .width-40percent-mediaXL { width: 40%; } 220 | .width-50percent-mediaXL { width: 50%; } 221 | .width-60percent-mediaXL { width: 60%; } 222 | .width-67percent-mediaXL { width: 67%; } 223 | .width-70percent-mediaXL { width: 70%; } 224 | .width-75percent-mediaXL { width: 75%; } 225 | .width-80percent-mediaXL { width: 80%; } 226 | .width-90percent-mediaXL { width: 90%; } 227 | .width-100percent-mediaXL { width: 100%; } 228 | } 229 | -------------------------------------------------------------------------------- /src/_type-scale.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TYPE SCALE 4 | Docs: http://tachyons.io/docs/typography/scale/ 5 | 6 | */ 7 | 8 | .f1, .fontsize-1 { font-size: var(--font-size-1, .75rem); } 9 | .f2, .fontsize-2 { font-size: var(--font-size-2, .875rem); } 10 | .f3, .fontsize-3 { font-size: var(--font-size-3, 1rem); } 11 | .f4, .fontsize-4 { font-size: var(--font-size-4, 1.125rem); } 12 | .f5, .fontsize-5 { font-size: var(--font-size-5, 1.25rem); } 13 | .f6, .fontsize-6 { font-size: var(--font-size-6, 1.5rem); } 14 | .f7, .fontsize-7 { font-size: var(--font-size-7, 2rem); } 15 | .f8, .fontsize-8 { font-size: var(--font-size-8, 3rem); } 16 | .f9, .fontsize-9 { font-size: var(--font-size-9, 4rem); } 17 | .f10, .fontsize-10 { font-size: var(--font-size-10, 6rem); } 18 | .f11, .fontsize-11 { font-size: var(--font-size-11, 8rem); } 19 | .f12, .fontsize-12 { font-size: var(--font-size-12, 12rem); } 20 | 21 | /* 22 | Tachyons Verbose experiment: 23 | pixel type sizes that we're used to from regular apps 24 | (human readable, but not a scale that's easy to remember) 25 | */ 26 | .fontsize-10px { font-size: var(--font-size-10px ); } 27 | .fontsize-11px { font-size: var(--font-size-11px ); } 28 | .fontsize-12px { font-size: var(--font-size-12px ); } 29 | .fontsize-14px { font-size: var(--font-size-14px ); } 30 | .fontsize-16px { font-size: var(--font-size-16px ); } 31 | .fontsize-20px { font-size: var(--font-size-20px ); } 32 | .fontsize-24px { font-size: var(--font-size-24px ); } 33 | .fontsize-32px { font-size: var(--font-size-32px ); } 34 | .fontsize-48px { font-size: var(--font-size-48px ); } 35 | .fontsize-64px { font-size: var(--font-size-64px ); } 36 | .fontsize-96px { font-size: var(--font-size-96px ); } 37 | .fontsize-128px { font-size: var(--font-size-128px ); } 38 | .fontsize-192px { font-size: var(--font-size-192px ); } 39 | .fontsize-256px { font-size: var(--font-size-256px ); } 40 | 41 | 42 | @media (--breakpoint-small){ 43 | .f1-mediaS, 44 | .fontsize-1-mediaS { font-size: var(--font-size-1, .75rem); } 45 | .f2-mediaS, 46 | .fontsize-2-mediaS { font-size: var(--font-size-2, .875rem); } 47 | .f3-mediaS, 48 | .fontsize-3-mediaS { font-size: var(--font-size-3, 1rem); } 49 | .f4-mediaS, 50 | .fontsize-4-mediaS { font-size: var(--font-size-4, 1.125rem); } 51 | .f5-mediaS, 52 | .fontsize-5-mediaS { font-size: var(--font-size-5, 1.25rem); } 53 | .f6-mediaS, 54 | .fontsize-6-mediaS { font-size: var(--font-size-6, 1.5rem); } 55 | .f7-mediaS, 56 | .fontsize-7-mediaS { font-size: var(--font-size-7, 2rem); } 57 | .f8-mediaS, 58 | .fontsize-8-mediaS { font-size: var(--font-size-8, 3rem); } 59 | .f9-mediaS, 60 | .fontsize-9-mediaS { font-size: var(--font-size-9, 4rem); } 61 | .f10-mediaS, 62 | .fontsize-10-mediaS { font-size: var(--font-size-10, 6rem); } 63 | .f11-mediaS, 64 | .fontsize-11-mediaS { font-size: var(--font-size-11, 8rem); } 65 | .f12-mediaS, 66 | .fontsize-12-mediaS { font-size: var(--font-size-12, 12rem); } 67 | 68 | .fontsize-10px-mediaS { font-size: var(--font-size-10px ); } 69 | .fontsize-11px-mediaS { font-size: var(--font-size-11px ); } 70 | .fontsize-12px-mediaS { font-size: var(--font-size-12px ); } 71 | .fontsize-14px-mediaS { font-size: var(--font-size-14px ); } 72 | .fontsize-16px-mediaS { font-size: var(--font-size-16px ); } 73 | .fontsize-20px-mediaS { font-size: var(--font-size-20px ); } 74 | .fontsize-24px-mediaS { font-size: var(--font-size-24px ); } 75 | .fontsize-32px-mediaS { font-size: var(--font-size-32px ); } 76 | .fontsize-48px-mediaS { font-size: var(--font-size-48px ); } 77 | .fontsize-64px-mediaS { font-size: var(--font-size-64px ); } 78 | .fontsize-96px-mediaS { font-size: var(--font-size-96px ); } 79 | .fontsize-128px-mediaS { font-size: var(--font-size-128px ); } 80 | .fontsize-192px-mediaS { font-size: var(--font-size-192px ); } 81 | .fontsize-256px-mediaS { font-size: var(--font-size-256px ); } 82 | } 83 | 84 | @media (--breakpoint-medium) { 85 | .f1-mediaM, 86 | .fontsize-1-mediaM { font-size: var(--font-size-1, .75rem); } 87 | .f2-mediaM, 88 | .fontsize-2-mediaM { font-size: var(--font-size-2, .875rem); } 89 | .f3-mediaM, 90 | .fontsize-3-mediaM { font-size: var(--font-size-3, 1rem); } 91 | .f4-mediaM, 92 | .fontsize-4-mediaM { font-size: var(--font-size-4, 1.125rem); } 93 | .f5-mediaM, 94 | .fontsize-5-mediaM { font-size: var(--font-size-5, 1.25rem); } 95 | .f6-mediaM, 96 | .fontsize-6-mediaM { font-size: var(--font-size-6, 1.5rem); } 97 | .f7-mediaM, 98 | .fontsize-7-mediaM { font-size: var(--font-size-7, 2rem); } 99 | .f8-mediaM, 100 | .fontsize-8-mediaM { font-size: var(--font-size-8, 3rem); } 101 | .f9-mediaM, 102 | .fontsize-9-mediaM { font-size: var(--font-size-9, 4rem); } 103 | .f10-mediaM, 104 | .fontsize-10-mediaM { font-size: var(--font-size-10, 6rem); } 105 | .f11-mediaM, 106 | .fontsize-11-mediaM { font-size: var(--font-size-11, 8rem); } 107 | .f12-mediaM, 108 | .fontsize-12-mediaM { font-size: var(--font-size-12, 12rem); } 109 | 110 | .fontsize-10px-mediaM { font-size: var(--font-size-10px ); } 111 | .fontsize-11px-mediaM { font-size: var(--font-size-11px ); } 112 | .fontsize-12px-mediaM { font-size: var(--font-size-12px ); } 113 | .fontsize-14px-mediaM { font-size: var(--font-size-14px ); } 114 | .fontsize-16px-mediaM { font-size: var(--font-size-16px ); } 115 | .fontsize-20px-mediaM { font-size: var(--font-size-20px ); } 116 | .fontsize-24px-mediaM { font-size: var(--font-size-24px ); } 117 | .fontsize-32px-mediaM { font-size: var(--font-size-32px ); } 118 | .fontsize-48px-mediaM { font-size: var(--font-size-48px ); } 119 | .fontsize-64px-mediaM { font-size: var(--font-size-64px ); } 120 | .fontsize-96px-mediaM { font-size: var(--font-size-96px ); } 121 | .fontsize-128px-mediaM { font-size: var(--font-size-128px ); } 122 | .fontsize-192px-mediaM { font-size: var(--font-size-192px ); } 123 | .fontsize-256px-mediaM { font-size: var(--font-size-256px ); } 124 | } 125 | 126 | @media (--breakpoint-large) { 127 | .f1-mediaL, 128 | .fontsize-1-mediaL { font-size: var(--font-size-1, .75rem); } 129 | .f2-mediaL, 130 | .fontsize-2-mediaL { font-size: var(--font-size-2, .875rem); } 131 | .f3-mediaL, 132 | .fontsize-3-mediaL { font-size: var(--font-size-3, 1rem); } 133 | .f4-mediaL, 134 | .fontsize-4-mediaL { font-size: var(--font-size-4, 1.125rem); } 135 | .f5-mediaL, 136 | .fontsize-5-mediaL { font-size: var(--font-size-5, 1.25rem); } 137 | .f6-mediaL, 138 | .fontsize-6-mediaL { font-size: var(--font-size-6, 1.5rem); } 139 | .f7-mediaL, 140 | .fontsize-7-mediaL { font-size: var(--font-size-7, 2rem); } 141 | .f8-mediaL, 142 | .fontsize-8-mediaL { font-size: var(--font-size-8, 3rem); } 143 | .f9-mediaL, 144 | .fontsize-9-mediaL { font-size: var(--font-size-9, 4rem); } 145 | .f10-mediaL, 146 | .fontsize-10-mediaL { font-size: var(--font-size-10, 6rem); } 147 | .f11-mediaL, 148 | .fontsize-11-mediaL { font-size: var(--font-size-11, 8rem); } 149 | .f12-mediaL, 150 | .fontsize-12-mediaL { font-size: var(--font-size-12, 12rem); } 151 | 152 | .fontsize-10px-mediaL { font-size: var(--font-size-10px ); } 153 | .fontsize-11px-mediaL { font-size: var(--font-size-11px ); } 154 | .fontsize-12px-mediaL { font-size: var(--font-size-12px ); } 155 | .fontsize-14px-mediaL { font-size: var(--font-size-14px ); } 156 | .fontsize-16px-mediaL { font-size: var(--font-size-16px ); } 157 | .fontsize-20px-mediaL { font-size: var(--font-size-20px ); } 158 | .fontsize-24px-mediaL { font-size: var(--font-size-24px ); } 159 | .fontsize-32px-mediaL { font-size: var(--font-size-32px ); } 160 | .fontsize-48px-mediaL { font-size: var(--font-size-48px ); } 161 | .fontsize-64px-mediaL { font-size: var(--font-size-64px ); } 162 | .fontsize-96px-mediaL { font-size: var(--font-size-96px ); } 163 | .fontsize-128px-mediaL { font-size: var(--font-size-128px ); } 164 | .fontsize-192px-mediaL { font-size: var(--font-size-192px ); } 165 | .fontsize-256px-mediaL { font-size: var(--font-size-256px ); } 166 | } 167 | 168 | @media (--breakpoint-large) { 169 | .f1-mediaXL, 170 | .fontsize-1-mediaXL { font-size: var(--font-size-1, .75rem); } 171 | .f2-mediaXL, 172 | .fontsize-2-mediaXL { font-size: var(--font-size-2, .875rem); } 173 | .f3-mediaXL, 174 | .fontsize-3-mediaXL { font-size: var(--font-size-3, 1rem); } 175 | .f4-mediaXL, 176 | .fontsize-4-mediaXL { font-size: var(--font-size-4, 1.125rem); } 177 | .f5-mediaXL, 178 | .fontsize-5-mediaXL { font-size: var(--font-size-5, 1.25rem); } 179 | .f6-mediaXL, 180 | .fontsize-6-mediaXL { font-size: var(--font-size-6, 1.5rem); } 181 | .f7-mediaXL, 182 | .fontsize-7-mediaXL { font-size: var(--font-size-7, 2rem); } 183 | .f8-mediaXL, 184 | .fontsize-8-mediaXL { font-size: var(--font-size-8, 3rem); } 185 | .f9-mediaXL, 186 | .fontsize-9-mediaXL { font-size: var(--font-size-9, 4rem); } 187 | .f10-mediaXL, 188 | .fontsize-10-mediaXL { font-size: var(--font-size-10, 6rem); } 189 | .f11-mediaXL, 190 | .fontsize-11-mediaXL { font-size: var(--font-size-11, 8rem); } 191 | .f12-mediaXL, 192 | .fontsize-12-mediaXL { font-size: var(--font-size-12, 12rem); } 193 | 194 | .fontsize-10px-mediaXL { font-size: var(--font-size-10px ); } 195 | .fontsize-11px-mediaXL { font-size: var(--font-size-11px ); } 196 | .fontsize-12px-mediaXL { font-size: var(--font-size-12px ); } 197 | .fontsize-14px-mediaXL { font-size: var(--font-size-14px ); } 198 | .fontsize-16px-mediaXL { font-size: var(--font-size-16px ); } 199 | .fontsize-20px-mediaXL { font-size: var(--font-size-20px ); } 200 | .fontsize-24px-mediaXL { font-size: var(--font-size-24px ); } 201 | .fontsize-32px-mediaXL { font-size: var(--font-size-32px ); } 202 | .fontsize-48px-mediaXL { font-size: var(--font-size-48px ); } 203 | .fontsize-64px-mediaXL { font-size: var(--font-size-64px ); } 204 | .fontsize-96px-mediaXL { font-size: var(--font-size-96px ); } 205 | .fontsize-128px-mediaXL { font-size: var(--font-size-128px ); } 206 | .fontsize-192px-mediaXL { font-size: var(--font-size-192px ); } 207 | .fontsize-256px-mediaXL { font-size: var(--font-size-256px ); } 208 | } 209 | --------------------------------------------------------------------------------