├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── _tests └── index.js ├── basscss └── index.js ├── beard └── index.js ├── bin └── build.js ├── bootstrap-grid └── index.js ├── bootstrap └── index.js ├── materialize └── index.js ├── package.json ├── src ├── basscss │ └── index.js ├── beard │ └── index.js ├── bootstrap-grid │ └── index.js ├── bootstrap │ └── index.js ├── materialize │ └── index.js ├── tachyons │ └── index.js └── turretcss │ └── index.js ├── tachyons └── index.js ├── turretcss └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | /lib/ 3 | .DS_Store -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Anton 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 | This project is a part of `*-mixins`, with goal to provide a better __CSS__ experience 2 | to the __React__ infected people. 3 | ## Install 4 | [![NPM](https://nodei.co/npm/styled-components-mixins.png?downloads=true&stars=true)](https://nodei.co/npm/styled-components-mixins/) 5 | 6 | ## Use 7 | ```js 8 | // import classes you need from the library you need. 9 | import {class1, class2} from 'styled-components-mixins/{LIBRARY}'; 10 | // use them as mixins 11 | const Component = styled.div` 12 | ${class1} 13 | z-index: 1; 14 | `; 15 | ``` 16 | 17 | ## Includes: 18 | - https://github.com/tachyons-css/tachyons/ 19 | - https://github.com/twbs/bootstrap 20 | - https://github.com/turretcss/turretcss 21 | - https://github.com/Dogfalo/materialize 22 | - https://github.com/monarkee/beard 23 | - https://github.com/basscss/basscss 24 | 25 | 26 | if you need more - raise an issue, open a PR, or use webpack`s [css-to-js-loader](https://github.com/theKashey/css-to-js-loader). 27 | 28 | # Demo 29 | [![Edit Styled Components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/qkv82lk6l6) 30 | 31 | # Theory 32 | Atomic (or Functional) css is quite good methodology, 33 | but as long it solves many issues - it also introduces a new one. 34 | 35 | You can create a Button, and you can describe how it must look like. 36 | ```js 37 | 40 | ``` 41 | But you will soil HTML code with details of behavior. Both css driven by html or html driven by css is bad. 42 | Something in the middle - BEM - is also not very usable. 43 | 44 | You can use LESS to combine all modificators, to have single control point 45 | ```less 46 | .bg-purple{ 47 | .f6; 48 | .br3; 49 | .ph3; 50 | .pv2; 51 | .white; 52 | .hover-bg-light-purple; 53 | } 54 | ``` 55 | But result CSS will be HUGE. 56 | 57 | But you can use client-side CSS framework, to do the same. To get a `Component`. And you will love the result. 58 | ```js 59 | const Button = styled.button` 60 | ${f6}; 61 | ${br3}; 62 | ${ph3}; 63 | ${pv2}; 64 | ${white}; 65 | ${hover-bg-light-purple}; 66 | ` 67 | ``` 68 | 69 | # Limitations 70 | *-Mixins can provide only __mixins__. A single class, style, or an atom. 71 | 72 | If some library has selector like: 73 | ```css 74 | .someclass .someanotherClass 75 | ``` 76 | *-Mixins will provide only .someclass, and adding .someanotherClass to the html markup - is your duty. 77 | No magic. 78 | 79 | # Naming conversion 80 | One cannot use real `css` names in js, so we have to convert names to a js-friendly format: 81 | - ".class" becomes class 82 | - "tag" becomes tag_tag 83 | - "#id" becomes $id 84 | - "hover-bg" becomes hover_bg 85 | - "block--element" becomes block$$element 86 | - ".class.anotherclass" becomes class_and_anotherclass 87 | 88 | # Prior art 89 | 90 | Idea was found here - https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ 91 | 92 | This is just an adoptation for a different style of CSS generation. 93 | 94 | ![idea](http://kashey.ru/img/classMixins.gif) 95 | 96 | # Licence 97 | MIT -------------------------------------------------------------------------------- /_tests/index.js: -------------------------------------------------------------------------------- 1 | import * as bootstrap from '../bootstrap/index'; 2 | 3 | 4 | const Div = styled.div` 5 | `; 6 | 7 | const Label = styled.div` 8 | `; 9 | 10 | const Button = styled.div` 11 | `; 12 | 13 | -------------------------------------------------------------------------------- /basscss/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../lib/basscss/index') -------------------------------------------------------------------------------- /beard/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../lib/beard/index') -------------------------------------------------------------------------------- /bin/build.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const converter = require('postcss-to-js'); 3 | 4 | function DO(prefix, files) { 5 | console.log('do', prefix, files[0]); 6 | 7 | const ast = converter.parseAst(fs.readFileSync('node_modules/' + files[0])); 8 | const result = converter.toStyled(ast).map(line => 'export const ' + line[0] + ' = ' + line[1] + ';').join('\n'); 9 | fs.writeFileSync(`src/${prefix}/index.js`, ` 10 | import { css, injectGlobal } from 'styled-components';\n 11 | ${result}; 12 | `); 13 | } 14 | 15 | //tachyons 16 | 17 | DO('tachyons', ['tachyons/css/tachyons.css']); 18 | 19 | //turretcss 20 | 21 | DO('turretcss', ['turretcss/dist/turretcss.min.css']); 22 | 23 | //materialize 24 | 25 | DO('materialize', ['materialize-css/dist/css/materialize.css']); 26 | 27 | //basscss 28 | 29 | DO('basscss', ['basscss/css/basscss-cp.css']); 30 | 31 | // beard 32 | 33 | DO('beard', ['beardcss/dist/beard.css']); 34 | 35 | //bootstrap 36 | 37 | DO('bootstrap', ['bootstrap/dist/css/bootstrap.css']); 38 | 39 | DO('bootstrap-grid', ['bootstrap/dist/css/bootstrap-grid.css']); 40 | -------------------------------------------------------------------------------- /bootstrap-grid/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../lib/bootstrap-grid/index') -------------------------------------------------------------------------------- /bootstrap/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../lib/bootstrap/index'); -------------------------------------------------------------------------------- /materialize/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../lib/materialize/index'); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-components-mixins", 3 | "version": "0.0.5", 4 | "description": "Popular libraries as mixins for styled-components", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "build": "babel src -d lib" 8 | }, 9 | "files": [ 10 | "lib", 11 | "basscss", 12 | "bears", 13 | "bootstrap", 14 | "bootstrap-grid", 15 | "tachyons", 16 | "turretcss", 17 | "materialize" 18 | ], 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/theKashey/styled-components-mixins" 22 | }, 23 | "author": "Anton Korzunov (thekashey@gmail.com)", 24 | "license": "MIT", 25 | "peerDependencies": { 26 | "styled-components": "*" 27 | }, 28 | "devDependencies": { 29 | "babel-cli": "^6.26.0", 30 | "babel-core": "6.26.0", 31 | "babel-preset-latest": "6.24.1", 32 | "babel-register": "6.26.0", 33 | "basscss": "^8.0.3", 34 | "beardcss": "2.2.4", 35 | "bootstrap": "^4.0.0-beta", 36 | "materialize-css": "^0.100.1", 37 | "postcss-to-js": "^0.0.4", 38 | "tachyons": "^4.8.1", 39 | "turretcss": "^4.0.4" 40 | }, 41 | "@std/esm": { 42 | "esm": "all", 43 | "cjs": "all" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/basscss/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { css, injectGlobal } from 'styled-components'; 3 | 4 | export const __root = css`--h1: 2rem; 5 | --h2: 1.5rem; 6 | --h3: 1.25rem; 7 | --h4: 1rem; 8 | --h5: .875rem; 9 | --h6: .75rem; 10 | --line-height-1: 1; 11 | --line-height-2: 1.125; 12 | --line-height-3: 1.25; 13 | --line-height-4: 1.5; 14 | --letter-spacing: 1; 15 | --caps-letter-spacing: .2em; 16 | --bold-font-weight: bold; 17 | --width-1: 24rem; 18 | --width-2: 32rem; 19 | --width-3: 48rem; 20 | --width-4: 64rem; 21 | --space-1: .5rem; 22 | --space-2: 1rem; 23 | --space-3: 2rem; 24 | --space-4: 4rem; 25 | --space-1: .5rem; 26 | --space-2: 1rem; 27 | --space-3: 2rem; 28 | --space-4: 4rem; 29 | --z1: 1; 30 | --z2: 2; 31 | --z3: 3; 32 | --z4: 4; 33 | --border-width: 1px; 34 | --border-radius: 3px;`;; 35 | export const h1 = css`${__root}; font-size: var(--h1);`;; 36 | export const h2 = css`${__root}; font-size: var(--h2);`;; 37 | export const h3 = css`${__root}; font-size: var(--h3);`;; 38 | export const h4 = css`${__root}; font-size: var(--h4);`;; 39 | export const h5 = css`${__root}; font-size: var(--h5);`;; 40 | export const h6 = css`${__root}; font-size: var(--h6);`;; 41 | export const font_family_inherit = css`${__root}; font-family: inherit;`;; 42 | export const font_size_inherit = css`${__root}; font-size: inherit;`;; 43 | export const text_decoration_none = css`${__root}; text-decoration: none;`;; 44 | export const bold = css`${__root}; font-weight: var(--bold-font-weight, bold);`;; 45 | export const regular = css`${__root}; font-weight: normal;`;; 46 | export const italic = css`${__root}; font-style: italic;`;; 47 | export const caps = css`${__root}; text-transform: uppercase; 48 | letter-spacing: var(--caps-letter-spacing);`;; 49 | export const left_align = css`${__root}; text-align: left;`;; 50 | export const center = css`${__root}; text-align: center;`;; 51 | export const right_align = css`${__root}; text-align: right;`;; 52 | export const justify = css`${__root}; text-align: justify;`;; 53 | export const nowrap = css`${__root}; white-space: nowrap;`;; 54 | export const break_word = css`${__root}; word-wrap: break-word;`;; 55 | export const line_height_1 = css`${__root}; line-height: var(--line-height-1);`;; 56 | export const line_height_2 = css`${__root}; line-height: var(--line-height-2);`;; 57 | export const line_height_3 = css`${__root}; line-height: var(--line-height-3);`;; 58 | export const line_height_4 = css`${__root}; line-height: var(--line-height-4);`;; 59 | export const list_style_none = css`${__root}; list-style: none;`;; 60 | export const underline = css`${__root}; text-decoration: underline;`;; 61 | export const truncate = css`${__root}; max-width: 100%; 62 | overflow: hidden; 63 | text-overflow: ellipsis; 64 | white-space: nowrap;`;; 65 | export const list_reset = css`${__root}; list-style: none; 66 | padding-left: 0;`;; 67 | export const inline = css`${__root}; display: inline;`;; 68 | export const block = css`${__root}; display: block;`;; 69 | export const inline_block = css`${__root}; display: inline-block;`;; 70 | export const table = css`${__root}; display: table;`;; 71 | export const table_cell = css`${__root}; display: table-cell;`;; 72 | export const overflow_hidden = css`${__root}; overflow: hidden;`;; 73 | export const overflow_scroll = css`${__root}; overflow: scroll;`;; 74 | export const overflow_auto = css`${__root}; overflow: auto;`;; 75 | export const clearfix = css`${__root}; &:before {content: " "; 76 | display: table;} 77 | &:after {content: " "; 78 | display: table;} 79 | &:after {clear: both;}`;; 80 | export const left = css`${__root}; float: left;`;; 81 | export const right = css`${__root}; float: right;`;; 82 | export const fit = css`${__root}; max-width: 100%;`;; 83 | export const max_width_1 = css`${__root}; max-width: var(--width-1);`;; 84 | export const max_width_2 = css`${__root}; max-width: var(--width-2);`;; 85 | export const max_width_3 = css`${__root}; max-width: var(--width-3);`;; 86 | export const max_width_4 = css`${__root}; max-width: var(--width-4);`;; 87 | export const border_box = css`${__root}; box-sizing: border-box;`;; 88 | export const align_baseline = css`${__root}; vertical-align: baseline;`;; 89 | export const align_top = css`${__root}; vertical-align: top;`;; 90 | export const align_middle = css`${__root}; vertical-align: middle;`;; 91 | export const align_bottom = css`${__root}; vertical-align: bottom;`;; 92 | export const m0 = css`${__root}; margin: 0;`;; 93 | export const mt0 = css`${__root}; margin-top: 0;`;; 94 | export const mr0 = css`${__root}; margin-right: 0;`;; 95 | export const mb0 = css`${__root}; margin-bottom: 0;`;; 96 | export const ml0 = css`${__root}; margin-left: 0;`;; 97 | export const mx0 = css`${__root}; margin-left: 0; 98 | margin-right: 0;`;; 99 | export const my0 = css`${__root}; margin-top: 0; 100 | margin-bottom: 0;`;; 101 | export const m1 = css`${__root}; margin: var(--space-1);`;; 102 | export const mt1 = css`${__root}; margin-top: var(--space-1);`;; 103 | export const mr1 = css`${__root}; margin-right: var(--space-1);`;; 104 | export const mb1 = css`${__root}; margin-bottom: var(--space-1);`;; 105 | export const ml1 = css`${__root}; margin-left: var(--space-1);`;; 106 | export const mx1 = css`${__root}; margin-left: var(--space-1); 107 | margin-right: var(--space-1);`;; 108 | export const my1 = css`${__root}; margin-top: var(--space-1); 109 | margin-bottom: var(--space-1);`;; 110 | export const m2 = css`${__root}; margin: var(--space-2);`;; 111 | export const mt2 = css`${__root}; margin-top: var(--space-2);`;; 112 | export const mr2 = css`${__root}; margin-right: var(--space-2);`;; 113 | export const mb2 = css`${__root}; margin-bottom: var(--space-2);`;; 114 | export const ml2 = css`${__root}; margin-left: var(--space-2);`;; 115 | export const mx2 = css`${__root}; margin-left: var(--space-2); 116 | margin-right: var(--space-2);`;; 117 | export const my2 = css`${__root}; margin-top: var(--space-2); 118 | margin-bottom: var(--space-2);`;; 119 | export const m3 = css`${__root}; margin: var(--space-3);`;; 120 | export const mt3 = css`${__root}; margin-top: var(--space-3);`;; 121 | export const mr3 = css`${__root}; margin-right: var(--space-3);`;; 122 | export const mb3 = css`${__root}; margin-bottom: var(--space-3);`;; 123 | export const ml3 = css`${__root}; margin-left: var(--space-3);`;; 124 | export const mx3 = css`${__root}; margin-left: var(--space-3); 125 | margin-right: var(--space-3);`;; 126 | export const my3 = css`${__root}; margin-top: var(--space-3); 127 | margin-bottom: var(--space-3);`;; 128 | export const m4 = css`${__root}; margin: var(--space-4);`;; 129 | export const mt4 = css`${__root}; margin-top: var(--space-4);`;; 130 | export const mr4 = css`${__root}; margin-right: var(--space-4);`;; 131 | export const mb4 = css`${__root}; margin-bottom: var(--space-4);`;; 132 | export const ml4 = css`${__root}; margin-left: var(--space-4);`;; 133 | export const mx4 = css`${__root}; margin-left: var(--space-4); 134 | margin-right: var(--space-4);`;; 135 | export const my4 = css`${__root}; margin-top: var(--space-4); 136 | margin-bottom: var(--space-4);`;; 137 | export const mxn1 = css`${__root}; margin-left: -var(--space-1); 138 | margin-right: -var(--space-1);`;; 139 | export const mxn2 = css`${__root}; margin-left: -var(--space-2); 140 | margin-right: -var(--space-2);`;; 141 | export const mxn3 = css`${__root}; margin-left: -var(--space-3); 142 | margin-right: -var(--space-3);`;; 143 | export const mxn4 = css`${__root}; margin-left: -var(--space-4); 144 | margin-right: -var(--space-4);`;; 145 | export const ml_auto = css`${__root}; margin-left: auto;`;; 146 | export const mr_auto = css`${__root}; margin-right: auto;`;; 147 | export const mx_auto = css`${__root}; margin-left: auto; 148 | margin-right: auto;`;; 149 | export const p0 = css`${__root}; padding: 0;`;; 150 | export const pt0 = css`${__root}; padding-top: 0;`;; 151 | export const pr0 = css`${__root}; padding-right: 0;`;; 152 | export const pb0 = css`${__root}; padding-bottom: 0;`;; 153 | export const pl0 = css`${__root}; padding-left: 0;`;; 154 | export const px0 = css`${__root}; padding-left: 0; 155 | padding-right: 0;`;; 156 | export const py0 = css`${__root}; padding-top: 0; 157 | padding-bottom: 0;`;; 158 | export const p1 = css`${__root}; padding: var(--space-1);`;; 159 | export const pt1 = css`${__root}; padding-top: var(--space-1);`;; 160 | export const pr1 = css`${__root}; padding-right: var(--space-1);`;; 161 | export const pb1 = css`${__root}; padding-bottom: var(--space-1);`;; 162 | export const pl1 = css`${__root}; padding-left: var(--space-1);`;; 163 | export const py1 = css`${__root}; padding-top: var(--space-1); 164 | padding-bottom: var(--space-1);`;; 165 | export const px1 = css`${__root}; padding-left: var(--space-1); 166 | padding-right: var(--space-1);`;; 167 | export const p2 = css`${__root}; padding: var(--space-2);`;; 168 | export const pt2 = css`${__root}; padding-top: var(--space-2);`;; 169 | export const pr2 = css`${__root}; padding-right: var(--space-2);`;; 170 | export const pb2 = css`${__root}; padding-bottom: var(--space-2);`;; 171 | export const pl2 = css`${__root}; padding-left: var(--space-2);`;; 172 | export const py2 = css`${__root}; padding-top: var(--space-2); 173 | padding-bottom: var(--space-2);`;; 174 | export const px2 = css`${__root}; padding-left: var(--space-2); 175 | padding-right: var(--space-2);`;; 176 | export const p3 = css`${__root}; padding: var(--space-3);`;; 177 | export const pt3 = css`${__root}; padding-top: var(--space-3);`;; 178 | export const pr3 = css`${__root}; padding-right: var(--space-3);`;; 179 | export const pb3 = css`${__root}; padding-bottom: var(--space-3);`;; 180 | export const pl3 = css`${__root}; padding-left: var(--space-3);`;; 181 | export const py3 = css`${__root}; padding-top: var(--space-3); 182 | padding-bottom: var(--space-3);`;; 183 | export const px3 = css`${__root}; padding-left: var(--space-3); 184 | padding-right: var(--space-3);`;; 185 | export const p4 = css`${__root}; padding: var(--space-4);`;; 186 | export const pt4 = css`${__root}; padding-top: var(--space-4);`;; 187 | export const pr4 = css`${__root}; padding-right: var(--space-4);`;; 188 | export const pb4 = css`${__root}; padding-bottom: var(--space-4);`;; 189 | export const pl4 = css`${__root}; padding-left: var(--space-4);`;; 190 | export const py4 = css`${__root}; padding-top: var(--space-4); 191 | padding-bottom: var(--space-4);`;; 192 | export const px4 = css`${__root}; padding-left: var(--space-4); 193 | padding-right: var(--space-4);`;; 194 | export const col = css`${__root}; float: left; 195 | box-sizing: border-box;`;; 196 | export const col_right = css`${__root}; float: right; 197 | box-sizing: border-box;`;; 198 | export const col_1 = css`${__root}; width: calc(1/12 * 100%);`;; 199 | export const col_2 = css`${__root}; width: calc(2/12 * 100%);`;; 200 | export const col_3 = css`${__root}; width: calc(3/12 * 100%);`;; 201 | export const col_4 = css`${__root}; width: calc(4/12 * 100%);`;; 202 | export const col_5 = css`${__root}; width: calc(5/12 * 100%);`;; 203 | export const col_6 = css`${__root}; width: calc(6/12 * 100%);`;; 204 | export const col_7 = css`${__root}; width: calc(7/12 * 100%);`;; 205 | export const col_8 = css`${__root}; width: calc(8/12 * 100%);`;; 206 | export const col_9 = css`${__root}; width: calc(9/12 * 100%);`;; 207 | export const col_10 = css`${__root}; width: calc(10/12 * 100%);`;; 208 | export const col_11 = css`${__root}; width: calc(11/12 * 100%);`;; 209 | export const col_12 = css`${__root}; width: 100%;`;; 210 | export const sm_col = css`${__root}; @media (min-width: 40em) { 211 | float: left; 212 | box-sizing: border-box; 213 | }`;; 214 | export const sm_col_right = css`${__root}; @media (min-width: 40em) { 215 | float: right; 216 | box-sizing: border-box; 217 | }`;; 218 | export const sm_col_1 = css`${__root}; @media (min-width: 40em) { 219 | width: calc(1/12 * 100%); 220 | }`;; 221 | export const sm_col_2 = css`${__root}; @media (min-width: 40em) { 222 | width: calc(2/12 * 100%); 223 | }`;; 224 | export const sm_col_3 = css`${__root}; @media (min-width: 40em) { 225 | width: calc(3/12 * 100%); 226 | }`;; 227 | export const sm_col_4 = css`${__root}; @media (min-width: 40em) { 228 | width: calc(4/12 * 100%); 229 | }`;; 230 | export const sm_col_5 = css`${__root}; @media (min-width: 40em) { 231 | width: calc(5/12 * 100%); 232 | }`;; 233 | export const sm_col_6 = css`${__root}; @media (min-width: 40em) { 234 | width: calc(6/12 * 100%); 235 | }`;; 236 | export const sm_col_7 = css`${__root}; @media (min-width: 40em) { 237 | width: calc(7/12 * 100%); 238 | }`;; 239 | export const sm_col_8 = css`${__root}; @media (min-width: 40em) { 240 | width: calc(8/12 * 100%); 241 | }`;; 242 | export const sm_col_9 = css`${__root}; @media (min-width: 40em) { 243 | width: calc(9/12 * 100%); 244 | }`;; 245 | export const sm_col_10 = css`${__root}; @media (min-width: 40em) { 246 | width: calc(10/12 * 100%); 247 | }`;; 248 | export const sm_col_11 = css`${__root}; @media (min-width: 40em) { 249 | width: calc(11/12 * 100%); 250 | }`;; 251 | export const sm_col_12 = css`${__root}; @media (min-width: 40em) { 252 | width: 100%; 253 | }`;; 254 | export const md_col = css`${__root}; @media (min-width: 52em) { 255 | float: left; 256 | box-sizing: border-box; 257 | }`;; 258 | export const md_col_right = css`${__root}; @media (min-width: 52em) { 259 | float: right; 260 | box-sizing: border-box; 261 | }`;; 262 | export const md_col_1 = css`${__root}; @media (min-width: 52em) { 263 | width: calc(1/12 * 100%); 264 | }`;; 265 | export const md_col_2 = css`${__root}; @media (min-width: 52em) { 266 | width: calc(2/12 * 100%); 267 | }`;; 268 | export const md_col_3 = css`${__root}; @media (min-width: 52em) { 269 | width: calc(3/12 * 100%); 270 | }`;; 271 | export const md_col_4 = css`${__root}; @media (min-width: 52em) { 272 | width: calc(4/12 * 100%); 273 | }`;; 274 | export const md_col_5 = css`${__root}; @media (min-width: 52em) { 275 | width: calc(5/12 * 100%); 276 | }`;; 277 | export const md_col_6 = css`${__root}; @media (min-width: 52em) { 278 | width: calc(6/12 * 100%); 279 | }`;; 280 | export const md_col_7 = css`${__root}; @media (min-width: 52em) { 281 | width: calc(7/12 * 100%); 282 | }`;; 283 | export const md_col_8 = css`${__root}; @media (min-width: 52em) { 284 | width: calc(8/12 * 100%); 285 | }`;; 286 | export const md_col_9 = css`${__root}; @media (min-width: 52em) { 287 | width: calc(9/12 * 100%); 288 | }`;; 289 | export const md_col_10 = css`${__root}; @media (min-width: 52em) { 290 | width: calc(10/12 * 100%); 291 | }`;; 292 | export const md_col_11 = css`${__root}; @media (min-width: 52em) { 293 | width: calc(11/12 * 100%); 294 | }`;; 295 | export const md_col_12 = css`${__root}; @media (min-width: 52em) { 296 | width: 100%; 297 | }`;; 298 | export const lg_col = css`${__root}; @media (min-width: 64em) { 299 | float: left; 300 | box-sizing: border-box; 301 | }`;; 302 | export const lg_col_right = css`${__root}; @media (min-width: 64em) { 303 | float: right; 304 | box-sizing: border-box; 305 | }`;; 306 | export const lg_col_1 = css`${__root}; @media (min-width: 64em) { 307 | width: calc(1/12 * 100%); 308 | }`;; 309 | export const lg_col_2 = css`${__root}; @media (min-width: 64em) { 310 | width: calc(2/12 * 100%); 311 | }`;; 312 | export const lg_col_3 = css`${__root}; @media (min-width: 64em) { 313 | width: calc(3/12 * 100%); 314 | }`;; 315 | export const lg_col_4 = css`${__root}; @media (min-width: 64em) { 316 | width: calc(4/12 * 100%); 317 | }`;; 318 | export const lg_col_5 = css`${__root}; @media (min-width: 64em) { 319 | width: calc(5/12 * 100%); 320 | }`;; 321 | export const lg_col_6 = css`${__root}; @media (min-width: 64em) { 322 | width: calc(6/12 * 100%); 323 | }`;; 324 | export const lg_col_7 = css`${__root}; @media (min-width: 64em) { 325 | width: calc(7/12 * 100%); 326 | }`;; 327 | export const lg_col_8 = css`${__root}; @media (min-width: 64em) { 328 | width: calc(8/12 * 100%); 329 | }`;; 330 | export const lg_col_9 = css`${__root}; @media (min-width: 64em) { 331 | width: calc(9/12 * 100%); 332 | }`;; 333 | export const lg_col_10 = css`${__root}; @media (min-width: 64em) { 334 | width: calc(10/12 * 100%); 335 | }`;; 336 | export const lg_col_11 = css`${__root}; @media (min-width: 64em) { 337 | width: calc(11/12 * 100%); 338 | }`;; 339 | export const lg_col_12 = css`${__root}; @media (min-width: 64em) { 340 | width: 100%; 341 | }`;; 342 | export const flex = css`${__root}; display: flex;`;; 343 | export const sm_flex = css`${__root}; @media (min-width: 40em) { 344 | display: flex; 345 | }`;; 346 | export const md_flex = css`${__root}; @media (min-width: 52em) { 347 | display: flex; 348 | }`;; 349 | export const lg_flex = css`${__root}; @media (min-width: 64em) { 350 | display: flex; 351 | }`;; 352 | export const flex_column = css`${__root}; flex-direction: column;`;; 353 | export const flex_wrap = css`${__root}; flex-wrap: wrap;`;; 354 | export const items_start = css`${__root}; align-items: flex-start;`;; 355 | export const items_end = css`${__root}; align-items: flex-end;`;; 356 | export const items_center = css`${__root}; align-items: center;`;; 357 | export const items_baseline = css`${__root}; align-items: baseline;`;; 358 | export const items_stretch = css`${__root}; align-items: stretch;`;; 359 | export const self_start = css`${__root}; align-self: flex-start;`;; 360 | export const self_end = css`${__root}; align-self: flex-end;`;; 361 | export const self_center = css`${__root}; align-self: center;`;; 362 | export const self_baseline = css`${__root}; align-self: baseline;`;; 363 | export const self_stretch = css`${__root}; align-self: stretch;`;; 364 | export const justify_start = css`${__root}; justify-content: flex-start;`;; 365 | export const justify_end = css`${__root}; justify-content: flex-end;`;; 366 | export const justify_center = css`${__root}; justify-content: center;`;; 367 | export const justify_between = css`${__root}; justify-content: space-between;`;; 368 | export const justify_around = css`${__root}; justify-content: space-around;`;; 369 | export const content_start = css`${__root}; align-content: flex-start;`;; 370 | export const content_end = css`${__root}; align-content: flex-end;`;; 371 | export const content_center = css`${__root}; align-content: center;`;; 372 | export const content_between = css`${__root}; align-content: space-between;`;; 373 | export const content_around = css`${__root}; align-content: space-around;`;; 374 | export const content_stretch = css`${__root}; align-content: stretch;`;; 375 | export const flex_auto = css`${__root}; flex: 1 1 auto; 376 | min-width: 0; 377 | min-height: 0;`;; 378 | export const flex_none = css`${__root}; flex: none;`;; 379 | export const order_0 = css`${__root}; order: 0;`;; 380 | export const order_1 = css`${__root}; order: 1;`;; 381 | export const order_2 = css`${__root}; order: 2;`;; 382 | export const order_3 = css`${__root}; order: 3;`;; 383 | export const order_last = css`${__root}; order: 99999;`;; 384 | export const relative = css`${__root}; position: relative;`;; 385 | export const absolute = css`${__root}; position: absolute;`;; 386 | export const fixed = css`${__root}; position: fixed;`;; 387 | export const top_0 = css`${__root}; top: 0;`;; 388 | export const right_0 = css`${__root}; right: 0;`;; 389 | export const bottom_0 = css`${__root}; bottom: 0;`;; 390 | export const left_0 = css`${__root}; left: 0;`;; 391 | export const z1 = css`${__root}; z-index: var(--z1);`;; 392 | export const z2 = css`${__root}; z-index: var(--z2);`;; 393 | export const z3 = css`${__root}; z-index: var(--z3);`;; 394 | export const z4 = css`${__root}; z-index: var(--z4);`;; 395 | export const border = css`${__root}; border-style: solid; 396 | border-width: var(--border-width);`;; 397 | export const border_top = css`${__root}; border-top-style: solid; 398 | border-top-width: var(--border-width);`;; 399 | export const border_right = css`${__root}; border-right-style: solid; 400 | border-right-width: var(--border-width);`;; 401 | export const border_bottom = css`${__root}; border-bottom-style: solid; 402 | border-bottom-width: var(--border-width);`;; 403 | export const border_left = css`${__root}; border-left-style: solid; 404 | border-left-width: var(--border-width);`;; 405 | export const border_none = css`${__root}; border: 0;`;; 406 | export const rounded = css`${__root}; border-radius: var(--border-radius);`;; 407 | export const circle = css`${__root}; border-radius: 50%;`;; 408 | export const rounded_top = css`${__root}; border-radius: var(--border-radius) var(--border-radius) 0 0;`;; 409 | export const rounded_right = css`${__root}; border-radius: 0 var(--border-radius) var(--border-radius) 0;`;; 410 | export const rounded_bottom = css`${__root}; border-radius: 0 0 var(--border-radius) var(--border-radius);`;; 411 | export const rounded_left = css`${__root}; border-radius: var(--border-radius) 0 0 var(--border-radius);`;; 412 | export const not_rounded = css`${__root}; border-radius: 0;`;; 413 | export const hide = css`${__root}; position: absolute; 414 | height: 1px; 415 | width: 1px; 416 | overflow: hidden; 417 | clip: rect(1px, 1px, 1px, 1px);`;; 418 | export const xs_hide = css`${__root}; @media (max-width: 40em) { 419 | display: none; 420 | }`;; 421 | export const sm_hide = css`${__root}; @media (min-width: 40em) and (max-width: 52em) { 422 | display: none; 423 | }`;; 424 | export const md_hide = css`${__root}; @media (min-width: 52em) and (max-width: 64em) { 425 | display: none; 426 | }`;; 427 | export const lg_hide = css`${__root}; @media (min-width: 64em) { 428 | display: none; 429 | }`;; 430 | export const display_none = css`${__root}; display: none;`;;; 431 | -------------------------------------------------------------------------------- /src/bootstrap-grid/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { css, injectGlobal } from 'styled-components'; 3 | 4 | export const global__ms_viewport = () => injectGlobal`@-ms-viewport { width: device-width; }`; 5 | export const tag_html = css`box-sizing: border-box; 6 | -ms-overflow-style: scrollbar;`;; 7 | export const container = css`margin-right: auto; 8 | margin-left: auto; 9 | padding-right: 15px; 10 | padding-left: 15px; 11 | width: 100%; 12 | @media (min-width: 576px) { 13 | max-width: 540px; 14 | } 15 | @media (min-width: 768px) { 16 | max-width: 720px; 17 | } 18 | @media (min-width: 992px) { 19 | max-width: 960px; 20 | } 21 | @media (min-width: 1200px) { 22 | max-width: 1140px; 23 | }`;; 24 | export const container_fluid = css`width: 100%; 25 | margin-right: auto; 26 | margin-left: auto; 27 | padding-right: 15px; 28 | padding-left: 15px; 29 | width: 100%;`;; 30 | export const row = css`display: -ms-flexbox; 31 | display: flex; 32 | -ms-flex-wrap: wrap; 33 | flex-wrap: wrap; 34 | margin-right: -15px; 35 | margin-left: -15px;`;; 36 | export const no_gutters = css`margin-right: 0; 37 | margin-left: 0; 38 | &> .col {padding-right: 0; 39 | padding-left: 0;} 40 | &> [class*="col-"] {padding-right: 0; 41 | padding-left: 0;}`;; 42 | export const col_1 = css`position: relative; 43 | width: 100%; 44 | min-height: 1px; 45 | padding-right: 15px; 46 | padding-left: 15px; 47 | -ms-flex: 0 0 8.333333%; 48 | flex: 0 0 8.333333%; 49 | max-width: 8.333333%;`;; 50 | export const col_2 = css`position: relative; 51 | width: 100%; 52 | min-height: 1px; 53 | padding-right: 15px; 54 | padding-left: 15px; 55 | -ms-flex: 0 0 16.666667%; 56 | flex: 0 0 16.666667%; 57 | max-width: 16.666667%;`;; 58 | export const col_3 = css`position: relative; 59 | width: 100%; 60 | min-height: 1px; 61 | padding-right: 15px; 62 | padding-left: 15px; 63 | -ms-flex: 0 0 25%; 64 | flex: 0 0 25%; 65 | max-width: 25%;`;; 66 | export const col_4 = css`position: relative; 67 | width: 100%; 68 | min-height: 1px; 69 | padding-right: 15px; 70 | padding-left: 15px; 71 | -ms-flex: 0 0 33.333333%; 72 | flex: 0 0 33.333333%; 73 | max-width: 33.333333%;`;; 74 | export const col_5 = css`position: relative; 75 | width: 100%; 76 | min-height: 1px; 77 | padding-right: 15px; 78 | padding-left: 15px; 79 | -ms-flex: 0 0 41.666667%; 80 | flex: 0 0 41.666667%; 81 | max-width: 41.666667%;`;; 82 | export const col_6 = css`position: relative; 83 | width: 100%; 84 | min-height: 1px; 85 | padding-right: 15px; 86 | padding-left: 15px; 87 | -ms-flex: 0 0 50%; 88 | flex: 0 0 50%; 89 | max-width: 50%;`;; 90 | export const col_7 = css`position: relative; 91 | width: 100%; 92 | min-height: 1px; 93 | padding-right: 15px; 94 | padding-left: 15px; 95 | -ms-flex: 0 0 58.333333%; 96 | flex: 0 0 58.333333%; 97 | max-width: 58.333333%;`;; 98 | export const col_8 = css`position: relative; 99 | width: 100%; 100 | min-height: 1px; 101 | padding-right: 15px; 102 | padding-left: 15px; 103 | -ms-flex: 0 0 66.666667%; 104 | flex: 0 0 66.666667%; 105 | max-width: 66.666667%;`;; 106 | export const col_9 = css`position: relative; 107 | width: 100%; 108 | min-height: 1px; 109 | padding-right: 15px; 110 | padding-left: 15px; 111 | -ms-flex: 0 0 75%; 112 | flex: 0 0 75%; 113 | max-width: 75%;`;; 114 | export const col_10 = css`position: relative; 115 | width: 100%; 116 | min-height: 1px; 117 | padding-right: 15px; 118 | padding-left: 15px; 119 | -ms-flex: 0 0 83.333333%; 120 | flex: 0 0 83.333333%; 121 | max-width: 83.333333%;`;; 122 | export const col_11 = css`position: relative; 123 | width: 100%; 124 | min-height: 1px; 125 | padding-right: 15px; 126 | padding-left: 15px; 127 | -ms-flex: 0 0 91.666667%; 128 | flex: 0 0 91.666667%; 129 | max-width: 91.666667%;`;; 130 | export const col_12 = css`position: relative; 131 | width: 100%; 132 | min-height: 1px; 133 | padding-right: 15px; 134 | padding-left: 15px; 135 | -ms-flex: 0 0 100%; 136 | flex: 0 0 100%; 137 | max-width: 100%;`;; 138 | export const col = css`position: relative; 139 | width: 100%; 140 | min-height: 1px; 141 | padding-right: 15px; 142 | padding-left: 15px; 143 | -ms-flex-preferred-size: 0; 144 | flex-basis: 0; 145 | -ms-flex-positive: 1; 146 | flex-grow: 1; 147 | max-width: 100%;`;; 148 | export const col_auto = css`position: relative; 149 | width: 100%; 150 | min-height: 1px; 151 | padding-right: 15px; 152 | padding-left: 15px; 153 | -ms-flex: 0 0 auto; 154 | flex: 0 0 auto; 155 | width: auto; 156 | max-width: none;`;; 157 | export const col_sm_1 = css`position: relative; 158 | width: 100%; 159 | min-height: 1px; 160 | padding-right: 15px; 161 | padding-left: 15px; 162 | @media (min-width: 576px) { 163 | -ms-flex: 0 0 8.333333%; 164 | flex: 0 0 8.333333%; 165 | max-width: 8.333333%; 166 | }`;; 167 | export const col_sm_2 = css`position: relative; 168 | width: 100%; 169 | min-height: 1px; 170 | padding-right: 15px; 171 | padding-left: 15px; 172 | @media (min-width: 576px) { 173 | -ms-flex: 0 0 16.666667%; 174 | flex: 0 0 16.666667%; 175 | max-width: 16.666667%; 176 | }`;; 177 | export const col_sm_3 = css`position: relative; 178 | width: 100%; 179 | min-height: 1px; 180 | padding-right: 15px; 181 | padding-left: 15px; 182 | @media (min-width: 576px) { 183 | -ms-flex: 0 0 25%; 184 | flex: 0 0 25%; 185 | max-width: 25%; 186 | }`;; 187 | export const col_sm_4 = css`position: relative; 188 | width: 100%; 189 | min-height: 1px; 190 | padding-right: 15px; 191 | padding-left: 15px; 192 | @media (min-width: 576px) { 193 | -ms-flex: 0 0 33.333333%; 194 | flex: 0 0 33.333333%; 195 | max-width: 33.333333%; 196 | }`;; 197 | export const col_sm_5 = css`position: relative; 198 | width: 100%; 199 | min-height: 1px; 200 | padding-right: 15px; 201 | padding-left: 15px; 202 | @media (min-width: 576px) { 203 | -ms-flex: 0 0 41.666667%; 204 | flex: 0 0 41.666667%; 205 | max-width: 41.666667%; 206 | }`;; 207 | export const col_sm_6 = css`position: relative; 208 | width: 100%; 209 | min-height: 1px; 210 | padding-right: 15px; 211 | padding-left: 15px; 212 | @media (min-width: 576px) { 213 | -ms-flex: 0 0 50%; 214 | flex: 0 0 50%; 215 | max-width: 50%; 216 | }`;; 217 | export const col_sm_7 = css`position: relative; 218 | width: 100%; 219 | min-height: 1px; 220 | padding-right: 15px; 221 | padding-left: 15px; 222 | @media (min-width: 576px) { 223 | -ms-flex: 0 0 58.333333%; 224 | flex: 0 0 58.333333%; 225 | max-width: 58.333333%; 226 | }`;; 227 | export const col_sm_8 = css`position: relative; 228 | width: 100%; 229 | min-height: 1px; 230 | padding-right: 15px; 231 | padding-left: 15px; 232 | @media (min-width: 576px) { 233 | -ms-flex: 0 0 66.666667%; 234 | flex: 0 0 66.666667%; 235 | max-width: 66.666667%; 236 | }`;; 237 | export const col_sm_9 = css`position: relative; 238 | width: 100%; 239 | min-height: 1px; 240 | padding-right: 15px; 241 | padding-left: 15px; 242 | @media (min-width: 576px) { 243 | -ms-flex: 0 0 75%; 244 | flex: 0 0 75%; 245 | max-width: 75%; 246 | }`;; 247 | export const col_sm_10 = css`position: relative; 248 | width: 100%; 249 | min-height: 1px; 250 | padding-right: 15px; 251 | padding-left: 15px; 252 | @media (min-width: 576px) { 253 | -ms-flex: 0 0 83.333333%; 254 | flex: 0 0 83.333333%; 255 | max-width: 83.333333%; 256 | }`;; 257 | export const col_sm_11 = css`position: relative; 258 | width: 100%; 259 | min-height: 1px; 260 | padding-right: 15px; 261 | padding-left: 15px; 262 | @media (min-width: 576px) { 263 | -ms-flex: 0 0 91.666667%; 264 | flex: 0 0 91.666667%; 265 | max-width: 91.666667%; 266 | }`;; 267 | export const col_sm_12 = css`position: relative; 268 | width: 100%; 269 | min-height: 1px; 270 | padding-right: 15px; 271 | padding-left: 15px; 272 | @media (min-width: 576px) { 273 | -ms-flex: 0 0 100%; 274 | flex: 0 0 100%; 275 | max-width: 100%; 276 | }`;; 277 | export const col_sm = css`position: relative; 278 | width: 100%; 279 | min-height: 1px; 280 | padding-right: 15px; 281 | padding-left: 15px; 282 | @media (min-width: 576px) { 283 | -ms-flex-preferred-size: 0; 284 | flex-basis: 0; 285 | -ms-flex-positive: 1; 286 | flex-grow: 1; 287 | max-width: 100%; 288 | }`;; 289 | export const col_sm_auto = css`position: relative; 290 | width: 100%; 291 | min-height: 1px; 292 | padding-right: 15px; 293 | padding-left: 15px; 294 | @media (min-width: 576px) { 295 | -ms-flex: 0 0 auto; 296 | flex: 0 0 auto; 297 | width: auto; 298 | max-width: none; 299 | }`;; 300 | export const col_md_1 = css`position: relative; 301 | width: 100%; 302 | min-height: 1px; 303 | padding-right: 15px; 304 | padding-left: 15px; 305 | @media (min-width: 768px) { 306 | -ms-flex: 0 0 8.333333%; 307 | flex: 0 0 8.333333%; 308 | max-width: 8.333333%; 309 | }`;; 310 | export const col_md_2 = css`position: relative; 311 | width: 100%; 312 | min-height: 1px; 313 | padding-right: 15px; 314 | padding-left: 15px; 315 | @media (min-width: 768px) { 316 | -ms-flex: 0 0 16.666667%; 317 | flex: 0 0 16.666667%; 318 | max-width: 16.666667%; 319 | }`;; 320 | export const col_md_3 = css`position: relative; 321 | width: 100%; 322 | min-height: 1px; 323 | padding-right: 15px; 324 | padding-left: 15px; 325 | @media (min-width: 768px) { 326 | -ms-flex: 0 0 25%; 327 | flex: 0 0 25%; 328 | max-width: 25%; 329 | }`;; 330 | export const col_md_4 = css`position: relative; 331 | width: 100%; 332 | min-height: 1px; 333 | padding-right: 15px; 334 | padding-left: 15px; 335 | @media (min-width: 768px) { 336 | -ms-flex: 0 0 33.333333%; 337 | flex: 0 0 33.333333%; 338 | max-width: 33.333333%; 339 | }`;; 340 | export const col_md_5 = css`position: relative; 341 | width: 100%; 342 | min-height: 1px; 343 | padding-right: 15px; 344 | padding-left: 15px; 345 | @media (min-width: 768px) { 346 | -ms-flex: 0 0 41.666667%; 347 | flex: 0 0 41.666667%; 348 | max-width: 41.666667%; 349 | }`;; 350 | export const col_md_6 = css`position: relative; 351 | width: 100%; 352 | min-height: 1px; 353 | padding-right: 15px; 354 | padding-left: 15px; 355 | @media (min-width: 768px) { 356 | -ms-flex: 0 0 50%; 357 | flex: 0 0 50%; 358 | max-width: 50%; 359 | }`;; 360 | export const col_md_7 = css`position: relative; 361 | width: 100%; 362 | min-height: 1px; 363 | padding-right: 15px; 364 | padding-left: 15px; 365 | @media (min-width: 768px) { 366 | -ms-flex: 0 0 58.333333%; 367 | flex: 0 0 58.333333%; 368 | max-width: 58.333333%; 369 | }`;; 370 | export const col_md_8 = css`position: relative; 371 | width: 100%; 372 | min-height: 1px; 373 | padding-right: 15px; 374 | padding-left: 15px; 375 | @media (min-width: 768px) { 376 | -ms-flex: 0 0 66.666667%; 377 | flex: 0 0 66.666667%; 378 | max-width: 66.666667%; 379 | }`;; 380 | export const col_md_9 = css`position: relative; 381 | width: 100%; 382 | min-height: 1px; 383 | padding-right: 15px; 384 | padding-left: 15px; 385 | @media (min-width: 768px) { 386 | -ms-flex: 0 0 75%; 387 | flex: 0 0 75%; 388 | max-width: 75%; 389 | }`;; 390 | export const col_md_10 = css`position: relative; 391 | width: 100%; 392 | min-height: 1px; 393 | padding-right: 15px; 394 | padding-left: 15px; 395 | @media (min-width: 768px) { 396 | -ms-flex: 0 0 83.333333%; 397 | flex: 0 0 83.333333%; 398 | max-width: 83.333333%; 399 | }`;; 400 | export const col_md_11 = css`position: relative; 401 | width: 100%; 402 | min-height: 1px; 403 | padding-right: 15px; 404 | padding-left: 15px; 405 | @media (min-width: 768px) { 406 | -ms-flex: 0 0 91.666667%; 407 | flex: 0 0 91.666667%; 408 | max-width: 91.666667%; 409 | }`;; 410 | export const col_md_12 = css`position: relative; 411 | width: 100%; 412 | min-height: 1px; 413 | padding-right: 15px; 414 | padding-left: 15px; 415 | @media (min-width: 768px) { 416 | -ms-flex: 0 0 100%; 417 | flex: 0 0 100%; 418 | max-width: 100%; 419 | }`;; 420 | export const col_md = css`position: relative; 421 | width: 100%; 422 | min-height: 1px; 423 | padding-right: 15px; 424 | padding-left: 15px; 425 | @media (min-width: 768px) { 426 | -ms-flex-preferred-size: 0; 427 | flex-basis: 0; 428 | -ms-flex-positive: 1; 429 | flex-grow: 1; 430 | max-width: 100%; 431 | }`;; 432 | export const col_md_auto = css`position: relative; 433 | width: 100%; 434 | min-height: 1px; 435 | padding-right: 15px; 436 | padding-left: 15px; 437 | @media (min-width: 768px) { 438 | -ms-flex: 0 0 auto; 439 | flex: 0 0 auto; 440 | width: auto; 441 | max-width: none; 442 | }`;; 443 | export const col_lg_1 = css`position: relative; 444 | width: 100%; 445 | min-height: 1px; 446 | padding-right: 15px; 447 | padding-left: 15px; 448 | @media (min-width: 992px) { 449 | -ms-flex: 0 0 8.333333%; 450 | flex: 0 0 8.333333%; 451 | max-width: 8.333333%; 452 | }`;; 453 | export const col_lg_2 = css`position: relative; 454 | width: 100%; 455 | min-height: 1px; 456 | padding-right: 15px; 457 | padding-left: 15px; 458 | @media (min-width: 992px) { 459 | -ms-flex: 0 0 16.666667%; 460 | flex: 0 0 16.666667%; 461 | max-width: 16.666667%; 462 | }`;; 463 | export const col_lg_3 = css`position: relative; 464 | width: 100%; 465 | min-height: 1px; 466 | padding-right: 15px; 467 | padding-left: 15px; 468 | @media (min-width: 992px) { 469 | -ms-flex: 0 0 25%; 470 | flex: 0 0 25%; 471 | max-width: 25%; 472 | }`;; 473 | export const col_lg_4 = css`position: relative; 474 | width: 100%; 475 | min-height: 1px; 476 | padding-right: 15px; 477 | padding-left: 15px; 478 | @media (min-width: 992px) { 479 | -ms-flex: 0 0 33.333333%; 480 | flex: 0 0 33.333333%; 481 | max-width: 33.333333%; 482 | }`;; 483 | export const col_lg_5 = css`position: relative; 484 | width: 100%; 485 | min-height: 1px; 486 | padding-right: 15px; 487 | padding-left: 15px; 488 | @media (min-width: 992px) { 489 | -ms-flex: 0 0 41.666667%; 490 | flex: 0 0 41.666667%; 491 | max-width: 41.666667%; 492 | }`;; 493 | export const col_lg_6 = css`position: relative; 494 | width: 100%; 495 | min-height: 1px; 496 | padding-right: 15px; 497 | padding-left: 15px; 498 | @media (min-width: 992px) { 499 | -ms-flex: 0 0 50%; 500 | flex: 0 0 50%; 501 | max-width: 50%; 502 | }`;; 503 | export const col_lg_7 = css`position: relative; 504 | width: 100%; 505 | min-height: 1px; 506 | padding-right: 15px; 507 | padding-left: 15px; 508 | @media (min-width: 992px) { 509 | -ms-flex: 0 0 58.333333%; 510 | flex: 0 0 58.333333%; 511 | max-width: 58.333333%; 512 | }`;; 513 | export const col_lg_8 = css`position: relative; 514 | width: 100%; 515 | min-height: 1px; 516 | padding-right: 15px; 517 | padding-left: 15px; 518 | @media (min-width: 992px) { 519 | -ms-flex: 0 0 66.666667%; 520 | flex: 0 0 66.666667%; 521 | max-width: 66.666667%; 522 | }`;; 523 | export const col_lg_9 = css`position: relative; 524 | width: 100%; 525 | min-height: 1px; 526 | padding-right: 15px; 527 | padding-left: 15px; 528 | @media (min-width: 992px) { 529 | -ms-flex: 0 0 75%; 530 | flex: 0 0 75%; 531 | max-width: 75%; 532 | }`;; 533 | export const col_lg_10 = css`position: relative; 534 | width: 100%; 535 | min-height: 1px; 536 | padding-right: 15px; 537 | padding-left: 15px; 538 | @media (min-width: 992px) { 539 | -ms-flex: 0 0 83.333333%; 540 | flex: 0 0 83.333333%; 541 | max-width: 83.333333%; 542 | }`;; 543 | export const col_lg_11 = css`position: relative; 544 | width: 100%; 545 | min-height: 1px; 546 | padding-right: 15px; 547 | padding-left: 15px; 548 | @media (min-width: 992px) { 549 | -ms-flex: 0 0 91.666667%; 550 | flex: 0 0 91.666667%; 551 | max-width: 91.666667%; 552 | }`;; 553 | export const col_lg_12 = css`position: relative; 554 | width: 100%; 555 | min-height: 1px; 556 | padding-right: 15px; 557 | padding-left: 15px; 558 | @media (min-width: 992px) { 559 | -ms-flex: 0 0 100%; 560 | flex: 0 0 100%; 561 | max-width: 100%; 562 | }`;; 563 | export const col_lg = css`position: relative; 564 | width: 100%; 565 | min-height: 1px; 566 | padding-right: 15px; 567 | padding-left: 15px; 568 | @media (min-width: 992px) { 569 | -ms-flex-preferred-size: 0; 570 | flex-basis: 0; 571 | -ms-flex-positive: 1; 572 | flex-grow: 1; 573 | max-width: 100%; 574 | }`;; 575 | export const col_lg_auto = css`position: relative; 576 | width: 100%; 577 | min-height: 1px; 578 | padding-right: 15px; 579 | padding-left: 15px; 580 | @media (min-width: 992px) { 581 | -ms-flex: 0 0 auto; 582 | flex: 0 0 auto; 583 | width: auto; 584 | max-width: none; 585 | }`;; 586 | export const col_xl_1 = css`position: relative; 587 | width: 100%; 588 | min-height: 1px; 589 | padding-right: 15px; 590 | padding-left: 15px; 591 | @media (min-width: 1200px) { 592 | -ms-flex: 0 0 8.333333%; 593 | flex: 0 0 8.333333%; 594 | max-width: 8.333333%; 595 | }`;; 596 | export const col_xl_2 = css`position: relative; 597 | width: 100%; 598 | min-height: 1px; 599 | padding-right: 15px; 600 | padding-left: 15px; 601 | @media (min-width: 1200px) { 602 | -ms-flex: 0 0 16.666667%; 603 | flex: 0 0 16.666667%; 604 | max-width: 16.666667%; 605 | }`;; 606 | export const col_xl_3 = css`position: relative; 607 | width: 100%; 608 | min-height: 1px; 609 | padding-right: 15px; 610 | padding-left: 15px; 611 | @media (min-width: 1200px) { 612 | -ms-flex: 0 0 25%; 613 | flex: 0 0 25%; 614 | max-width: 25%; 615 | }`;; 616 | export const col_xl_4 = css`position: relative; 617 | width: 100%; 618 | min-height: 1px; 619 | padding-right: 15px; 620 | padding-left: 15px; 621 | @media (min-width: 1200px) { 622 | -ms-flex: 0 0 33.333333%; 623 | flex: 0 0 33.333333%; 624 | max-width: 33.333333%; 625 | }`;; 626 | export const col_xl_5 = css`position: relative; 627 | width: 100%; 628 | min-height: 1px; 629 | padding-right: 15px; 630 | padding-left: 15px; 631 | @media (min-width: 1200px) { 632 | -ms-flex: 0 0 41.666667%; 633 | flex: 0 0 41.666667%; 634 | max-width: 41.666667%; 635 | }`;; 636 | export const col_xl_6 = css`position: relative; 637 | width: 100%; 638 | min-height: 1px; 639 | padding-right: 15px; 640 | padding-left: 15px; 641 | @media (min-width: 1200px) { 642 | -ms-flex: 0 0 50%; 643 | flex: 0 0 50%; 644 | max-width: 50%; 645 | }`;; 646 | export const col_xl_7 = css`position: relative; 647 | width: 100%; 648 | min-height: 1px; 649 | padding-right: 15px; 650 | padding-left: 15px; 651 | @media (min-width: 1200px) { 652 | -ms-flex: 0 0 58.333333%; 653 | flex: 0 0 58.333333%; 654 | max-width: 58.333333%; 655 | }`;; 656 | export const col_xl_8 = css`position: relative; 657 | width: 100%; 658 | min-height: 1px; 659 | padding-right: 15px; 660 | padding-left: 15px; 661 | @media (min-width: 1200px) { 662 | -ms-flex: 0 0 66.666667%; 663 | flex: 0 0 66.666667%; 664 | max-width: 66.666667%; 665 | }`;; 666 | export const col_xl_9 = css`position: relative; 667 | width: 100%; 668 | min-height: 1px; 669 | padding-right: 15px; 670 | padding-left: 15px; 671 | @media (min-width: 1200px) { 672 | -ms-flex: 0 0 75%; 673 | flex: 0 0 75%; 674 | max-width: 75%; 675 | }`;; 676 | export const col_xl_10 = css`position: relative; 677 | width: 100%; 678 | min-height: 1px; 679 | padding-right: 15px; 680 | padding-left: 15px; 681 | @media (min-width: 1200px) { 682 | -ms-flex: 0 0 83.333333%; 683 | flex: 0 0 83.333333%; 684 | max-width: 83.333333%; 685 | }`;; 686 | export const col_xl_11 = css`position: relative; 687 | width: 100%; 688 | min-height: 1px; 689 | padding-right: 15px; 690 | padding-left: 15px; 691 | @media (min-width: 1200px) { 692 | -ms-flex: 0 0 91.666667%; 693 | flex: 0 0 91.666667%; 694 | max-width: 91.666667%; 695 | }`;; 696 | export const col_xl_12 = css`position: relative; 697 | width: 100%; 698 | min-height: 1px; 699 | padding-right: 15px; 700 | padding-left: 15px; 701 | @media (min-width: 1200px) { 702 | -ms-flex: 0 0 100%; 703 | flex: 0 0 100%; 704 | max-width: 100%; 705 | }`;; 706 | export const col_xl = css`position: relative; 707 | width: 100%; 708 | min-height: 1px; 709 | padding-right: 15px; 710 | padding-left: 15px; 711 | @media (min-width: 1200px) { 712 | -ms-flex-preferred-size: 0; 713 | flex-basis: 0; 714 | -ms-flex-positive: 1; 715 | flex-grow: 1; 716 | max-width: 100%; 717 | }`;; 718 | export const col_xl_auto = css`position: relative; 719 | width: 100%; 720 | min-height: 1px; 721 | padding-right: 15px; 722 | padding-left: 15px; 723 | @media (min-width: 1200px) { 724 | -ms-flex: 0 0 auto; 725 | flex: 0 0 auto; 726 | width: auto; 727 | max-width: none; 728 | }`;; 729 | export const order_1 = css`-ms-flex-order: 1; 730 | order: 1;`;; 731 | export const order_2 = css`-ms-flex-order: 2; 732 | order: 2;`;; 733 | export const order_3 = css`-ms-flex-order: 3; 734 | order: 3;`;; 735 | export const order_4 = css`-ms-flex-order: 4; 736 | order: 4;`;; 737 | export const order_5 = css`-ms-flex-order: 5; 738 | order: 5;`;; 739 | export const order_6 = css`-ms-flex-order: 6; 740 | order: 6;`;; 741 | export const order_7 = css`-ms-flex-order: 7; 742 | order: 7;`;; 743 | export const order_8 = css`-ms-flex-order: 8; 744 | order: 8;`;; 745 | export const order_9 = css`-ms-flex-order: 9; 746 | order: 9;`;; 747 | export const order_10 = css`-ms-flex-order: 10; 748 | order: 10;`;; 749 | export const order_11 = css`-ms-flex-order: 11; 750 | order: 11;`;; 751 | export const order_12 = css`-ms-flex-order: 12; 752 | order: 12;`;; 753 | export const order_sm_1 = css`@media (min-width: 576px) { 754 | -ms-flex-order: 1; 755 | order: 1; 756 | }`;; 757 | export const order_sm_2 = css`@media (min-width: 576px) { 758 | -ms-flex-order: 2; 759 | order: 2; 760 | }`;; 761 | export const order_sm_3 = css`@media (min-width: 576px) { 762 | -ms-flex-order: 3; 763 | order: 3; 764 | }`;; 765 | export const order_sm_4 = css`@media (min-width: 576px) { 766 | -ms-flex-order: 4; 767 | order: 4; 768 | }`;; 769 | export const order_sm_5 = css`@media (min-width: 576px) { 770 | -ms-flex-order: 5; 771 | order: 5; 772 | }`;; 773 | export const order_sm_6 = css`@media (min-width: 576px) { 774 | -ms-flex-order: 6; 775 | order: 6; 776 | }`;; 777 | export const order_sm_7 = css`@media (min-width: 576px) { 778 | -ms-flex-order: 7; 779 | order: 7; 780 | }`;; 781 | export const order_sm_8 = css`@media (min-width: 576px) { 782 | -ms-flex-order: 8; 783 | order: 8; 784 | }`;; 785 | export const order_sm_9 = css`@media (min-width: 576px) { 786 | -ms-flex-order: 9; 787 | order: 9; 788 | }`;; 789 | export const order_sm_10 = css`@media (min-width: 576px) { 790 | -ms-flex-order: 10; 791 | order: 10; 792 | }`;; 793 | export const order_sm_11 = css`@media (min-width: 576px) { 794 | -ms-flex-order: 11; 795 | order: 11; 796 | }`;; 797 | export const order_sm_12 = css`@media (min-width: 576px) { 798 | -ms-flex-order: 12; 799 | order: 12; 800 | }`;; 801 | export const order_md_1 = css`@media (min-width: 768px) { 802 | -ms-flex-order: 1; 803 | order: 1; 804 | }`;; 805 | export const order_md_2 = css`@media (min-width: 768px) { 806 | -ms-flex-order: 2; 807 | order: 2; 808 | }`;; 809 | export const order_md_3 = css`@media (min-width: 768px) { 810 | -ms-flex-order: 3; 811 | order: 3; 812 | }`;; 813 | export const order_md_4 = css`@media (min-width: 768px) { 814 | -ms-flex-order: 4; 815 | order: 4; 816 | }`;; 817 | export const order_md_5 = css`@media (min-width: 768px) { 818 | -ms-flex-order: 5; 819 | order: 5; 820 | }`;; 821 | export const order_md_6 = css`@media (min-width: 768px) { 822 | -ms-flex-order: 6; 823 | order: 6; 824 | }`;; 825 | export const order_md_7 = css`@media (min-width: 768px) { 826 | -ms-flex-order: 7; 827 | order: 7; 828 | }`;; 829 | export const order_md_8 = css`@media (min-width: 768px) { 830 | -ms-flex-order: 8; 831 | order: 8; 832 | }`;; 833 | export const order_md_9 = css`@media (min-width: 768px) { 834 | -ms-flex-order: 9; 835 | order: 9; 836 | }`;; 837 | export const order_md_10 = css`@media (min-width: 768px) { 838 | -ms-flex-order: 10; 839 | order: 10; 840 | }`;; 841 | export const order_md_11 = css`@media (min-width: 768px) { 842 | -ms-flex-order: 11; 843 | order: 11; 844 | }`;; 845 | export const order_md_12 = css`@media (min-width: 768px) { 846 | -ms-flex-order: 12; 847 | order: 12; 848 | }`;; 849 | export const order_lg_1 = css`@media (min-width: 992px) { 850 | -ms-flex-order: 1; 851 | order: 1; 852 | }`;; 853 | export const order_lg_2 = css`@media (min-width: 992px) { 854 | -ms-flex-order: 2; 855 | order: 2; 856 | }`;; 857 | export const order_lg_3 = css`@media (min-width: 992px) { 858 | -ms-flex-order: 3; 859 | order: 3; 860 | }`;; 861 | export const order_lg_4 = css`@media (min-width: 992px) { 862 | -ms-flex-order: 4; 863 | order: 4; 864 | }`;; 865 | export const order_lg_5 = css`@media (min-width: 992px) { 866 | -ms-flex-order: 5; 867 | order: 5; 868 | }`;; 869 | export const order_lg_6 = css`@media (min-width: 992px) { 870 | -ms-flex-order: 6; 871 | order: 6; 872 | }`;; 873 | export const order_lg_7 = css`@media (min-width: 992px) { 874 | -ms-flex-order: 7; 875 | order: 7; 876 | }`;; 877 | export const order_lg_8 = css`@media (min-width: 992px) { 878 | -ms-flex-order: 8; 879 | order: 8; 880 | }`;; 881 | export const order_lg_9 = css`@media (min-width: 992px) { 882 | -ms-flex-order: 9; 883 | order: 9; 884 | }`;; 885 | export const order_lg_10 = css`@media (min-width: 992px) { 886 | -ms-flex-order: 10; 887 | order: 10; 888 | }`;; 889 | export const order_lg_11 = css`@media (min-width: 992px) { 890 | -ms-flex-order: 11; 891 | order: 11; 892 | }`;; 893 | export const order_lg_12 = css`@media (min-width: 992px) { 894 | -ms-flex-order: 12; 895 | order: 12; 896 | }`;; 897 | export const order_xl_1 = css`@media (min-width: 1200px) { 898 | -ms-flex-order: 1; 899 | order: 1; 900 | }`;; 901 | export const order_xl_2 = css`@media (min-width: 1200px) { 902 | -ms-flex-order: 2; 903 | order: 2; 904 | }`;; 905 | export const order_xl_3 = css`@media (min-width: 1200px) { 906 | -ms-flex-order: 3; 907 | order: 3; 908 | }`;; 909 | export const order_xl_4 = css`@media (min-width: 1200px) { 910 | -ms-flex-order: 4; 911 | order: 4; 912 | }`;; 913 | export const order_xl_5 = css`@media (min-width: 1200px) { 914 | -ms-flex-order: 5; 915 | order: 5; 916 | }`;; 917 | export const order_xl_6 = css`@media (min-width: 1200px) { 918 | -ms-flex-order: 6; 919 | order: 6; 920 | }`;; 921 | export const order_xl_7 = css`@media (min-width: 1200px) { 922 | -ms-flex-order: 7; 923 | order: 7; 924 | }`;; 925 | export const order_xl_8 = css`@media (min-width: 1200px) { 926 | -ms-flex-order: 8; 927 | order: 8; 928 | }`;; 929 | export const order_xl_9 = css`@media (min-width: 1200px) { 930 | -ms-flex-order: 9; 931 | order: 9; 932 | }`;; 933 | export const order_xl_10 = css`@media (min-width: 1200px) { 934 | -ms-flex-order: 10; 935 | order: 10; 936 | }`;; 937 | export const order_xl_11 = css`@media (min-width: 1200px) { 938 | -ms-flex-order: 11; 939 | order: 11; 940 | }`;; 941 | export const order_xl_12 = css`@media (min-width: 1200px) { 942 | -ms-flex-order: 12; 943 | order: 12; 944 | }`;; 945 | export const flex_row = css`-ms-flex-direction: row; 946 | flex-direction: row;`;; 947 | export const flex_column = css`-ms-flex-direction: column; 948 | flex-direction: column;`;; 949 | export const flex_row_reverse = css`-ms-flex-direction: row-reverse; 950 | flex-direction: row-reverse;`;; 951 | export const flex_column_reverse = css`-ms-flex-direction: column-reverse; 952 | flex-direction: column-reverse;`;; 953 | export const flex_wrap = css`-ms-flex-wrap: wrap; 954 | flex-wrap: wrap;`;; 955 | export const flex_nowrap = css`-ms-flex-wrap: nowrap; 956 | flex-wrap: nowrap;`;; 957 | export const flex_wrap_reverse = css`-ms-flex-wrap: wrap-reverse; 958 | flex-wrap: wrap-reverse;`;; 959 | export const justify_content_start = css`-ms-flex-pack: start; 960 | justify-content: flex-start;`;; 961 | export const justify_content_end = css`-ms-flex-pack: end; 962 | justify-content: flex-end;`;; 963 | export const justify_content_center = css`-ms-flex-pack: center; 964 | justify-content: center;`;; 965 | export const justify_content_between = css`-ms-flex-pack: justify; 966 | justify-content: space-between;`;; 967 | export const justify_content_around = css`-ms-flex-pack: distribute; 968 | justify-content: space-around;`;; 969 | export const align_items_start = css`-ms-flex-align: start; 970 | align-items: flex-start;`;; 971 | export const align_items_end = css`-ms-flex-align: end; 972 | align-items: flex-end;`;; 973 | export const align_items_center = css`-ms-flex-align: center; 974 | align-items: center;`;; 975 | export const align_items_baseline = css`-ms-flex-align: baseline; 976 | align-items: baseline;`;; 977 | export const align_items_stretch = css`-ms-flex-align: stretch; 978 | align-items: stretch;`;; 979 | export const align_content_start = css`-ms-flex-line-pack: start; 980 | align-content: flex-start;`;; 981 | export const align_content_end = css`-ms-flex-line-pack: end; 982 | align-content: flex-end;`;; 983 | export const align_content_center = css`-ms-flex-line-pack: center; 984 | align-content: center;`;; 985 | export const align_content_between = css`-ms-flex-line-pack: justify; 986 | align-content: space-between;`;; 987 | export const align_content_around = css`-ms-flex-line-pack: distribute; 988 | align-content: space-around;`;; 989 | export const align_content_stretch = css`-ms-flex-line-pack: stretch; 990 | align-content: stretch;`;; 991 | export const align_self_auto = css`-ms-flex-item-align: auto; 992 | align-self: auto;`;; 993 | export const align_self_start = css`-ms-flex-item-align: start; 994 | align-self: flex-start;`;; 995 | export const align_self_end = css`-ms-flex-item-align: end; 996 | align-self: flex-end;`;; 997 | export const align_self_center = css`-ms-flex-item-align: center; 998 | align-self: center;`;; 999 | export const align_self_baseline = css`-ms-flex-item-align: baseline; 1000 | align-self: baseline;`;; 1001 | export const align_self_stretch = css`-ms-flex-item-align: stretch; 1002 | align-self: stretch;`;; 1003 | export const flex_sm_row = css`@media (min-width: 576px) { 1004 | -ms-flex-direction: row; 1005 | flex-direction: row; 1006 | }`;; 1007 | export const flex_sm_column = css`@media (min-width: 576px) { 1008 | -ms-flex-direction: column; 1009 | flex-direction: column; 1010 | }`;; 1011 | export const flex_sm_row_reverse = css`@media (min-width: 576px) { 1012 | -ms-flex-direction: row-reverse; 1013 | flex-direction: row-reverse; 1014 | }`;; 1015 | export const flex_sm_column_reverse = css`@media (min-width: 576px) { 1016 | -ms-flex-direction: column-reverse; 1017 | flex-direction: column-reverse; 1018 | }`;; 1019 | export const flex_sm_wrap = css`@media (min-width: 576px) { 1020 | -ms-flex-wrap: wrap; 1021 | flex-wrap: wrap; 1022 | }`;; 1023 | export const flex_sm_nowrap = css`@media (min-width: 576px) { 1024 | -ms-flex-wrap: nowrap; 1025 | flex-wrap: nowrap; 1026 | }`;; 1027 | export const flex_sm_wrap_reverse = css`@media (min-width: 576px) { 1028 | -ms-flex-wrap: wrap-reverse; 1029 | flex-wrap: wrap-reverse; 1030 | }`;; 1031 | export const justify_content_sm_start = css`@media (min-width: 576px) { 1032 | -ms-flex-pack: start; 1033 | justify-content: flex-start; 1034 | }`;; 1035 | export const justify_content_sm_end = css`@media (min-width: 576px) { 1036 | -ms-flex-pack: end; 1037 | justify-content: flex-end; 1038 | }`;; 1039 | export const justify_content_sm_center = css`@media (min-width: 576px) { 1040 | -ms-flex-pack: center; 1041 | justify-content: center; 1042 | }`;; 1043 | export const justify_content_sm_between = css`@media (min-width: 576px) { 1044 | -ms-flex-pack: justify; 1045 | justify-content: space-between; 1046 | }`;; 1047 | export const justify_content_sm_around = css`@media (min-width: 576px) { 1048 | -ms-flex-pack: distribute; 1049 | justify-content: space-around; 1050 | }`;; 1051 | export const align_items_sm_start = css`@media (min-width: 576px) { 1052 | -ms-flex-align: start; 1053 | align-items: flex-start; 1054 | }`;; 1055 | export const align_items_sm_end = css`@media (min-width: 576px) { 1056 | -ms-flex-align: end; 1057 | align-items: flex-end; 1058 | }`;; 1059 | export const align_items_sm_center = css`@media (min-width: 576px) { 1060 | -ms-flex-align: center; 1061 | align-items: center; 1062 | }`;; 1063 | export const align_items_sm_baseline = css`@media (min-width: 576px) { 1064 | -ms-flex-align: baseline; 1065 | align-items: baseline; 1066 | }`;; 1067 | export const align_items_sm_stretch = css`@media (min-width: 576px) { 1068 | -ms-flex-align: stretch; 1069 | align-items: stretch; 1070 | }`;; 1071 | export const align_content_sm_start = css`@media (min-width: 576px) { 1072 | -ms-flex-line-pack: start; 1073 | align-content: flex-start; 1074 | }`;; 1075 | export const align_content_sm_end = css`@media (min-width: 576px) { 1076 | -ms-flex-line-pack: end; 1077 | align-content: flex-end; 1078 | }`;; 1079 | export const align_content_sm_center = css`@media (min-width: 576px) { 1080 | -ms-flex-line-pack: center; 1081 | align-content: center; 1082 | }`;; 1083 | export const align_content_sm_between = css`@media (min-width: 576px) { 1084 | -ms-flex-line-pack: justify; 1085 | align-content: space-between; 1086 | }`;; 1087 | export const align_content_sm_around = css`@media (min-width: 576px) { 1088 | -ms-flex-line-pack: distribute; 1089 | align-content: space-around; 1090 | }`;; 1091 | export const align_content_sm_stretch = css`@media (min-width: 576px) { 1092 | -ms-flex-line-pack: stretch; 1093 | align-content: stretch; 1094 | }`;; 1095 | export const align_self_sm_auto = css`@media (min-width: 576px) { 1096 | -ms-flex-item-align: auto; 1097 | align-self: auto; 1098 | }`;; 1099 | export const align_self_sm_start = css`@media (min-width: 576px) { 1100 | -ms-flex-item-align: start; 1101 | align-self: flex-start; 1102 | }`;; 1103 | export const align_self_sm_end = css`@media (min-width: 576px) { 1104 | -ms-flex-item-align: end; 1105 | align-self: flex-end; 1106 | }`;; 1107 | export const align_self_sm_center = css`@media (min-width: 576px) { 1108 | -ms-flex-item-align: center; 1109 | align-self: center; 1110 | }`;; 1111 | export const align_self_sm_baseline = css`@media (min-width: 576px) { 1112 | -ms-flex-item-align: baseline; 1113 | align-self: baseline; 1114 | }`;; 1115 | export const align_self_sm_stretch = css`@media (min-width: 576px) { 1116 | -ms-flex-item-align: stretch; 1117 | align-self: stretch; 1118 | }`;; 1119 | export const flex_md_row = css`@media (min-width: 768px) { 1120 | -ms-flex-direction: row; 1121 | flex-direction: row; 1122 | }`;; 1123 | export const flex_md_column = css`@media (min-width: 768px) { 1124 | -ms-flex-direction: column; 1125 | flex-direction: column; 1126 | }`;; 1127 | export const flex_md_row_reverse = css`@media (min-width: 768px) { 1128 | -ms-flex-direction: row-reverse; 1129 | flex-direction: row-reverse; 1130 | }`;; 1131 | export const flex_md_column_reverse = css`@media (min-width: 768px) { 1132 | -ms-flex-direction: column-reverse; 1133 | flex-direction: column-reverse; 1134 | }`;; 1135 | export const flex_md_wrap = css`@media (min-width: 768px) { 1136 | -ms-flex-wrap: wrap; 1137 | flex-wrap: wrap; 1138 | }`;; 1139 | export const flex_md_nowrap = css`@media (min-width: 768px) { 1140 | -ms-flex-wrap: nowrap; 1141 | flex-wrap: nowrap; 1142 | }`;; 1143 | export const flex_md_wrap_reverse = css`@media (min-width: 768px) { 1144 | -ms-flex-wrap: wrap-reverse; 1145 | flex-wrap: wrap-reverse; 1146 | }`;; 1147 | export const justify_content_md_start = css`@media (min-width: 768px) { 1148 | -ms-flex-pack: start; 1149 | justify-content: flex-start; 1150 | }`;; 1151 | export const justify_content_md_end = css`@media (min-width: 768px) { 1152 | -ms-flex-pack: end; 1153 | justify-content: flex-end; 1154 | }`;; 1155 | export const justify_content_md_center = css`@media (min-width: 768px) { 1156 | -ms-flex-pack: center; 1157 | justify-content: center; 1158 | }`;; 1159 | export const justify_content_md_between = css`@media (min-width: 768px) { 1160 | -ms-flex-pack: justify; 1161 | justify-content: space-between; 1162 | }`;; 1163 | export const justify_content_md_around = css`@media (min-width: 768px) { 1164 | -ms-flex-pack: distribute; 1165 | justify-content: space-around; 1166 | }`;; 1167 | export const align_items_md_start = css`@media (min-width: 768px) { 1168 | -ms-flex-align: start; 1169 | align-items: flex-start; 1170 | }`;; 1171 | export const align_items_md_end = css`@media (min-width: 768px) { 1172 | -ms-flex-align: end; 1173 | align-items: flex-end; 1174 | }`;; 1175 | export const align_items_md_center = css`@media (min-width: 768px) { 1176 | -ms-flex-align: center; 1177 | align-items: center; 1178 | }`;; 1179 | export const align_items_md_baseline = css`@media (min-width: 768px) { 1180 | -ms-flex-align: baseline; 1181 | align-items: baseline; 1182 | }`;; 1183 | export const align_items_md_stretch = css`@media (min-width: 768px) { 1184 | -ms-flex-align: stretch; 1185 | align-items: stretch; 1186 | }`;; 1187 | export const align_content_md_start = css`@media (min-width: 768px) { 1188 | -ms-flex-line-pack: start; 1189 | align-content: flex-start; 1190 | }`;; 1191 | export const align_content_md_end = css`@media (min-width: 768px) { 1192 | -ms-flex-line-pack: end; 1193 | align-content: flex-end; 1194 | }`;; 1195 | export const align_content_md_center = css`@media (min-width: 768px) { 1196 | -ms-flex-line-pack: center; 1197 | align-content: center; 1198 | }`;; 1199 | export const align_content_md_between = css`@media (min-width: 768px) { 1200 | -ms-flex-line-pack: justify; 1201 | align-content: space-between; 1202 | }`;; 1203 | export const align_content_md_around = css`@media (min-width: 768px) { 1204 | -ms-flex-line-pack: distribute; 1205 | align-content: space-around; 1206 | }`;; 1207 | export const align_content_md_stretch = css`@media (min-width: 768px) { 1208 | -ms-flex-line-pack: stretch; 1209 | align-content: stretch; 1210 | }`;; 1211 | export const align_self_md_auto = css`@media (min-width: 768px) { 1212 | -ms-flex-item-align: auto; 1213 | align-self: auto; 1214 | }`;; 1215 | export const align_self_md_start = css`@media (min-width: 768px) { 1216 | -ms-flex-item-align: start; 1217 | align-self: flex-start; 1218 | }`;; 1219 | export const align_self_md_end = css`@media (min-width: 768px) { 1220 | -ms-flex-item-align: end; 1221 | align-self: flex-end; 1222 | }`;; 1223 | export const align_self_md_center = css`@media (min-width: 768px) { 1224 | -ms-flex-item-align: center; 1225 | align-self: center; 1226 | }`;; 1227 | export const align_self_md_baseline = css`@media (min-width: 768px) { 1228 | -ms-flex-item-align: baseline; 1229 | align-self: baseline; 1230 | }`;; 1231 | export const align_self_md_stretch = css`@media (min-width: 768px) { 1232 | -ms-flex-item-align: stretch; 1233 | align-self: stretch; 1234 | }`;; 1235 | export const flex_lg_row = css`@media (min-width: 992px) { 1236 | -ms-flex-direction: row; 1237 | flex-direction: row; 1238 | }`;; 1239 | export const flex_lg_column = css`@media (min-width: 992px) { 1240 | -ms-flex-direction: column; 1241 | flex-direction: column; 1242 | }`;; 1243 | export const flex_lg_row_reverse = css`@media (min-width: 992px) { 1244 | -ms-flex-direction: row-reverse; 1245 | flex-direction: row-reverse; 1246 | }`;; 1247 | export const flex_lg_column_reverse = css`@media (min-width: 992px) { 1248 | -ms-flex-direction: column-reverse; 1249 | flex-direction: column-reverse; 1250 | }`;; 1251 | export const flex_lg_wrap = css`@media (min-width: 992px) { 1252 | -ms-flex-wrap: wrap; 1253 | flex-wrap: wrap; 1254 | }`;; 1255 | export const flex_lg_nowrap = css`@media (min-width: 992px) { 1256 | -ms-flex-wrap: nowrap; 1257 | flex-wrap: nowrap; 1258 | }`;; 1259 | export const flex_lg_wrap_reverse = css`@media (min-width: 992px) { 1260 | -ms-flex-wrap: wrap-reverse; 1261 | flex-wrap: wrap-reverse; 1262 | }`;; 1263 | export const justify_content_lg_start = css`@media (min-width: 992px) { 1264 | -ms-flex-pack: start; 1265 | justify-content: flex-start; 1266 | }`;; 1267 | export const justify_content_lg_end = css`@media (min-width: 992px) { 1268 | -ms-flex-pack: end; 1269 | justify-content: flex-end; 1270 | }`;; 1271 | export const justify_content_lg_center = css`@media (min-width: 992px) { 1272 | -ms-flex-pack: center; 1273 | justify-content: center; 1274 | }`;; 1275 | export const justify_content_lg_between = css`@media (min-width: 992px) { 1276 | -ms-flex-pack: justify; 1277 | justify-content: space-between; 1278 | }`;; 1279 | export const justify_content_lg_around = css`@media (min-width: 992px) { 1280 | -ms-flex-pack: distribute; 1281 | justify-content: space-around; 1282 | }`;; 1283 | export const align_items_lg_start = css`@media (min-width: 992px) { 1284 | -ms-flex-align: start; 1285 | align-items: flex-start; 1286 | }`;; 1287 | export const align_items_lg_end = css`@media (min-width: 992px) { 1288 | -ms-flex-align: end; 1289 | align-items: flex-end; 1290 | }`;; 1291 | export const align_items_lg_center = css`@media (min-width: 992px) { 1292 | -ms-flex-align: center; 1293 | align-items: center; 1294 | }`;; 1295 | export const align_items_lg_baseline = css`@media (min-width: 992px) { 1296 | -ms-flex-align: baseline; 1297 | align-items: baseline; 1298 | }`;; 1299 | export const align_items_lg_stretch = css`@media (min-width: 992px) { 1300 | -ms-flex-align: stretch; 1301 | align-items: stretch; 1302 | }`;; 1303 | export const align_content_lg_start = css`@media (min-width: 992px) { 1304 | -ms-flex-line-pack: start; 1305 | align-content: flex-start; 1306 | }`;; 1307 | export const align_content_lg_end = css`@media (min-width: 992px) { 1308 | -ms-flex-line-pack: end; 1309 | align-content: flex-end; 1310 | }`;; 1311 | export const align_content_lg_center = css`@media (min-width: 992px) { 1312 | -ms-flex-line-pack: center; 1313 | align-content: center; 1314 | }`;; 1315 | export const align_content_lg_between = css`@media (min-width: 992px) { 1316 | -ms-flex-line-pack: justify; 1317 | align-content: space-between; 1318 | }`;; 1319 | export const align_content_lg_around = css`@media (min-width: 992px) { 1320 | -ms-flex-line-pack: distribute; 1321 | align-content: space-around; 1322 | }`;; 1323 | export const align_content_lg_stretch = css`@media (min-width: 992px) { 1324 | -ms-flex-line-pack: stretch; 1325 | align-content: stretch; 1326 | }`;; 1327 | export const align_self_lg_auto = css`@media (min-width: 992px) { 1328 | -ms-flex-item-align: auto; 1329 | align-self: auto; 1330 | }`;; 1331 | export const align_self_lg_start = css`@media (min-width: 992px) { 1332 | -ms-flex-item-align: start; 1333 | align-self: flex-start; 1334 | }`;; 1335 | export const align_self_lg_end = css`@media (min-width: 992px) { 1336 | -ms-flex-item-align: end; 1337 | align-self: flex-end; 1338 | }`;; 1339 | export const align_self_lg_center = css`@media (min-width: 992px) { 1340 | -ms-flex-item-align: center; 1341 | align-self: center; 1342 | }`;; 1343 | export const align_self_lg_baseline = css`@media (min-width: 992px) { 1344 | -ms-flex-item-align: baseline; 1345 | align-self: baseline; 1346 | }`;; 1347 | export const align_self_lg_stretch = css`@media (min-width: 992px) { 1348 | -ms-flex-item-align: stretch; 1349 | align-self: stretch; 1350 | }`;; 1351 | export const flex_xl_row = css`@media (min-width: 1200px) { 1352 | -ms-flex-direction: row; 1353 | flex-direction: row; 1354 | }`;; 1355 | export const flex_xl_column = css`@media (min-width: 1200px) { 1356 | -ms-flex-direction: column; 1357 | flex-direction: column; 1358 | }`;; 1359 | export const flex_xl_row_reverse = css`@media (min-width: 1200px) { 1360 | -ms-flex-direction: row-reverse; 1361 | flex-direction: row-reverse; 1362 | }`;; 1363 | export const flex_xl_column_reverse = css`@media (min-width: 1200px) { 1364 | -ms-flex-direction: column-reverse; 1365 | flex-direction: column-reverse; 1366 | }`;; 1367 | export const flex_xl_wrap = css`@media (min-width: 1200px) { 1368 | -ms-flex-wrap: wrap; 1369 | flex-wrap: wrap; 1370 | }`;; 1371 | export const flex_xl_nowrap = css`@media (min-width: 1200px) { 1372 | -ms-flex-wrap: nowrap; 1373 | flex-wrap: nowrap; 1374 | }`;; 1375 | export const flex_xl_wrap_reverse = css`@media (min-width: 1200px) { 1376 | -ms-flex-wrap: wrap-reverse; 1377 | flex-wrap: wrap-reverse; 1378 | }`;; 1379 | export const justify_content_xl_start = css`@media (min-width: 1200px) { 1380 | -ms-flex-pack: start; 1381 | justify-content: flex-start; 1382 | }`;; 1383 | export const justify_content_xl_end = css`@media (min-width: 1200px) { 1384 | -ms-flex-pack: end; 1385 | justify-content: flex-end; 1386 | }`;; 1387 | export const justify_content_xl_center = css`@media (min-width: 1200px) { 1388 | -ms-flex-pack: center; 1389 | justify-content: center; 1390 | }`;; 1391 | export const justify_content_xl_between = css`@media (min-width: 1200px) { 1392 | -ms-flex-pack: justify; 1393 | justify-content: space-between; 1394 | }`;; 1395 | export const justify_content_xl_around = css`@media (min-width: 1200px) { 1396 | -ms-flex-pack: distribute; 1397 | justify-content: space-around; 1398 | }`;; 1399 | export const align_items_xl_start = css`@media (min-width: 1200px) { 1400 | -ms-flex-align: start; 1401 | align-items: flex-start; 1402 | }`;; 1403 | export const align_items_xl_end = css`@media (min-width: 1200px) { 1404 | -ms-flex-align: end; 1405 | align-items: flex-end; 1406 | }`;; 1407 | export const align_items_xl_center = css`@media (min-width: 1200px) { 1408 | -ms-flex-align: center; 1409 | align-items: center; 1410 | }`;; 1411 | export const align_items_xl_baseline = css`@media (min-width: 1200px) { 1412 | -ms-flex-align: baseline; 1413 | align-items: baseline; 1414 | }`;; 1415 | export const align_items_xl_stretch = css`@media (min-width: 1200px) { 1416 | -ms-flex-align: stretch; 1417 | align-items: stretch; 1418 | }`;; 1419 | export const align_content_xl_start = css`@media (min-width: 1200px) { 1420 | -ms-flex-line-pack: start; 1421 | align-content: flex-start; 1422 | }`;; 1423 | export const align_content_xl_end = css`@media (min-width: 1200px) { 1424 | -ms-flex-line-pack: end; 1425 | align-content: flex-end; 1426 | }`;; 1427 | export const align_content_xl_center = css`@media (min-width: 1200px) { 1428 | -ms-flex-line-pack: center; 1429 | align-content: center; 1430 | }`;; 1431 | export const align_content_xl_between = css`@media (min-width: 1200px) { 1432 | -ms-flex-line-pack: justify; 1433 | align-content: space-between; 1434 | }`;; 1435 | export const align_content_xl_around = css`@media (min-width: 1200px) { 1436 | -ms-flex-line-pack: distribute; 1437 | align-content: space-around; 1438 | }`;; 1439 | export const align_content_xl_stretch = css`@media (min-width: 1200px) { 1440 | -ms-flex-line-pack: stretch; 1441 | align-content: stretch; 1442 | }`;; 1443 | export const align_self_xl_auto = css`@media (min-width: 1200px) { 1444 | -ms-flex-item-align: auto; 1445 | align-self: auto; 1446 | }`;; 1447 | export const align_self_xl_start = css`@media (min-width: 1200px) { 1448 | -ms-flex-item-align: start; 1449 | align-self: flex-start; 1450 | }`;; 1451 | export const align_self_xl_end = css`@media (min-width: 1200px) { 1452 | -ms-flex-item-align: end; 1453 | align-self: flex-end; 1454 | }`;; 1455 | export const align_self_xl_center = css`@media (min-width: 1200px) { 1456 | -ms-flex-item-align: center; 1457 | align-self: center; 1458 | }`;; 1459 | export const align_self_xl_baseline = css`@media (min-width: 1200px) { 1460 | -ms-flex-item-align: baseline; 1461 | align-self: baseline; 1462 | }`;; 1463 | export const align_self_xl_stretch = css`@media (min-width: 1200px) { 1464 | -ms-flex-item-align: stretch; 1465 | align-self: stretch; 1466 | }`;;; 1467 | -------------------------------------------------------------------------------- /src/turretcss/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { css, injectGlobal } from 'styled-components'; 3 | 4 | export const __root = css`font-size: 16px; 5 | @media (min-width: 1680px) { 6 | font-size: 16px; 7 | } 8 | @media (min-width: 1280px) and (max-width: 1679px) { 9 | font-size: 16px; 10 | } 11 | @media (min-width: 1024px) and (max-width: 1279px) { 12 | font-size: 16px; 13 | } 14 | @media (min-width: 768px) and (max-width: 1023px) { 15 | font-size: 16px; 16 | } 17 | @media (max-width: 767px) { 18 | font-size: 16px; 19 | }`;; 20 | export const global_page = () => injectGlobal`@page { size: A4; 21 | margin: 1.5cm 2cm; }`; 22 | export const global__webkit_keyframes = () => injectGlobal`@-webkit-keyframes a { -webkit-transform: rotate(0deg); 23 | transform: rotate(0deg); 24 | -webkit-transform: rotate(1turn); 25 | transform: rotate(1turn); }`; 26 | export const global_keyframes = () => injectGlobal`@keyframes a { -webkit-transform: rotate(0deg); 27 | transform: rotate(0deg); 28 | -webkit-transform: rotate(1turn); 29 | transform: rotate(1turn); }`; 30 | export const global_moz_document = () => injectGlobal`@moz-document url-prefix() { z-index: 2; 31 | position: absolute; 32 | top: 0; 33 | right: 0; 34 | bottom: 0; 35 | content: ""; 36 | pointer-events: none; 37 | width: 1em; 38 | border-width: 1px 1px 1px 0; 39 | border-color: #d3d3d9; 40 | border-style: solid; 41 | background: #fff; 42 | width: 1.5em; }`; 43 | export const global__moz_document = () => injectGlobal`@-moz-document url-prefix() { background: #d3d3d9; 44 | border: 0 none none; 45 | border-radius: 2px; 46 | box-shadow: none; 47 | background: currentColor; 48 | border-radius: 2px; }`; 49 | export const tag_html = css`${__root}; font-family: sans-serif; 50 | line-height: 1.15; 51 | -ms-text-size-adjust: 100%; 52 | -webkit-text-size-adjust: 100%; 53 | &[type=button] {-webkit-appearance: button;} 54 | box-sizing: border-box; 55 | text-rendering: optimizeLegibility; 56 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 57 | -webkit-font-smoothing: antialiased; 58 | -moz-osx-font-smoothing: grayscale; 59 | width: 100%; 60 | min-height: 100%;`;; 61 | export const tag_body = css`${__root}; margin: 0; 62 | width: 100%; 63 | min-height: 100%; 64 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; 65 | font-weight: 400; 66 | color: #323236; 67 | line-height: 1.35; 68 | letter-spacing: 0; 69 | background: #fff;`;; 70 | export const tag_article = css`${__root}; display: block;`;; 71 | export const tag_aside = css`${__root}; display: block;`;; 72 | export const tag_footer = css`${__root}; display: block;`;; 73 | export const tag_header = css`${__root}; display: block;`;; 74 | export const tag_nav = css`${__root}; display: block; 75 | &ul {margin: 0; 76 | list-style: none;} 77 | &ul li {margin: 1rem 0; 78 | padding: 0;}`;; 79 | export const tag_section = css`${__root}; display: block;`;; 80 | export const tag_h1 = css`${__root}; font-size: 2em; 81 | margin: .67em 0; 82 | &:first-child {margin-top: 0;} 83 | &:last-child {margin-bottom: 0;} 84 | margin: 2em 0 1em; 85 | font-family: inherit; 86 | font-weight: 700; 87 | color: inherit; 88 | line-height: 1.35; 89 | text-transform: none; 90 | letter-spacing: 0; 91 | font-family: inherit; 92 | font-weight: inherit; 93 | font-size: .6em; 94 | color: inherit; 95 | font-size: 2.25rem; 96 | &+ .h2 {margin-top: 0;} 97 | &+ h2 {margin-top: 0;}`;; 98 | export const tag_figcaption = css`${__root}; display: block; 99 | margin: 1em 0; 100 | font-family: inherit; 101 | font-weight: inherit; 102 | font-size: .875rem; 103 | color: inherit; 104 | text-align: left;`;; 105 | export const tag_figure = css`${__root}; display: block; 106 | margin: 1em 40px; 107 | display: block; 108 | margin: 0; 109 | padding: 0;`;; 110 | export const tag_main = css`${__root}; display: block;`;; 111 | export const tag_hr = css`${__root}; box-sizing: content-box; 112 | height: 0; 113 | overflow: visible; 114 | clear: both; 115 | margin: calc(2rem + .75vw) auto; 116 | border: 0; 117 | height: 1px; 118 | background: #d3d3d9;`;; 119 | export const tag_pre = css`${__root}; font-family: monospace, monospace; 120 | font-size: 1em; 121 | @media print { 122 | border: 1px solid #616166; 123 | } 124 | @media print { 125 | page-break-inside: avoid; 126 | } 127 | font-family: Monaco, Menlo, Consolas, Courier New, monospace; 128 | font-weight: 400; 129 | font-size: 80%; 130 | margin: 1em 0; 131 | padding: 1em; 132 | overflow: auto; 133 | color: inherit; 134 | direction: ltr; 135 | text-align: left; 136 | white-space: pre; 137 | word-spacing: normal; 138 | word-break: normal; 139 | -moz-tab-size: 4; 140 | -o-tab-size: 4; 141 | tab-size: 4; 142 | -webkit-hyphens: none; 143 | -ms-hyphens: none; 144 | hyphens: none; 145 | background: #f6f6f7; 146 | border: 1px solid #d3d3d9; 147 | border-radius: 2px; 148 | &code {font-size: inherit; 149 | color: #639;}`;; 150 | export const tag_a = css`${__root}; background-color: transparent; 151 | -webkit-text-decoration-skip: objects; 152 | &:active {outline-width: 0;} 153 | &:hover {outline-width: 0;} 154 | @media print { 155 | text-decoration: underline; 156 | } 157 | -webkit-transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out; 158 | transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out; 159 | color: currentColor; 160 | text-decoration: underline; 161 | &:focus {color: currentColor; 162 | text-decoration: underline;} 163 | &:hover {color: currentColor; 164 | text-decoration: underline;}`;; 165 | export const tag_b = css`${__root}; font-weight: inherit; 166 | font-weight: bolder;`;; 167 | export const tag_strong = css`${__root}; font-weight: inherit; 168 | font-weight: bolder; 169 | font-family: inherit; 170 | font-weight: 700; 171 | color: inherit;`;; 172 | export const tag_code = css`${__root}; font-family: monospace, monospace; 173 | font-size: 1em; 174 | color: #639; 175 | font-family: Monaco, Menlo, Consolas, Courier New, monospace; 176 | font-weight: 400; 177 | font-size: 80%;`;; 178 | export const tag_kbd = css`${__root}; font-family: monospace, monospace; 179 | font-size: 1em; 180 | margin: 0 .2em; 181 | padding: .2em .4em; 182 | font-family: Monaco, Menlo, Consolas, Courier New, monospace; 183 | font-weight: 400; 184 | font-size: 80%; 185 | color: #639; 186 | background: #f6f6f7; 187 | border: 1px solid #d3d3d9; 188 | border-radius: 2px;`;; 189 | export const tag_samp = css`${__root}; font-family: monospace, monospace; 190 | font-size: 1em;`;; 191 | export const tag_dfn = css`${__root}; font-style: italic;`;; 192 | export const tag_mark = css`${__root}; background-color: #ff0; 193 | color: #000; 194 | margin: 0; 195 | padding: .2em .4em; 196 | font-size: inherit; 197 | background: #ff0; 198 | font-family: inherit; 199 | font-weight: inherit; 200 | color: inherit;`;; 201 | export const tag_small = css`${__root}; font-size: 80%; 202 | font-family: inherit; 203 | font-weight: inherit; 204 | font-size: .6em; 205 | color: inherit;`;; 206 | export const tag_sub = css`${__root}; font-size: 75%; 207 | line-height: 0; 208 | position: relative; 209 | vertical-align: baseline; 210 | bottom: -.25em;`;; 211 | export const tag_sup = css`${__root}; font-size: 75%; 212 | line-height: 0; 213 | position: relative; 214 | vertical-align: baseline; 215 | top: -.5em;`;; 216 | export const tag_audio = css`${__root}; display: inline-block; 217 | &:not([controls]) {display: none; 218 | height: 0;}`;; 219 | export const tag_video = css`${__root}; display: inline-block;`;; 220 | export const tag_img = css`${__root}; border-style: none; 221 | max-width: 100%; 222 | height: auto; 223 | @media print { 224 | page-break-inside: avoid; 225 | } 226 | @media print { 227 | max-width: 100%; 228 | }`;; 229 | export const tag_svg = css`${__root}; &:not(:root) {overflow: hidden;}`;; 230 | export const tag_button = css`${__root}; font-family: sans-serif; 231 | font-size: 100%; 232 | line-height: 1.15; 233 | margin: 0; 234 | overflow: visible; 235 | text-transform: none; 236 | -webkit-appearance: button; 237 | &::-moz-focus-inner {border-style: none; 238 | padding: 0;} 239 | &:-moz-focusring {outline: 1px dotted ButtonText;} 240 | display: inline-block; 241 | padding: calc((3rem - 1rem - 2px) / 2) 1.5em; 242 | min-width: 3rem; 243 | height: 3rem; 244 | font-family: inherit; 245 | font-weight: 600; 246 | line-height: 1; 247 | font-size: 1rem; 248 | color: #323236; 249 | letter-spacing: 0; 250 | text-align: center; 251 | text-transform: none; 252 | text-decoration: none; 253 | white-space: nowrap; 254 | cursor: pointer; 255 | background: #fff; 256 | border: 1px solid #d3d3d9; 257 | border-radius: 2px; 258 | box-shadow: none; 259 | -webkit-transition: all .2s ease-in-out; 260 | transition: all .2s ease-in-out; 261 | &:not(:disabled):focus {text-decoration: none; 262 | color: #323236; 263 | background: #f6f6f7; 264 | border-color: #c8c8ce; 265 | box-shadow: none;} 266 | &:not(:disabled):hover {text-decoration: none; 267 | color: #323236; 268 | background: #f6f6f7; 269 | border-color: #c8c8ce; 270 | box-shadow: none;} 271 | &:not(:disabled):active {color: #323236; 272 | background: #ededf0; 273 | border-color: #bebec3; 274 | box-shadow: none;} 275 | &svg {width: 1rem; 276 | height: 1rem; 277 | fill: currentColor; 278 | -webkit-transition: all .2s ease-in-out; 279 | transition: all .2s ease-in-out;} 280 | &:disabled {cursor: no-drop; 281 | opacity: .65;}`;; 282 | export const tag_input = css`${__root}; font-family: sans-serif; 283 | font-size: 100%; 284 | line-height: 1.15; 285 | margin: 0; 286 | overflow: visible; 287 | &:first-child {margin-top: 0;} 288 | &:last-child {margin-bottom: 0;} 289 | display: block; 290 | margin: 1rem 0; 291 | font-family: inherit; 292 | font-weight: inherit; 293 | color: inherit; 294 | line-height: 1.5; 295 | -webkit-appearance: none; 296 | -moz-appearance: none; 297 | appearance: none; 298 | box-sizing: border-box; 299 | padding: 0 1em; 300 | width: 100%; 301 | height: 3rem; 302 | font-size: 1rem; 303 | border: 1px solid #d3d3d9; 304 | background: #fff; 305 | border-radius: 2px; 306 | box-shadow: none; 307 | -webkit-transition: all .2s ease-in-out; 308 | transition: all .2s ease-in-out; 309 | &::-webkit-input-placeholder {color: inherit; 310 | opacity: .5;} 311 | &::-moz-placeholder {color: inherit; 312 | opacity: .5;} 313 | &:-ms-input-placeholder {color: inherit; 314 | opacity: .5;} 315 | &::placeholder {color: inherit; 316 | opacity: .5;} 317 | &:not(:disabled):hover {color: inherit; 318 | background: #fafafa; 319 | border-color: #bebec3; 320 | box-shadow: none;} 321 | &:not(:disabled):focus {color: inherit; 322 | background: #fafafa; 323 | border-color: #3455db; 324 | box-shadow: none;} 325 | &:disabled {cursor: no-drop; 326 | color: inherit; 327 | background: #f2f2f2; 328 | border-color: #d3d3d9;}`;; 329 | export const tag_optgroup = css`${__root}; font-family: sans-serif; 330 | font-size: 100%; 331 | line-height: 1.15; 332 | margin: 0;`;; 333 | export const tag_select = css`${__root}; font-family: sans-serif; 334 | font-size: 100%; 335 | line-height: 1.15; 336 | margin: 0; 337 | text-transform: none; 338 | display: block; 339 | width: 100%;`;; 340 | export const tag_textarea = css`${__root}; font-family: sans-serif; 341 | font-size: 100%; 342 | line-height: 1.15; 343 | margin: 0; 344 | overflow: auto; 345 | &:first-child {margin-top: 0;} 346 | &:last-child {margin-bottom: 0;} 347 | display: block; 348 | margin: 1rem 0; 349 | font-family: inherit; 350 | font-weight: inherit; 351 | color: inherit; 352 | line-height: 1.5; 353 | -webkit-appearance: none; 354 | -moz-appearance: none; 355 | appearance: none; 356 | box-sizing: border-box; 357 | padding: 0 1em; 358 | width: 100%; 359 | height: 3rem; 360 | font-size: 1rem; 361 | border: 1px solid #d3d3d9; 362 | background: #fff; 363 | border-radius: 2px; 364 | box-shadow: none; 365 | -webkit-transition: all .2s ease-in-out; 366 | transition: all .2s ease-in-out; 367 | &::-webkit-input-placeholder {color: inherit; 368 | opacity: .5;} 369 | &::-moz-placeholder {color: inherit; 370 | opacity: .5;} 371 | &:-ms-input-placeholder {color: inherit; 372 | opacity: .5;} 373 | &::placeholder {color: inherit; 374 | opacity: .5;} 375 | &:not(:disabled):hover {color: inherit; 376 | background: #fafafa; 377 | border-color: #bebec3; 378 | box-shadow: none;} 379 | &:not(:disabled):focus {color: inherit; 380 | background: #fafafa; 381 | border-color: #3455db; 382 | box-shadow: none;} 383 | &:disabled {cursor: no-drop; 384 | color: inherit; 385 | background: #f2f2f2; 386 | border-color: #d3d3d9;} 387 | padding: 1em; 388 | max-width: 100%; 389 | height: auto; 390 | line-height: inherit; 391 | -webkit-transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out; 392 | transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out;`;; 393 | export const tag_fieldset = css`${__root}; border: 1px solid silver; 394 | margin: 0 2px; 395 | padding: .35em .625em .75em; 396 | &:first-child {margin-top: 0;} 397 | &:last-child {margin-bottom: 0;} 398 | display: block; 399 | margin: calc(1rem + .5vw) 0; 400 | padding: calc(1rem + .5vw); 401 | border: 1px solid #d3d3d9; 402 | border-radius: 2px;`;; 403 | export const tag_legend = css`${__root}; box-sizing: border-box; 404 | display: table; 405 | max-width: 100%; 406 | padding: 0; 407 | white-space: normal; 408 | padding: .5em; 409 | font-family: inherit; 410 | font-weight: inherit; 411 | font-size: 1rem; 412 | color: inherit;`;; 413 | export const tag_progress = css`${__root}; display: inline-block; 414 | vertical-align: baseline; 415 | display: block; 416 | margin: 1rem 0; 417 | width: 100%; 418 | height: 1rem;`;; 419 | export const $$$$_webkit_file_upload_button = css`${__root}; -webkit-appearance: button; 420 | font: inherit;`;; 421 | export const tag_details = css`${__root}; display: block;`;; 422 | export const tag_menu = css`${__root}; display: block;`;; 423 | export const tag_summary = css`${__root}; display: list-item;`;; 424 | export const tag_canvas = css`${__root}; display: inline-block;`;; 425 | export const tag_template = css`${__root}; display: none;`;; 426 | export const $$after = css`${__root}; box-sizing: inherit; 427 | @media print { 428 | background: transparent; 429 | color: #000; 430 | box-shadow: none; 431 | text-shadow: none; 432 | }`;; 433 | export const $$before = css`${__root}; box-sizing: inherit; 434 | @media print { 435 | background: transparent; 436 | color: #000; 437 | box-shadow: none; 438 | text-shadow: none; 439 | }`;; 440 | export const $$focus = css`${__root}; outline: 1px dotted currentColor; 441 | outline-offset: 1px;`;; 442 | export const control = css`${__root}; &:first-child {margin-top: 0;} 443 | &:last-child {margin-bottom: 0;} 444 | display: -webkit-box; 445 | display: -ms-flexbox; 446 | display: flex; 447 | position: relative; 448 | margin: 1rem 0; 449 | padding: 0; 450 | font-family: inherit; 451 | font-weight: inherit; 452 | font-size: 1rem; 453 | color: inherit; 454 | line-height: 1.5; 455 | cursor: pointer; 456 | &:hover .control-indicator {background-color: #fafafa; 457 | border-color: #bebec3; 458 | box-shadow: none;} 459 | &input[type=checkbox] {z-index: -1; 460 | position: absolute; 461 | margin: 0; 462 | opacity: 0;} 463 | &input[type=radio] {z-index: -1; 464 | position: absolute; 465 | margin: 0; 466 | opacity: 0;} 467 | &input[type=checkbox]:focus ~ .control-indicator {background-color: #fafafa; 468 | border-color: #3455db; 469 | box-shadow: none;} 470 | &input[type=radio]:focus ~ .control-indicator {background-color: #fafafa; 471 | border-color: #3455db; 472 | box-shadow: none;} 473 | &input[type=checkbox]:checked ~ .control-indicator {background-color: #3455db; 474 | border: 1px solid #3455db;} 475 | &input[type=radio]:checked ~ .control-indicator {background-color: #3455db; 476 | border: 1px solid #3455db;} 477 | &input[type=checkbox]:checked ~ .control-label {color: inherit;} 478 | &input[type=radio]:checked ~ .control-label {color: inherit;}`;; 479 | export const field = css`${__root}; &:first-child {margin-top: 0;} 480 | &:last-child {margin-bottom: 0;} 481 | margin: calc(1rem + .5vw) 0; 482 | &.form-message:first-child {margin-top: 0;} 483 | &.select:first-child {margin-top: 0;} 484 | &input:first-child {margin-top: 0;} 485 | &label:first-child {margin-top: 0;} 486 | &textarea:first-child {margin-top: 0;} 487 | &.form-message:last-child {margin-bottom: 0;} 488 | &.select:last-child {margin-bottom: 0;} 489 | &input:last-child {margin-bottom: 0;} 490 | &label:last-child {margin-bottom: 0;} 491 | &textarea:last-child {margin-bottom: 0;}`;; 492 | export const select = css`${__root}; &:first-child {margin-top: 0;} 493 | &:last-child {margin-bottom: 0;} 494 | position: relative; 495 | display: block; 496 | margin: 1rem 0; 497 | font-size: 1rem; 498 | line-height: auto; 499 | font-family: inherit; 500 | font-weight: inherit; 501 | &select {font-family: inherit; 502 | font-weight: inherit;} 503 | &select {-webkit-appearance: none; 504 | -moz-appearance: none; 505 | appearance: none; 506 | cursor: pointer; 507 | margin: 0; 508 | outline: 0; 509 | padding: 0 1em; 510 | height: 3rem; 511 | font-size: inherit; 512 | color: inherit; 513 | line-height: inherit; 514 | background: #fff; 515 | border: 1px solid #d3d3d9; 516 | border-radius: 2px; 517 | box-shadow: none; 518 | -webkit-transition: all .2s ease-in-out; 519 | transition: all .2s ease-in-out;} 520 | &select::-moz-focusring {color: transparent; 521 | text-shadow: 0 0 0 #000;} 522 | &select::-ms-expand {display: none;} 523 | &select:not(:disabled):hover {color: inherit; 524 | background: #fafafa; 525 | border-color: #bebec3; 526 | box-shadow: none;} 527 | &select:not(:disabled):focus {color: inherit; 528 | background: #fafafa; 529 | border-color: #3455db; 530 | box-shadow: none;} 531 | &select:disabled {cursor: no-drop; 532 | color: inherit; 533 | background: #f2f2f2; 534 | border-color: #d3d3d9;} 535 | &:after {position: absolute; 536 | top: 50%; 537 | right: 15px; 538 | margin-top: -2px; 539 | width: 0; 540 | height: 0; 541 | content: ""; 542 | pointer-events: none; 543 | border-left: 4px solid transparent; 544 | border-right: 4px solid transparent; 545 | border-top: 4px solid #323236;} 546 | &:before {z-index: 2; 547 | position: absolute; 548 | top: 0; 549 | right: 0; 550 | bottom: 0; 551 | content: ""; 552 | pointer-events: none; 553 | width: 1em; 554 | border-width: 1px 1px 1px 0; 555 | border-color: #d3d3d9; 556 | border-style: solid; 557 | background: #fff;}`;; 558 | export const tag_blockquote = css`${__root}; &:first-child {margin-top: 0;} 559 | &:last-child {margin-bottom: 0;} 560 | @media print { 561 | page-break-inside: avoid; 562 | } 563 | margin: 2em 0; 564 | padding: 0 1em; 565 | font-size: 1.25rem; 566 | font-style: normal; 567 | line-height: 1.5; 568 | font-family: inherit; 569 | font-weight: inherit; 570 | color: inherit; 571 | &p {font-family: inherit; 572 | font-weight: inherit; 573 | color: inherit;} 574 | &p {font-size: inherit; 575 | font-style: inherit; 576 | line-height: inherit;}`;; 577 | export const tag_cite = css`${__root}; &:first-child {margin-top: 0;} 578 | &:last-child {margin-bottom: 0;} 579 | display: block; 580 | font-size: .875rem; 581 | font-style: normal; 582 | text-align: left; 583 | margin: 1em 0; 584 | font-family: inherit; 585 | font-weight: inherit; 586 | color: inherit;`;; 587 | export const tag_dd = css`${__root}; &:first-child {margin-top: 0;} 588 | &:last-child {margin-bottom: 0;} 589 | font-family: inherit; 590 | font-size: inherit; 591 | color: inherit; 592 | margin: 0 0 1em; 593 | font-weight: inherit;`;; 594 | export const tag_dl = css`${__root}; &:first-child {margin-top: 0;} 595 | &:last-child {margin-bottom: 0;} 596 | margin: 1em 0; 597 | padding: 0; 598 | font-size: 1rem;`;; 599 | export const tag_dt = css`${__root}; &:first-child {margin-top: 0;} 600 | &:last-child {margin-bottom: 0;} 601 | margin: .5em 0; 602 | font-weight: 700; 603 | font-family: inherit; 604 | font-size: inherit; 605 | color: inherit;`;; 606 | export const tag_h2 = css`${__root}; &:first-child {margin-top: 0;} 607 | &:last-child {margin-bottom: 0;} 608 | @media print { 609 | orphans: 3; 610 | widows: 3; 611 | } 612 | @media print { 613 | page-break-after: avoid; 614 | } 615 | margin: 2em 0 1em; 616 | font-family: inherit; 617 | font-weight: 700; 618 | color: inherit; 619 | line-height: 1.35; 620 | text-transform: none; 621 | letter-spacing: 0; 622 | font-family: inherit; 623 | font-weight: inherit; 624 | font-size: .6em; 625 | color: inherit; 626 | font-size: 2rem; 627 | &+ .h3 {margin-top: 0;} 628 | &+ h3 {margin-top: 0;}`;; 629 | export const tag_h3 = css`${__root}; &:first-child {margin-top: 0;} 630 | &:last-child {margin-bottom: 0;} 631 | @media print { 632 | orphans: 3; 633 | widows: 3; 634 | } 635 | @media print { 636 | page-break-after: avoid; 637 | } 638 | margin: 2em 0 1em; 639 | font-family: inherit; 640 | font-weight: 700; 641 | color: inherit; 642 | line-height: 1.35; 643 | text-transform: none; 644 | letter-spacing: 0; 645 | font-family: inherit; 646 | font-weight: inherit; 647 | font-size: .6em; 648 | color: inherit; 649 | font-size: 1.5rem; 650 | &+ .h4 {margin-top: 0;} 651 | &+ h4 {margin-top: 0;}`;; 652 | export const tag_h4 = css`${__root}; &:first-child {margin-top: 0;} 653 | &:last-child {margin-bottom: 0;} 654 | margin: 2em 0 1em; 655 | font-family: inherit; 656 | font-weight: 700; 657 | color: inherit; 658 | line-height: 1.35; 659 | text-transform: none; 660 | letter-spacing: 0; 661 | font-family: inherit; 662 | font-weight: inherit; 663 | font-size: .6em; 664 | color: inherit; 665 | font-size: 1.25rem; 666 | &+ .h5 {margin-top: 0;} 667 | &+ h5 {margin-top: 0;}`;; 668 | export const tag_h5 = css`${__root}; &:first-child {margin-top: 0;} 669 | &:last-child {margin-bottom: 0;} 670 | margin: 2em 0 1em; 671 | font-family: inherit; 672 | font-weight: 700; 673 | color: inherit; 674 | line-height: 1.35; 675 | text-transform: none; 676 | letter-spacing: 0; 677 | font-family: inherit; 678 | font-weight: inherit; 679 | font-size: .6em; 680 | color: inherit; 681 | font-size: 1.125rem; 682 | &+ .h6 {margin-top: 0;} 683 | &+ h6 {margin-top: 0;}`;; 684 | export const tag_h6 = css`${__root}; &:first-child {margin-top: 0;} 685 | &:last-child {margin-bottom: 0;} 686 | margin: 2em 0 1em; 687 | font-family: inherit; 688 | font-weight: 700; 689 | color: inherit; 690 | line-height: 1.35; 691 | text-transform: none; 692 | letter-spacing: 0; 693 | font-family: inherit; 694 | font-weight: inherit; 695 | font-size: .6em; 696 | color: inherit; 697 | font-size: 1rem;`;; 698 | export const tag_label = css`${__root}; &:first-child {margin-top: 0;} 699 | &:last-child {margin-bottom: 0;} 700 | font-size: .875rem; 701 | display: block; 702 | margin: 1rem 0; 703 | font-family: inherit; 704 | font-weight: inherit; 705 | color: inherit; 706 | line-height: 1.5;`;; 707 | export const tag_ol = css`${__root}; &li:first-child {margin-top: 0;} 708 | &li:last-child {margin-bottom: 0;} 709 | margin: 1em 0; 710 | font-family: inherit; 711 | font-weight: inherit; 712 | color: inherit; 713 | padding: 0; 714 | font-size: 1rem; 715 | line-height: 1.5; 716 | &li {margin: .5em 0 .5em 1.5em; 717 | padding: 0 0 0 .5em;} 718 | &li ul {margin: .5em 0; 719 | padding: 0;} 720 | &li ul li {margin: .5em 0 .5em 1.5em; 721 | padding: 0 0 0 .5em;}`;; 722 | export const tag_p = css`${__root}; &:first-child {margin-top: 0;} 723 | &:last-child {margin-bottom: 0;} 724 | @media print { 725 | orphans: 3; 726 | widows: 3; 727 | } 728 | font-family: inherit; 729 | font-weight: inherit; 730 | color: inherit; 731 | line-height: 1.5; 732 | margin: 1em 0; 733 | font-size: 1rem;`;; 734 | export const tag_ul = css`${__root}; &li:first-child {margin-top: 0;} 735 | &li:last-child {margin-bottom: 0;} 736 | margin: 1em 0; 737 | font-family: inherit; 738 | font-weight: inherit; 739 | color: inherit; 740 | padding: 0; 741 | font-size: 1rem; 742 | line-height: 1.5; 743 | &li {margin: .5em 0 .5em 1.5em; 744 | padding: 0 0 0 .5em;} 745 | &li ul {margin: .5em 0; 746 | padding: 0;} 747 | &li ul li {margin: .5em 0 .5em 1.5em; 748 | padding: 0 0 0 .5em;} 749 | list-style: disc; 750 | &li ul {list-style: disc;}`;; 751 | export const container = css`${__root}; margin: 0 auto; 752 | padding-left: calc(1rem + .5vw); 753 | padding-right: calc(1rem + .5vw); 754 | width: 100%; 755 | @media (min-width: 1680px) { 756 | max-width: 90rem; 757 | } 758 | @media (min-width: 1280px) and (max-width: 1679px) { 759 | max-width: 80rem; 760 | } 761 | @media (min-width: 1024px) and (max-width: 1279px) { 762 | max-width: 70rem; 763 | } 764 | @media (min-width: 768px) and (max-width: 1023px) { 765 | max-width: 100%; 766 | } 767 | @media (max-width: 767px) { 768 | max-width: 100%; 769 | }`;; 770 | export const tag_thead = css`${__root}; @media print { 771 | display: table-header-group; 772 | }`;; 773 | export const tag_tr = css`${__root}; @media print { 774 | page-break-inside: avoid; 775 | }`;; 776 | export const tag_table = css`${__root}; @media print { 777 | border-collapse: collapse; 778 | background-color: #fff; 779 | } 780 | margin: 1em 0; 781 | width: 100%; 782 | background: #fff; 783 | border: 1px solid #d3d3d9; 784 | border-radius: 2px; 785 | border-collapse: collapse; 786 | &caption {margin: 1em 0;} 787 | &caption {font-family: inherit; 788 | font-weight: inherit; 789 | font-size: inherit; 790 | color: inherit; 791 | text-align: left;} 792 | &th {font-family: inherit; 793 | font-weight: inherit; 794 | font-size: inherit; 795 | color: inherit; 796 | text-align: left;} 797 | &th {padding: .5em; 798 | text-transform: none; 799 | background: #f6f6f7; 800 | border: 1px solid #d3d3d9;} 801 | &td {padding: .5em; 802 | font-family: inherit; 803 | font-weight: inherit; 804 | font-size: inherit; 805 | color: inherit; 806 | line-height: 1.35; 807 | vertical-align: middle; 808 | border: 1px solid #d3d3d9;}`;; 809 | export const tag_td = css`${__root}; background-color: #fff;`;; 810 | export const tag_th = css`${__root}; background-color: #fff;`;; 811 | export const screen_reader = css`${__root}; position: absolute; 812 | padding: 0; 813 | width: 1px; 814 | height: 1px; 815 | margin: -1px; 816 | border: 0; 817 | overflow: hidden; 818 | clip: rect(0 0 0 0);`;; 819 | export const screen_reader_focusable = css`${__root}; &:active {position: static; 820 | width: auto; 821 | height: auto; 822 | margin: 0; 823 | overflow: visible; 824 | clip: auto;} 825 | &:focus {position: static; 826 | width: auto; 827 | height: auto; 828 | margin: 0; 829 | overflow: visible; 830 | clip: auto;}`;; 831 | export const tag_to = css`${__root}; -webkit-transform: rotate(1turn); 832 | transform: rotate(1turn); 833 | -webkit-transform: rotate(1turn); 834 | transform: rotate(1turn);`;; 835 | export const h1 = css`${__root}; margin: 2em 0 1em; 836 | font-family: inherit; 837 | font-weight: 700; 838 | color: inherit; 839 | line-height: 1.35; 840 | text-transform: none; 841 | letter-spacing: 0; 842 | font-family: inherit; 843 | font-weight: inherit; 844 | font-size: .6em; 845 | color: inherit; 846 | font-size: 2.25rem; 847 | &+ .h2 {margin-top: 0;} 848 | &+ h2 {margin-top: 0;}`;; 849 | export const h2 = css`${__root}; margin: 2em 0 1em; 850 | font-family: inherit; 851 | font-weight: 700; 852 | color: inherit; 853 | line-height: 1.35; 854 | text-transform: none; 855 | letter-spacing: 0; 856 | font-family: inherit; 857 | font-weight: inherit; 858 | font-size: .6em; 859 | color: inherit; 860 | font-size: 2rem; 861 | &+ .h3 {margin-top: 0;} 862 | &+ h3 {margin-top: 0;}`;; 863 | export const h3 = css`${__root}; margin: 2em 0 1em; 864 | font-family: inherit; 865 | font-weight: 700; 866 | color: inherit; 867 | line-height: 1.35; 868 | text-transform: none; 869 | letter-spacing: 0; 870 | font-family: inherit; 871 | font-weight: inherit; 872 | font-size: .6em; 873 | color: inherit; 874 | font-size: 1.5rem; 875 | &+ .h4 {margin-top: 0;} 876 | &+ h4 {margin-top: 0;}`;; 877 | export const h4 = css`${__root}; margin: 2em 0 1em; 878 | font-family: inherit; 879 | font-weight: 700; 880 | color: inherit; 881 | line-height: 1.35; 882 | text-transform: none; 883 | letter-spacing: 0; 884 | font-family: inherit; 885 | font-weight: inherit; 886 | font-size: .6em; 887 | color: inherit; 888 | font-size: 1.25rem; 889 | &+ .h5 {margin-top: 0;} 890 | &+ h5 {margin-top: 0;}`;; 891 | export const h5 = css`${__root}; margin: 2em 0 1em; 892 | font-family: inherit; 893 | font-weight: 700; 894 | color: inherit; 895 | line-height: 1.35; 896 | text-transform: none; 897 | letter-spacing: 0; 898 | font-family: inherit; 899 | font-weight: inherit; 900 | font-size: .6em; 901 | color: inherit; 902 | font-size: 1.125rem; 903 | &+ .h6 {margin-top: 0;} 904 | &+ h6 {margin-top: 0;}`;; 905 | export const h6 = css`${__root}; margin: 2em 0 1em; 906 | font-family: inherit; 907 | font-weight: 700; 908 | color: inherit; 909 | line-height: 1.35; 910 | text-transform: none; 911 | letter-spacing: 0; 912 | font-family: inherit; 913 | font-weight: inherit; 914 | font-size: .6em; 915 | color: inherit; 916 | font-size: 1rem;`;; 917 | export const display_title = css`${__root}; margin: 0; 918 | font-size: 2.25rem; 919 | color: inherit; 920 | text-transform: uppercase; 921 | letter-spacing: .05em; 922 | font-family: inherit; 923 | font-weight: 700; 924 | line-height: 1.2;`;; 925 | export const big = css`${__root}; font-family: inherit; 926 | font-weight: 700; 927 | line-height: 1.2; 928 | margin: .5em 0; 929 | font-size: calc(36px + 20 * ((100vw - 320px) / 640));`;; 930 | export const small_caps = css`${__root}; margin: 1em 0; 931 | font-family: inherit; 932 | font-weight: 700; 933 | font-size: .875rem; 934 | line-height: 1.2; 935 | text-transform: uppercase; 936 | letter-spacing: 0;`;; 937 | export const lead = css`${__root}; margin: .5em 0 1em; 938 | font-size: 1.25rem; 939 | font-family: inherit; 940 | font-weight: inherit; 941 | color: inherit; 942 | line-height: 1.5;`;; 943 | export const tag_em = css`${__root}; font-style: italic;`;; 944 | export const list_unstyled = css`${__root}; list-style: none; 945 | &li {margin-left: 0;}`;; 946 | export const list_inline = css`${__root}; &li {display: inline-block;}`;; 947 | export const form_message = css`${__root}; font-family: inherit; 948 | font-weight: inherit; 949 | color: inherit; 950 | margin: 1rem 0; 951 | font-size: .875rem; 952 | line-height: 1.5; 953 | &:empty {display: none;}`;; 954 | export const form_message_and_error = css`${__root}; color: #d91e18;`;; 955 | export const form_message_and_warning = css`${__root}; color: #ff4500;`;; 956 | export const form_message_and_success = css`${__root}; color: #0a0;`;; 957 | export const form_message_and_info = css`${__root}; color: #1e90ff;`;; 958 | export const field_float_label = css`${__root}; position: relative; 959 | &input + label {position: absolute; 960 | top: 0; 961 | left: 0; 962 | opacity: 0; 963 | margin: 0 1em; 964 | padding: .25em; 965 | -webkit-transform: translateY(50%); 966 | transform: translateY(50%); 967 | pointer-events: none; 968 | -webkit-transition: all .2s ease-in-out; 969 | transition: all .2s ease-in-out;} 970 | &textarea + label {position: absolute; 971 | top: 0; 972 | left: 0; 973 | opacity: 0; 974 | margin: 0 1em; 975 | padding: .25em; 976 | -webkit-transform: translateY(50%); 977 | transform: translateY(50%); 978 | pointer-events: none; 979 | -webkit-transition: all .2s ease-in-out; 980 | transition: all .2s ease-in-out;} 981 | &input:not(:disabled):focus::-webkit-input-placeholder {opacity: 0;} 982 | &textarea:not(:disabled):focus::-webkit-input-placeholder {opacity: 0;} 983 | &input:not(:disabled):focus::-moz-placeholder {opacity: 0;} 984 | &textarea:not(:disabled):focus::-moz-placeholder {opacity: 0;} 985 | &input:not(:disabled):focus:-ms-input-placeholder {opacity: 0;} 986 | &textarea:not(:disabled):focus:-ms-input-placeholder {opacity: 0;} 987 | &input:not(:disabled):focus::placeholder {opacity: 0;} 988 | &textarea:not(:disabled):focus::placeholder {opacity: 0;} 989 | &input:not(:disabled):focus + label {opacity: 1; 990 | -webkit-transform: translateY(-50%); 991 | transform: translateY(-50%); 992 | background-color: transparent; 993 | background-image: -webkit-linear-gradient(top, transparent 50%, #fafafa 0); 994 | background-image: linear-gradient(180deg, transparent 50%, #fafafa 0);} 995 | &textarea:not(:disabled):focus + label {opacity: 1; 996 | -webkit-transform: translateY(-50%); 997 | transform: translateY(-50%); 998 | background-color: transparent; 999 | background-image: -webkit-linear-gradient(top, transparent 50%, #fafafa 0); 1000 | background-image: linear-gradient(180deg, transparent 50%, #fafafa 0);}`;; 1001 | export const tag_input_and_error = css`${__root}; color: #d91e18; 1002 | border-color: #d91e18;`;; 1003 | export const tag_textarea_and_error = css`${__root}; color: #d91e18; 1004 | border-color: #d91e18;`;; 1005 | export const tag_input_and_warning = css`${__root}; color: #ff4500; 1006 | border-color: #ff4500;`;; 1007 | export const tag_textarea_and_warning = css`${__root}; color: #ff4500; 1008 | border-color: #ff4500;`;; 1009 | export const tag_input_and_success = css`${__root}; color: #0a0; 1010 | border-color: #0a0;`;; 1011 | export const tag_textarea_and_success = css`${__root}; color: #0a0; 1012 | border-color: #0a0;`;; 1013 | export const tag_input_and_info = css`${__root}; color: #1e90ff; 1014 | border-color: #1e90ff;`;; 1015 | export const tag_textarea_and_info = css`${__root}; color: #1e90ff; 1016 | border-color: #1e90ff;`;; 1017 | export const input_xl = css`${__root}; padding: 0 1em; 1018 | height: 4rem; 1019 | font-size: 1.25rem;`;; 1020 | export const input_l = css`${__root}; padding: 0 1em; 1021 | height: 3.5rem; 1022 | font-size: 1.125rem;`;; 1023 | export const input_s = css`${__root}; padding: 0 1em; 1024 | height: 2.5rem; 1025 | font-size: .875rem;`;; 1026 | export const input_xs = css`${__root}; padding: 0 1em; 1027 | height: 2rem; 1028 | font-size: .75rem;`;; 1029 | export const input_group = css`${__root}; display: -webkit-box; 1030 | display: -ms-flexbox; 1031 | display: flex; 1032 | width: 100%; 1033 | &input {-webkit-box-flex: 1; 1034 | -ms-flex: 1 1 auto; 1035 | flex: 1 1 auto; 1036 | margin: 0;} 1037 | &input:not(:last-child) {border-top-right-radius: 0; 1038 | border-bottom-right-radius: 0;} 1039 | &.button {-webkit-box-flex: 0; 1040 | -ms-flex: 0 0 auto; 1041 | flex: 0 0 auto;} 1042 | &button {-webkit-box-flex: 0; 1043 | -ms-flex: 0 0 auto; 1044 | flex: 0 0 auto;} 1045 | &.button {position: relative;} 1046 | &button {position: relative;} 1047 | &input {position: relative;} 1048 | &.button:active {z-index: 2;} 1049 | &.button:focus {z-index: 2;} 1050 | &.button:hover {z-index: 2;} 1051 | &button:active {z-index: 2;} 1052 | &button:focus {z-index: 2;} 1053 | &button:hover {z-index: 2;} 1054 | &input:active {z-index: 2;} 1055 | &input:focus {z-index: 2;} 1056 | &input:hover {z-index: 2;} 1057 | &.button + .button {border-top-left-radius: 0; 1058 | border-bottom-left-radius: 0;} 1059 | &.button + button {border-top-left-radius: 0; 1060 | border-bottom-left-radius: 0;} 1061 | &.button + input {border-top-left-radius: 0; 1062 | border-bottom-left-radius: 0;} 1063 | &button + .button {border-top-left-radius: 0; 1064 | border-bottom-left-radius: 0;} 1065 | &button + button {border-top-left-radius: 0; 1066 | border-bottom-left-radius: 0;} 1067 | &button + input {border-top-left-radius: 0; 1068 | border-bottom-left-radius: 0;} 1069 | &input + .button {border-top-left-radius: 0; 1070 | border-bottom-left-radius: 0;} 1071 | &input + button {border-top-left-radius: 0; 1072 | border-bottom-left-radius: 0;} 1073 | &input + input {border-top-left-radius: 0; 1074 | border-bottom-left-radius: 0;} 1075 | &.button + .button {margin-left: -1px;} 1076 | &.button + button {margin-left: -1px;} 1077 | &.button + input {margin-left: -1px;} 1078 | &button + .button {margin-left: -1px;} 1079 | &button + button {margin-left: -1px;} 1080 | &button + input {margin-left: -1px;} 1081 | &input + .button {margin-left: -1px;} 1082 | &input + button {margin-left: -1px;} 1083 | &input + input {margin-left: -1px;}`;; 1084 | export const select_and_error = css`${__root}; &select {color: #d91e18; 1085 | border-color: #d91e18;} 1086 | &:after {border-top-color: #d91e18;}`;; 1087 | export const select_and_warning = css`${__root}; &select {color: #ff4500; 1088 | border-color: #ff4500;} 1089 | &:after {border-top-color: #ff4500;}`;; 1090 | export const select_and_success = css`${__root}; &select {color: #0a0; 1091 | border-color: #0a0;} 1092 | &:after {border-top-color: #0a0;}`;; 1093 | export const select_and_info = css`${__root}; &select {color: #1e90ff; 1094 | border-color: #1e90ff;} 1095 | &:after {border-top-color: #1e90ff;}`;; 1096 | export const select_and_large = css`${__root}; &:before {width: 1.5em;}`;; 1097 | export const select_xl = css`${__root}; &select {padding: 0 1em; 1098 | height: 4rem; 1099 | font-size: 1.25rem;}`;; 1100 | export const tag_select_and_select_xl = css`${__root}; padding: 0 1em; 1101 | height: 4rem; 1102 | font-size: 1.25rem;`;; 1103 | export const select_l = css`${__root}; &select {padding: 0 1em; 1104 | height: 3.5rem; 1105 | font-size: 1.125rem;}`;; 1106 | export const tag_select_and_select_l = css`${__root}; padding: 0 1em; 1107 | height: 3.5rem; 1108 | font-size: 1.125rem;`;; 1109 | export const select_s = css`${__root}; &select {padding: 0 1em; 1110 | height: 2.5rem; 1111 | font-size: .875rem;}`;; 1112 | export const tag_select_and_select_s = css`${__root}; padding: 0 1em; 1113 | height: 2.5rem; 1114 | font-size: .875rem;`;; 1115 | export const select_xs = css`${__root}; &select {padding: 0 1em; 1116 | height: 2rem; 1117 | font-size: .75rem;}`;; 1118 | export const tag_select_and_select_xs = css`${__root}; padding: 0 1em; 1119 | height: 2rem; 1120 | font-size: .75rem;`;; 1121 | export const control_and_control_inline = css`${__root}; display: -webkit-inline-box; 1122 | display: -ms-inline-flexbox; 1123 | display: inline-flex; 1124 | margin-right: 2rem;`;; 1125 | export const control_and_checkbox = css`${__root}; &.control-indicator {border-radius: 2px;} 1126 | &input[type=checkbox]:checked ~ .control-indicator {background-color: #3455db; 1127 | background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTIuOHB4IiBoZWlnaHQ9IjkuOHB4IiB2aWV3Qm94PSIwIDAgMTIuOCA5LjgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyLjggOS44IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTEuNCwwIDQuNCw3IDEuNCw0IDAsNS40IDMsOC40IDQuNCw5LjggNS44LDguNCAxMi44LDEuNCAiLz4NCjwvc3ZnPg0K");}`;; 1128 | export const control_and_radio = css`${__root}; &.control-indicator {border-radius: 1.5rem;} 1129 | &input[type=radio]:checked ~ .control-indicator:before {position: absolute; 1130 | top: 50%; 1131 | left: 50%; 1132 | -webkit-transform: translate(-50%, -50%); 1133 | transform: translate(-50%, -50%); 1134 | content: ""; 1135 | width: .5em; 1136 | height: .5em; 1137 | background: #fff; 1138 | border-radius: 1.5rem;}`;; 1139 | export const control_and_switch = css`${__root}; &.control-indicator {width: 2em; 1140 | border-radius: 1.5rem;} 1141 | &.control-indicator:before {display: block; 1142 | position: absolute; 1143 | top: -1px; 1144 | left: -1px; 1145 | content: ""; 1146 | width: 1em; 1147 | height: 1em; 1148 | background-color: #fff; 1149 | border-width: inherit; 1150 | border-style: inherit; 1151 | border-color: inherit; 1152 | border-radius: 1.5rem; 1153 | -webkit-transition: all .2s ease-in-out; 1154 | transition: all .2s ease-in-out;} 1155 | &input[type=checkbox]:checked ~ .control-indicator:before {left: calc(100% - 1em + 1px);}`;; 1156 | export const control_and_error = css`${__root}; &input:checked ~ .control-indicator {background-color: #d91e18; 1157 | border-color: #d91e18;}`;; 1158 | export const control_and_warning = css`${__root}; &input:checked ~ .control-indicator {background-color: #ff4500; 1159 | border-color: #ff4500;}`;; 1160 | export const control_and_success = css`${__root}; &input:checked ~ .control-indicator {background-color: #0a0; 1161 | border-color: #0a0;}`;; 1162 | export const control_and_info = css`${__root}; &input:checked ~ .control-indicator {background-color: #1e90ff; 1163 | border-color: #1e90ff;}`;; 1164 | export const control_indicator = css`${__root}; -webkit-box-flex: 0; 1165 | -ms-flex: 0 0 auto; 1166 | flex: 0 0 auto; 1167 | position: relative; 1168 | -webkit-user-select: none; 1169 | -moz-user-select: none; 1170 | -ms-user-select: none; 1171 | user-select: none; 1172 | vertical-align: middle; 1173 | width: 1em; 1174 | height: 1em; 1175 | font-size: 1.5rem; 1176 | line-height: 1; 1177 | text-align: center; 1178 | background-color: #fff; 1179 | background-position: 50%; 1180 | background-repeat: no-repeat; 1181 | border: 1px solid #d3d3d9; 1182 | box-shadow: none; 1183 | display: block; 1184 | -webkit-transition: all .2s ease-in-out; 1185 | transition: all .2s ease-in-out;`;; 1186 | export const control_label = css`${__root}; display: block; 1187 | -webkit-transition: all .2s ease-in-out; 1188 | transition: all .2s ease-in-out; 1189 | -webkit-box-flex: 1; 1190 | -ms-flex: 1 1 auto; 1191 | flex: 1 1 auto; 1192 | margin: 0 0 0 1rem; 1193 | color: inherit;`;; 1194 | export const control_xl = css`${__root}; font-size: 1.25rem; 1195 | &.control-indicator {font-size: 2rem;}`;; 1196 | export const control_l = css`${__root}; font-size: 1.125rem; 1197 | &.control-indicator {font-size: 1.75rem;}`;; 1198 | export const control_s = css`${__root}; font-size: .875rem; 1199 | &.control-indicator {font-size: 1.25rem;}`;; 1200 | export const control_xs = css`${__root}; font-size: .75rem; 1201 | &.control-indicator {font-size: 1rem;}`;; 1202 | export const progress_xl = css`${__root}; height: 1.25rem;`;; 1203 | export const progress_l = css`${__root}; height: 1.125rem;`;; 1204 | export const progress_s = css`${__root}; height: .875rem;`;; 1205 | export const progress_xs = css`${__root}; height: .75rem;`;; 1206 | export const button = css`${__root}; display: inline-block; 1207 | padding: calc((3rem - 1rem - 2px) / 2) 1.5em; 1208 | min-width: 3rem; 1209 | height: 3rem; 1210 | font-family: inherit; 1211 | font-weight: 600; 1212 | line-height: 1; 1213 | font-size: 1rem; 1214 | color: #323236; 1215 | letter-spacing: 0; 1216 | text-align: center; 1217 | text-transform: none; 1218 | text-decoration: none; 1219 | white-space: nowrap; 1220 | cursor: pointer; 1221 | background: #fff; 1222 | border: 1px solid #d3d3d9; 1223 | border-radius: 2px; 1224 | box-shadow: none; 1225 | -webkit-transition: all .2s ease-in-out; 1226 | transition: all .2s ease-in-out; 1227 | &:not(:disabled):focus {text-decoration: none; 1228 | color: #323236; 1229 | background: #f6f6f7; 1230 | border-color: #c8c8ce; 1231 | box-shadow: none;} 1232 | &:not(:disabled):hover {text-decoration: none; 1233 | color: #323236; 1234 | background: #f6f6f7; 1235 | border-color: #c8c8ce; 1236 | box-shadow: none;} 1237 | &:not(:disabled):active {color: #323236; 1238 | background: #ededf0; 1239 | border-color: #bebec3; 1240 | box-shadow: none;} 1241 | &svg {width: 1rem; 1242 | height: 1rem; 1243 | fill: currentColor; 1244 | -webkit-transition: all .2s ease-in-out; 1245 | transition: all .2s ease-in-out;}`;; 1246 | export const button_and_spinner = css`${__root}; &:before {margin-top: -.5em; 1247 | margin-left: -.5em; 1248 | width: 1em; 1249 | height: 1em;}`;; 1250 | export const tag_button_and_spinner = css`${__root}; &:before {margin-top: -.5em; 1251 | margin-left: -.5em; 1252 | width: 1em; 1253 | height: 1em;}`;; 1254 | export const button_and_error = css`${__root}; color: #fff; 1255 | background: #d91e18; 1256 | border-color: #d91e18; 1257 | &:not(:disabled):focus {color: #fff; 1258 | background: #dd342f; 1259 | border-color: #dd342f;} 1260 | &:not(:disabled):hover {color: #fff; 1261 | background: #dd342f; 1262 | border-color: #dd342f;} 1263 | &:not(:disabled):active {color: #fff; 1264 | background: #c31b16; 1265 | border-color: #c31b16;}`;; 1266 | export const tag_button_and_error = css`${__root}; color: #fff; 1267 | background: #d91e18; 1268 | border-color: #d91e18; 1269 | &:not(:disabled):focus {color: #fff; 1270 | background: #dd342f; 1271 | border-color: #dd342f;} 1272 | &:not(:disabled):hover {color: #fff; 1273 | background: #dd342f; 1274 | border-color: #dd342f;} 1275 | &:not(:disabled):active {color: #fff; 1276 | background: #c31b16; 1277 | border-color: #c31b16;}`;; 1278 | export const button_and_error_and_button_border = css`${__root}; color: #d91e18; 1279 | background: transparent;`;; 1280 | export const tag_button_and_error_and_button_border = css`${__root}; color: #d91e18; 1281 | background: transparent;`;; 1282 | export const button_and_warning = css`${__root}; color: #fff; 1283 | background: #ff4500; 1284 | border-color: #ff4500; 1285 | &:not(:disabled):focus {color: #fff; 1286 | background: #ff5819; 1287 | border-color: #ff5819;} 1288 | &:not(:disabled):hover {color: #fff; 1289 | background: #ff5819; 1290 | border-color: #ff5819;} 1291 | &:not(:disabled):active {color: #fff; 1292 | background: #e63e00; 1293 | border-color: #e63e00;}`;; 1294 | export const tag_button_and_warning = css`${__root}; color: #fff; 1295 | background: #ff4500; 1296 | border-color: #ff4500; 1297 | &:not(:disabled):focus {color: #fff; 1298 | background: #ff5819; 1299 | border-color: #ff5819;} 1300 | &:not(:disabled):hover {color: #fff; 1301 | background: #ff5819; 1302 | border-color: #ff5819;} 1303 | &:not(:disabled):active {color: #fff; 1304 | background: #e63e00; 1305 | border-color: #e63e00;}`;; 1306 | export const button_and_warning_and_button_border = css`${__root}; color: #ff4500; 1307 | background: transparent;`;; 1308 | export const tag_button_and_warning_and_button_border = css`${__root}; color: #ff4500; 1309 | background: transparent;`;; 1310 | export const button_and_success = css`${__root}; color: #fff; 1311 | background: #0a0; 1312 | border-color: #0a0; 1313 | &:not(:disabled):focus {color: #fff; 1314 | background: #19b319; 1315 | border-color: #19b319;} 1316 | &:not(:disabled):hover {color: #fff; 1317 | background: #19b319; 1318 | border-color: #19b319;} 1319 | &:not(:disabled):active {color: #fff; 1320 | background: #090; 1321 | border-color: #090;}`;; 1322 | export const tag_button_and_success = css`${__root}; color: #fff; 1323 | background: #0a0; 1324 | border-color: #0a0; 1325 | &:not(:disabled):focus {color: #fff; 1326 | background: #19b319; 1327 | border-color: #19b319;} 1328 | &:not(:disabled):hover {color: #fff; 1329 | background: #19b319; 1330 | border-color: #19b319;} 1331 | &:not(:disabled):active {color: #fff; 1332 | background: #090; 1333 | border-color: #090;}`;; 1334 | export const button_and_success_and_button_border = css`${__root}; color: #0a0; 1335 | background: transparent;`;; 1336 | export const tag_button_and_success_and_button_border = css`${__root}; color: #0a0; 1337 | background: transparent;`;; 1338 | export const button_and_info = css`${__root}; color: #fff; 1339 | background: #1e90ff; 1340 | border-color: #1e90ff; 1341 | &:not(:disabled):focus {color: #fff; 1342 | background: #349bff; 1343 | border-color: #349bff;} 1344 | &:not(:disabled):hover {color: #fff; 1345 | background: #349bff; 1346 | border-color: #349bff;} 1347 | &:not(:disabled):active {color: #fff; 1348 | background: #1b82e6; 1349 | border-color: #1b82e6;}`;; 1350 | export const tag_button_and_info = css`${__root}; color: #fff; 1351 | background: #1e90ff; 1352 | border-color: #1e90ff; 1353 | &:not(:disabled):focus {color: #fff; 1354 | background: #349bff; 1355 | border-color: #349bff;} 1356 | &:not(:disabled):hover {color: #fff; 1357 | background: #349bff; 1358 | border-color: #349bff;} 1359 | &:not(:disabled):active {color: #fff; 1360 | background: #1b82e6; 1361 | border-color: #1b82e6;}`;; 1362 | export const button_and_info_and_button_border = css`${__root}; color: #1e90ff; 1363 | background: transparent;`;; 1364 | export const tag_button_and_info_and_button_border = css`${__root}; color: #1e90ff; 1365 | background: transparent;`;; 1366 | export const button_block = css`${__root}; display: block; 1367 | width: 100%; 1368 | text-align: center;`;; 1369 | export const button_border = css`${__root}; background: transparent;`;; 1370 | export const button_square = css`${__root}; padding: calc((3rem - 1rem - 2px) / 2);`;; 1371 | export const button_pill = css`${__root}; border-radius: 1.5rem;`;; 1372 | export const button_xl = css`${__root}; padding: calc((4rem - 1.25rem - 2px) / 2) 1.5em; 1373 | min-width: 4rem; 1374 | height: 4rem; 1375 | font-size: 1.25rem; 1376 | &svg {width: 1.25rem; 1377 | height: 1.25rem;}`;; 1378 | export const button_xl_and_button_square = css`${__root}; padding: calc((4rem - 1.25rem - 2px) / 2);`;; 1379 | export const button_xl_and_button_pill = css`${__root}; border-radius: 2rem;`;; 1380 | export const button_l = css`${__root}; padding: calc((3.5rem - 1.125rem - 2px) / 2) 1.5em; 1381 | min-width: 3.5rem; 1382 | height: 3.5rem; 1383 | font-size: 1.125rem; 1384 | &svg {width: 1.125rem; 1385 | height: 1.125rem;}`;; 1386 | export const button_l_and_button_square = css`${__root}; padding: calc((3.5rem - 1.125rem - 2px) / 2);`;; 1387 | export const button_l_and_button_pill = css`${__root}; border-radius: 1.75rem;`;; 1388 | export const button_s = css`${__root}; padding: calc((2.5rem - .875rem - 2px) / 2) 1.5em; 1389 | min-width: 2.5rem; 1390 | height: 2.5rem; 1391 | font-size: .875rem; 1392 | &svg {width: .875rem; 1393 | height: .875rem;}`;; 1394 | export const button_s_and_button_square = css`${__root}; padding: calc((2.5rem - .875rem - 2px) / 2);`;; 1395 | export const button_s_and_button_pill = css`${__root}; border-radius: 1.25rem;`;; 1396 | export const button_xs = css`${__root}; padding: calc((2rem - .75rem - 2px) / 2) 1.5em; 1397 | min-width: 2rem; 1398 | height: 2rem; 1399 | font-size: .75rem; 1400 | &svg {width: .75rem; 1401 | height: .75rem;}`;; 1402 | export const button_xs_and_button_square = css`${__root}; padding: calc((2rem - .75rem - 2px) / 2);`;; 1403 | export const button_xs_and_button_pill = css`${__root}; border-radius: 1rem;`;; 1404 | export const button_white = css`${__root}; color: #000; 1405 | background: #fff; 1406 | border-color: #fff; 1407 | &:not(:disabled):focus {color: #000; 1408 | background: #f2f2f2; 1409 | border-color: #f2f2f2;} 1410 | &:not(:disabled):hover {color: #000; 1411 | background: #f2f2f2; 1412 | border-color: #f2f2f2;} 1413 | &:not(:disabled):active {color: #000; 1414 | background: #e6e6e6; 1415 | border-color: #e6e6e6;}`;; 1416 | export const button_white_and_button_border = css`${__root}; color: #fff; 1417 | background: transparent;`;; 1418 | export const button_light = css`${__root}; color: #323236; 1419 | background: #d3d3d9; 1420 | border-color: #d3d3d9; 1421 | &:not(:disabled):focus {color: #323236; 1422 | background: #dcdce1; 1423 | border-color: #dcdce1;} 1424 | &:not(:disabled):hover {color: #323236; 1425 | background: #dcdce1; 1426 | border-color: #dcdce1;} 1427 | &:not(:disabled):active {color: #323236; 1428 | background: #c8c8ce; 1429 | border-color: #c8c8ce;}`;; 1430 | export const button_light_and_button_border = css`${__root}; color: #d3d3d9; 1431 | background: transparent;`;; 1432 | export const button_grey = css`${__root}; color: #fff; 1433 | background: #616166; 1434 | border-color: #616166; 1435 | &:not(:disabled):focus {color: #fff; 1436 | background: #6c6c71; 1437 | border-color: #6c6c71;} 1438 | &:not(:disabled):hover {color: #fff; 1439 | background: #6c6c71; 1440 | border-color: #6c6c71;} 1441 | &:not(:disabled):active {color: #fff; 1442 | background: #5a5a5f; 1443 | border-color: #5a5a5f;}`;; 1444 | export const button_grey_and_button_border = css`${__root}; color: #616166; 1445 | background: transparent;`;; 1446 | export const button_dark = css`${__root}; color: #fff; 1447 | background: #323236; 1448 | border-color: #323236; 1449 | &:not(:disabled):focus {color: #fff; 1450 | background: #3c3c40; 1451 | border-color: #3c3c40;} 1452 | &:not(:disabled):hover {color: #fff; 1453 | background: #3c3c40; 1454 | border-color: #3c3c40;} 1455 | &:not(:disabled):active {color: #fff; 1456 | background: #2f2f32; 1457 | border-color: #2f2f32;}`;; 1458 | export const button_dark_and_button_border = css`${__root}; color: #323236; 1459 | background: transparent;`;; 1460 | export const button_black = css`${__root}; color: #fff; 1461 | background: #000; 1462 | border-color: #000; 1463 | &:not(:disabled):focus {color: #fff; 1464 | background: #333; 1465 | border-color: #333;} 1466 | &:not(:disabled):hover {color: #fff; 1467 | background: #333; 1468 | border-color: #333;} 1469 | &:not(:disabled):active {color: #fff; 1470 | background: #191919; 1471 | border-color: #191919;}`;; 1472 | export const button_black_and_button_border = css`${__root}; color: #000; 1473 | background: transparent;`;; 1474 | export const button_primary = css`${__root}; color: #fff; 1475 | background: #3455db; 1476 | border-color: #3455db; 1477 | &:not(:disabled):focus {color: #fff; 1478 | background: #4866df; 1479 | border-color: #4866df;} 1480 | &:not(:disabled):hover {color: #fff; 1481 | background: #4866df; 1482 | border-color: #4866df;} 1483 | &:not(:disabled):active {color: #fff; 1484 | background: #2f4dc5; 1485 | border-color: #2f4dc5;}`;; 1486 | export const button_primary_and_button_border = css`${__root}; color: #3455db; 1487 | background: transparent;`;; 1488 | export const button_secondary = css`${__root}; color: #fff; 1489 | background: #639; 1490 | border-color: #639; 1491 | &:not(:disabled):focus {color: #fff; 1492 | background: #7547a3; 1493 | border-color: #7547a3;} 1494 | &:not(:disabled):hover {color: #fff; 1495 | background: #7547a3; 1496 | border-color: #7547a3;} 1497 | &:not(:disabled):active {color: #fff; 1498 | background: #5c2e8a; 1499 | border-color: #5c2e8a;}`;; 1500 | export const button_secondary_and_button_border = css`${__root}; color: #639; 1501 | background: transparent;`;; 1502 | export const button_tertiary = css`${__root}; color: #fff; 1503 | background: #8b008b; 1504 | border-color: #8b008b; 1505 | &:not(:disabled):focus {color: #fff; 1506 | background: #971997; 1507 | border-color: #971997;} 1508 | &:not(:disabled):hover {color: #fff; 1509 | background: #971997; 1510 | border-color: #971997;} 1511 | &:not(:disabled):active {color: #fff; 1512 | background: #7d007d; 1513 | border-color: #7d007d;}`;; 1514 | export const button_tertiary_and_button_border = css`${__root}; color: #8b008b; 1515 | background: transparent;`;; 1516 | export const button_group = css`${__root}; display: -webkit-box; 1517 | display: -ms-flexbox; 1518 | display: flex; 1519 | &.button {position: relative; 1520 | -webkit-box-flex: 0; 1521 | -ms-flex: 0 0 auto; 1522 | flex: 0 0 auto;} 1523 | &button {position: relative; 1524 | -webkit-box-flex: 0; 1525 | -ms-flex: 0 0 auto; 1526 | flex: 0 0 auto;} 1527 | &.button:active {z-index: 2;} 1528 | &.button:focus {z-index: 2;} 1529 | &.button:hover {z-index: 2;} 1530 | &button:active {z-index: 2;} 1531 | &button:focus {z-index: 2;} 1532 | &button:hover {z-index: 2;} 1533 | &.button + .button {border-top-left-radius: 0; 1534 | border-bottom-left-radius: 0; 1535 | margin-left: -1px;} 1536 | &.button + button {border-top-left-radius: 0; 1537 | border-bottom-left-radius: 0; 1538 | margin-left: -1px;} 1539 | &button + .button {border-top-left-radius: 0; 1540 | border-bottom-left-radius: 0; 1541 | margin-left: -1px;} 1542 | &button + button {border-top-left-radius: 0; 1543 | border-bottom-left-radius: 0; 1544 | margin-left: -1px;}`;; 1545 | export const button_group_block = css`${__root}; width: 100%; 1546 | &.button {-webkit-box-flex: 1; 1547 | -ms-flex: 1 1 auto; 1548 | flex: 1 1 auto;} 1549 | &button {-webkit-box-flex: 1; 1550 | -ms-flex: 1 1 auto; 1551 | flex: 1 1 auto;}`;; 1552 | export const media = css`${__root}; display: block; 1553 | position: relative; 1554 | overflow: hidden; 1555 | background: rgba(0, 0, 0, .1); 1556 | border-radius: 2px; 1557 | &> .media-inner {display: block; 1558 | position: absolute; 1559 | top: 0; 1560 | right: 0; 1561 | bottom: 0; 1562 | left: 0; 1563 | width: 100%; 1564 | height: 100%;} 1565 | &> canvas {display: block; 1566 | position: absolute; 1567 | top: 0; 1568 | right: 0; 1569 | bottom: 0; 1570 | left: 0; 1571 | width: 100%; 1572 | height: 100%;} 1573 | &> iframe {display: block; 1574 | position: absolute; 1575 | top: 0; 1576 | right: 0; 1577 | bottom: 0; 1578 | left: 0; 1579 | width: 100%; 1580 | height: 100%;} 1581 | &> img {display: block; 1582 | position: absolute; 1583 | top: 0; 1584 | right: 0; 1585 | bottom: 0; 1586 | left: 0; 1587 | width: 100%; 1588 | height: 100%;} 1589 | &> svg {display: block; 1590 | position: absolute; 1591 | top: 0; 1592 | right: 0; 1593 | bottom: 0; 1594 | left: 0; 1595 | width: 100%; 1596 | height: 100%;} 1597 | &> video {display: block; 1598 | position: absolute; 1599 | top: 0; 1600 | right: 0; 1601 | bottom: 0; 1602 | left: 0; 1603 | width: 100%; 1604 | height: 100%;}`;; 1605 | export const media_1 = css`${__root}; padding-top: 100%;`;; 1606 | export const media_1_2 = css`${__root}; padding-top: 200%;`;; 1607 | export const media_9_16 = css`${__root}; padding-top: 177.77778%;`;; 1608 | export const media_9_14 = css`${__root}; padding-top: 155.55556%;`;; 1609 | export const media_2_3 = css`${__root}; padding-top: 150%;`;; 1610 | export const media_3_4 = css`${__root}; padding-top: 133.33333%;`;; 1611 | export const media_4_3 = css`${__root}; padding-top: 75%;`;; 1612 | export const media_3_2 = css`${__root}; padding-top: 66.66667%;`;; 1613 | export const media_16_9 = css`${__root}; padding-top: 56.25%;`;; 1614 | export const media_2_1 = css`${__root}; padding-top: 50%;`;; 1615 | export const nav = css`${__root}; &ul {margin: 0; 1616 | list-style: none;} 1617 | &ul li {margin: 1rem 0; 1618 | padding: 0;}`;; 1619 | export const nav_inline = css`${__root}; &ul li {display: inline-block; 1620 | margin: 0 1rem;}`;; 1621 | export const spinner = css`${__root}; position: relative; 1622 | &:before {display: block; 1623 | position: absolute; 1624 | top: 50%; 1625 | left: 50%; 1626 | margin-top: -1rem; 1627 | margin-left: -1rem; 1628 | width: 2rem; 1629 | height: 2rem; 1630 | content: ""; 1631 | border-radius: 50%; 1632 | border: 3px solid rgba(0, 0, 0, .1); 1633 | border-left-color: #fff; 1634 | -webkit-animation: a .5s infinite linear; 1635 | animation: a .5s infinite linear;}`;; 1636 | export const table = css`${__root}; margin: 1em 0; 1637 | width: 100%; 1638 | background: #fff; 1639 | border: 1px solid #d3d3d9; 1640 | border-radius: 2px; 1641 | border-collapse: collapse; 1642 | &caption {margin: 1em 0;} 1643 | &caption {font-family: inherit; 1644 | font-weight: inherit; 1645 | font-size: inherit; 1646 | color: inherit; 1647 | text-align: left;} 1648 | &th {font-family: inherit; 1649 | font-weight: inherit; 1650 | font-size: inherit; 1651 | color: inherit; 1652 | text-align: left;} 1653 | &th {padding: .5em; 1654 | text-transform: none; 1655 | background: #f6f6f7; 1656 | border: 1px solid #d3d3d9;} 1657 | &td {padding: .5em; 1658 | font-family: inherit; 1659 | font-weight: inherit; 1660 | font-size: inherit; 1661 | color: inherit; 1662 | line-height: 1.35; 1663 | vertical-align: middle; 1664 | border: 1px solid #d3d3d9;}`;; 1665 | export const table_responsive = css`${__root}; margin: 1em 0; 1666 | overflow-x: auto; 1667 | min-height: .01%; 1668 | @media (min-width: 768px) and (max-width: 1023px) { 1669 | width: 100%; 1670 | overflow-y: hidden; 1671 | -ms-overflow-style: -ms-autohiding-scrollbar; 1672 | border: 1px solid #d3d3d9; 1673 | } 1674 | &> table {@media (min-width: 768px) and (max-width: 1023px) { 1675 | margin: 0; 1676 | border: none; 1677 | }} 1678 | &> table td {@media (min-width: 768px) and (max-width: 1023px) { 1679 | white-space: nowrap; 1680 | }} 1681 | &> table th {@media (min-width: 768px) and (max-width: 1023px) { 1682 | white-space: nowrap; 1683 | }} 1684 | &> table td:first-child {@media (min-width: 768px) and (max-width: 1023px) { 1685 | border-left: none; 1686 | }} 1687 | &> table th:first-child {@media (min-width: 768px) and (max-width: 1023px) { 1688 | border-left: none; 1689 | }} 1690 | &> table td:last-child {@media (min-width: 768px) and (max-width: 1023px) { 1691 | border-right: none; 1692 | }} 1693 | &> table th:last-child {@media (min-width: 768px) and (max-width: 1023px) { 1694 | border-right: none; 1695 | }} 1696 | &> table tr:first-child {@media (min-width: 768px) and (max-width: 1023px) { 1697 | border-top: none; 1698 | }} 1699 | &> table tr:last-child {@media (min-width: 768px) and (max-width: 1023px) { 1700 | border-bottom: none; 1701 | }}`;; 1702 | export const background_repeat = css`${__root}; background-repeat: repeat;`;; 1703 | export const background_no_repeat = css`${__root}; background-repeat: no-repeat;`;; 1704 | export const background_fixed = css`${__root}; background-attachment: fixed;`;; 1705 | export const background_cover = css`${__root}; background-size: cover;`;; 1706 | export const background_center = css`${__root}; background-position: 50%;`;; 1707 | export const background_transparent = css`${__root}; background: transparent;`;; 1708 | export const background_white = css`${__root}; background-color: #fff;`;; 1709 | export const background_black = css`${__root}; background-color: #000;`;; 1710 | export const background_light = css`${__root}; background-color: #d3d3d9;`;; 1711 | export const background_light_100 = css`${__root}; background-color: #f6f6f7;`;; 1712 | export const background_light_200 = css`${__root}; background-color: #ededf0;`;; 1713 | export const background_light_300 = css`${__root}; background-color: #e5e5e8;`;; 1714 | export const background_light_400 = css`${__root}; background-color: #dcdce1;`;; 1715 | export const background_light_500 = css`${__root}; background-color: #d3d3d9;`;; 1716 | export const background_light_600 = css`${__root}; background-color: #c8c8ce;`;; 1717 | export const background_light_700 = css`${__root}; background-color: #bebec3;`;; 1718 | export const background_light_800 = css`${__root}; background-color: #b3b3b8;`;; 1719 | export const background_light_900 = css`${__root}; background-color: #a9a9ae;`;; 1720 | export const background_grey = css`${__root}; background-color: #616166;`;; 1721 | export const background_grey_100 = css`${__root}; background-color: #909094;`;; 1722 | export const background_grey_200 = css`${__root}; background-color: #848488;`;; 1723 | export const background_grey_300 = css`${__root}; background-color: #79797d;`;; 1724 | export const background_grey_400 = css`${__root}; background-color: #6c6c71;`;; 1725 | export const background_grey_500 = css`${__root}; background-color: #616166;`;; 1726 | export const background_grey_600 = css`${__root}; background-color: #5a5a5f;`;; 1727 | export const background_grey_700 = css`${__root}; background-color: #525257;`;; 1728 | export const background_grey_800 = css`${__root}; background-color: #4c4c50;`;; 1729 | export const background_grey_900 = css`${__root}; background-color: #444447;`;; 1730 | export const background_dark = css`${__root}; background-color: #323236;`;; 1731 | export const background_dark_100 = css`${__root}; background-color: #5b5b5e;`;; 1732 | export const background_dark_200 = css`${__root}; background-color: #515154;`;; 1733 | export const background_dark_300 = css`${__root}; background-color: #47474a;`;; 1734 | export const background_dark_400 = css`${__root}; background-color: #3c3c40;`;; 1735 | export const background_dark_500 = css`${__root}; background-color: #323236;`;; 1736 | export const background_dark_600 = css`${__root}; background-color: #2f2f32;`;; 1737 | export const background_dark_700 = css`${__root}; background-color: #2b2b2e;`;; 1738 | export const background_dark_800 = css`${__root}; background-color: #27272a;`;; 1739 | export const background_dark_900 = css`${__root}; background-color: #232326;`;; 1740 | export const background_primary = css`${__root}; background-color: #3455db;`;; 1741 | export const background_primary_100 = css`${__root}; background-color: #8599e9;`;; 1742 | export const background_primary_200 = css`${__root}; background-color: #7188e6;`;; 1743 | export const background_primary_300 = css`${__root}; background-color: #5d77e2;`;; 1744 | export const background_primary_400 = css`${__root}; background-color: #4866df;`;; 1745 | export const background_primary_500 = css`${__root}; background-color: #3455db;`;; 1746 | export const background_primary_600 = css`${__root}; background-color: #2f4dc5;`;; 1747 | export const background_primary_700 = css`${__root}; background-color: #2a44af;`;; 1748 | export const background_primary_800 = css`${__root}; background-color: #243b99;`;; 1749 | export const background_primary_900 = css`${__root}; background-color: #1f3383;`;; 1750 | export const background_secondary = css`${__root}; background-color: #639;`;; 1751 | export const background_secondary_100 = css`${__root}; background-color: #a385c2;`;; 1752 | export const background_secondary_200 = css`${__root}; background-color: #9470b8;`;; 1753 | export const background_secondary_300 = css`${__root}; background-color: #855cad;`;; 1754 | export const background_secondary_400 = css`${__root}; background-color: #7547a3;`;; 1755 | export const background_secondary_500 = css`${__root}; background-color: #639;`;; 1756 | export const background_secondary_600 = css`${__root}; background-color: #5c2e8a;`;; 1757 | export const background_secondary_700 = css`${__root}; background-color: #52297a;`;; 1758 | export const background_secondary_800 = css`${__root}; background-color: #47246b;`;; 1759 | export const background_secondary_900 = css`${__root}; background-color: #3d1f5c;`;; 1760 | export const background_tertiary = css`${__root}; background-color: #8b008b;`;; 1761 | export const background_tertiary_100 = css`${__root}; background-color: #b966b9;`;; 1762 | export const background_tertiary_200 = css`${__root}; background-color: #ae4dae;`;; 1763 | export const background_tertiary_300 = css`${__root}; background-color: #a233a2;`;; 1764 | export const background_tertiary_400 = css`${__root}; background-color: #971997;`;; 1765 | export const background_tertiary_500 = css`${__root}; background-color: #8b008b;`;; 1766 | export const background_tertiary_600 = css`${__root}; background-color: #7d007d;`;; 1767 | export const background_tertiary_700 = css`${__root}; background-color: #6f006f;`;; 1768 | export const background_tertiary_800 = css`${__root}; background-color: #610061;`;; 1769 | export const background_tertiary_900 = css`${__root}; background-color: #530053;`;; 1770 | export const background_error = css`${__root}; background-color: #d91e18;`;; 1771 | export const background_error_100 = css`${__root}; background-color: #e87874;`;; 1772 | export const background_error_200 = css`${__root}; background-color: #e4625d;`;; 1773 | export const background_error_300 = css`${__root}; background-color: #e14b46;`;; 1774 | export const background_error_400 = css`${__root}; background-color: #dd342f;`;; 1775 | export const background_error_500 = css`${__root}; background-color: #d91e18;`;; 1776 | export const background_error_600 = css`${__root}; background-color: #c31b16;`;; 1777 | export const background_error_700 = css`${__root}; background-color: #ae1813;`;; 1778 | export const background_error_800 = css`${__root}; background-color: #981511;`;; 1779 | export const background_error_900 = css`${__root}; background-color: #82120e;`;; 1780 | export const background_warning = css`${__root}; background-color: #ff4500;`;; 1781 | export const background_warning_100 = css`${__root}; background-color: #ff8f66;`;; 1782 | export const background_warning_200 = css`${__root}; background-color: #ff7d4d;`;; 1783 | export const background_warning_300 = css`${__root}; background-color: #ff6a33;`;; 1784 | export const background_warning_400 = css`${__root}; background-color: #ff5819;`;; 1785 | export const background_warning_500 = css`${__root}; background-color: #ff4500;`;; 1786 | export const background_warning_600 = css`${__root}; background-color: #e63e00;`;; 1787 | export const background_warning_700 = css`${__root}; background-color: #cc3700;`;; 1788 | export const background_warning_800 = css`${__root}; background-color: #b33000;`;; 1789 | export const background_warning_900 = css`${__root}; background-color: #992900;`;; 1790 | export const background_success = css`${__root}; background-color: #0a0;`;; 1791 | export const background_success_100 = css`${__root}; background-color: #6c6;`;; 1792 | export const background_success_200 = css`${__root}; background-color: #4dc44d;`;; 1793 | export const background_success_300 = css`${__root}; background-color: #3b3;`;; 1794 | export const background_success_400 = css`${__root}; background-color: #19b319;`;; 1795 | export const background_success_500 = css`${__root}; background-color: #0a0;`;; 1796 | export const background_success_600 = css`${__root}; background-color: #090;`;; 1797 | export const background_success_700 = css`${__root}; background-color: #080;`;; 1798 | export const background_success_800 = css`${__root}; background-color: #070;`;; 1799 | export const background_success_900 = css`${__root}; background-color: #060;`;; 1800 | export const background_info = css`${__root}; background-color: #1e90ff;`;; 1801 | export const background_info_100 = css`${__root}; background-color: #78bcff;`;; 1802 | export const background_info_200 = css`${__root}; background-color: #62b1ff;`;; 1803 | export const background_info_300 = css`${__root}; background-color: #4ba6ff;`;; 1804 | export const background_info_400 = css`${__root}; background-color: #349bff;`;; 1805 | export const background_info_500 = css`${__root}; background-color: #1e90ff;`;; 1806 | export const background_info_600 = css`${__root}; background-color: #1b82e6;`;; 1807 | export const background_info_700 = css`${__root}; background-color: #1873cc;`;; 1808 | export const background_info_800 = css`${__root}; background-color: #1565b3;`;; 1809 | export const background_info_900 = css`${__root}; background-color: #125699;`;; 1810 | export const border = css`${__root}; border: 1px solid #d3d3d9;`;; 1811 | export const border_vertical = css`${__root}; border-top: 1px solid #d3d3d9; 1812 | border-bottom: 1px solid #d3d3d9;`;; 1813 | export const border_horizontal = css`${__root}; border-left: 1px solid #d3d3d9; 1814 | border-right: 1px solid #d3d3d9;`;; 1815 | export const border_top = css`${__root}; border-top: 1px solid #d3d3d9;`;; 1816 | export const border_right = css`${__root}; border-right: 1px solid #d3d3d9;`;; 1817 | export const border_bottom = css`${__root}; border-bottom: 1px solid #d3d3d9;`;; 1818 | export const border_left = css`${__root}; border-left: 1px solid #d3d3d9;`;; 1819 | export const current_color = css`${__root}; color: currentColor;`;; 1820 | export const color_inherit = css`${__root}; color: inherit;`;; 1821 | export const color_white = css`${__root}; color: #fff;`;; 1822 | export const color_black = css`${__root}; color: #000;`;; 1823 | export const color_light = css`${__root}; color: #d3d3d9;`;; 1824 | export const color_light_100 = css`${__root}; color: #f6f6f7;`;; 1825 | export const color_light_200 = css`${__root}; color: #ededf0;`;; 1826 | export const color_light_300 = css`${__root}; color: #e5e5e8;`;; 1827 | export const color_light_400 = css`${__root}; color: #dcdce1;`;; 1828 | export const color_light_500 = css`${__root}; color: #d3d3d9;`;; 1829 | export const color_light_600 = css`${__root}; color: #c8c8ce;`;; 1830 | export const color_light_700 = css`${__root}; color: #bebec3;`;; 1831 | export const color_light_800 = css`${__root}; color: #b3b3b8;`;; 1832 | export const color_light_900 = css`${__root}; color: #a9a9ae;`;; 1833 | export const color_grey = css`${__root}; color: #616166;`;; 1834 | export const color_grey_100 = css`${__root}; color: #909094;`;; 1835 | export const color_grey_200 = css`${__root}; color: #848488;`;; 1836 | export const color_grey_300 = css`${__root}; color: #79797d;`;; 1837 | export const color_grey_400 = css`${__root}; color: #6c6c71;`;; 1838 | export const color_grey_500 = css`${__root}; color: #616166;`;; 1839 | export const color_grey_600 = css`${__root}; color: #5a5a5f;`;; 1840 | export const color_grey_700 = css`${__root}; color: #525257;`;; 1841 | export const color_grey_800 = css`${__root}; color: #4c4c50;`;; 1842 | export const color_grey_900 = css`${__root}; color: #444447;`;; 1843 | export const color_dark = css`${__root}; color: #323236;`;; 1844 | export const color_dark_100 = css`${__root}; color: #5b5b5e;`;; 1845 | export const color_dark_200 = css`${__root}; color: #515154;`;; 1846 | export const color_dark_300 = css`${__root}; color: #47474a;`;; 1847 | export const color_dark_400 = css`${__root}; color: #3c3c40;`;; 1848 | export const color_dark_500 = css`${__root}; color: #323236;`;; 1849 | export const color_dark_600 = css`${__root}; color: #2f2f32;`;; 1850 | export const color_dark_700 = css`${__root}; color: #2b2b2e;`;; 1851 | export const color_dark_800 = css`${__root}; color: #27272a;`;; 1852 | export const color_dark_900 = css`${__root}; color: #232326;`;; 1853 | export const color_primary = css`${__root}; color: #3455db;`;; 1854 | export const color_primary_100 = css`${__root}; color: #8599e9;`;; 1855 | export const color_primary_200 = css`${__root}; color: #7188e6;`;; 1856 | export const color_primary_300 = css`${__root}; color: #5d77e2;`;; 1857 | export const color_primary_400 = css`${__root}; color: #4866df;`;; 1858 | export const color_primary_500 = css`${__root}; color: #3455db;`;; 1859 | export const color_primary_600 = css`${__root}; color: #2f4dc5;`;; 1860 | export const color_primary_700 = css`${__root}; color: #2a44af;`;; 1861 | export const color_primary_800 = css`${__root}; color: #243b99;`;; 1862 | export const color_primary_900 = css`${__root}; color: #1f3383;`;; 1863 | export const color_secondary = css`${__root}; color: #639;`;; 1864 | export const color_secondary_100 = css`${__root}; color: #a385c2;`;; 1865 | export const color_secondary_200 = css`${__root}; color: #9470b8;`;; 1866 | export const color_secondary_300 = css`${__root}; color: #855cad;`;; 1867 | export const color_secondary_400 = css`${__root}; color: #7547a3;`;; 1868 | export const color_secondary_500 = css`${__root}; color: #639;`;; 1869 | export const color_secondary_600 = css`${__root}; color: #5c2e8a;`;; 1870 | export const color_secondary_700 = css`${__root}; color: #52297a;`;; 1871 | export const color_secondary_800 = css`${__root}; color: #47246b;`;; 1872 | export const color_secondary_900 = css`${__root}; color: #3d1f5c;`;; 1873 | export const color_tertiary = css`${__root}; color: #8b008b;`;; 1874 | export const color_tertiary_100 = css`${__root}; color: #b966b9;`;; 1875 | export const color_tertiary_200 = css`${__root}; color: #ae4dae;`;; 1876 | export const color_tertiary_300 = css`${__root}; color: #a233a2;`;; 1877 | export const color_tertiary_400 = css`${__root}; color: #971997;`;; 1878 | export const color_tertiary_500 = css`${__root}; color: #8b008b;`;; 1879 | export const color_tertiary_600 = css`${__root}; color: #7d007d;`;; 1880 | export const color_tertiary_700 = css`${__root}; color: #6f006f;`;; 1881 | export const color_tertiary_800 = css`${__root}; color: #610061;`;; 1882 | export const color_tertiary_900 = css`${__root}; color: #530053;`;; 1883 | export const color_error = css`${__root}; color: #d91e18;`;; 1884 | export const color_error_100 = css`${__root}; color: #e87874;`;; 1885 | export const color_error_200 = css`${__root}; color: #e4625d;`;; 1886 | export const color_error_300 = css`${__root}; color: #e14b46;`;; 1887 | export const color_error_400 = css`${__root}; color: #dd342f;`;; 1888 | export const color_error_500 = css`${__root}; color: #d91e18;`;; 1889 | export const color_error_600 = css`${__root}; color: #c31b16;`;; 1890 | export const color_error_700 = css`${__root}; color: #ae1813;`;; 1891 | export const color_error_800 = css`${__root}; color: #981511;`;; 1892 | export const color_error_900 = css`${__root}; color: #82120e;`;; 1893 | export const color_warning = css`${__root}; color: #ff4500;`;; 1894 | export const color_warning_100 = css`${__root}; color: #ff8f66;`;; 1895 | export const color_warning_200 = css`${__root}; color: #ff7d4d;`;; 1896 | export const color_warning_300 = css`${__root}; color: #ff6a33;`;; 1897 | export const color_warning_400 = css`${__root}; color: #ff5819;`;; 1898 | export const color_warning_500 = css`${__root}; color: #ff4500;`;; 1899 | export const color_warning_600 = css`${__root}; color: #e63e00;`;; 1900 | export const color_warning_700 = css`${__root}; color: #cc3700;`;; 1901 | export const color_warning_800 = css`${__root}; color: #b33000;`;; 1902 | export const color_warning_900 = css`${__root}; color: #992900;`;; 1903 | export const color_success = css`${__root}; color: #0a0;`;; 1904 | export const color_success_100 = css`${__root}; color: #6c6;`;; 1905 | export const color_success_200 = css`${__root}; color: #4dc44d;`;; 1906 | export const color_success_300 = css`${__root}; color: #3b3;`;; 1907 | export const color_success_400 = css`${__root}; color: #19b319;`;; 1908 | export const color_success_500 = css`${__root}; color: #0a0;`;; 1909 | export const color_success_600 = css`${__root}; color: #090;`;; 1910 | export const color_success_700 = css`${__root}; color: #080;`;; 1911 | export const color_success_800 = css`${__root}; color: #070;`;; 1912 | export const color_success_900 = css`${__root}; color: #060;`;; 1913 | export const color_info = css`${__root}; color: #1e90ff;`;; 1914 | export const color_info_100 = css`${__root}; color: #78bcff;`;; 1915 | export const color_info_200 = css`${__root}; color: #62b1ff;`;; 1916 | export const color_info_300 = css`${__root}; color: #4ba6ff;`;; 1917 | export const color_info_400 = css`${__root}; color: #349bff;`;; 1918 | export const color_info_500 = css`${__root}; color: #1e90ff;`;; 1919 | export const color_info_600 = css`${__root}; color: #1b82e6;`;; 1920 | export const color_info_700 = css`${__root}; color: #1873cc;`;; 1921 | export const color_info_800 = css`${__root}; color: #1565b3;`;; 1922 | export const color_info_900 = css`${__root}; color: #125699;`;; 1923 | export const border_radius = css`${__root}; border-radius: 2px;`;; 1924 | export const border_color_white = css`${__root}; border-color: #fff;`;; 1925 | export const border_color_black = css`${__root}; border-color: #000;`;; 1926 | export const border_color_light = css`${__root}; border-color: #d3d3d9;`;; 1927 | export const border_color_light_100 = css`${__root}; border-color: #f6f6f7;`;; 1928 | export const border_color_light_200 = css`${__root}; border-color: #ededf0;`;; 1929 | export const border_color_light_300 = css`${__root}; border-color: #e5e5e8;`;; 1930 | export const border_color_light_400 = css`${__root}; border-color: #dcdce1;`;; 1931 | export const border_color_light_500 = css`${__root}; border-color: #d3d3d9;`;; 1932 | export const border_color_light_600 = css`${__root}; border-color: #c8c8ce;`;; 1933 | export const border_color_light_700 = css`${__root}; border-color: #bebec3;`;; 1934 | export const border_color_light_800 = css`${__root}; border-color: #b3b3b8;`;; 1935 | export const border_color_light_900 = css`${__root}; border-color: #a9a9ae;`;; 1936 | export const border_color_grey = css`${__root}; border-color: #616166;`;; 1937 | export const border_color_grey_100 = css`${__root}; border-color: #909094;`;; 1938 | export const border_color_grey_200 = css`${__root}; border-color: #848488;`;; 1939 | export const border_color_grey_300 = css`${__root}; border-color: #79797d;`;; 1940 | export const border_color_grey_400 = css`${__root}; border-color: #6c6c71;`;; 1941 | export const border_color_grey_500 = css`${__root}; border-color: #616166;`;; 1942 | export const border_color_grey_600 = css`${__root}; border-color: #5a5a5f;`;; 1943 | export const border_color_grey_700 = css`${__root}; border-color: #525257;`;; 1944 | export const border_color_grey_800 = css`${__root}; border-color: #4c4c50;`;; 1945 | export const border_color_grey_900 = css`${__root}; border-color: #444447;`;; 1946 | export const border_color_dark = css`${__root}; border-color: #323236;`;; 1947 | export const border_color_dark_100 = css`${__root}; border-color: #5b5b5e;`;; 1948 | export const border_color_dark_200 = css`${__root}; border-color: #515154;`;; 1949 | export const border_color_dark_300 = css`${__root}; border-color: #47474a;`;; 1950 | export const border_color_dark_400 = css`${__root}; border-color: #3c3c40;`;; 1951 | export const border_color_dark_500 = css`${__root}; border-color: #323236;`;; 1952 | export const border_color_dark_600 = css`${__root}; border-color: #2f2f32;`;; 1953 | export const border_color_dark_700 = css`${__root}; border-color: #2b2b2e;`;; 1954 | export const border_color_dark_800 = css`${__root}; border-color: #27272a;`;; 1955 | export const border_color_dark_900 = css`${__root}; border-color: #232326;`;; 1956 | export const border_color_primary = css`${__root}; border-color: #3455db;`;; 1957 | export const border_color_primary_100 = css`${__root}; border-color: #8599e9;`;; 1958 | export const border_color_primary_200 = css`${__root}; border-color: #7188e6;`;; 1959 | export const border_color_primary_300 = css`${__root}; border-color: #5d77e2;`;; 1960 | export const border_color_primary_400 = css`${__root}; border-color: #4866df;`;; 1961 | export const border_color_primary_500 = css`${__root}; border-color: #3455db;`;; 1962 | export const border_color_primary_600 = css`${__root}; border-color: #2f4dc5;`;; 1963 | export const border_color_primary_700 = css`${__root}; border-color: #2a44af;`;; 1964 | export const border_color_primary_800 = css`${__root}; border-color: #243b99;`;; 1965 | export const border_color_primary_900 = css`${__root}; border-color: #1f3383;`;; 1966 | export const border_color_secondary = css`${__root}; border-color: #639;`;; 1967 | export const border_color_secondary_100 = css`${__root}; border-color: #a385c2;`;; 1968 | export const border_color_secondary_200 = css`${__root}; border-color: #9470b8;`;; 1969 | export const border_color_secondary_300 = css`${__root}; border-color: #855cad;`;; 1970 | export const border_color_secondary_400 = css`${__root}; border-color: #7547a3;`;; 1971 | export const border_color_secondary_500 = css`${__root}; border-color: #639;`;; 1972 | export const border_color_secondary_600 = css`${__root}; border-color: #5c2e8a;`;; 1973 | export const border_color_secondary_700 = css`${__root}; border-color: #52297a;`;; 1974 | export const border_color_secondary_800 = css`${__root}; border-color: #47246b;`;; 1975 | export const border_color_secondary_900 = css`${__root}; border-color: #3d1f5c;`;; 1976 | export const border_color_tertiary = css`${__root}; border-color: #8b008b;`;; 1977 | export const border_color_tertiary_100 = css`${__root}; border-color: #b966b9;`;; 1978 | export const border_color_tertiary_200 = css`${__root}; border-color: #ae4dae;`;; 1979 | export const border_color_tertiary_300 = css`${__root}; border-color: #a233a2;`;; 1980 | export const border_color_tertiary_400 = css`${__root}; border-color: #971997;`;; 1981 | export const border_color_tertiary_500 = css`${__root}; border-color: #8b008b;`;; 1982 | export const border_color_tertiary_600 = css`${__root}; border-color: #7d007d;`;; 1983 | export const border_color_tertiary_700 = css`${__root}; border-color: #6f006f;`;; 1984 | export const border_color_tertiary_800 = css`${__root}; border-color: #610061;`;; 1985 | export const border_color_tertiary_900 = css`${__root}; border-color: #530053;`;; 1986 | export const border_color_error = css`${__root}; border-color: #d91e18;`;; 1987 | export const border_color_error_100 = css`${__root}; border-color: #e87874;`;; 1988 | export const border_color_error_200 = css`${__root}; border-color: #e4625d;`;; 1989 | export const border_color_error_300 = css`${__root}; border-color: #e14b46;`;; 1990 | export const border_color_error_400 = css`${__root}; border-color: #dd342f;`;; 1991 | export const border_color_error_500 = css`${__root}; border-color: #d91e18;`;; 1992 | export const border_color_error_600 = css`${__root}; border-color: #c31b16;`;; 1993 | export const border_color_error_700 = css`${__root}; border-color: #ae1813;`;; 1994 | export const border_color_error_800 = css`${__root}; border-color: #981511;`;; 1995 | export const border_color_error_900 = css`${__root}; border-color: #82120e;`;; 1996 | export const border_color_warning = css`${__root}; border-color: #ff4500;`;; 1997 | export const border_color_warning_100 = css`${__root}; border-color: #ff8f66;`;; 1998 | export const border_color_warning_200 = css`${__root}; border-color: #ff7d4d;`;; 1999 | export const border_color_warning_300 = css`${__root}; border-color: #ff6a33;`;; 2000 | export const border_color_warning_400 = css`${__root}; border-color: #ff5819;`;; 2001 | export const border_color_warning_500 = css`${__root}; border-color: #ff4500;`;; 2002 | export const border_color_warning_600 = css`${__root}; border-color: #e63e00;`;; 2003 | export const border_color_warning_700 = css`${__root}; border-color: #cc3700;`;; 2004 | export const border_color_warning_800 = css`${__root}; border-color: #b33000;`;; 2005 | export const border_color_warning_900 = css`${__root}; border-color: #992900;`;; 2006 | export const border_color_success = css`${__root}; border-color: #0a0;`;; 2007 | export const border_color_success_100 = css`${__root}; border-color: #6c6;`;; 2008 | export const border_color_success_200 = css`${__root}; border-color: #4dc44d;`;; 2009 | export const border_color_success_300 = css`${__root}; border-color: #3b3;`;; 2010 | export const border_color_success_400 = css`${__root}; border-color: #19b319;`;; 2011 | export const border_color_success_500 = css`${__root}; border-color: #0a0;`;; 2012 | export const border_color_success_600 = css`${__root}; border-color: #090;`;; 2013 | export const border_color_success_700 = css`${__root}; border-color: #080;`;; 2014 | export const border_color_success_800 = css`${__root}; border-color: #070;`;; 2015 | export const border_color_success_900 = css`${__root}; border-color: #060;`;; 2016 | export const border_color_info = css`${__root}; border-color: #1e90ff;`;; 2017 | export const border_color_info_100 = css`${__root}; border-color: #78bcff;`;; 2018 | export const border_color_info_200 = css`${__root}; border-color: #62b1ff;`;; 2019 | export const border_color_info_300 = css`${__root}; border-color: #4ba6ff;`;; 2020 | export const border_color_info_400 = css`${__root}; border-color: #349bff;`;; 2021 | export const border_color_info_500 = css`${__root}; border-color: #1e90ff;`;; 2022 | export const border_color_info_600 = css`${__root}; border-color: #1b82e6;`;; 2023 | export const border_color_info_700 = css`${__root}; border-color: #1873cc;`;; 2024 | export const border_color_info_800 = css`${__root}; border-color: #1565b3;`;; 2025 | export const border_color_info_900 = css`${__root}; border-color: #125699;`;; 2026 | export const display_block = css`${__root}; display: block;`;; 2027 | export const display_inline_block = css`${__root}; display: inline-block;`;; 2028 | export const display_table = css`${__root}; display: table;`;; 2029 | export const display_table_cell = css`${__root}; display: table-cell; 2030 | vertical-align: middle;`;; 2031 | export const fill_white = css`${__root}; fill: #fff;`;; 2032 | export const fill_black = css`${__root}; fill: #000;`;; 2033 | export const fill_light = css`${__root}; fill: #d3d3d9;`;; 2034 | export const fill_light_100 = css`${__root}; fill: #f6f6f7;`;; 2035 | export const fill_light_200 = css`${__root}; fill: #ededf0;`;; 2036 | export const fill_light_300 = css`${__root}; fill: #e5e5e8;`;; 2037 | export const fill_light_400 = css`${__root}; fill: #dcdce1;`;; 2038 | export const fill_light_500 = css`${__root}; fill: #d3d3d9;`;; 2039 | export const fill_light_600 = css`${__root}; fill: #c8c8ce;`;; 2040 | export const fill_light_700 = css`${__root}; fill: #bebec3;`;; 2041 | export const fill_light_800 = css`${__root}; fill: #b3b3b8;`;; 2042 | export const fill_light_900 = css`${__root}; fill: #a9a9ae;`;; 2043 | export const fill_grey = css`${__root}; fill: #616166;`;; 2044 | export const fill_grey_100 = css`${__root}; fill: #909094;`;; 2045 | export const fill_grey_200 = css`${__root}; fill: #848488;`;; 2046 | export const fill_grey_300 = css`${__root}; fill: #79797d;`;; 2047 | export const fill_grey_400 = css`${__root}; fill: #6c6c71;`;; 2048 | export const fill_grey_500 = css`${__root}; fill: #616166;`;; 2049 | export const fill_grey_600 = css`${__root}; fill: #5a5a5f;`;; 2050 | export const fill_grey_700 = css`${__root}; fill: #525257;`;; 2051 | export const fill_grey_800 = css`${__root}; fill: #4c4c50;`;; 2052 | export const fill_grey_900 = css`${__root}; fill: #444447;`;; 2053 | export const fill_dark = css`${__root}; fill: #323236;`;; 2054 | export const fill_dark_100 = css`${__root}; fill: #5b5b5e;`;; 2055 | export const fill_dark_200 = css`${__root}; fill: #515154;`;; 2056 | export const fill_dark_300 = css`${__root}; fill: #47474a;`;; 2057 | export const fill_dark_400 = css`${__root}; fill: #3c3c40;`;; 2058 | export const fill_dark_500 = css`${__root}; fill: #323236;`;; 2059 | export const fill_dark_600 = css`${__root}; fill: #2f2f32;`;; 2060 | export const fill_dark_700 = css`${__root}; fill: #2b2b2e;`;; 2061 | export const fill_dark_800 = css`${__root}; fill: #27272a;`;; 2062 | export const fill_dark_900 = css`${__root}; fill: #232326;`;; 2063 | export const fill_primary = css`${__root}; fill: #3455db;`;; 2064 | export const fill_primary_100 = css`${__root}; fill: #8599e9;`;; 2065 | export const fill_primary_200 = css`${__root}; fill: #7188e6;`;; 2066 | export const fill_primary_300 = css`${__root}; fill: #5d77e2;`;; 2067 | export const fill_primary_400 = css`${__root}; fill: #4866df;`;; 2068 | export const fill_primary_500 = css`${__root}; fill: #3455db;`;; 2069 | export const fill_primary_600 = css`${__root}; fill: #2f4dc5;`;; 2070 | export const fill_primary_700 = css`${__root}; fill: #2a44af;`;; 2071 | export const fill_primary_800 = css`${__root}; fill: #243b99;`;; 2072 | export const fill_primary_900 = css`${__root}; fill: #1f3383;`;; 2073 | export const fill_secondary = css`${__root}; fill: #639;`;; 2074 | export const fill_secondary_100 = css`${__root}; fill: #a385c2;`;; 2075 | export const fill_secondary_200 = css`${__root}; fill: #9470b8;`;; 2076 | export const fill_secondary_300 = css`${__root}; fill: #855cad;`;; 2077 | export const fill_secondary_400 = css`${__root}; fill: #7547a3;`;; 2078 | export const fill_secondary_500 = css`${__root}; fill: #639;`;; 2079 | export const fill_secondary_600 = css`${__root}; fill: #5c2e8a;`;; 2080 | export const fill_secondary_700 = css`${__root}; fill: #52297a;`;; 2081 | export const fill_secondary_800 = css`${__root}; fill: #47246b;`;; 2082 | export const fill_secondary_900 = css`${__root}; fill: #3d1f5c;`;; 2083 | export const fill_tertiary = css`${__root}; fill: #8b008b;`;; 2084 | export const fill_tertiary_100 = css`${__root}; fill: #b966b9;`;; 2085 | export const fill_tertiary_200 = css`${__root}; fill: #ae4dae;`;; 2086 | export const fill_tertiary_300 = css`${__root}; fill: #a233a2;`;; 2087 | export const fill_tertiary_400 = css`${__root}; fill: #971997;`;; 2088 | export const fill_tertiary_500 = css`${__root}; fill: #8b008b;`;; 2089 | export const fill_tertiary_600 = css`${__root}; fill: #7d007d;`;; 2090 | export const fill_tertiary_700 = css`${__root}; fill: #6f006f;`;; 2091 | export const fill_tertiary_800 = css`${__root}; fill: #610061;`;; 2092 | export const fill_tertiary_900 = css`${__root}; fill: #530053;`;; 2093 | export const fill_error = css`${__root}; fill: #d91e18;`;; 2094 | export const fill_error_100 = css`${__root}; fill: #e87874;`;; 2095 | export const fill_error_200 = css`${__root}; fill: #e4625d;`;; 2096 | export const fill_error_300 = css`${__root}; fill: #e14b46;`;; 2097 | export const fill_error_400 = css`${__root}; fill: #dd342f;`;; 2098 | export const fill_error_500 = css`${__root}; fill: #d91e18;`;; 2099 | export const fill_error_600 = css`${__root}; fill: #c31b16;`;; 2100 | export const fill_error_700 = css`${__root}; fill: #ae1813;`;; 2101 | export const fill_error_800 = css`${__root}; fill: #981511;`;; 2102 | export const fill_error_900 = css`${__root}; fill: #82120e;`;; 2103 | export const fill_warning = css`${__root}; fill: #ff4500;`;; 2104 | export const fill_warning_100 = css`${__root}; fill: #ff8f66;`;; 2105 | export const fill_warning_200 = css`${__root}; fill: #ff7d4d;`;; 2106 | export const fill_warning_300 = css`${__root}; fill: #ff6a33;`;; 2107 | export const fill_warning_400 = css`${__root}; fill: #ff5819;`;; 2108 | export const fill_warning_500 = css`${__root}; fill: #ff4500;`;; 2109 | export const fill_warning_600 = css`${__root}; fill: #e63e00;`;; 2110 | export const fill_warning_700 = css`${__root}; fill: #cc3700;`;; 2111 | export const fill_warning_800 = css`${__root}; fill: #b33000;`;; 2112 | export const fill_warning_900 = css`${__root}; fill: #992900;`;; 2113 | export const fill_success = css`${__root}; fill: #0a0;`;; 2114 | export const fill_success_100 = css`${__root}; fill: #6c6;`;; 2115 | export const fill_success_200 = css`${__root}; fill: #4dc44d;`;; 2116 | export const fill_success_300 = css`${__root}; fill: #3b3;`;; 2117 | export const fill_success_400 = css`${__root}; fill: #19b319;`;; 2118 | export const fill_success_500 = css`${__root}; fill: #0a0;`;; 2119 | export const fill_success_600 = css`${__root}; fill: #090;`;; 2120 | export const fill_success_700 = css`${__root}; fill: #080;`;; 2121 | export const fill_success_800 = css`${__root}; fill: #070;`;; 2122 | export const fill_success_900 = css`${__root}; fill: #060;`;; 2123 | export const fill_info = css`${__root}; fill: #1e90ff;`;; 2124 | export const fill_info_100 = css`${__root}; fill: #78bcff;`;; 2125 | export const fill_info_200 = css`${__root}; fill: #62b1ff;`;; 2126 | export const fill_info_300 = css`${__root}; fill: #4ba6ff;`;; 2127 | export const fill_info_400 = css`${__root}; fill: #349bff;`;; 2128 | export const fill_info_500 = css`${__root}; fill: #1e90ff;`;; 2129 | export const fill_info_600 = css`${__root}; fill: #1b82e6;`;; 2130 | export const fill_info_700 = css`${__root}; fill: #1873cc;`;; 2131 | export const fill_info_800 = css`${__root}; fill: #1565b3;`;; 2132 | export const fill_info_900 = css`${__root}; fill: #125699;`;; 2133 | export const flex = css`${__root}; display: -webkit-box; 2134 | display: -ms-flexbox; 2135 | display: flex;`;; 2136 | export const flex_inline = css`${__root}; display: flex-inline;`;; 2137 | export const flex_wrap = css`${__root}; -ms-flex-wrap: wrap; 2138 | flex-wrap: wrap;`;; 2139 | export const flex_nowrap = css`${__root}; -ms-flex-wrap: nowrap; 2140 | flex-wrap: nowrap;`;; 2141 | export const flex_row = css`${__root}; -webkit-box-orient: horizontal; 2142 | -ms-flex-direction: row; 2143 | flex-direction: row; 2144 | -webkit-box-direction: normal;`;; 2145 | export const flex_column = css`${__root}; -webkit-box-direction: normal; 2146 | -webkit-box-orient: vertical; 2147 | -ms-flex-direction: column; 2148 | flex-direction: column;`;; 2149 | export const flex_1 = css`${__root}; -webkit-box-flex: 1; 2150 | -ms-flex: 1 1 0px; 2151 | flex: 1 1 0;`;; 2152 | export const flex_1_1_auto = css`${__root}; -webkit-box-flex: 1; 2153 | -ms-flex: 1 1 auto; 2154 | flex: 1 1 auto;`;; 2155 | export const flex_1_0_auto = css`${__root}; -webkit-box-flex: 1; 2156 | -ms-flex: 1 0 auto; 2157 | flex: 1 0 auto;`;; 2158 | export const flex_0_1_auto = css`${__root}; -webkit-box-flex: 0; 2159 | -ms-flex: 0 1 auto; 2160 | flex: 0 1 auto;`;; 2161 | export const flex_0_0_auto = css`${__root}; -webkit-box-flex: 0; 2162 | -ms-flex: 0 0 auto; 2163 | flex: 0 0 auto;`;; 2164 | export const justify_content_flex_start = css`${__root}; -webkit-box-pack: start; 2165 | -ms-flex-pack: start; 2166 | justify-content: flex-start;`;; 2167 | export const justify_content_flex_end = css`${__root}; -webkit-box-pack: end; 2168 | -ms-flex-pack: end; 2169 | justify-content: flex-end;`;; 2170 | export const justify_content_center = css`${__root}; -webkit-box-pack: center; 2171 | -ms-flex-pack: center; 2172 | justify-content: center;`;; 2173 | export const justify_content_space_between = css`${__root}; -webkit-box-pack: justify; 2174 | -ms-flex-pack: justify; 2175 | justify-content: space-between;`;; 2176 | export const justify_content_space_around = css`${__root}; -ms-flex-pack: distribute; 2177 | justify-content: space-around;`;; 2178 | export const align_content_flex_start = css`${__root}; -ms-flex-line-pack: start; 2179 | align-content: flex-start;`;; 2180 | export const align_content_flex_end = css`${__root}; -ms-flex-line-pack: end; 2181 | align-content: flex-end;`;; 2182 | export const align_content_center = css`${__root}; -ms-flex-line-pack: center; 2183 | align-content: center;`;; 2184 | export const align_content_space_between = css`${__root}; -ms-flex-line-pack: justify; 2185 | align-content: space-between;`;; 2186 | export const align_content_space_around = css`${__root}; -ms-flex-line-pack: distribute; 2187 | align-content: space-around;`;; 2188 | export const align_content_stretch = css`${__root}; -ms-flex-line-pack: stretch; 2189 | align-content: stretch;`;; 2190 | export const align_items_flex_start = css`${__root}; -webkit-box-align: start; 2191 | -ms-flex-align: start; 2192 | align-items: flex-start;`;; 2193 | export const align_items_flex_end = css`${__root}; -webkit-box-align: end; 2194 | -ms-flex-align: end; 2195 | align-items: flex-end;`;; 2196 | export const align_items_center = css`${__root}; -webkit-box-align: center; 2197 | -ms-flex-align: center; 2198 | align-items: center;`;; 2199 | export const align_items_baseline = css`${__root}; -webkit-box-align: baseline; 2200 | -ms-flex-align: baseline; 2201 | align-items: baseline;`;; 2202 | export const align_items_stretch = css`${__root}; -webkit-box-align: stretch; 2203 | -ms-flex-align: stretch; 2204 | align-items: stretch;`;; 2205 | export const align_self_flex_start = css`${__root}; -ms-flex-item-align: start; 2206 | align-self: flex-start;`;; 2207 | export const align_self_flex_end = css`${__root}; -ms-flex-item-align: end; 2208 | align-self: flex-end;`;; 2209 | export const align_self_center = css`${__root}; -ms-flex-item-align: center; 2210 | -ms-grid-row-align: center; 2211 | align-self: center;`;; 2212 | export const align_self_baseline = css`${__root}; -ms-flex-item-align: baseline; 2213 | align-self: baseline;`;; 2214 | export const align_self_stretch = css`${__root}; -ms-flex-item-align: stretch; 2215 | -ms-grid-row-align: stretch; 2216 | align-self: stretch;`;; 2217 | export const right = css`${__root}; float: right;`;; 2218 | export const right_xs = css`${__root}; @media (max-width: 767px) { 2219 | float: right; 2220 | }`;; 2221 | export const right_s = css`${__root}; @media (min-width: 768px) and (max-width: 1023px) { 2222 | float: right; 2223 | }`;; 2224 | export const right_s_up = css`${__root}; @media (min-width: 768px) { 2225 | float: right; 2226 | }`;; 2227 | export const right_s_down = css`${__root}; @media (max-width: 1023px) { 2228 | float: right; 2229 | }`;; 2230 | export const right_m = css`${__root}; @media (min-width: 1024px) and (max-width: 1279px) { 2231 | float: right; 2232 | }`;; 2233 | export const right_m_up = css`${__root}; @media (min-width: 1024px) { 2234 | float: right; 2235 | }`;; 2236 | export const right_m_down = css`${__root}; @media (max-width: 1279px) { 2237 | float: right; 2238 | }`;; 2239 | export const right_l = css`${__root}; @media (min-width: 1280px) and (max-width: 1679px) { 2240 | float: right; 2241 | }`;; 2242 | export const right_l_up = css`${__root}; @media (min-width: 1280px) { 2243 | float: right; 2244 | }`;; 2245 | export const right_l_down = css`${__root}; @media (max-width: 1679px) { 2246 | float: right; 2247 | }`;; 2248 | export const right_xl = css`${__root}; @media (min-width: 1680px) { 2249 | float: right; 2250 | }`;; 2251 | export const left = css`${__root}; float: left;`;; 2252 | export const left_xs = css`${__root}; @media (max-width: 767px) { 2253 | float: left; 2254 | }`;; 2255 | export const left_s = css`${__root}; @media (min-width: 768px) and (max-width: 1023px) { 2256 | float: left; 2257 | }`;; 2258 | export const left_s_up = css`${__root}; @media (min-width: 768px) { 2259 | float: left; 2260 | }`;; 2261 | export const left_s_down = css`${__root}; @media (max-width: 1023px) { 2262 | float: left; 2263 | }`;; 2264 | export const left_m = css`${__root}; @media (min-width: 1024px) and (max-width: 1279px) { 2265 | float: left; 2266 | }`;; 2267 | export const left_m_up = css`${__root}; @media (min-width: 1024px) { 2268 | float: left; 2269 | }`;; 2270 | export const left_m_down = css`${__root}; @media (max-width: 1279px) { 2271 | float: left; 2272 | }`;; 2273 | export const left_l = css`${__root}; @media (min-width: 1280px) and (max-width: 1679px) { 2274 | float: left; 2275 | }`;; 2276 | export const left_l_up = css`${__root}; @media (min-width: 1280px) { 2277 | float: left; 2278 | }`;; 2279 | export const left_l_down = css`${__root}; @media (max-width: 1679px) { 2280 | float: left; 2281 | }`;; 2282 | export const left_xl = css`${__root}; @media (min-width: 1680px) { 2283 | float: left; 2284 | }`;; 2285 | export const font_family_system = css`${__root}; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;`;; 2286 | export const font_family_sans_serif = css`${__root}; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;`;; 2287 | export const font_family_serif = css`${__root}; font-family: Georgia, Times New Roman, Times, serif;`;; 2288 | export const font_family_monospace = css`${__root}; font-family: Monaco, Menlo, Consolas, Courier New, monospace;`;; 2289 | export const font_weight_thin = css`${__root}; font-weight: 200;`;; 2290 | export const font_weight_light = css`${__root}; font-weight: 300;`;; 2291 | export const font_weight_regular = css`${__root}; font-weight: 400;`;; 2292 | export const font_weight_medium = css`${__root}; font-weight: 500;`;; 2293 | export const font_weight_semibold = css`${__root}; font-weight: 600;`;; 2294 | export const font_weight_bold = css`${__root}; font-weight: 700;`;; 2295 | export const font_weight_black = css`${__root}; font-weight: 800;`;; 2296 | export const font_size_xl = css`${__root}; font-size: 1.25rem;`;; 2297 | export const font_size_l = css`${__root}; font-size: 1.125rem;`;; 2298 | export const font_size_m = css`${__root}; font-size: 1rem;`;; 2299 | export const font_size_s = css`${__root}; font-size: .875rem;`;; 2300 | export const font_size_xs = css`${__root}; font-size: .75rem;`;; 2301 | export const line_height_xl = css`${__root}; line-height: 1.8;`;; 2302 | export const line_height_l = css`${__root}; line-height: 1.65;`;; 2303 | export const line_height_m = css`${__root}; line-height: 1.5;`;; 2304 | export const line_height_s = css`${__root}; line-height: 1.35;`;; 2305 | export const line_height_xs = css`${__root}; line-height: 1.2;`;; 2306 | export const letter_spacing_xl = css`${__root}; letter-spacing: .15em;`;; 2307 | export const letter_spacing_l = css`${__root}; letter-spacing: .1em;`;; 2308 | export const letter_spacing_m = css`${__root}; letter-spacing: .05em;`;; 2309 | export const letter_spacing_s = css`${__root}; letter-spacing: .025em;`;; 2310 | export const letter_spacing_xs = css`${__root}; letter-spacing: .01em;`;; 2311 | export const no_gutter = css`${__root}; padding: 0;`;; 2312 | export const gutter = css`${__root}; padding: calc(1rem + .5vw);`;; 2313 | export const gutter_vertical = css`${__root}; padding-bottom: calc(1rem + .5vw); 2314 | padding-top: calc(1rem + .5vw);`;; 2315 | export const gutter_top = css`${__root}; padding-top: calc(1rem + .5vw);`;; 2316 | export const gutter_bottom = css`${__root}; padding-bottom: calc(1rem + .5vw);`;; 2317 | export const gutter_horizontal = css`${__root}; padding-right: calc(1rem + .5vw); 2318 | padding-left: calc(1rem + .5vw);`;; 2319 | export const gutter_left = css`${__root}; padding-left: calc(1rem + .5vw);`;; 2320 | export const gutter_right = css`${__root}; padding-right: calc(1rem + .5vw);`;; 2321 | export const no_margin = css`${__root}; margin: 0;`;; 2322 | export const no_margin_horizontal = css`${__root}; margin-left: 0; 2323 | margin-right: 0;`;; 2324 | export const no_margin_vertical = css`${__root}; margin-bottom: 0; 2325 | margin-top: 0;`;; 2326 | export const no_margin_top = css`${__root}; margin-top: 0;`;; 2327 | export const no_margin_right = css`${__root}; margin-right: 0;`;; 2328 | export const no_margin_bottom = css`${__root}; margin-bottom: 0;`;; 2329 | export const no_margin_left = css`${__root}; margin-left: 0;`;; 2330 | export const margin_auto = css`${__root}; margin: auto;`;; 2331 | export const margin_horizontal_auto = css`${__root}; margin-left: auto; 2332 | margin-right: auto;`;; 2333 | export const margin_vertical_auto = css`${__root}; margin-top: auto; 2334 | margin-bottom: auto;`;; 2335 | export const margin_top_auto = css`${__root}; margin-top: auto;`;; 2336 | export const margin_right_auto = css`${__root}; margin-right: auto;`;; 2337 | export const margin_bottom_auto = css`${__root}; margin-bottom: auto;`;; 2338 | export const margin_left_auto = css`${__root}; margin-left: auto;`;; 2339 | export const margin_xl = css`${__root}; margin: calc(5rem + 1.5vw);`;; 2340 | export const margin_horizontal_xl = css`${__root}; margin-left: calc(5rem + 1.5vw); 2341 | margin-right: calc(5rem + 1.5vw);`;; 2342 | export const margin_vertical_xl = css`${__root}; margin-bottom: calc(5rem + 1.5vw); 2343 | margin-top: calc(5rem + 1.5vw);`;; 2344 | export const margin_top_xl = css`${__root}; margin-top: calc(5rem + 1.5vw);`;; 2345 | export const margin_bottom_xl = css`${__root}; margin-bottom: calc(5rem + 1.5vw);`;; 2346 | export const margin_left_xl = css`${__root}; margin-left: calc(5rem + 1.5vw);`;; 2347 | export const margin_right_xl = css`${__root}; margin-right: calc(5rem + 1.5vw);`;; 2348 | export const margin_l = css`${__root}; margin: calc(4rem + 1.25vw);`;; 2349 | export const margin_horizontal_l = css`${__root}; margin-left: calc(4rem + 1.25vw); 2350 | margin-right: calc(4rem + 1.25vw);`;; 2351 | export const margin_vertical_l = css`${__root}; margin-bottom: calc(4rem + 1.25vw); 2352 | margin-top: calc(4rem + 1.25vw);`;; 2353 | export const margin_top_l = css`${__root}; margin-top: calc(4rem + 1.25vw);`;; 2354 | export const margin_bottom_l = css`${__root}; margin-bottom: calc(4rem + 1.25vw);`;; 2355 | export const margin_left_l = css`${__root}; margin-left: calc(4rem + 1.25vw);`;; 2356 | export const margin_right_l = css`${__root}; margin-right: calc(4rem + 1.25vw);`;; 2357 | export const margin_m = css`${__root}; margin: calc(3rem + 1vw);`;; 2358 | export const margin_horizontal_m = css`${__root}; margin-left: calc(3rem + 1vw); 2359 | margin-right: calc(3rem + 1vw);`;; 2360 | export const margin_vertical_m = css`${__root}; margin-bottom: calc(3rem + 1vw); 2361 | margin-top: calc(3rem + 1vw);`;; 2362 | export const margin_top_m = css`${__root}; margin-top: calc(3rem + 1vw);`;; 2363 | export const margin_bottom_m = css`${__root}; margin-bottom: calc(3rem + 1vw);`;; 2364 | export const margin_left_m = css`${__root}; margin-left: calc(3rem + 1vw);`;; 2365 | export const margin_right_m = css`${__root}; margin-right: calc(3rem + 1vw);`;; 2366 | export const margin_s = css`${__root}; margin: calc(2rem + .75vw);`;; 2367 | export const margin_horizontal_s = css`${__root}; margin-left: calc(2rem + .75vw); 2368 | margin-right: calc(2rem + .75vw);`;; 2369 | export const margin_vertical_s = css`${__root}; margin-bottom: calc(2rem + .75vw); 2370 | margin-top: calc(2rem + .75vw);`;; 2371 | export const margin_top_s = css`${__root}; margin-top: calc(2rem + .75vw);`;; 2372 | export const margin_bottom_s = css`${__root}; margin-bottom: calc(2rem + .75vw);`;; 2373 | export const margin_left_s = css`${__root}; margin-left: calc(2rem + .75vw);`;; 2374 | export const margin_right_s = css`${__root}; margin-right: calc(2rem + .75vw);`;; 2375 | export const margin_xs = css`${__root}; margin: calc(1rem + .5vw);`;; 2376 | export const margin_horizontal_xs = css`${__root}; margin-left: calc(1rem + .5vw); 2377 | margin-right: calc(1rem + .5vw);`;; 2378 | export const margin_vertical_xs = css`${__root}; margin-bottom: calc(1rem + .5vw); 2379 | margin-top: calc(1rem + .5vw);`;; 2380 | export const margin_top_xs = css`${__root}; margin-top: calc(1rem + .5vw);`;; 2381 | export const margin_bottom_xs = css`${__root}; margin-bottom: calc(1rem + .5vw);`;; 2382 | export const margin_left_xs = css`${__root}; margin-left: calc(1rem + .5vw);`;; 2383 | export const margin_right_xs = css`${__root}; margin-right: calc(1rem + .5vw);`;; 2384 | export const max_width_xl = css`${__root}; max-width: 80rem;`;; 2385 | export const max_width_l = css`${__root}; max-width: 70rem;`;; 2386 | export const max_width_m = css`${__root}; max-width: 60rem;`;; 2387 | export const max_width_s = css`${__root}; max-width: 50rem;`;; 2388 | export const max_width_xs = css`${__root}; max-width: 40rem;`;; 2389 | export const no_padding = css`${__root}; padding: 0;`;; 2390 | export const no_padding_horizontal = css`${__root}; padding-left: 0; 2391 | padding-right: 0;`;; 2392 | export const no_padding_vertical = css`${__root}; padding-bottom: 0; 2393 | padding-top: 0;`;; 2394 | export const no_padding_top = css`${__root}; padding-top: 0;`;; 2395 | export const no_padding_right = css`${__root}; padding-right: 0;`;; 2396 | export const no_padding_bottom = css`${__root}; padding-bottom: 0;`;; 2397 | export const no_padding_left = css`${__root}; padding-left: 0;`;; 2398 | export const padding_xl = css`${__root}; padding: calc(5rem + 1.5vw);`;; 2399 | export const padding_horizontal_xl = css`${__root}; padding-left: calc(5rem + 1.5vw); 2400 | padding-right: calc(5rem + 1.5vw);`;; 2401 | export const padding_vertical_xl = css`${__root}; padding-bottom: calc(5rem + 1.5vw); 2402 | padding-top: calc(5rem + 1.5vw);`;; 2403 | export const padding_top_xl = css`${__root}; padding-top: calc(5rem + 1.5vw);`;; 2404 | export const padding_bottom_xl = css`${__root}; padding-bottom: calc(5rem + 1.5vw);`;; 2405 | export const padding_left_xl = css`${__root}; padding-left: calc(5rem + 1.5vw);`;; 2406 | export const padding_right_xl = css`${__root}; padding-right: calc(5rem + 1.5vw);`;; 2407 | export const padding_l = css`${__root}; padding: calc(4rem + 1.25vw);`;; 2408 | export const padding_horizontal_l = css`${__root}; padding-left: calc(4rem + 1.25vw); 2409 | padding-right: calc(4rem + 1.25vw);`;; 2410 | export const padding_vertical_l = css`${__root}; padding-bottom: calc(4rem + 1.25vw); 2411 | padding-top: calc(4rem + 1.25vw);`;; 2412 | export const padding_top_l = css`${__root}; padding-top: calc(4rem + 1.25vw);`;; 2413 | export const padding_bottom_l = css`${__root}; padding-bottom: calc(4rem + 1.25vw);`;; 2414 | export const padding_left_l = css`${__root}; padding-left: calc(4rem + 1.25vw);`;; 2415 | export const padding_right_l = css`${__root}; padding-right: calc(4rem + 1.25vw);`;; 2416 | export const padding_m = css`${__root}; padding: calc(3rem + 1vw);`;; 2417 | export const padding_horizontal_m = css`${__root}; padding-left: calc(3rem + 1vw); 2418 | padding-right: calc(3rem + 1vw);`;; 2419 | export const padding_vertical_m = css`${__root}; padding-bottom: calc(3rem + 1vw); 2420 | padding-top: calc(3rem + 1vw);`;; 2421 | export const padding_top_m = css`${__root}; padding-top: calc(3rem + 1vw);`;; 2422 | export const padding_bottom_m = css`${__root}; padding-bottom: calc(3rem + 1vw);`;; 2423 | export const padding_left_m = css`${__root}; padding-left: calc(3rem + 1vw);`;; 2424 | export const padding_right_m = css`${__root}; padding-right: calc(3rem + 1vw);`;; 2425 | export const padding_s = css`${__root}; padding: calc(2rem + .75vw);`;; 2426 | export const padding_horizontal_s = css`${__root}; padding-left: calc(2rem + .75vw); 2427 | padding-right: calc(2rem + .75vw);`;; 2428 | export const padding_vertical_s = css`${__root}; padding-bottom: calc(2rem + .75vw); 2429 | padding-top: calc(2rem + .75vw);`;; 2430 | export const padding_top_s = css`${__root}; padding-top: calc(2rem + .75vw);`;; 2431 | export const padding_bottom_s = css`${__root}; padding-bottom: calc(2rem + .75vw);`;; 2432 | export const padding_left_s = css`${__root}; padding-left: calc(2rem + .75vw);`;; 2433 | export const padding_right_s = css`${__root}; padding-right: calc(2rem + .75vw);`;; 2434 | export const padding_xs = css`${__root}; padding: calc(1rem + .5vw);`;; 2435 | export const padding_horizontal_xs = css`${__root}; padding-left: calc(1rem + .5vw); 2436 | padding-right: calc(1rem + .5vw);`;; 2437 | export const padding_vertical_xs = css`${__root}; padding-bottom: calc(1rem + .5vw); 2438 | padding-top: calc(1rem + .5vw);`;; 2439 | export const padding_top_xs = css`${__root}; padding-top: calc(1rem + .5vw);`;; 2440 | export const padding_bottom_xs = css`${__root}; padding-bottom: calc(1rem + .5vw);`;; 2441 | export const padding_left_xs = css`${__root}; padding-left: calc(1rem + .5vw);`;; 2442 | export const padding_right_xs = css`${__root}; padding-right: calc(1rem + .5vw);`;; 2443 | export const text_left = css`${__root}; text-align: left;`;; 2444 | export const text_right = css`${__root}; text-align: right;`;; 2445 | export const text_justify = css`${__root}; text-align: justify;`;; 2446 | export const text_center = css`${__root}; text-align: center;`;; 2447 | export const truncate = css`${__root}; display: block; 2448 | white-space: nowrap; 2449 | overflow: hidden; 2450 | text-overflow: ellipsis;`;; 2451 | export const uppercase = css`${__root}; text-transform: uppercase;`;; 2452 | export const lowercase = css`${__root}; text-transform: lowercase;`;; 2453 | export const capitalize = css`${__root}; text-transform: capitalize;`;; 2454 | export const stroke_white = css`${__root}; stroke: #fff;`;; 2455 | export const stroke_black = css`${__root}; stroke: #000;`;; 2456 | export const stroke_light = css`${__root}; stroke: #d3d3d9;`;; 2457 | export const stroke_light_100 = css`${__root}; stroke: #f6f6f7;`;; 2458 | export const stroke_light_200 = css`${__root}; stroke: #ededf0;`;; 2459 | export const stroke_light_300 = css`${__root}; stroke: #e5e5e8;`;; 2460 | export const stroke_light_400 = css`${__root}; stroke: #dcdce1;`;; 2461 | export const stroke_light_500 = css`${__root}; stroke: #d3d3d9;`;; 2462 | export const stroke_light_600 = css`${__root}; stroke: #c8c8ce;`;; 2463 | export const stroke_light_700 = css`${__root}; stroke: #bebec3;`;; 2464 | export const stroke_light_800 = css`${__root}; stroke: #b3b3b8;`;; 2465 | export const stroke_light_900 = css`${__root}; stroke: #a9a9ae;`;; 2466 | export const stroke_grey = css`${__root}; stroke: #616166;`;; 2467 | export const stroke_grey_100 = css`${__root}; stroke: #909094;`;; 2468 | export const stroke_grey_200 = css`${__root}; stroke: #848488;`;; 2469 | export const stroke_grey_300 = css`${__root}; stroke: #79797d;`;; 2470 | export const stroke_grey_400 = css`${__root}; stroke: #6c6c71;`;; 2471 | export const stroke_grey_500 = css`${__root}; stroke: #616166;`;; 2472 | export const stroke_grey_600 = css`${__root}; stroke: #5a5a5f;`;; 2473 | export const stroke_grey_700 = css`${__root}; stroke: #525257;`;; 2474 | export const stroke_grey_800 = css`${__root}; stroke: #4c4c50;`;; 2475 | export const stroke_grey_900 = css`${__root}; stroke: #444447;`;; 2476 | export const stroke_dark = css`${__root}; stroke: #323236;`;; 2477 | export const stroke_dark_100 = css`${__root}; stroke: #5b5b5e;`;; 2478 | export const stroke_dark_200 = css`${__root}; stroke: #515154;`;; 2479 | export const stroke_dark_300 = css`${__root}; stroke: #47474a;`;; 2480 | export const stroke_dark_400 = css`${__root}; stroke: #3c3c40;`;; 2481 | export const stroke_dark_500 = css`${__root}; stroke: #323236;`;; 2482 | export const stroke_dark_600 = css`${__root}; stroke: #2f2f32;`;; 2483 | export const stroke_dark_700 = css`${__root}; stroke: #2b2b2e;`;; 2484 | export const stroke_dark_800 = css`${__root}; stroke: #27272a;`;; 2485 | export const stroke_dark_900 = css`${__root}; stroke: #232326;`;; 2486 | export const stroke_primary = css`${__root}; stroke: #3455db;`;; 2487 | export const stroke_primary_100 = css`${__root}; stroke: #8599e9;`;; 2488 | export const stroke_primary_200 = css`${__root}; stroke: #7188e6;`;; 2489 | export const stroke_primary_300 = css`${__root}; stroke: #5d77e2;`;; 2490 | export const stroke_primary_400 = css`${__root}; stroke: #4866df;`;; 2491 | export const stroke_primary_500 = css`${__root}; stroke: #3455db;`;; 2492 | export const stroke_primary_600 = css`${__root}; stroke: #2f4dc5;`;; 2493 | export const stroke_primary_700 = css`${__root}; stroke: #2a44af;`;; 2494 | export const stroke_primary_800 = css`${__root}; stroke: #243b99;`;; 2495 | export const stroke_primary_900 = css`${__root}; stroke: #1f3383;`;; 2496 | export const stroke_secondary = css`${__root}; stroke: #639;`;; 2497 | export const stroke_secondary_100 = css`${__root}; stroke: #a385c2;`;; 2498 | export const stroke_secondary_200 = css`${__root}; stroke: #9470b8;`;; 2499 | export const stroke_secondary_300 = css`${__root}; stroke: #855cad;`;; 2500 | export const stroke_secondary_400 = css`${__root}; stroke: #7547a3;`;; 2501 | export const stroke_secondary_500 = css`${__root}; stroke: #639;`;; 2502 | export const stroke_secondary_600 = css`${__root}; stroke: #5c2e8a;`;; 2503 | export const stroke_secondary_700 = css`${__root}; stroke: #52297a;`;; 2504 | export const stroke_secondary_800 = css`${__root}; stroke: #47246b;`;; 2505 | export const stroke_secondary_900 = css`${__root}; stroke: #3d1f5c;`;; 2506 | export const stroke_tertiary = css`${__root}; stroke: #8b008b;`;; 2507 | export const stroke_tertiary_100 = css`${__root}; stroke: #b966b9;`;; 2508 | export const stroke_tertiary_200 = css`${__root}; stroke: #ae4dae;`;; 2509 | export const stroke_tertiary_300 = css`${__root}; stroke: #a233a2;`;; 2510 | export const stroke_tertiary_400 = css`${__root}; stroke: #971997;`;; 2511 | export const stroke_tertiary_500 = css`${__root}; stroke: #8b008b;`;; 2512 | export const stroke_tertiary_600 = css`${__root}; stroke: #7d007d;`;; 2513 | export const stroke_tertiary_700 = css`${__root}; stroke: #6f006f;`;; 2514 | export const stroke_tertiary_800 = css`${__root}; stroke: #610061;`;; 2515 | export const stroke_tertiary_900 = css`${__root}; stroke: #530053;`;; 2516 | export const stroke_error = css`${__root}; stroke: #d91e18;`;; 2517 | export const stroke_error_100 = css`${__root}; stroke: #e87874;`;; 2518 | export const stroke_error_200 = css`${__root}; stroke: #e4625d;`;; 2519 | export const stroke_error_300 = css`${__root}; stroke: #e14b46;`;; 2520 | export const stroke_error_400 = css`${__root}; stroke: #dd342f;`;; 2521 | export const stroke_error_500 = css`${__root}; stroke: #d91e18;`;; 2522 | export const stroke_error_600 = css`${__root}; stroke: #c31b16;`;; 2523 | export const stroke_error_700 = css`${__root}; stroke: #ae1813;`;; 2524 | export const stroke_error_800 = css`${__root}; stroke: #981511;`;; 2525 | export const stroke_error_900 = css`${__root}; stroke: #82120e;`;; 2526 | export const stroke_warning = css`${__root}; stroke: #ff4500;`;; 2527 | export const stroke_warning_100 = css`${__root}; stroke: #ff8f66;`;; 2528 | export const stroke_warning_200 = css`${__root}; stroke: #ff7d4d;`;; 2529 | export const stroke_warning_300 = css`${__root}; stroke: #ff6a33;`;; 2530 | export const stroke_warning_400 = css`${__root}; stroke: #ff5819;`;; 2531 | export const stroke_warning_500 = css`${__root}; stroke: #ff4500;`;; 2532 | export const stroke_warning_600 = css`${__root}; stroke: #e63e00;`;; 2533 | export const stroke_warning_700 = css`${__root}; stroke: #cc3700;`;; 2534 | export const stroke_warning_800 = css`${__root}; stroke: #b33000;`;; 2535 | export const stroke_warning_900 = css`${__root}; stroke: #992900;`;; 2536 | export const stroke_success = css`${__root}; stroke: #0a0;`;; 2537 | export const stroke_success_100 = css`${__root}; stroke: #6c6;`;; 2538 | export const stroke_success_200 = css`${__root}; stroke: #4dc44d;`;; 2539 | export const stroke_success_300 = css`${__root}; stroke: #3b3;`;; 2540 | export const stroke_success_400 = css`${__root}; stroke: #19b319;`;; 2541 | export const stroke_success_500 = css`${__root}; stroke: #0a0;`;; 2542 | export const stroke_success_600 = css`${__root}; stroke: #090;`;; 2543 | export const stroke_success_700 = css`${__root}; stroke: #080;`;; 2544 | export const stroke_success_800 = css`${__root}; stroke: #070;`;; 2545 | export const stroke_success_900 = css`${__root}; stroke: #060;`;; 2546 | export const stroke_info = css`${__root}; stroke: #1e90ff;`;; 2547 | export const stroke_info_100 = css`${__root}; stroke: #78bcff;`;; 2548 | export const stroke_info_200 = css`${__root}; stroke: #62b1ff;`;; 2549 | export const stroke_info_300 = css`${__root}; stroke: #4ba6ff;`;; 2550 | export const stroke_info_400 = css`${__root}; stroke: #349bff;`;; 2551 | export const stroke_info_500 = css`${__root}; stroke: #1e90ff;`;; 2552 | export const stroke_info_600 = css`${__root}; stroke: #1b82e6;`;; 2553 | export const stroke_info_700 = css`${__root}; stroke: #1873cc;`;; 2554 | export const stroke_info_800 = css`${__root}; stroke: #1565b3;`;; 2555 | export const stroke_info_900 = css`${__root}; stroke: #125699;`;; 2556 | export const clearfix = css`${__root}; zoom: 1; 2557 | &:after {content: ""; 2558 | display: table;} 2559 | &:before {content: ""; 2560 | display: table;} 2561 | &:after {clear: both;}`;; 2562 | export const cover = css`${__root}; top: 0; 2563 | right: 0; 2564 | bottom: 0; 2565 | left: 0; 2566 | width: 100%; 2567 | height: 100%; 2568 | position: absolute;`;; 2569 | export const center = css`${__root}; position: absolute; 2570 | top: 50%; 2571 | left: 50%; 2572 | -webkit-transform: translate(-50%, -50%); 2573 | transform: translate(-50%, -50%);`;; 2574 | export const circle = css`${__root}; border-radius: 50%;`;; 2575 | export const full_height = css`${__root}; height: 100%;`;; 2576 | export const fixed = css`${__root}; position: fixed;`;; 2577 | export const relative = css`${__root}; position: relative;`;; 2578 | export const absolute = css`${__root}; position: absolute;`;; 2579 | export const pointer = css`${__root}; cursor: pointer;`;; 2580 | export const no_border = css`${__root}; border: none;`;; 2581 | export const hide = css`${__root}; display: none;`;; 2582 | export const show = css`${__root}; display: block;`;; 2583 | export const visible = css`${__root}; visibility: visible;`;; 2584 | export const hidden = css`${__root}; visibility: hidden;`;; 2585 | export const visible_print = css`${__root}; display: none; 2586 | @media print { 2587 | display: block; 2588 | }`;; 2589 | export const hidden_print = css`${__root}; @media print { 2590 | display: none; 2591 | }`;; 2592 | export const visible_screen = css`${__root}; display: none; 2593 | @media screen { 2594 | display: block; 2595 | }`;; 2596 | export const hidden_screen = css`${__root}; @media screen { 2597 | display: none; 2598 | }`;; 2599 | export const hide_visually = css`${__root}; position: absolute; 2600 | padding: 0; 2601 | width: 1px; 2602 | height: 1px; 2603 | margin: -1px; 2604 | border: 0; 2605 | overflow: hidden; 2606 | clip: rect(0 0 0 0);`;; 2607 | export const text_hide = css`${__root}; font: ~ "0/0" a; 2608 | color: transparent; 2609 | text-shadow: none; 2610 | background-color: transparent; 2611 | border: 0;`;; 2612 | export const hidden_xs = css`${__root}; @media (max-width: 767px) { 2613 | display: none; 2614 | }`;; 2615 | export const hidden_s = css`${__root}; @media (min-width: 768px) and (max-width: 1023px) { 2616 | display: none; 2617 | }`;; 2618 | export const hidden_s_up = css`${__root}; @media (min-width: 768px) { 2619 | display: none; 2620 | }`;; 2621 | export const hidden_s_down = css`${__root}; @media (max-width: 1023px) { 2622 | display: none; 2623 | }`;; 2624 | export const hidden_m = css`${__root}; @media (min-width: 1024px) and (max-width: 1279px) { 2625 | display: none; 2626 | }`;; 2627 | export const hidden_m_up = css`${__root}; @media (min-width: 1024px) { 2628 | display: none; 2629 | }`;; 2630 | export const hidden_m_down = css`${__root}; @media (max-width: 1279px) { 2631 | display: none; 2632 | }`;; 2633 | export const hidden_l = css`${__root}; @media (min-width: 1280px) and (max-width: 1679px) { 2634 | display: none; 2635 | }`;; 2636 | export const hidden_l_up = css`${__root}; @media (min-width: 1280px) { 2637 | display: none; 2638 | }`;; 2639 | export const hidden_l_down = css`${__root}; @media (max-width: 1679px) { 2640 | display: none; 2641 | }`;; 2642 | export const hidden_xl = css`${__root}; @media (min-width: 1680px) { 2643 | display: none; 2644 | }`;; 2645 | export const visible_xs = css`${__root}; display: none; 2646 | @media (max-width: 767px) { 2647 | display: block; 2648 | }`;; 2649 | export const visible_s = css`${__root}; display: none; 2650 | @media (min-width: 768px) and (max-width: 1023px) { 2651 | display: block; 2652 | }`;; 2653 | export const visible_s_up = css`${__root}; display: none; 2654 | @media (min-width: 768px) { 2655 | display: block; 2656 | }`;; 2657 | export const visible_s_down = css`${__root}; display: none; 2658 | @media (max-width: 1023px) { 2659 | display: block; 2660 | }`;; 2661 | export const visible_m = css`${__root}; display: none; 2662 | @media (min-width: 1024px) and (max-width: 1279px) { 2663 | display: block; 2664 | }`;; 2665 | export const visible_m_up = css`${__root}; display: none; 2666 | @media (min-width: 1024px) { 2667 | display: block; 2668 | }`;; 2669 | export const visible_m_down = css`${__root}; display: none; 2670 | @media (max-width: 1279px) { 2671 | display: block; 2672 | }`;; 2673 | export const visible_l = css`${__root}; display: none; 2674 | @media (min-width: 1280px) and (max-width: 1679px) { 2675 | display: block; 2676 | }`;; 2677 | export const visible_l_up = css`${__root}; display: none; 2678 | @media (min-width: 1280px) { 2679 | display: block; 2680 | }`;; 2681 | export const visible_l_down = css`${__root}; display: none; 2682 | @media (max-width: 1679px) { 2683 | display: block; 2684 | }`;; 2685 | export const visible_xl = css`${__root}; display: none; 2686 | @media (min-width: 1680px) { 2687 | display: block; 2688 | }`;;; 2689 | -------------------------------------------------------------------------------- /tachyons/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../lib/tachyons/index') -------------------------------------------------------------------------------- /turretcss/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../lib/turretcss/index') -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | basscss-align@^1.0.2: 6 | version "1.0.2" 7 | resolved "https://registry.yarnpkg.com/basscss-align/-/basscss-align-1.0.2.tgz#294aa689d6f99da86e4af4c5c2892870855c1c37" 8 | 9 | basscss-border@^4.0.2: 10 | version "4.0.2" 11 | resolved "https://registry.yarnpkg.com/basscss-border/-/basscss-border-4.0.2.tgz#14b4506329b90cb14abe5f4d3473e9fe9202df2e" 12 | 13 | basscss-flexbox@^1.0.1: 14 | version "1.0.1" 15 | resolved "https://registry.yarnpkg.com/basscss-flexbox/-/basscss-flexbox-1.0.1.tgz#f64bc7607f97a7dfab74c1e011e1a77ad734f83a" 16 | 17 | basscss-grid@^2.0.0: 18 | version "2.0.0" 19 | resolved "https://registry.yarnpkg.com/basscss-grid/-/basscss-grid-2.0.0.tgz#6f4c3198e786a38529f8362bc3b3bce5254c1369" 20 | 21 | basscss-hide@^1.0.1: 22 | version "1.0.1" 23 | resolved "https://registry.yarnpkg.com/basscss-hide/-/basscss-hide-1.0.1.tgz#34bc138bba867c6c49ab8682a610ef495e47d750" 24 | 25 | basscss-layout@^3.1.0: 26 | version "3.1.0" 27 | resolved "https://registry.yarnpkg.com/basscss-layout/-/basscss-layout-3.1.0.tgz#f9f392e480da66657d9fe5de9ca4c07c579c3a4e" 28 | 29 | basscss-margin@^1.0.7: 30 | version "1.0.7" 31 | resolved "https://registry.yarnpkg.com/basscss-margin/-/basscss-margin-1.0.7.tgz#5a92d8cda98ef391c73a15ede97b34b48886417c" 32 | 33 | basscss-padding@^1.1.3: 34 | version "1.1.3" 35 | resolved "https://registry.yarnpkg.com/basscss-padding/-/basscss-padding-1.1.3.tgz#69db799414e6dd58bed83776952cc299e2e6874e" 36 | 37 | basscss-position@^2.0.3: 38 | version "2.0.3" 39 | resolved "https://registry.yarnpkg.com/basscss-position/-/basscss-position-2.0.3.tgz#467180a1f8f386e9072ed8d08294d2a6e0ba4305" 40 | 41 | basscss-type-scale@^1.0.5: 42 | version "1.0.5" 43 | resolved "https://registry.yarnpkg.com/basscss-type-scale/-/basscss-type-scale-1.0.5.tgz#23bf5e41c9d142c8061cf9829ccf23e9b3258ec7" 44 | 45 | basscss-typography@^3.0.3: 46 | version "3.0.3" 47 | resolved "https://registry.yarnpkg.com/basscss-typography/-/basscss-typography-3.0.3.tgz#182cf43df7c4ebed02750dc748041cbadff60d43" 48 | 49 | basscss@^8.0.3: 50 | version "8.0.3" 51 | resolved "https://registry.yarnpkg.com/basscss/-/basscss-8.0.3.tgz#720607254e89d363cd8d46b3aefa01d3c2b91363" 52 | dependencies: 53 | basscss-align "^1.0.2" 54 | basscss-border "^4.0.2" 55 | basscss-flexbox "^1.0.1" 56 | basscss-grid "^2.0.0" 57 | basscss-hide "^1.0.1" 58 | basscss-layout "^3.1.0" 59 | basscss-margin "^1.0.7" 60 | basscss-padding "^1.1.3" 61 | basscss-position "^2.0.3" 62 | basscss-type-scale "^1.0.5" 63 | basscss-typography "^3.0.3" 64 | 65 | beard@^0.3.0: 66 | version "0.3.0" 67 | resolved "https://registry.yarnpkg.com/beard/-/beard-0.3.0.tgz#1c8fc7d17490310e96f2bc7d6d99904936db85f2" 68 | 69 | beardcss@2.2.4: 70 | version "2.2.4" 71 | resolved "https://registry.yarnpkg.com/beardcss/-/beardcss-2.2.4.tgz#4ba2e53fee750baf38224c43a0ea8c37350fb0cf" 72 | 73 | bootstrap@^4.0.0-beta: 74 | version "4.0.0-beta" 75 | resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-beta.tgz#dc5928175d2e71310bc668cf9e05a907211b72a6" 76 | 77 | tachyons@^4.8.1: 78 | version "4.8.1" 79 | resolved "https://registry.yarnpkg.com/tachyons/-/tachyons-4.8.1.tgz#9a3183feecb3240c4dcefee7feecc8259acd7381" 80 | 81 | turretcss@^4.0.4: 82 | version "4.0.4" 83 | resolved "https://registry.yarnpkg.com/turretcss/-/turretcss-4.0.4.tgz#df35ec7bb26b3083f3400652b3670c51ce12579b" 84 | --------------------------------------------------------------------------------