├── .babelrc ├── .eslintrc ├── .gitattributes ├── .github └── workflows │ └── nodejs.yml ├── .gitignore ├── .nvmrc ├── .stylelintrc ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── dist └── css │ ├── baseguide.css │ └── baseguide.min.css ├── gulpfile.js ├── index.html ├── package-lock.json ├── package.json └── scss ├── baseguide.scss └── baseguide ├── 00-settings └── _settings.scss ├── 01-tools ├── _animation.scss ├── _functions.scss ├── _mixins.scss ├── _mq.scss └── grid │ ├── _column.scss │ ├── _container.scss │ ├── _gutter.scss │ └── _row.scss ├── 02-base ├── _base.scss ├── _global.scss ├── _headings.scss ├── _link.scss ├── _normalize.scss ├── _print.scss └── _spacing.scss ├── 03-objects ├── _embed.scss ├── _grid.scss ├── _list.scss └── _media.scss ├── 04-components ├── _button.scss ├── _form-custom.scss ├── _form.scss └── _table.scss └── 05-utilities ├── _clearfix.scss ├── _position.scss ├── _screenreader.scss ├── _space.scss ├── _text.scss └── _visibility.scss /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint:recommended", 3 | "env": { 4 | "browser": true, 5 | "node": true 6 | }, 7 | "globals": { 8 | "$": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | index.html linguist-documentation 2 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | on: 3 | pull_request: 4 | branches: 5 | - develop 6 | 7 | jobs: 8 | linters: 9 | name: stylelint 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - name: Clone repository 14 | uses: actions/checkout@v2 15 | 16 | - name: Set Node.js version 17 | uses: actions/setup-node@v1 18 | 19 | - name: Install npm dependencies 20 | run: npm ci 21 | 22 | - name: Lint 23 | run: gulp lint 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS Files 2 | .DS_Store 3 | Thumbs.db 4 | 5 | # Caches 6 | .sass-cache 7 | 8 | # Package Managers 9 | bower_components 10 | node_modules 11 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16.15.1 -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "ignoreFiles": [ 4 | "**/_mq.scss", 5 | "**/_normalize.scss" 6 | ], 7 | "rules": { 8 | "at-rule-empty-line-before": ["always", { 9 | "except": [ 10 | "blockless-after-same-name-blockless", 11 | "first-nested" 12 | ], 13 | "ignore": ["after-comment"], 14 | "ignoreAtRules": ["else"] 15 | }], 16 | "at-rule-no-unknown": null, 17 | "declaration-block-no-duplicate-properties": [true, { 18 | "ignore": ["consecutive-duplicates-with-different-values"] 19 | }], 20 | "length-zero-no-unit": null, 21 | "max-empty-lines": 2, 22 | "no-descending-specificity": null, 23 | "value-keyword-case": null 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Baseguide 2 | 3 | :tada: First off, thanks for taking the time to contribute! :tada: 4 | 5 | ## How Can I Contribute? 6 | 7 | ### Reporting Bugs 8 | 9 | #### How Do I Submit A (Good) Bug Report? 10 | 11 | Bugs are tracked as [GitHub issues](https://guides.github.com/features/issues/). 12 | 13 | Before creating bug reports, please search the [issues](https://github.com/slavanga/baseguide/issues?utf8=%E2%9C%93&q=is%3Aissue) to see if the problem has already been reported. 14 | 15 | Explain the problem and include additional details to help maintainers reproduce the problem: 16 | 17 | * **Use a clear and descriptive title** for the issue to identify the problem. 18 | * **Describe the exact steps which reproduce the problem** in as many details as possible. When listing steps, **don't just say what you did, but explain how you did it**. 19 | * **Provide specific examples to demonstrate the steps**. Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets in the issue, use [Markdown code blocks](https://help.github.com/articles/markdown-basics/#multiple-lines). 20 | * **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior. 21 | * **Explain which behavior you expected to see instead and why.** 22 | * **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux. 23 | 24 | Include details about your configuration and environment: 25 | 26 | * Which version of Baseguide are you using? 27 | * Are you using custom settings? 28 | 29 | ### Pull Requests 30 | 31 | Before submitting pull requests for enhancements you should open an issue to discuss the changes. 32 | 33 | ## Local development 34 | 35 | Baseguide can be developed locally. For instructions on how to do this, see the [development section](https://github.com/slavanga/baseguide#development) in the readme. 36 | 37 | ## Styleguides 38 | 39 | ### Git Commit Messages 40 | 41 | * Use the present tense ("Add feature" not "Added feature") 42 | * Use the imperative mood ("Move cursor to..." not "Moves cursor to...") 43 | * Limit the first line to 72 characters or less 44 | * Reference issues and pull requests liberally after the first line 45 | 46 | ### Code Linting 47 | 48 | Please run ```gulp lint``` before every commit to format your code. 49 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2022 Sergio Lavanga 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 | # [Baseguide](https://basegui.de) 2 | 3 | [![npm version](https://badge.fury.io/js/baseguide.svg)](https://www.npmjs.com/package/baseguide) 4 | 5 | Baseguide is a lightweight and robust CSS framework for prototyping and production code. 6 | 7 | * **Responsive** and scalable components 8 | * **Robust** flexbox grid 9 | * **Extendable** breakpoint system 10 | * **Consistent** vertical rhythm and modular scale 11 | 12 | 13 | ## Table of Contents 14 | * [Install](#install) 15 | * [Development](#development) 16 | * [Breakpoints](#breakpoints) 17 | * [Grid](#grid) 18 | * [Forms](#forms) 19 | * [Typography](#typography) 20 | * [Browser Support](#browser-support) 21 | * [Inspired By](#inspired-by) 22 | * [License](#license) 23 | 24 | 25 | ## Install 26 | 27 | ### Download 28 | 29 | * [baseguide.css](https://raw.githubusercontent.com/slavanga/baseguide/master/dist/css/baseguide.css) (uncompressed) 30 | * [baseguide.min.css](https://raw.githubusercontent.com/slavanga/baseguide/master/dist/css/baseguide.min.css) (compressed) 31 | 32 | ### CDN 33 | 34 | This is great for prototyping, but doesn’t allow any customization. To load Baseguide via [unpkg](https://unpkg.com), add this to your ``````: 35 | 36 | ```html 37 | 38 | ``` 39 | 40 | ### Package Managers 41 | 42 | [npm](https://www.npmjs.com/package/baseguide): `npm install baseguide` 43 | 44 | [yarn](https://yarnpkg.com/en/package/baseguide): `yarn add baseguide` 45 | 46 | 47 | ## Development 48 | 49 | ### Dependencies 50 | Use `npm install` or `yarn install` to install the dev dependencies. 51 | 52 | ### Gulp 53 | The included gulpfile takes care of compiling, optimizing and minifying your assets. 54 | 55 | | Command | Description | 56 | | :---------------- | :------------------------------------------------------------------------------------------------------- | 57 | | `gulp` | Build files, watch for changes and start a local server using [Browsersync](https://www.browsersync.io/) | 58 | | `gulp build` | Build files once | 59 | | `gulp watch` | Watch files and build when a change occurs | 60 | | `gulp lint` | Lint the scss and js source files | 61 | 62 | ### Sass 63 | Default variables can be changed before importing Baseguide. 64 | Take a look at the [_settings.scss](https://github.com/slavanga/baseguide/blob/master/scss/baseguide/00-settings/_settings.scss) file to see all variables. 65 | 66 | ```scss 67 | $button-bg: #bada55; // 1. Customize default variables 68 | 69 | @import 'baseguide'; // 2. Import Baseguide 70 | 71 | // 3. Add your own styles here 72 | ``` 73 | 74 | 75 | ## Breakpoints 76 | Breakpoints can easily be configured using the ```$mq-breakpoints``` map. Note that the breakpoints have to be sorted from small to large. 77 | 78 | The default configuration looks like this: 79 | 80 | ```scss 81 | $mq-breakpoints: ( 82 | xs: 0, 83 | sm: 400px, 84 | md: 680px, 85 | lg: 960px, 86 | xl: 1200px 87 | ); 88 | ``` 89 | 90 | Baseguide generates all the necessary grid and responsive visibility classes based on these breakpoints. 91 | 92 | ### Media Queries 93 | Media Queries are handled by [Sass MQ](https://github.com/sass-mq/sass-mq). 94 | 95 | ```scss 96 | // include the media query mixin and pass the breakpoint key 97 | @include mq(md) { 98 | 99 | } 100 | ``` 101 | 102 | The snippet above compiles to the following CSS: 103 | 104 | ```css 105 | @media (min-width: 42.5em) { 106 | 107 | } 108 | ``` 109 | 110 | Check out the [Sass MQ documentation](https://sass-mq.github.io/sass-mq/#mixin-mq) for more details and advanced usage of media queries. 111 | 112 | ### Breakpoint Loop 113 | The ```loop-breakpoints``` mixin iterates through all breakpoints. It sets three global variables and outputs the ```@content``` for each breakpoint. 114 | ```scss 115 | @include loop-breakpoints($breakpoints: $mq-breakpoints, $inclusive: true, $mq: true) { 116 | @debug $breakpoint; 117 | @debug $is-first-breakpoint; 118 | @debug $is-last-breakpoint; 119 | } 120 | ``` 121 | 122 | It’s a powerful tool that for example allows the generation of additional responsive helper classes. 123 | ```scss 124 | @include loop-breakpoints { 125 | .text-#{$breakpoint}-left { 126 | text-align: left; 127 | } 128 | 129 | .text-#{$breakpoint}-center { 130 | text-align: center; 131 | } 132 | 133 | .text-#{$breakpoint}-right { 134 | text-align: right; 135 | } 136 | } 137 | ``` 138 | 139 | 140 | ## Grid 141 | The grid system is responsive and follows the mobile first pattern. It offers predefined classes for quick layouts as well as powerful mixins for more semantic layouts. 142 | 143 | The number of columns is controlled by the ```$grid-columns``` variable which defaults to 12. 144 | 145 | 146 | ### Basic Example 147 | 148 | ```html 149 |
150 |
151 |
152 |
153 |
154 |
155 | ``` 156 | 157 | ### Gutters 158 | The gutters are controlled by the ```$grid-gutter``` variable. It can either be a global value across all breakpoints or a map with gutter values per breakpoint. 159 | 160 | ```scss 161 | // set gutter for all breakpoints 162 | $grid-gutter: 60px; 163 | 164 | // start with 20px gutter and increase to 40px from the md breakpoint 165 | // note: breakpoints can be skipped to keep the last defined value 166 | $grid-gutter: ( 167 | xs: 20px, 168 | md: 40px 169 | ); 170 | ``` 171 | 172 | Accessing gutter values is easy using the ```get-gutter``` function. The smallest gutter gets returned by default. 173 | 174 | ```scss 175 | .col { 176 | margin-bottom: get-gutter(); 177 | 178 | @include mq(md) { 179 | margin-bottom: get-gutter(md); 180 | } 181 | } 182 | ``` 183 | 184 | ### Mixins 185 | The grid mixins can be used to create custom containers, rows and columns. 186 | 187 | ```scss 188 | // $gutter: gutter width in pixels or map with gutters, defaults to $grid-gutter 189 | // $size: column width as percentage value, decimal number or column count 190 | // $columns: an integer, the total number of columns, defaults to $grid-columns 191 | // $width: container width in pixels, defaults to $grid-container 192 | 193 | @include container($gutter, $width); 194 | @include row($gutter); 195 | 196 | @include column-base($gutter, $size, $columns); 197 | @include column($size, $columns); 198 | 199 | @include column-push($size, $columns); 200 | @include column-pull($size, $columns); 201 | @include column-offset($size, $columns); 202 | 203 | @include column-block($columns); 204 | ``` 205 | 206 | #### Two Column Layout 207 | 208 | ```scss 209 | @include mq(sm) { 210 | .col-content { 211 | @include column(80%); 212 | } 213 | 214 | .col-sidebar { 215 | @include column(40%); 216 | } 217 | } 218 | ``` 219 | 220 | ```html 221 |
222 |
223 |
Main Content
224 | 225 |
226 |
227 | ``` 228 | 229 | #### Gallery Layout Using Block Grid 230 | 231 | ```scss 232 | .col-gallery { 233 | @include column-base; 234 | @include column-block(3); 235 | 236 | @include mq(md) { 237 | @include column-block(6); 238 | } 239 | } 240 | ``` 241 | 242 | ```html 243 |
244 |
245 |
Gallery item
246 |
Gallery item
247 |
Gallery item
248 |
Gallery item
249 |
Gallery item
250 |
Gallery item
251 |
252 |
253 | ``` 254 | 255 | 256 | ## Forms 257 | 258 | ### Standard Form Controls 259 | All form controls listed in ```$input-selector``` get styled by default. The variable can be changed to a custom selector like ```.form-control```. This will allow you to selectively style form controls based on that selector. 260 | 261 | ### Custom Form Controls 262 | The custom forms component was designed with progressive enhancement in mind. 263 | Browsers that support [feature queries](https://caniuse.com/#feat=css-featurequeries) and [appearance](https://caniuse.com/#feat=css-appearance) get the fully enhanced experience. 264 | 265 | 266 | ## Typography 267 | 268 | ### Headings 269 | The value for ```$type-scale-base``` defines the smallest heading (h6). From there the remaining heading font sizes are calculated using the ```$type-scale```. Major Third (1.25) is the default type scale. Check [type-scale.com](https://type-scale.com/) for more scales. 270 | 271 | By using a map for ```$type-scale-base``` you can scale all headings up or down in harmony on a specific breakpoint. 272 | 273 | ```scss 274 | $type-scale-base: ( 275 | xs: $font-size-base, 276 | md: $font-size-base * 2 277 | ); 278 | ``` 279 | 280 | 281 | ## Browser Support 282 | * Latest stable: Chrome, Edge, Firefox 283 | * IE 11+ 284 | * Safari 9+ 285 | * Mobile Safari 9+ 286 | * Android Browser 4.4+ 287 | 288 | Baseguide uses [Autoprefixer](https://github.com/postcss/autoprefixer) to handle CSS vendor prefixes. 289 | 290 | 291 | ## Inspired By… 292 | * [Article: Styling with STRINGS](http://simurai.com/blog/2014/05/04/cssconf) 293 | * [Bootstrap](https://getbootstrap.com) 294 | * [Bourbon](https://www.bourbon.io) 295 | * [Foundation](https://foundation.zurb.com) 296 | * [HTML5 Boilerplate](https://html5boilerplate.com) 297 | 298 | 299 | ## License 300 | The code is released under the [MIT license](https://github.com/slavanga/baseguide/blob/master/LICENSE). 301 | -------------------------------------------------------------------------------- /dist/css/baseguide.css: -------------------------------------------------------------------------------- 1 | /*! Baseguide v4.2.0 | MIT License | http://basegui.de */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | /* Document 3 | ========================================================================== */ 4 | /** 5 | * 1. Correct the line height in all browsers. 6 | * 2. Prevent adjustments of font size after orientation changes in iOS. 7 | */ 8 | html { 9 | line-height: 1.15; /* 1 */ 10 | -webkit-text-size-adjust: 100%; /* 2 */ 11 | } 12 | 13 | /* Sections 14 | ========================================================================== */ 15 | /** 16 | * Remove the margin in all browsers. 17 | */ 18 | body { 19 | margin: 0; 20 | } 21 | 22 | /** 23 | * Render the `main` element consistently in IE. 24 | */ 25 | main { 26 | display: block; 27 | } 28 | 29 | /** 30 | * Correct the font size and margin on `h1` elements within `section` and 31 | * `article` contexts in Chrome, Firefox, and Safari. 32 | */ 33 | h1 { 34 | font-size: 2em; 35 | margin: 0.67em 0; 36 | } 37 | 38 | /* Grouping content 39 | ========================================================================== */ 40 | /** 41 | * 1. Add the correct box sizing in Firefox. 42 | * 2. Show the overflow in Edge and IE. 43 | */ 44 | hr { 45 | box-sizing: content-box; /* 1 */ 46 | height: 0; /* 1 */ 47 | overflow: visible; /* 2 */ 48 | } 49 | 50 | /** 51 | * 1. Correct the inheritance and scaling of font size in all browsers. 52 | * 2. Correct the odd `em` font sizing in all browsers. 53 | */ 54 | pre { 55 | font-family: monospace, monospace; /* 1 */ 56 | font-size: 1em; /* 2 */ 57 | } 58 | 59 | /* Text-level semantics 60 | ========================================================================== */ 61 | /** 62 | * Remove the gray background on active links in IE 10. 63 | */ 64 | a { 65 | background-color: transparent; 66 | } 67 | 68 | /** 69 | * 1. Remove the bottom border in Chrome 57- 70 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 71 | */ 72 | abbr[title] { 73 | border-bottom: none; /* 1 */ 74 | text-decoration: underline; /* 2 */ 75 | -webkit-text-decoration: underline dotted; 76 | text-decoration: underline dotted; /* 2 */ 77 | } 78 | 79 | /** 80 | * Add the correct font weight in Chrome, Edge, and Safari. 81 | */ 82 | b, 83 | strong { 84 | font-weight: bolder; 85 | } 86 | 87 | /** 88 | * 1. Correct the inheritance and scaling of font size in all browsers. 89 | * 2. Correct the odd `em` font sizing in all browsers. 90 | */ 91 | code, 92 | kbd, 93 | samp { 94 | font-family: monospace, monospace; /* 1 */ 95 | font-size: 1em; /* 2 */ 96 | } 97 | 98 | /** 99 | * Add the correct font size in all browsers. 100 | */ 101 | small { 102 | font-size: 80%; 103 | } 104 | 105 | /** 106 | * Prevent `sub` and `sup` elements from affecting the line height in 107 | * all browsers. 108 | */ 109 | sub, 110 | sup { 111 | font-size: 75%; 112 | line-height: 0; 113 | position: relative; 114 | vertical-align: baseline; 115 | } 116 | 117 | sub { 118 | bottom: -0.25em; 119 | } 120 | 121 | sup { 122 | top: -0.5em; 123 | } 124 | 125 | /* Embedded content 126 | ========================================================================== */ 127 | /** 128 | * Remove the border on images inside links in IE 10. 129 | */ 130 | img { 131 | border-style: none; 132 | } 133 | 134 | /* Forms 135 | ========================================================================== */ 136 | /** 137 | * 1. Change the font styles in all browsers. 138 | * 2. Remove the margin in Firefox and Safari. 139 | */ 140 | button, 141 | input, 142 | optgroup, 143 | select, 144 | textarea { 145 | font-family: inherit; /* 1 */ 146 | font-size: 100%; /* 1 */ 147 | line-height: 1.15; /* 1 */ 148 | margin: 0; /* 2 */ 149 | } 150 | 151 | /** 152 | * Show the overflow in IE. 153 | * 1. Show the overflow in Edge. 154 | */ 155 | button, 156 | input { /* 1 */ 157 | overflow: visible; 158 | } 159 | 160 | /** 161 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 162 | * 1. Remove the inheritance of text transform in Firefox. 163 | */ 164 | button, 165 | select { /* 1 */ 166 | text-transform: none; 167 | } 168 | 169 | /** 170 | * Correct the inability to style clickable types in iOS and Safari. 171 | */ 172 | button, 173 | [type=button], 174 | [type=reset], 175 | [type=submit] { 176 | -webkit-appearance: button; 177 | } 178 | 179 | /** 180 | * Remove the inner border and padding in Firefox. 181 | */ 182 | button::-moz-focus-inner, 183 | [type=button]::-moz-focus-inner, 184 | [type=reset]::-moz-focus-inner, 185 | [type=submit]::-moz-focus-inner { 186 | border-style: none; 187 | padding: 0; 188 | } 189 | 190 | /** 191 | * Restore the focus styles unset by the previous rule. 192 | */ 193 | button:-moz-focusring, 194 | [type=button]:-moz-focusring, 195 | [type=reset]:-moz-focusring, 196 | [type=submit]:-moz-focusring { 197 | outline: 1px dotted ButtonText; 198 | } 199 | 200 | /** 201 | * Correct the padding in Firefox. 202 | */ 203 | fieldset { 204 | padding: 0.35em 0.75em 0.625em; 205 | } 206 | 207 | /** 208 | * 1. Correct the text wrapping in Edge and IE. 209 | * 2. Correct the color inheritance from `fieldset` elements in IE. 210 | * 3. Remove the padding so developers are not caught out when they zero out 211 | * `fieldset` elements in all browsers. 212 | */ 213 | legend { 214 | box-sizing: border-box; /* 1 */ 215 | color: inherit; /* 2 */ 216 | display: table; /* 1 */ 217 | max-width: 100%; /* 1 */ 218 | padding: 0; /* 3 */ 219 | white-space: normal; /* 1 */ 220 | } 221 | 222 | /** 223 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 224 | */ 225 | progress { 226 | vertical-align: baseline; 227 | } 228 | 229 | /** 230 | * Remove the default vertical scrollbar in IE 10+. 231 | */ 232 | textarea { 233 | overflow: auto; 234 | } 235 | 236 | /** 237 | * 1. Add the correct box sizing in IE 10. 238 | * 2. Remove the padding in IE 10. 239 | */ 240 | [type=checkbox], 241 | [type=radio] { 242 | box-sizing: border-box; /* 1 */ 243 | padding: 0; /* 2 */ 244 | } 245 | 246 | /** 247 | * Correct the cursor style of increment and decrement buttons in Chrome. 248 | */ 249 | [type=number]::-webkit-inner-spin-button, 250 | [type=number]::-webkit-outer-spin-button { 251 | height: auto; 252 | } 253 | 254 | /** 255 | * 1. Correct the odd appearance in Chrome and Safari. 256 | * 2. Correct the outline style in Safari. 257 | */ 258 | [type=search] { 259 | -webkit-appearance: textfield; /* 1 */ 260 | outline-offset: -2px; /* 2 */ 261 | } 262 | 263 | /** 264 | * Remove the inner padding in Chrome and Safari on macOS. 265 | */ 266 | [type=search]::-webkit-search-decoration { 267 | -webkit-appearance: none; 268 | } 269 | 270 | /** 271 | * 1. Correct the inability to style clickable types in iOS and Safari. 272 | * 2. Change font properties to `inherit` in Safari. 273 | */ 274 | ::-webkit-file-upload-button { 275 | -webkit-appearance: button; /* 1 */ 276 | font: inherit; /* 2 */ 277 | } 278 | 279 | /* Interactive 280 | ========================================================================== */ 281 | /* 282 | * Add the correct display in Edge, IE 10+, and Firefox. 283 | */ 284 | details { 285 | display: block; 286 | } 287 | 288 | /* 289 | * Add the correct display in all browsers. 290 | */ 291 | summary { 292 | display: list-item; 293 | } 294 | 295 | /* Misc 296 | ========================================================================== */ 297 | /** 298 | * Add the correct display in IE 10+. 299 | */ 300 | template { 301 | display: none; 302 | } 303 | 304 | /** 305 | * Add the correct display in IE 10. 306 | */ 307 | [hidden] { 308 | display: none; 309 | } 310 | 311 | html { 312 | box-sizing: border-box; 313 | } 314 | 315 | *, 316 | *::before, 317 | *::after { 318 | box-sizing: inherit; 319 | } 320 | 321 | audio, 322 | canvas, 323 | iframe, 324 | img, 325 | svg, 326 | video { 327 | vertical-align: middle; 328 | } 329 | 330 | canvas, 331 | img, 332 | video { 333 | max-width: 100%; 334 | height: auto; 335 | } 336 | 337 | audio { 338 | max-width: 100%; 339 | } 340 | 341 | iframe { 342 | border: 0; 343 | } 344 | 345 | button, 346 | input, 347 | optgroup, 348 | select, 349 | textarea { 350 | font: inherit; 351 | line-height: inherit; 352 | } 353 | 354 | optgroup { 355 | font-weight: bold; 356 | } 357 | 358 | fieldset { 359 | min-width: 0; 360 | padding: 0; 361 | border: 0; 362 | } 363 | 364 | [type=button]:not(:disabled), 365 | [type=reset]:not(:disabled), 366 | [type=submit]:not(:disabled), 367 | button:not(:disabled) { 368 | cursor: pointer; 369 | } 370 | 371 | address { 372 | font-style: inherit; 373 | } 374 | 375 | pre { 376 | overflow: auto; 377 | } 378 | 379 | hr { 380 | border: 0; 381 | border-top: 1px solid; 382 | color: inherit; 383 | opacity: 0.2; 384 | } 385 | 386 | :focus:not(:focus-visible) { 387 | outline: none; 388 | } 389 | 390 | body { 391 | font-family: "Helvetica Neue", Helvetica, sans-serif; 392 | font-size: 1rem; 393 | font-weight: 400; 394 | line-height: 1.5; 395 | background-color: #fff; 396 | color: #333; 397 | } 398 | 399 | blockquote, 400 | figure, 401 | fieldset { 402 | margin: 0; 403 | } 404 | 405 | address, 406 | blockquote, 407 | table, 408 | figure, 409 | form, 410 | fieldset, 411 | legend, 412 | pre, 413 | dl, 414 | ul, 415 | ol, 416 | hr, 417 | p { 418 | margin-top: 0; 419 | margin-bottom: 1.5rem; 420 | } 421 | address:last-child, 422 | blockquote:last-child, 423 | table:last-child, 424 | figure:last-child, 425 | form:last-child, 426 | fieldset:last-child, 427 | legend:last-child, 428 | pre:last-child, 429 | dl:last-child, 430 | ul:last-child, 431 | ol:last-child, 432 | hr:last-child, 433 | p:last-child { 434 | margin-bottom: 0; 435 | } 436 | 437 | h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { 438 | margin-top: 0.8em; 439 | margin-bottom: 0.4em; 440 | font-family: inherit; 441 | font-weight: 700; 442 | line-height: 1.2; 443 | color: inherit; 444 | } 445 | h6:first-child, .h6:first-child, h5:first-child, .h5:first-child, h4:first-child, .h4:first-child, h3:first-child, .h3:first-child, h2:first-child, .h2:first-child, h1:first-child, .h1:first-child { 446 | margin-top: 0; 447 | } 448 | h6:last-child, .h6:last-child, h5:last-child, .h5:last-child, h4:last-child, .h4:last-child, h3:last-child, .h3:last-child, h2:last-child, .h2:last-child, h1:last-child, .h1:last-child { 449 | margin-bottom: 0; 450 | } 451 | 452 | h6, .h6 { 453 | font-size: 1rem; 454 | } 455 | 456 | h5, .h5 { 457 | font-size: 1.25rem; 458 | } 459 | 460 | h4, .h4 { 461 | font-size: 1.5625rem; 462 | } 463 | 464 | h3, .h3 { 465 | font-size: 1.953125rem; 466 | } 467 | 468 | h2, .h2 { 469 | font-size: 2.44140625rem; 470 | } 471 | 472 | h1, .h1 { 473 | font-size: 3.0517578125rem; 474 | } 475 | 476 | a { 477 | color: #0283f1; 478 | text-decoration: none; 479 | } 480 | a:hover, a:focus { 481 | color: #0283f1; 482 | text-decoration: underline; 483 | } 484 | 485 | @media print { 486 | *, 487 | *::before, 488 | *::after { 489 | color: #000 !important; 490 | box-shadow: none !important; 491 | text-shadow: none !important; 492 | } 493 | a, 494 | a:visited { 495 | text-decoration: underline; 496 | } 497 | abbr[title]::after { 498 | content: " (" attr(title) ")"; 499 | } 500 | pre { 501 | white-space: pre-wrap !important; 502 | } 503 | pre, 504 | blockquote { 505 | border: 1px solid #999; 506 | page-break-inside: avoid; 507 | } 508 | thead { 509 | display: table-header-group; 510 | } 511 | tr, 512 | img { 513 | page-break-inside: avoid; 514 | } 515 | p, 516 | h2, 517 | h3 { 518 | orphans: 3; 519 | widows: 3; 520 | } 521 | h2, 522 | h3 { 523 | page-break-after: avoid; 524 | } 525 | } 526 | .list-unstyled { 527 | padding-left: 0; 528 | list-style: none; 529 | } 530 | 531 | .list-inline { 532 | padding-left: 0; 533 | list-style: none; 534 | display: flex; 535 | flex-wrap: wrap; 536 | margin-left: -1rem; 537 | } 538 | .list-inline > li { 539 | margin-left: 1rem; 540 | } 541 | 542 | .media { 543 | display: flex; 544 | align-items: flex-start; 545 | } 546 | 547 | .media-body { 548 | flex: 0 1 auto; 549 | } 550 | 551 | .media-left, 552 | .media-right { 553 | flex: 0 0 auto; 554 | } 555 | 556 | .media-left { 557 | padding-right: 1rem; 558 | } 559 | 560 | .media-right { 561 | order: 1; 562 | padding-left: 1rem; 563 | } 564 | 565 | .media-middle { 566 | align-self: center; 567 | } 568 | 569 | .media-bottom { 570 | align-self: flex-end; 571 | } 572 | 573 | .embed-responsive { 574 | position: relative; 575 | overflow: hidden; 576 | } 577 | .embed-responsive::before { 578 | content: ""; 579 | display: block; 580 | padding-bottom: 56.25%; 581 | } 582 | .embed-responsive iframe, 583 | .embed-responsive embed, 584 | .embed-responsive object, 585 | .embed-responsive video { 586 | position: absolute; 587 | top: 0; 588 | left: 0; 589 | width: 100%; 590 | height: 100%; 591 | } 592 | 593 | .container { 594 | padding-left: 0.9375rem; 595 | padding-right: 0.9375rem; 596 | margin-left: auto; 597 | margin-right: auto; 598 | width: 100%; 599 | max-width: 73.125rem; 600 | } 601 | 602 | .row { 603 | margin-left: -0.9375rem; 604 | margin-right: -0.9375rem; 605 | display: flex; 606 | flex-wrap: wrap; 607 | } 608 | 609 | .col { 610 | padding-left: 0.9375rem; 611 | padding-right: 0.9375rem; 612 | width: 100%; 613 | position: relative; 614 | } 615 | 616 | .col-xs-pull-0 { 617 | right: auto; 618 | } 619 | 620 | .col-xs-push-0 { 621 | left: auto; 622 | } 623 | 624 | .col-xs-offset-0 { 625 | margin-left: 0%; 626 | } 627 | 628 | .col-xs-1 { 629 | width: 8.3333333333%; 630 | } 631 | 632 | .col-xs-pull-1 { 633 | right: 8.3333333333%; 634 | } 635 | 636 | .col-xs-push-1 { 637 | left: 8.3333333333%; 638 | } 639 | 640 | .col-xs-offset-1 { 641 | margin-left: 8.3333333333%; 642 | } 643 | 644 | .col-xs-2 { 645 | width: 16.6666666667%; 646 | } 647 | 648 | .col-xs-pull-2 { 649 | right: 16.6666666667%; 650 | } 651 | 652 | .col-xs-push-2 { 653 | left: 16.6666666667%; 654 | } 655 | 656 | .col-xs-offset-2 { 657 | margin-left: 16.6666666667%; 658 | } 659 | 660 | .col-xs-3 { 661 | width: 25%; 662 | } 663 | 664 | .col-xs-pull-3 { 665 | right: 25%; 666 | } 667 | 668 | .col-xs-push-3 { 669 | left: 25%; 670 | } 671 | 672 | .col-xs-offset-3 { 673 | margin-left: 25%; 674 | } 675 | 676 | .col-xs-4 { 677 | width: 33.3333333333%; 678 | } 679 | 680 | .col-xs-pull-4 { 681 | right: 33.3333333333%; 682 | } 683 | 684 | .col-xs-push-4 { 685 | left: 33.3333333333%; 686 | } 687 | 688 | .col-xs-offset-4 { 689 | margin-left: 33.3333333333%; 690 | } 691 | 692 | .col-xs-5 { 693 | width: 41.6666666667%; 694 | } 695 | 696 | .col-xs-pull-5 { 697 | right: 41.6666666667%; 698 | } 699 | 700 | .col-xs-push-5 { 701 | left: 41.6666666667%; 702 | } 703 | 704 | .col-xs-offset-5 { 705 | margin-left: 41.6666666667%; 706 | } 707 | 708 | .col-xs-6 { 709 | width: 50%; 710 | } 711 | 712 | .col-xs-pull-6 { 713 | right: 50%; 714 | } 715 | 716 | .col-xs-push-6 { 717 | left: 50%; 718 | } 719 | 720 | .col-xs-offset-6 { 721 | margin-left: 50%; 722 | } 723 | 724 | .col-xs-7 { 725 | width: 58.3333333333%; 726 | } 727 | 728 | .col-xs-pull-7 { 729 | right: 58.3333333333%; 730 | } 731 | 732 | .col-xs-push-7 { 733 | left: 58.3333333333%; 734 | } 735 | 736 | .col-xs-offset-7 { 737 | margin-left: 58.3333333333%; 738 | } 739 | 740 | .col-xs-8 { 741 | width: 66.6666666667%; 742 | } 743 | 744 | .col-xs-pull-8 { 745 | right: 66.6666666667%; 746 | } 747 | 748 | .col-xs-push-8 { 749 | left: 66.6666666667%; 750 | } 751 | 752 | .col-xs-offset-8 { 753 | margin-left: 66.6666666667%; 754 | } 755 | 756 | .col-xs-9 { 757 | width: 75%; 758 | } 759 | 760 | .col-xs-pull-9 { 761 | right: 75%; 762 | } 763 | 764 | .col-xs-push-9 { 765 | left: 75%; 766 | } 767 | 768 | .col-xs-offset-9 { 769 | margin-left: 75%; 770 | } 771 | 772 | .col-xs-10 { 773 | width: 83.3333333333%; 774 | } 775 | 776 | .col-xs-pull-10 { 777 | right: 83.3333333333%; 778 | } 779 | 780 | .col-xs-push-10 { 781 | left: 83.3333333333%; 782 | } 783 | 784 | .col-xs-offset-10 { 785 | margin-left: 83.3333333333%; 786 | } 787 | 788 | .col-xs-11 { 789 | width: 91.6666666667%; 790 | } 791 | 792 | .col-xs-pull-11 { 793 | right: 91.6666666667%; 794 | } 795 | 796 | .col-xs-push-11 { 797 | left: 91.6666666667%; 798 | } 799 | 800 | .col-xs-offset-11 { 801 | margin-left: 91.6666666667%; 802 | } 803 | 804 | .col-xs-12 { 805 | width: 100%; 806 | } 807 | 808 | .col-xs-pull-12 { 809 | right: 100%; 810 | } 811 | 812 | .col-xs-push-12 { 813 | left: 100%; 814 | } 815 | 816 | @media (min-width: 25em) { 817 | .col-sm-pull-0 { 818 | right: auto; 819 | } 820 | .col-sm-push-0 { 821 | left: auto; 822 | } 823 | .col-sm-offset-0 { 824 | margin-left: 0%; 825 | } 826 | .col-sm-1 { 827 | width: 8.3333333333%; 828 | } 829 | .col-sm-pull-1 { 830 | right: 8.3333333333%; 831 | } 832 | .col-sm-push-1 { 833 | left: 8.3333333333%; 834 | } 835 | .col-sm-offset-1 { 836 | margin-left: 8.3333333333%; 837 | } 838 | .col-sm-2 { 839 | width: 16.6666666667%; 840 | } 841 | .col-sm-pull-2 { 842 | right: 16.6666666667%; 843 | } 844 | .col-sm-push-2 { 845 | left: 16.6666666667%; 846 | } 847 | .col-sm-offset-2 { 848 | margin-left: 16.6666666667%; 849 | } 850 | .col-sm-3 { 851 | width: 25%; 852 | } 853 | .col-sm-pull-3 { 854 | right: 25%; 855 | } 856 | .col-sm-push-3 { 857 | left: 25%; 858 | } 859 | .col-sm-offset-3 { 860 | margin-left: 25%; 861 | } 862 | .col-sm-4 { 863 | width: 33.3333333333%; 864 | } 865 | .col-sm-pull-4 { 866 | right: 33.3333333333%; 867 | } 868 | .col-sm-push-4 { 869 | left: 33.3333333333%; 870 | } 871 | .col-sm-offset-4 { 872 | margin-left: 33.3333333333%; 873 | } 874 | .col-sm-5 { 875 | width: 41.6666666667%; 876 | } 877 | .col-sm-pull-5 { 878 | right: 41.6666666667%; 879 | } 880 | .col-sm-push-5 { 881 | left: 41.6666666667%; 882 | } 883 | .col-sm-offset-5 { 884 | margin-left: 41.6666666667%; 885 | } 886 | .col-sm-6 { 887 | width: 50%; 888 | } 889 | .col-sm-pull-6 { 890 | right: 50%; 891 | } 892 | .col-sm-push-6 { 893 | left: 50%; 894 | } 895 | .col-sm-offset-6 { 896 | margin-left: 50%; 897 | } 898 | .col-sm-7 { 899 | width: 58.3333333333%; 900 | } 901 | .col-sm-pull-7 { 902 | right: 58.3333333333%; 903 | } 904 | .col-sm-push-7 { 905 | left: 58.3333333333%; 906 | } 907 | .col-sm-offset-7 { 908 | margin-left: 58.3333333333%; 909 | } 910 | .col-sm-8 { 911 | width: 66.6666666667%; 912 | } 913 | .col-sm-pull-8 { 914 | right: 66.6666666667%; 915 | } 916 | .col-sm-push-8 { 917 | left: 66.6666666667%; 918 | } 919 | .col-sm-offset-8 { 920 | margin-left: 66.6666666667%; 921 | } 922 | .col-sm-9 { 923 | width: 75%; 924 | } 925 | .col-sm-pull-9 { 926 | right: 75%; 927 | } 928 | .col-sm-push-9 { 929 | left: 75%; 930 | } 931 | .col-sm-offset-9 { 932 | margin-left: 75%; 933 | } 934 | .col-sm-10 { 935 | width: 83.3333333333%; 936 | } 937 | .col-sm-pull-10 { 938 | right: 83.3333333333%; 939 | } 940 | .col-sm-push-10 { 941 | left: 83.3333333333%; 942 | } 943 | .col-sm-offset-10 { 944 | margin-left: 83.3333333333%; 945 | } 946 | .col-sm-11 { 947 | width: 91.6666666667%; 948 | } 949 | .col-sm-pull-11 { 950 | right: 91.6666666667%; 951 | } 952 | .col-sm-push-11 { 953 | left: 91.6666666667%; 954 | } 955 | .col-sm-offset-11 { 956 | margin-left: 91.6666666667%; 957 | } 958 | .col-sm-12 { 959 | width: 100%; 960 | } 961 | .col-sm-pull-12 { 962 | right: 100%; 963 | } 964 | .col-sm-push-12 { 965 | left: 100%; 966 | } 967 | } 968 | @media (min-width: 42.5em) { 969 | .col-md-pull-0 { 970 | right: auto; 971 | } 972 | .col-md-push-0 { 973 | left: auto; 974 | } 975 | .col-md-offset-0 { 976 | margin-left: 0%; 977 | } 978 | .col-md-1 { 979 | width: 8.3333333333%; 980 | } 981 | .col-md-pull-1 { 982 | right: 8.3333333333%; 983 | } 984 | .col-md-push-1 { 985 | left: 8.3333333333%; 986 | } 987 | .col-md-offset-1 { 988 | margin-left: 8.3333333333%; 989 | } 990 | .col-md-2 { 991 | width: 16.6666666667%; 992 | } 993 | .col-md-pull-2 { 994 | right: 16.6666666667%; 995 | } 996 | .col-md-push-2 { 997 | left: 16.6666666667%; 998 | } 999 | .col-md-offset-2 { 1000 | margin-left: 16.6666666667%; 1001 | } 1002 | .col-md-3 { 1003 | width: 25%; 1004 | } 1005 | .col-md-pull-3 { 1006 | right: 25%; 1007 | } 1008 | .col-md-push-3 { 1009 | left: 25%; 1010 | } 1011 | .col-md-offset-3 { 1012 | margin-left: 25%; 1013 | } 1014 | .col-md-4 { 1015 | width: 33.3333333333%; 1016 | } 1017 | .col-md-pull-4 { 1018 | right: 33.3333333333%; 1019 | } 1020 | .col-md-push-4 { 1021 | left: 33.3333333333%; 1022 | } 1023 | .col-md-offset-4 { 1024 | margin-left: 33.3333333333%; 1025 | } 1026 | .col-md-5 { 1027 | width: 41.6666666667%; 1028 | } 1029 | .col-md-pull-5 { 1030 | right: 41.6666666667%; 1031 | } 1032 | .col-md-push-5 { 1033 | left: 41.6666666667%; 1034 | } 1035 | .col-md-offset-5 { 1036 | margin-left: 41.6666666667%; 1037 | } 1038 | .col-md-6 { 1039 | width: 50%; 1040 | } 1041 | .col-md-pull-6 { 1042 | right: 50%; 1043 | } 1044 | .col-md-push-6 { 1045 | left: 50%; 1046 | } 1047 | .col-md-offset-6 { 1048 | margin-left: 50%; 1049 | } 1050 | .col-md-7 { 1051 | width: 58.3333333333%; 1052 | } 1053 | .col-md-pull-7 { 1054 | right: 58.3333333333%; 1055 | } 1056 | .col-md-push-7 { 1057 | left: 58.3333333333%; 1058 | } 1059 | .col-md-offset-7 { 1060 | margin-left: 58.3333333333%; 1061 | } 1062 | .col-md-8 { 1063 | width: 66.6666666667%; 1064 | } 1065 | .col-md-pull-8 { 1066 | right: 66.6666666667%; 1067 | } 1068 | .col-md-push-8 { 1069 | left: 66.6666666667%; 1070 | } 1071 | .col-md-offset-8 { 1072 | margin-left: 66.6666666667%; 1073 | } 1074 | .col-md-9 { 1075 | width: 75%; 1076 | } 1077 | .col-md-pull-9 { 1078 | right: 75%; 1079 | } 1080 | .col-md-push-9 { 1081 | left: 75%; 1082 | } 1083 | .col-md-offset-9 { 1084 | margin-left: 75%; 1085 | } 1086 | .col-md-10 { 1087 | width: 83.3333333333%; 1088 | } 1089 | .col-md-pull-10 { 1090 | right: 83.3333333333%; 1091 | } 1092 | .col-md-push-10 { 1093 | left: 83.3333333333%; 1094 | } 1095 | .col-md-offset-10 { 1096 | margin-left: 83.3333333333%; 1097 | } 1098 | .col-md-11 { 1099 | width: 91.6666666667%; 1100 | } 1101 | .col-md-pull-11 { 1102 | right: 91.6666666667%; 1103 | } 1104 | .col-md-push-11 { 1105 | left: 91.6666666667%; 1106 | } 1107 | .col-md-offset-11 { 1108 | margin-left: 91.6666666667%; 1109 | } 1110 | .col-md-12 { 1111 | width: 100%; 1112 | } 1113 | .col-md-pull-12 { 1114 | right: 100%; 1115 | } 1116 | .col-md-push-12 { 1117 | left: 100%; 1118 | } 1119 | } 1120 | @media (min-width: 60em) { 1121 | .col-lg-pull-0 { 1122 | right: auto; 1123 | } 1124 | .col-lg-push-0 { 1125 | left: auto; 1126 | } 1127 | .col-lg-offset-0 { 1128 | margin-left: 0%; 1129 | } 1130 | .col-lg-1 { 1131 | width: 8.3333333333%; 1132 | } 1133 | .col-lg-pull-1 { 1134 | right: 8.3333333333%; 1135 | } 1136 | .col-lg-push-1 { 1137 | left: 8.3333333333%; 1138 | } 1139 | .col-lg-offset-1 { 1140 | margin-left: 8.3333333333%; 1141 | } 1142 | .col-lg-2 { 1143 | width: 16.6666666667%; 1144 | } 1145 | .col-lg-pull-2 { 1146 | right: 16.6666666667%; 1147 | } 1148 | .col-lg-push-2 { 1149 | left: 16.6666666667%; 1150 | } 1151 | .col-lg-offset-2 { 1152 | margin-left: 16.6666666667%; 1153 | } 1154 | .col-lg-3 { 1155 | width: 25%; 1156 | } 1157 | .col-lg-pull-3 { 1158 | right: 25%; 1159 | } 1160 | .col-lg-push-3 { 1161 | left: 25%; 1162 | } 1163 | .col-lg-offset-3 { 1164 | margin-left: 25%; 1165 | } 1166 | .col-lg-4 { 1167 | width: 33.3333333333%; 1168 | } 1169 | .col-lg-pull-4 { 1170 | right: 33.3333333333%; 1171 | } 1172 | .col-lg-push-4 { 1173 | left: 33.3333333333%; 1174 | } 1175 | .col-lg-offset-4 { 1176 | margin-left: 33.3333333333%; 1177 | } 1178 | .col-lg-5 { 1179 | width: 41.6666666667%; 1180 | } 1181 | .col-lg-pull-5 { 1182 | right: 41.6666666667%; 1183 | } 1184 | .col-lg-push-5 { 1185 | left: 41.6666666667%; 1186 | } 1187 | .col-lg-offset-5 { 1188 | margin-left: 41.6666666667%; 1189 | } 1190 | .col-lg-6 { 1191 | width: 50%; 1192 | } 1193 | .col-lg-pull-6 { 1194 | right: 50%; 1195 | } 1196 | .col-lg-push-6 { 1197 | left: 50%; 1198 | } 1199 | .col-lg-offset-6 { 1200 | margin-left: 50%; 1201 | } 1202 | .col-lg-7 { 1203 | width: 58.3333333333%; 1204 | } 1205 | .col-lg-pull-7 { 1206 | right: 58.3333333333%; 1207 | } 1208 | .col-lg-push-7 { 1209 | left: 58.3333333333%; 1210 | } 1211 | .col-lg-offset-7 { 1212 | margin-left: 58.3333333333%; 1213 | } 1214 | .col-lg-8 { 1215 | width: 66.6666666667%; 1216 | } 1217 | .col-lg-pull-8 { 1218 | right: 66.6666666667%; 1219 | } 1220 | .col-lg-push-8 { 1221 | left: 66.6666666667%; 1222 | } 1223 | .col-lg-offset-8 { 1224 | margin-left: 66.6666666667%; 1225 | } 1226 | .col-lg-9 { 1227 | width: 75%; 1228 | } 1229 | .col-lg-pull-9 { 1230 | right: 75%; 1231 | } 1232 | .col-lg-push-9 { 1233 | left: 75%; 1234 | } 1235 | .col-lg-offset-9 { 1236 | margin-left: 75%; 1237 | } 1238 | .col-lg-10 { 1239 | width: 83.3333333333%; 1240 | } 1241 | .col-lg-pull-10 { 1242 | right: 83.3333333333%; 1243 | } 1244 | .col-lg-push-10 { 1245 | left: 83.3333333333%; 1246 | } 1247 | .col-lg-offset-10 { 1248 | margin-left: 83.3333333333%; 1249 | } 1250 | .col-lg-11 { 1251 | width: 91.6666666667%; 1252 | } 1253 | .col-lg-pull-11 { 1254 | right: 91.6666666667%; 1255 | } 1256 | .col-lg-push-11 { 1257 | left: 91.6666666667%; 1258 | } 1259 | .col-lg-offset-11 { 1260 | margin-left: 91.6666666667%; 1261 | } 1262 | .col-lg-12 { 1263 | width: 100%; 1264 | } 1265 | .col-lg-pull-12 { 1266 | right: 100%; 1267 | } 1268 | .col-lg-push-12 { 1269 | left: 100%; 1270 | } 1271 | } 1272 | @media (min-width: 75em) { 1273 | .col-xl-pull-0 { 1274 | right: auto; 1275 | } 1276 | .col-xl-push-0 { 1277 | left: auto; 1278 | } 1279 | .col-xl-offset-0 { 1280 | margin-left: 0%; 1281 | } 1282 | .col-xl-1 { 1283 | width: 8.3333333333%; 1284 | } 1285 | .col-xl-pull-1 { 1286 | right: 8.3333333333%; 1287 | } 1288 | .col-xl-push-1 { 1289 | left: 8.3333333333%; 1290 | } 1291 | .col-xl-offset-1 { 1292 | margin-left: 8.3333333333%; 1293 | } 1294 | .col-xl-2 { 1295 | width: 16.6666666667%; 1296 | } 1297 | .col-xl-pull-2 { 1298 | right: 16.6666666667%; 1299 | } 1300 | .col-xl-push-2 { 1301 | left: 16.6666666667%; 1302 | } 1303 | .col-xl-offset-2 { 1304 | margin-left: 16.6666666667%; 1305 | } 1306 | .col-xl-3 { 1307 | width: 25%; 1308 | } 1309 | .col-xl-pull-3 { 1310 | right: 25%; 1311 | } 1312 | .col-xl-push-3 { 1313 | left: 25%; 1314 | } 1315 | .col-xl-offset-3 { 1316 | margin-left: 25%; 1317 | } 1318 | .col-xl-4 { 1319 | width: 33.3333333333%; 1320 | } 1321 | .col-xl-pull-4 { 1322 | right: 33.3333333333%; 1323 | } 1324 | .col-xl-push-4 { 1325 | left: 33.3333333333%; 1326 | } 1327 | .col-xl-offset-4 { 1328 | margin-left: 33.3333333333%; 1329 | } 1330 | .col-xl-5 { 1331 | width: 41.6666666667%; 1332 | } 1333 | .col-xl-pull-5 { 1334 | right: 41.6666666667%; 1335 | } 1336 | .col-xl-push-5 { 1337 | left: 41.6666666667%; 1338 | } 1339 | .col-xl-offset-5 { 1340 | margin-left: 41.6666666667%; 1341 | } 1342 | .col-xl-6 { 1343 | width: 50%; 1344 | } 1345 | .col-xl-pull-6 { 1346 | right: 50%; 1347 | } 1348 | .col-xl-push-6 { 1349 | left: 50%; 1350 | } 1351 | .col-xl-offset-6 { 1352 | margin-left: 50%; 1353 | } 1354 | .col-xl-7 { 1355 | width: 58.3333333333%; 1356 | } 1357 | .col-xl-pull-7 { 1358 | right: 58.3333333333%; 1359 | } 1360 | .col-xl-push-7 { 1361 | left: 58.3333333333%; 1362 | } 1363 | .col-xl-offset-7 { 1364 | margin-left: 58.3333333333%; 1365 | } 1366 | .col-xl-8 { 1367 | width: 66.6666666667%; 1368 | } 1369 | .col-xl-pull-8 { 1370 | right: 66.6666666667%; 1371 | } 1372 | .col-xl-push-8 { 1373 | left: 66.6666666667%; 1374 | } 1375 | .col-xl-offset-8 { 1376 | margin-left: 66.6666666667%; 1377 | } 1378 | .col-xl-9 { 1379 | width: 75%; 1380 | } 1381 | .col-xl-pull-9 { 1382 | right: 75%; 1383 | } 1384 | .col-xl-push-9 { 1385 | left: 75%; 1386 | } 1387 | .col-xl-offset-9 { 1388 | margin-left: 75%; 1389 | } 1390 | .col-xl-10 { 1391 | width: 83.3333333333%; 1392 | } 1393 | .col-xl-pull-10 { 1394 | right: 83.3333333333%; 1395 | } 1396 | .col-xl-push-10 { 1397 | left: 83.3333333333%; 1398 | } 1399 | .col-xl-offset-10 { 1400 | margin-left: 83.3333333333%; 1401 | } 1402 | .col-xl-11 { 1403 | width: 91.6666666667%; 1404 | } 1405 | .col-xl-pull-11 { 1406 | right: 91.6666666667%; 1407 | } 1408 | .col-xl-push-11 { 1409 | left: 91.6666666667%; 1410 | } 1411 | .col-xl-offset-11 { 1412 | margin-left: 91.6666666667%; 1413 | } 1414 | .col-xl-12 { 1415 | width: 100%; 1416 | } 1417 | .col-xl-pull-12 { 1418 | right: 100%; 1419 | } 1420 | .col-xl-push-12 { 1421 | left: 100%; 1422 | } 1423 | } 1424 | label { 1425 | display: inline-block; 1426 | margin-bottom: 0.3rem; 1427 | } 1428 | 1429 | .label-inline { 1430 | margin-top: 1px; 1431 | padding-top: 0.375em; 1432 | } 1433 | 1434 | .form-group { 1435 | margin-bottom: 1rem; 1436 | } 1437 | 1438 | [type=email], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=url], textarea, select { 1439 | display: block; 1440 | width: 100%; 1441 | height: 2.375em; 1442 | border: 1px solid #b6b6b6; 1443 | border-radius: 0.125em; 1444 | padding: 0.375em 0.75em; 1445 | background-clip: padding-box; 1446 | background-color: #fff; 1447 | color: #333; 1448 | transition: border-color 0.15s ease; 1449 | } 1450 | [type=email]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=url]:focus, textarea:focus, select:focus { 1451 | border-color: #838383; 1452 | outline: 0; 1453 | } 1454 | [type=email]:disabled, [type=number]:disabled, [type=password]:disabled, [type=search]:disabled, [type=tel]:disabled, [type=text]:disabled, [type=url]:disabled, textarea:disabled, select:disabled { 1455 | border-color: #ccc; 1456 | background-color: #eee; 1457 | color: #555; 1458 | cursor: not-allowed; 1459 | } 1460 | 1461 | select { 1462 | overflow-x: hidden; 1463 | } 1464 | select:focus::-ms-value { 1465 | background: transparent; 1466 | color: currentColor; 1467 | } 1468 | select[multiple], select[size] { 1469 | height: auto; 1470 | } 1471 | 1472 | textarea { 1473 | resize: vertical; 1474 | } 1475 | textarea[rows] { 1476 | height: auto; 1477 | } 1478 | textarea:not([rows]) { 1479 | height: 4.75em; 1480 | } 1481 | 1482 | input[type=radio]:not(:only-child), 1483 | input[type=checkbox]:not(:only-child) { 1484 | position: absolute; 1485 | margin-top: 0.35em; 1486 | } 1487 | input[type=radio] ~ label, 1488 | input[type=checkbox] ~ label { 1489 | margin-bottom: 0; 1490 | padding-left: 20px; 1491 | font-weight: inherit; 1492 | } 1493 | input[type=radio]:disabled ~ label, 1494 | input[type=checkbox]:disabled ~ label { 1495 | color: #555; 1496 | cursor: not-allowed; 1497 | } 1498 | 1499 | input[type=file] { 1500 | display: block; 1501 | max-width: 100%; 1502 | } 1503 | 1504 | ::-moz-placeholder { 1505 | color: #b3b3b3; 1506 | opacity: 1; 1507 | } 1508 | 1509 | :-ms-input-placeholder { 1510 | color: #b3b3b3; 1511 | opacity: 1; 1512 | } 1513 | 1514 | ::placeholder { 1515 | color: #b3b3b3; 1516 | opacity: 1; 1517 | } 1518 | 1519 | @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) { 1520 | .select select:not([multiple]) { 1521 | -webkit-appearance: none; 1522 | -moz-appearance: none; 1523 | appearance: none; 1524 | padding-right: 2em; 1525 | background-repeat: no-repeat; 1526 | background-position: right center; 1527 | background-position: right 0.75em center; 1528 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' width='12' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='m1.41 0 4.59 4.58 4.59-4.58 1.41 1.41l-6 6-6-6z'/%3E%3C/svg%3E"); 1529 | } 1530 | } 1531 | .radio input[type=radio]:not(:only-child), 1532 | .checkbox input[type=checkbox]:not(:only-child) { 1533 | opacity: 0; 1534 | } 1535 | .radio input[type=radio] ~ label, 1536 | .checkbox input[type=checkbox] ~ label { 1537 | position: relative; 1538 | padding-left: 1.4em; 1539 | line-height: 1.5; 1540 | } 1541 | .radio input[type=radio] ~ label::before, 1542 | .radio input[type=radio] ~ label::after, 1543 | .checkbox input[type=checkbox] ~ label::before, 1544 | .checkbox input[type=checkbox] ~ label::after { 1545 | content: ""; 1546 | position: absolute; 1547 | top: 0.25em; 1548 | left: 0; 1549 | width: 1em; 1550 | height: 1em; 1551 | } 1552 | .radio input[type=radio] ~ label::before, 1553 | .checkbox input[type=checkbox] ~ label::before { 1554 | border: 1px solid #b6b6b6; 1555 | background-color: #fff; 1556 | } 1557 | .radio input[type=radio] ~ label::after, 1558 | .checkbox input[type=checkbox] ~ label::after { 1559 | background-repeat: no-repeat; 1560 | background-position: center center; 1561 | } 1562 | .radio input[type=radio]:hover:not(:disabled) ~ label:hover::before, .radio input[type=radio]:focus ~ label::before, 1563 | .checkbox input[type=checkbox]:hover:not(:disabled) ~ label:hover::before, 1564 | .checkbox input[type=checkbox]:focus ~ label::before { 1565 | border-color: #838383; 1566 | } 1567 | .radio input[type=radio]:active ~ label::before, 1568 | .checkbox input[type=checkbox]:active ~ label::before { 1569 | background-color: #e6e6e6; 1570 | } 1571 | .radio input[type=radio]:disabled ~ label::before, 1572 | .checkbox input[type=checkbox]:disabled ~ label::before { 1573 | border-color: #ccc; 1574 | background-color: #eee; 1575 | } 1576 | 1577 | .radio input[type=radio] ~ label::before { 1578 | border-radius: 50%; 1579 | } 1580 | .radio input[type=radio]:checked ~ label::after { 1581 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23333' d='M4 1C2.3 1 1 2.3 1 4s1.3 3 3 3 3-1.3 3-3S5.7 1 4 1z'/%3E%3C/svg%3E"); 1582 | } 1583 | 1584 | .checkbox input[type=checkbox] ~ label::before { 1585 | border-radius: 0.125em; 1586 | } 1587 | .checkbox input[type=checkbox]:checked ~ label::after { 1588 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23333' d='M6.4 1L5.7 1.7 2.9 4.5 2.1 3.7 1.4 3 0 4.4l0.7 0.7 1.5 1.5 0.7 0.7 0.7-0.7 3.5-3.5 0.7-0.7L6.4 1 6.4 1z'/%3E%3C/svg%3E"); 1589 | } 1590 | 1591 | .btn { 1592 | display: inline-block; 1593 | vertical-align: middle; 1594 | padding: 0.375em 1em; 1595 | transition: background-color 0.15s ease, color 0.15s ease; 1596 | text-align: center; 1597 | text-decoration: none; 1598 | white-space: normal; 1599 | -webkit-user-select: none; 1600 | -moz-user-select: none; 1601 | -ms-user-select: none; 1602 | user-select: none; 1603 | touch-action: manipulation; 1604 | cursor: pointer; 1605 | border: 1px solid transparent; 1606 | border-radius: 0.125em; 1607 | background-color: #0275d8; 1608 | color: #fff; 1609 | } 1610 | .btn:hover, .btn:focus { 1611 | outline: 0; 1612 | text-decoration: none; 1613 | border-color: transparent; 1614 | background-color: #025aa5; 1615 | color: #fff; 1616 | } 1617 | .btn:active { 1618 | background-color: #025aa5; 1619 | color: #fff; 1620 | } 1621 | .btn.disabled, .btn:disabled { 1622 | opacity: 0.65; 1623 | cursor: default; 1624 | pointer-events: none; 1625 | } 1626 | 1627 | .table { 1628 | width: 100%; 1629 | max-width: 100%; 1630 | border-collapse: collapse; 1631 | border-spacing: 0; 1632 | } 1633 | .table th, 1634 | .table td { 1635 | padding: 0.4em 0.6em; 1636 | border-bottom: 1px solid #dedede; 1637 | vertical-align: top; 1638 | } 1639 | .table th { 1640 | text-align: left; 1641 | } 1642 | .table thead th { 1643 | border-bottom-width: 2px; 1644 | vertical-align: bottom; 1645 | } 1646 | .table tbody tr:nth-child(2n+1) { 1647 | background-color: #efefef; 1648 | } 1649 | 1650 | .table-responsive { 1651 | display: block; 1652 | width: 100%; 1653 | overflow-x: auto; 1654 | -webkit-overflow-scrolling: touch; 1655 | -ms-overflow-style: -ms-autohiding-scrollbar; 1656 | } 1657 | 1658 | .nospace { 1659 | margin-bottom: 0 !important; 1660 | } 1661 | 1662 | @media (max-width: 24.99em) { 1663 | .nospace-xs { 1664 | margin-bottom: 0 !important; 1665 | } 1666 | } 1667 | @media (min-width: 25em) and (max-width: 42.49em) { 1668 | .nospace-sm { 1669 | margin-bottom: 0 !important; 1670 | } 1671 | } 1672 | @media (min-width: 42.5em) and (max-width: 59.99em) { 1673 | .nospace-md { 1674 | margin-bottom: 0 !important; 1675 | } 1676 | } 1677 | @media (min-width: 60em) and (max-width: 74.99em) { 1678 | .nospace-lg { 1679 | margin-bottom: 0 !important; 1680 | } 1681 | } 1682 | @media (min-width: 75em) { 1683 | .nospace-xl { 1684 | margin-bottom: 0 !important; 1685 | } 1686 | } 1687 | .nospace-xs-up { 1688 | margin-bottom: 0 !important; 1689 | } 1690 | 1691 | @media (min-width: 25em) { 1692 | .nospace-sm-up { 1693 | margin-bottom: 0 !important; 1694 | } 1695 | } 1696 | @media (min-width: 42.5em) { 1697 | .nospace-md-up { 1698 | margin-bottom: 0 !important; 1699 | } 1700 | } 1701 | @media (min-width: 60em) { 1702 | .nospace-lg-up { 1703 | margin-bottom: 0 !important; 1704 | } 1705 | } 1706 | .space { 1707 | margin-bottom: 1.875rem !important; 1708 | } 1709 | 1710 | @media (max-width: 24.99em) { 1711 | .space-xs { 1712 | margin-bottom: 1.875rem !important; 1713 | } 1714 | } 1715 | @media (min-width: 25em) and (max-width: 42.49em) { 1716 | .space-sm { 1717 | margin-bottom: 1.875rem !important; 1718 | } 1719 | } 1720 | @media (min-width: 42.5em) and (max-width: 59.99em) { 1721 | .space-md { 1722 | margin-bottom: 1.875rem !important; 1723 | } 1724 | } 1725 | @media (min-width: 60em) and (max-width: 74.99em) { 1726 | .space-lg { 1727 | margin-bottom: 1.875rem !important; 1728 | } 1729 | } 1730 | @media (min-width: 75em) { 1731 | .space-xl { 1732 | margin-bottom: 1.875rem !important; 1733 | } 1734 | } 1735 | .space-xs-up { 1736 | margin-bottom: 1.875rem !important; 1737 | } 1738 | 1739 | @media (min-width: 25em) { 1740 | .space-sm-up { 1741 | margin-bottom: 1.875rem !important; 1742 | } 1743 | } 1744 | @media (min-width: 42.5em) { 1745 | .space-md-up { 1746 | margin-bottom: 1.875rem !important; 1747 | } 1748 | } 1749 | @media (min-width: 60em) { 1750 | .space-lg-up { 1751 | margin-bottom: 1.875rem !important; 1752 | } 1753 | } 1754 | .block-center { 1755 | display: block; 1756 | margin-left: auto; 1757 | margin-right: auto; 1758 | } 1759 | 1760 | .pull-left { 1761 | float: left !important; 1762 | } 1763 | 1764 | .pull-right { 1765 | float: right !important; 1766 | } 1767 | 1768 | .clearfix::after { 1769 | content: ""; 1770 | display: block; 1771 | clear: both; 1772 | } 1773 | 1774 | .small { 1775 | font-size: 0.8rem !important; 1776 | } 1777 | 1778 | .text-left { 1779 | text-align: left !important; 1780 | } 1781 | 1782 | .text-center { 1783 | text-align: center !important; 1784 | } 1785 | 1786 | .text-right { 1787 | text-align: right !important; 1788 | } 1789 | 1790 | .text-hide { 1791 | text-indent: 110%; 1792 | white-space: nowrap; 1793 | overflow: hidden; 1794 | color: transparent; 1795 | text-shadow: none; 1796 | } 1797 | 1798 | .text-truncate { 1799 | text-overflow: ellipsis; 1800 | white-space: nowrap; 1801 | overflow: hidden; 1802 | } 1803 | 1804 | .text-hyphenate { 1805 | overflow-wrap: break-word; 1806 | word-wrap: break-word; 1807 | -webkit-hyphens: auto; 1808 | -ms-hyphens: auto; 1809 | hyphens: auto; 1810 | } 1811 | 1812 | .invisible { 1813 | visibility: hidden !important; 1814 | } 1815 | 1816 | .hidden { 1817 | display: none !important; 1818 | } 1819 | 1820 | @media print { 1821 | .hidden-print { 1822 | display: none !important; 1823 | } 1824 | } 1825 | .visible-xs { 1826 | display: none !important; 1827 | } 1828 | 1829 | .visible-sm { 1830 | display: none !important; 1831 | } 1832 | 1833 | .visible-sm-up { 1834 | display: none !important; 1835 | } 1836 | 1837 | .visible-md { 1838 | display: none !important; 1839 | } 1840 | 1841 | .visible-md-up { 1842 | display: none !important; 1843 | } 1844 | 1845 | .visible-lg { 1846 | display: none !important; 1847 | } 1848 | 1849 | .visible-lg-up { 1850 | display: none !important; 1851 | } 1852 | 1853 | .visible-xl { 1854 | display: none !important; 1855 | } 1856 | 1857 | @media (max-width: 24.99em) { 1858 | .hidden-xs { 1859 | display: none !important; 1860 | } 1861 | .visible-xs { 1862 | display: block !important; 1863 | } 1864 | } 1865 | @media (min-width: 25em) and (max-width: 42.49em) { 1866 | .hidden-sm { 1867 | display: none !important; 1868 | } 1869 | .visible-sm { 1870 | display: block !important; 1871 | } 1872 | } 1873 | @media (min-width: 42.5em) and (max-width: 59.99em) { 1874 | .hidden-md { 1875 | display: none !important; 1876 | } 1877 | .visible-md { 1878 | display: block !important; 1879 | } 1880 | } 1881 | @media (min-width: 60em) and (max-width: 74.99em) { 1882 | .hidden-lg { 1883 | display: none !important; 1884 | } 1885 | .visible-lg { 1886 | display: block !important; 1887 | } 1888 | } 1889 | @media (min-width: 75em) { 1890 | .hidden-xl { 1891 | display: none !important; 1892 | } 1893 | .visible-xl { 1894 | display: block !important; 1895 | } 1896 | } 1897 | @media (min-width: 25em) { 1898 | .hidden-sm-up { 1899 | display: none !important; 1900 | } 1901 | .visible-sm-up { 1902 | display: block !important; 1903 | } 1904 | } 1905 | @media (min-width: 42.5em) { 1906 | .hidden-md-up { 1907 | display: none !important; 1908 | } 1909 | .visible-md-up { 1910 | display: block !important; 1911 | } 1912 | } 1913 | @media (min-width: 60em) { 1914 | .hidden-lg-up { 1915 | display: none !important; 1916 | } 1917 | .visible-lg-up { 1918 | display: block !important; 1919 | } 1920 | } 1921 | .sr-only { 1922 | position: absolute; 1923 | width: 1px; 1924 | height: 1px; 1925 | overflow: hidden; 1926 | clip: rect(0, 0, 0, 0); 1927 | white-space: nowrap; 1928 | } 1929 | 1930 | .sr-only-focusable:active, .sr-only-focusable:focus { 1931 | position: static; 1932 | width: auto; 1933 | height: auto; 1934 | overflow: visible; 1935 | clip: auto; 1936 | white-space: inherit; 1937 | } -------------------------------------------------------------------------------- /dist/css/baseguide.min.css: -------------------------------------------------------------------------------- 1 | /*! Baseguide v4.2.0 | MIT License | http://basegui.de *//*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}audio,canvas,iframe,img,svg,video{vertical-align:middle}canvas,img,video{max-width:100%;height:auto}audio{max-width:100%}iframe{border:0}button,input,optgroup,select,textarea{font:inherit;line-height:inherit}optgroup{font-weight:700}fieldset{min-width:0;padding:0;border:0}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}address{font-style:inherit}pre{overflow:auto}hr{border:0;border-top:1px solid;color:inherit;opacity:.2}:focus:not(:focus-visible){outline:0}body{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;background-color:#fff;color:#333}blockquote,fieldset,figure{margin:0}address,blockquote,dl,fieldset,figure,form,hr,legend,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem}address:last-child,blockquote:last-child,dl:last-child,fieldset:last-child,figure:last-child,form:last-child,hr:last-child,legend:last-child,ol:last-child,p:last-child,pre:last-child,table:last-child,ul:last-child{margin-bottom:0}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:.8em;margin-bottom:.4em;font-family:inherit;font-weight:700;line-height:1.2;color:inherit}.h1:first-child,.h2:first-child,.h3:first-child,.h4:first-child,.h5:first-child,.h6:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin-top:0}.h1:last-child,.h2:last-child,.h3:last-child,.h4:last-child,.h5:last-child,.h6:last-child,h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}.h6,h6{font-size:1rem}.h5,h5{font-size:1.25rem}.h4,h4{font-size:1.5625rem}.h3,h3{font-size:1.953125rem}.h2,h2{font-size:2.44140625rem}.h1,h1{font-size:3.0517578125rem}a{color:#0283f1;text-decoration:none}a:focus,a:hover{color:#0283f1;text-decoration:underline}@media print{*,::after,::before{color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none;display:flex;flex-wrap:wrap;margin-left:-1rem}.list-inline>li{margin-left:1rem}.media{display:flex;align-items:flex-start}.media-body{flex:0 1 auto}.media-left,.media-right{flex:0 0 auto}.media-left{padding-right:1rem}.media-right{order:1;padding-left:1rem}.media-middle{align-self:center}.media-bottom{align-self:flex-end}.embed-responsive{position:relative;overflow:hidden}.embed-responsive::before{content:"";display:block;padding-bottom:56.25%}.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;width:100%;height:100%}.container{padding-left:.9375rem;padding-right:.9375rem;margin-left:auto;margin-right:auto;width:100%;max-width:73.125rem}.row{margin-left:-.9375rem;margin-right:-.9375rem;display:flex;flex-wrap:wrap}.col{padding-left:.9375rem;padding-right:.9375rem;width:100%;position:relative}.col-xs-pull-0{right:auto}.col-xs-push-0{left:auto}.col-xs-offset-0{margin-left:0}.col-xs-1{width:8.3333333333%}.col-xs-pull-1{right:8.3333333333%}.col-xs-push-1{left:8.3333333333%}.col-xs-offset-1{margin-left:8.3333333333%}.col-xs-2{width:16.6666666667%}.col-xs-pull-2{right:16.6666666667%}.col-xs-push-2{left:16.6666666667%}.col-xs-offset-2{margin-left:16.6666666667%}.col-xs-3{width:25%}.col-xs-pull-3{right:25%}.col-xs-push-3{left:25%}.col-xs-offset-3{margin-left:25%}.col-xs-4{width:33.3333333333%}.col-xs-pull-4{right:33.3333333333%}.col-xs-push-4{left:33.3333333333%}.col-xs-offset-4{margin-left:33.3333333333%}.col-xs-5{width:41.6666666667%}.col-xs-pull-5{right:41.6666666667%}.col-xs-push-5{left:41.6666666667%}.col-xs-offset-5{margin-left:41.6666666667%}.col-xs-6{width:50%}.col-xs-pull-6{right:50%}.col-xs-push-6{left:50%}.col-xs-offset-6{margin-left:50%}.col-xs-7{width:58.3333333333%}.col-xs-pull-7{right:58.3333333333%}.col-xs-push-7{left:58.3333333333%}.col-xs-offset-7{margin-left:58.3333333333%}.col-xs-8{width:66.6666666667%}.col-xs-pull-8{right:66.6666666667%}.col-xs-push-8{left:66.6666666667%}.col-xs-offset-8{margin-left:66.6666666667%}.col-xs-9{width:75%}.col-xs-pull-9{right:75%}.col-xs-push-9{left:75%}.col-xs-offset-9{margin-left:75%}.col-xs-10{width:83.3333333333%}.col-xs-pull-10{right:83.3333333333%}.col-xs-push-10{left:83.3333333333%}.col-xs-offset-10{margin-left:83.3333333333%}.col-xs-11{width:91.6666666667%}.col-xs-pull-11{right:91.6666666667%}.col-xs-push-11{left:91.6666666667%}.col-xs-offset-11{margin-left:91.6666666667%}.col-xs-12{width:100%}.col-xs-pull-12{right:100%}.col-xs-push-12{left:100%}@media (min-width:25em){.col-sm-pull-0{right:auto}.col-sm-push-0{left:auto}.col-sm-offset-0{margin-left:0}.col-sm-1{width:8.3333333333%}.col-sm-pull-1{right:8.3333333333%}.col-sm-push-1{left:8.3333333333%}.col-sm-offset-1{margin-left:8.3333333333%}.col-sm-2{width:16.6666666667%}.col-sm-pull-2{right:16.6666666667%}.col-sm-push-2{left:16.6666666667%}.col-sm-offset-2{margin-left:16.6666666667%}.col-sm-3{width:25%}.col-sm-pull-3{right:25%}.col-sm-push-3{left:25%}.col-sm-offset-3{margin-left:25%}.col-sm-4{width:33.3333333333%}.col-sm-pull-4{right:33.3333333333%}.col-sm-push-4{left:33.3333333333%}.col-sm-offset-4{margin-left:33.3333333333%}.col-sm-5{width:41.6666666667%}.col-sm-pull-5{right:41.6666666667%}.col-sm-push-5{left:41.6666666667%}.col-sm-offset-5{margin-left:41.6666666667%}.col-sm-6{width:50%}.col-sm-pull-6{right:50%}.col-sm-push-6{left:50%}.col-sm-offset-6{margin-left:50%}.col-sm-7{width:58.3333333333%}.col-sm-pull-7{right:58.3333333333%}.col-sm-push-7{left:58.3333333333%}.col-sm-offset-7{margin-left:58.3333333333%}.col-sm-8{width:66.6666666667%}.col-sm-pull-8{right:66.6666666667%}.col-sm-push-8{left:66.6666666667%}.col-sm-offset-8{margin-left:66.6666666667%}.col-sm-9{width:75%}.col-sm-pull-9{right:75%}.col-sm-push-9{left:75%}.col-sm-offset-9{margin-left:75%}.col-sm-10{width:83.3333333333%}.col-sm-pull-10{right:83.3333333333%}.col-sm-push-10{left:83.3333333333%}.col-sm-offset-10{margin-left:83.3333333333%}.col-sm-11{width:91.6666666667%}.col-sm-pull-11{right:91.6666666667%}.col-sm-push-11{left:91.6666666667%}.col-sm-offset-11{margin-left:91.6666666667%}.col-sm-12{width:100%}.col-sm-pull-12{right:100%}.col-sm-push-12{left:100%}}@media (min-width:42.5em){.col-md-pull-0{right:auto}.col-md-push-0{left:auto}.col-md-offset-0{margin-left:0}.col-md-1{width:8.3333333333%}.col-md-pull-1{right:8.3333333333%}.col-md-push-1{left:8.3333333333%}.col-md-offset-1{margin-left:8.3333333333%}.col-md-2{width:16.6666666667%}.col-md-pull-2{right:16.6666666667%}.col-md-push-2{left:16.6666666667%}.col-md-offset-2{margin-left:16.6666666667%}.col-md-3{width:25%}.col-md-pull-3{right:25%}.col-md-push-3{left:25%}.col-md-offset-3{margin-left:25%}.col-md-4{width:33.3333333333%}.col-md-pull-4{right:33.3333333333%}.col-md-push-4{left:33.3333333333%}.col-md-offset-4{margin-left:33.3333333333%}.col-md-5{width:41.6666666667%}.col-md-pull-5{right:41.6666666667%}.col-md-push-5{left:41.6666666667%}.col-md-offset-5{margin-left:41.6666666667%}.col-md-6{width:50%}.col-md-pull-6{right:50%}.col-md-push-6{left:50%}.col-md-offset-6{margin-left:50%}.col-md-7{width:58.3333333333%}.col-md-pull-7{right:58.3333333333%}.col-md-push-7{left:58.3333333333%}.col-md-offset-7{margin-left:58.3333333333%}.col-md-8{width:66.6666666667%}.col-md-pull-8{right:66.6666666667%}.col-md-push-8{left:66.6666666667%}.col-md-offset-8{margin-left:66.6666666667%}.col-md-9{width:75%}.col-md-pull-9{right:75%}.col-md-push-9{left:75%}.col-md-offset-9{margin-left:75%}.col-md-10{width:83.3333333333%}.col-md-pull-10{right:83.3333333333%}.col-md-push-10{left:83.3333333333%}.col-md-offset-10{margin-left:83.3333333333%}.col-md-11{width:91.6666666667%}.col-md-pull-11{right:91.6666666667%}.col-md-push-11{left:91.6666666667%}.col-md-offset-11{margin-left:91.6666666667%}.col-md-12{width:100%}.col-md-pull-12{right:100%}.col-md-push-12{left:100%}}@media (min-width:60em){.col-lg-pull-0{right:auto}.col-lg-push-0{left:auto}.col-lg-offset-0{margin-left:0}.col-lg-1{width:8.3333333333%}.col-lg-pull-1{right:8.3333333333%}.col-lg-push-1{left:8.3333333333%}.col-lg-offset-1{margin-left:8.3333333333%}.col-lg-2{width:16.6666666667%}.col-lg-pull-2{right:16.6666666667%}.col-lg-push-2{left:16.6666666667%}.col-lg-offset-2{margin-left:16.6666666667%}.col-lg-3{width:25%}.col-lg-pull-3{right:25%}.col-lg-push-3{left:25%}.col-lg-offset-3{margin-left:25%}.col-lg-4{width:33.3333333333%}.col-lg-pull-4{right:33.3333333333%}.col-lg-push-4{left:33.3333333333%}.col-lg-offset-4{margin-left:33.3333333333%}.col-lg-5{width:41.6666666667%}.col-lg-pull-5{right:41.6666666667%}.col-lg-push-5{left:41.6666666667%}.col-lg-offset-5{margin-left:41.6666666667%}.col-lg-6{width:50%}.col-lg-pull-6{right:50%}.col-lg-push-6{left:50%}.col-lg-offset-6{margin-left:50%}.col-lg-7{width:58.3333333333%}.col-lg-pull-7{right:58.3333333333%}.col-lg-push-7{left:58.3333333333%}.col-lg-offset-7{margin-left:58.3333333333%}.col-lg-8{width:66.6666666667%}.col-lg-pull-8{right:66.6666666667%}.col-lg-push-8{left:66.6666666667%}.col-lg-offset-8{margin-left:66.6666666667%}.col-lg-9{width:75%}.col-lg-pull-9{right:75%}.col-lg-push-9{left:75%}.col-lg-offset-9{margin-left:75%}.col-lg-10{width:83.3333333333%}.col-lg-pull-10{right:83.3333333333%}.col-lg-push-10{left:83.3333333333%}.col-lg-offset-10{margin-left:83.3333333333%}.col-lg-11{width:91.6666666667%}.col-lg-pull-11{right:91.6666666667%}.col-lg-push-11{left:91.6666666667%}.col-lg-offset-11{margin-left:91.6666666667%}.col-lg-12{width:100%}.col-lg-pull-12{right:100%}.col-lg-push-12{left:100%}}@media (min-width:75em){.col-xl-pull-0{right:auto}.col-xl-push-0{left:auto}.col-xl-offset-0{margin-left:0}.col-xl-1{width:8.3333333333%}.col-xl-pull-1{right:8.3333333333%}.col-xl-push-1{left:8.3333333333%}.col-xl-offset-1{margin-left:8.3333333333%}.col-xl-2{width:16.6666666667%}.col-xl-pull-2{right:16.6666666667%}.col-xl-push-2{left:16.6666666667%}.col-xl-offset-2{margin-left:16.6666666667%}.col-xl-3{width:25%}.col-xl-pull-3{right:25%}.col-xl-push-3{left:25%}.col-xl-offset-3{margin-left:25%}.col-xl-4{width:33.3333333333%}.col-xl-pull-4{right:33.3333333333%}.col-xl-push-4{left:33.3333333333%}.col-xl-offset-4{margin-left:33.3333333333%}.col-xl-5{width:41.6666666667%}.col-xl-pull-5{right:41.6666666667%}.col-xl-push-5{left:41.6666666667%}.col-xl-offset-5{margin-left:41.6666666667%}.col-xl-6{width:50%}.col-xl-pull-6{right:50%}.col-xl-push-6{left:50%}.col-xl-offset-6{margin-left:50%}.col-xl-7{width:58.3333333333%}.col-xl-pull-7{right:58.3333333333%}.col-xl-push-7{left:58.3333333333%}.col-xl-offset-7{margin-left:58.3333333333%}.col-xl-8{width:66.6666666667%}.col-xl-pull-8{right:66.6666666667%}.col-xl-push-8{left:66.6666666667%}.col-xl-offset-8{margin-left:66.6666666667%}.col-xl-9{width:75%}.col-xl-pull-9{right:75%}.col-xl-push-9{left:75%}.col-xl-offset-9{margin-left:75%}.col-xl-10{width:83.3333333333%}.col-xl-pull-10{right:83.3333333333%}.col-xl-push-10{left:83.3333333333%}.col-xl-offset-10{margin-left:83.3333333333%}.col-xl-11{width:91.6666666667%}.col-xl-pull-11{right:91.6666666667%}.col-xl-push-11{left:91.6666666667%}.col-xl-offset-11{margin-left:91.6666666667%}.col-xl-12{width:100%}.col-xl-pull-12{right:100%}.col-xl-push-12{left:100%}}label{display:inline-block;margin-bottom:.3rem}.label-inline{margin-top:1px;padding-top:.375em}.form-group{margin-bottom:1rem}[type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],select,textarea{display:block;width:100%;height:2.375em;border:1px solid #b6b6b6;border-radius:.125em;padding:.375em .75em;background-clip:padding-box;background-color:#fff;color:#333;transition:border-color .15s ease}[type=email]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=url]:focus,select:focus,textarea:focus{border-color:#838383;outline:0}[type=email]:disabled,[type=number]:disabled,[type=password]:disabled,[type=search]:disabled,[type=tel]:disabled,[type=text]:disabled,[type=url]:disabled,select:disabled,textarea:disabled{border-color:#ccc;background-color:#eee;color:#555;cursor:not-allowed}select{overflow-x:hidden}select:focus::-ms-value{background:0 0;color:currentColor}select[multiple],select[size]{height:auto}textarea{resize:vertical}textarea[rows]{height:auto}textarea:not([rows]){height:4.75em}input[type=checkbox]:not(:only-child),input[type=radio]:not(:only-child){position:absolute;margin-top:.35em}input[type=checkbox]~label,input[type=radio]~label{margin-bottom:0;padding-left:20px;font-weight:inherit}input[type=checkbox]:disabled~label,input[type=radio]:disabled~label{color:#555;cursor:not-allowed}input[type=file]{display:block;max-width:100%}::-moz-placeholder{color:#b3b3b3;opacity:1}:-ms-input-placeholder{color:#b3b3b3;opacity:1}::placeholder{color:#b3b3b3;opacity:1}@supports ((-webkit-appearance:none) or (-moz-appearance:none) or (appearance:none)){.select select:not([multiple]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:2em;background-repeat:no-repeat;background-position:right center;background-position:right .75em center;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' width='12' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='m1.41 0 4.59 4.58 4.59-4.58 1.41 1.41l-6 6-6-6z'/%3E%3C/svg%3E")}}.checkbox input[type=checkbox]:not(:only-child),.radio input[type=radio]:not(:only-child){opacity:0}.checkbox input[type=checkbox]~label,.radio input[type=radio]~label{position:relative;padding-left:1.4em;line-height:1.5}.checkbox input[type=checkbox]~label::after,.checkbox input[type=checkbox]~label::before,.radio input[type=radio]~label::after,.radio input[type=radio]~label::before{content:"";position:absolute;top:.25em;left:0;width:1em;height:1em}.checkbox input[type=checkbox]~label::before,.radio input[type=radio]~label::before{border:1px solid #b6b6b6;background-color:#fff}.checkbox input[type=checkbox]~label::after,.radio input[type=radio]~label::after{background-repeat:no-repeat;background-position:center center}.checkbox input[type=checkbox]:focus~label::before,.checkbox input[type=checkbox]:hover:not(:disabled)~label:hover::before,.radio input[type=radio]:focus~label::before,.radio input[type=radio]:hover:not(:disabled)~label:hover::before{border-color:#838383}.checkbox input[type=checkbox]:active~label::before,.radio input[type=radio]:active~label::before{background-color:#e6e6e6}.checkbox input[type=checkbox]:disabled~label::before,.radio input[type=radio]:disabled~label::before{border-color:#ccc;background-color:#eee}.radio input[type=radio]~label::before{border-radius:50%}.radio input[type=radio]:checked~label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23333' d='M4 1C2.3 1 1 2.3 1 4s1.3 3 3 3 3-1.3 3-3S5.7 1 4 1z'/%3E%3C/svg%3E")}.checkbox input[type=checkbox]~label::before{border-radius:.125em}.checkbox input[type=checkbox]:checked~label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23333' d='M6.4 1L5.7 1.7 2.9 4.5 2.1 3.7 1.4 3 0 4.4l0.7 0.7 1.5 1.5 0.7 0.7 0.7-0.7 3.5-3.5 0.7-0.7L6.4 1 6.4 1z'/%3E%3C/svg%3E")}.btn{display:inline-block;vertical-align:middle;padding:.375em 1em;transition:background-color .15s ease,color .15s ease;text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;cursor:pointer;border:1px solid transparent;border-radius:.125em;background-color:#0275d8;color:#fff}.btn:focus,.btn:hover{outline:0;text-decoration:none;border-color:transparent;background-color:#025aa5;color:#fff}.btn:active{background-color:#025aa5;color:#fff}.btn.disabled,.btn:disabled{opacity:.65;cursor:default;pointer-events:none}.table{width:100%;max-width:100%;border-collapse:collapse;border-spacing:0}.table td,.table th{padding:.4em .6em;border-bottom:1px solid #dedede;vertical-align:top}.table th{text-align:left}.table thead th{border-bottom-width:2px;vertical-align:bottom}.table tbody tr:nth-child(2n+1){background-color:#efefef}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.nospace{margin-bottom:0!important}@media (max-width:24.99em){.nospace-xs{margin-bottom:0!important}}@media (min-width:25em) and (max-width:42.49em){.nospace-sm{margin-bottom:0!important}}@media (min-width:42.5em) and (max-width:59.99em){.nospace-md{margin-bottom:0!important}}@media (min-width:60em) and (max-width:74.99em){.nospace-lg{margin-bottom:0!important}}@media (min-width:75em){.nospace-xl{margin-bottom:0!important}}.nospace-xs-up{margin-bottom:0!important}@media (min-width:25em){.nospace-sm-up{margin-bottom:0!important}}@media (min-width:42.5em){.nospace-md-up{margin-bottom:0!important}}@media (min-width:60em){.nospace-lg-up{margin-bottom:0!important}}.space{margin-bottom:1.875rem!important}@media (max-width:24.99em){.space-xs{margin-bottom:1.875rem!important}}@media (min-width:25em) and (max-width:42.49em){.space-sm{margin-bottom:1.875rem!important}}@media (min-width:42.5em) and (max-width:59.99em){.space-md{margin-bottom:1.875rem!important}}@media (min-width:60em) and (max-width:74.99em){.space-lg{margin-bottom:1.875rem!important}}@media (min-width:75em){.space-xl{margin-bottom:1.875rem!important}}.space-xs-up{margin-bottom:1.875rem!important}@media (min-width:25em){.space-sm-up{margin-bottom:1.875rem!important}}@media (min-width:42.5em){.space-md-up{margin-bottom:1.875rem!important}}@media (min-width:60em){.space-lg-up{margin-bottom:1.875rem!important}}.block-center{display:block;margin-left:auto;margin-right:auto}.pull-left{float:left!important}.pull-right{float:right!important}.clearfix::after{content:"";display:block;clear:both}.small{font-size:.8rem!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-hide{text-indent:110%;white-space:nowrap;overflow:hidden;color:transparent;text-shadow:none}.text-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text-hyphenate{overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.invisible{visibility:hidden!important}.hidden{display:none!important}@media print{.hidden-print{display:none!important}}.visible-xs{display:none!important}.visible-sm{display:none!important}.visible-sm-up{display:none!important}.visible-md{display:none!important}.visible-md-up{display:none!important}.visible-lg{display:none!important}.visible-lg-up{display:none!important}.visible-xl{display:none!important}@media (max-width:24.99em){.hidden-xs{display:none!important}.visible-xs{display:block!important}}@media (min-width:25em) and (max-width:42.49em){.hidden-sm{display:none!important}.visible-sm{display:block!important}}@media (min-width:42.5em) and (max-width:59.99em){.hidden-md{display:none!important}.visible-md{display:block!important}}@media (min-width:60em) and (max-width:74.99em){.hidden-lg{display:none!important}.visible-lg{display:block!important}}@media (min-width:75em){.hidden-xl{display:none!important}.visible-xl{display:block!important}}@media (min-width:25em){.hidden-sm-up{display:none!important}.visible-sm-up{display:block!important}}@media (min-width:42.5em){.hidden-md-up{display:none!important}.visible-md-up{display:block!important}}@media (min-width:60em){.hidden-lg-up{display:none!important}.visible-lg-up{display:block!important}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:inherit} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const $ = require('gulp-load-plugins')(); 3 | const sass = require('gulp-sass')(require('sass')); 4 | const log = require('fancy-log'); 5 | const autoprefixer = require('autoprefixer'); 6 | const browserSync = require('browser-sync').create(); 7 | const config = { 8 | 'src': '', 9 | 'dest': 'dist/', 10 | 'minify': true, 11 | 'sourcemaps': false 12 | }; 13 | 14 | 15 | // HTML 16 | function html() { 17 | return gulp.src(config.src + '*.html') 18 | .pipe(browserSync.stream()); 19 | } 20 | 21 | // Compile and autoprefix stylesheets 22 | function styles() { 23 | return gulp.src(config.src + 'scss/*.scss') 24 | .pipe($.if(config.sourcemaps, $.sourcemaps.init())) 25 | .pipe(sass({ 26 | precision: 8, 27 | outputStyle: 'expanded' 28 | }).on('error', sass.logError)) 29 | .pipe($.postcss([ 30 | autoprefixer() 31 | ])) 32 | .pipe($.if(config.sourcemaps, $.sourcemaps.write())) 33 | .pipe(gulp.dest(config.dest + 'css')) 34 | .pipe(browserSync.stream()) 35 | .pipe($.if(config.minify, $.cleanCss())) 36 | .pipe($.if(config.sourcemaps, $.sourcemaps.write())) 37 | .pipe($.if(config.minify, $.rename({suffix: '.min'}))) 38 | .pipe($.if(config.minify, gulp.dest(config.dest + 'css'))) 39 | .pipe(browserSync.stream()); 40 | } 41 | 42 | // Lint stylesheets 43 | function stylelint() { 44 | return gulp.src(config.src + 'scss/**/*.scss') 45 | .pipe($.postcss([ 46 | require('stylelint')({fix: true}) 47 | ], { 48 | syntax: require('postcss-scss') 49 | })) 50 | .pipe(gulp.dest(config.src + 'scss')); 51 | } 52 | 53 | // Compile javascript 54 | function scripts() { 55 | return gulp.src(config.src + 'js/*.js') 56 | .pipe($.include().on('error', function(error) { 57 | log.error(error.message); 58 | this.emit('end'); 59 | })) 60 | .pipe($.if(config.sourcemaps, $.sourcemaps.init())) 61 | .pipe($.babel()) 62 | .pipe($.if(config.sourcemaps, $.sourcemaps.write())) 63 | .pipe(gulp.dest(config.dest + 'js')) 64 | .pipe(browserSync.stream()) 65 | .pipe($.if(config.minify, $.uglify().on('error', function(error) { 66 | log.error(error.message); 67 | this.emit('end'); 68 | }))) 69 | .pipe($.if(config.sourcemaps, $.sourcemaps.write())) 70 | .pipe($.if(config.minify, $.rename({suffix: '.min'}))) 71 | .pipe($.if(config.minify, gulp.dest(config.dest + 'js'))) 72 | .pipe(browserSync.stream()); 73 | } 74 | 75 | // Lint javascript 76 | function eslint() { 77 | return gulp.src(config.src + 'js/**/*.js') 78 | .pipe($.eslint({fix: true})) 79 | .pipe($.eslint.format()) 80 | .pipe(gulp.dest(config.src + 'js')); 81 | } 82 | 83 | // Optimize images 84 | function images() { 85 | return gulp.src(config.src + 'img/**/*.{gif,jpg,png,svg}') 86 | .pipe($.cache($.imagemin())) 87 | .pipe(gulp.dest(config.dest + 'img')) 88 | .pipe(browserSync.stream()); 89 | } 90 | 91 | // Serve compiled files 92 | function serve(done) { 93 | browserSync.init({ 94 | server: true, 95 | notify: false, 96 | snippetOptions: { 97 | rule: { 98 | match: /<\/body>/i 99 | } 100 | } 101 | /* 102 | proxy: 'example.com', 103 | files: config.dest, 104 | serveStatic: [{ 105 | route: '', // remote path 106 | dir: config.dest // local path 107 | }], 108 | */ 109 | }); 110 | done(); 111 | } 112 | 113 | // Watch files for changes 114 | function watch(done) { 115 | gulp.watch(config.src + '*.html', html); 116 | gulp.watch(config.src + 'scss/**/*.scss', styles); 117 | gulp.watch(config.src + 'js/**/*.js', scripts); 118 | gulp.watch(config.src + 'img/**/*.{gif,jpg,png,svg}', images); 119 | done(); 120 | } 121 | 122 | 123 | const build = gulp.parallel(html, styles, scripts, images); 124 | 125 | exports.build = build; 126 | exports.watch = watch; 127 | exports.lint = gulp.parallel(stylelint, eslint); 128 | exports.default = gulp.series(build, gulp.parallel(serve, watch)); 129 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Baseguide

17 |

Check the Readme on GitHub or visit the website to see examples.

18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "baseguide", 3 | "description": "Lightweight and robust CSS framework for prototyping and production code.", 4 | "version": "4.2.0", 5 | "keywords": [ 6 | "css", 7 | "sass", 8 | "responsive", 9 | "front-end", 10 | "framework" 11 | ], 12 | "scripts": { 13 | "dev": "gulp", 14 | "build": "gulp build", 15 | "watch": "gulp watch", 16 | "lint": "gulp lint" 17 | }, 18 | "homepage": "http://basegui.de", 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/slavanga/baseguide.git" 22 | }, 23 | "license": "MIT", 24 | "devDependencies": { 25 | "@babel/core": "^7.13.10", 26 | "@babel/preset-env": "^7.13.12", 27 | "autoprefixer": "^10.2.5", 28 | "browser-sync": "^2.26.14", 29 | "fancy-log": "^1.3.3", 30 | "gulp": "^4.0.2", 31 | "gulp-babel": "^8.0.0", 32 | "gulp-cache": "^1.1.3", 33 | "gulp-clean-css": "^4.3.0", 34 | "gulp-eslint": "^6.0.0", 35 | "gulp-if": "^3.0.0", 36 | "gulp-imagemin": "^7.1.0", 37 | "gulp-include": "^2.4.1", 38 | "gulp-load-plugins": "^2.0.6", 39 | "gulp-postcss": "^9.0.1", 40 | "gulp-rename": "^2.0.0", 41 | "gulp-sass": "^5.1.0", 42 | "gulp-sourcemaps": "^3.0.0", 43 | "gulp-uglify": "^3.0.2", 44 | "postcss": "^8.4.14", 45 | "postcss-scss": "^4.0.4", 46 | "sass": "^1.53.0", 47 | "stylelint": "^13.12.0", 48 | "stylelint-config-standard": "^21.0.0" 49 | }, 50 | "browserslist": [ 51 | "last 2 versions", 52 | "not dead", 53 | "firefox esr" 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /scss/baseguide.scss: -------------------------------------------------------------------------------- 1 | /*! Baseguide v4.2.0 | MIT License | http://basegui.de */ 2 | 3 | // Settings 4 | @import 'baseguide/00-settings/settings'; 5 | 6 | // Tools 7 | @import 'baseguide/01-tools/mq'; 8 | @import 'baseguide/01-tools/functions'; 9 | @import 'baseguide/01-tools/mixins'; 10 | @import 'baseguide/01-tools/animation'; 11 | @import 'baseguide/01-tools/grid/gutter'; 12 | @import 'baseguide/01-tools/grid/container'; 13 | @import 'baseguide/01-tools/grid/row'; 14 | @import 'baseguide/01-tools/grid/column'; 15 | 16 | // Base 17 | @import 'baseguide/02-base/normalize'; 18 | @import 'baseguide/02-base/base'; 19 | @import 'baseguide/02-base/global'; 20 | @import 'baseguide/02-base/spacing'; 21 | @import 'baseguide/02-base/headings'; 22 | @import 'baseguide/02-base/link'; 23 | @import 'baseguide/02-base/print'; 24 | 25 | // Objects 26 | @import 'baseguide/03-objects/list'; 27 | @import 'baseguide/03-objects/media'; 28 | @import 'baseguide/03-objects/embed'; 29 | @import 'baseguide/03-objects/grid'; 30 | 31 | // Components 32 | @import 'baseguide/04-components/form'; 33 | @import 'baseguide/04-components/form-custom'; 34 | @import 'baseguide/04-components/button'; 35 | @import 'baseguide/04-components/table'; 36 | 37 | // Utilities 38 | @import 'baseguide/05-utilities/space'; 39 | @import 'baseguide/05-utilities/position'; 40 | @import 'baseguide/05-utilities/clearfix'; 41 | @import 'baseguide/05-utilities/text'; 42 | @import 'baseguide/05-utilities/visibility'; 43 | @import 'baseguide/05-utilities/screenreader'; 44 | -------------------------------------------------------------------------------- /scss/baseguide/00-settings/_settings.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | @use "sass:map"; 3 | 4 | // Global 5 | $font-antialiased: false !default; 6 | $font-size-base: 1rem !default; 7 | $font-family-base: 'Helvetica Neue', Helvetica, sans-serif !default; 8 | $font-weight-base: 400 !default; 9 | $line-height-base: 1.5 !default; 10 | $global-bg: #fff !default; 11 | $text-color: #333 !default; 12 | 13 | 14 | // Spacing 15 | $spacing-base: 1.5rem !default; 16 | $spacing-reset: true !default; 17 | $spacers: ( 18 | nospace: 0, 19 | space: 30px 20 | ) !default; 21 | 22 | 23 | // Headings 24 | $headings: ( 25 | 'h6, .h6', 'h5, .h5', 'h4, .h4', 26 | 'h3, .h3', 'h2, .h2', 'h1, .h1' 27 | ) !default; 28 | 29 | $headings-spacing: 0.4em !default; 30 | $headings-font-family: inherit !default; 31 | $headings-font-weight: 700 !default; 32 | $headings-line-height: 1.2 !default; 33 | $headings-color: inherit !default; 34 | 35 | $type-scale-base: $font-size-base !default; 36 | $type-scale: 1.25 !default; 37 | 38 | 39 | // Link 40 | $link-color: #0283f1 !default; 41 | $link-hover-color: $link-color !default; 42 | $link-decoration: none !default; 43 | $link-hover-decoration: underline !default; 44 | 45 | 46 | // Breakpoints 47 | $mq-breakpoints: ( 48 | xs: 0px, 49 | sm: 400px, 50 | md: 680px, 51 | lg: 960px, 52 | xl: 1200px 53 | ) !default; 54 | 55 | $fluid-breakpoints: ( 56 | min: map.get($mq-breakpoints, sm), 57 | max: map.get($mq-breakpoints, xl) 58 | ) !default; 59 | 60 | $mq-static-breakpoint: map.get($mq-breakpoints, xl) !default; 61 | 62 | 63 | // Grid 64 | $grid-columns: 12 !default; 65 | $grid-gutter: 30px !default; 66 | $grid-container: map.get($mq-breakpoints, xl) !default; 67 | $grid-container-gutter: $grid-gutter !default; 68 | 69 | $grid-pull-classes: true !default; 70 | $grid-push-classes: true !default; 71 | $grid-offset-classes: true !default; 72 | 73 | 74 | // Form 75 | $input-selector: ( 76 | '[type="email"]', 77 | '[type="number"]', 78 | '[type="password"]', 79 | '[type="search"]', 80 | '[type="tel"]', 81 | '[type="text"]', 82 | '[type="url"]', 83 | 'textarea', 84 | 'select' 85 | ) !default; 86 | 87 | $input-height: 2.375em !default; 88 | $input-padding-vertical: 0.375em !default; 89 | $input-padding-horizontal: 0.75em !default; 90 | $input-bg: #fff !default; 91 | $input-color: $text-color !default; 92 | $input-border-width: 1px !default; 93 | $input-border-color: #b6b6b6 !default; 94 | $input-focus-border-color: color.adjust($input-border-color, $lightness: -20%) !default; 95 | $input-border-radius: 0.125em !default; 96 | $input-transition: border-color 0.15s ease !default; 97 | $input-disabled-bg: #eee !default; 98 | $input-disabled-color: #555 !default; 99 | $input-disabled-border-color: #ccc !default; 100 | 101 | $checkbox-border-radius: $input-border-radius !default; 102 | 103 | $placeholder-color: color.adjust($input-color, $lightness: 50%) !default; 104 | 105 | 106 | // Icons 107 | $icon-color: #333 !default; 108 | 109 | $icon-radio: '' !default; 110 | $icon-checkbox: '' !default; 111 | $icon-select: '' !default; 112 | 113 | $icons: ( 114 | radio: $icon-radio, 115 | checkbox: $icon-checkbox, 116 | select: $icon-select 117 | ) !default; 118 | 119 | 120 | // Button 121 | $button-selector: '.btn' !default; 122 | $button-padding-vertical: 0.375em !default; 123 | $button-padding-horizontal: 1em !default; 124 | $button-bg: #0275d8 !default; 125 | $button-color: #fff !default; 126 | $button-border-width: 1px !default; 127 | $button-border-color: transparent !default; 128 | $button-border-radius: 0.125em !default; 129 | $button-hover-bg: color.adjust($button-bg, $lightness: -10%) !default; 130 | $button-hover-color: #fff !default; 131 | $button-hover-border-color: $button-border-color !default; 132 | $button-active-bg: $button-hover-bg !default; 133 | $button-active-color: $button-hover-color !default; 134 | $button-disabled-opacity: 0.65 !default; 135 | $button-transition: background-color 0.15s ease, color 0.15s ease !default; 136 | $button-cursor-pointer: true !default; 137 | 138 | 139 | // Table 140 | $table-selector: '.table' !default; 141 | $table-padding-vertical: 0.4em !default; 142 | $table-padding-horizontal: 0.6em !default; 143 | $table-border-color: #dedede !default; 144 | $table-stripe-bg: #efefef !default; 145 | -------------------------------------------------------------------------------- /scss/baseguide/01-tools/_animation.scss: -------------------------------------------------------------------------------- 1 | @mixin fade-in($duration: 0.15s) { 2 | visibility: visible; 3 | opacity: 1; 4 | transition: visibility 0s linear 0s, opacity $duration; 5 | } 6 | 7 | @mixin fade-out($duration: 0.15s) { 8 | visibility: hidden; 9 | opacity: 0; 10 | transition: visibility 0s linear $duration, opacity $duration; 11 | } 12 | -------------------------------------------------------------------------------- /scss/baseguide/01-tools/_functions.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "sass:math"; 3 | @use "sass:meta"; 4 | @use "sass:string"; 5 | 6 | @function pow($number, $exp) { 7 | $return: 1; 8 | 9 | @if $exp > 0 { 10 | // If the exponent is positive then multiply it 11 | @for $i from 1 through $exp { 12 | $return: $return * $number; 13 | } 14 | } 15 | @else if $exp < 0 { 16 | // If the number is 0 or negative then divide it 17 | @for $i from 1 through -$exp { 18 | $return: math.div($return, $number); 19 | } 20 | } 21 | 22 | @return $return; 23 | } 24 | 25 | @function modular-scale($exp, $size: $font-size-base, $type-scale: $type-scale) { 26 | @return pow($type-scale, $exp) * $size; 27 | } 28 | 29 | @function strip-unit($number) { 30 | @return math.div($number, $number * 0 + 1); 31 | } 32 | 33 | @function to-rem($value, $base: 16px) { 34 | @if (math.unit($value) == 'em') { 35 | $value: strip-unit($value) * 1rem; 36 | } 37 | 38 | @if (math.unit($value) != 'rem') { 39 | $value: math.div(strip-unit($value), strip-unit($base)) * 1rem; 40 | } 41 | 42 | @if (strip-unit($value) == 0) { 43 | $value: 0; 44 | } 45 | 46 | @return $value; 47 | } 48 | 49 | @function str-replace($string, $search, $replace: '') { 50 | $index: string.index($string, $search); 51 | 52 | @if $index { 53 | @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace); 54 | } 55 | 56 | @return $string; 57 | } 58 | 59 | // Usage example: 60 | // 61 | // .icon { 62 | // background-image: url(get-icon('radio', #fff)); 63 | // } 64 | @function get-icon($icon, $color: $icon-color) { 65 | $color: meta.inspect($color); 66 | 67 | @if (string.index($color, '#') != null) { 68 | @if map.has-key($icons, $icon) { 69 | $icon: 'data:image/svg+xml;charset=utf8,' + map.get($icons, $icon); 70 | $icon: str-replace($icon, meta.inspect($icon-color), $color); 71 | 72 | @each $char, $encoded in ( ('<', '%3C'), ('>', '%3E'), ('#', '%23'), ('"', "'") ) { 73 | $icon: str-replace($icon, $char, $encoded); 74 | } 75 | } 76 | @else { 77 | @error "Please make sure '#{$icon}' is defined in the $icons map."; 78 | } 79 | } 80 | @else { 81 | @error "Please make sure '#{$color}' is a HEX value."; 82 | } 83 | 84 | @return $icon; 85 | } 86 | -------------------------------------------------------------------------------- /scss/baseguide/01-tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "sass:map"; 3 | @use "sass:math"; 4 | @use "sass:meta"; 5 | 6 | // button 7 | @mixin button-unstyled { 8 | border: 0; 9 | padding: 0; 10 | background-color: transparent; 11 | color: inherit; 12 | } 13 | 14 | @mixin button-base( 15 | $padding-vertical: $button-padding-vertical, 16 | $padding-horizontal: $button-padding-horizontal, 17 | $transition: $button-transition, 18 | $cursor-pointer: $button-cursor-pointer 19 | ) { 20 | display: inline-block; 21 | vertical-align: middle; 22 | padding: $padding-vertical $padding-horizontal; 23 | transition: $transition; 24 | text-align: center; 25 | text-decoration: none; 26 | white-space: normal; 27 | user-select: none; 28 | touch-action: manipulation; 29 | 30 | @if ($cursor-pointer) { 31 | cursor: pointer; 32 | } 33 | } 34 | 35 | @mixin button-style( 36 | $bg: $button-bg, 37 | $color: $button-color, 38 | $hover-bg: $button-hover-bg, 39 | $hover-color: $button-hover-color, 40 | $hover-border-color: $button-hover-border-color, 41 | $active-bg: $button-active-bg, 42 | $active-color: $button-active-color, 43 | $border-width: $button-border-width, 44 | $border-color: $button-border-color, 45 | $border-radius: $button-border-radius 46 | ) { 47 | border: $border-width solid $border-color; 48 | border-radius: $border-radius; 49 | background-color: $bg; 50 | color: $color; 51 | 52 | &:hover, 53 | &:focus { 54 | outline: 0; 55 | text-decoration: none; 56 | border-color: $hover-border-color; 57 | background-color: $hover-bg; 58 | color: $hover-color; 59 | } 60 | 61 | &:active { 62 | background-color: $active-bg; 63 | color: $active-color; 64 | } 65 | } 66 | 67 | @mixin button-disabled($disabled-opacity: $button-disabled-opacity) { 68 | &.disabled, 69 | &:disabled { 70 | opacity: $disabled-opacity; 71 | cursor: default; 72 | pointer-events: none; 73 | } 74 | } 75 | 76 | @mixin button { 77 | @include button-base; 78 | @include button-style; 79 | @include button-disabled; 80 | } 81 | 82 | 83 | // list 84 | @mixin list-unstyled { 85 | padding-left: 0; 86 | list-style: none; 87 | } 88 | 89 | @mixin list-inline($spacing: 1rem, $center: false, $child-selector: 'li') { 90 | @include list-unstyled; 91 | 92 | display: flex; 93 | flex-wrap: wrap; 94 | margin-left: $spacing * -1; 95 | 96 | @if $center { 97 | justify-content: center; 98 | } 99 | 100 | > #{$child-selector} { 101 | margin-left: $spacing; 102 | } 103 | } 104 | 105 | 106 | // clearfix 107 | @mixin clearfix { 108 | &::after { 109 | content: ''; 110 | display: block; 111 | clear: both; 112 | } 113 | } 114 | 115 | 116 | // text 117 | @mixin text-hide { 118 | text-indent: 110%; 119 | white-space: nowrap; 120 | overflow: hidden; 121 | color: transparent; 122 | text-shadow: none; 123 | } 124 | 125 | @mixin text-truncate { 126 | text-overflow: ellipsis; 127 | white-space: nowrap; 128 | overflow: hidden; 129 | } 130 | 131 | @mixin text-hyphenate { 132 | overflow-wrap: break-word; 133 | word-wrap: break-word; 134 | hyphens: auto; 135 | } 136 | 137 | 138 | // visibility 139 | @mixin sr-only { 140 | position: absolute; 141 | width: 1px; 142 | height: 1px; 143 | overflow: hidden; 144 | clip: rect(0, 0, 0, 0); 145 | white-space: nowrap; 146 | } 147 | 148 | @mixin sr-only-focusable { 149 | &:active, 150 | &:focus { 151 | position: static; 152 | width: auto; 153 | height: auto; 154 | overflow: visible; 155 | clip: auto; 156 | white-space: inherit; 157 | } 158 | } 159 | 160 | 161 | // beautiful underline 162 | @mixin underline($color: currentColor, $distance: 0, $width: 100%, $height: 1px) { 163 | padding-bottom: $distance; 164 | background-image: linear-gradient($color, $color); 165 | background-size: $width $height; 166 | background-position: 0 100%; 167 | background-repeat: no-repeat; 168 | text-decoration: none; 169 | } 170 | 171 | 172 | // target HiDPI screens 173 | @mixin hidpi($ratio: 1.5) { 174 | @media (min-resolution: math.round($ratio * 96dpi)), (min-resolution: $ratio * 1dppx) { 175 | @content; 176 | } 177 | } 178 | 179 | 180 | // scale headings using modular scale 181 | @mixin scale-headings($scale: $type-scale-base, $headings: $headings) { 182 | @if (meta.type-of($scale) == 'map') { 183 | @each $breakpoint, $size in $scale { 184 | @include mq($breakpoint) { 185 | @include loop-headings($size); 186 | } 187 | } 188 | } 189 | @else { 190 | @include loop-headings($scale); 191 | } 192 | } 193 | 194 | 195 | // helper mixin for scale-headings 196 | @mixin loop-headings($size) { 197 | $max-scale: 0; 198 | 199 | @each $heading in $headings { 200 | #{$heading} { 201 | font-size: to-rem(modular-scale($max-scale, $size)); 202 | } 203 | 204 | $max-scale: $max-scale + 1; 205 | } 206 | } 207 | 208 | 209 | // triangle mixin adapted from bourbon 210 | @mixin triangle($direction, $width, $height, $color: currentColor) { 211 | border-style: solid; 212 | height: 0; 213 | width: 0; 214 | 215 | @if $direction == 'up' { 216 | border-color: transparent transparent $color; 217 | border-width: 0 ($width * 0.5) $height; 218 | } 219 | @else if $direction == 'up-right' { 220 | border-color: transparent $color transparent transparent; 221 | border-width: 0 $width $width 0; 222 | } 223 | @else if $direction == 'right' { 224 | border-color: transparent transparent transparent $color; 225 | border-width: ($height * 0.5) 0 ($height * 0.5) $width; 226 | } 227 | @else if $direction == 'down-right' { 228 | border-color: transparent transparent $color; 229 | border-width: 0 0 $width $width; 230 | } 231 | @else if $direction == 'down' { 232 | border-color: $color transparent transparent; 233 | border-width: $height ($width * 0.5) 0; 234 | } 235 | @else if $direction == 'down-left' { 236 | border-color: transparent transparent transparent $color; 237 | border-width: $width 0 0 $width; 238 | } 239 | @else if $direction == 'left' { 240 | border-color: transparent $color transparent transparent; 241 | border-width: ($height * 0.5) $width ($height * 0.5) 0; 242 | } 243 | @else if $direction == 'up-left' { 244 | border-color: $color transparent transparent; 245 | border-width: $width $width 0 0; 246 | } 247 | } 248 | 249 | 250 | // loop all breakpoints and output content 251 | @mixin loop-breakpoints($breakpoints: $mq-breakpoints, $inclusive: true, $mq: true) { 252 | $breakpoint-keys: map.keys($breakpoints); 253 | 254 | @for $i from 1 through list.length($breakpoint-keys) { 255 | $breakpoint: list.nth($breakpoint-keys, $i) !global; 256 | $is-first-breakpoint: $breakpoint == list.nth($breakpoint-keys, 1) !global; 257 | $is-last-breakpoint: $breakpoint == list.nth($breakpoint-keys, list.length($breakpoint-keys)) !global; 258 | 259 | @if $mq { 260 | @if $inclusive { 261 | // first breakpoint 262 | @if $is-first-breakpoint { 263 | @content; 264 | } 265 | // remaining breakpoints 266 | @else { 267 | @include mq($breakpoint, $breakpoints: $breakpoints) { 268 | @content; 269 | } 270 | } 271 | } 272 | @else { 273 | // first breakpoint 274 | @if $is-first-breakpoint { 275 | @if list.length($breakpoint-keys) > 1 { 276 | @include mq($until: list.nth($breakpoint-keys, $i + 1), $breakpoints: $breakpoints) { 277 | @content; 278 | } 279 | } 280 | @else { 281 | @content; 282 | } 283 | } 284 | // last breakpoint 285 | @else if $is-last-breakpoint { 286 | @include mq($breakpoint, $breakpoints: $breakpoints) { 287 | @content; 288 | } 289 | } 290 | // remaining breakpoints 291 | @else { 292 | @include mq($breakpoint, list.nth($breakpoint-keys, $i + 1), $breakpoints: $breakpoints) { 293 | @content; 294 | } 295 | } 296 | } 297 | } 298 | @else { 299 | @content; 300 | } 301 | } 302 | } 303 | 304 | 305 | // Usage example: 306 | // 307 | // body { 308 | // @include fluid-calc('font-size', (1rem, 1.25rem), (min: 400px, max: 960px)); 309 | // } 310 | @mixin fluid-calc($prop, $sizes, $breakpoints: $fluid-breakpoints) { 311 | @if ($prop and meta.type-of($sizes) == 'list') { 312 | $breakpoints: map.values($breakpoints); 313 | $min-breakpoint: list.nth($breakpoints, 1); 314 | $max-breakpoint: list.nth($breakpoints, list.length($breakpoints)); 315 | $min-size: list.nth($sizes, 1); 316 | $max-size: list.nth($sizes, list.length($sizes)); 317 | 318 | #{$prop}: $min-size; 319 | 320 | @include mq($min-breakpoint) { 321 | #{$prop}: calc(#{$min-size} + #{strip-unit($max-size - $min-size)} * (100vw - #{to-rem($min-breakpoint)}) / #{strip-unit(to-rem($max-breakpoint) - to-rem($min-breakpoint))}); 322 | } 323 | 324 | @include mq($max-breakpoint) { 325 | #{$prop}: $max-size; 326 | } 327 | } 328 | } 329 | -------------------------------------------------------------------------------- /scss/baseguide/01-tools/_mq.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "sass:map"; 3 | @use "sass:math"; 4 | @use "sass:meta"; 5 | @use "sass:string"; 6 | 7 | @charset "UTF-8"; // Fixes an issue where Ruby locale is not set properly 8 | // See https://github.com/sass-mq/sass-mq/pull/10 9 | 10 | /// Base font size on the `` element 11 | /// 12 | /// Do not override this value, or things will break 13 | /// 14 | /// @link https://github.com/sass-mq/sass-mq/issues/122 15 | /// @deprecated This setting will be removed in sass-mq v6.0.0 16 | /// @access private 17 | /// @type Number (unit) 18 | $mq-base-font-size: 16px !default; 19 | 20 | /// Responsive mode 21 | /// 22 | /// Set to `false` to enable support for browsers that do not support @media queries, 23 | /// (IE <= 8, Firefox <= 3, Opera <= 9) 24 | /// 25 | /// You could create a stylesheet served exclusively to older browsers, 26 | /// where @media queries are rasterized 27 | /// 28 | /// @example scss 29 | /// // old-ie.scss 30 | /// $mq-responsive: false; 31 | /// @import 'main'; // @media queries in this file will be rasterized up to $mq-static-breakpoint 32 | /// // larger breakpoints will be ignored 33 | /// 34 | /// @type Boolean 35 | /// @link https://github.com/sass-mq/sass-mq#responsive-mode-off Disabled responsive mode documentation 36 | $mq-responsive: true !default; 37 | 38 | /// Breakpoint list 39 | /// 40 | /// Name your breakpoints in a way that creates a ubiquitous language 41 | /// across team members. It will improve communication between 42 | /// stakeholders, designers, developers, and testers. 43 | /// 44 | /// @type Map 45 | /// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint Full documentation and examples 46 | $mq-breakpoints: ( 47 | mobile: 320px, 48 | tablet: 740px, 49 | desktop: 980px, 50 | wide: 1300px 51 | ) !default; 52 | 53 | /// Static breakpoint (for fixed-width layouts) 54 | /// 55 | /// Define the breakpoint from $mq-breakpoints that should 56 | /// be used as the target width for the fixed-width layout 57 | /// (i.e. when $mq-responsive is set to 'false') in a old-ie.scss 58 | /// 59 | /// @example scss 60 | /// // tablet-only.scss 61 | /// // 62 | /// // Ignore all styles above tablet breakpoint, 63 | /// // and fix the styles (such as the layout) at tablet width 64 | /// $mq-responsive: false; 65 | /// $mq-static-breakpoint: tablet; 66 | /// @import 'main'; // @media queries in this file will be rasterized up to tablet 67 | /// // larger breakpoints will be ignored 68 | /// 69 | /// @type String 70 | /// @link https://github.com/sass-mq/sass-mq#adding-custom-breakpoints Full documentation and examples 71 | $mq-static-breakpoint: desktop !default; 72 | 73 | /// Show breakpoints in the top right corner 74 | /// 75 | /// If you want to display the currently active breakpoint in the top 76 | /// right corner of your site during development, add the breakpoints 77 | /// to this list, ordered by width. For example: (mobile, tablet, desktop). 78 | /// 79 | /// @example scss 80 | /// $mq-show-breakpoints: (mobile, tablet, desktop); 81 | /// @import 'path/to/mq'; 82 | /// 83 | /// @type map 84 | $mq-show-breakpoints: () !default; 85 | 86 | /// Customize the media type (for example: `@media screen` or `@media print`) 87 | /// By default sass-mq uses an "all" media type (`@media all and …`) 88 | /// 89 | /// @type String 90 | /// @link https://github.com/sass-mq/sass-mq#changing-media-type Full documentation and examples 91 | $mq-media-type: all !default; 92 | 93 | /// Convert pixels to ems 94 | /// 95 | /// @param {Number} $px - value to convert 96 | /// @ignore @param {Number} $base-font-size [$mq-base-font-size] - `` font size (deprecated) 97 | /// 98 | /// @example scss 99 | /// $font-size-in-ems: mq-px2em(16px); 100 | /// p { font-size: mq-px2em(16px); } 101 | /// 102 | /// @requires $mq-base-font-size 103 | /// @returns {Number} 104 | @function mq-px2em($px, $base-font-size: $mq-base-font-size) { 105 | @if ($mq-base-font-size != 16px) { 106 | @warn "Overriding $mq-base-font-size will break things, see https://github.com/sass-mq/sass-mq/issues/122."; 107 | } 108 | @if ($base-font-size != 16px) { 109 | @warn "The $base-font-size argument will be removed in sass-mq v6.0.0, as overriding it breaks things, see https://github.com/sass-mq/sass-mq/issues/122."; 110 | } 111 | @if math.is-unitless($px) { 112 | @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels."; 113 | @return mq-px2em($px * 1px, $base-font-size); 114 | } @else if math.unit($px) == em { 115 | @return $px; 116 | } 117 | @return math.div($px, $base-font-size) * 1em; 118 | } 119 | 120 | /// Get a breakpoint's width 121 | /// 122 | /// @param {String} $name - Name of the breakpoint. One of $mq-breakpoints 123 | /// 124 | /// @example scss 125 | /// $tablet-width: mq-get-breakpoint-width(tablet); 126 | /// @media (min-width: mq-get-breakpoint-width(desktop)) {} 127 | /// 128 | /// @requires {Variable} $mq-breakpoints 129 | /// 130 | /// @returns {Number} Value in pixels 131 | @function mq-get-breakpoint-width($name, $breakpoints: $mq-breakpoints) { 132 | @if map.has-key($breakpoints, $name) { 133 | @return map.get($breakpoints, $name); 134 | } @else { 135 | @warn "Breakpoint #{$name} wasn't found in $breakpoints."; 136 | } 137 | } 138 | 139 | /// Media Query mixin 140 | /// 141 | /// @param {String | Boolean} $from [false] - One of $mq-breakpoints 142 | /// @param {String | Boolean} $until [false] - One of $mq-breakpoints 143 | /// @param {String | Boolean} $and [false] - Additional media query parameters 144 | /// @param {String} $media-type [$mq-media-type] - Media type: screen, print… 145 | /// 146 | /// @ignore Undocumented API, for advanced use only: 147 | /// @ignore @param {Map} $breakpoints [$mq-breakpoints] 148 | /// @ignore @param {String} $static-breakpoint [$mq-static-breakpoint] 149 | /// 150 | /// @content styling rules, wrapped into a @media query when $responsive is true 151 | /// 152 | /// @requires {Variable} $mq-media-type 153 | /// @requires {Variable} $mq-breakpoints 154 | /// @requires {Variable} $mq-static-breakpoint 155 | /// @requires {function} mq-px2em 156 | /// @requires {function} mq-get-breakpoint-width 157 | /// 158 | /// @link https://github.com/sass-mq/sass-mq#responsive-mode-on-default Full documentation and examples 159 | /// 160 | /// @example scss 161 | /// .element { 162 | /// @include mq($from: mobile) { 163 | /// color: red; 164 | /// } 165 | /// @include mq($until: tablet) { 166 | /// color: blue; 167 | /// } 168 | /// @include mq(mobile, tablet) { 169 | /// color: green; 170 | /// } 171 | /// @include mq($from: tablet, $and: '(orientation: landscape)') { 172 | /// color: teal; 173 | /// } 174 | /// @include mq(950px) { 175 | /// color: hotpink; 176 | /// } 177 | /// @include mq(tablet, $media-type: screen) { 178 | /// color: hotpink; 179 | /// } 180 | /// // Advanced use: 181 | /// $my-breakpoints: (L: 900px, XL: 1200px); 182 | /// @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) { 183 | /// color: hotpink; 184 | /// } 185 | /// } 186 | @mixin mq( 187 | $from: false, 188 | $until: false, 189 | $and: false, 190 | $media-type: $mq-media-type, 191 | $breakpoints: $mq-breakpoints, 192 | $responsive: $mq-responsive, 193 | $static-breakpoint: $mq-static-breakpoint 194 | ) { 195 | $min-width: 0; 196 | $max-width: 0; 197 | $media-query: ''; 198 | 199 | // From: this breakpoint (inclusive) 200 | @if $from { 201 | @if meta.type-of($from) == number { 202 | $min-width: mq-px2em($from); 203 | } @else { 204 | $min-width: mq-px2em(mq-get-breakpoint-width($from, $breakpoints)); 205 | } 206 | } 207 | 208 | // Until: that breakpoint (exclusive) 209 | @if $until { 210 | @if meta.type-of($until) == number { 211 | $max-width: mq-px2em($until); 212 | } @else { 213 | $max-width: mq-px2em(mq-get-breakpoint-width($until, $breakpoints)) - .01em; 214 | } 215 | } 216 | 217 | // Responsive support is disabled, rasterize the output outside @media blocks 218 | // The browser will rely on the cascade itself. 219 | @if $responsive == false { 220 | $static-breakpoint-width: mq-get-breakpoint-width($static-breakpoint, $breakpoints); 221 | $target-width: mq-px2em($static-breakpoint-width); 222 | 223 | // Output only rules that start at or span our target width 224 | @if ( 225 | $and == false 226 | and $min-width <= $target-width 227 | and ( 228 | $until == false or $max-width >= $target-width 229 | ) 230 | and $media-type != 'print' 231 | ) { 232 | @content; 233 | } 234 | } 235 | 236 | // Responsive support is enabled, output rules inside @media queries 237 | @else { 238 | @if $min-width != 0 { $media-query: '#{$media-query} and (min-width: #{$min-width})'; } 239 | @if $max-width != 0 { $media-query: '#{$media-query} and (max-width: #{$max-width})'; } 240 | @if $and { $media-query: '#{$media-query} and #{$and}'; } 241 | 242 | // Remove unnecessary media query prefix 'all and ' 243 | @if ($media-type == 'all' and $media-query != '') { 244 | $media-type: ''; 245 | $media-query: string.slice(string.unquote($media-query), 6); 246 | } 247 | 248 | @media #{$media-type + $media-query} { 249 | @content; 250 | } 251 | } 252 | } 253 | 254 | /// Quick sort 255 | /// 256 | /// @author Sam Richards 257 | /// @access private 258 | /// @param {List} $list - List to sort 259 | /// @returns {List} Sorted List 260 | @function _mq-quick-sort($list) { 261 | $less: (); 262 | $equal: (); 263 | $large: (); 264 | 265 | @if list.length($list) > 1 { 266 | $seed: list.nth($list, math.ceil(list.length($list) * 0.5)); 267 | 268 | @each $item in $list { 269 | @if ($item == $seed) { 270 | $equal: list.append($equal, $item); 271 | } @else if ($item < $seed) { 272 | $less: list.append($less, $item); 273 | } @else if ($item > $seed) { 274 | $large: list.append($large, $item); 275 | } 276 | } 277 | 278 | @return list.join(list.join(_mq-quick-sort($less), $equal), _mq-quick-sort($large)); 279 | } 280 | 281 | @return $list; 282 | } 283 | 284 | /// Sort a map by values (works with numbers only) 285 | /// 286 | /// @access private 287 | /// @param {Map} $map - Map to sort 288 | /// @returns {Map} Map sorted by value 289 | @function _mq-map-sort-by-value($map) { 290 | $map-sorted: (); 291 | $map-keys: map.keys($map); 292 | $map-values: map.values($map); 293 | $map-values-sorted: _mq-quick-sort($map-values); 294 | 295 | // Reorder key/value pairs based on key values 296 | @each $value in $map-values-sorted { 297 | $index: list.index($map-values, $value); 298 | $key: list.nth($map-keys, $index); 299 | $map-sorted: map.merge($map-sorted, ($key: $value)); 300 | 301 | // Unset the value in $map-values to prevent the loop 302 | // from finding the same index twice 303 | $map-values: list.set-nth($map-values, $index, 0); 304 | } 305 | 306 | @return $map-sorted; 307 | } 308 | 309 | /// Add a breakpoint 310 | /// 311 | /// @param {String} $name - Name of the breakpoint 312 | /// @param {Number} $width - Width of the breakpoint 313 | /// 314 | /// @requires {Variable} $mq-breakpoints 315 | /// 316 | /// @example scss 317 | /// @include mq-add-breakpoint(tvscreen, 1920px); 318 | /// @include mq(tvscreen) {} 319 | @mixin mq-add-breakpoint($name, $width) { 320 | $new-breakpoint: ($name: $width); 321 | $mq-breakpoints: map.merge($mq-breakpoints, $new-breakpoint) !global; 322 | $mq-breakpoints: _mq-map-sort-by-value($mq-breakpoints) !global; 323 | } 324 | 325 | /// Show the active breakpoint in the top right corner of the viewport 326 | /// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint 327 | /// 328 | /// @param {List} $show-breakpoints [$mq-show-breakpoints] - List of breakpoints to show in the top right corner 329 | /// @param {Map} $breakpoints [$mq-breakpoints] - Breakpoint names and sizes 330 | /// 331 | /// @requires {Variable} $mq-breakpoints 332 | /// @requires {Variable} $mq-show-breakpoints 333 | /// 334 | /// @example scss 335 | /// // Show breakpoints using global settings 336 | /// @include mq-show-breakpoints; 337 | /// 338 | /// // Show breakpoints using custom settings 339 | /// @include mq-show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px)); 340 | @mixin mq-show-breakpoints($show-breakpoints: $mq-show-breakpoints, $breakpoints: $mq-breakpoints) { 341 | body:before { 342 | background-color: #FCF8E3; 343 | border-bottom: 1px solid #FBEED5; 344 | border-left: 1px solid #FBEED5; 345 | color: #C09853; 346 | font: small-caption; 347 | padding: 3px 6px; 348 | pointer-events: none; 349 | position: fixed; 350 | right: 0; 351 | top: 0; 352 | z-index: 100; 353 | 354 | // Loop through the breakpoints that should be shown 355 | @each $show-breakpoint in $show-breakpoints { 356 | $width: mq-get-breakpoint-width($show-breakpoint, $breakpoints); 357 | @include mq($show-breakpoint, $breakpoints: $breakpoints) { 358 | content: "#{$show-breakpoint} ≥ #{$width} (#{mq-px2em($width)})"; 359 | } 360 | } 361 | } 362 | } 363 | 364 | @if list.length($mq-show-breakpoints) > 0 { 365 | @include mq-show-breakpoints; 366 | } 367 | -------------------------------------------------------------------------------- /scss/baseguide/01-tools/grid/_column.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | @use "sass:meta"; 3 | 4 | @mixin column-base($gutter: $grid-gutter, $size: 100%, $columns: $grid-columns) { 5 | @include make-gutters($gutter); 6 | @include column($size, $columns); 7 | 8 | position: relative; 9 | } 10 | 11 | @mixin column($size: 'expand', $columns: $grid-columns) { 12 | @if $size { 13 | @if (meta.type-of($size) == 'number') { 14 | @if (math.unit($size) == '%') { 15 | width: $size; 16 | } 17 | @else { 18 | @if $size < 1 { 19 | width: math.percentage($size); 20 | } 21 | @else { 22 | width: math.percentage(math.div($size, $columns)); 23 | } 24 | } 25 | } 26 | @else { 27 | width: auto; 28 | max-width: 100%; 29 | 30 | @if $size == 'shrink' { 31 | flex: 0 0 auto; 32 | } 33 | 34 | @if $size == 'expand' { 35 | flex: 1 1 auto; 36 | } 37 | } 38 | } 39 | } 40 | 41 | @mixin column-block($columns: $grid-columns) { 42 | width: math.percentage(math.div(1, $columns)); 43 | 44 | &:nth-of-type(1n) { 45 | clear: none; 46 | } 47 | 48 | &:nth-child(#{$columns}n+1) { 49 | clear: both; 50 | } 51 | } 52 | 53 | @mixin column-push($size, $columns: $grid-columns) { 54 | @if $size > 0 { 55 | left: math.percentage(math.div($size, $columns)); 56 | } 57 | @else { 58 | left: auto; 59 | } 60 | } 61 | 62 | @mixin column-pull($size, $columns: $grid-columns) { 63 | @if $size > 0 { 64 | right: math.percentage(math.div($size, $columns)); 65 | } 66 | @else { 67 | right: auto; 68 | } 69 | } 70 | 71 | @mixin column-offset($size, $columns: $grid-columns) { 72 | @if $size < $columns { 73 | margin-left: math.percentage(math.div($size, $columns)); 74 | } 75 | } 76 | 77 | // Generate columns for a specific breakpoint 78 | @mixin loop-columns($breakpoint, $pull: $grid-pull-classes, $push: $grid-push-classes, $offset: $grid-offset-classes) { 79 | @for $i from 0 through $grid-columns { 80 | @if $i > 0 { 81 | .col-#{$breakpoint}-#{$i} { 82 | @include column($i, $grid-columns); 83 | } 84 | } 85 | 86 | @if $pull { 87 | .col-#{$breakpoint}-pull-#{$i} { 88 | @include column-pull($i, $grid-columns); 89 | } 90 | } 91 | 92 | @if $push { 93 | .col-#{$breakpoint}-push-#{$i} { 94 | @include column-push($i, $grid-columns); 95 | } 96 | } 97 | 98 | @if $offset { 99 | .col-#{$breakpoint}-offset-#{$i} { 100 | @include column-offset($i, $grid-columns); 101 | } 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /scss/baseguide/01-tools/grid/_container.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "sass:map"; 3 | @use "sass:meta"; 4 | 5 | @mixin container($gutter: $grid-container-gutter, $width: $grid-container) { 6 | @if (meta.type-of($gutter) == 'map') { 7 | $width: to-rem($width) - to-rem(list.nth(map.values($gutter), list.length($gutter))); 8 | } 9 | @else { 10 | $width: to-rem($width) - to-rem($gutter); 11 | } 12 | 13 | @include make-gutters($gutter); 14 | 15 | margin-left: auto; 16 | margin-right: auto; 17 | width: 100%; 18 | max-width: $width; 19 | } 20 | -------------------------------------------------------------------------------- /scss/baseguide/01-tools/grid/_gutter.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "sass:map"; 3 | @use "sass:meta"; 4 | 5 | @function get-gutter($breakpoint: false, $gutter: $grid-gutter) { 6 | @if (meta.type-of($gutter) == 'map') { 7 | @if $breakpoint { 8 | @if map.has-key($gutter, $breakpoint) { 9 | $gutter: map.get($gutter, $breakpoint); 10 | } 11 | @else { 12 | @error "Breakpoint #{$breakpoint} wasn't found in $gutter."; 13 | } 14 | } 15 | @else { 16 | $gutter: list.nth(map.values($gutter), 1); 17 | } 18 | } 19 | 20 | @return to-rem($gutter); 21 | } 22 | 23 | @mixin gutter($gutter, $type) { 24 | $gutter: to-rem($gutter * 0.5); 25 | 26 | @if $type == 'inner' { 27 | padding-left: $gutter; 28 | padding-right: $gutter; 29 | } 30 | @else { 31 | $gutter: $gutter * -1; 32 | 33 | margin-left: $gutter; 34 | margin-right: $gutter; 35 | } 36 | } 37 | 38 | @mixin make-gutters($gutter: $grid-gutter, $type: 'inner') { 39 | @if (meta.type-of($gutter) == 'map') { 40 | @each $breakpoint, $width in $gutter { 41 | @if $breakpoint == list.nth(map.keys($mq-breakpoints), 1) { 42 | @include gutter($width, $type); 43 | } 44 | @else { 45 | @include mq($breakpoint) { 46 | @include gutter($width, $type); 47 | } 48 | } 49 | } 50 | } 51 | @else { 52 | @include gutter($gutter, $type); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /scss/baseguide/01-tools/grid/_row.scss: -------------------------------------------------------------------------------- 1 | @mixin row($gutter: $grid-gutter) { 2 | @include make-gutters($gutter, 'outer'); 3 | 4 | display: flex; 5 | flex-wrap: wrap; 6 | } 7 | -------------------------------------------------------------------------------- /scss/baseguide/02-base/_base.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: inherit; 9 | } 10 | 11 | audio, 12 | canvas, 13 | iframe, 14 | img, 15 | svg, 16 | video { 17 | vertical-align: middle; 18 | } 19 | 20 | canvas, 21 | img, 22 | video { 23 | max-width: 100%; 24 | height: auto; 25 | } 26 | 27 | audio { 28 | max-width: 100%; 29 | } 30 | 31 | iframe { 32 | border: 0; 33 | } 34 | 35 | button, 36 | input, 37 | optgroup, 38 | select, 39 | textarea { 40 | font: inherit; 41 | line-height: inherit; 42 | } 43 | 44 | optgroup { 45 | font-weight: bold; 46 | } 47 | 48 | fieldset { 49 | min-width: 0; 50 | padding: 0; 51 | border: 0; 52 | } 53 | 54 | @if $button-cursor-pointer { 55 | [type="button"]:not(:disabled), 56 | [type="reset"]:not(:disabled), 57 | [type="submit"]:not(:disabled), 58 | button:not(:disabled) { 59 | cursor: pointer; 60 | } 61 | } 62 | 63 | address { 64 | font-style: inherit; 65 | } 66 | 67 | pre { 68 | overflow: auto; 69 | } 70 | 71 | hr { 72 | border: 0; 73 | border-top: 1px solid; 74 | color: inherit; 75 | opacity: 0.2; 76 | } 77 | 78 | :focus:not(:focus-visible) { 79 | outline: none; 80 | } 81 | -------------------------------------------------------------------------------- /scss/baseguide/02-base/_global.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: $font-family-base; 3 | font-size: $font-size-base; 4 | font-weight: $font-weight-base; 5 | line-height: $line-height-base; 6 | background-color: $global-bg; 7 | color: $text-color; 8 | } 9 | 10 | @if $font-antialiased { 11 | html, 12 | button, 13 | input { 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-font-smoothing: antialiased; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /scss/baseguide/02-base/_headings.scss: -------------------------------------------------------------------------------- 1 | #{$headings} { 2 | margin-top: $headings-spacing * 2; 3 | margin-bottom: $headings-spacing; 4 | font-family: $headings-font-family; 5 | font-weight: $headings-font-weight; 6 | line-height: $headings-line-height; 7 | color: $headings-color; 8 | 9 | &:first-child { 10 | margin-top: 0; 11 | } 12 | 13 | @if $spacing-reset { 14 | &:last-child { 15 | margin-bottom: 0; 16 | } 17 | } 18 | } 19 | 20 | @include scale-headings; 21 | -------------------------------------------------------------------------------- /scss/baseguide/02-base/_link.scss: -------------------------------------------------------------------------------- 1 | a { 2 | color: $link-color; 3 | text-decoration: $link-decoration; 4 | 5 | &:hover, 6 | &:focus { 7 | color: $link-hover-color; 8 | text-decoration: $link-hover-decoration; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /scss/baseguide/02-base/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /scss/baseguide/02-base/_print.scss: -------------------------------------------------------------------------------- 1 | // Print styles adapted from HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate 2 | 3 | @media print { 4 | *, 5 | *::before, 6 | *::after { 7 | color: #000 !important; 8 | box-shadow: none !important; 9 | text-shadow: none !important; 10 | } 11 | 12 | a, 13 | a:visited { 14 | text-decoration: underline; 15 | } 16 | 17 | abbr[title]::after { 18 | content: ' (' attr(title) ')'; 19 | } 20 | 21 | pre { 22 | white-space: pre-wrap !important; 23 | } 24 | 25 | pre, 26 | blockquote { 27 | border: 1px solid #999; 28 | page-break-inside: avoid; 29 | } 30 | 31 | thead { 32 | display: table-header-group; 33 | } 34 | 35 | tr, 36 | img { 37 | page-break-inside: avoid; 38 | } 39 | 40 | p, 41 | h2, 42 | h3 { 43 | orphans: 3; 44 | widows: 3; 45 | } 46 | 47 | h2, 48 | h3 { 49 | page-break-after: avoid; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /scss/baseguide/02-base/_spacing.scss: -------------------------------------------------------------------------------- 1 | blockquote, 2 | figure, 3 | fieldset { 4 | margin: 0; 5 | } 6 | 7 | address, 8 | blockquote, 9 | table, 10 | figure, 11 | form, 12 | fieldset, 13 | legend, 14 | pre, 15 | dl, 16 | ul, 17 | ol, 18 | hr, 19 | p { 20 | margin-top: 0; 21 | margin-bottom: $spacing-base; 22 | 23 | @if $spacing-reset { 24 | &:last-child { 25 | margin-bottom: 0; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /scss/baseguide/03-objects/_embed.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | .embed-responsive { 4 | position: relative; 5 | overflow: hidden; 6 | 7 | &::before { 8 | content: ''; 9 | display: block; 10 | padding-bottom: math.percentage(math.div(9, 16)); 11 | } 12 | 13 | iframe, 14 | embed, 15 | object, 16 | video { 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | width: 100%; 21 | height: 100%; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/baseguide/03-objects/_grid.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | @include container; 3 | } 4 | 5 | .row { 6 | @include row; 7 | } 8 | 9 | .col { 10 | @include column-base; 11 | } 12 | 13 | // Generate columns for all breakpoints 14 | @include loop-breakpoints { 15 | @include loop-columns($breakpoint); 16 | } 17 | -------------------------------------------------------------------------------- /scss/baseguide/03-objects/_list.scss: -------------------------------------------------------------------------------- 1 | .list-unstyled { 2 | @include list-unstyled; 3 | } 4 | 5 | .list-inline { 6 | @include list-inline; 7 | } 8 | -------------------------------------------------------------------------------- /scss/baseguide/03-objects/_media.scss: -------------------------------------------------------------------------------- 1 | .media { 2 | display: flex; 3 | align-items: flex-start; 4 | } 5 | 6 | .media-body { 7 | flex: 0 1 auto; 8 | } 9 | 10 | .media-left, 11 | .media-right { 12 | flex: 0 0 auto; 13 | } 14 | 15 | .media-left { 16 | padding-right: 1rem; 17 | } 18 | 19 | .media-right { 20 | order: 1; 21 | padding-left: 1rem; 22 | } 23 | 24 | .media-middle { 25 | align-self: center; 26 | } 27 | 28 | .media-bottom { 29 | align-self: flex-end; 30 | } 31 | -------------------------------------------------------------------------------- /scss/baseguide/04-components/_button.scss: -------------------------------------------------------------------------------- 1 | #{$button-selector} { 2 | @include button; 3 | } 4 | -------------------------------------------------------------------------------- /scss/baseguide/04-components/_form-custom.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | 3 | @supports (appearance: none) { 4 | .select select:not([multiple]) { 5 | appearance: none; 6 | padding-right: 2em; 7 | background-repeat: no-repeat; 8 | background-position: right center; 9 | background-position: right $input-padding-horizontal center; 10 | background-image: url(get-icon('select')); 11 | } 12 | } 13 | 14 | .radio input[type="radio"], 15 | .checkbox input[type="checkbox"] { 16 | &:not(:only-child) { 17 | opacity: 0; 18 | } 19 | 20 | ~ label { 21 | position: relative; 22 | padding-left: 1.4em; 23 | line-height: 1.5; 24 | } 25 | 26 | ~ label::before, 27 | ~ label::after { 28 | content: ''; 29 | position: absolute; 30 | top: 0.25em; 31 | left: 0; 32 | width: 1em; 33 | height: 1em; 34 | } 35 | 36 | ~ label::before { 37 | border: $input-border-width solid $input-border-color; 38 | background-color: $input-bg; 39 | } 40 | 41 | ~ label::after { 42 | background-repeat: no-repeat; 43 | background-position: center center; 44 | } 45 | 46 | &:hover:not(:disabled) ~ label:hover::before, 47 | &:focus ~ label::before { 48 | border-color: $input-focus-border-color; 49 | } 50 | 51 | &:active ~ label::before { 52 | background-color: color.adjust($input-bg, $lightness: -10%); 53 | } 54 | 55 | &:disabled ~ label::before { 56 | border-color: $input-disabled-border-color; 57 | background-color: $input-disabled-bg; 58 | } 59 | } 60 | 61 | .radio input[type="radio"] { 62 | ~ label::before { 63 | border-radius: 50%; 64 | } 65 | 66 | &:checked ~ label::after { 67 | background-image: url(get-icon('radio')); 68 | } 69 | } 70 | 71 | .checkbox input[type="checkbox"] { 72 | ~ label::before { 73 | border-radius: $checkbox-border-radius; 74 | } 75 | 76 | &:checked ~ label::after { 77 | background-image: url(get-icon('checkbox')); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /scss/baseguide/04-components/_form.scss: -------------------------------------------------------------------------------- 1 | label { 2 | display: inline-block; 3 | margin-bottom: 0.3rem; 4 | } 5 | 6 | .label-inline { 7 | margin-top: 1px; 8 | padding-top: $input-padding-vertical; 9 | } 10 | 11 | .form-group { 12 | margin-bottom: 1rem; 13 | } 14 | 15 | #{$input-selector} { 16 | display: block; 17 | width: 100%; 18 | height: $input-height; 19 | border: $input-border-width solid $input-border-color; 20 | border-radius: $input-border-radius; 21 | padding: $input-padding-vertical $input-padding-horizontal; 22 | background-clip: padding-box; // remove shadow in iOS 23 | background-color: $input-bg; 24 | color: $input-color; 25 | transition: $input-transition; 26 | 27 | &:focus { 28 | border-color: $input-focus-border-color; 29 | outline: 0; 30 | } 31 | 32 | &:disabled { 33 | border-color: $input-disabled-border-color; 34 | background-color: $input-disabled-bg; 35 | color: $input-disabled-color; 36 | cursor: not-allowed; 37 | } 38 | } 39 | 40 | select { 41 | overflow-x: hidden; 42 | 43 | &:focus::-ms-value { 44 | background: transparent; 45 | color: currentColor; 46 | } 47 | 48 | &[multiple], 49 | &[size] { 50 | height: auto; 51 | } 52 | } 53 | 54 | textarea { 55 | resize: vertical; 56 | 57 | &[rows] { 58 | height: auto; 59 | } 60 | 61 | &:not([rows]) { 62 | height: $input-height * 2; 63 | } 64 | } 65 | 66 | input[type="radio"], 67 | input[type="checkbox"] { 68 | &:not(:only-child) { 69 | position: absolute; 70 | margin-top: 0.35em; 71 | } 72 | 73 | ~ label { 74 | margin-bottom: 0; 75 | padding-left: 20px; 76 | font-weight: inherit; 77 | } 78 | 79 | &:disabled ~ label { 80 | color: $input-disabled-color; 81 | cursor: not-allowed; 82 | } 83 | } 84 | 85 | input[type="file"] { 86 | display: block; 87 | max-width: 100%; 88 | } 89 | 90 | ::placeholder { 91 | color: $placeholder-color; 92 | opacity: 1; 93 | } 94 | -------------------------------------------------------------------------------- /scss/baseguide/04-components/_table.scss: -------------------------------------------------------------------------------- 1 | #{$table-selector} { 2 | width: 100%; 3 | max-width: 100%; 4 | border-collapse: collapse; 5 | border-spacing: 0; 6 | 7 | th, 8 | td { 9 | padding: $table-padding-vertical $table-padding-horizontal; 10 | border-bottom: 1px solid $table-border-color; 11 | vertical-align: top; 12 | } 13 | 14 | th { 15 | text-align: left; 16 | } 17 | 18 | thead th { 19 | border-bottom-width: 2px; 20 | vertical-align: bottom; 21 | } 22 | 23 | @if $table-stripe-bg { 24 | tbody tr:nth-child(2n+1) { 25 | background-color: $table-stripe-bg; 26 | } 27 | } 28 | } 29 | 30 | .table-responsive { 31 | display: block; 32 | width: 100%; 33 | overflow-x: auto; 34 | -webkit-overflow-scrolling: touch; 35 | -ms-overflow-style: -ms-autohiding-scrollbar; 36 | } 37 | -------------------------------------------------------------------------------- /scss/baseguide/05-utilities/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix; 3 | } 4 | -------------------------------------------------------------------------------- /scss/baseguide/05-utilities/_position.scss: -------------------------------------------------------------------------------- 1 | .block-center { 2 | display: block; 3 | margin-left: auto; 4 | margin-right: auto; 5 | } 6 | 7 | .pull-left { 8 | float: left !important; 9 | } 10 | 11 | .pull-right { 12 | float: right !important; 13 | } 14 | -------------------------------------------------------------------------------- /scss/baseguide/05-utilities/_screenreader.scss: -------------------------------------------------------------------------------- 1 | .sr-only { 2 | @include sr-only; 3 | } 4 | 5 | .sr-only-focusable { 6 | @include sr-only-focusable; 7 | } 8 | -------------------------------------------------------------------------------- /scss/baseguide/05-utilities/_space.scss: -------------------------------------------------------------------------------- 1 | @each $size, $length in $spacers { 2 | .#{$size} { 3 | margin-bottom: to-rem($length) !important; 4 | } 5 | 6 | @include loop-breakpoints($inclusive: false) { 7 | .#{$size}-#{$breakpoint} { 8 | margin-bottom: to-rem($length) !important; 9 | } 10 | } 11 | 12 | @include loop-breakpoints { 13 | @if not $is-last-breakpoint { 14 | .#{$size}-#{$breakpoint}-up { 15 | margin-bottom: to-rem($length) !important; 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scss/baseguide/05-utilities/_text.scss: -------------------------------------------------------------------------------- 1 | .small { 2 | font-size: $font-size-base * 0.8 !important; 3 | } 4 | 5 | .text-left { 6 | text-align: left !important; 7 | } 8 | 9 | .text-center { 10 | text-align: center !important; 11 | } 12 | 13 | .text-right { 14 | text-align: right !important; 15 | } 16 | 17 | .text-hide { 18 | @include text-hide; 19 | } 20 | 21 | .text-truncate { 22 | @include text-truncate; 23 | } 24 | 25 | .text-hyphenate { 26 | @include text-hyphenate; 27 | } 28 | -------------------------------------------------------------------------------- /scss/baseguide/05-utilities/_visibility.scss: -------------------------------------------------------------------------------- 1 | .invisible { 2 | visibility: hidden !important; 3 | } 4 | 5 | .hidden { 6 | display: none !important; 7 | } 8 | 9 | @media print { 10 | .hidden-print { 11 | display: none !important; 12 | } 13 | } 14 | 15 | @include loop-breakpoints($mq: false) { 16 | .visible-#{$breakpoint} { 17 | display: none !important; 18 | } 19 | 20 | @if not ($is-first-breakpoint or $is-last-breakpoint) { 21 | .visible-#{$breakpoint}-up { 22 | display: none !important; 23 | } 24 | } 25 | } 26 | 27 | @include loop-breakpoints($inclusive: false) { 28 | .hidden-#{$breakpoint} { 29 | display: none !important; 30 | } 31 | 32 | .visible-#{$breakpoint} { 33 | display: block !important; 34 | } 35 | } 36 | 37 | @include loop-breakpoints { 38 | @if not ($is-first-breakpoint or $is-last-breakpoint) { 39 | .hidden-#{$breakpoint}-up { 40 | display: none !important; 41 | } 42 | 43 | .visible-#{$breakpoint}-up { 44 | display: block !important; 45 | } 46 | } 47 | } 48 | --------------------------------------------------------------------------------