├── .gitignore ├── LICENSE ├── README.md ├── css ├── fiber.css ├── fiber.min.css └── modules │ ├── base.css │ ├── border-radius.css │ ├── borders.css │ ├── buttons.css │ ├── colors.css │ ├── display-responsive.css │ ├── display.css │ ├── grid-flex-responsive.css │ ├── grid-flex.css │ ├── grid.css │ ├── heights-responsive.css │ ├── heights.css │ ├── links.css │ ├── main.css │ ├── margins-responsive.css │ ├── margins.css │ ├── opacity-responsive.css │ ├── opacity.css │ ├── paddings-responsive.css │ ├── paddings.css │ ├── position-responsive.css │ ├── position.css │ ├── ratios-responsive.css │ ├── ratios.css │ ├── shadows-responsive.css │ ├── shadows.css │ ├── typography-responsive.css │ ├── typography.css │ ├── utils-responsive.css │ └── utils.css ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── base.css ├── border-radius.css ├── borders.css ├── buttons.css ├── colors.css ├── display-responsive.css ├── display.css ├── grid-flex-responsive.css ├── grid-flex.css ├── grid.css ├── heights-responsive.css ├── heights.css ├── links.css ├── main.css ├── margins-responsive.css ├── margins.css ├── mediaQueries.js ├── opacity-responsive.css ├── opacity.css ├── paddings-responsive.css ├── paddings.css ├── position-responsive.css ├── position.css ├── ratios-responsive.css ├── ratios.css ├── shadows-responsive.css ├── shadows.css ├── styleVariables.js ├── typography-responsive.css ├── typography.css ├── utils-responsive.css └── utils.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | .DS_Store 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 z creative labs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # fiber-css 2 | An atomic css framework focused on responsive design 3 | 4 | ## Getting started 5 | Fiber-css is available as an npm module: 6 | 7 | `$ npm install fiber-css` 8 | 9 | ### Why use fiber-css? 10 | 11 | + prioritizes responsive design, particularly responsive typography 12 | + uses only rem values 13 | + uses intuitive naming conventions 14 | + is also available as separate pre-compiled modules 15 | + makes complex responsive patterns easy to reason about 16 | + leaves semantic abstractions to other frameworks (e.g. React) and only focuses on style properties 17 | 18 | ### Setup 19 | 20 | #### Precompiled 21 | Use either the complete fiber-css suite from `css/fiber.css` or the minified version `css/fiber.min.css`, or use one or more separate modules (e.g. `css/modules/typography.css`). 22 | 23 | #### Custom build 24 | To customize or extend fiber-css, clone this repo 25 | 26 | $ git clone https://github.com/zcreativelabs/fiber-css.git 27 | $ cd fiber-css 28 | $ npm install 29 | 30 | make your changes, and build your custom version of fiber-css: 31 | 32 | $ npm run css:prepare 33 | 34 | To learn more about building a custom css pipeline check out [How to set up a postcss pipeline with variable sharing in gulp](https://medium.com/@zimrick/how-to-set-up-a-postcss-pipeline-with-variable-sharing-in-gulp-4e77624cc749). 35 | 36 | ## License 37 | MIT licensed. Copyright (c) Richard Zimerman 2017. See [LICENSE.md](https://github.com/zcreativelabs/fiber-css/blob/master/LICENSE) for more details. 38 | -------------------------------------------------------------------------------- /css/modules/base.css: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | font-family: "Roboto", sans-serif; 4 | font-size: 100%; 5 | 6 | box-sizing: border-box; 7 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 8 | } 9 | 10 | *, 11 | *::before, 12 | *::after { 13 | box-sizing: inherit; 14 | } 15 | 16 | html, 17 | body { 18 | width: 100%; 19 | height: 100%; 20 | } 21 | 22 | body { 23 | font-size: 1rem; 24 | line-height: 1.5; 25 | color: #212121; 26 | } 27 | 28 | ::-moz-selection { 29 | background: #E91E63; 30 | color: #FFFFFF; 31 | } 32 | 33 | ::selection { 34 | background: #E91E63; 35 | color: #FFFFFF; 36 | } 37 | 38 | ::-moz-selection { 39 | background: #E91E63; 40 | color: #FFFFFF; 41 | } 42 | 43 | hr { 44 | margin: 0; 45 | padding: 0; 46 | border-top: 0; 47 | border-bottom: 0.125rem solid #EEEEEE; 48 | } 49 | 50 | svg { 51 | display: inline-block; 52 | height: auto; 53 | vertical-align: middle; 54 | } 55 | 56 | ::-webkit-input-placeholder { 57 | color: inherit; 58 | opacity: 0.54; 59 | } 60 | 61 | [tabindex="-1"]:focus { 62 | outline: none !important; 63 | } 64 | -------------------------------------------------------------------------------- /css/modules/border-radius.css: -------------------------------------------------------------------------------- 1 | 2 | .border-radius-0 { border-radius: 0 } 3 | .border-radius-1 { border-radius: 0.0625rem } 4 | .border-radius-2 { border-radius: 0.125rem } 5 | .border-radius-3 { border-radius: 0.1875rem } 6 | .border-radius-4 { border-radius: 0.25rem } 7 | .border-radius-5 { border-radius: 0.3125rem } 8 | .border-radius-6 { border-radius: 0.375rem } 9 | .border-radius-100 { border-radius: 100% } 10 | .border-radius-pill { border-radius: 9999px } 11 | -------------------------------------------------------------------------------- /css/modules/borders.css: -------------------------------------------------------------------------------- 1 | 2 | .border-none { border: 0; } 3 | .border-all { border: 0.125rem solid currentcolor } 4 | .border-top { border-top: 0.125rem solid currentcolor } 5 | .border-bottom { border-bottom: 0.125rem solid currentcolor } 6 | .border-left { border-left: 0.125rem solid currentcolor } 7 | .border-right { border-right: 0.125rem solid currentcolor } 8 | .border-x { 9 | border-left: 0.125rem solid currentcolor; 10 | border-right: 0.125rem solid currentcolor; 11 | } 12 | .border-y { 13 | border-top: 0.125rem solid currentcolor; 14 | border-bottom: 0.125rem solid currentcolor; 15 | } 16 | .border-transparent { border-color: transparent } 17 | .border-default { border-color: #212121 } 18 | .border-current { border-color: currentcolor } 19 | .border-inherit { border-color: inherit } 20 | .border-primary { border-color: #E91E63 } 21 | .border-secondary { border-color: #EEEEEE } 22 | .border-red { border-color: #F44336 } 23 | .border-pink { border-color: #E91E63 } 24 | .border-purple { border-color: #9C27B0 } 25 | .border-indigo { border-color: #3F51B5 } 26 | .border-blue { border-color: #2196F3 } 27 | .border-light-blue { border-color: #03A9F4 } 28 | .border-cyan { border-color: #00BCD4 } 29 | .border-teal { border-color: #009688 } 30 | .border-green { border-color: #4CAF50 } 31 | .border-light-green { border-color: #8BC34A } 32 | .border-lime { border-color: #CDDC39 } 33 | .border-yellow { border-color: #FFEB3B } 34 | .border-amber { border-color: #FFC107 } 35 | .border-orange { border-color: #FF9800 } 36 | .border-deep-orange { border-color: #FF5722 } 37 | .border-brown { border-color: #795548 } 38 | .border-white { border-color: #FFFFFF } 39 | .border-grey-100 { border-color: #F5F5F5 } 40 | .border-grey-200 { border-color: #EEEEEE } 41 | .border-grey-300 { border-color: #E0E0E0 } 42 | .border-grey-400 { border-color: #BDBDBD } 43 | .border-grey-500 { border-color: #9E9E9E } 44 | .border-grey-600 { border-color: #757575 } 45 | .border-grey-700 { border-color: #616161 } 46 | .border-grey-800 { border-color: #424242 } 47 | .border-1 { border-width: 0.0625rem } 48 | .border-2 { border-width: 0.125rem } 49 | .border-3 { border-width: 0.1875rem } 50 | .border-4 { border-width: 0.25rem } 51 | .border-5 { border-width: 0.3125rem } 52 | .border-6 { border-width: 0.375rem } 53 | -------------------------------------------------------------------------------- /css/modules/buttons.css: -------------------------------------------------------------------------------- 1 | 2 | .btn { 3 | display: inline-block; 4 | position: relative; 5 | 6 | font-family: inherit; 7 | font-size: inherit; 8 | font-weight: 400; 9 | line-height: 1.25; 10 | 11 | background: transparent; 12 | color: inherit; 13 | border: 0.125rem solid transparent; 14 | outline: none; 15 | 16 | padding: 0.375rem; 17 | cursor: pointer; 18 | 19 | vertical-align: middle; 20 | } 21 | 22 | .btn:hover { 23 | box-shadow: inset 0 0 0 3em rgba(0, 0, 0, .08); 24 | border-color: rgba(0, 0, 0, .08); 25 | } 26 | 27 | .btn:focus { 28 | box-shadow: inset 0 0 0 3em rgba(0, 0, 0, .12); 29 | border-color: rgba(0, 0, 0, .12); 30 | } 31 | 32 | .btn:active { 33 | box-shadow: inset 0 0 0 3em rgba(0, 0, 0, .16); 34 | border-color: rgba(0, 0, 0, .16); 35 | } 36 | 37 | ::-moz-focus-inner { 38 | border: 0; 39 | padding: 0; 40 | } 41 | 42 | /* 43 | * Outlined buttons 44 | * 45 | */ 46 | 47 | .btn--outlined { 48 | border-color: currentcolor; 49 | } 50 | 51 | .btn--outlined:hover, 52 | .btn--outlined:focus, 53 | .btn--outlined:active { 54 | border-color: currentcolor; 55 | } 56 | 57 | /* 58 | * Raised buttons 59 | * 60 | */ 61 | 62 | .btn--raised { 63 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .12), 64 | 0 3px 1px -2px rgba(0, 0, 0, .16), 65 | 0 1px 5px 0 rgba(0, 0, 0, .08); 66 | } 67 | 68 | .btn--raised:hover { 69 | box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .12), 70 | 0 1px 10px 0 rgba(0, 0, 0, .08), 71 | 0 2px 4px -1px rgba(0, 0, 0, .16), 72 | inset 0 0 0 3em rgba(0, 0, 0, .08); 73 | } 74 | 75 | .btn--raised:focus { 76 | box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .12), 77 | 0 1px 10px 0 rgba(0, 0, 0, .08), 78 | 0 2px 4px -1px rgba(0, 0, 0, .16), 79 | inset 0 0 0 3em rgba(0, 0, 0, .12); 80 | } 81 | 82 | .btn--raised:active { 83 | box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .12), 84 | 0 3px 14px 2px rgba(0, 0, 0, .08), 85 | 0 5px 5px -3px rgba(0, 0, 0, .16), 86 | inset 0 0 0 3em rgba(0, 0, 0, .16); 87 | } 88 | -------------------------------------------------------------------------------- /css/modules/colors.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * background colors 4 | * 5 | */ 6 | 7 | .bg-primary { background: #E91E63; color: #FFFFFF; } 8 | 9 | .bg-secondary { background: #EEEEEE; color: #212121; } 10 | 11 | .bg-white { background: #FFFFFF } 12 | 13 | .bg-transparent { background: transparent } 14 | 15 | .bg-red { background: #F44336 } 16 | 17 | .bg-pink { background: #E91E63 } 18 | 19 | .bg-purple { background: #9C27B0 } 20 | 21 | .bg-indigo { background: #3F51B5 } 22 | 23 | .bg-blue { background: #2196F3 } 24 | 25 | .bg-light-blue { background: #03A9F4 } 26 | 27 | .bg-cyan { background: #00BCD4 } 28 | 29 | .bg-teal { background: #009688 } 30 | 31 | .bg-green { background: #4CAF50 } 32 | 33 | .bg-light-green { background: #8BC34A } 34 | 35 | .bg-lime { background: #CDDC39 } 36 | 37 | .bg-yellow { background: #FFEB3B } 38 | 39 | .bg-amber { background: #FFC107 } 40 | 41 | .bg-orange { background: #FF9800 } 42 | 43 | .bg-deep-orange { background: #FF5722 } 44 | 45 | .bg-brown { background: #795548 } 46 | 47 | .bg-grey-100 { background: #F5F5F5 } 48 | 49 | .bg-grey-200 { background: #EEEEEE } 50 | 51 | .bg-grey-300 { background: #E0E0E0 } 52 | 53 | .bg-grey-400 { background: #BDBDBD } 54 | 55 | .bg-grey-500 { background: #9E9E9E } 56 | 57 | .bg-grey-600 { background: #757575 } 58 | 59 | .bg-grey-700 { background: #616161 } 60 | 61 | .bg-grey-800 { background: #424242 } 62 | 63 | .bg-grey-900 { background: #212121 } 64 | 65 | /* 66 | * text colors 67 | * 68 | */ 69 | 70 | .color-default { color: #212121 } 71 | 72 | .color-inherit { color: inherit } 73 | 74 | .color-primary { color: #E91E63 } 75 | 76 | .color-secondary { color: #EEEEEE } 77 | 78 | .color-red { color: #F44336 } 79 | 80 | .color-pink { color: #E91E63 } 81 | 82 | .color-purple { color: #9C27B0 } 83 | 84 | .color-indigo { color: #3F51B5 } 85 | 86 | .color-blue { color: #2196F3 } 87 | 88 | .color-light-blue { color: #03A9F4 } 89 | 90 | .color-cyan { color: #00BCD4 } 91 | 92 | .color-teal { color: #009688 } 93 | 94 | .color-green { color: #4CAF50 } 95 | 96 | .color-light-green { color: #8BC34A } 97 | 98 | .color-lime { color: #CDDC39 } 99 | 100 | .color-yellow { color: #FFEB3B } 101 | 102 | .color-amber { color: #FFC107 } 103 | 104 | .color-orange { color: #FF9800 } 105 | 106 | .color-deep-orange { color: #FF5722 } 107 | 108 | .color-brown { color: #795548 } 109 | 110 | .color-white { color: #FFFFFF } 111 | 112 | .color-grey-100 { color: #F5F5F5 } 113 | 114 | .color-grey-200 { color: #EEEEEE } 115 | 116 | .color-grey-300 { color: #E0E0E0 } 117 | 118 | .color-grey-400 { color: #BDBDBD } 119 | 120 | .color-grey-500 { color: #9E9E9E } 121 | 122 | .color-grey-600 { color: #757575 } 123 | 124 | .color-grey-700 { color: #616161 } 125 | 126 | .color-grey-800 { color: #424242 } 127 | 128 | .color-grey-900 { color: #212121 } 129 | -------------------------------------------------------------------------------- /css/modules/display-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 30em) { 3 | .xs-visible { display: inherit; } 4 | .xs-hidden { display: none; } 5 | 6 | .xs-inline { display: inline; } 7 | .xs-block { display: block; } 8 | .xs-inline-block { display: inline-block; } 9 | 10 | .xs-table { display: table; } 11 | .xs-table-cell { display: table-cell; } 12 | } 13 | 14 | @media (min-width: 48em) { 15 | .sm-visible { display: inherit; } 16 | .sm-hidden { display: none; } 17 | 18 | .sm-inline { display: inline; } 19 | .sm-block { display: block; } 20 | .sm-inline-block { display: inline-block; } 21 | 22 | .sm-table { display: table; } 23 | .sm-table-cell { display: table-cell; } 24 | } 25 | 26 | @media (min-width: 62em) { 27 | .md-visible { display: inherit; } 28 | .md-hidden { display: none; } 29 | 30 | .md-inline { display: inline; } 31 | .md-block { display: block; } 32 | .md-inline-block { display: inline-block; } 33 | 34 | .md-table { display: table; } 35 | .md-table-cell { display: table-cell; } 36 | } 37 | 38 | @media (min-width: 75em) { 39 | .lg-visible { display: inherit; } 40 | .lg-hidden { display: none; } 41 | 42 | .lg-inline { display: inline; } 43 | .lg-block { display: block; } 44 | .lg-inline-block { display: inline-block; } 45 | 46 | .lg-table { display: table; } 47 | .lg-table-cell { display: table-cell; } 48 | } 49 | 50 | @media (min-width: 91em) { 51 | .xl-visible { display: inherit; } 52 | .xl-hidden { display: none; } 53 | 54 | .xl-inline { display: inline; } 55 | .xl-block { display: block; } 56 | .xl-inline-block { display: inline-block; } 57 | 58 | .xl-table { display: table; } 59 | .xl-table-cell { display: table-cell; } 60 | } 61 | -------------------------------------------------------------------------------- /css/modules/display.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Visibility 4 | * 5 | */ 6 | 7 | .xs-visible, 8 | .sm-visible, 9 | .md-visible, 10 | .lg-visible, 11 | .xl-visible { 12 | display: none; 13 | } 14 | 15 | .hidden { display: none; } 16 | 17 | /* 18 | * Display 19 | * 20 | */ 21 | 22 | .inline { display: inline; } 23 | 24 | .block { display: block; } 25 | 26 | .inline-block { display: inline-block; } 27 | 28 | .table { display: table; } 29 | 30 | .table-cell { display: table-cell; } 31 | -------------------------------------------------------------------------------- /css/modules/grid-flex-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 30em) { 3 | .xs-flex { 4 | display: -webkit-box; 5 | display: flex; 6 | } 7 | 8 | .xs-flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column } 9 | .xs-flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row } 10 | .xs-flex-wrap { flex-wrap: wrap } 11 | 12 | .xs-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse } 13 | .xs-flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse } 14 | .xs-flex-wrap-reverse { flex-wrap: wrap-reverse } 15 | 16 | .xs-items-start { -webkit-box-align: start; align-items: flex-start } 17 | .xs-items-end { -webkit-box-align: end; align-items: flex-end } 18 | .xs-items-center { -webkit-box-align: center; align-items: center } 19 | .xs-items-baseline { -webkit-box-align: baseline; align-items: baseline } 20 | .xs-items-stretch { -webkit-box-align: stretch; align-items: stretch } 21 | 22 | .xs-self-start { align-self: flex-start } 23 | .xs-self-end { align-self: flex-end } 24 | .xs-self-center { -ms-grid-row-align: center; align-self: center } 25 | .xs-self-baseline { align-self: baseline } 26 | .xs-self-stretch { -ms-grid-row-align: stretch; align-self: stretch } 27 | 28 | .xs-justify-start { -webkit-box-pack: start; justify-content: flex-start } 29 | .xs-justify-end { -webkit-box-pack: end; justify-content: flex-end } 30 | .xs-justify-center { -webkit-box-pack: center; justify-content: center } 31 | .xs-justify-between { -webkit-box-pack: justify; justify-content: space-between } 32 | .xs-justify-around { justify-content: space-around } 33 | 34 | .xs-content-start { align-content: flex-start } 35 | .xs-content-end { align-content: flex-end } 36 | .xs-content-center { align-content: center } 37 | .xs-content-between { align-content: space-between } 38 | .xs-content-around { align-content: space-around } 39 | .xs-content-stretch { align-content: stretch } 40 | 41 | .xs-flex-auto { 42 | -webkit-box-flex: 1; 43 | flex: 1 1 auto; 44 | min-width: 0; 45 | min-height: 0; 46 | } 47 | 48 | .xs-flex-none { -webkit-box-flex: 0; flex: none } 49 | 50 | .xs-order-0 { -webkit-box-ordinal-group: 1; order: 0 } 51 | .xs-order-1 { -webkit-box-ordinal-group: 2; order: 1 } 52 | .xs-order-2 { -webkit-box-ordinal-group: 3; order: 2 } 53 | .xs-order-3 { -webkit-box-ordinal-group: 4; order: 3 } 54 | .xs-order-last { -webkit-box-ordinal-group: 100000; order: 99999 } 55 | } 56 | 57 | @media (min-width: 48em) { 58 | .sm-flex { 59 | display: -webkit-box; 60 | display: flex; 61 | } 62 | 63 | .sm-flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column } 64 | .sm-flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row } 65 | .sm-flex-wrap { flex-wrap: wrap } 66 | 67 | .sm-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse } 68 | .sm-flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse } 69 | .sm-flex-wrap-reverse { flex-wrap: wrap-reverse } 70 | 71 | .sm-items-start { -webkit-box-align: start; align-items: flex-start } 72 | .sm-items-end { -webkit-box-align: end; align-items: flex-end } 73 | .sm-items-center { -webkit-box-align: center; align-items: center } 74 | .sm-items-baseline { -webkit-box-align: baseline; align-items: baseline } 75 | .sm-items-stretch { -webkit-box-align: stretch; align-items: stretch } 76 | 77 | .sm-self-start { align-self: flex-start } 78 | .sm-self-end { align-self: flex-end } 79 | .sm-self-center { -ms-grid-row-align: center; align-self: center } 80 | .sm-self-baseline { align-self: baseline } 81 | .sm-self-stretch { -ms-grid-row-align: stretch; align-self: stretch } 82 | 83 | .sm-justify-start { -webkit-box-pack: start; justify-content: flex-start } 84 | .sm-justify-end { -webkit-box-pack: end; justify-content: flex-end } 85 | .sm-justify-center { -webkit-box-pack: center; justify-content: center } 86 | .sm-justify-between { -webkit-box-pack: justify; justify-content: space-between } 87 | .sm-justify-around { justify-content: space-around } 88 | 89 | .sm-content-start { align-content: flex-start } 90 | .sm-content-end { align-content: flex-end } 91 | .sm-content-center { align-content: center } 92 | .sm-content-between { align-content: space-between } 93 | .sm-content-around { align-content: space-around } 94 | .sm-content-stretch { align-content: stretch } 95 | 96 | .sm-flex-auto { 97 | -webkit-box-flex: 1; 98 | flex: 1 1 auto; 99 | min-width: 0; 100 | min-height: 0; 101 | } 102 | 103 | .sm-flex-none { -webkit-box-flex: 0; flex: none } 104 | 105 | .sm-order-0 { -webkit-box-ordinal-group: 1; order: 0 } 106 | .sm-order-1 { -webkit-box-ordinal-group: 2; order: 1 } 107 | .sm-order-2 { -webkit-box-ordinal-group: 3; order: 2 } 108 | .sm-order-3 { -webkit-box-ordinal-group: 4; order: 3 } 109 | .sm-order-last { -webkit-box-ordinal-group: 100000; order: 99999 } 110 | } 111 | 112 | @media (min-width: 62em) { 113 | .md-flex { 114 | display: -webkit-box; 115 | display: flex; 116 | } 117 | 118 | .md-flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column } 119 | .md-flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row } 120 | .md-flex-wrap { flex-wrap: wrap } 121 | 122 | .md-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse } 123 | .md-flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse } 124 | .md-flex-wrap-reverse { flex-wrap: wrap-reverse } 125 | 126 | .md-items-start { -webkit-box-align: start; align-items: flex-start } 127 | .md-items-end { -webkit-box-align: end; align-items: flex-end } 128 | .md-items-center { -webkit-box-align: center; align-items: center } 129 | .md-items-baseline { -webkit-box-align: baseline; align-items: baseline } 130 | .md-items-stretch { -webkit-box-align: stretch; align-items: stretch } 131 | 132 | .md-self-start { align-self: flex-start } 133 | .md-self-end { align-self: flex-end } 134 | .md-self-center { -ms-grid-row-align: center; align-self: center } 135 | .md-self-baseline { align-self: baseline } 136 | .md-self-stretch { -ms-grid-row-align: stretch; align-self: stretch } 137 | 138 | .md-justify-start { -webkit-box-pack: start; justify-content: flex-start } 139 | .md-justify-end { -webkit-box-pack: end; justify-content: flex-end } 140 | .md-justify-center { -webkit-box-pack: center; justify-content: center } 141 | .md-justify-between { -webkit-box-pack: justify; justify-content: space-between } 142 | .md-justify-around { justify-content: space-around } 143 | 144 | .md-content-start { align-content: flex-start } 145 | .md-content-end { align-content: flex-end } 146 | .md-content-center { align-content: center } 147 | .md-content-between { align-content: space-between } 148 | .md-content-around { align-content: space-around } 149 | .md-content-stretch { align-content: stretch } 150 | 151 | .md-flex-auto { 152 | -webkit-box-flex: 1; 153 | flex: 1 1 auto; 154 | min-width: 0; 155 | min-height: 0; 156 | } 157 | 158 | .md-flex-none { -webkit-box-flex: 0; flex: none } 159 | 160 | .md-order-0 { -webkit-box-ordinal-group: 1; order: 0 } 161 | .md-order-1 { -webkit-box-ordinal-group: 2; order: 1 } 162 | .md-order-2 { -webkit-box-ordinal-group: 3; order: 2 } 163 | .md-order-3 { -webkit-box-ordinal-group: 4; order: 3 } 164 | .md-order-last { -webkit-box-ordinal-group: 100000; order: 99999 } 165 | } 166 | 167 | @media (min-width: 75em) { 168 | .lg-flex { 169 | display: -webkit-box; 170 | display: flex; 171 | } 172 | 173 | .lg-flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column } 174 | .lg-flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row } 175 | .lg-flex-wrap { flex-wrap: wrap } 176 | 177 | .lg-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse } 178 | .lg-flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse } 179 | .lg-flex-wrap-reverse { flex-wrap: wrap-reverse } 180 | 181 | .lg-items-start { -webkit-box-align: start; align-items: flex-start } 182 | .lg-items-end { -webkit-box-align: end; align-items: flex-end } 183 | .lg-items-center { -webkit-box-align: center; align-items: center } 184 | .lg-items-baseline { -webkit-box-align: baseline; align-items: baseline } 185 | .lg-items-stretch { -webkit-box-align: stretch; align-items: stretch } 186 | 187 | .lg-self-start { align-self: flex-start } 188 | .lg-self-end { align-self: flex-end } 189 | .lg-self-center { -ms-grid-row-align: center; align-self: center } 190 | .lg-self-baseline { align-self: baseline } 191 | .lg-self-stretch { -ms-grid-row-align: stretch; align-self: stretch } 192 | 193 | .lg-justify-start { -webkit-box-pack: start; justify-content: flex-start } 194 | .lg-justify-end { -webkit-box-pack: end; justify-content: flex-end } 195 | .lg-justify-center { -webkit-box-pack: center; justify-content: center } 196 | .lg-justify-between { -webkit-box-pack: justify; justify-content: space-between } 197 | .lg-justify-around { justify-content: space-around } 198 | 199 | .lg-content-start { align-content: flex-start } 200 | .lg-content-end { align-content: flex-end } 201 | .lg-content-center { align-content: center } 202 | .lg-content-between { align-content: space-between } 203 | .lg-content-around { align-content: space-around } 204 | .lg-content-stretch { align-content: stretch } 205 | 206 | .lg-flex-auto { 207 | -webkit-box-flex: 1; 208 | flex: 1 1 auto; 209 | min-width: 0; 210 | min-height: 0; 211 | } 212 | 213 | .lg-flex-none { -webkit-box-flex: 0; flex: none } 214 | 215 | .lg-order-0 { -webkit-box-ordinal-group: 1; order: 0 } 216 | .lg-order-1 { -webkit-box-ordinal-group: 2; order: 1 } 217 | .lg-order-2 { -webkit-box-ordinal-group: 3; order: 2 } 218 | .lg-order-3 { -webkit-box-ordinal-group: 4; order: 3 } 219 | .lg-order-last { -webkit-box-ordinal-group: 100000; order: 99999 } 220 | } 221 | 222 | @media (min-width: 91em) { 223 | 224 | .xl-flex { 225 | display: -webkit-box; 226 | display: flex; 227 | } 228 | 229 | .xl-flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column } 230 | .xl-flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row } 231 | .xl-flex-wrap { flex-wrap: wrap } 232 | 233 | .xl-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse } 234 | .xl-flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse } 235 | .xl-flex-wrap-reverse { flex-wrap: wrap-reverse } 236 | 237 | .xl-items-start { -webkit-box-align: start; align-items: flex-start } 238 | .xl-items-end { -webkit-box-align: end; align-items: flex-end } 239 | .xl-items-center { -webkit-box-align: center; align-items: center } 240 | .xl-items-baseline { -webkit-box-align: baseline; align-items: baseline } 241 | .xl-items-stretch { -webkit-box-align: stretch; align-items: stretch } 242 | 243 | .xl-self-start { align-self: flex-start } 244 | .xl-self-end { align-self: flex-end } 245 | .xl-self-center { -ms-grid-row-align: center; align-self: center } 246 | .xl-self-baseline { align-self: baseline } 247 | .xl-self-stretch { -ms-grid-row-align: stretch; align-self: stretch } 248 | 249 | .xl-justify-start { -webkit-box-pack: start; justify-content: flex-start } 250 | .xl-justify-end { -webkit-box-pack: end; justify-content: flex-end } 251 | .xl-justify-center { -webkit-box-pack: center; justify-content: center } 252 | .xl-justify-between { -webkit-box-pack: justify; justify-content: space-between } 253 | .xl-justify-around { justify-content: space-around } 254 | 255 | .xl-content-start { align-content: flex-start } 256 | .xl-content-end { align-content: flex-end } 257 | .xl-content-center { align-content: center } 258 | .xl-content-between { align-content: space-between } 259 | .xl-content-around { align-content: space-around } 260 | .xl-content-stretch { align-content: stretch } 261 | 262 | .xl-flex-auto { 263 | -webkit-box-flex: 1; 264 | flex: 1 1 auto; 265 | min-width: 0; 266 | min-height: 0; 267 | } 268 | 269 | .xl-flex-none { -webkit-box-flex: 0; flex: none } 270 | 271 | .xl-order-0 { -webkit-box-ordinal-group: 1; order: 0 } 272 | .xl-order-1 { -webkit-box-ordinal-group: 2; order: 1 } 273 | .xl-order-2 { -webkit-box-ordinal-group: 3; order: 2 } 274 | .xl-order-3 { -webkit-box-ordinal-group: 4; order: 3 } 275 | .xl-order-last { -webkit-box-ordinal-group: 100000; order: 99999 } 276 | } 277 | -------------------------------------------------------------------------------- /css/modules/grid-flex.css: -------------------------------------------------------------------------------- 1 | 2 | .flex { 3 | display: -webkit-box; 4 | display: flex; 5 | } 6 | 7 | .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column } 8 | 9 | .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row } 10 | 11 | .flex-wrap { flex-wrap: wrap } 12 | 13 | .flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse } 14 | 15 | .flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse } 16 | 17 | .flex-wrap-reverse { flex-wrap: wrap-reverse } 18 | 19 | .items-start { -webkit-box-align: start; align-items: flex-start } 20 | 21 | .items-end { -webkit-box-align: end; align-items: flex-end } 22 | 23 | .items-center { -webkit-box-align: center; align-items: center } 24 | 25 | .items-baseline { -webkit-box-align: baseline; align-items: baseline } 26 | 27 | .items-stretch { -webkit-box-align: stretch; align-items: stretch } 28 | 29 | .self-start { align-self: flex-start } 30 | 31 | .self-end { align-self: flex-end } 32 | 33 | .self-center { -ms-grid-row-align: center; align-self: center } 34 | 35 | .self-baseline { align-self: baseline } 36 | 37 | .self-stretch { -ms-grid-row-align: stretch; align-self: stretch } 38 | 39 | .justify-start { -webkit-box-pack: start; justify-content: flex-start } 40 | 41 | .justify-end { -webkit-box-pack: end; justify-content: flex-end } 42 | 43 | .justify-center { -webkit-box-pack: center; justify-content: center } 44 | 45 | .justify-between { -webkit-box-pack: justify; justify-content: space-between } 46 | 47 | .justify-around { justify-content: space-around } 48 | 49 | .content-start { align-content: flex-start } 50 | 51 | .content-end { align-content: flex-end } 52 | 53 | .content-center { align-content: center } 54 | 55 | .content-between { align-content: space-between } 56 | 57 | .content-around { align-content: space-around } 58 | 59 | .content-stretch { align-content: stretch } 60 | 61 | .flex-auto { 62 | -webkit-box-flex: 1; 63 | flex: 1 1 auto; 64 | min-width: 0; 65 | min-height: 0; 66 | } 67 | 68 | .flex-none { -webkit-box-flex: 0; flex: none } 69 | 70 | .order-0 { -webkit-box-ordinal-group: 1; order: 0 } 71 | 72 | .order-1 { -webkit-box-ordinal-group: 2; order: 1 } 73 | 74 | .order-2 { -webkit-box-ordinal-group: 3; order: 2 } 75 | 76 | .order-3 { -webkit-box-ordinal-group: 4; order: 3 } 77 | 78 | .order-last { -webkit-box-ordinal-group: 100000; order: 99999 } 79 | -------------------------------------------------------------------------------- /css/modules/grid.css: -------------------------------------------------------------------------------- 1 | 2 | .col { 3 | position: relative; 4 | display: block; 5 | float: left; 6 | min-height: 1px; 7 | max-width: 100%; 8 | } 9 | 10 | .base-1 { width: 8.33333% } 11 | 12 | .base-2 { width: 16.66667% } 13 | 14 | .base-3 { width: 25% } 15 | 16 | .base-4 { width: 33.33333% } 17 | 18 | .base-5 { width: 41.66667% } 19 | 20 | .base-6 { width: 50% } 21 | 22 | .base-7 { width: 58.33333% } 23 | 24 | .base-8 { width: 66.66667% } 25 | 26 | .base-9 { width: 75% } 27 | 28 | .base-10 { width: 83.33333% } 29 | 30 | .base-11 { width: 91.66667% } 31 | 32 | .base-12 { width: 100% } 33 | 34 | .base-offset-0 { margin-left: 0 } 35 | 36 | .base-offset-1 { margin-left: 8.33333% } 37 | 38 | .base-offset-2 { margin-left: 16.66667% } 39 | 40 | .base-offset-3 { margin-left: 25% } 41 | 42 | .base-offset-4 { margin-left: 33.33333% } 43 | 44 | .base-offset-5 { margin-left: 41.66667% } 45 | 46 | .base-offset-6 { margin-left: 50% } 47 | 48 | @media (min-width: 30em) { 49 | .xs-1 { width: 8.33333% } 50 | .xs-2 { width: 16.66667% } 51 | .xs-3 { width: 25% } 52 | .xs-4 { width: 33.33333% } 53 | .xs-5 { width: 41.66667% } 54 | .xs-6 { width: 50% } 55 | .xs-7 { width: 58.33333% } 56 | .xs-8 { width: 66.66667% } 57 | .xs-9 { width: 75% } 58 | .xs-10 { width: 83.33333% } 59 | .xs-11 { width: 91.66667% } 60 | .xs-12 { width: 100% } 61 | 62 | .xs-offset-0 { margin-left: 0 } 63 | .xs-offset-1 { margin-left: 8.33333% } 64 | .xs-offset-2 { margin-left: 16.66667% } 65 | .xs-offset-3 { margin-left: 25% } 66 | .xs-offset-4 { margin-left: 33.33333% } 67 | .xs-offset-5 { margin-left: 41.66667% } 68 | .xs-offset-6 { margin-left: 50% } 69 | } 70 | 71 | @media (min-width: 48em) { 72 | .sm-1 { width: 8.33333% } 73 | .sm-2 { width: 16.66667% } 74 | .sm-3 { width: 25% } 75 | .sm-4 { width: 33.33333% } 76 | .sm-5 { width: 41.66667% } 77 | .sm-6 { width: 50% } 78 | .sm-7 { width: 58.33333% } 79 | .sm-8 { width: 66.66667% } 80 | .sm-9 { width: 75% } 81 | .sm-10 { width: 83.33333% } 82 | .sm-11 { width: 91.66667% } 83 | .sm-12 { width: 100% } 84 | 85 | .sm-offset-0 { margin-left: 0 } 86 | .sm-offset-1 { margin-left: 8.33333% } 87 | .sm-offset-2 { margin-left: 16.66667% } 88 | .sm-offset-3 { margin-left: 25% } 89 | .sm-offset-4 { margin-left: 33.33333% } 90 | .sm-offset-5 { margin-left: 41.66667% } 91 | .sm-offset-6 { margin-left: 50% } 92 | } 93 | 94 | @media (min-width: 62em) { 95 | .md-1 { width: 8.33333% } 96 | .md-2 { width: 16.66667% } 97 | .md-3 { width: 25% } 98 | .md-4 { width: 33.33333% } 99 | .md-5 { width: 41.66667% } 100 | .md-6 { width: 50% } 101 | .md-7 { width: 58.33333% } 102 | .md-8 { width: 66.66667% } 103 | .md-9 { width: 75% } 104 | .md-10 { width: 83.33333% } 105 | .md-11 { width: 91.66667% } 106 | .md-12 { width: 100% } 107 | 108 | .md-offset-0 { margin-left: 0 } 109 | .md-offset-1 { margin-left: 8.33333% } 110 | .md-offset-2 { margin-left: 16.66667% } 111 | .md-offset-3 { margin-left: 25% } 112 | .md-offset-4 { margin-left: 33.33333% } 113 | .md-offset-5 { margin-left: 41.66667% } 114 | .md-offset-6 { margin-left: 50% } 115 | } 116 | 117 | @media (min-width: 75em) { 118 | .lg-1 { width: 8.33333% } 119 | .lg-2 { width: 16.66667% } 120 | .lg-3 { width: 25% } 121 | .lg-4 { width: 33.33333% } 122 | .lg-5 { width: 41.66667% } 123 | .lg-6 { width: 50% } 124 | .lg-7 { width: 58.33333% } 125 | .lg-8 { width: 66.66667% } 126 | .lg-9 { width: 75% } 127 | .lg-10 { width: 83.33333% } 128 | .lg-11 { width: 91.66667% } 129 | .lg-12 { width: 100% } 130 | 131 | .lg-offset-0 { margin-left: 0 } 132 | .lg-offset-1 { margin-left: 8.33333% } 133 | .lg-offset-2 { margin-left: 16.66667% } 134 | .lg-offset-3 { margin-left: 25% } 135 | .lg-offset-4 { margin-left: 33.33333% } 136 | .lg-offset-5 { margin-left: 41.66667% } 137 | .lg-offset-6 { margin-left: 50% } 138 | } 139 | 140 | @media (min-width: 91em) { 141 | .xl-1 { width: 8.33333% } 142 | .xl-2 { width: 16.66667% } 143 | .xl-3 { width: 25% } 144 | .xl-4 { width: 33.33333% } 145 | .xl-5 { width: 41.66667% } 146 | .xl-6 { width: 50% } 147 | .xl-7 { width: 58.33333% } 148 | .xl-8 { width: 66.66667% } 149 | .xl-9 { width: 75% } 150 | .xl-10 { width: 83.33333% } 151 | .xl-11 { width: 91.66667% } 152 | .xl-12 { width: 100% } 153 | 154 | .xl-offset-0 { margin-left: 0 } 155 | .xl-offset-1 { margin-left: 8.33333% } 156 | .xl-offset-2 { margin-left: 16.66667% } 157 | .xl-offset-3 { margin-left: 25% } 158 | .xl-offset-4 { margin-left: 33.33333% } 159 | .xl-offset-5 { margin-left: 41.66667% } 160 | .xl-offset-6 { margin-left: 50% } 161 | } 162 | -------------------------------------------------------------------------------- /css/modules/heights-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 30em) { 3 | .xs-height-auto { height: auto; } 4 | 5 | .xs-height-25 { height: 25%; } 6 | .xs-height-50 { height: 50%; } 7 | .xs-height-75 { height: 75%; } 8 | .xs-height-100 { height: 100%; } 9 | 10 | .xs-height-25vh { height: 25vh; } 11 | .xs-height-50vh { height: 50vh; } 12 | .xs-height-75vh { height: 75vh; } 13 | .xs-height-100vh { height: 100vh; } 14 | } 15 | 16 | @media (min-width: 48em) { 17 | .sm-height-auto { height: auto; } 18 | 19 | .sm-height-25 { height: 25%; } 20 | .sm-height-50 { height: 50%; } 21 | .sm-height-75 { height: 75%; } 22 | .sm-height-100 { height: 100%; } 23 | 24 | .sm-height-25vh { height: 25vh; } 25 | .sm-height-50vh { height: 50vh; } 26 | .sm-height-75vh { height: 75vh; } 27 | .sm-height-100vh { height: 100vh; } 28 | } 29 | 30 | @media (min-width: 62em) { 31 | .md-height-auto { height: auto; } 32 | 33 | .md-height-25 { height: 25%; } 34 | .md-height-50 { height: 50%; } 35 | .md-height-75 { height: 75%; } 36 | .md-height-100 { height: 100%; } 37 | 38 | .md-height-25vh { height: 25vh; } 39 | .md-height-50vh { height: 50vh; } 40 | .md-height-75vh { height: 75vh; } 41 | .md-height-100vh { height: 100vh; } 42 | } 43 | 44 | @media (min-width: 75em) { 45 | .lg-height-auto { height: auto; } 46 | 47 | .lg-height-25 { height: 25%; } 48 | .lg-height-50 { height: 50%; } 49 | .lg-height-75 { height: 75%; } 50 | .lg-height-100 { height: 100%; } 51 | 52 | .lg-height-25vh { height: 25vh; } 53 | .lg-height-50vh { height: 50vh; } 54 | .lg-height-75vh { height: 75vh; } 55 | .lg-height-100vh { height: 100vh; } 56 | } 57 | 58 | @media (min-width: 91em) { 59 | .xl-height-auto { height: auto; } 60 | 61 | .xl-height-25 { height: 25%; } 62 | .xl-height-50 { height: 50%; } 63 | .xl-height-75 { height: 75%; } 64 | .xl-height-100 { height: 100%; } 65 | 66 | .xl-height-25vh { height: 25vh; } 67 | .xl-height-50vh { height: 50vh; } 68 | .xl-height-75vh { height: 75vh; } 69 | .xl-height-100vh { height: 100vh; } 70 | } 71 | -------------------------------------------------------------------------------- /css/modules/heights.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Heights 4 | * 5 | */ 6 | 7 | .height-auto { height: auto; } 8 | 9 | .height-25 { height: 25%; } 10 | 11 | .height-50 { height: 50%; } 12 | 13 | .height-75 { height: 75%; } 14 | 15 | .height-100 { height: 100%; } 16 | 17 | .height-25vh { height: 25vh; } 18 | 19 | .height-50vh { height: 50vh; } 20 | 21 | .height-75vh { height: 75vh; } 22 | 23 | .height-100vh { height: 100vh; } 24 | -------------------------------------------------------------------------------- /css/modules/links.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Links 4 | * 5 | */ 6 | a { 7 | color: #E91E63; 8 | text-decoration: none; 9 | outline: none; 10 | } 11 | a:hover, 12 | a:focus { 13 | border-bottom: 0.125rem solid currentcolor; 14 | } 15 | .link--focus-highlight:focus { 16 | box-shadow: inset 0 0 0 3em rgba(0, 0, 0, .08), 17 | 0 0 0 4px rgba(0, 0, 0, .08); 18 | } 19 | .link--underlined { 20 | border-bottom: 0.125rem solid currentcolor; 21 | } 22 | .link--no-underline, 23 | .link--no-underline:hover, 24 | .link--no-underline:focus { 25 | border-bottom: none; 26 | } 27 | -------------------------------------------------------------------------------- /css/modules/margins-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 30em) { 3 | .xs-mx-auto { margin-left: auto; margin-right: auto; } 4 | .xs-ml-auto { margin-left: auto } 5 | .xs-mr-auto { margin-right: auto } 6 | 7 | .xs-m0 { margin: 0 } 8 | .xs-mt0 { margin-top: 0rem } 9 | .xs-mr0 { margin-right: 0rem } 10 | .xs-mb0 { margin-bottom: 0rem } 11 | .xs-ml0 { margin-left: 0rem } 12 | 13 | .xs-m05 { margin: 0.5rem; } 14 | .xs-mt05 { margin-top: 0.5rem; } 15 | .xs-mr05 { margin-right: 0.5rem; } 16 | .xs-mb05 { margin-bottom: 0.5rem; } 17 | .xs-ml05 { margin-left: 0.5rem; } 18 | 19 | .xs-m1 { margin: 1rem } 20 | .xs-mt1 { margin-top: 1rem } 21 | .xs-mr1 { margin-right: 1rem } 22 | .xs-mb1 { margin-bottom: 1rem } 23 | .xs-ml1 { margin-left: 1rem } 24 | 25 | .xs-m2 { margin: 2rem } 26 | .xs-mt2 { margin-top: 2rem } 27 | .xs-mr2 { margin-right: 2rem } 28 | .xs-mb2 { margin-bottom: 2rem } 29 | .xs-ml2 { margin-left: 2rem } 30 | 31 | .xs-m3 { margin: 3rem } 32 | .xs-mt3 { margin-top: 3rem } 33 | .xs-mr3 { margin-right: 3rem } 34 | .xs-mb3 { margin-bottom: 3rem } 35 | .xs-ml3 { margin-left: 3rem } 36 | 37 | .xs-m4 { margin: 4rem } 38 | .xs-mt4 { margin-top: 4rem } 39 | .xs-mr4 { margin-right: 4rem } 40 | .xs-mb4 { margin-bottom: 4rem } 41 | .xs-ml4 { margin-left: 4rem } 42 | 43 | .xs-m5 { margin: 5rem } 44 | .xs-mt5 { margin-top: 5rem } 45 | .xs-mr5 { margin-right: 5rem } 46 | .xs-mb5 { margin-bottom: 5rem } 47 | .xs-ml5 { margin-left: 5rem } 48 | 49 | .xs-m6 { margin: 6rem } 50 | .xs-mt6 { margin-top: 6rem } 51 | .xs-mr6 { margin-right: 6rem } 52 | .xs-mb6 { margin-bottom: 6rem } 53 | .xs-ml6 { margin-left: 6rem } 54 | 55 | .xs-mx0 { margin-left: 0; margin-right: 0; } 56 | .xs-mx1 { margin-left: 1rem; margin-right: 1rem; } 57 | .xs-mx2 { margin-left: 2rem; margin-right: 2rem; } 58 | .xs-mx3 { margin-left: 3rem; margin-right: 3rem; } 59 | .xs-mx4 { margin-left: 4rem; margin-right: 4rem; } 60 | .xs-mx5 { margin-left: 5rem; margin-right: 5rem; } 61 | .xs-mx6 { margin-left: 6rem; margin-right: 6rem; } 62 | 63 | .xs-my0 { margin-top: 0; margin-bottom: 0; } 64 | .xs-my1 { margin-top: 1rem; margin-bottom: 1rem; } 65 | .xs-my2 { margin-top: 2rem; margin-bottom: 2rem; } 66 | .xs-my3 { margin-top: 3rem; margin-bottom: 3rem; } 67 | .xs-my4 { margin-top: 4rem; margin-bottom: 4rem; } 68 | .xs-my5 { margin-top: 5rem; margin-bottom: 5rem; } 69 | .xs-my6 { margin-top: 6rem; margin-bottom: 6rem; } 70 | 71 | .xs-mxn1 { margin-left: -1rem; margin-right: -1rem; } 72 | .xs-mxn2 { margin-left: -2rem; margin-right: -2rem; } 73 | .xs-mxn3 { margin-left: -3rem; margin-right: -3rem; } 74 | .xs-mxn4 { margin-left: -4rem; margin-right: -4rem; } 75 | .xs-mxn5 { margin-left: -5rem; margin-right: -5rem; } 76 | .xs-mxn6 { margin-left: -6rem; margin-right: -6rem; } 77 | } 78 | 79 | @media (min-width: 48em) { 80 | .sm-mx-auto { margin-left: auto; margin-right: auto; } 81 | .sm-ml-auto { margin-left: auto } 82 | .sm-mr-auto { margin-right: auto } 83 | 84 | .sm-m0 { margin: 0 } 85 | .sm-mt0 { margin-top: 0rem } 86 | .sm-mr0 { margin-right: 0rem } 87 | .sm-mb0 { margin-bottom: 0rem } 88 | .sm-ml0 { margin-left: 0rem } 89 | 90 | .sm-m05 { margin: 0.5rem; } 91 | .sm-mt05 { margin-top: 0.5rem; } 92 | .sm-mr05 { margin-right: 0.5rem; } 93 | .sm-mb05 { margin-bottom: 0.5rem; } 94 | .sm-ml05 { margin-left: 0.5rem; } 95 | 96 | .sm-m1 { margin: 1rem } 97 | .sm-mt1 { margin-top: 1rem } 98 | .sm-mr1 { margin-right: 1rem } 99 | .sm-mb1 { margin-bottom: 1rem } 100 | .sm-ml1 { margin-left: 1rem } 101 | 102 | .sm-m2 { margin: 2rem } 103 | .sm-mt2 { margin-top: 2rem } 104 | .sm-mr2 { margin-right: 2rem } 105 | .sm-mb2 { margin-bottom: 2rem } 106 | .sm-ml2 { margin-left: 2rem } 107 | 108 | .sm-m3 { margin: 3rem } 109 | .sm-mt3 { margin-top: 3rem } 110 | .sm-mr3 { margin-right: 3rem } 111 | .sm-mb3 { margin-bottom: 3rem } 112 | .sm-ml3 { margin-left: 3rem } 113 | 114 | .sm-m4 { margin: 4rem } 115 | .sm-mt4 { margin-top: 4rem } 116 | .sm-mr4 { margin-right: 4rem } 117 | .sm-mb4 { margin-bottom: 4rem } 118 | .sm-ml4 { margin-left: 4rem } 119 | 120 | .sm-m5 { margin: 5rem } 121 | .sm-mt5 { margin-top: 5rem } 122 | .sm-mr5 { margin-right: 5rem } 123 | .sm-mb5 { margin-bottom: 5rem } 124 | .sm-ml5 { margin-left: 5rem } 125 | 126 | .sm-m6 { margin: 6rem } 127 | .sm-mt6 { margin-top: 6rem } 128 | .sm-mr6 { margin-right: 6rem } 129 | .sm-mb6 { margin-bottom: 6rem } 130 | .sm-ml6 { margin-left: 6rem } 131 | 132 | .sm-mx0 { margin-left: 0; margin-right: 0; } 133 | .sm-mx1 { margin-left: 1rem; margin-right: 1rem; } 134 | .sm-mx2 { margin-left: 2rem; margin-right: 2rem; } 135 | .sm-mx3 { margin-left: 3rem; margin-right: 3rem; } 136 | .sm-mx4 { margin-left: 4rem; margin-right: 4rem; } 137 | .sm-mx5 { margin-left: 5rem; margin-right: 5rem; } 138 | .sm-mx6 { margin-left: 6rem; margin-right: 6rem; } 139 | 140 | .sm-my0 { margin-top: 0; margin-bottom: 0; } 141 | .sm-my1 { margin-top: 1rem; margin-bottom: 1rem; } 142 | .sm-my2 { margin-top: 2rem; margin-bottom: 2rem; } 143 | .sm-my3 { margin-top: 3rem; margin-bottom: 3rem; } 144 | .sm-my4 { margin-top: 4rem; margin-bottom: 4rem; } 145 | .sm-my5 { margin-top: 5rem; margin-bottom: 5rem; } 146 | .sm-my6 { margin-top: 6rem; margin-bottom: 6rem; } 147 | 148 | .sm-mxn1 { margin-left: -1rem; margin-right: -1rem; } 149 | .sm-mxn2 { margin-left: -2rem; margin-right: -2rem; } 150 | .sm-mxn3 { margin-left: -3rem; margin-right: -3rem; } 151 | .sm-mxn4 { margin-left: -4rem; margin-right: -4rem; } 152 | .sm-mxn5 { margin-left: -5rem; margin-right: -5rem; } 153 | .sm-mxn6 { margin-left: -6rem; margin-right: -6rem; } 154 | } 155 | 156 | @media (min-width: 62em) { 157 | .md-mx-auto { margin-left: auto; margin-right: auto; } 158 | .md-ml-auto { margin-left: auto } 159 | .md-mr-auto { margin-right: auto } 160 | 161 | .md-m0 { margin: 0 } 162 | .md-mt0 { margin-top: 0rem } 163 | .md-mr0 { margin-right: 0rem } 164 | .md-mb0 { margin-bottom: 0rem } 165 | .md-ml0 { margin-left: 0rem } 166 | 167 | .md-m05 { margin: 0.5rem; } 168 | .md-mt05 { margin-top: 0.5rem; } 169 | .md-mr05 { margin-right: 0.5rem; } 170 | .md-mb05 { margin-bottom: 0.5rem; } 171 | .md-ml05 { margin-left: 0.5rem; } 172 | 173 | .md-m1 { margin: 1rem } 174 | .md-mt1 { margin-top: 1rem } 175 | .md-mr1 { margin-right: 1rem } 176 | .md-mb1 { margin-bottom: 1rem } 177 | .md-ml1 { margin-left: 1rem } 178 | 179 | .md-m2 { margin: 2rem } 180 | .md-mt2 { margin-top: 2rem } 181 | .md-mr2 { margin-right: 2rem } 182 | .md-mb2 { margin-bottom: 2rem } 183 | .md-ml2 { margin-left: 2rem } 184 | 185 | .md-m3 { margin: 3rem } 186 | .md-mt3 { margin-top: 3rem } 187 | .md-mr3 { margin-right: 3rem } 188 | .md-mb3 { margin-bottom: 3rem } 189 | .md-ml3 { margin-left: 3rem } 190 | 191 | .md-m4 { margin: 4rem } 192 | .md-mt4 { margin-top: 4rem } 193 | .md-mr4 { margin-right: 4rem } 194 | .md-mb4 { margin-bottom: 4rem } 195 | .md-ml4 { margin-left: 4rem } 196 | 197 | .md-m5 { margin: 5rem } 198 | .md-mt5 { margin-top: 5rem } 199 | .md-mr5 { margin-right: 5rem } 200 | .md-mb5 { margin-bottom: 5rem } 201 | .md-ml5 { margin-left: 5rem } 202 | 203 | .md-m6 { margin: 6rem } 204 | .md-mt6 { margin-top: 6rem } 205 | .md-mr6 { margin-right: 6rem } 206 | .md-mb6 { margin-bottom: 6rem } 207 | .md-ml6 { margin-left: 6rem } 208 | 209 | .md-mx0 { margin-left: 0; margin-right: 0; } 210 | .md-mx1 { margin-left: 1rem; margin-right: 1rem; } 211 | .md-mx2 { margin-left: 2rem; margin-right: 2rem; } 212 | .md-mx3 { margin-left: 3rem; margin-right: 3rem; } 213 | .md-mx4 { margin-left: 4rem; margin-right: 4rem; } 214 | .md-mx5 { margin-left: 5rem; margin-right: 5rem; } 215 | .md-mx6 { margin-left: 6rem; margin-right: 6rem; } 216 | 217 | .md-my0 { margin-top: 0; margin-bottom: 0; } 218 | .md-my1 { margin-top: 1rem; margin-bottom: 1rem; } 219 | .md-my2 { margin-top: 2rem; margin-bottom: 2rem; } 220 | .md-my3 { margin-top: 3rem; margin-bottom: 3rem; } 221 | .md-my4 { margin-top: 4rem; margin-bottom: 4rem; } 222 | .md-my5 { margin-top: 5rem; margin-bottom: 5rem; } 223 | .md-my6 { margin-top: 6rem; margin-bottom: 6rem; } 224 | 225 | .md-mxn1 { margin-left: -1rem; margin-right: -1rem; } 226 | .md-mxn2 { margin-left: -2rem; margin-right: -2rem; } 227 | .md-mxn3 { margin-left: -3rem; margin-right: -3rem; } 228 | .md-mxn4 { margin-left: -4rem; margin-right: -4rem; } 229 | .md-mxn5 { margin-left: -5rem; margin-right: -5rem; } 230 | .md-mxn6 { margin-left: -6rem; margin-right: -6rem; } 231 | } 232 | 233 | @media (min-width: 75em) { 234 | .lg-mx-auto { margin-left: auto; margin-right: auto; } 235 | .lg-ml-auto { margin-left: auto } 236 | .lg-mr-auto { margin-right: auto } 237 | 238 | .lg-m0 { margin: 0 } 239 | .lg-mt0 { margin-top: 0rem } 240 | .lg-mr0 { margin-right: 0rem } 241 | .lg-mb0 { margin-bottom: 0rem } 242 | .lg-ml0 { margin-left: 0rem } 243 | 244 | .lg-m05 { margin: 0.5rem; } 245 | .lg-mt05 { margin-top: 0.5rem; } 246 | .lg-mr05 { margin-right: 0.5rem; } 247 | .lg-mb05 { margin-bottom: 0.5rem; } 248 | .lg-ml05 { margin-left: 0.5rem; } 249 | 250 | .lg-m1 { margin: 1rem } 251 | .lg-mt1 { margin-top: 1rem } 252 | .lg-mr1 { margin-right: 1rem } 253 | .lg-mb1 { margin-bottom: 1rem } 254 | .lg-ml1 { margin-left: 1rem } 255 | 256 | .lg-m2 { margin: 2rem } 257 | .lg-mt2 { margin-top: 2rem } 258 | .lg-mr2 { margin-right: 2rem } 259 | .lg-mb2 { margin-bottom: 2rem } 260 | .lg-ml2 { margin-left: 2rem } 261 | 262 | .lg-m3 { margin: 3rem } 263 | .lg-mt3 { margin-top: 3rem } 264 | .lg-mr3 { margin-right: 3rem } 265 | .lg-mb3 { margin-bottom: 3rem } 266 | .lg-ml3 { margin-left: 3rem } 267 | 268 | .lg-m4 { margin: 4rem } 269 | .lg-mt4 { margin-top: 4rem } 270 | .lg-mr4 { margin-right: 4rem } 271 | .lg-mb4 { margin-bottom: 4rem } 272 | .lg-ml4 { margin-left: 4rem } 273 | 274 | .lg-m5 { margin: 5rem } 275 | .lg-mt5 { margin-top: 5rem } 276 | .lg-mr5 { margin-right: 5rem } 277 | .lg-mb5 { margin-bottom: 5rem } 278 | .lg-ml5 { margin-left: 5rem } 279 | 280 | .lg-m6 { margin: 6rem } 281 | .lg-mt6 { margin-top: 6rem } 282 | .lg-mr6 { margin-right: 6rem } 283 | .lg-mb6 { margin-bottom: 6rem } 284 | .lg-ml6 { margin-left: 6rem } 285 | 286 | .lg-mx0 { margin-left: 0; margin-right: 0; } 287 | .lg-mx1 { margin-left: 1rem; margin-right: 1rem; } 288 | .lg-mx2 { margin-left: 2rem; margin-right: 2rem; } 289 | .lg-mx3 { margin-left: 3rem; margin-right: 3rem; } 290 | .lg-mx4 { margin-left: 4rem; margin-right: 4rem; } 291 | .lg-mx5 { margin-left: 5rem; margin-right: 5rem; } 292 | .lg-mx6 { margin-left: 6rem; margin-right: 6rem; } 293 | 294 | .lg-my0 { margin-top: 0; margin-bottom: 0; } 295 | .lg-my1 { margin-top: 1rem; margin-bottom: 1rem; } 296 | .lg-my2 { margin-top: 2rem; margin-bottom: 2rem; } 297 | .lg-my3 { margin-top: 3rem; margin-bottom: 3rem; } 298 | .lg-my4 { margin-top: 4rem; margin-bottom: 4rem; } 299 | .lg-my5 { margin-top: 5rem; margin-bottom: 5rem; } 300 | .lg-my6 { margin-top: 6rem; margin-bottom: 6rem; } 301 | 302 | .lg-mxn1 { margin-left: -1rem; margin-right: -1rem; } 303 | .lg-mxn2 { margin-left: -2rem; margin-right: -2rem; } 304 | .lg-mxn3 { margin-left: -3rem; margin-right: -3rem; } 305 | .lg-mxn4 { margin-left: -4rem; margin-right: -4rem; } 306 | .lg-mxn5 { margin-left: -5rem; margin-right: -5rem; } 307 | .lg-mxn6 { margin-left: -6rem; margin-right: -6rem; } 308 | } 309 | 310 | @media (min-width: 91em) { 311 | .xl-mx-auto { margin-left: auto; margin-right: auto; } 312 | .xl-ml-auto { margin-left: auto } 313 | .xl-mr-auto { margin-right: auto } 314 | 315 | .xl-m0 { margin: 0 } 316 | .xl-mt0 { margin-top: 0rem } 317 | .xl-mr0 { margin-right: 0rem } 318 | .xl-mb0 { margin-bottom: 0rem } 319 | .xl-ml0 { margin-left: 0rem } 320 | 321 | .xl-m05 { margin: 0.5rem; } 322 | .xl-mt05 { margin-top: 0.5rem; } 323 | .xl-mr05 { margin-right: 0.5rem; } 324 | .xl-mb05 { margin-bottom: 0.5rem; } 325 | .xl-ml05 { margin-left: 0.5rem; } 326 | 327 | .xl-m1 { margin: 1rem } 328 | .xl-mt1 { margin-top: 1rem } 329 | .xl-mr1 { margin-right: 1rem } 330 | .xl-mb1 { margin-bottom: 1rem } 331 | .xl-ml1 { margin-left: 1rem } 332 | 333 | .xl-m2 { margin: 2rem } 334 | .xl-mt2 { margin-top: 2rem } 335 | .xl-mr2 { margin-right: 2rem } 336 | .xl-mb2 { margin-bottom: 2rem } 337 | .xl-ml2 { margin-left: 2rem } 338 | 339 | .xl-m3 { margin: 3rem } 340 | .xl-mt3 { margin-top: 3rem } 341 | .xl-mr3 { margin-right: 3rem } 342 | .xl-mb3 { margin-bottom: 3rem } 343 | .xl-ml3 { margin-left: 3rem } 344 | 345 | .xl-m4 { margin: 4rem } 346 | .xl-mt4 { margin-top: 4rem } 347 | .xl-mr4 { margin-right: 4rem } 348 | .xl-mb4 { margin-bottom: 4rem } 349 | .xl-ml4 { margin-left: 4rem } 350 | 351 | .xl-m5 { margin: 5rem } 352 | .xl-mt5 { margin-top: 5rem } 353 | .xl-mr5 { margin-right: 5rem } 354 | .xl-mb5 { margin-bottom: 5rem } 355 | .xl-ml5 { margin-left: 5rem } 356 | 357 | .xl-m6 { margin: 6rem } 358 | .xl-mt6 { margin-top: 6rem } 359 | .xl-mr6 { margin-right: 6rem } 360 | .xl-mb6 { margin-bottom: 6rem } 361 | .xl-ml6 { margin-left: 6rem } 362 | 363 | .xl-mx0 { margin-left: 0; margin-right: 0; } 364 | .xl-mx1 { margin-left: 1rem; margin-right: 1rem; } 365 | .xl-mx2 { margin-left: 2rem; margin-right: 2rem; } 366 | .xl-mx3 { margin-left: 3rem; margin-right: 3rem; } 367 | .xl-mx4 { margin-left: 4rem; margin-right: 4rem; } 368 | .xl-mx5 { margin-left: 5rem; margin-right: 5rem; } 369 | .xl-mx6 { margin-left: 6rem; margin-right: 6rem; } 370 | 371 | .xl-my0 { margin-top: 0; margin-bottom: 0; } 372 | .xl-my1 { margin-top: 1rem; margin-bottom: 1rem; } 373 | .xl-my2 { margin-top: 2rem; margin-bottom: 2rem; } 374 | .xl-my3 { margin-top: 3rem; margin-bottom: 3rem; } 375 | .xl-my4 { margin-top: 4rem; margin-bottom: 4rem; } 376 | .xl-my5 { margin-top: 5rem; margin-bottom: 5rem; } 377 | .xl-my6 { margin-top: 6rem; margin-bottom: 6rem; } 378 | 379 | .xl-mxn1 { margin-left: -1rem; margin-right: -1rem; } 380 | .xl-mxn2 { margin-left: -2rem; margin-right: -2rem; } 381 | .xl-mxn3 { margin-left: -3rem; margin-right: -3rem; } 382 | .xl-mxn4 { margin-left: -4rem; margin-right: -4rem; } 383 | .xl-mxn5 { margin-left: -5rem; margin-right: -5rem; } 384 | .xl-mxn6 { margin-left: -6rem; margin-right: -6rem; } 385 | } 386 | -------------------------------------------------------------------------------- /css/modules/margins.css: -------------------------------------------------------------------------------- 1 | 2 | .mx-auto { margin-left: auto; margin-right: auto; } 3 | .ml-auto { margin-left: auto } 4 | .mr-auto { margin-right: auto } 5 | .m0 { margin: 0 } 6 | .mt0 { margin-top: 0 } 7 | .mr0 { margin-right: 0 } 8 | .mb0 { margin-bottom: 0 } 9 | .ml0 { margin-left: 0 } 10 | .mx0 { margin-left: 0; margin-right: 0; } 11 | .my0 { margin-top: 0; margin-bottom: 0; } 12 | .m05 { margin: 0.5rem; } 13 | .mt05 { margin-top: 0.5rem; } 14 | .mr05 { margin-right: 0.5rem; } 15 | .mb05 { margin-bottom: 0.5rem; } 16 | .ml05 { margin-left: 0.5rem; } 17 | .mx05 { margin-left: 0.5rem; margin-right: 0.5rem; } 18 | .my05 { margin-top: 0.5rem; margin-bottom: 0.5rem; } 19 | .m1 { margin: 1rem } 20 | .mt1 { margin-top: 1rem } 21 | .mr1 { margin-right: 1rem } 22 | .mb1 { margin-bottom: 1rem } 23 | .ml1 { margin-left: 1rem } 24 | .mx1 { margin-left: 1rem; margin-right: 1rem; } 25 | .my1 { margin-top: 1rem; margin-bottom: 1rem; } 26 | .mxn1 { margin-left: -1rem; margin-right: -1rem; } 27 | .m2 { margin: 2rem } 28 | .mt2 { margin-top: 2rem } 29 | .mr2 { margin-right: 2rem } 30 | .mb2 { margin-bottom: 2rem } 31 | .ml2 { margin-left: 2rem } 32 | .mx2 { margin-left: 2rem; margin-right: 2rem; } 33 | .my2 { margin-top: 2rem; margin-bottom: 2rem; } 34 | .mxn2 { margin-left: -2rem; margin-right: -2rem; } 35 | .m3 { margin: 3rem } 36 | .mt3 { margin-top: 3rem } 37 | .mr3 { margin-right: 3rem } 38 | .mb3 { margin-bottom: 3rem } 39 | .ml3 { margin-left: 3rem } 40 | .mx3 { margin-left: 3rem; margin-right: 3rem; } 41 | .my3 { margin-top: 3rem; margin-bottom: 3rem; } 42 | .mxn3 { margin-left: -3rem; margin-right: -3rem; } 43 | .m4 { margin: 4rem } 44 | .mt4 { margin-top: 4rem } 45 | .mr4 { margin-right: 4rem } 46 | .mb4 { margin-bottom: 4rem } 47 | .ml4 { margin-left: 4rem } 48 | .mx4 { margin-left: 4rem; margin-right: 4rem; } 49 | .my4 { margin-top: 4rem; margin-bottom: 4rem; } 50 | .mxn4 { margin-left: -4rem; margin-right: -4rem; } 51 | .m5 { margin: 5rem } 52 | .mt5 { margin-top: 5rem } 53 | .mr5 { margin-right: 5rem } 54 | .mb5 { margin-bottom: 5rem } 55 | .ml5 { margin-left: 5rem } 56 | .mx5 { margin-left: 5rem; margin-right: 5rem; } 57 | .my5 { margin-top: 5rem; margin-bottom: 5rem; } 58 | .mxn5 { margin-left: -5rem; margin-right: -5rem; } 59 | .m6 { margin: 6rem } 60 | .mt6 { margin-top: 6rem } 61 | .mr6 { margin-right: 6rem } 62 | .mb6 { margin-bottom: 6rem } 63 | .ml6 { margin-left: 6rem } 64 | .mx6 { margin-left: 6rem; margin-right: 6rem; } 65 | .my6 { margin-top: 6rem; margin-bottom: 6rem; } 66 | .mxn6 { margin-left: -6rem; margin-right: -6rem; } 67 | -------------------------------------------------------------------------------- /css/modules/opacity-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 30em) { 3 | .xs-opacity-100 { opacity: 1; } 4 | .xs-opacity-90 { opacity: .9; } 5 | .xs-opacity-80 { opacity: .8; } 6 | .xs-opacity-70 { opacity: .7; } 7 | .xs-opacity-60 { opacity: .6; } 8 | .xs-opacity-50 { opacity: .5; } 9 | .xs-opacity-40 { opacity: .4; } 10 | .xs-opacity-30 { opacity: .3; } 11 | .xs-opacity-20 { opacity: .2; } 12 | .xs-opacity-10 { opacity: .1; } 13 | .xs-opacity-0 { opacity: 0; } 14 | } 15 | 16 | @media (min-width: 48em) { 17 | .sm-opacity-100 { opacity: 1; } 18 | .sm-opacity-90 { opacity: .9; } 19 | .sm-opacity-80 { opacity: .8; } 20 | .sm-opacity-70 { opacity: .7; } 21 | .sm-opacity-60 { opacity: .6; } 22 | .sm-opacity-50 { opacity: .5; } 23 | .sm-opacity-40 { opacity: .4; } 24 | .sm-opacity-30 { opacity: .3; } 25 | .sm-opacity-20 { opacity: .2; } 26 | .sm-opacity-10 { opacity: .1; } 27 | .sm-opacity-0 { opacity: 0; } 28 | } 29 | 30 | @media (min-width: 62em) { 31 | .md-opacity-100 { opacity: 1; } 32 | .md-opacity-90 { opacity: .9; } 33 | .md-opacity-80 { opacity: .8; } 34 | .md-opacity-70 { opacity: .7; } 35 | .md-opacity-60 { opacity: .6; } 36 | .md-opacity-50 { opacity: .5; } 37 | .md-opacity-40 { opacity: .4; } 38 | .md-opacity-30 { opacity: .3; } 39 | .md-opacity-20 { opacity: .2; } 40 | .md-opacity-10 { opacity: .1; } 41 | .md-opacity-0 { opacity: 0; } 42 | } 43 | 44 | @media (min-width: 75em) { 45 | .lg-opacity-100 { opacity: 1; } 46 | .lg-opacity-90 { opacity: .9; } 47 | .lg-opacity-80 { opacity: .8; } 48 | .lg-opacity-70 { opacity: .7; } 49 | .lg-opacity-60 { opacity: .6; } 50 | .lg-opacity-50 { opacity: .5; } 51 | .lg-opacity-40 { opacity: .4; } 52 | .lg-opacity-30 { opacity: .3; } 53 | .lg-opacity-20 { opacity: .2; } 54 | .lg-opacity-10 { opacity: .1; } 55 | .lg-opacity-0 { opacity: 0; } 56 | } 57 | 58 | @media (min-width: 91em) { 59 | .xl-opacity-100 { opacity: 1; } 60 | .xl-opacity-90 { opacity: .9; } 61 | .xl-opacity-80 { opacity: .8; } 62 | .xl-opacity-70 { opacity: .7; } 63 | .xl-opacity-60 { opacity: .6; } 64 | .xl-opacity-50 { opacity: .5; } 65 | .xl-opacity-40 { opacity: .4; } 66 | .xl-opacity-30 { opacity: .3; } 67 | .xl-opacity-20 { opacity: .2; } 68 | .xl-opacity-10 { opacity: .1; } 69 | .xl-opacity-0 { opacity: 0; } 70 | } 71 | -------------------------------------------------------------------------------- /css/modules/opacity.css: -------------------------------------------------------------------------------- 1 | .opacity-100 { opacity: 1; } 2 | .opacity-90 { opacity: .9; } 3 | .opacity-80 { opacity: .8; } 4 | .opacity-70 { opacity: .7; } 5 | .opacity-60 { opacity: .6; } 6 | .opacity-50 { opacity: .5; } 7 | .opacity-40 { opacity: .4; } 8 | .opacity-30 { opacity: .3; } 9 | .opacity-20 { opacity: .2; } 10 | .opacity-10 { opacity: .1; } 11 | .opacity-0 { opacity: 0; } 12 | -------------------------------------------------------------------------------- /css/modules/paddings-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 30em) { 3 | .xs-p0 { padding: 0; } 4 | .xs-pt0 { padding-top: 0; } 5 | .xs-pr0 { padding-right: 0; } 6 | .xs-pb0 { padding-bottom: 0; } 7 | .xs-pl0 { padding-left: 0; } 8 | 9 | .xs-p05 { padding: 0.5rem; } 10 | .xs-pt05 { padding-top: 0.5rem; } 11 | .xs-pr05 { padding-right: 0.5rem; } 12 | .xs-pb05 { padding-bottom: 0.5rem; } 13 | .xs-pl05 { padding-left: 0.5rem; } 14 | 15 | .xs-p1 { padding: 1rem; } 16 | .xs-pt1 { padding-top: 1rem; } 17 | .xs-pr1 { padding-right: 1rem; } 18 | .xs-pb1 { padding-bottom: 1rem; } 19 | .xs-pl1 { padding-left: 1rem; } 20 | 21 | .xs-p2 { padding: 2rem; } 22 | .xs-pt2 { padding-top: 2rem; } 23 | .xs-pr2 { padding-right: 2rem; } 24 | .xs-pb2 { padding-bottom: 2rem; } 25 | .xs-pl2 { padding-left: 2rem; } 26 | 27 | .xs-p3 { padding: 3rem; } 28 | .xs-pt3 { padding-top: 3rem; } 29 | .xs-pr3 { padding-right: 3rem; } 30 | .xs-pb3 { padding-bottom: 3rem; } 31 | .xs-pl3 { padding-left: 3rem; } 32 | 33 | .xs-p4 { padding: 4rem; } 34 | .xs-pt4 { padding-top: 4rem; } 35 | .xs-pr4 { padding-right: 4rem; } 36 | .xs-pb4 { padding-bottom: 4rem; } 37 | .xs-pl4 { padding-left: 4rem; } 38 | 39 | .xs-p5 { padding: 5rem; } 40 | .xs-pt5 { padding-top: 5rem; } 41 | .xs-pr5 { padding-right: 5rem; } 42 | .xs-pb5 { padding-bottom: 5rem; } 43 | .xs-pl5 { padding-left: 5rem; } 44 | 45 | .xs-p6 { padding: 6rem; } 46 | .xs-pt6 { padding-top: 6rem; } 47 | .xs-pr6 { padding-right: 6rem; } 48 | .xs-pb6 { padding-bottom: 6rem; } 49 | .xs-pl6 { padding-left: 6rem; } 50 | 51 | .xs-px0 { padding-left: 0; padding-right: 0; } 52 | .xs-px1 { padding-left: 1rem; padding-right: 1rem; } 53 | .xs-px2 { padding-left: 2rem; padding-right: 2rem; } 54 | .xs-px3 { padding-left: 3rem; padding-right: 3rem; } 55 | .xs-px4 { padding-left: 4rem; padding-right: 4rem; } 56 | .xs-px5 { padding-left: 5rem; padding-right: 5rem; } 57 | .xs-px6 { padding-left: 6rem; padding-right: 6rem; } 58 | 59 | .xs-py0 { padding-top: 0; padding-bottom: 0; } 60 | .xs-py1 { padding-top: 1rem; padding-bottom: 1rem; } 61 | .xs-py2 { padding-top: 2rem; padding-bottom: 2rem; } 62 | .xs-py3 { padding-top: 3rem; padding-bottom: 3rem; } 63 | .xs-py4 { padding-top: 4rem; padding-bottom: 4rem; } 64 | .xs-py5 { padding-top: 5rem; padding-bottom: 5rem; } 65 | .xs-py6 { padding-top: 6rem; padding-bottom: 6rem; } 66 | } 67 | 68 | @media (min-width: 48em) { 69 | .sm-p0 { padding: 0; } 70 | .sm-pt0 { padding-top: 0; } 71 | .sm-pr0 { padding-right: 0; } 72 | .sm-pb0 { padding-bottom: 0; } 73 | .sm-pl0 { padding-left: 0; } 74 | 75 | .sm-p05 { padding: 0.5rem; } 76 | .sm-pt05 { padding-top: 0.5rem; } 77 | .sm-pr05 { padding-right: 0.5rem; } 78 | .sm-pb05 { padding-bottom: 0.5rem; } 79 | .sm-pl05 { padding-left: 0.5rem; } 80 | 81 | .sm-p1 { padding: 1rem; } 82 | .sm-pt1 { padding-top: 1rem; } 83 | .sm-pr1 { padding-right: 1rem; } 84 | .sm-pb1 { padding-bottom: 1rem; } 85 | .sm-pl1 { padding-left: 1rem; } 86 | 87 | .sm-p2 { padding: 2rem; } 88 | .sm-pt2 { padding-top: 2rem; } 89 | .sm-pr2 { padding-right: 2rem; } 90 | .sm-pb2 { padding-bottom: 2rem; } 91 | .sm-pl2 { padding-left: 2rem; } 92 | 93 | .sm-p3 { padding: 3rem; } 94 | .sm-pt3 { padding-top: 3rem; } 95 | .sm-pr3 { padding-right: 3rem; } 96 | .sm-pb3 { padding-bottom: 3rem; } 97 | .sm-pl3 { padding-left: 3rem; } 98 | 99 | .sm-p4 { padding: 4rem; } 100 | .sm-pt4 { padding-top: 4rem; } 101 | .sm-pr4 { padding-right: 4rem; } 102 | .sm-pb4 { padding-bottom: 4rem; } 103 | .sm-pl4 { padding-left: 4rem; } 104 | 105 | .sm-p5 { padding: 5rem; } 106 | .sm-pt5 { padding-top: 5rem; } 107 | .sm-pr5 { padding-right: 5rem; } 108 | .sm-pb5 { padding-bottom: 5rem; } 109 | .sm-pl5 { padding-left: 5rem; } 110 | 111 | .sm-p6 { padding: 6rem; } 112 | .sm-pt6 { padding-top: 6rem; } 113 | .sm-pr6 { padding-right: 6rem; } 114 | .sm-pb6 { padding-bottom: 6rem; } 115 | .sm-pl6 { padding-left: 6rem; } 116 | 117 | .sm-px0 { padding-left: 0; padding-right: 0; } 118 | .sm-px1 { padding-left: 1rem; padding-right: 1rem; } 119 | .sm-px2 { padding-left: 2rem; padding-right: 2rem; } 120 | .sm-px3 { padding-left: 3rem; padding-right: 3rem; } 121 | .sm-px4 { padding-left: 4rem; padding-right: 4rem; } 122 | .sm-px5 { padding-left: 5rem; padding-right: 5rem; } 123 | .sm-px6 { padding-left: 6rem; padding-right: 6rem; } 124 | 125 | .sm-py0 { padding-top: 0; padding-bottom: 0; } 126 | .sm-py1 { padding-top: 1rem; padding-bottom: 1rem; } 127 | .sm-py2 { padding-top: 2rem; padding-bottom: 2rem; } 128 | .sm-py3 { padding-top: 3rem; padding-bottom: 3rem; } 129 | .sm-py4 { padding-top: 4rem; padding-bottom: 4rem; } 130 | .sm-py5 { padding-top: 5rem; padding-bottom: 5rem; } 131 | .sm-py6 { padding-top: 6rem; padding-bottom: 6rem; } 132 | } 133 | 134 | @media (min-width: 62em) { 135 | .md-p0 { padding: 0; } 136 | .md-pt0 { padding-top: 0; } 137 | .md-pr0 { padding-right: 0; } 138 | .md-pb0 { padding-bottom: 0; } 139 | .md-pl0 { padding-left: 0; } 140 | 141 | .md-p05 { padding: 0.5rem; } 142 | .md-pt05 { padding-top: 0.5rem; } 143 | .md-pr05 { padding-right: 0.5rem; } 144 | .md-pb05 { padding-bottom: 0.5rem; } 145 | .md-pl05 { padding-left: 0.5rem; } 146 | 147 | .md-p1 { padding: 1rem; } 148 | .md-pt1 { padding-top: 1rem; } 149 | .md-pr1 { padding-right: 1rem; } 150 | .md-pb1 { padding-bottom: 1rem; } 151 | .md-pl1 { padding-left: 1rem; } 152 | 153 | .md-p2 { padding: 2rem; } 154 | .md-pt2 { padding-top: 2rem; } 155 | .md-pr2 { padding-right: 2rem; } 156 | .md-pb2 { padding-bottom: 2rem; } 157 | .md-pl2 { padding-left: 2rem; } 158 | 159 | .md-p3 { padding: 3rem; } 160 | .md-pt3 { padding-top: 3rem; } 161 | .md-pr3 { padding-right: 3rem; } 162 | .md-pb3 { padding-bottom: 3rem; } 163 | .md-pl3 { padding-left: 3rem; } 164 | 165 | .md-p4 { padding: 4rem; } 166 | .md-pt4 { padding-top: 4rem; } 167 | .md-pr4 { padding-right: 4rem; } 168 | .md-pb4 { padding-bottom: 4rem; } 169 | .md-pl4 { padding-left: 4rem; } 170 | 171 | .md-p5 { padding: 5rem; } 172 | .md-pt5 { padding-top: 5rem; } 173 | .md-pr5 { padding-right: 5rem; } 174 | .md-pb5 { padding-bottom: 5rem; } 175 | .md-pl5 { padding-left: 5rem; } 176 | 177 | .md-p6 { padding: 6rem; } 178 | .md-pt6 { padding-top: 6rem; } 179 | .md-pr6 { padding-right: 6rem; } 180 | .md-pb6 { padding-bottom: 6rem; } 181 | .md-pl6 { padding-left: 6rem; } 182 | 183 | .md-px0 { padding-left: 0; padding-right: 0; } 184 | .md-px1 { padding-left: 1rem; padding-right: 1rem; } 185 | .md-px2 { padding-left: 2rem; padding-right: 2rem; } 186 | .md-px3 { padding-left: 3rem; padding-right: 3rem; } 187 | .md-px4 { padding-left: 4rem; padding-right: 4rem; } 188 | .md-px5 { padding-left: 5rem; padding-right: 5rem; } 189 | .md-px6 { padding-left: 6rem; padding-right: 6rem; } 190 | 191 | .md-py0 { padding-top: 0; padding-bottom: 0; } 192 | .md-py1 { padding-top: 1rem; padding-bottom: 1rem; } 193 | .md-py2 { padding-top: 2rem; padding-bottom: 2rem; } 194 | .md-py3 { padding-top: 3rem; padding-bottom: 3rem; } 195 | .md-py4 { padding-top: 4rem; padding-bottom: 4rem; } 196 | .md-py5 { padding-top: 5rem; padding-bottom: 5rem; } 197 | .md-py6 { padding-top: 6rem; padding-bottom: 6rem; } 198 | } 199 | 200 | @media (min-width: 75em) { 201 | .lg-p0 { padding: 0; } 202 | .lg-pt0 { padding-top: 0; } 203 | .lg-pr0 { padding-right: 0; } 204 | .lg-pb0 { padding-bottom: 0; } 205 | .lg-pl0 { padding-left: 0; } 206 | 207 | .lg-p05 { padding: 0.5rem; } 208 | .lg-pt05 { padding-top: 0.5rem; } 209 | .lg-pr05 { padding-right: 0.5rem; } 210 | .lg-pb05 { padding-bottom: 0.5rem; } 211 | .lg-pl05 { padding-left: 0.5rem; } 212 | 213 | .lg-p1 { padding: 1rem; } 214 | .lg-pt1 { padding-top: 1rem; } 215 | .lg-pr1 { padding-right: 1rem; } 216 | .lg-pb1 { padding-bottom: 1rem; } 217 | .lg-pl1 { padding-left: 1rem; } 218 | 219 | .lg-p2 { padding: 2rem; } 220 | .lg-pt2 { padding-top: 2rem; } 221 | .lg-pr2 { padding-right: 2rem; } 222 | .lg-pb2 { padding-bottom: 2rem; } 223 | .lg-pl2 { padding-left: 2rem; } 224 | 225 | .lg-p3 { padding: 3rem; } 226 | .lg-pt3 { padding-top: 3rem; } 227 | .lg-pr3 { padding-right: 3rem; } 228 | .lg-pb3 { padding-bottom: 3rem; } 229 | .lg-pl3 { padding-left: 3rem; } 230 | 231 | .lg-p4 { padding: 4rem; } 232 | .lg-pt4 { padding-top: 4rem; } 233 | .lg-pr4 { padding-right: 4rem; } 234 | .lg-pb4 { padding-bottom: 4rem; } 235 | .lg-pl4 { padding-left: 4rem; } 236 | 237 | .lg-p5 { padding: 5rem; } 238 | .lg-pt5 { padding-top: 5rem; } 239 | .lg-pr5 { padding-right: 5rem; } 240 | .lg-pb5 { padding-bottom: 5rem; } 241 | .lg-pl5 { padding-left: 5rem; } 242 | 243 | .lg-p6 { padding: 6rem; } 244 | .lg-pt6 { padding-top: 6rem; } 245 | .lg-pr6 { padding-right: 6rem; } 246 | .lg-pb6 { padding-bottom: 6rem; } 247 | .lg-pl6 { padding-left: 6rem; } 248 | 249 | .lg-px0 { padding-left: 0; padding-right: 0; } 250 | .lg-px1 { padding-left: 1rem; padding-right: 1rem; } 251 | .lg-px2 { padding-left: 2rem; padding-right: 2rem; } 252 | .lg-px3 { padding-left: 3rem; padding-right: 3rem; } 253 | .lg-px4 { padding-left: 4rem; padding-right: 4rem; } 254 | .lg-px5 { padding-left: 5rem; padding-right: 5rem; } 255 | .lg-px6 { padding-left: 6rem; padding-right: 6rem; } 256 | 257 | .lg-py0 { padding-top: 0; padding-bottom: 0; } 258 | .lg-py1 { padding-top: 1rem; padding-bottom: 1rem; } 259 | .lg-py2 { padding-top: 2rem; padding-bottom: 2rem; } 260 | .lg-py3 { padding-top: 3rem; padding-bottom: 3rem; } 261 | .lg-py4 { padding-top: 4rem; padding-bottom: 4rem; } 262 | .lg-py5 { padding-top: 5rem; padding-bottom: 5rem; } 263 | .lg-py6 { padding-top: 6rem; padding-bottom: 6rem; } 264 | } 265 | 266 | @media (min-width: 91em) { 267 | .xl-p0 { padding: 0; } 268 | .xl-pt0 { padding-top: 0; } 269 | .xl-pr0 { padding-right: 0; } 270 | .xl-pb0 { padding-bottom: 0; } 271 | .xl-pl0 { padding-left: 0; } 272 | 273 | .xl-p05 { padding: 0.5rem; } 274 | .xl-pt05 { padding-top: 0.5rem; } 275 | .xl-pr05 { padding-right: 0.5rem; } 276 | .xl-pb05 { padding-bottom: 0.5rem; } 277 | .xl-pl05 { padding-left: 0.5rem; } 278 | 279 | .xl-p1 { padding: 1rem; } 280 | .xl-pt1 { padding-top: 1rem; } 281 | .xl-pr1 { padding-right: 1rem; } 282 | .xl-pb1 { padding-bottom: 1rem; } 283 | .xl-pl1 { padding-left: 1rem; } 284 | 285 | .xl-p2 { padding: 2rem; } 286 | .xl-pt2 { padding-top: 2rem; } 287 | .xl-pr2 { padding-right: 2rem; } 288 | .xl-pb2 { padding-bottom: 2rem; } 289 | .xl-pl2 { padding-left: 2rem; } 290 | 291 | .xl-p3 { padding: 3rem; } 292 | .xl-pt3 { padding-top: 3rem; } 293 | .xl-pr3 { padding-right: 3rem; } 294 | .xl-pb3 { padding-bottom: 3rem; } 295 | .xl-pl3 { padding-left: 3rem; } 296 | 297 | .xl-p4 { padding: 4rem; } 298 | .xl-pt4 { padding-top: 4rem; } 299 | .xl-pr4 { padding-right: 4rem; } 300 | .xl-pb4 { padding-bottom: 4rem; } 301 | .xl-pl4 { padding-left: 4rem; } 302 | 303 | .xl-p5 { padding: 5rem; } 304 | .xl-pt5 { padding-top: 5rem; } 305 | .xl-pr5 { padding-right: 5rem; } 306 | .xl-pb5 { padding-bottom: 5rem; } 307 | .xl-pl5 { padding-left: 5rem; } 308 | 309 | .xl-p6 { padding: 6rem; } 310 | .xl-pt6 { padding-top: 6rem; } 311 | .xl-pr6 { padding-right: 6rem; } 312 | .xl-pb6 { padding-bottom: 6rem; } 313 | .xl-pl6 { padding-left: 6rem; } 314 | 315 | .xl-px0 { padding-left: 0; padding-right: 0; } 316 | .xl-px1 { padding-left: 1rem; padding-right: 1rem; } 317 | .xl-px2 { padding-left: 2rem; padding-right: 2rem; } 318 | .xl-px3 { padding-left: 3rem; padding-right: 3rem; } 319 | .xl-px4 { padding-left: 4rem; padding-right: 4rem; } 320 | .xl-px5 { padding-left: 5rem; padding-right: 5rem; } 321 | .xl-px6 { padding-left: 6rem; padding-right: 6rem; } 322 | 323 | .xl-py0 { padding-top: 0; padding-bottom: 0; } 324 | .xl-py1 { padding-top: 1rem; padding-bottom: 1rem; } 325 | .xl-py2 { padding-top: 2rem; padding-bottom: 2rem; } 326 | .xl-py3 { padding-top: 3rem; padding-bottom: 3rem; } 327 | .xl-py4 { padding-top: 4rem; padding-bottom: 4rem; } 328 | .xl-py5 { padding-top: 5rem; padding-bottom: 5rem; } 329 | .xl-py6 { padding-top: 6rem; padding-bottom: 6rem; } 330 | } 331 | -------------------------------------------------------------------------------- /css/modules/paddings.css: -------------------------------------------------------------------------------- 1 | 2 | .p0 { padding: 0; } 3 | .pt0 { padding-top: 0; } 4 | .pr0 { padding-right: 0; } 5 | .pb0 { padding-bottom: 0; } 6 | .pl0 { padding-left: 0; } 7 | .px0 { padding-left: 0; padding-right: 0; } 8 | .py0 { padding-top: 0; padding-bottom: 0; } 9 | .p05 { padding: 0.5rem; } 10 | .pt05 { padding-top: 0.5rem; } 11 | .pr05 { padding-right: 0.5rem; } 12 | .pb05 { padding-bottom: 0.5rem; } 13 | .pl05 { padding-left: 0.5rem; } 14 | .px05 { padding-left: 0.5rem; padding-right: 0.5rem; } 15 | .py05 { padding-top: 0.5rem; padding-bottom: 0.5rem; } 16 | .p1 { padding: 1rem; } 17 | .pt1 { padding-top: 1rem; } 18 | .pr1 { padding-right: 1rem; } 19 | .pb1 { padding-bottom: 1rem; } 20 | .pl1 { padding-left: 1rem; } 21 | .px1 { padding-left: 1rem; padding-right: 1rem; } 22 | .py1 { padding-top: 1rem; padding-bottom: 1rem; } 23 | .p2 { padding: 2rem; } 24 | .pt2 { padding-top: 2rem; } 25 | .pr2 { padding-right: 2rem; } 26 | .pb2 { padding-bottom: 2rem; } 27 | .pl2 { padding-left: 2rem; } 28 | .px2 { padding-left: 2rem; padding-right: 2rem; } 29 | .py2 { padding-top: 2rem; padding-bottom: 2rem; } 30 | .p3 { padding: 3rem; } 31 | .pt3 { padding-top: 3rem; } 32 | .pr3 { padding-right: 3rem; } 33 | .pb3 { padding-bottom: 3rem; } 34 | .pl3 { padding-left: 3rem; } 35 | .px3 { padding-left: 3rem; padding-right: 3rem; } 36 | .py3 { padding-top: 3rem; padding-bottom: 3rem; } 37 | .p4 { padding: 4rem; } 38 | .pt4 { padding-top: 4rem; } 39 | .pr4 { padding-right: 4rem; } 40 | .pb4 { padding-bottom: 4rem; } 41 | .pl4 { padding-left: 4rem; } 42 | .px4 { padding-left: 4rem; padding-right: 4rem; } 43 | .py4 { padding-top: 4rem; padding-bottom: 4rem; } 44 | .p5 { padding: 5rem; } 45 | .pt5 { padding-top: 5rem; } 46 | .pr5 { padding-right: 5rem; } 47 | .pb5 { padding-bottom: 5rem; } 48 | .pl5 { padding-left: 5rem; } 49 | .px5 { padding-left: 5rem; padding-right: 5rem; } 50 | .py5 { padding-top: 5rem; padding-bottom: 5rem; } 51 | .p6 { padding: 6rem; } 52 | .pt6 { padding-top: 6rem; } 53 | .pr6 { padding-right: 6rem; } 54 | .pb6 { padding-bottom: 6rem; } 55 | .pl6 { padding-left: 6rem; } 56 | .px6 { padding-left: 6rem; padding-right: 6rem; } 57 | .py6 { padding-top: 6rem; padding-bottom: 6rem; } 58 | -------------------------------------------------------------------------------- /css/modules/position-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 30em) { 3 | .xs-relative { position: relative; } 4 | .xs-absolute { position: absolute; } 5 | .xs-fixed { position: fixed; } 6 | 7 | .xs-t0 { top: 0; } 8 | .xs-r0 { right: 0; } 9 | .xs-l0 { left: 0; } 10 | .xs-b0 { bottom: 0; } 11 | 12 | .xs-t1 { top: 1rem; } 13 | .xs-r1 { right: 1rem; } 14 | .xs-l1 { left: 1rem; } 15 | .xs-b1 { bottom: 1rem; } 16 | 17 | .xs-tn1 { top: -1rem; } 18 | .xs-rn1 { right: -1rem; } 19 | .xs-ln1 { left: -1rem; } 20 | .xs-bn1 { bottom: -1rem; } 21 | 22 | .xs-t100 { top: 100%; } 23 | .xs-b100 { bottom: 100%; } 24 | .xs-r100 { right: 100%; } 25 | .xs-l100 { left: 100%; } 26 | 27 | .xs-t50 { top: 50%; } 28 | .xs-b50 { bottom: 50%; } 29 | .xs-r50 { right: 50%; } 30 | .xs-l50 { left: 50%; } 31 | 32 | .xs-t25 { top: 25%; } 33 | .xs-b25 { bottom: 25%; } 34 | .xs-r25 { right: 25%; } 35 | .xs-l25 { left: 25%; } 36 | 37 | .xs-t33 { top: 33%; } 38 | .xs-b33 { bottom: 33%; } 39 | .xs-r33 { right: 33%; } 40 | .xs-l33 { left: 33%; } 41 | } 42 | 43 | @media (min-width: 48em) { 44 | .sm-relative { position: relative; } 45 | .sm-absolute { position: absolute; } 46 | .sm-fixed { position: fixed; } 47 | 48 | .sm-t0 { top: 0; } 49 | .sm-r0 { right: 0; } 50 | .sm-l0 { left: 0; } 51 | .sm-b0 { bottom: 0; } 52 | 53 | .sm-t1 { top: 1rem; } 54 | .sm-r1 { right: 1rem; } 55 | .sm-l1 { left: 1rem; } 56 | .sm-b1 { bottom: 1rem; } 57 | 58 | .sm-tn1 { top: -1rem; } 59 | .sm-rn1 { right: -1rem; } 60 | .sm-ln1 { left: -1rem; } 61 | .sm-bn1 { bottom: -1rem; } 62 | 63 | .sm-t100 { top: 100%; } 64 | .sm-b100 { bottom: 100%; } 65 | .sm-r100 { right: 100%; } 66 | .sm-l100 { left: 100%; } 67 | 68 | .sm-t50 { top: 50%; } 69 | .sm-b50 { bottom: 50%; } 70 | .sm-r50 { right: 50%; } 71 | .sm-l50 { left: 50%; } 72 | 73 | .sm-t25 { top: 25%; } 74 | .sm-b25 { bottom: 25%; } 75 | .sm-r25 { right: 25%; } 76 | .sm-l25 { left: 25%; } 77 | 78 | .sm-t33 { top: 33%; } 79 | .sm-b33 { bottom: 33%; } 80 | .sm-r33 { right: 33%; } 81 | .sm-l33 { left: 33%; } 82 | } 83 | 84 | @media (min-width: 62em) { 85 | .md-relative { position: relative; } 86 | .md-absolute { position: absolute; } 87 | .md-fixed { position: fixed; } 88 | 89 | .md-t0 { top: 0; } 90 | .md-r0 { right: 0; } 91 | .md-l0 { left: 0; } 92 | .md-b0 { bottom: 0; } 93 | 94 | .md-t1 { top: 1rem; } 95 | .md-r1 { right: 1rem; } 96 | .md-l1 { left: 1rem; } 97 | .md-b1 { bottom: 1rem; } 98 | 99 | .md-tn1 { top: -1rem; } 100 | .md-rn1 { right: -1rem; } 101 | .md-ln1 { left: -1rem; } 102 | .md-bn1 { bottom: -1rem; } 103 | 104 | .md-t100 { top: 100%; } 105 | .md-b100 { bottom: 100%; } 106 | .md-r100 { right: 100%; } 107 | .md-l100 { left: 100%; } 108 | 109 | .md-t50 { top: 50%; } 110 | .md-b50 { bottom: 50%; } 111 | .md-r50 { right: 50%; } 112 | .md-l50 { left: 50%; } 113 | 114 | .md-t25 { top: 25%; } 115 | .md-b25 { bottom: 25%; } 116 | .md-r25 { right: 25%; } 117 | .md-l25 { left: 25%; } 118 | 119 | .md-t33 { top: 33%; } 120 | .md-b33 { bottom: 33%; } 121 | .md-r33 { right: 33%; } 122 | .md-l33 { left: 33%; } 123 | } 124 | 125 | @media (min-width: 75em) { 126 | .lg-relative { position: relative; } 127 | .lg-absolute { position: absolute; } 128 | .lg-fixed { position: fixed; } 129 | 130 | .lg-t0 { top: 0; } 131 | .lg-r0 { right: 0; } 132 | .lg-l0 { left: 0; } 133 | .lg-b0 { bottom: 0; } 134 | 135 | .lg-t1 { top: 1rem; } 136 | .lg-r1 { right: 1rem; } 137 | .lg-l1 { left: 1rem; } 138 | .lg-b1 { bottom: 1rem; } 139 | 140 | .lg-tn1 { top: -1rem; } 141 | .lg-rn1 { right: -1rem; } 142 | .lg-ln1 { left: -1rem; } 143 | .lg-bn1 { bottom: -1rem; } 144 | 145 | .lg-t100 { top: 100%; } 146 | .lg-b100 { bottom: 100%; } 147 | .lg-r100 { right: 100%; } 148 | .lg-l100 { left: 100%; } 149 | 150 | .lg-t50 { top: 50%; } 151 | .lg-b50 { bottom: 50%; } 152 | .lg-r50 { right: 50%; } 153 | .lg-l50 { left: 50%; } 154 | 155 | .lg-t25 { top: 25%; } 156 | .lg-b25 { bottom: 25%; } 157 | .lg-r25 { right: 25%; } 158 | .lg-l25 { left: 25%; } 159 | 160 | .lg-t33 { top: 33%; } 161 | .lg-b33 { bottom: 33%; } 162 | .lg-r33 { right: 33%; } 163 | .lg-l33 { left: 33%; } 164 | } 165 | 166 | @media (min-width: 91em) { 167 | .xl-relative { position: relative; } 168 | .xl-absolute { position: absolute; } 169 | .xl-fixed { position: fixed; } 170 | 171 | .xl-t0 { top: 0; } 172 | .xl-r0 { right: 0; } 173 | .xl-l0 { left: 0; } 174 | .xl-b0 { bottom: 0; } 175 | 176 | .xl-t1 { top: 1rem; } 177 | .xl-r1 { right: 1rem; } 178 | .xl-l1 { left: 1rem; } 179 | .xl-b1 { bottom: 1rem; } 180 | 181 | .xl-tn1 { top: -1rem; } 182 | .xl-rn1 { right: -1rem; } 183 | .xl-ln1 { left: -1rem; } 184 | .xl-bn1 { bottom: -1rem; } 185 | 186 | .xl-t100 { top: 100%; } 187 | .xl-b100 { bottom: 100%; } 188 | .xl-r100 { right: 100%; } 189 | .xl-l100 { left: 100%; } 190 | 191 | .xl-t50 { top: 50%; } 192 | .xl-b50 { bottom: 50%; } 193 | .xl-r50 { right: 50%; } 194 | .xl-l50 { left: 50%; } 195 | 196 | .xl-t25 { top: 25%; } 197 | .xl-b25 { bottom: 25%; } 198 | .xl-r25 { right: 25%; } 199 | .xl-l25 { left: 25%; } 200 | 201 | .xl-t33 { top: 33%; } 202 | .xl-b33 { bottom: 33%; } 203 | .xl-r33 { right: 33%; } 204 | .xl-l33 { left: 33%; } 205 | } 206 | -------------------------------------------------------------------------------- /css/modules/position.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Position 4 | * 5 | */ 6 | .relative { position: relative; } 7 | .absolute { position: absolute; } 8 | .fixed { position: fixed; } 9 | .t0 { top: 0; } 10 | .r0 { right: 0; } 11 | .l0 { left: 0; } 12 | .b0 { bottom: 0; } 13 | .t1 { top: 1rem; } 14 | .r1 { right: 1rem; } 15 | .l1 { left: 1rem; } 16 | .b1 { bottom: 1rem; } 17 | .tn1 { top: -1rem; } 18 | .rn1 { right: -1rem; } 19 | .ln1 { left: -1rem; } 20 | .bn1 { bottom: -1rem; } 21 | .t100 { top: 100%; } 22 | .b100 { bottom: 100%; } 23 | .r100 { right: 100%; } 24 | .l100 { left: 100%; } 25 | .t50 { top: 50%; } 26 | .b50 { bottom: 50%; } 27 | .r50 { right: 50%; } 28 | .l50 { left: 50%; } 29 | .t25 { top: 25%; } 30 | .b25 { bottom: 25%; } 31 | .r25 { right: 25%; } 32 | .l25 { left: 25%; } 33 | .t33 { top: 33%; } 34 | .b33 { bottom: 33%; } 35 | .r33 { right: 33%; } 36 | .l33 { left: 33%; } 37 | -------------------------------------------------------------------------------- /css/modules/ratios-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 30em) { 3 | .xs-ratio-2-1 { height: 0; padding-bottom: 50%; } 4 | .xs-ratio-16-9 { height: 0; padding-bottom: 56.25%; } 5 | .xs-ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 6 | .xs-ratio-4-3 { height: 0; padding-bottom: 75%; } 7 | .xs-ratio-1-1 { height: 0; padding-bottom: 100%; } 8 | 9 | .xs-ratio-1-2 { height: 0; padding-bottom: 200%; } 10 | .xs-ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 11 | .xs-ratio-2-3 { height: 0; padding-bottom: 150%; } 12 | .xs-ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 13 | } 14 | 15 | @media (min-width: 48em) { 16 | .sm-ratio-2-1 { height: 0; padding-bottom: 50%; } 17 | .sm-ratio-16-9 { height: 0; padding-bottom: 56.25%; } 18 | .sm-ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 19 | .sm-ratio-4-3 { height: 0; padding-bottom: 75%; } 20 | .sm-ratio-1-1 { height: 0; padding-bottom: 100%; } 21 | 22 | .sm-ratio-1-2 { height: 0; padding-bottom: 200%; } 23 | .sm-ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 24 | .sm-ratio-2-3 { height: 0; padding-bottom: 150%; } 25 | .sm-ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 26 | } 27 | 28 | @media (min-width: 62em) { 29 | .md-ratio-2-1 { height: 0; padding-bottom: 50%; } 30 | .md-ratio-16-9 { height: 0; padding-bottom: 56.25%; } 31 | .md-ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 32 | .md-ratio-4-3 { height: 0; padding-bottom: 75%; } 33 | .md-ratio-1-1 { height: 0; padding-bottom: 100%; } 34 | 35 | .md-ratio-1-2 { height: 0; padding-bottom: 200%; } 36 | .md-ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 37 | .md-ratio-2-3 { height: 0; padding-bottom: 150%; } 38 | .md-ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 39 | } 40 | 41 | @media (min-width: 75em) { 42 | .lg-ratio-2-1 { height: 0; padding-bottom: 50%; } 43 | .lg-ratio-16-9 { height: 0; padding-bottom: 56.25%; } 44 | .lg-ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 45 | .lg-ratio-4-3 { height: 0; padding-bottom: 75%; } 46 | .lg-ratio-1-1 { height: 0; padding-bottom: 100%; } 47 | 48 | .lg-ratio-1-2 { height: 0; padding-bottom: 200%; } 49 | .lg-ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 50 | .lg-ratio-2-3 { height: 0; padding-bottom: 150%; } 51 | .lg-ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 52 | } 53 | 54 | @media (min-width: 91em) { 55 | .xl-ratio-2-1 { height: 0; padding-bottom: 50%; } 56 | .xl-ratio-16-9 { height: 0; padding-bottom: 56.25%; } 57 | .xl-ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 58 | .xl-ratio-4-3 { height: 0; padding-bottom: 75%; } 59 | .xl-ratio-1-1 { height: 0; padding-bottom: 100%; } 60 | 61 | .xl-ratio-1-2 { height: 0; padding-bottom: 200%; } 62 | .xl-ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 63 | .xl-ratio-2-3 { height: 0; padding-bottom: 150%; } 64 | .xl-ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 65 | } 66 | -------------------------------------------------------------------------------- /css/modules/ratios.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Ratios 4 | * 5 | */ 6 | 7 | .ratio-2-1 { height: 0; padding-bottom: 50%; } 8 | 9 | .ratio-16-9 { height: 0; padding-bottom: 56.25%; } 10 | 11 | .ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 12 | 13 | .ratio-4-3 { height: 0; padding-bottom: 75%; } 14 | 15 | .ratio-1-1 { height: 0; padding-bottom: 100%; } 16 | 17 | .ratio-1-2 { height: 0; padding-bottom: 200%; } 18 | 19 | .ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 20 | 21 | .ratio-2-3 { height: 0; padding-bottom: 150%; } 22 | 23 | .ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 24 | -------------------------------------------------------------------------------- /css/modules/shadows-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 30em) { 3 | .xs-shadow-0 { 4 | box-shadow: none; 5 | } 6 | 7 | .xs-shadow-1 { 8 | box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, .16); 9 | } 10 | 11 | .xs-shadow-2 { 12 | box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, .16); 13 | } 14 | 15 | .xs-shadow-3 { 16 | box-shadow: 0 0.125rem 1rem 0 rgba(0, 0, 0, .16); 17 | } 18 | 19 | .xs-shadow-4 { 20 | box-shadow: 0 0.1875rem 1.5rem 0 rgba(0, 0, 0, .16); 21 | } 22 | } 23 | 24 | @media (min-width: 48em) { 25 | .sm-shadow-0 { 26 | box-shadow: none; 27 | } 28 | 29 | .sm-shadow-1 { 30 | box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, .16); 31 | } 32 | 33 | .sm-shadow-2 { 34 | box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, .16); 35 | } 36 | 37 | .sm-shadow-3 { 38 | box-shadow: 0 0.125rem 1rem 0 rgba(0, 0, 0, .16); 39 | } 40 | 41 | .sm-shadow-4 { 42 | box-shadow: 0 0.1875rem 1.5rem 0 rgba(0, 0, 0, .16); 43 | } 44 | } 45 | 46 | @media (min-width: 62em) { 47 | .md-shadow-0 { 48 | box-shadow: none; 49 | } 50 | 51 | .md-shadow-1 { 52 | box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, .16); 53 | } 54 | 55 | .md-shadow-2 { 56 | box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, .16); 57 | } 58 | 59 | .md-shadow-3 { 60 | box-shadow: 0 0.125rem 1rem 0 rgba(0, 0, 0, .16); 61 | } 62 | 63 | .md-shadow-4 { 64 | box-shadow: 0 0.1875rem 1.5rem 0 rgba(0, 0, 0, .16); 65 | } 66 | } 67 | 68 | @media (min-width: 75em) { 69 | .lg-shadow-0 { 70 | box-shadow: none; 71 | } 72 | 73 | .lg-shadow-1 { 74 | box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, .16); 75 | } 76 | 77 | .lg-shadow-2 { 78 | box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, .16); 79 | } 80 | 81 | .lg-shadow-3 { 82 | box-shadow: 0 0.125rem 1rem 0 rgba(0, 0, 0, .16); 83 | } 84 | 85 | .lg-shadow-4 { 86 | box-shadow: 0 0.1875rem 1.5rem 0 rgba(0, 0, 0, .16); 87 | } 88 | } 89 | 90 | @media (min-width: 91em) { 91 | .xl-shadow-0 { 92 | box-shadow: none; 93 | } 94 | 95 | .xl-shadow-1 { 96 | box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, .16); 97 | } 98 | 99 | .xl-shadow-2 { 100 | box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, .16); 101 | } 102 | 103 | .xl-shadow-3 { 104 | box-shadow: 0 0.125rem 1rem 0 rgba(0, 0, 0, .16); 105 | } 106 | 107 | .xl-shadow-4 { 108 | box-shadow: 0 0.1875rem 1.5rem 0 rgba(0, 0, 0, .16); 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /css/modules/shadows.css: -------------------------------------------------------------------------------- 1 | 2 | .shadow-0 { 3 | box-shadow: none; 4 | } 5 | 6 | .shadow-1 { 7 | box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, .16); 8 | } 9 | 10 | .shadow-2 { 11 | box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, .16); 12 | } 13 | 14 | .shadow-3 { 15 | box-shadow: 0 0.125rem 1rem 0 rgba(0, 0, 0, .16); 16 | } 17 | 18 | .shadow-4 { 19 | box-shadow: 0 0.1875rem 1.5rem 0 rgba(0, 0, 0, .16); 20 | } 21 | -------------------------------------------------------------------------------- /css/modules/typography-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 30em) { 3 | .xs-text-0 { font-size: 0.8125rem; } 4 | .xs-text-1 { font-size: 1rem; } 5 | .xs-text-2 { font-size: 1.25rem; } 6 | .xs-text-3 { font-size: 1.5rem; } 7 | .xs-text-4 { font-size: 2rem; } 8 | .xs-text-5 { font-size: 2.75rem; } 9 | .xs-text-6 { font-size: 3.5rem; } 10 | .xs-text-7 { font-size: 4rem; } 11 | .xs-text-8 { font-size: 4.5rem; } 12 | .xs-text-9 { font-size: 6rem; } 13 | 14 | .xs-lh-1 { line-height: 1; } 15 | .xs-lh-base { line-height: 1.5; } 16 | .xs-lh-small { line-height: 1.25; } 17 | 18 | .xs-strong { font-weight: 700; } 19 | .xs-regular { font-weight: 400; } 20 | .xs-light { font-weight: 300; } 21 | .xs-italic { font-style: italic; } 22 | 23 | .xs-uppercase { text-transform: uppercase; } 24 | .xs-lowercase { text-transform: lowercase; } 25 | .xs-capitalized { text-transform: capitalize; } 26 | 27 | .xs-underline { text-decoration: underline; } 28 | .xs-line-through { text-decoration: line-through; } 29 | 30 | .xs-text-left, 31 | .xs-align-left { text-align: left; } 32 | .xs-text-right, 33 | .xs-align-right { text-align: right; } 34 | .xs-text-center, 35 | .xs-align-center { text-align: center; } 36 | } 37 | 38 | @media (min-width: 48em) { 39 | .sm-text-0 { font-size: 0.8125rem; } 40 | .sm-text-1 { font-size: 1rem; } 41 | .sm-text-2 { font-size: 1.25rem; } 42 | .sm-text-3 { font-size: 1.5rem; } 43 | .sm-text-4 { font-size: 2rem; } 44 | .sm-text-5 { font-size: 2.75rem; } 45 | .sm-text-6 { font-size: 3.5rem; } 46 | .sm-text-7 { font-size: 4rem; } 47 | .sm-text-8 { font-size: 4.5rem; } 48 | .sm-text-9 { font-size: 6rem; } 49 | 50 | .sm-lh-1 { line-height: 1; } 51 | .sm-lh-base { line-height: 1.5; } 52 | .sm-lh-small { line-height: 1.25; } 53 | 54 | .sm-strong { font-weight: 700; } 55 | .sm-regular { font-weight: 400; } 56 | .sm-light { font-weight: 300; } 57 | .sm-italic { font-style: italic; } 58 | 59 | .sm-uppercase { text-transform: uppercase; } 60 | .sm-lowercase { text-transform: lowercase; } 61 | .sm-capitalized { text-transform: capitalize; } 62 | 63 | .sm-underline { text-decoration: underline; } 64 | .sm-line-through { text-decoration: line-through; } 65 | 66 | .sm-text-left, 67 | .sm-align-left { text-align: left; } 68 | .sm-text-right, 69 | .sm-align-right { text-align: right; } 70 | .sm-text-center, 71 | .sm-align-center { text-align: center; } 72 | 73 | } 74 | 75 | @media (min-width: 62em) { 76 | .md-text-0 { font-size: 0.8125rem; } 77 | .md-text-1 { font-size: 1rem; } 78 | .md-text-2 { font-size: 1.25rem; } 79 | .md-text-3 { font-size: 1.5rem; } 80 | .md-text-4 { font-size: 2rem; } 81 | .md-text-5 { font-size: 2.75rem; } 82 | .md-text-6 { font-size: 3.5rem; } 83 | .md-text-7 { font-size: 4rem; } 84 | .md-text-8 { font-size: 4.5rem; } 85 | .md-text-9 { font-size: 6rem; } 86 | 87 | .md-lh-1 { line-height: 1; } 88 | .md-lh-base { line-height: 1.5; } 89 | .md-lh-small { line-height: 1.25; } 90 | 91 | .md-strong { font-weight: 700; } 92 | .md-regular { font-weight: 400; } 93 | .md-light { font-weight: 300; } 94 | .md-italic { font-style: italic; } 95 | 96 | .md-uppercase { text-transform: uppercase; } 97 | .md-lowercase { text-transform: lowercase; } 98 | .md-capitalized { text-transform: capitalize; } 99 | 100 | .md-underline { text-decoration: underline; } 101 | .md-line-through { text-decoration: line-through; } 102 | 103 | .md-text-left, 104 | .md-align-left { text-align: left; } 105 | .md-text-right, 106 | .md-align-right { text-align: right; } 107 | .md-text-center, 108 | .md-align-center { text-align: center; } 109 | } 110 | 111 | @media (min-width: 75em) { 112 | .lg-text-0 { font-size: 0.8125rem; } 113 | .lg-text-1 { font-size: 1rem; } 114 | .lg-text-2 { font-size: 1.25rem; } 115 | .lg-text-3 { font-size: 1.5rem; } 116 | .lg-text-4 { font-size: 2rem; } 117 | .lg-text-5 { font-size: 2.75rem; } 118 | .lg-text-6 { font-size: 3.5rem; } 119 | .lg-text-7 { font-size: 4rem; } 120 | .lg-text-8 { font-size: 4.5rem; } 121 | .lg-text-9 { font-size: 6rem; } 122 | 123 | .lg-lh-1 { line-height: 1; } 124 | .lg-lh-base { line-height: 1.5; } 125 | .lg-lh-small { line-height: 1.25; } 126 | 127 | .lg-strong { font-weight: 700; } 128 | .lg-regular { font-weight: 400; } 129 | .lg-light { font-weight: 300; } 130 | .lg-italic { font-style: italic; } 131 | 132 | .lg-uppercase { text-transform: uppercase; } 133 | .lg-lowercase { text-transform: lowercase; } 134 | .lg-capitalized { text-transform: capitalize; } 135 | 136 | .lg-underline { text-decoration: underline; } 137 | .lg-line-through { text-decoration: line-through; } 138 | 139 | .lg-text-left, 140 | .lg-align-left { text-align: left; } 141 | .lg-text-right, 142 | .lg-align-right { text-align: right; } 143 | .lg-text-center, 144 | .lg-align-center { text-align: center; } 145 | } 146 | 147 | @media (min-width: 91em) { 148 | .xl-text-0 { font-size: 0.8125rem; } 149 | .xl-text-1 { font-size: 1rem; } 150 | .xl-text-2 { font-size: 1.25rem; } 151 | .xl-text-3 { font-size: 1.5rem; } 152 | .xl-text-4 { font-size: 2rem; } 153 | .xl-text-5 { font-size: 2.75rem; } 154 | .xl-text-6 { font-size: 3.5rem; } 155 | .xl-text-7 { font-size: 4rem; } 156 | .xl-text-8 { font-size: 4.5rem; } 157 | .xl-text-9 { font-size: 6rem; } 158 | 159 | .xl-lh-1 { line-height: 1; } 160 | .xl-lh-base { line-height: 1.5; } 161 | .xl-lh-small { line-height: 1.25; } 162 | 163 | .xl-strong { font-weight: 700; } 164 | .xl-regular { font-weight: 400; } 165 | .xl-light { font-weight: 300; } 166 | .xl-italic { font-style: italic; } 167 | 168 | .xl-uppercase { text-transform: uppercase; } 169 | .xl-lowercase { text-transform: lowercase; } 170 | .xl-capitalized { text-transform: capitalize; } 171 | 172 | .xl-underline { text-decoration: underline; } 173 | .xl-line-through { text-decoration: line-through; } 174 | 175 | .xl-text-left, 176 | .xl-align-left { text-align: left; } 177 | .xl-text-right, 178 | .xl-align-right { text-align: right; } 179 | .xl-text-center, 180 | .xl-align-center { text-align: center; } 181 | } 182 | -------------------------------------------------------------------------------- /css/modules/typography.css: -------------------------------------------------------------------------------- 1 | 2 | h1,h2,h3,h4,h5,h6,p { 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | /* 8 | * Font sizes 9 | * 10 | */ 11 | 12 | small, 13 | .text-0 { font-size: 0.8125rem; } 14 | 15 | .text-1 { font-size: 1rem; } 16 | 17 | .text-2 { font-size: 1.25rem; } 18 | 19 | .text-3 { font-size: 1.5rem; } 20 | 21 | .text-4 { font-size: 2rem; } 22 | 23 | .text-5 { font-size: 2.75rem; } 24 | 25 | .text-6 { font-size: 3.5rem; } 26 | 27 | .text-7 { font-size: 4rem; } 28 | 29 | .text-8 { font-size: 4.5rem; } 30 | 31 | .text-9 { font-size: 6rem; } 32 | 33 | /* 34 | * Line height 35 | * 36 | * .lh-1 vs. lh-self 37 | */ 38 | 39 | .lh-1 { line-height: 1; } 40 | 41 | .lh-base { line-height: 1.5; } 42 | 43 | .lh-small { line-height: 1.25; } 44 | 45 | /* 46 | * Text align 47 | * 48 | */ 49 | 50 | .text-left, 51 | .align-left { text-align: left; } 52 | 53 | .text-right, 54 | .align-right { text-align: right; } 55 | 56 | .text-center, 57 | .align-center { text-align: center; } 58 | 59 | /* 60 | * Text weight 61 | * 62 | */ 63 | 64 | b, 65 | strong, 66 | .strong { font-weight: 700; } 67 | 68 | .regular { font-weight: 400; } 69 | 70 | .light { font-weight: 300; } 71 | 72 | .italic { font-style: italic; } 73 | 74 | /* 75 | * Text transform 76 | * 77 | */ 78 | 79 | .uppercase { text-transform: uppercase; } 80 | 81 | .lowercase { text-transform: lowercase; } 82 | 83 | .capitalized { text-transform: capitalize; } 84 | 85 | /* 86 | * Text decoration 87 | * 88 | */ 89 | 90 | .underline { text-decoration: underline; } 91 | 92 | .line-through { text-decoration: line-through; } 93 | -------------------------------------------------------------------------------- /css/modules/utils-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 30em) { 3 | .xs-no-wrap { white-space: nowrap; } 4 | 5 | .xs-align-baseline { vertical-align: baseline; } 6 | .xs-align-top { vertical-align: top; } 7 | .xs-align-middle { vertical-align: middle; } 8 | .xs-align-bottom { vertical-align: bottom; } 9 | 10 | .xs-overflow-hidden { overflow: hidden; } 11 | .xs-overflow-scroll { overflow: scroll; } 12 | .xs-overflow-auto { overflow: auto; } 13 | 14 | .xs-left { float: left; } 15 | .xs-right { float: right; } 16 | 17 | .xs-translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); } 18 | .xs-translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 19 | 20 | .xs-max-width-none { max-width: none; } 21 | .xs-max-height-none { max-height: none; } 22 | .xs-max-width-100 { max-width: 100%; } 23 | .xs-max-height-100 { max-height: 100%; } 24 | } 25 | 26 | @media (min-width: 48em) { 27 | .sm-no-wrap { white-space: nowrap; } 28 | 29 | .sm-align-baseline { vertical-align: baseline; } 30 | .sm-align-top { vertical-align: top; } 31 | .sm-align-middle { vertical-align: middle; } 32 | .sm-align-bottom { vertical-align: bottom; } 33 | 34 | .sm-overflow-hidden { overflow: hidden; } 35 | .sm-overflow-scroll { overflow: scroll; } 36 | .sm-overflow-auto { overflow: auto; } 37 | 38 | .sm-left { float: left; } 39 | .sm-right { float: right; } 40 | 41 | .sm-translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); } 42 | .sm-translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 43 | 44 | .sm-max-width-none { max-width: none; } 45 | .sm-max-height-none { max-height: none; } 46 | .sm-max-width-100 { max-width: 100%; } 47 | .sm-max-height-100 { max-height: 100%; } 48 | } 49 | 50 | @media (min-width: 62em) { 51 | .md-no-wrap { white-space: nowrap; } 52 | 53 | .md-align-baseline { vertical-align: baseline; } 54 | .md-align-top { vertical-align: top; } 55 | .md-align-middle { vertical-align: middle; } 56 | .md-align-bottom { vertical-align: bottom; } 57 | 58 | .md-overflow-hidden { overflow: hidden; } 59 | .md-overflow-scroll { overflow: scroll; } 60 | .md-overflow-auto { overflow: auto; } 61 | 62 | .md-left { float: left; } 63 | .md-right { float: right; } 64 | 65 | .md-translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); } 66 | .md-translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 67 | 68 | .md-max-width-none { max-width: none; } 69 | .md-max-height-none { max-height: none; } 70 | .md-max-width-100 { max-width: 100%; } 71 | .md-max-height-100 { max-height: 100%; } 72 | } 73 | 74 | @media (min-width: 75em) { 75 | .lg-no-wrap { white-space: nowrap; } 76 | 77 | .lg-align-baseline { vertical-align: baseline; } 78 | .lg-align-top { vertical-align: top; } 79 | .lg-align-middle { vertical-align: middle; } 80 | .lg-align-bottom { vertical-align: bottom; } 81 | 82 | .lg-overflow-hidden { overflow: hidden; } 83 | .lg-overflow-scroll { overflow: scroll; } 84 | .lg-overflow-auto { overflow: auto; } 85 | 86 | .lg-left { float: left; } 87 | .lg-right { float: right; } 88 | 89 | .lg-translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); } 90 | .lg-translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 91 | 92 | .lg-max-width-none { max-width: none; } 93 | .lg-max-height-none { max-height: none; } 94 | .lg-max-width-100 { max-width: 100%; } 95 | .lg-max-height-100 { max-height: 100%; } 96 | } 97 | 98 | @media (min-width: 91em) { 99 | .xl-no-wrap { white-space: nowrap; } 100 | 101 | .xl-align-baseline { vertical-align: baseline; } 102 | .xl-align-top { vertical-align: top; } 103 | .xl-align-middle { vertical-align: middle; } 104 | .xl-align-bottom { vertical-align: bottom; } 105 | 106 | .xl-overflow-hidden { overflow: hidden; } 107 | .xl-overflow-scroll { overflow: scroll; } 108 | .xl-overflow-auto { overflow: auto; } 109 | 110 | .xl-left { float: left; } 111 | .xl-right { float: right; } 112 | 113 | .xl-translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); } 114 | .xl-translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 115 | 116 | .xl-max-width-none { max-width: none; } 117 | .xl-max-height-none { max-height: none; } 118 | .xl-max-width-100 { max-width: 100%; } 119 | .xl-max-height-100 { max-height: 100%; } 120 | } 121 | -------------------------------------------------------------------------------- /css/modules/utils.css: -------------------------------------------------------------------------------- 1 | 2 | /*Wrapping*/ 3 | .no-wrap { white-space: nowrap; } 4 | /*Vertical align*/ 5 | .align-baseline { vertical-align: baseline; } 6 | .align-top { vertical-align: top; } 7 | .align-middle { vertical-align: middle; } 8 | .align-bottom { vertical-align: bottom; } 9 | /*Oveflow*/ 10 | .overflow-hidden { overflow: hidden; } 11 | .overflow-scroll { overflow: scroll; } 12 | .overflow-auto { overflow: auto; } 13 | /*Float*/ 14 | .left { float: left; } 15 | .right { float: right; } 16 | /*Transforms*/ 17 | .translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); } 18 | .translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 19 | .clearfix:before, 20 | .clearfix:after { 21 | content: " "; 22 | display: table; 23 | } 24 | .clearfix:after { clear: both; } 25 | /*max-width/max-height*/ 26 | .max-width-none { max-width: none; } 27 | .max-height-none { max-height: none; } 28 | .max-width-100 { max-width: 100%; } 29 | .max-height-100 { max-height: 100%; } 30 | /*z index*/ 31 | .z-index-0 { z-index: 0; } 32 | .z-index-1 { z-index: 1; } 33 | .z-index-2 { z-index: 2; } 34 | .z-index-3 { z-index: 3; } 35 | .z-index-4 { z-index: 4; } 36 | .z-index-5 { z-index: 5; } 37 | .z-index-10 { z-index: 10; } 38 | .z-index-20 { z-index: 20; } 39 | .z-index-100 { z-index: 100; } 40 | .z-index-max { z-index: 999999; } 41 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 2 | const gulp = require("gulp") 3 | const rename = require("gulp-rename") 4 | const cleanCSS = require("gulp-clean-css") 5 | const postcss = require("gulp-postcss") 6 | const partialImport = require("postcss-partial-import") 7 | const cssnext = require("postcss-cssnext") 8 | const autoprefixer = require("autoprefixer") 9 | 10 | const styleVariables = require("./src/styleVariables") 11 | const mediaQueries = require("./src/mediaQueries") 12 | 13 | const paths = { 14 | srcMain: "./src/main.css", 15 | buildMain: "./css", 16 | srcModules: "./src/**/*.css", 17 | buildModules: "./css/modules", 18 | watch: "./src/**/*.css", 19 | } 20 | 21 | const processors = [ 22 | partialImport(), 23 | cssnext({ 24 | browsers: ["> 1%"], 25 | features: { 26 | customProperties: { 27 | variables: styleVariables, 28 | }, 29 | customMedia: { 30 | extensions: mediaQueries, 31 | }, 32 | }, 33 | }), 34 | ] 35 | 36 | gulp.task("css", () => { 37 | return gulp 38 | .src(paths.srcMain) 39 | .pipe(postcss(processors)) 40 | .pipe(rename("fiber.css")) 41 | .pipe(gulp.dest(paths.buildMain)) 42 | }) 43 | 44 | gulp.task("css-build", () => { 45 | gulp 46 | .src(paths.srcModules) 47 | .pipe(postcss(processors)) 48 | .pipe(gulp.dest(paths.buildModules)) 49 | }) 50 | 51 | gulp.task("css-production", () => { 52 | return gulp 53 | .src(paths.srcMain) 54 | .pipe(postcss(processors)) 55 | .pipe(cleanCSS({ compatibility: "ie9" })) 56 | .pipe(rename("fiber.min.css")) 57 | .pipe(gulp.dest(paths.buildMain)) 58 | }) 59 | 60 | gulp.task("default", () => { 61 | gulp.watch(paths.watch, ["css"]) 62 | }) 63 | 64 | // 65 | // var gulp = require('gulp') 66 | // var rename = require('gulp-rename') 67 | // var cleanCSS = require('gulp-clean-css') 68 | // var postcss = require('gulp-postcss') 69 | // var partialImport = require('postcss-partial-import') 70 | // var cssnext = require('postcss-cssnext') 71 | // var autoprefixer = require('autoprefixer') 72 | // 73 | // const styleVariables = require('./src/styleVariables') 74 | // const mediaQueries = require('./src/mediaQueries') 75 | // 76 | // gulp.task('css', function() { 77 | // var processors = [ 78 | // partialImport(), 79 | // cssnext({ 80 | // browsers: ['> 1%'], 81 | // features: { 82 | // customProperties: { 83 | // variables: styleVariables, 84 | // }, 85 | // customMedia: { 86 | // extensions: mediaQueries, 87 | // }, 88 | // }, 89 | // }) 90 | // ] 91 | // 92 | // return gulp.src('./src/main.css') 93 | // .pipe(postcss(processors)) 94 | // .pipe(rename('fiber.css')) 95 | // .pipe(gulp.dest('./css')) 96 | // }) 97 | // 98 | // gulp.task('css-build', function() { 99 | // var processors = [ 100 | // partialImport(), 101 | // cssnext({ 102 | // browsers: ['> 1%'], 103 | // features: { 104 | // customProperties: { 105 | // variables: styleVariables, 106 | // }, 107 | // customMedia: { 108 | // extensions: mediaQueries, 109 | // }, 110 | // }, 111 | // }), 112 | // ] 113 | // 114 | // gulp.src('./src/**/*.css') 115 | // .pipe(postcss(processors)) 116 | // .pipe(gulp.dest('./css/modules')) 117 | // }) 118 | // 119 | // gulp.task('css-production', function() { 120 | // var processors = [ 121 | // partialImport(), 122 | // cssnext({ 123 | // browsers: ['> 1%'], 124 | // features: { 125 | // customProperties: { 126 | // variables: styleVariables, 127 | // }, 128 | // customMedia: { 129 | // extensions: mediaQueries, 130 | // }, 131 | // }, 132 | // }) 133 | // ] 134 | // 135 | // return gulp.src('./src/main.css') 136 | // .pipe(postcss(processors)) 137 | // .pipe(cleanCSS({compatibility: 'ie9'})) 138 | // .pipe(rename('fiber.min.css')) 139 | // .pipe(gulp.dest('./css')) 140 | // }) 141 | // 142 | // gulp.task('default', function() { 143 | // gulp.watch('./src/**/*.css', ['css']) 144 | // }) 145 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fiber-css", 3 | "version": "0.7.0", 4 | "description": "An atomic css framework focused on responsive design", 5 | "main": "index.js", 6 | "scripts": { 7 | "css": "gulp css", 8 | "css:watch": "gulp", 9 | "css:build": "gulp css-build", 10 | "css:production": "gulp css-production", 11 | "css:prepare": "gulp css && gulp css-build && gulp css-production", 12 | "test": "echo \"Error: no test specified\" && exit 1" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/zcreativelabs/fiber-css.git" 17 | }, 18 | "keywords": [ 19 | "css", 20 | "atomic", 21 | "responsive", 22 | "typography" 23 | ], 24 | "author": "Richard Zimerman (https://github.com/zimrick)", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/zcreativelabs/fiber-css/issues" 28 | }, 29 | "homepage": "https://github.com/zcreativelabs/fiber-css#readme", 30 | "devDependencies": { 31 | "autoprefixer": "6.7.7", 32 | "gulp": "3.9.1", 33 | "gulp-clean-css": "3.0.4", 34 | "gulp-postcss": "6.4.0", 35 | "gulp-rename": "1.2.2", 36 | "postcss-cssnext": "2.10.0", 37 | "postcss-partial-import": "3.1.1" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/base.css: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | font-family: var(--sans-serif); 4 | font-size: 100%; 5 | 6 | box-sizing: border-box; 7 | -webkit-tap-highlight-color: rgba(0,0,0,0); 8 | } 9 | 10 | *, 11 | *::before, 12 | *::after { 13 | box-sizing: inherit; 14 | } 15 | 16 | html, 17 | body { 18 | width: 100%; 19 | height: 100%; 20 | } 21 | 22 | body { 23 | font-size: var(--base-font-size); 24 | line-height: var(--base-line-height); 25 | color: var(--text-color-base); 26 | } 27 | 28 | ::selection { 29 | background: var(--text-select-bg); 30 | color: var(--text-select-color); 31 | } 32 | ::-moz-selection { 33 | background: var(--text-select-bg); 34 | color: var(--text-select-color); 35 | } 36 | 37 | hr { 38 | margin: 0; 39 | padding: 0; 40 | border-top: 0; 41 | border-bottom: calc(2 * var(--one)) solid var(--color-grey-200); 42 | } 43 | 44 | svg { 45 | display: inline-block; 46 | height: auto; 47 | vertical-align: middle; 48 | } 49 | 50 | ::-webkit-input-placeholder { 51 | color: inherit; 52 | opacity: 0.54; 53 | } 54 | 55 | [tabindex="-1"]:focus { 56 | outline: none !important; 57 | } 58 | -------------------------------------------------------------------------------- /src/border-radius.css: -------------------------------------------------------------------------------- 1 | 2 | .border-radius-0 { border-radius: 0 } 3 | .border-radius-1 { border-radius: calc(1 * var(--one)) } 4 | .border-radius-2 { border-radius: calc(2 * var(--one)) } 5 | .border-radius-3 { border-radius: calc(3 * var(--one)) } 6 | .border-radius-4 { border-radius: calc(4 * var(--one)) } 7 | .border-radius-5 { border-radius: calc(5 * var(--one)) } 8 | .border-radius-6 { border-radius: calc(6 * var(--one)) } 9 | .border-radius-100 { border-radius: 100% } 10 | .border-radius-pill { border-radius: 9999px } 11 | -------------------------------------------------------------------------------- /src/borders.css: -------------------------------------------------------------------------------- 1 | 2 | .border-none { border: 0; } 3 | .border-all { border: 0.125rem solid currentcolor } 4 | .border-top { border-top: 0.125rem solid currentcolor } 5 | .border-bottom { border-bottom: 0.125rem solid currentcolor } 6 | .border-left { border-left: 0.125rem solid currentcolor } 7 | .border-right { border-right: 0.125rem solid currentcolor } 8 | 9 | .border-x { 10 | border-left: 0.125rem solid currentcolor; 11 | border-right: 0.125rem solid currentcolor; 12 | } 13 | .border-y { 14 | border-top: 0.125rem solid currentcolor; 15 | border-bottom: 0.125rem solid currentcolor; 16 | } 17 | 18 | .border-transparent { border-color: transparent } 19 | .border-default { border-color: var(--text-color-base) } 20 | .border-current { border-color: currentcolor } 21 | .border-inherit { border-color: inherit } 22 | 23 | .border-primary { border-color: var(--color-primary) } 24 | .border-secondary { border-color: var(--color-secondary) } 25 | 26 | .border-red { border-color: var(--color-red-500) } 27 | .border-pink { border-color: var(--color-pink-500) } 28 | .border-purple { border-color: var(--color-purple-500) } 29 | .border-indigo { border-color: var(--color-indigo-500) } 30 | .border-blue { border-color: var(--color-blue-500) } 31 | .border-light-blue { border-color: var(--color-light-blue-500) } 32 | .border-cyan { border-color: var(--color-cyan-500) } 33 | .border-teal { border-color: var(--color-teal-500) } 34 | .border-green { border-color: var(--color-green-500) } 35 | .border-light-green { border-color: var(--color-light-green-500) } 36 | .border-lime { border-color: var(--color-lime-500) } 37 | .border-yellow { border-color: var(--color-yellow-500) } 38 | .border-amber { border-color: var(--color-amber-500) } 39 | .border-orange { border-color: var(--color-orange-500) } 40 | .border-deep-orange { border-color: var(--color-deep-orange-500) } 41 | .border-brown { border-color: var(--color-brown-500) } 42 | 43 | .border-white { border-color: var(--color-white) } 44 | 45 | .border-grey-100 { border-color: var(--color-grey-100) } 46 | .border-grey-200 { border-color: var(--color-grey-200) } 47 | .border-grey-300 { border-color: var(--color-grey-300) } 48 | .border-grey-400 { border-color: var(--color-grey-400) } 49 | .border-grey-500 { border-color: var(--color-grey-500) } 50 | .border-grey-600 { border-color: var(--color-grey-600) } 51 | .border-grey-700 { border-color: var(--color-grey-700) } 52 | .border-grey-800 { border-color: var(--color-grey-800) } 53 | 54 | .border-1 { border-width: calc(1 * var(--one)) } 55 | .border-2 { border-width: calc(2 * var(--one)) } 56 | .border-3 { border-width: calc(3 * var(--one)) } 57 | .border-4 { border-width: calc(4 * var(--one)) } 58 | .border-5 { border-width: calc(5 * var(--one)) } 59 | .border-6 { border-width: calc(6 * var(--one)) } 60 | -------------------------------------------------------------------------------- /src/buttons.css: -------------------------------------------------------------------------------- 1 | 2 | .btn { 3 | display: inline-block; 4 | position: relative; 5 | 6 | font-family: inherit; 7 | font-size: inherit; 8 | font-weight: 400; 9 | line-height: 1.25; 10 | 11 | background: transparent; 12 | color: inherit; 13 | border: 0.125rem solid transparent; 14 | outline: none; 15 | 16 | padding: 0.375rem; 17 | cursor: pointer; 18 | 19 | vertical-align: middle; 20 | } 21 | 22 | .btn:hover { 23 | box-shadow: inset 0 0 0 3em rgba(0,0,0, var(--shadow-light)); 24 | border-color: rgba(0,0,0,0.08); 25 | } 26 | .btn:focus { 27 | box-shadow: inset 0 0 0 3em rgba(0,0,0, var(--shadow-medium)); 28 | border-color: rgba(0,0,0,0.12); 29 | } 30 | .btn:active { 31 | box-shadow: inset 0 0 0 3em rgba(0,0,0, var(--shadow-dark)); 32 | border-color: rgba(0,0,0,0.16); 33 | } 34 | 35 | ::-moz-focus-inner { 36 | border: 0; 37 | padding: 0; 38 | } 39 | 40 | /* 41 | * Outlined buttons 42 | * 43 | */ 44 | 45 | .btn--outlined { 46 | border-color: currentcolor; 47 | } 48 | 49 | .btn--outlined:hover, 50 | .btn--outlined:focus, 51 | .btn--outlined:active { 52 | border-color: currentcolor; 53 | } 54 | 55 | /* 56 | * Raised buttons 57 | * 58 | */ 59 | 60 | .btn--raised { 61 | box-shadow: 0 2px 2px 0 rgba(0,0,0, var(--shadow-medium)), 62 | 0 3px 1px -2px rgba(0,0,0, var(--shadow-dark) ), 63 | 0 1px 5px 0 rgba(0,0,0, var(--shadow-light) ); 64 | } 65 | .btn--raised:hover { 66 | box-shadow: 0 4px 5px 0 rgba(0,0,0, var(--shadow-medium)), 67 | 0 1px 10px 0 rgba(0,0,0, var(--shadow-light) ), 68 | 0 2px 4px -1px rgba(0,0,0, var(--shadow-dark) ), 69 | inset 0 0 0 3em rgba(0,0,0, var(--shadow-light) ); 70 | } 71 | .btn--raised:focus { 72 | box-shadow: 0 4px 5px 0 rgba(0,0,0, var(--shadow-medium)), 73 | 0 1px 10px 0 rgba(0,0,0, var(--shadow-light) ), 74 | 0 2px 4px -1px rgba(0,0,0, var(--shadow-dark) ), 75 | inset 0 0 0 3em rgba(0,0,0, var(--shadow-medium)); 76 | } 77 | .btn--raised:active { 78 | box-shadow: 0 8px 10px 1px rgba(0,0,0, var(--shadow-medium)), 79 | 0 3px 14px 2px rgba(0,0,0, var(--shadow-light) ), 80 | 0 5px 5px -3px rgba(0,0,0, var(--shadow-dark) ), 81 | inset 0 0 0 3em rgba(0,0,0, var(--shadow-dark) ); 82 | } 83 | -------------------------------------------------------------------------------- /src/colors.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * background colors 4 | * 5 | */ 6 | 7 | .bg-primary { background: var(--color-primary); color: var(--color-primary-contrast); } 8 | .bg-secondary { background: var(--color-secondary); color: var(--color-secondary-contrast); } 9 | 10 | .bg-white { background: var(--color-white) } 11 | .bg-transparent { background: transparent } 12 | 13 | .bg-red { background: var(--color-red-500) } 14 | .bg-pink { background: var(--color-pink-500) } 15 | .bg-purple { background: var(--color-purple-500) } 16 | .bg-indigo { background: var(--color-indigo-500) } 17 | .bg-blue { background: var(--color-blue-500) } 18 | .bg-light-blue { background: var(--color-light-blue-500) } 19 | .bg-cyan { background: var(--color-cyan-500) } 20 | .bg-teal { background: var(--color-teal-500) } 21 | .bg-green { background: var(--color-green-500) } 22 | .bg-light-green { background: var(--color-light-green-500) } 23 | .bg-lime { background: var(--color-lime-500) } 24 | .bg-yellow { background: var(--color-yellow-500) } 25 | .bg-amber { background: var(--color-amber-500) } 26 | .bg-orange { background: var(--color-orange-500) } 27 | .bg-deep-orange { background: var(--color-deep-orange-500) } 28 | .bg-brown { background: var(--color-brown-500) } 29 | 30 | .bg-grey-100 { background: var(--color-grey-100) } 31 | .bg-grey-200 { background: var(--color-grey-200) } 32 | .bg-grey-300 { background: var(--color-grey-300) } 33 | .bg-grey-400 { background: var(--color-grey-400) } 34 | .bg-grey-500 { background: var(--color-grey-500) } 35 | .bg-grey-600 { background: var(--color-grey-600) } 36 | .bg-grey-700 { background: var(--color-grey-700) } 37 | .bg-grey-800 { background: var(--color-grey-800) } 38 | .bg-grey-900 { background: var(--color-grey-900) } 39 | 40 | /* 41 | * text colors 42 | * 43 | */ 44 | 45 | .color-default { color: var(--text-color-base) } 46 | .color-inherit { color: inherit } 47 | 48 | .color-primary { color: var(--color-primary) } 49 | .color-secondary { color: var(--color-secondary) } 50 | 51 | .color-red { color: var(--color-red-500) } 52 | .color-pink { color: var(--color-pink-500) } 53 | .color-purple { color: var(--color-purple-500) } 54 | .color-indigo { color: var(--color-indigo-500) } 55 | .color-blue { color: var(--color-blue-500) } 56 | .color-light-blue { color: var(--color-light-blue-500) } 57 | .color-cyan { color: var(--color-cyan-500) } 58 | .color-teal { color: var(--color-teal-500) } 59 | .color-green { color: var(--color-green-500) } 60 | .color-light-green { color: var(--color-light-green-500) } 61 | .color-lime { color: var(--color-lime-500) } 62 | .color-yellow { color: var(--color-yellow-500) } 63 | .color-amber { color: var(--color-amber-500) } 64 | .color-orange { color: var(--color-orange-500) } 65 | .color-deep-orange { color: var(--color-deep-orange-500) } 66 | .color-brown { color: var(--color-brown-500) } 67 | 68 | .color-white { color: var(--color-white) } 69 | 70 | .color-grey-100 { color: var(--color-grey-100) } 71 | .color-grey-200 { color: var(--color-grey-200) } 72 | .color-grey-300 { color: var(--color-grey-300) } 73 | .color-grey-400 { color: var(--color-grey-400) } 74 | .color-grey-500 { color: var(--color-grey-500) } 75 | .color-grey-600 { color: var(--color-grey-600) } 76 | .color-grey-700 { color: var(--color-grey-700) } 77 | .color-grey-800 { color: var(--color-grey-800) } 78 | .color-grey-900 { color: var(--color-grey-900) } 79 | -------------------------------------------------------------------------------- /src/display-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (--xs-viewport) { 3 | .xs-visible { display: inherit; } 4 | .xs-hidden { display: none; } 5 | 6 | .xs-inline { display: inline; } 7 | .xs-block { display: block; } 8 | .xs-inline-block { display: inline-block; } 9 | 10 | .xs-table { display: table; } 11 | .xs-table-cell { display: table-cell; } 12 | } 13 | 14 | @media (--sm-viewport) { 15 | .sm-visible { display: inherit; } 16 | .sm-hidden { display: none; } 17 | 18 | .sm-inline { display: inline; } 19 | .sm-block { display: block; } 20 | .sm-inline-block { display: inline-block; } 21 | 22 | .sm-table { display: table; } 23 | .sm-table-cell { display: table-cell; } 24 | } 25 | 26 | @media (--md-viewport) { 27 | .md-visible { display: inherit; } 28 | .md-hidden { display: none; } 29 | 30 | .md-inline { display: inline; } 31 | .md-block { display: block; } 32 | .md-inline-block { display: inline-block; } 33 | 34 | .md-table { display: table; } 35 | .md-table-cell { display: table-cell; } 36 | } 37 | 38 | @media (--lg-viewport) { 39 | .lg-visible { display: inherit; } 40 | .lg-hidden { display: none; } 41 | 42 | .lg-inline { display: inline; } 43 | .lg-block { display: block; } 44 | .lg-inline-block { display: inline-block; } 45 | 46 | .lg-table { display: table; } 47 | .lg-table-cell { display: table-cell; } 48 | } 49 | 50 | @media (--xl-viewport) { 51 | .xl-visible { display: inherit; } 52 | .xl-hidden { display: none; } 53 | 54 | .xl-inline { display: inline; } 55 | .xl-block { display: block; } 56 | .xl-inline-block { display: inline-block; } 57 | 58 | .xl-table { display: table; } 59 | .xl-table-cell { display: table-cell; } 60 | } 61 | -------------------------------------------------------------------------------- /src/display.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Visibility 4 | * 5 | */ 6 | 7 | .xs-visible, 8 | .sm-visible, 9 | .md-visible, 10 | .lg-visible, 11 | .xl-visible { 12 | display: none; 13 | } 14 | 15 | .hidden { display: none; } 16 | 17 | /* 18 | * Display 19 | * 20 | */ 21 | 22 | .inline { display: inline; } 23 | .block { display: block; } 24 | .inline-block { display: inline-block; } 25 | 26 | .table { display: table; } 27 | .table-cell { display: table-cell; } 28 | -------------------------------------------------------------------------------- /src/grid-flex-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (--xs-viewport) { 3 | .xs-flex { 4 | display: flex; 5 | } 6 | 7 | .xs-flex-column { flex-direction: column } 8 | .xs-flex-row { flex-direction: row } 9 | .xs-flex-wrap { flex-wrap: wrap } 10 | 11 | .xs-flex-column-reverse { flex-direction: column-reverse } 12 | .xs-flex-row-reverse { flex-direction: row-reverse } 13 | .xs-flex-wrap-reverse { flex-wrap: wrap-reverse } 14 | 15 | .xs-items-start { align-items: flex-start } 16 | .xs-items-end { align-items: flex-end } 17 | .xs-items-center { align-items: center } 18 | .xs-items-baseline { align-items: baseline } 19 | .xs-items-stretch { align-items: stretch } 20 | 21 | .xs-self-start { align-self: flex-start } 22 | .xs-self-end { align-self: flex-end } 23 | .xs-self-center { align-self: center } 24 | .xs-self-baseline { align-self: baseline } 25 | .xs-self-stretch { align-self: stretch } 26 | 27 | .xs-justify-start { justify-content: flex-start } 28 | .xs-justify-end { justify-content: flex-end } 29 | .xs-justify-center { justify-content: center } 30 | .xs-justify-between { justify-content: space-between } 31 | .xs-justify-around { justify-content: space-around } 32 | 33 | .xs-content-start { align-content: flex-start } 34 | .xs-content-end { align-content: flex-end } 35 | .xs-content-center { align-content: center } 36 | .xs-content-between { align-content: space-between } 37 | .xs-content-around { align-content: space-around } 38 | .xs-content-stretch { align-content: stretch } 39 | 40 | .xs-flex-auto { 41 | flex: 1 1 auto; 42 | min-width: 0; 43 | min-height: 0; 44 | } 45 | 46 | .xs-flex-none { flex: none } 47 | 48 | .xs-order-0 { order: 0 } 49 | .xs-order-1 { order: 1 } 50 | .xs-order-2 { order: 2 } 51 | .xs-order-3 { order: 3 } 52 | .xs-order-last { order: 99999 } 53 | } 54 | 55 | @media (--sm-viewport) { 56 | .sm-flex { 57 | display: flex; 58 | } 59 | 60 | .sm-flex-column { flex-direction: column } 61 | .sm-flex-row { flex-direction: row } 62 | .sm-flex-wrap { flex-wrap: wrap } 63 | 64 | .sm-flex-column-reverse { flex-direction: column-reverse } 65 | .sm-flex-row-reverse { flex-direction: row-reverse } 66 | .sm-flex-wrap-reverse { flex-wrap: wrap-reverse } 67 | 68 | .sm-items-start { align-items: flex-start } 69 | .sm-items-end { align-items: flex-end } 70 | .sm-items-center { align-items: center } 71 | .sm-items-baseline { align-items: baseline } 72 | .sm-items-stretch { align-items: stretch } 73 | 74 | .sm-self-start { align-self: flex-start } 75 | .sm-self-end { align-self: flex-end } 76 | .sm-self-center { align-self: center } 77 | .sm-self-baseline { align-self: baseline } 78 | .sm-self-stretch { align-self: stretch } 79 | 80 | .sm-justify-start { justify-content: flex-start } 81 | .sm-justify-end { justify-content: flex-end } 82 | .sm-justify-center { justify-content: center } 83 | .sm-justify-between { justify-content: space-between } 84 | .sm-justify-around { justify-content: space-around } 85 | 86 | .sm-content-start { align-content: flex-start } 87 | .sm-content-end { align-content: flex-end } 88 | .sm-content-center { align-content: center } 89 | .sm-content-between { align-content: space-between } 90 | .sm-content-around { align-content: space-around } 91 | .sm-content-stretch { align-content: stretch } 92 | 93 | .sm-flex-auto { 94 | flex: 1 1 auto; 95 | min-width: 0; 96 | min-height: 0; 97 | } 98 | 99 | .sm-flex-none { flex: none } 100 | 101 | .sm-order-0 { order: 0 } 102 | .sm-order-1 { order: 1 } 103 | .sm-order-2 { order: 2 } 104 | .sm-order-3 { order: 3 } 105 | .sm-order-last { order: 99999 } 106 | } 107 | 108 | @media (--md-viewport) { 109 | .md-flex { 110 | display: flex; 111 | } 112 | 113 | .md-flex-column { flex-direction: column } 114 | .md-flex-row { flex-direction: row } 115 | .md-flex-wrap { flex-wrap: wrap } 116 | 117 | .md-flex-column-reverse { flex-direction: column-reverse } 118 | .md-flex-row-reverse { flex-direction: row-reverse } 119 | .md-flex-wrap-reverse { flex-wrap: wrap-reverse } 120 | 121 | .md-items-start { align-items: flex-start } 122 | .md-items-end { align-items: flex-end } 123 | .md-items-center { align-items: center } 124 | .md-items-baseline { align-items: baseline } 125 | .md-items-stretch { align-items: stretch } 126 | 127 | .md-self-start { align-self: flex-start } 128 | .md-self-end { align-self: flex-end } 129 | .md-self-center { align-self: center } 130 | .md-self-baseline { align-self: baseline } 131 | .md-self-stretch { align-self: stretch } 132 | 133 | .md-justify-start { justify-content: flex-start } 134 | .md-justify-end { justify-content: flex-end } 135 | .md-justify-center { justify-content: center } 136 | .md-justify-between { justify-content: space-between } 137 | .md-justify-around { justify-content: space-around } 138 | 139 | .md-content-start { align-content: flex-start } 140 | .md-content-end { align-content: flex-end } 141 | .md-content-center { align-content: center } 142 | .md-content-between { align-content: space-between } 143 | .md-content-around { align-content: space-around } 144 | .md-content-stretch { align-content: stretch } 145 | 146 | .md-flex-auto { 147 | flex: 1 1 auto; 148 | min-width: 0; 149 | min-height: 0; 150 | } 151 | 152 | .md-flex-none { flex: none } 153 | 154 | .md-order-0 { order: 0 } 155 | .md-order-1 { order: 1 } 156 | .md-order-2 { order: 2 } 157 | .md-order-3 { order: 3 } 158 | .md-order-last { order: 99999 } 159 | } 160 | 161 | @media (--lg-viewport) { 162 | .lg-flex { 163 | display: flex; 164 | } 165 | 166 | .lg-flex-column { flex-direction: column } 167 | .lg-flex-row { flex-direction: row } 168 | .lg-flex-wrap { flex-wrap: wrap } 169 | 170 | .lg-flex-column-reverse { flex-direction: column-reverse } 171 | .lg-flex-row-reverse { flex-direction: row-reverse } 172 | .lg-flex-wrap-reverse { flex-wrap: wrap-reverse } 173 | 174 | .lg-items-start { align-items: flex-start } 175 | .lg-items-end { align-items: flex-end } 176 | .lg-items-center { align-items: center } 177 | .lg-items-baseline { align-items: baseline } 178 | .lg-items-stretch { align-items: stretch } 179 | 180 | .lg-self-start { align-self: flex-start } 181 | .lg-self-end { align-self: flex-end } 182 | .lg-self-center { align-self: center } 183 | .lg-self-baseline { align-self: baseline } 184 | .lg-self-stretch { align-self: stretch } 185 | 186 | .lg-justify-start { justify-content: flex-start } 187 | .lg-justify-end { justify-content: flex-end } 188 | .lg-justify-center { justify-content: center } 189 | .lg-justify-between { justify-content: space-between } 190 | .lg-justify-around { justify-content: space-around } 191 | 192 | .lg-content-start { align-content: flex-start } 193 | .lg-content-end { align-content: flex-end } 194 | .lg-content-center { align-content: center } 195 | .lg-content-between { align-content: space-between } 196 | .lg-content-around { align-content: space-around } 197 | .lg-content-stretch { align-content: stretch } 198 | 199 | .lg-flex-auto { 200 | flex: 1 1 auto; 201 | min-width: 0; 202 | min-height: 0; 203 | } 204 | 205 | .lg-flex-none { flex: none } 206 | 207 | .lg-order-0 { order: 0 } 208 | .lg-order-1 { order: 1 } 209 | .lg-order-2 { order: 2 } 210 | .lg-order-3 { order: 3 } 211 | .lg-order-last { order: 99999 } 212 | } 213 | 214 | @media (--xl-viewport) { 215 | 216 | .xl-flex { 217 | display: flex; 218 | } 219 | 220 | .xl-flex-column { flex-direction: column } 221 | .xl-flex-row { flex-direction: row } 222 | .xl-flex-wrap { flex-wrap: wrap } 223 | 224 | .xl-flex-column-reverse { flex-direction: column-reverse } 225 | .xl-flex-row-reverse { flex-direction: row-reverse } 226 | .xl-flex-wrap-reverse { flex-wrap: wrap-reverse } 227 | 228 | .xl-items-start { align-items: flex-start } 229 | .xl-items-end { align-items: flex-end } 230 | .xl-items-center { align-items: center } 231 | .xl-items-baseline { align-items: baseline } 232 | .xl-items-stretch { align-items: stretch } 233 | 234 | .xl-self-start { align-self: flex-start } 235 | .xl-self-end { align-self: flex-end } 236 | .xl-self-center { align-self: center } 237 | .xl-self-baseline { align-self: baseline } 238 | .xl-self-stretch { align-self: stretch } 239 | 240 | .xl-justify-start { justify-content: flex-start } 241 | .xl-justify-end { justify-content: flex-end } 242 | .xl-justify-center { justify-content: center } 243 | .xl-justify-between { justify-content: space-between } 244 | .xl-justify-around { justify-content: space-around } 245 | 246 | .xl-content-start { align-content: flex-start } 247 | .xl-content-end { align-content: flex-end } 248 | .xl-content-center { align-content: center } 249 | .xl-content-between { align-content: space-between } 250 | .xl-content-around { align-content: space-around } 251 | .xl-content-stretch { align-content: stretch } 252 | 253 | .xl-flex-auto { 254 | flex: 1 1 auto; 255 | min-width: 0; 256 | min-height: 0; 257 | } 258 | 259 | .xl-flex-none { flex: none } 260 | 261 | .xl-order-0 { order: 0 } 262 | .xl-order-1 { order: 1 } 263 | .xl-order-2 { order: 2 } 264 | .xl-order-3 { order: 3 } 265 | .xl-order-last { order: 99999 } 266 | } 267 | -------------------------------------------------------------------------------- /src/grid-flex.css: -------------------------------------------------------------------------------- 1 | 2 | .flex { 3 | display: flex; 4 | } 5 | 6 | .flex-column { flex-direction: column } 7 | .flex-row { flex-direction: row } 8 | .flex-wrap { flex-wrap: wrap } 9 | 10 | .flex-column-reverse { flex-direction: column-reverse } 11 | .flex-row-reverse { flex-direction: row-reverse } 12 | .flex-wrap-reverse { flex-wrap: wrap-reverse } 13 | 14 | .items-start { align-items: flex-start } 15 | .items-end { align-items: flex-end } 16 | .items-center { align-items: center } 17 | .items-baseline { align-items: baseline } 18 | .items-stretch { align-items: stretch } 19 | 20 | .self-start { align-self: flex-start } 21 | .self-end { align-self: flex-end } 22 | .self-center { align-self: center } 23 | .self-baseline { align-self: baseline } 24 | .self-stretch { align-self: stretch } 25 | 26 | .justify-start { justify-content: flex-start } 27 | .justify-end { justify-content: flex-end } 28 | .justify-center { justify-content: center } 29 | .justify-between { justify-content: space-between } 30 | .justify-around { justify-content: space-around } 31 | 32 | .content-start { align-content: flex-start } 33 | .content-end { align-content: flex-end } 34 | .content-center { align-content: center } 35 | .content-between { align-content: space-between } 36 | .content-around { align-content: space-around } 37 | .content-stretch { align-content: stretch } 38 | 39 | .flex-auto { 40 | flex: 1 1 auto; 41 | min-width: 0; 42 | min-height: 0; 43 | } 44 | .flex-none { flex: none } 45 | 46 | .order-0 { order: 0 } 47 | .order-1 { order: 1 } 48 | .order-2 { order: 2 } 49 | .order-3 { order: 3 } 50 | .order-last { order: 99999 } 51 | -------------------------------------------------------------------------------- /src/grid.css: -------------------------------------------------------------------------------- 1 | 2 | .col { 3 | position: relative; 4 | display: block; 5 | float: left; 6 | min-height: 1px; 7 | max-width: 100%; 8 | } 9 | 10 | .base-1 { width: calc(100 / 12 * 1)% } 11 | .base-2 { width: calc(100 / 12 * 2)% } 12 | .base-3 { width: calc(100 / 12 * 3)% } 13 | .base-4 { width: calc(100 / 12 * 4)% } 14 | .base-5 { width: calc(100 / 12 * 5)% } 15 | .base-6 { width: calc(100 / 12 * 6)% } 16 | .base-7 { width: calc(100 / 12 * 7)% } 17 | .base-8 { width: calc(100 / 12 * 8)% } 18 | .base-9 { width: calc(100 / 12 * 9)% } 19 | .base-10 { width: calc(100 / 12 * 10)% } 20 | .base-11 { width: calc(100 / 12 * 11)% } 21 | .base-12 { width: calc(100 / 12 * 12)% } 22 | 23 | .base-offset-0 { margin-left: 0 } 24 | .base-offset-1 { margin-left: calc(100 / 12 * 1)% } 25 | .base-offset-2 { margin-left: calc(100 / 12 * 2)% } 26 | .base-offset-3 { margin-left: calc(100 / 12 * 3)% } 27 | .base-offset-4 { margin-left: calc(100 / 12 * 4)% } 28 | .base-offset-5 { margin-left: calc(100 / 12 * 5)% } 29 | .base-offset-6 { margin-left: calc(100 / 12 * 6)% } 30 | 31 | @media (--xs-viewport) { 32 | .xs-1 { width: calc(100 / 12 * 1)% } 33 | .xs-2 { width: calc(100 / 12 * 2)% } 34 | .xs-3 { width: calc(100 / 12 * 3)% } 35 | .xs-4 { width: calc(100 / 12 * 4)% } 36 | .xs-5 { width: calc(100 / 12 * 5)% } 37 | .xs-6 { width: calc(100 / 12 * 6)% } 38 | .xs-7 { width: calc(100 / 12 * 7)% } 39 | .xs-8 { width: calc(100 / 12 * 8)% } 40 | .xs-9 { width: calc(100 / 12 * 9)% } 41 | .xs-10 { width: calc(100 / 12 * 10)% } 42 | .xs-11 { width: calc(100 / 12 * 11)% } 43 | .xs-12 { width: calc(100 / 12 * 12)% } 44 | 45 | .xs-offset-0 { margin-left: 0 } 46 | .xs-offset-1 { margin-left: calc(100 / 12 * 1)% } 47 | .xs-offset-2 { margin-left: calc(100 / 12 * 2)% } 48 | .xs-offset-3 { margin-left: calc(100 / 12 * 3)% } 49 | .xs-offset-4 { margin-left: calc(100 / 12 * 4)% } 50 | .xs-offset-5 { margin-left: calc(100 / 12 * 5)% } 51 | .xs-offset-6 { margin-left: calc(100 / 12 * 6)% } 52 | } 53 | 54 | @media (--sm-viewport) { 55 | .sm-1 { width: calc(100 / 12 * 1)% } 56 | .sm-2 { width: calc(100 / 12 * 2)% } 57 | .sm-3 { width: calc(100 / 12 * 3)% } 58 | .sm-4 { width: calc(100 / 12 * 4)% } 59 | .sm-5 { width: calc(100 / 12 * 5)% } 60 | .sm-6 { width: calc(100 / 12 * 6)% } 61 | .sm-7 { width: calc(100 / 12 * 7)% } 62 | .sm-8 { width: calc(100 / 12 * 8)% } 63 | .sm-9 { width: calc(100 / 12 * 9)% } 64 | .sm-10 { width: calc(100 / 12 * 10)% } 65 | .sm-11 { width: calc(100 / 12 * 11)% } 66 | .sm-12 { width: calc(100 / 12 * 12)% } 67 | 68 | .sm-offset-0 { margin-left: 0 } 69 | .sm-offset-1 { margin-left: calc(100 / 12 * 1)% } 70 | .sm-offset-2 { margin-left: calc(100 / 12 * 2)% } 71 | .sm-offset-3 { margin-left: calc(100 / 12 * 3)% } 72 | .sm-offset-4 { margin-left: calc(100 / 12 * 4)% } 73 | .sm-offset-5 { margin-left: calc(100 / 12 * 5)% } 74 | .sm-offset-6 { margin-left: calc(100 / 12 * 6)% } 75 | } 76 | 77 | @media (--md-viewport) { 78 | .md-1 { width: calc(100 / 12 * 1)% } 79 | .md-2 { width: calc(100 / 12 * 2)% } 80 | .md-3 { width: calc(100 / 12 * 3)% } 81 | .md-4 { width: calc(100 / 12 * 4)% } 82 | .md-5 { width: calc(100 / 12 * 5)% } 83 | .md-6 { width: calc(100 / 12 * 6)% } 84 | .md-7 { width: calc(100 / 12 * 7)% } 85 | .md-8 { width: calc(100 / 12 * 8)% } 86 | .md-9 { width: calc(100 / 12 * 9)% } 87 | .md-10 { width: calc(100 / 12 * 10)% } 88 | .md-11 { width: calc(100 / 12 * 11)% } 89 | .md-12 { width: calc(100 / 12 * 12)% } 90 | 91 | .md-offset-0 { margin-left: 0 } 92 | .md-offset-1 { margin-left: calc(100 / 12 * 1)% } 93 | .md-offset-2 { margin-left: calc(100 / 12 * 2)% } 94 | .md-offset-3 { margin-left: calc(100 / 12 * 3)% } 95 | .md-offset-4 { margin-left: calc(100 / 12 * 4)% } 96 | .md-offset-5 { margin-left: calc(100 / 12 * 5)% } 97 | .md-offset-6 { margin-left: calc(100 / 12 * 6)% } 98 | } 99 | 100 | @media (--lg-viewport) { 101 | .lg-1 { width: calc(100 / 12 * 1)% } 102 | .lg-2 { width: calc(100 / 12 * 2)% } 103 | .lg-3 { width: calc(100 / 12 * 3)% } 104 | .lg-4 { width: calc(100 / 12 * 4)% } 105 | .lg-5 { width: calc(100 / 12 * 5)% } 106 | .lg-6 { width: calc(100 / 12 * 6)% } 107 | .lg-7 { width: calc(100 / 12 * 7)% } 108 | .lg-8 { width: calc(100 / 12 * 8)% } 109 | .lg-9 { width: calc(100 / 12 * 9)% } 110 | .lg-10 { width: calc(100 / 12 * 10)% } 111 | .lg-11 { width: calc(100 / 12 * 11)% } 112 | .lg-12 { width: calc(100 / 12 * 12)% } 113 | 114 | .lg-offset-0 { margin-left: 0 } 115 | .lg-offset-1 { margin-left: calc(100 / 12 * 1)% } 116 | .lg-offset-2 { margin-left: calc(100 / 12 * 2)% } 117 | .lg-offset-3 { margin-left: calc(100 / 12 * 3)% } 118 | .lg-offset-4 { margin-left: calc(100 / 12 * 4)% } 119 | .lg-offset-5 { margin-left: calc(100 / 12 * 5)% } 120 | .lg-offset-6 { margin-left: calc(100 / 12 * 6)% } 121 | } 122 | 123 | @media (--xl-viewport) { 124 | .xl-1 { width: calc(100 / 12 * 1)% } 125 | .xl-2 { width: calc(100 / 12 * 2)% } 126 | .xl-3 { width: calc(100 / 12 * 3)% } 127 | .xl-4 { width: calc(100 / 12 * 4)% } 128 | .xl-5 { width: calc(100 / 12 * 5)% } 129 | .xl-6 { width: calc(100 / 12 * 6)% } 130 | .xl-7 { width: calc(100 / 12 * 7)% } 131 | .xl-8 { width: calc(100 / 12 * 8)% } 132 | .xl-9 { width: calc(100 / 12 * 9)% } 133 | .xl-10 { width: calc(100 / 12 * 10)% } 134 | .xl-11 { width: calc(100 / 12 * 11)% } 135 | .xl-12 { width: calc(100 / 12 * 12)% } 136 | 137 | .xl-offset-0 { margin-left: 0 } 138 | .xl-offset-1 { margin-left: calc(100 / 12 * 1)% } 139 | .xl-offset-2 { margin-left: calc(100 / 12 * 2)% } 140 | .xl-offset-3 { margin-left: calc(100 / 12 * 3)% } 141 | .xl-offset-4 { margin-left: calc(100 / 12 * 4)% } 142 | .xl-offset-5 { margin-left: calc(100 / 12 * 5)% } 143 | .xl-offset-6 { margin-left: calc(100 / 12 * 6)% } 144 | } 145 | -------------------------------------------------------------------------------- /src/heights-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (--xs-viewport) { 3 | .xs-height-auto { height: auto; } 4 | 5 | .xs-height-25 { height: 25%; } 6 | .xs-height-50 { height: 50%; } 7 | .xs-height-75 { height: 75%; } 8 | .xs-height-100 { height: 100%; } 9 | 10 | .xs-height-25vh { height: 25vh; } 11 | .xs-height-50vh { height: 50vh; } 12 | .xs-height-75vh { height: 75vh; } 13 | .xs-height-100vh { height: 100vh; } 14 | } 15 | 16 | @media (--sm-viewport) { 17 | .sm-height-auto { height: auto; } 18 | 19 | .sm-height-25 { height: 25%; } 20 | .sm-height-50 { height: 50%; } 21 | .sm-height-75 { height: 75%; } 22 | .sm-height-100 { height: 100%; } 23 | 24 | .sm-height-25vh { height: 25vh; } 25 | .sm-height-50vh { height: 50vh; } 26 | .sm-height-75vh { height: 75vh; } 27 | .sm-height-100vh { height: 100vh; } 28 | } 29 | 30 | @media (--md-viewport) { 31 | .md-height-auto { height: auto; } 32 | 33 | .md-height-25 { height: 25%; } 34 | .md-height-50 { height: 50%; } 35 | .md-height-75 { height: 75%; } 36 | .md-height-100 { height: 100%; } 37 | 38 | .md-height-25vh { height: 25vh; } 39 | .md-height-50vh { height: 50vh; } 40 | .md-height-75vh { height: 75vh; } 41 | .md-height-100vh { height: 100vh; } 42 | } 43 | 44 | @media (--lg-viewport) { 45 | .lg-height-auto { height: auto; } 46 | 47 | .lg-height-25 { height: 25%; } 48 | .lg-height-50 { height: 50%; } 49 | .lg-height-75 { height: 75%; } 50 | .lg-height-100 { height: 100%; } 51 | 52 | .lg-height-25vh { height: 25vh; } 53 | .lg-height-50vh { height: 50vh; } 54 | .lg-height-75vh { height: 75vh; } 55 | .lg-height-100vh { height: 100vh; } 56 | } 57 | 58 | @media (--xl-viewport) { 59 | .xl-height-auto { height: auto; } 60 | 61 | .xl-height-25 { height: 25%; } 62 | .xl-height-50 { height: 50%; } 63 | .xl-height-75 { height: 75%; } 64 | .xl-height-100 { height: 100%; } 65 | 66 | .xl-height-25vh { height: 25vh; } 67 | .xl-height-50vh { height: 50vh; } 68 | .xl-height-75vh { height: 75vh; } 69 | .xl-height-100vh { height: 100vh; } 70 | } 71 | -------------------------------------------------------------------------------- /src/heights.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Heights 4 | * 5 | */ 6 | 7 | .height-auto { height: auto; } 8 | 9 | .height-25 { height: 25%; } 10 | .height-50 { height: 50%; } 11 | .height-75 { height: 75%; } 12 | .height-100 { height: 100%; } 13 | 14 | .height-25vh { height: 25vh; } 15 | .height-50vh { height: 50vh; } 16 | .height-75vh { height: 75vh; } 17 | .height-100vh { height: 100vh; } 18 | -------------------------------------------------------------------------------- /src/links.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Links 4 | * 5 | */ 6 | a { 7 | color: var(--color-primary); 8 | text-decoration: none; 9 | outline: none; 10 | } 11 | 12 | a:hover, 13 | a:focus { 14 | border-bottom: calc(2 * var(--one)) solid currentcolor; 15 | } 16 | 17 | .link--focus-highlight:focus { 18 | box-shadow: inset 0 0 0 3em rgba(0,0,0,var(--shadow-light)), 19 | 0 0 0 4px rgba(0,0,0,var(--shadow-light)); 20 | } 21 | 22 | .link--underlined { 23 | border-bottom: calc(2 * var(--one)) solid currentcolor; 24 | } 25 | 26 | .link--no-underline, 27 | .link--no-underline:hover, 28 | .link--no-underline:focus { 29 | border-bottom: none; 30 | } 31 | -------------------------------------------------------------------------------- /src/main.css: -------------------------------------------------------------------------------- 1 | 2 | @import "base.css"; 3 | 4 | @import "links.css"; 5 | @import "buttons.css"; 6 | 7 | @import "typography.css"; 8 | @import "typography-responsive.css"; 9 | 10 | @import "grid.css"; 11 | @import "grid-flex.css"; 12 | @import "grid-flex-responsive.css"; 13 | 14 | @import "display.css"; 15 | @import "display-responsive.css"; 16 | 17 | @import "paddings.css"; 18 | @import "paddings-responsive.css"; 19 | 20 | @import "margins.css"; 21 | @import "margins-responsive.css"; 22 | 23 | @import "utils.css"; 24 | @import "utils-responsive.css"; 25 | 26 | @import "borders.css"; 27 | @import "border-radius.css"; 28 | @import "colors.css"; 29 | 30 | @import "shadows.css"; 31 | @import "shadows-responsive.css"; 32 | 33 | @import "position.css"; 34 | @import "position-responsive.css"; 35 | 36 | @import "ratios.css"; 37 | @import "ratios-responsive.css"; 38 | 39 | @import "heights.css"; 40 | @import "heights-responsive.css"; 41 | 42 | @import "opacity.css"; 43 | @import "opacity-responsive.css"; 44 | -------------------------------------------------------------------------------- /src/margins.css: -------------------------------------------------------------------------------- 1 | 2 | .mx-auto { margin-left: auto; margin-right: auto; } 3 | .ml-auto { margin-left: auto } 4 | .mr-auto { margin-right: auto } 5 | 6 | .m0 { margin: 0 } 7 | .mt0 { margin-top: 0 } 8 | .mr0 { margin-right: 0 } 9 | .mb0 { margin-bottom: 0 } 10 | .ml0 { margin-left: 0 } 11 | .mx0 { margin-left: 0; margin-right: 0; } 12 | .my0 { margin-top: 0; margin-bottom: 0; } 13 | 14 | .m05 { margin: calc(.5 * var(--base-unit)); } 15 | .mt05 { margin-top: calc(.5 * var(--base-unit)); } 16 | .mr05 { margin-right: calc(.5 * var(--base-unit)); } 17 | .mb05 { margin-bottom: calc(.5 * var(--base-unit)); } 18 | .ml05 { margin-left: calc(.5 * var(--base-unit)); } 19 | .mx05 { margin-left: calc(.5 * var(--base-unit)); margin-right: calc(.5 * var(--base-unit)); } 20 | .my05 { margin-top: calc(.5 * var(--base-unit)); margin-bottom: calc(.5 * var(--base-unit)); } 21 | 22 | .m1 { margin: calc(1 * var(--base-unit)) } 23 | .mt1 { margin-top: calc(1 * var(--base-unit)) } 24 | .mr1 { margin-right: calc(1 * var(--base-unit)) } 25 | .mb1 { margin-bottom: calc(1 * var(--base-unit)) } 26 | .ml1 { margin-left: calc(1 * var(--base-unit)) } 27 | .mx1 { margin-left: calc(1 * var(--base-unit)); margin-right: calc(1 * var(--base-unit)); } 28 | .my1 { margin-top: calc(1 * var(--base-unit)); margin-bottom: calc(1 * var(--base-unit)); } 29 | 30 | .mxn1 { margin-left: calc(-1 * var(--base-unit)); margin-right: calc(-1 * var(--base-unit)); } 31 | 32 | .m2 { margin: calc(2 * var(--base-unit)) } 33 | .mt2 { margin-top: calc(2 * var(--base-unit)) } 34 | .mr2 { margin-right: calc(2 * var(--base-unit)) } 35 | .mb2 { margin-bottom: calc(2 * var(--base-unit)) } 36 | .ml2 { margin-left: calc(2 * var(--base-unit)) } 37 | .mx2 { margin-left: calc(2 * var(--base-unit)); margin-right: calc(2 * var(--base-unit)); } 38 | .my2 { margin-top: calc(2 * var(--base-unit)); margin-bottom: calc(2 * var(--base-unit)); } 39 | 40 | .mxn2 { margin-left: calc(-2 * var(--base-unit)); margin-right: calc(-2 * var(--base-unit)); } 41 | 42 | .m3 { margin: calc(3 * var(--base-unit)) } 43 | .mt3 { margin-top: calc(3 * var(--base-unit)) } 44 | .mr3 { margin-right: calc(3 * var(--base-unit)) } 45 | .mb3 { margin-bottom: calc(3 * var(--base-unit)) } 46 | .ml3 { margin-left: calc(3 * var(--base-unit)) } 47 | .mx3 { margin-left: calc(3 * var(--base-unit)); margin-right: calc(3 * var(--base-unit)); } 48 | .my3 { margin-top: calc(3 * var(--base-unit)); margin-bottom: calc(3 * var(--base-unit)); } 49 | 50 | .mxn3 { margin-left: calc(-3 * var(--base-unit)); margin-right: calc(-3 * var(--base-unit)); } 51 | 52 | 53 | .m4 { margin: calc(4 * var(--base-unit)) } 54 | .mt4 { margin-top: calc(4 * var(--base-unit)) } 55 | .mr4 { margin-right: calc(4 * var(--base-unit)) } 56 | .mb4 { margin-bottom: calc(4 * var(--base-unit)) } 57 | .ml4 { margin-left: calc(4 * var(--base-unit)) } 58 | .mx4 { margin-left: calc(4 * var(--base-unit)); margin-right: calc(4 * var(--base-unit)); } 59 | .my4 { margin-top: calc(4 * var(--base-unit)); margin-bottom: calc(4 * var(--base-unit)); } 60 | 61 | .mxn4 { margin-left: calc(-4 * var(--base-unit)); margin-right: calc(-4 * var(--base-unit)); } 62 | 63 | 64 | .m5 { margin: calc(5 * var(--base-unit)) } 65 | .mt5 { margin-top: calc(5 * var(--base-unit)) } 66 | .mr5 { margin-right: calc(5 * var(--base-unit)) } 67 | .mb5 { margin-bottom: calc(5 * var(--base-unit)) } 68 | .ml5 { margin-left: calc(5 * var(--base-unit)) } 69 | .mx5 { margin-left: calc(5 * var(--base-unit)); margin-right: calc(5 * var(--base-unit)); } 70 | .my5 { margin-top: calc(5 * var(--base-unit)); margin-bottom: calc(5 * var(--base-unit)); } 71 | 72 | .mxn5 { margin-left: calc(-5 * var(--base-unit)); margin-right: calc(-5 * var(--base-unit)); } 73 | 74 | 75 | .m6 { margin: calc(6 * var(--base-unit)) } 76 | .mt6 { margin-top: calc(6 * var(--base-unit)) } 77 | .mr6 { margin-right: calc(6 * var(--base-unit)) } 78 | .mb6 { margin-bottom: calc(6 * var(--base-unit)) } 79 | .ml6 { margin-left: calc(6 * var(--base-unit)) } 80 | .mx6 { margin-left: calc(6 * var(--base-unit)); margin-right: calc(6 * var(--base-unit)); } 81 | .my6 { margin-top: calc(6 * var(--base-unit)); margin-bottom: calc(6 * var(--base-unit)); } 82 | 83 | .mxn6 { margin-left: calc(-6 * var(--base-unit)); margin-right: calc(-6 * var(--base-unit)); } 84 | -------------------------------------------------------------------------------- /src/mediaQueries.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | "xs-viewport": "(min-width: 30em)", 4 | "sm-viewport": "(min-width: 48em)", 5 | "md-viewport": "(min-width: 62em)", 6 | "lg-viewport": "(min-width: 75em)", 7 | "xl-viewport": "(min-width: 91em)", 8 | } 9 | -------------------------------------------------------------------------------- /src/opacity-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (--xs-viewport) { 3 | .xs-opacity-100 { opacity: 1; } 4 | .xs-opacity-90 { opacity: .9; } 5 | .xs-opacity-80 { opacity: .8; } 6 | .xs-opacity-70 { opacity: .7; } 7 | .xs-opacity-60 { opacity: .6; } 8 | .xs-opacity-50 { opacity: .5; } 9 | .xs-opacity-40 { opacity: .4; } 10 | .xs-opacity-30 { opacity: .3; } 11 | .xs-opacity-20 { opacity: .2; } 12 | .xs-opacity-10 { opacity: .1; } 13 | .xs-opacity-0 { opacity: 0; } 14 | } 15 | 16 | @media (--sm-viewport) { 17 | .sm-opacity-100 { opacity: 1; } 18 | .sm-opacity-90 { opacity: .9; } 19 | .sm-opacity-80 { opacity: .8; } 20 | .sm-opacity-70 { opacity: .7; } 21 | .sm-opacity-60 { opacity: .6; } 22 | .sm-opacity-50 { opacity: .5; } 23 | .sm-opacity-40 { opacity: .4; } 24 | .sm-opacity-30 { opacity: .3; } 25 | .sm-opacity-20 { opacity: .2; } 26 | .sm-opacity-10 { opacity: .1; } 27 | .sm-opacity-0 { opacity: 0; } 28 | } 29 | 30 | @media (--md-viewport) { 31 | .md-opacity-100 { opacity: 1; } 32 | .md-opacity-90 { opacity: .9; } 33 | .md-opacity-80 { opacity: .8; } 34 | .md-opacity-70 { opacity: .7; } 35 | .md-opacity-60 { opacity: .6; } 36 | .md-opacity-50 { opacity: .5; } 37 | .md-opacity-40 { opacity: .4; } 38 | .md-opacity-30 { opacity: .3; } 39 | .md-opacity-20 { opacity: .2; } 40 | .md-opacity-10 { opacity: .1; } 41 | .md-opacity-0 { opacity: 0; } 42 | } 43 | 44 | @media (--lg-viewport) { 45 | .lg-opacity-100 { opacity: 1; } 46 | .lg-opacity-90 { opacity: .9; } 47 | .lg-opacity-80 { opacity: .8; } 48 | .lg-opacity-70 { opacity: .7; } 49 | .lg-opacity-60 { opacity: .6; } 50 | .lg-opacity-50 { opacity: .5; } 51 | .lg-opacity-40 { opacity: .4; } 52 | .lg-opacity-30 { opacity: .3; } 53 | .lg-opacity-20 { opacity: .2; } 54 | .lg-opacity-10 { opacity: .1; } 55 | .lg-opacity-0 { opacity: 0; } 56 | } 57 | 58 | @media (--xl-viewport) { 59 | .xl-opacity-100 { opacity: 1; } 60 | .xl-opacity-90 { opacity: .9; } 61 | .xl-opacity-80 { opacity: .8; } 62 | .xl-opacity-70 { opacity: .7; } 63 | .xl-opacity-60 { opacity: .6; } 64 | .xl-opacity-50 { opacity: .5; } 65 | .xl-opacity-40 { opacity: .4; } 66 | .xl-opacity-30 { opacity: .3; } 67 | .xl-opacity-20 { opacity: .2; } 68 | .xl-opacity-10 { opacity: .1; } 69 | .xl-opacity-0 { opacity: 0; } 70 | } 71 | -------------------------------------------------------------------------------- /src/opacity.css: -------------------------------------------------------------------------------- 1 | .opacity-100 { opacity: 1; } 2 | .opacity-90 { opacity: .9; } 3 | .opacity-80 { opacity: .8; } 4 | .opacity-70 { opacity: .7; } 5 | .opacity-60 { opacity: .6; } 6 | .opacity-50 { opacity: .5; } 7 | .opacity-40 { opacity: .4; } 8 | .opacity-30 { opacity: .3; } 9 | .opacity-20 { opacity: .2; } 10 | .opacity-10 { opacity: .1; } 11 | .opacity-0 { opacity: 0; } 12 | -------------------------------------------------------------------------------- /src/paddings-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (--xs-viewport) { 3 | .xs-p0 { padding: 0; } 4 | .xs-pt0 { padding-top: 0; } 5 | .xs-pr0 { padding-right: 0; } 6 | .xs-pb0 { padding-bottom: 0; } 7 | .xs-pl0 { padding-left: 0; } 8 | 9 | .xs-p05 { padding: calc(.5 * var(--base-unit)); } 10 | .xs-pt05 { padding-top: calc(.5 * var(--base-unit)); } 11 | .xs-pr05 { padding-right: calc(.5 * var(--base-unit)); } 12 | .xs-pb05 { padding-bottom: calc(.5 * var(--base-unit)); } 13 | .xs-pl05 { padding-left: calc(.5 * var(--base-unit)); } 14 | 15 | .xs-p1 { padding: calc(1 * var(--base-unit)); } 16 | .xs-pt1 { padding-top: calc(1 * var(--base-unit)); } 17 | .xs-pr1 { padding-right: calc(1 * var(--base-unit)); } 18 | .xs-pb1 { padding-bottom: calc(1 * var(--base-unit)); } 19 | .xs-pl1 { padding-left: calc(1 * var(--base-unit)); } 20 | 21 | .xs-p2 { padding: calc(2 * var(--base-unit)); } 22 | .xs-pt2 { padding-top: calc(2 * var(--base-unit)); } 23 | .xs-pr2 { padding-right: calc(2 * var(--base-unit)); } 24 | .xs-pb2 { padding-bottom: calc(2 * var(--base-unit)); } 25 | .xs-pl2 { padding-left: calc(2 * var(--base-unit)); } 26 | 27 | .xs-p3 { padding: calc(3 * var(--base-unit)); } 28 | .xs-pt3 { padding-top: calc(3 * var(--base-unit)); } 29 | .xs-pr3 { padding-right: calc(3 * var(--base-unit)); } 30 | .xs-pb3 { padding-bottom: calc(3 * var(--base-unit)); } 31 | .xs-pl3 { padding-left: calc(3 * var(--base-unit)); } 32 | 33 | .xs-p4 { padding: calc(4 * var(--base-unit)); } 34 | .xs-pt4 { padding-top: calc(4 * var(--base-unit)); } 35 | .xs-pr4 { padding-right: calc(4 * var(--base-unit)); } 36 | .xs-pb4 { padding-bottom: calc(4 * var(--base-unit)); } 37 | .xs-pl4 { padding-left: calc(4 * var(--base-unit)); } 38 | 39 | .xs-p5 { padding: calc(5 * var(--base-unit)); } 40 | .xs-pt5 { padding-top: calc(5 * var(--base-unit)); } 41 | .xs-pr5 { padding-right: calc(5 * var(--base-unit)); } 42 | .xs-pb5 { padding-bottom: calc(5 * var(--base-unit)); } 43 | .xs-pl5 { padding-left: calc(5 * var(--base-unit)); } 44 | 45 | .xs-p6 { padding: calc(6 * var(--base-unit)); } 46 | .xs-pt6 { padding-top: calc(6 * var(--base-unit)); } 47 | .xs-pr6 { padding-right: calc(6 * var(--base-unit)); } 48 | .xs-pb6 { padding-bottom: calc(6 * var(--base-unit)); } 49 | .xs-pl6 { padding-left: calc(6 * var(--base-unit)); } 50 | 51 | .xs-px0 { padding-left: 0; padding-right: 0; } 52 | .xs-px1 { padding-left: calc(1 * var(--base-unit)); padding-right: calc(1 * var(--base-unit)); } 53 | .xs-px2 { padding-left: calc(2 * var(--base-unit)); padding-right: calc(2 * var(--base-unit)); } 54 | .xs-px3 { padding-left: calc(3 * var(--base-unit)); padding-right: calc(3 * var(--base-unit)); } 55 | .xs-px4 { padding-left: calc(4 * var(--base-unit)); padding-right: calc(4 * var(--base-unit)); } 56 | .xs-px5 { padding-left: calc(5 * var(--base-unit)); padding-right: calc(5 * var(--base-unit)); } 57 | .xs-px6 { padding-left: calc(6 * var(--base-unit)); padding-right: calc(6 * var(--base-unit)); } 58 | 59 | .xs-py0 { padding-top: 0; padding-bottom: 0; } 60 | .xs-py1 { padding-top: calc(1 * var(--base-unit)); padding-bottom: calc(1 * var(--base-unit)); } 61 | .xs-py2 { padding-top: calc(2 * var(--base-unit)); padding-bottom: calc(2 * var(--base-unit)); } 62 | .xs-py3 { padding-top: calc(3 * var(--base-unit)); padding-bottom: calc(3 * var(--base-unit)); } 63 | .xs-py4 { padding-top: calc(4 * var(--base-unit)); padding-bottom: calc(4 * var(--base-unit)); } 64 | .xs-py5 { padding-top: calc(5 * var(--base-unit)); padding-bottom: calc(5 * var(--base-unit)); } 65 | .xs-py6 { padding-top: calc(6 * var(--base-unit)); padding-bottom: calc(6 * var(--base-unit)); } 66 | } 67 | 68 | @media (--sm-viewport) { 69 | .sm-p0 { padding: 0; } 70 | .sm-pt0 { padding-top: 0; } 71 | .sm-pr0 { padding-right: 0; } 72 | .sm-pb0 { padding-bottom: 0; } 73 | .sm-pl0 { padding-left: 0; } 74 | 75 | .sm-p05 { padding: calc(.5 * var(--base-unit)); } 76 | .sm-pt05 { padding-top: calc(.5 * var(--base-unit)); } 77 | .sm-pr05 { padding-right: calc(.5 * var(--base-unit)); } 78 | .sm-pb05 { padding-bottom: calc(.5 * var(--base-unit)); } 79 | .sm-pl05 { padding-left: calc(.5 * var(--base-unit)); } 80 | 81 | .sm-p1 { padding: calc(1 * var(--base-unit)); } 82 | .sm-pt1 { padding-top: calc(1 * var(--base-unit)); } 83 | .sm-pr1 { padding-right: calc(1 * var(--base-unit)); } 84 | .sm-pb1 { padding-bottom: calc(1 * var(--base-unit)); } 85 | .sm-pl1 { padding-left: calc(1 * var(--base-unit)); } 86 | 87 | .sm-p2 { padding: calc(2 * var(--base-unit)); } 88 | .sm-pt2 { padding-top: calc(2 * var(--base-unit)); } 89 | .sm-pr2 { padding-right: calc(2 * var(--base-unit)); } 90 | .sm-pb2 { padding-bottom: calc(2 * var(--base-unit)); } 91 | .sm-pl2 { padding-left: calc(2 * var(--base-unit)); } 92 | 93 | .sm-p3 { padding: calc(3 * var(--base-unit)); } 94 | .sm-pt3 { padding-top: calc(3 * var(--base-unit)); } 95 | .sm-pr3 { padding-right: calc(3 * var(--base-unit)); } 96 | .sm-pb3 { padding-bottom: calc(3 * var(--base-unit)); } 97 | .sm-pl3 { padding-left: calc(3 * var(--base-unit)); } 98 | 99 | .sm-p4 { padding: calc(4 * var(--base-unit)); } 100 | .sm-pt4 { padding-top: calc(4 * var(--base-unit)); } 101 | .sm-pr4 { padding-right: calc(4 * var(--base-unit)); } 102 | .sm-pb4 { padding-bottom: calc(4 * var(--base-unit)); } 103 | .sm-pl4 { padding-left: calc(4 * var(--base-unit)); } 104 | 105 | .sm-p5 { padding: calc(5 * var(--base-unit)); } 106 | .sm-pt5 { padding-top: calc(5 * var(--base-unit)); } 107 | .sm-pr5 { padding-right: calc(5 * var(--base-unit)); } 108 | .sm-pb5 { padding-bottom: calc(5 * var(--base-unit)); } 109 | .sm-pl5 { padding-left: calc(5 * var(--base-unit)); } 110 | 111 | .sm-p6 { padding: calc(6 * var(--base-unit)); } 112 | .sm-pt6 { padding-top: calc(6 * var(--base-unit)); } 113 | .sm-pr6 { padding-right: calc(6 * var(--base-unit)); } 114 | .sm-pb6 { padding-bottom: calc(6 * var(--base-unit)); } 115 | .sm-pl6 { padding-left: calc(6 * var(--base-unit)); } 116 | 117 | .sm-px0 { padding-left: 0; padding-right: 0; } 118 | .sm-px1 { padding-left: calc(1 * var(--base-unit)); padding-right: calc(1 * var(--base-unit)); } 119 | .sm-px2 { padding-left: calc(2 * var(--base-unit)); padding-right: calc(2 * var(--base-unit)); } 120 | .sm-px3 { padding-left: calc(3 * var(--base-unit)); padding-right: calc(3 * var(--base-unit)); } 121 | .sm-px4 { padding-left: calc(4 * var(--base-unit)); padding-right: calc(4 * var(--base-unit)); } 122 | .sm-px5 { padding-left: calc(5 * var(--base-unit)); padding-right: calc(5 * var(--base-unit)); } 123 | .sm-px6 { padding-left: calc(6 * var(--base-unit)); padding-right: calc(6 * var(--base-unit)); } 124 | 125 | .sm-py0 { padding-top: 0; padding-bottom: 0; } 126 | .sm-py1 { padding-top: calc(1 * var(--base-unit)); padding-bottom: calc(1 * var(--base-unit)); } 127 | .sm-py2 { padding-top: calc(2 * var(--base-unit)); padding-bottom: calc(2 * var(--base-unit)); } 128 | .sm-py3 { padding-top: calc(3 * var(--base-unit)); padding-bottom: calc(3 * var(--base-unit)); } 129 | .sm-py4 { padding-top: calc(4 * var(--base-unit)); padding-bottom: calc(4 * var(--base-unit)); } 130 | .sm-py5 { padding-top: calc(5 * var(--base-unit)); padding-bottom: calc(5 * var(--base-unit)); } 131 | .sm-py6 { padding-top: calc(6 * var(--base-unit)); padding-bottom: calc(6 * var(--base-unit)); } 132 | } 133 | 134 | @media (--md-viewport) { 135 | .md-p0 { padding: 0; } 136 | .md-pt0 { padding-top: 0; } 137 | .md-pr0 { padding-right: 0; } 138 | .md-pb0 { padding-bottom: 0; } 139 | .md-pl0 { padding-left: 0; } 140 | 141 | .md-p05 { padding: calc(.5 * var(--base-unit)); } 142 | .md-pt05 { padding-top: calc(.5 * var(--base-unit)); } 143 | .md-pr05 { padding-right: calc(.5 * var(--base-unit)); } 144 | .md-pb05 { padding-bottom: calc(.5 * var(--base-unit)); } 145 | .md-pl05 { padding-left: calc(.5 * var(--base-unit)); } 146 | 147 | .md-p1 { padding: calc(1 * var(--base-unit)); } 148 | .md-pt1 { padding-top: calc(1 * var(--base-unit)); } 149 | .md-pr1 { padding-right: calc(1 * var(--base-unit)); } 150 | .md-pb1 { padding-bottom: calc(1 * var(--base-unit)); } 151 | .md-pl1 { padding-left: calc(1 * var(--base-unit)); } 152 | 153 | .md-p2 { padding: calc(2 * var(--base-unit)); } 154 | .md-pt2 { padding-top: calc(2 * var(--base-unit)); } 155 | .md-pr2 { padding-right: calc(2 * var(--base-unit)); } 156 | .md-pb2 { padding-bottom: calc(2 * var(--base-unit)); } 157 | .md-pl2 { padding-left: calc(2 * var(--base-unit)); } 158 | 159 | .md-p3 { padding: calc(3 * var(--base-unit)); } 160 | .md-pt3 { padding-top: calc(3 * var(--base-unit)); } 161 | .md-pr3 { padding-right: calc(3 * var(--base-unit)); } 162 | .md-pb3 { padding-bottom: calc(3 * var(--base-unit)); } 163 | .md-pl3 { padding-left: calc(3 * var(--base-unit)); } 164 | 165 | .md-p4 { padding: calc(4 * var(--base-unit)); } 166 | .md-pt4 { padding-top: calc(4 * var(--base-unit)); } 167 | .md-pr4 { padding-right: calc(4 * var(--base-unit)); } 168 | .md-pb4 { padding-bottom: calc(4 * var(--base-unit)); } 169 | .md-pl4 { padding-left: calc(4 * var(--base-unit)); } 170 | 171 | .md-p5 { padding: calc(5 * var(--base-unit)); } 172 | .md-pt5 { padding-top: calc(5 * var(--base-unit)); } 173 | .md-pr5 { padding-right: calc(5 * var(--base-unit)); } 174 | .md-pb5 { padding-bottom: calc(5 * var(--base-unit)); } 175 | .md-pl5 { padding-left: calc(5 * var(--base-unit)); } 176 | 177 | .md-p6 { padding: calc(6 * var(--base-unit)); } 178 | .md-pt6 { padding-top: calc(6 * var(--base-unit)); } 179 | .md-pr6 { padding-right: calc(6 * var(--base-unit)); } 180 | .md-pb6 { padding-bottom: calc(6 * var(--base-unit)); } 181 | .md-pl6 { padding-left: calc(6 * var(--base-unit)); } 182 | 183 | .md-px0 { padding-left: 0; padding-right: 0; } 184 | .md-px1 { padding-left: calc(1 * var(--base-unit)); padding-right: calc(1 * var(--base-unit)); } 185 | .md-px2 { padding-left: calc(2 * var(--base-unit)); padding-right: calc(2 * var(--base-unit)); } 186 | .md-px3 { padding-left: calc(3 * var(--base-unit)); padding-right: calc(3 * var(--base-unit)); } 187 | .md-px4 { padding-left: calc(4 * var(--base-unit)); padding-right: calc(4 * var(--base-unit)); } 188 | .md-px5 { padding-left: calc(5 * var(--base-unit)); padding-right: calc(5 * var(--base-unit)); } 189 | .md-px6 { padding-left: calc(6 * var(--base-unit)); padding-right: calc(6 * var(--base-unit)); } 190 | 191 | .md-py0 { padding-top: 0; padding-bottom: 0; } 192 | .md-py1 { padding-top: calc(1 * var(--base-unit)); padding-bottom: calc(1 * var(--base-unit)); } 193 | .md-py2 { padding-top: calc(2 * var(--base-unit)); padding-bottom: calc(2 * var(--base-unit)); } 194 | .md-py3 { padding-top: calc(3 * var(--base-unit)); padding-bottom: calc(3 * var(--base-unit)); } 195 | .md-py4 { padding-top: calc(4 * var(--base-unit)); padding-bottom: calc(4 * var(--base-unit)); } 196 | .md-py5 { padding-top: calc(5 * var(--base-unit)); padding-bottom: calc(5 * var(--base-unit)); } 197 | .md-py6 { padding-top: calc(6 * var(--base-unit)); padding-bottom: calc(6 * var(--base-unit)); } 198 | } 199 | 200 | @media (--lg-viewport) { 201 | .lg-p0 { padding: 0; } 202 | .lg-pt0 { padding-top: 0; } 203 | .lg-pr0 { padding-right: 0; } 204 | .lg-pb0 { padding-bottom: 0; } 205 | .lg-pl0 { padding-left: 0; } 206 | 207 | .lg-p05 { padding: calc(.5 * var(--base-unit)); } 208 | .lg-pt05 { padding-top: calc(.5 * var(--base-unit)); } 209 | .lg-pr05 { padding-right: calc(.5 * var(--base-unit)); } 210 | .lg-pb05 { padding-bottom: calc(.5 * var(--base-unit)); } 211 | .lg-pl05 { padding-left: calc(.5 * var(--base-unit)); } 212 | 213 | .lg-p1 { padding: calc(1 * var(--base-unit)); } 214 | .lg-pt1 { padding-top: calc(1 * var(--base-unit)); } 215 | .lg-pr1 { padding-right: calc(1 * var(--base-unit)); } 216 | .lg-pb1 { padding-bottom: calc(1 * var(--base-unit)); } 217 | .lg-pl1 { padding-left: calc(1 * var(--base-unit)); } 218 | 219 | .lg-p2 { padding: calc(2 * var(--base-unit)); } 220 | .lg-pt2 { padding-top: calc(2 * var(--base-unit)); } 221 | .lg-pr2 { padding-right: calc(2 * var(--base-unit)); } 222 | .lg-pb2 { padding-bottom: calc(2 * var(--base-unit)); } 223 | .lg-pl2 { padding-left: calc(2 * var(--base-unit)); } 224 | 225 | .lg-p3 { padding: calc(3 * var(--base-unit)); } 226 | .lg-pt3 { padding-top: calc(3 * var(--base-unit)); } 227 | .lg-pr3 { padding-right: calc(3 * var(--base-unit)); } 228 | .lg-pb3 { padding-bottom: calc(3 * var(--base-unit)); } 229 | .lg-pl3 { padding-left: calc(3 * var(--base-unit)); } 230 | 231 | .lg-p4 { padding: calc(4 * var(--base-unit)); } 232 | .lg-pt4 { padding-top: calc(4 * var(--base-unit)); } 233 | .lg-pr4 { padding-right: calc(4 * var(--base-unit)); } 234 | .lg-pb4 { padding-bottom: calc(4 * var(--base-unit)); } 235 | .lg-pl4 { padding-left: calc(4 * var(--base-unit)); } 236 | 237 | .lg-p5 { padding: calc(5 * var(--base-unit)); } 238 | .lg-pt5 { padding-top: calc(5 * var(--base-unit)); } 239 | .lg-pr5 { padding-right: calc(5 * var(--base-unit)); } 240 | .lg-pb5 { padding-bottom: calc(5 * var(--base-unit)); } 241 | .lg-pl5 { padding-left: calc(5 * var(--base-unit)); } 242 | 243 | .lg-p6 { padding: calc(6 * var(--base-unit)); } 244 | .lg-pt6 { padding-top: calc(6 * var(--base-unit)); } 245 | .lg-pr6 { padding-right: calc(6 * var(--base-unit)); } 246 | .lg-pb6 { padding-bottom: calc(6 * var(--base-unit)); } 247 | .lg-pl6 { padding-left: calc(6 * var(--base-unit)); } 248 | 249 | .lg-px0 { padding-left: 0; padding-right: 0; } 250 | .lg-px1 { padding-left: calc(1 * var(--base-unit)); padding-right: calc(1 * var(--base-unit)); } 251 | .lg-px2 { padding-left: calc(2 * var(--base-unit)); padding-right: calc(2 * var(--base-unit)); } 252 | .lg-px3 { padding-left: calc(3 * var(--base-unit)); padding-right: calc(3 * var(--base-unit)); } 253 | .lg-px4 { padding-left: calc(4 * var(--base-unit)); padding-right: calc(4 * var(--base-unit)); } 254 | .lg-px5 { padding-left: calc(5 * var(--base-unit)); padding-right: calc(5 * var(--base-unit)); } 255 | .lg-px6 { padding-left: calc(6 * var(--base-unit)); padding-right: calc(6 * var(--base-unit)); } 256 | 257 | .lg-py0 { padding-top: 0; padding-bottom: 0; } 258 | .lg-py1 { padding-top: calc(1 * var(--base-unit)); padding-bottom: calc(1 * var(--base-unit)); } 259 | .lg-py2 { padding-top: calc(2 * var(--base-unit)); padding-bottom: calc(2 * var(--base-unit)); } 260 | .lg-py3 { padding-top: calc(3 * var(--base-unit)); padding-bottom: calc(3 * var(--base-unit)); } 261 | .lg-py4 { padding-top: calc(4 * var(--base-unit)); padding-bottom: calc(4 * var(--base-unit)); } 262 | .lg-py5 { padding-top: calc(5 * var(--base-unit)); padding-bottom: calc(5 * var(--base-unit)); } 263 | .lg-py6 { padding-top: calc(6 * var(--base-unit)); padding-bottom: calc(6 * var(--base-unit)); } 264 | } 265 | 266 | @media (--xl-viewport) { 267 | .xl-p0 { padding: 0; } 268 | .xl-pt0 { padding-top: 0; } 269 | .xl-pr0 { padding-right: 0; } 270 | .xl-pb0 { padding-bottom: 0; } 271 | .xl-pl0 { padding-left: 0; } 272 | 273 | .xl-p05 { padding: calc(.5 * var(--base-unit)); } 274 | .xl-pt05 { padding-top: calc(.5 * var(--base-unit)); } 275 | .xl-pr05 { padding-right: calc(.5 * var(--base-unit)); } 276 | .xl-pb05 { padding-bottom: calc(.5 * var(--base-unit)); } 277 | .xl-pl05 { padding-left: calc(.5 * var(--base-unit)); } 278 | 279 | .xl-p1 { padding: calc(1 * var(--base-unit)); } 280 | .xl-pt1 { padding-top: calc(1 * var(--base-unit)); } 281 | .xl-pr1 { padding-right: calc(1 * var(--base-unit)); } 282 | .xl-pb1 { padding-bottom: calc(1 * var(--base-unit)); } 283 | .xl-pl1 { padding-left: calc(1 * var(--base-unit)); } 284 | 285 | .xl-p2 { padding: calc(2 * var(--base-unit)); } 286 | .xl-pt2 { padding-top: calc(2 * var(--base-unit)); } 287 | .xl-pr2 { padding-right: calc(2 * var(--base-unit)); } 288 | .xl-pb2 { padding-bottom: calc(2 * var(--base-unit)); } 289 | .xl-pl2 { padding-left: calc(2 * var(--base-unit)); } 290 | 291 | .xl-p3 { padding: calc(3 * var(--base-unit)); } 292 | .xl-pt3 { padding-top: calc(3 * var(--base-unit)); } 293 | .xl-pr3 { padding-right: calc(3 * var(--base-unit)); } 294 | .xl-pb3 { padding-bottom: calc(3 * var(--base-unit)); } 295 | .xl-pl3 { padding-left: calc(3 * var(--base-unit)); } 296 | 297 | .xl-p4 { padding: calc(4 * var(--base-unit)); } 298 | .xl-pt4 { padding-top: calc(4 * var(--base-unit)); } 299 | .xl-pr4 { padding-right: calc(4 * var(--base-unit)); } 300 | .xl-pb4 { padding-bottom: calc(4 * var(--base-unit)); } 301 | .xl-pl4 { padding-left: calc(4 * var(--base-unit)); } 302 | 303 | .xl-p5 { padding: calc(5 * var(--base-unit)); } 304 | .xl-pt5 { padding-top: calc(5 * var(--base-unit)); } 305 | .xl-pr5 { padding-right: calc(5 * var(--base-unit)); } 306 | .xl-pb5 { padding-bottom: calc(5 * var(--base-unit)); } 307 | .xl-pl5 { padding-left: calc(5 * var(--base-unit)); } 308 | 309 | .xl-p6 { padding: calc(6 * var(--base-unit)); } 310 | .xl-pt6 { padding-top: calc(6 * var(--base-unit)); } 311 | .xl-pr6 { padding-right: calc(6 * var(--base-unit)); } 312 | .xl-pb6 { padding-bottom: calc(6 * var(--base-unit)); } 313 | .xl-pl6 { padding-left: calc(6 * var(--base-unit)); } 314 | 315 | .xl-px0 { padding-left: 0; padding-right: 0; } 316 | .xl-px1 { padding-left: calc(1 * var(--base-unit)); padding-right: calc(1 * var(--base-unit)); } 317 | .xl-px2 { padding-left: calc(2 * var(--base-unit)); padding-right: calc(2 * var(--base-unit)); } 318 | .xl-px3 { padding-left: calc(3 * var(--base-unit)); padding-right: calc(3 * var(--base-unit)); } 319 | .xl-px4 { padding-left: calc(4 * var(--base-unit)); padding-right: calc(4 * var(--base-unit)); } 320 | .xl-px5 { padding-left: calc(5 * var(--base-unit)); padding-right: calc(5 * var(--base-unit)); } 321 | .xl-px6 { padding-left: calc(6 * var(--base-unit)); padding-right: calc(6 * var(--base-unit)); } 322 | 323 | .xl-py0 { padding-top: 0; padding-bottom: 0; } 324 | .xl-py1 { padding-top: calc(1 * var(--base-unit)); padding-bottom: calc(1 * var(--base-unit)); } 325 | .xl-py2 { padding-top: calc(2 * var(--base-unit)); padding-bottom: calc(2 * var(--base-unit)); } 326 | .xl-py3 { padding-top: calc(3 * var(--base-unit)); padding-bottom: calc(3 * var(--base-unit)); } 327 | .xl-py4 { padding-top: calc(4 * var(--base-unit)); padding-bottom: calc(4 * var(--base-unit)); } 328 | .xl-py5 { padding-top: calc(5 * var(--base-unit)); padding-bottom: calc(5 * var(--base-unit)); } 329 | .xl-py6 { padding-top: calc(6 * var(--base-unit)); padding-bottom: calc(6 * var(--base-unit)); } 330 | } 331 | -------------------------------------------------------------------------------- /src/paddings.css: -------------------------------------------------------------------------------- 1 | 2 | .p0 { padding: 0; } 3 | .pt0 { padding-top: 0; } 4 | .pr0 { padding-right: 0; } 5 | .pb0 { padding-bottom: 0; } 6 | .pl0 { padding-left: 0; } 7 | .px0 { padding-left: 0; padding-right: 0; } 8 | .py0 { padding-top: 0; padding-bottom: 0; } 9 | 10 | .p05 { padding: calc(.5 * var(--base-unit)); } 11 | .pt05 { padding-top: calc(.5 * var(--base-unit)); } 12 | .pr05 { padding-right: calc(.5 * var(--base-unit)); } 13 | .pb05 { padding-bottom: calc(.5 * var(--base-unit)); } 14 | .pl05 { padding-left: calc(.5 * var(--base-unit)); } 15 | .px05 { padding-left: calc(.5 * var(--base-unit)); padding-right: calc(.5 * var(--base-unit)); } 16 | .py05 { padding-top: calc(.5 * var(--base-unit)); padding-bottom: calc(.5 * var(--base-unit)); } 17 | 18 | .p1 { padding: calc(1 * var(--base-unit)); } 19 | .pt1 { padding-top: calc(1 * var(--base-unit)); } 20 | .pr1 { padding-right: calc(1 * var(--base-unit)); } 21 | .pb1 { padding-bottom: calc(1 * var(--base-unit)); } 22 | .pl1 { padding-left: calc(1 * var(--base-unit)); } 23 | .px1 { padding-left: calc(1 * var(--base-unit)); padding-right: calc(1 * var(--base-unit)); } 24 | .py1 { padding-top: calc(1 * var(--base-unit)); padding-bottom: calc(1 * var(--base-unit)); } 25 | 26 | .p2 { padding: calc(2 * var(--base-unit)); } 27 | .pt2 { padding-top: calc(2 * var(--base-unit)); } 28 | .pr2 { padding-right: calc(2 * var(--base-unit)); } 29 | .pb2 { padding-bottom: calc(2 * var(--base-unit)); } 30 | .pl2 { padding-left: calc(2 * var(--base-unit)); } 31 | .px2 { padding-left: calc(2 * var(--base-unit)); padding-right: calc(2 * var(--base-unit)); } 32 | .py2 { padding-top: calc(2 * var(--base-unit)); padding-bottom: calc(2 * var(--base-unit)); } 33 | 34 | .p3 { padding: calc(3 * var(--base-unit)); } 35 | .pt3 { padding-top: calc(3 * var(--base-unit)); } 36 | .pr3 { padding-right: calc(3 * var(--base-unit)); } 37 | .pb3 { padding-bottom: calc(3 * var(--base-unit)); } 38 | .pl3 { padding-left: calc(3 * var(--base-unit)); } 39 | .px3 { padding-left: calc(3 * var(--base-unit)); padding-right: calc(3 * var(--base-unit)); } 40 | .py3 { padding-top: calc(3 * var(--base-unit)); padding-bottom: calc(3 * var(--base-unit)); } 41 | 42 | .p4 { padding: calc(4 * var(--base-unit)); } 43 | .pt4 { padding-top: calc(4 * var(--base-unit)); } 44 | .pr4 { padding-right: calc(4 * var(--base-unit)); } 45 | .pb4 { padding-bottom: calc(4 * var(--base-unit)); } 46 | .pl4 { padding-left: calc(4 * var(--base-unit)); } 47 | .px4 { padding-left: calc(4 * var(--base-unit)); padding-right: calc(4 * var(--base-unit)); } 48 | .py4 { padding-top: calc(4 * var(--base-unit)); padding-bottom: calc(4 * var(--base-unit)); } 49 | 50 | .p5 { padding: calc(5 * var(--base-unit)); } 51 | .pt5 { padding-top: calc(5 * var(--base-unit)); } 52 | .pr5 { padding-right: calc(5 * var(--base-unit)); } 53 | .pb5 { padding-bottom: calc(5 * var(--base-unit)); } 54 | .pl5 { padding-left: calc(5 * var(--base-unit)); } 55 | .px5 { padding-left: calc(5 * var(--base-unit)); padding-right: calc(5 * var(--base-unit)); } 56 | .py5 { padding-top: calc(5 * var(--base-unit)); padding-bottom: calc(5 * var(--base-unit)); } 57 | 58 | .p6 { padding: calc(6 * var(--base-unit)); } 59 | .pt6 { padding-top: calc(6 * var(--base-unit)); } 60 | .pr6 { padding-right: calc(6 * var(--base-unit)); } 61 | .pb6 { padding-bottom: calc(6 * var(--base-unit)); } 62 | .pl6 { padding-left: calc(6 * var(--base-unit)); } 63 | .px6 { padding-left: calc(6 * var(--base-unit)); padding-right: calc(6 * var(--base-unit)); } 64 | .py6 { padding-top: calc(6 * var(--base-unit)); padding-bottom: calc(6 * var(--base-unit)); } 65 | -------------------------------------------------------------------------------- /src/position-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (--xs-viewport) { 3 | .xs-relative { position: relative; } 4 | .xs-absolute { position: absolute; } 5 | .xs-fixed { position: fixed; } 6 | 7 | .xs-t0 { top: 0; } 8 | .xs-r0 { right: 0; } 9 | .xs-l0 { left: 0; } 10 | .xs-b0 { bottom: 0; } 11 | 12 | .xs-t1 { top: calc(1 * var(--base-unit)); } 13 | .xs-r1 { right: calc(1 * var(--base-unit)); } 14 | .xs-l1 { left: calc(1 * var(--base-unit)); } 15 | .xs-b1 { bottom: calc(1 * var(--base-unit)); } 16 | 17 | .xs-tn1 { top: calc(-1 * var(--base-unit)); } 18 | .xs-rn1 { right: calc(-1 * var(--base-unit)); } 19 | .xs-ln1 { left: calc(-1 * var(--base-unit)); } 20 | .xs-bn1 { bottom: calc(-1 * var(--base-unit)); } 21 | 22 | .xs-t100 { top: 100%; } 23 | .xs-b100 { bottom: 100%; } 24 | .xs-r100 { right: 100%; } 25 | .xs-l100 { left: 100%; } 26 | 27 | .xs-t50 { top: 50%; } 28 | .xs-b50 { bottom: 50%; } 29 | .xs-r50 { right: 50%; } 30 | .xs-l50 { left: 50%; } 31 | 32 | .xs-t25 { top: 25%; } 33 | .xs-b25 { bottom: 25%; } 34 | .xs-r25 { right: 25%; } 35 | .xs-l25 { left: 25%; } 36 | 37 | .xs-t33 { top: 33%; } 38 | .xs-b33 { bottom: 33%; } 39 | .xs-r33 { right: 33%; } 40 | .xs-l33 { left: 33%; } 41 | } 42 | 43 | @media (--sm-viewport) { 44 | .sm-relative { position: relative; } 45 | .sm-absolute { position: absolute; } 46 | .sm-fixed { position: fixed; } 47 | 48 | .sm-t0 { top: 0; } 49 | .sm-r0 { right: 0; } 50 | .sm-l0 { left: 0; } 51 | .sm-b0 { bottom: 0; } 52 | 53 | .sm-t1 { top: calc(1 * var(--base-unit)); } 54 | .sm-r1 { right: calc(1 * var(--base-unit)); } 55 | .sm-l1 { left: calc(1 * var(--base-unit)); } 56 | .sm-b1 { bottom: calc(1 * var(--base-unit)); } 57 | 58 | .sm-tn1 { top: calc(-1 * var(--base-unit)); } 59 | .sm-rn1 { right: calc(-1 * var(--base-unit)); } 60 | .sm-ln1 { left: calc(-1 * var(--base-unit)); } 61 | .sm-bn1 { bottom: calc(-1 * var(--base-unit)); } 62 | 63 | .sm-t100 { top: 100%; } 64 | .sm-b100 { bottom: 100%; } 65 | .sm-r100 { right: 100%; } 66 | .sm-l100 { left: 100%; } 67 | 68 | .sm-t50 { top: 50%; } 69 | .sm-b50 { bottom: 50%; } 70 | .sm-r50 { right: 50%; } 71 | .sm-l50 { left: 50%; } 72 | 73 | .sm-t25 { top: 25%; } 74 | .sm-b25 { bottom: 25%; } 75 | .sm-r25 { right: 25%; } 76 | .sm-l25 { left: 25%; } 77 | 78 | .sm-t33 { top: 33%; } 79 | .sm-b33 { bottom: 33%; } 80 | .sm-r33 { right: 33%; } 81 | .sm-l33 { left: 33%; } 82 | } 83 | 84 | @media (--md-viewport) { 85 | .md-relative { position: relative; } 86 | .md-absolute { position: absolute; } 87 | .md-fixed { position: fixed; } 88 | 89 | .md-t0 { top: 0; } 90 | .md-r0 { right: 0; } 91 | .md-l0 { left: 0; } 92 | .md-b0 { bottom: 0; } 93 | 94 | .md-t1 { top: calc(1 * var(--base-unit)); } 95 | .md-r1 { right: calc(1 * var(--base-unit)); } 96 | .md-l1 { left: calc(1 * var(--base-unit)); } 97 | .md-b1 { bottom: calc(1 * var(--base-unit)); } 98 | 99 | .md-tn1 { top: calc(-1 * var(--base-unit)); } 100 | .md-rn1 { right: calc(-1 * var(--base-unit)); } 101 | .md-ln1 { left: calc(-1 * var(--base-unit)); } 102 | .md-bn1 { bottom: calc(-1 * var(--base-unit)); } 103 | 104 | .md-t100 { top: 100%; } 105 | .md-b100 { bottom: 100%; } 106 | .md-r100 { right: 100%; } 107 | .md-l100 { left: 100%; } 108 | 109 | .md-t50 { top: 50%; } 110 | .md-b50 { bottom: 50%; } 111 | .md-r50 { right: 50%; } 112 | .md-l50 { left: 50%; } 113 | 114 | .md-t25 { top: 25%; } 115 | .md-b25 { bottom: 25%; } 116 | .md-r25 { right: 25%; } 117 | .md-l25 { left: 25%; } 118 | 119 | .md-t33 { top: 33%; } 120 | .md-b33 { bottom: 33%; } 121 | .md-r33 { right: 33%; } 122 | .md-l33 { left: 33%; } 123 | } 124 | 125 | @media (--lg-viewport) { 126 | .lg-relative { position: relative; } 127 | .lg-absolute { position: absolute; } 128 | .lg-fixed { position: fixed; } 129 | 130 | .lg-t0 { top: 0; } 131 | .lg-r0 { right: 0; } 132 | .lg-l0 { left: 0; } 133 | .lg-b0 { bottom: 0; } 134 | 135 | .lg-t1 { top: calc(1 * var(--base-unit)); } 136 | .lg-r1 { right: calc(1 * var(--base-unit)); } 137 | .lg-l1 { left: calc(1 * var(--base-unit)); } 138 | .lg-b1 { bottom: calc(1 * var(--base-unit)); } 139 | 140 | .lg-tn1 { top: calc(-1 * var(--base-unit)); } 141 | .lg-rn1 { right: calc(-1 * var(--base-unit)); } 142 | .lg-ln1 { left: calc(-1 * var(--base-unit)); } 143 | .lg-bn1 { bottom: calc(-1 * var(--base-unit)); } 144 | 145 | .lg-t100 { top: 100%; } 146 | .lg-b100 { bottom: 100%; } 147 | .lg-r100 { right: 100%; } 148 | .lg-l100 { left: 100%; } 149 | 150 | .lg-t50 { top: 50%; } 151 | .lg-b50 { bottom: 50%; } 152 | .lg-r50 { right: 50%; } 153 | .lg-l50 { left: 50%; } 154 | 155 | .lg-t25 { top: 25%; } 156 | .lg-b25 { bottom: 25%; } 157 | .lg-r25 { right: 25%; } 158 | .lg-l25 { left: 25%; } 159 | 160 | .lg-t33 { top: 33%; } 161 | .lg-b33 { bottom: 33%; } 162 | .lg-r33 { right: 33%; } 163 | .lg-l33 { left: 33%; } 164 | } 165 | 166 | @media (--xl-viewport) { 167 | .xl-relative { position: relative; } 168 | .xl-absolute { position: absolute; } 169 | .xl-fixed { position: fixed; } 170 | 171 | .xl-t0 { top: 0; } 172 | .xl-r0 { right: 0; } 173 | .xl-l0 { left: 0; } 174 | .xl-b0 { bottom: 0; } 175 | 176 | .xl-t1 { top: calc(1 * var(--base-unit)); } 177 | .xl-r1 { right: calc(1 * var(--base-unit)); } 178 | .xl-l1 { left: calc(1 * var(--base-unit)); } 179 | .xl-b1 { bottom: calc(1 * var(--base-unit)); } 180 | 181 | .xl-tn1 { top: calc(-1 * var(--base-unit)); } 182 | .xl-rn1 { right: calc(-1 * var(--base-unit)); } 183 | .xl-ln1 { left: calc(-1 * var(--base-unit)); } 184 | .xl-bn1 { bottom: calc(-1 * var(--base-unit)); } 185 | 186 | .xl-t100 { top: 100%; } 187 | .xl-b100 { bottom: 100%; } 188 | .xl-r100 { right: 100%; } 189 | .xl-l100 { left: 100%; } 190 | 191 | .xl-t50 { top: 50%; } 192 | .xl-b50 { bottom: 50%; } 193 | .xl-r50 { right: 50%; } 194 | .xl-l50 { left: 50%; } 195 | 196 | .xl-t25 { top: 25%; } 197 | .xl-b25 { bottom: 25%; } 198 | .xl-r25 { right: 25%; } 199 | .xl-l25 { left: 25%; } 200 | 201 | .xl-t33 { top: 33%; } 202 | .xl-b33 { bottom: 33%; } 203 | .xl-r33 { right: 33%; } 204 | .xl-l33 { left: 33%; } 205 | } 206 | -------------------------------------------------------------------------------- /src/position.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Position 4 | * 5 | */ 6 | .relative { position: relative; } 7 | .absolute { position: absolute; } 8 | .fixed { position: fixed; } 9 | 10 | .t0 { top: 0; } 11 | .r0 { right: 0; } 12 | .l0 { left: 0; } 13 | .b0 { bottom: 0; } 14 | 15 | .t1 { top: calc(1 * var(--base-unit)); } 16 | .r1 { right: calc(1 * var(--base-unit)); } 17 | .l1 { left: calc(1 * var(--base-unit)); } 18 | .b1 { bottom: calc(1 * var(--base-unit)); } 19 | 20 | .tn1 { top: calc(-1 * var(--base-unit)); } 21 | .rn1 { right: calc(-1 * var(--base-unit)); } 22 | .ln1 { left: calc(-1 * var(--base-unit)); } 23 | .bn1 { bottom: calc(-1 * var(--base-unit)); } 24 | 25 | .t100 { top: 100%; } 26 | .b100 { bottom: 100%; } 27 | .r100 { right: 100%; } 28 | .l100 { left: 100%; } 29 | 30 | .t50 { top: 50%; } 31 | .b50 { bottom: 50%; } 32 | .r50 { right: 50%; } 33 | .l50 { left: 50%; } 34 | 35 | .t25 { top: 25%; } 36 | .b25 { bottom: 25%; } 37 | .r25 { right: 25%; } 38 | .l25 { left: 25%; } 39 | 40 | .t33 { top: 33%; } 41 | .b33 { bottom: 33%; } 42 | .r33 { right: 33%; } 43 | .l33 { left: 33%; } 44 | -------------------------------------------------------------------------------- /src/ratios-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (--xs-viewport) { 3 | .xs-ratio-2-1 { height: 0; padding-bottom: 50%; } 4 | .xs-ratio-16-9 { height: 0; padding-bottom: 56.25%; } 5 | .xs-ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 6 | .xs-ratio-4-3 { height: 0; padding-bottom: 75%; } 7 | .xs-ratio-1-1 { height: 0; padding-bottom: 100%; } 8 | 9 | .xs-ratio-1-2 { height: 0; padding-bottom: 200%; } 10 | .xs-ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 11 | .xs-ratio-2-3 { height: 0; padding-bottom: 150%; } 12 | .xs-ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 13 | } 14 | 15 | @media (--sm-viewport) { 16 | .sm-ratio-2-1 { height: 0; padding-bottom: 50%; } 17 | .sm-ratio-16-9 { height: 0; padding-bottom: 56.25%; } 18 | .sm-ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 19 | .sm-ratio-4-3 { height: 0; padding-bottom: 75%; } 20 | .sm-ratio-1-1 { height: 0; padding-bottom: 100%; } 21 | 22 | .sm-ratio-1-2 { height: 0; padding-bottom: 200%; } 23 | .sm-ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 24 | .sm-ratio-2-3 { height: 0; padding-bottom: 150%; } 25 | .sm-ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 26 | } 27 | 28 | @media (--md-viewport) { 29 | .md-ratio-2-1 { height: 0; padding-bottom: 50%; } 30 | .md-ratio-16-9 { height: 0; padding-bottom: 56.25%; } 31 | .md-ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 32 | .md-ratio-4-3 { height: 0; padding-bottom: 75%; } 33 | .md-ratio-1-1 { height: 0; padding-bottom: 100%; } 34 | 35 | .md-ratio-1-2 { height: 0; padding-bottom: 200%; } 36 | .md-ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 37 | .md-ratio-2-3 { height: 0; padding-bottom: 150%; } 38 | .md-ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 39 | } 40 | 41 | @media (--lg-viewport) { 42 | .lg-ratio-2-1 { height: 0; padding-bottom: 50%; } 43 | .lg-ratio-16-9 { height: 0; padding-bottom: 56.25%; } 44 | .lg-ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 45 | .lg-ratio-4-3 { height: 0; padding-bottom: 75%; } 46 | .lg-ratio-1-1 { height: 0; padding-bottom: 100%; } 47 | 48 | .lg-ratio-1-2 { height: 0; padding-bottom: 200%; } 49 | .lg-ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 50 | .lg-ratio-2-3 { height: 0; padding-bottom: 150%; } 51 | .lg-ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 52 | } 53 | 54 | @media (--xl-viewport) { 55 | .xl-ratio-2-1 { height: 0; padding-bottom: 50%; } 56 | .xl-ratio-16-9 { height: 0; padding-bottom: 56.25%; } 57 | .xl-ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 58 | .xl-ratio-4-3 { height: 0; padding-bottom: 75%; } 59 | .xl-ratio-1-1 { height: 0; padding-bottom: 100%; } 60 | 61 | .xl-ratio-1-2 { height: 0; padding-bottom: 200%; } 62 | .xl-ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 63 | .xl-ratio-2-3 { height: 0; padding-bottom: 150%; } 64 | .xl-ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 65 | } 66 | -------------------------------------------------------------------------------- /src/ratios.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Ratios 4 | * 5 | */ 6 | 7 | .ratio-2-1 { height: 0; padding-bottom: 50%; } 8 | .ratio-16-9 { height: 0; padding-bottom: 56.25%; } 9 | .ratio-3-2 { height: 0; padding-bottom: 66.666666%; } 10 | .ratio-4-3 { height: 0; padding-bottom: 75%; } 11 | .ratio-1-1 { height: 0; padding-bottom: 100%; } 12 | 13 | .ratio-1-2 { height: 0; padding-bottom: 200%; } 14 | .ratio-9-16 { height: 0; padding-bottom: 177.777777%; } 15 | .ratio-2-3 { height: 0; padding-bottom: 150%; } 16 | .ratio-3-4 { height: 0; padding-bottom: 133.333333%; } 17 | -------------------------------------------------------------------------------- /src/shadows-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (--xs-viewport) { 3 | .xs-shadow-0 { 4 | box-shadow: none; 5 | } 6 | 7 | .xs-shadow-1 { 8 | box-shadow: 0 calc(2 * var(--one)) calc(4 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 9 | } 10 | 11 | .xs-shadow-2 { 12 | box-shadow: 0 calc(2 * var(--one)) calc(8 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 13 | } 14 | 15 | .xs-shadow-3 { 16 | box-shadow: 0 calc(2 * var(--one)) calc(16 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 17 | } 18 | 19 | .xs-shadow-4 { 20 | box-shadow: 0 calc(3 * var(--one)) calc(24 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 21 | } 22 | } 23 | 24 | @media (--sm-viewport) { 25 | .sm-shadow-0 { 26 | box-shadow: none; 27 | } 28 | 29 | .sm-shadow-1 { 30 | box-shadow: 0 calc(2 * var(--one)) calc(4 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 31 | } 32 | 33 | .sm-shadow-2 { 34 | box-shadow: 0 calc(2 * var(--one)) calc(8 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 35 | } 36 | 37 | .sm-shadow-3 { 38 | box-shadow: 0 calc(2 * var(--one)) calc(16 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 39 | } 40 | 41 | .sm-shadow-4 { 42 | box-shadow: 0 calc(3 * var(--one)) calc(24 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 43 | } 44 | } 45 | 46 | @media (--md-viewport) { 47 | .md-shadow-0 { 48 | box-shadow: none; 49 | } 50 | 51 | .md-shadow-1 { 52 | box-shadow: 0 calc(2 * var(--one)) calc(4 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 53 | } 54 | 55 | .md-shadow-2 { 56 | box-shadow: 0 calc(2 * var(--one)) calc(8 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 57 | } 58 | 59 | .md-shadow-3 { 60 | box-shadow: 0 calc(2 * var(--one)) calc(16 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 61 | } 62 | 63 | .md-shadow-4 { 64 | box-shadow: 0 calc(3 * var(--one)) calc(24 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 65 | } 66 | } 67 | 68 | @media (--lg-viewport) { 69 | .lg-shadow-0 { 70 | box-shadow: none; 71 | } 72 | 73 | .lg-shadow-1 { 74 | box-shadow: 0 calc(2 * var(--one)) calc(4 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 75 | } 76 | 77 | .lg-shadow-2 { 78 | box-shadow: 0 calc(2 * var(--one)) calc(8 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 79 | } 80 | 81 | .lg-shadow-3 { 82 | box-shadow: 0 calc(2 * var(--one)) calc(16 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 83 | } 84 | 85 | .lg-shadow-4 { 86 | box-shadow: 0 calc(3 * var(--one)) calc(24 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 87 | } 88 | } 89 | 90 | @media (--xl-viewport) { 91 | .xl-shadow-0 { 92 | box-shadow: none; 93 | } 94 | 95 | .xl-shadow-1 { 96 | box-shadow: 0 calc(2 * var(--one)) calc(4 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 97 | } 98 | 99 | .xl-shadow-2 { 100 | box-shadow: 0 calc(2 * var(--one)) calc(8 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 101 | } 102 | 103 | .xl-shadow-3 { 104 | box-shadow: 0 calc(2 * var(--one)) calc(16 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 105 | } 106 | 107 | .xl-shadow-4 { 108 | box-shadow: 0 calc(3 * var(--one)) calc(24 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /src/shadows.css: -------------------------------------------------------------------------------- 1 | 2 | .shadow-0 { 3 | box-shadow: none; 4 | } 5 | 6 | .shadow-1 { 7 | box-shadow: 0 calc(2 * var(--one)) calc(4 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 8 | } 9 | 10 | .shadow-2 { 11 | box-shadow: 0 calc(2 * var(--one)) calc(8 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 12 | } 13 | 14 | .shadow-3 { 15 | box-shadow: 0 calc(2 * var(--one)) calc(16 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 16 | } 17 | 18 | .shadow-4 { 19 | box-shadow: 0 calc(3 * var(--one)) calc(24 * var(--one)) 0 rgba(0, 0, 0, var(--shadow-dark)); 20 | } 21 | -------------------------------------------------------------------------------- /src/styleVariables.js: -------------------------------------------------------------------------------- 1 | 2 | const one = 0.0625 3 | 4 | const colors = { 5 | "color-red-500": "#F44336", 6 | "color-red-700": "#D32F2F", 7 | "color-pink-500": "#E91E63", 8 | "color-pink-700": "#C2185B", 9 | "color-purple-500": "#9C27B0", 10 | "color-purple-700": "#7B1FA2", 11 | "color-indigo-500": "#3F51B5", 12 | "color-indigo-700": "#303F9F", 13 | "color-blue-500": "#2196F3", 14 | "color-blue-700": "#1976D2", 15 | "color-light-blue-500": "#03A9F4", 16 | "color-light-blue-700": "#0288D1", 17 | "color-cyan-500": "#00BCD4", 18 | "color-cyan-700": "#0097A7", 19 | "color-teal-500": "#009688", 20 | "color-teal-700": "#00796B", 21 | "color-green-500": "#4CAF50", 22 | "color-green-700": "#388E3C", 23 | "color-light-green-500": "#8BC34A", 24 | "color-light-green-700": "#689F38", 25 | "color-lime-500": "#CDDC39", 26 | "color-lime-700": "#AFB42B", 27 | "color-yellow-500": "#FFEB3B", 28 | "color-yellow-700": "#FBC02D", 29 | "color-amber-500": "#FFC107", 30 | "color-amber-700": "#FFA000", 31 | "color-orange-500": "#FF9800", 32 | "color-orange-700": "#F57C00", 33 | "color-deep-orange-500": "#FF5722", 34 | "color-deep-orange-700": "#E64A19", 35 | "color-brown-500": "#795548", 36 | "color-brown-700": "#5D4037", 37 | "color-grey-100": "#F5F5F5", 38 | "color-grey-200": "#EEEEEE", 39 | "color-grey-300": "#E0E0E0", 40 | "color-grey-400": "#BDBDBD", 41 | "color-grey-500": "#9E9E9E", 42 | "color-grey-600": "#757575", 43 | "color-grey-700": "#616161", 44 | "color-grey-800": "#424242", 45 | "color-grey-900": "#212121", 46 | "color-white": "#FFFFFF", 47 | "color-black": "#000000", 48 | } 49 | 50 | const coreVars = { 51 | "sans-serif": "\"Roboto\", sans-serif", 52 | "one": `${one}rem`, 53 | "one-relative": `${one}em`, 54 | "base-font-size": "1rem", 55 | "base-unit": "1rem", 56 | "base-space": "1rem", 57 | "base-line-height": 1.5, 58 | "small-line-height": 1.25, 59 | "font-size-0": `${13 * one}rem`, 60 | "font-size-1": `${16 * one}rem`, 61 | "font-size-2": `${20 * one}rem`, 62 | "font-size-3": `${24 * one}rem`, 63 | "font-size-4": `${32 * one}rem`, 64 | "font-size-5": `${44 * one}rem`, 65 | "font-size-6": `${56 * one}rem`, 66 | "font-size-7": `${64 * one}rem`, 67 | "font-size-8": `${72 * one}rem`, 68 | "font-size-9": `${96 * one}rem`, 69 | "text-color-base": colors["color-grey-900"], 70 | "color-primary": colors["color-pink-500"], 71 | "color-primary-contrast": colors["color-white"], 72 | "color-secondary": colors["color-grey-200"], 73 | "color-secondary-contrast": colors["color-grey-900"], 74 | "text-select-bg": colors["color-pink-500"], 75 | "text-select-color": colors["color-white"], 76 | "shadow-light": 0.08, 77 | "shadow-medium": 0.12, 78 | "shadow-dark": 0.16, 79 | } 80 | 81 | const variables = Object.assign({}, colors, coreVars) 82 | 83 | module.exports = variables 84 | -------------------------------------------------------------------------------- /src/typography-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (--xs-viewport) { 3 | .xs-text-0 { font-size: var(--font-size-0); } 4 | .xs-text-1 { font-size: var(--font-size-1); } 5 | .xs-text-2 { font-size: var(--font-size-2); } 6 | .xs-text-3 { font-size: var(--font-size-3); } 7 | .xs-text-4 { font-size: var(--font-size-4); } 8 | .xs-text-5 { font-size: var(--font-size-5); } 9 | .xs-text-6 { font-size: var(--font-size-6); } 10 | .xs-text-7 { font-size: var(--font-size-7); } 11 | .xs-text-8 { font-size: var(--font-size-8); } 12 | .xs-text-9 { font-size: var(--font-size-9); } 13 | 14 | .xs-lh-1 { line-height: 1; } 15 | .xs-lh-base { line-height: var(--base-line-height); } 16 | .xs-lh-small { line-height: var(--small-line-height); } 17 | 18 | .xs-strong { font-weight: 700; } 19 | .xs-regular { font-weight: 400; } 20 | .xs-light { font-weight: 300; } 21 | .xs-italic { font-style: italic; } 22 | 23 | .xs-uppercase { text-transform: uppercase; } 24 | .xs-lowercase { text-transform: lowercase; } 25 | .xs-capitalized { text-transform: capitalize; } 26 | 27 | .xs-underline { text-decoration: underline; } 28 | .xs-line-through { text-decoration: line-through; } 29 | 30 | .xs-text-left, 31 | .xs-align-left { text-align: left; } 32 | .xs-text-right, 33 | .xs-align-right { text-align: right; } 34 | .xs-text-center, 35 | .xs-align-center { text-align: center; } 36 | } 37 | 38 | @media (--sm-viewport) { 39 | .sm-text-0 { font-size: var(--font-size-0); } 40 | .sm-text-1 { font-size: var(--font-size-1); } 41 | .sm-text-2 { font-size: var(--font-size-2); } 42 | .sm-text-3 { font-size: var(--font-size-3); } 43 | .sm-text-4 { font-size: var(--font-size-4); } 44 | .sm-text-5 { font-size: var(--font-size-5); } 45 | .sm-text-6 { font-size: var(--font-size-6); } 46 | .sm-text-7 { font-size: var(--font-size-7); } 47 | .sm-text-8 { font-size: var(--font-size-8); } 48 | .sm-text-9 { font-size: var(--font-size-9); } 49 | 50 | .sm-lh-1 { line-height: 1; } 51 | .sm-lh-base { line-height: var(--base-line-height); } 52 | .sm-lh-small { line-height: var(--small-line-height); } 53 | 54 | .sm-strong { font-weight: 700; } 55 | .sm-regular { font-weight: 400; } 56 | .sm-light { font-weight: 300; } 57 | .sm-italic { font-style: italic; } 58 | 59 | .sm-uppercase { text-transform: uppercase; } 60 | .sm-lowercase { text-transform: lowercase; } 61 | .sm-capitalized { text-transform: capitalize; } 62 | 63 | .sm-underline { text-decoration: underline; } 64 | .sm-line-through { text-decoration: line-through; } 65 | 66 | .sm-text-left, 67 | .sm-align-left { text-align: left; } 68 | .sm-text-right, 69 | .sm-align-right { text-align: right; } 70 | .sm-text-center, 71 | .sm-align-center { text-align: center; } 72 | 73 | } 74 | @media (--md-viewport) { 75 | .md-text-0 { font-size: var(--font-size-0); } 76 | .md-text-1 { font-size: var(--font-size-1); } 77 | .md-text-2 { font-size: var(--font-size-2); } 78 | .md-text-3 { font-size: var(--font-size-3); } 79 | .md-text-4 { font-size: var(--font-size-4); } 80 | .md-text-5 { font-size: var(--font-size-5); } 81 | .md-text-6 { font-size: var(--font-size-6); } 82 | .md-text-7 { font-size: var(--font-size-7); } 83 | .md-text-8 { font-size: var(--font-size-8); } 84 | .md-text-9 { font-size: var(--font-size-9); } 85 | 86 | .md-lh-1 { line-height: 1; } 87 | .md-lh-base { line-height: var(--base-line-height); } 88 | .md-lh-small { line-height: var(--small-line-height); } 89 | 90 | .md-strong { font-weight: 700; } 91 | .md-regular { font-weight: 400; } 92 | .md-light { font-weight: 300; } 93 | .md-italic { font-style: italic; } 94 | 95 | .md-uppercase { text-transform: uppercase; } 96 | .md-lowercase { text-transform: lowercase; } 97 | .md-capitalized { text-transform: capitalize; } 98 | 99 | .md-underline { text-decoration: underline; } 100 | .md-line-through { text-decoration: line-through; } 101 | 102 | .md-text-left, 103 | .md-align-left { text-align: left; } 104 | .md-text-right, 105 | .md-align-right { text-align: right; } 106 | .md-text-center, 107 | .md-align-center { text-align: center; } 108 | } 109 | 110 | @media (--lg-viewport) { 111 | .lg-text-0 { font-size: var(--font-size-0); } 112 | .lg-text-1 { font-size: var(--font-size-1); } 113 | .lg-text-2 { font-size: var(--font-size-2); } 114 | .lg-text-3 { font-size: var(--font-size-3); } 115 | .lg-text-4 { font-size: var(--font-size-4); } 116 | .lg-text-5 { font-size: var(--font-size-5); } 117 | .lg-text-6 { font-size: var(--font-size-6); } 118 | .lg-text-7 { font-size: var(--font-size-7); } 119 | .lg-text-8 { font-size: var(--font-size-8); } 120 | .lg-text-9 { font-size: var(--font-size-9); } 121 | 122 | .lg-lh-1 { line-height: 1; } 123 | .lg-lh-base { line-height: var(--base-line-height); } 124 | .lg-lh-small { line-height: var(--small-line-height); } 125 | 126 | .lg-strong { font-weight: 700; } 127 | .lg-regular { font-weight: 400; } 128 | .lg-light { font-weight: 300; } 129 | .lg-italic { font-style: italic; } 130 | 131 | .lg-uppercase { text-transform: uppercase; } 132 | .lg-lowercase { text-transform: lowercase; } 133 | .lg-capitalized { text-transform: capitalize; } 134 | 135 | .lg-underline { text-decoration: underline; } 136 | .lg-line-through { text-decoration: line-through; } 137 | 138 | .lg-text-left, 139 | .lg-align-left { text-align: left; } 140 | .lg-text-right, 141 | .lg-align-right { text-align: right; } 142 | .lg-text-center, 143 | .lg-align-center { text-align: center; } 144 | } 145 | 146 | @media (--xl-viewport) { 147 | .xl-text-0 { font-size: var(--font-size-0); } 148 | .xl-text-1 { font-size: var(--font-size-1); } 149 | .xl-text-2 { font-size: var(--font-size-2); } 150 | .xl-text-3 { font-size: var(--font-size-3); } 151 | .xl-text-4 { font-size: var(--font-size-4); } 152 | .xl-text-5 { font-size: var(--font-size-5); } 153 | .xl-text-6 { font-size: var(--font-size-6); } 154 | .xl-text-7 { font-size: var(--font-size-7); } 155 | .xl-text-8 { font-size: var(--font-size-8); } 156 | .xl-text-9 { font-size: var(--font-size-9); } 157 | 158 | .xl-lh-1 { line-height: 1; } 159 | .xl-lh-base { line-height: var(--base-line-height); } 160 | .xl-lh-small { line-height: var(--small-line-height); } 161 | 162 | .xl-strong { font-weight: 700; } 163 | .xl-regular { font-weight: 400; } 164 | .xl-light { font-weight: 300; } 165 | .xl-italic { font-style: italic; } 166 | 167 | .xl-uppercase { text-transform: uppercase; } 168 | .xl-lowercase { text-transform: lowercase; } 169 | .xl-capitalized { text-transform: capitalize; } 170 | 171 | .xl-underline { text-decoration: underline; } 172 | .xl-line-through { text-decoration: line-through; } 173 | 174 | .xl-text-left, 175 | .xl-align-left { text-align: left; } 176 | .xl-text-right, 177 | .xl-align-right { text-align: right; } 178 | .xl-text-center, 179 | .xl-align-center { text-align: center; } 180 | } 181 | -------------------------------------------------------------------------------- /src/typography.css: -------------------------------------------------------------------------------- 1 | 2 | h1,h2,h3,h4,h5,h6,p { 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | /* 8 | * Font sizes 9 | * 10 | */ 11 | 12 | small, 13 | .text-0 { font-size: var(--font-size-0); } 14 | .text-1 { font-size: var(--font-size-1); } 15 | .text-2 { font-size: var(--font-size-2); } 16 | .text-3 { font-size: var(--font-size-3); } 17 | .text-4 { font-size: var(--font-size-4); } 18 | .text-5 { font-size: var(--font-size-5); } 19 | .text-6 { font-size: var(--font-size-6); } 20 | .text-7 { font-size: var(--font-size-7); } 21 | .text-8 { font-size: var(--font-size-8); } 22 | .text-9 { font-size: var(--font-size-9); } 23 | 24 | /* 25 | * Line height 26 | * 27 | * .lh-1 vs. lh-self 28 | */ 29 | 30 | .lh-1 { line-height: 1; } 31 | .lh-base { line-height: var(--base-line-height); } 32 | .lh-small { line-height: var(--small-line-height); } 33 | 34 | /* 35 | * Text align 36 | * 37 | */ 38 | 39 | .text-left, 40 | .align-left { text-align: left; } 41 | 42 | .text-right, 43 | .align-right { text-align: right; } 44 | 45 | .text-center, 46 | .align-center { text-align: center; } 47 | 48 | /* 49 | * Text weight 50 | * 51 | */ 52 | 53 | b, 54 | strong, 55 | .strong { font-weight: 700; } 56 | .regular { font-weight: 400; } 57 | .light { font-weight: 300; } 58 | .italic { font-style: italic; } 59 | 60 | /* 61 | * Text transform 62 | * 63 | */ 64 | 65 | .uppercase { text-transform: uppercase; } 66 | .lowercase { text-transform: lowercase; } 67 | .capitalized { text-transform: capitalize; } 68 | 69 | /* 70 | * Text decoration 71 | * 72 | */ 73 | 74 | .underline { text-decoration: underline; } 75 | .line-through { text-decoration: line-through; } 76 | -------------------------------------------------------------------------------- /src/utils-responsive.css: -------------------------------------------------------------------------------- 1 | 2 | @media (--xs-viewport) { 3 | .xs-no-wrap { white-space: nowrap; } 4 | 5 | .xs-align-baseline { vertical-align: baseline; } 6 | .xs-align-top { vertical-align: top; } 7 | .xs-align-middle { vertical-align: middle; } 8 | .xs-align-bottom { vertical-align: bottom; } 9 | 10 | .xs-overflow-hidden { overflow: hidden; } 11 | .xs-overflow-scroll { overflow: scroll; } 12 | .xs-overflow-auto { overflow: auto; } 13 | 14 | .xs-left { float: left; } 15 | .xs-right { float: right; } 16 | 17 | .xs-translateY-n50 { transform: translateY(-50%); } 18 | .xs-translateX-n50 { transform: translateX(-50%); } 19 | 20 | .xs-max-width-none { max-width: none; } 21 | .xs-max-height-none { max-height: none; } 22 | .xs-max-width-100 { max-width: 100%; } 23 | .xs-max-height-100 { max-height: 100%; } 24 | } 25 | 26 | @media (--sm-viewport) { 27 | .sm-no-wrap { white-space: nowrap; } 28 | 29 | .sm-align-baseline { vertical-align: baseline; } 30 | .sm-align-top { vertical-align: top; } 31 | .sm-align-middle { vertical-align: middle; } 32 | .sm-align-bottom { vertical-align: bottom; } 33 | 34 | .sm-overflow-hidden { overflow: hidden; } 35 | .sm-overflow-scroll { overflow: scroll; } 36 | .sm-overflow-auto { overflow: auto; } 37 | 38 | .sm-left { float: left; } 39 | .sm-right { float: right; } 40 | 41 | .sm-translateY-n50 { transform: translateY(-50%); } 42 | .sm-translateX-n50 { transform: translateX(-50%); } 43 | 44 | .sm-max-width-none { max-width: none; } 45 | .sm-max-height-none { max-height: none; } 46 | .sm-max-width-100 { max-width: 100%; } 47 | .sm-max-height-100 { max-height: 100%; } 48 | } 49 | 50 | @media (--md-viewport) { 51 | .md-no-wrap { white-space: nowrap; } 52 | 53 | .md-align-baseline { vertical-align: baseline; } 54 | .md-align-top { vertical-align: top; } 55 | .md-align-middle { vertical-align: middle; } 56 | .md-align-bottom { vertical-align: bottom; } 57 | 58 | .md-overflow-hidden { overflow: hidden; } 59 | .md-overflow-scroll { overflow: scroll; } 60 | .md-overflow-auto { overflow: auto; } 61 | 62 | .md-left { float: left; } 63 | .md-right { float: right; } 64 | 65 | .md-translateY-n50 { transform: translateY(-50%); } 66 | .md-translateX-n50 { transform: translateX(-50%); } 67 | 68 | .md-max-width-none { max-width: none; } 69 | .md-max-height-none { max-height: none; } 70 | .md-max-width-100 { max-width: 100%; } 71 | .md-max-height-100 { max-height: 100%; } 72 | } 73 | 74 | @media (--lg-viewport) { 75 | .lg-no-wrap { white-space: nowrap; } 76 | 77 | .lg-align-baseline { vertical-align: baseline; } 78 | .lg-align-top { vertical-align: top; } 79 | .lg-align-middle { vertical-align: middle; } 80 | .lg-align-bottom { vertical-align: bottom; } 81 | 82 | .lg-overflow-hidden { overflow: hidden; } 83 | .lg-overflow-scroll { overflow: scroll; } 84 | .lg-overflow-auto { overflow: auto; } 85 | 86 | .lg-left { float: left; } 87 | .lg-right { float: right; } 88 | 89 | .lg-translateY-n50 { transform: translateY(-50%); } 90 | .lg-translateX-n50 { transform: translateX(-50%); } 91 | 92 | .lg-max-width-none { max-width: none; } 93 | .lg-max-height-none { max-height: none; } 94 | .lg-max-width-100 { max-width: 100%; } 95 | .lg-max-height-100 { max-height: 100%; } 96 | } 97 | 98 | @media (--xl-viewport) { 99 | .xl-no-wrap { white-space: nowrap; } 100 | 101 | .xl-align-baseline { vertical-align: baseline; } 102 | .xl-align-top { vertical-align: top; } 103 | .xl-align-middle { vertical-align: middle; } 104 | .xl-align-bottom { vertical-align: bottom; } 105 | 106 | .xl-overflow-hidden { overflow: hidden; } 107 | .xl-overflow-scroll { overflow: scroll; } 108 | .xl-overflow-auto { overflow: auto; } 109 | 110 | .xl-left { float: left; } 111 | .xl-right { float: right; } 112 | 113 | .xl-translateY-n50 { transform: translateY(-50%); } 114 | .xl-translateX-n50 { transform: translateX(-50%); } 115 | 116 | .xl-max-width-none { max-width: none; } 117 | .xl-max-height-none { max-height: none; } 118 | .xl-max-width-100 { max-width: 100%; } 119 | .xl-max-height-100 { max-height: 100%; } 120 | } 121 | -------------------------------------------------------------------------------- /src/utils.css: -------------------------------------------------------------------------------- 1 | 2 | /*Wrapping*/ 3 | .no-wrap { white-space: nowrap; } 4 | 5 | /*Vertical align*/ 6 | .align-baseline { vertical-align: baseline; } 7 | .align-top { vertical-align: top; } 8 | .align-middle { vertical-align: middle; } 9 | .align-bottom { vertical-align: bottom; } 10 | 11 | /*Oveflow*/ 12 | .overflow-hidden { overflow: hidden; } 13 | .overflow-scroll { overflow: scroll; } 14 | .overflow-auto { overflow: auto; } 15 | 16 | /*Float*/ 17 | .left { float: left; } 18 | .right { float: right; } 19 | 20 | /*Transforms*/ 21 | .translateY-n50 { transform: translateY(-50%); } 22 | .translateX-n50 { transform: translateX(-50%); } 23 | 24 | .clearfix:before, 25 | .clearfix:after { 26 | content: " "; 27 | display: table; 28 | } 29 | .clearfix:after { clear: both; } 30 | 31 | /*max-width/max-height*/ 32 | .max-width-none { max-width: none; } 33 | .max-height-none { max-height: none; } 34 | .max-width-100 { max-width: 100%; } 35 | .max-height-100 { max-height: 100%; } 36 | 37 | /*z index*/ 38 | .z-index-0 { z-index: 0; } 39 | .z-index-1 { z-index: 1; } 40 | .z-index-2 { z-index: 2; } 41 | .z-index-3 { z-index: 3; } 42 | .z-index-4 { z-index: 4; } 43 | .z-index-5 { z-index: 5; } 44 | .z-index-10 { z-index: 10; } 45 | .z-index-20 { z-index: 20; } 46 | .z-index-100 { z-index: 100; } 47 | .z-index-max { z-index: 999999; } 48 | --------------------------------------------------------------------------------