├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── index.html ├── preface.css └── preface.min.css ├── gulpfile.js ├── package-lock.json ├── package.json ├── screenshots └── screenshot.png └── src ├── _base.scss ├── _button.scss ├── _extra.scss ├── _grid.scss ├── _input.scss ├── _lists.scss ├── _loaders.scss ├── _navigation.scss ├── _scrollbars.scss ├── _table.scss ├── _tooltip.scss ├── _typography.scss └── style.scss /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Conner Luzier 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 | # `PrefaceCSS` 2 | 3 | [![GitHub issues](https://img.shields.io/github/issues/cluzier/PrefaceCSS.svg)](https://github.com/cluzier/PrefaceCSS/issues) 4 | [![GitHub forks](https://img.shields.io/github/forks/cluzier/PrefaceCSS.svg)](https://github.com/cluzier/PrefaceCSS/network) 5 | [![GitHub stars](https://img.shields.io/github/stars/cluzier/PrefaceCSS.svg)](https://github.com/cluzier/PrefaceCSS/stargazers) 6 | [![GitHub license](https://img.shields.io/github/license/cluzier/PrefaceCSS.svg)](https://github.com/cluzier/PrefaceCSS/blob/master/LICENSE) 7 | [![HitCount](http://hits.dwyl.io/cluzier/PrefaceCSS.svg)](http://hits.dwyl.io/cluzier/PrefaceCSS) 8 | 9 | `PrefaceCSS` is a fresh looking simple css framework. 10 | 11 | ## About 12 | 13 | `PrefaceCSS` is a fresh looking simple css framework that should be taken as the basis for your next website. We designed it to be flexible but still small, thanks to `scss` all you need to change are some variables and you have your own flavor of `PrefaceCSS`. 14 | 15 | # Screenshot 16 | 17 | [![Image of PrefaceCSS](./screenshots/screenshot.png)](https://cluzier.github.io/PrefaceCSS/dist/index.html) 18 | *Hint*: Click the image to view a web page full of HTML examples. 19 | 20 | ## How to use it 21 | 22 | Thanks to the opportunities the open-source development offers us, there are thousand ways to use this libary or change it. Below here I list only a few of them. 23 | 24 | ### Use 25 | 26 | Add `` or `` to your ``. 27 | 28 | ### Download 29 | 30 | Download from Github with the following command: 31 | 32 | **GitHub**: `$ git clone https://github.com/cluzier/PrefaceCSS` 33 | 34 | ### Contribute 35 | 36 | Clone and mix up things. If you think your edits are interesting for the public, just open a new pull request on that. 37 | 38 | Here a brief overview of our folder structure: 39 | 40 | ``` 41 | PrefaceCSS 42 | ├── dist # Our destination folder 43 | │ ├── preface.css 44 | │ ├── preface.min.css 45 | │ └── index.html 46 | ├── screenshots # Houses screenshots 47 | ├── src # Our source folder 48 | │ ├── _base.scss 49 | │ ├── _button.scss 50 | │ ├── _extra.scss 51 | │ ├── _grid.scss 52 | │ ├── _input.scss 53 | │ ├── _loaders.scss 54 | │ ├── _navigation.scss 55 | │ ├── _scrollbars.scss 56 | │ ├── _table.scss 57 | │ ├── _typography.scss 58 | │ └── style.scss 59 | ├── LICENSE 60 | ├── README.md 61 | ├── gulpfile.js 62 | └── package.json 63 | ``` 64 | 65 | Some `gulp` task you should know about: 66 | 67 | - `scss` compiles the scss to css 68 | - `scss:min` compress the compiled css files 69 | - `watch` executes `scss` and `scss:min` on any file change 70 | 71 | **Note** 72 | ```diff 73 | - when running `gulp scss` you will notice a warning, just disregard it. 74 | ``` 75 | 76 | **Required tools for development:** 77 | 78 | - Node.js 79 | - NPM 80 | - Gulp installed globally (`npm install gulp -g`) 81 | 82 | ## Acknowledgements 83 | Based off [Skeleton-plus](https://github.com/oltdaniel/skeleton-plus) by [oltdaniel](https://github.com/oltdaniel). 84 | CSS loaders from [Spinkit](https://tobiasahlin.com/spinkit/) & [Loading.io](https://loading.io/css/) 85 | 86 | ## Credits 87 | 88 | A project by [Conner Luzier](https://github.com/cluzier). 89 | Other amazing contributors [here](https://github.com/cluzier/PrefaceCSS/graphs/contributors). 90 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Boilerplate 9 | 10 | 11 | 12 | 28 | 29 | 30 | 31 |
32 | 40 |
41 | 42 |
43 | 44 | 45 |
46 |

Typography

47 |
48 |
49 | 50 | 51 |

Heading 1

52 |

Heading 2

53 |

Heading 3

54 |

Heading 4

55 |
Heading 5
56 |
Heading 6
57 | 58 |
59 | 60 | 61 | bold italic stroke underline small 62 | 63 |

64 | 65 |

66 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 67 | magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 68 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 69 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 70 | laborum. 71 |

72 | 73 | 74 |

75 | Muted text color looks like this 76 |

77 | 78 |

79 | Success text color looks like this 80 |

81 | 82 |

83 | Warning text color looks like this 84 |

85 | 86 |

87 | Error text color looks like this 88 |

89 | 90 |
91 | 92 | 93 |

RIGHT

94 |

CENTER

95 |

LEFT

96 |
97 | 98 |
99 |

Buttons

100 |
101 |
102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 |
115 | 116 |
117 |

Inputs

118 |
119 |
120 | 121 | 122 |
123 | 124 |
125 | 126 | 129 |
130 | 131 |
132 |

Colors

133 |
134 |
135 | 136 | 137 |
138 | SUCCESS 139 |
140 |
141 | ERROR 142 |
143 |
144 | WARNING 145 |
146 |
147 | 148 |
149 |

Grids

150 |
151 |
152 | 153 |

Flex

154 |

155 | Length of an element equals [element number]/[total] 156 |

157 | 158 | 159 |
160 |
161 | 1/2 162 |
163 |
164 | 1/2 165 |
166 |
167 |
168 |
169 |
170 | 2/3 171 |
172 |
173 | 1/1 174 |
175 |
176 | 177 |
178 | 179 |

Vanilla

180 | 181 | 182 |
183 |
184 | 1 185 |
186 |
187 | 11 188 |
189 |
190 | 191 |
192 | 193 | Mobile only 194 | 195 | 196 |
197 |
198 | 6 199 |
200 |
201 | 6 202 |
203 |
204 | 205 |
206 | 207 | Desktop only 208 | 209 | 210 |
211 |
212 | 6 213 |
214 |
215 | 6 216 |
217 |
218 |
219 | 220 |
221 |

Lists

222 |
223 |
224 | 225 |

Standard list

226 | 227 | 228 | 263 | 264 |
265 | 266 | 267 |

Nested list

268 | 269 | 270 | 305 |
306 | 307 |
308 |

Table

309 |
310 |
311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 |
IDNameStatusLocation
OneTwoThreeFour
OneTwoThreeFour
OneTwoThreeFour
343 |
344 | 345 |
346 |

Cards

347 |
348 |
349 | 350 |

ATTENTION: No material guidelines used, we chose the shadow we think is the best for 351 | card.

352 | 353 | 354 |
355 |
356 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 357 | magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 358 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 359 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 360 | est laborum. 361 |
362 |
363 | 364 |
365 |
366 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 367 | magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 368 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 369 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 370 | est laborum. 371 |
372 |
373 | 374 |
375 | text between cards 376 |
377 | 378 | 379 |
380 |
381 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 382 | magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 383 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 384 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 385 | est laborum. 386 |
387 | 388 |
389 | footer with link 390 |
391 |
392 |
393 | 394 |
395 |

Extras

396 |
397 |
398 | 399 | 400 |
401 |
402 |
403 | 404 | 414 | 415 |
416 |
417 |
418 | 419 |
420 |
421 |
422 | 423 | 424 |
425 | Tooltip test 426 |
427 | 428 | 429 | 
430 |           .class {
431 |   value: "Hello World";
432 |   big: "there is a ton of content here (just pretend)";
433 | }
434 |
435 | 436 | 437 |

Icons

438 |
439 |
440 |
441 |
442 | Added font-awesome cdnjs for you to add and use icons. Here is the link:
443 | 444 | https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css
445 | 446 | Just add this to your head element 447 |
448 |
449 | 450 | 451 |

Scrollbars

452 |
453 |
454 |
455 | 456 |
457 |
458 |
459 | 460 |
461 |
462 |
463 | 464 |
465 |
466 |
467 | 468 |
469 |
470 |
471 | 472 |
473 |
474 |
475 | 476 |
477 |
478 |
479 | 480 |
481 |
482 |
483 | 484 |
485 |
486 |
487 | 488 |
489 |
490 |
491 | 492 |
493 | 494 | 495 |

Loaders

496 |
497 |
498 |
499 |
500 |
501 |
502 |
503 |
504 | 505 |
506 |
507 |
508 |
509 |
510 |
511 |
512 |
513 |
514 |
515 | 516 |
517 |
518 |
519 |
520 | 521 |
522 |
523 |
524 |
525 |
526 |
527 | 528 |
529 |
530 |
531 | 532 |
533 | 534 | 538 | 539 |
540 |
541 |
542 |
543 |
544 |
545 |
546 |
547 |
548 |
549 |
550 | 551 |
552 |
553 |
554 |
555 |
556 |
557 | 558 | 559 | 560 |
561 | 562 | 563 | 576 | 577 | 590 |
591 |
592 | 593 | 596 | 597 | 598 | -------------------------------------------------------------------------------- /dist/preface.css: -------------------------------------------------------------------------------- 1 | /* PrefaceCSS , Copyright 2019, Conner Luzier */ 2 | /* Imports */ 3 | @import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap"); 4 | /* Define some variables we will need (colors) */ 5 | /* Do the imports for other scss */ 6 | * { 7 | font-family: "Roboto Mono", monospace; 8 | font-weight: 400; 9 | color: #212121; 10 | padding: 0; 11 | margin: 0; 12 | box-sizing: border-box; 13 | word-wrap: break-word; } 14 | 15 | nav { 16 | margin: 20px auto; 17 | max-width: 960px; 18 | width: 95%; } 19 | nav label { 20 | font-weight: bold; } 21 | nav ul { 22 | list-style: none; 23 | float: right; } 24 | nav ul li { 25 | margin: 0 15px; } 26 | nav * { 27 | display: inline-block; } 28 | @media screen and (max-width: 640px) { 29 | nav { 30 | text-align: center; } 31 | nav > * { 32 | display: block; } 33 | nav ul { 34 | float: none; 35 | margin-top: 15px; } } 36 | 37 | .container { 38 | max-width: 960px; 39 | width: 95%; 40 | margin: 0 auto; } 41 | 42 | .grid-flex { 43 | display: flex; } 44 | 45 | .grid-flex-wrap { 46 | display: flex; 47 | flex-wrap: wrap; } 48 | 49 | .row:after { 50 | content: ''; 51 | display: table; 52 | clear: both; } 53 | 54 | .flex-1 { 55 | flex: 1; } 56 | 57 | .flex-2 { 58 | flex: 2; } 59 | 60 | .flex-3 { 61 | flex: 3; } 62 | 63 | .flex-4 { 64 | flex: 4; } 65 | 66 | .flex-5 { 67 | flex: 5; } 68 | 69 | .flex-6 { 70 | flex: 6; } 71 | 72 | .flex-7 { 73 | flex: 7; } 74 | 75 | .flex-8 { 76 | flex: 8; } 77 | 78 | .flex-9 { 79 | flex: 9; } 80 | 81 | .flex-10 { 82 | flex: 10; } 83 | 84 | /* Old grid system */ 85 | .one.column, .one.columns { 86 | width: 7.33333%; 87 | display: inline-block; 88 | margin: 0 .5%; 89 | float: left; } 90 | 91 | .two.columns { 92 | width: 15.66667%; 93 | display: inline-block; 94 | margin: 0 .5%; 95 | float: left; } 96 | 97 | .three.columns { 98 | width: 24%; 99 | display: inline-block; 100 | margin: 0 .5%; 101 | float: left; } 102 | 103 | .four.columns { 104 | width: 32.33333%; 105 | display: inline-block; 106 | margin: 0 .5%; 107 | float: left; } 108 | 109 | .five.columns { 110 | width: 40.66667%; 111 | display: inline-block; 112 | margin: 0 .5%; 113 | float: left; } 114 | 115 | .six.columns { 116 | width: 49%; 117 | display: inline-block; 118 | margin: 0 .5%; 119 | float: left; } 120 | 121 | .seven.columns { 122 | width: 57.33333%; 123 | display: inline-block; 124 | margin: 0 .5%; 125 | float: left; } 126 | 127 | .eight.columns { 128 | width: 65.66667%; 129 | display: inline-block; 130 | margin: 0 .5%; 131 | float: left; } 132 | 133 | .nine.columns { 134 | width: 74%; 135 | display: inline-block; 136 | margin: 0 .5%; 137 | float: left; } 138 | 139 | .ten.columns { 140 | width: 82.33333%; 141 | display: inline-block; 142 | margin: 0 .5%; 143 | float: left; } 144 | 145 | .eleven.columns { 146 | width: 90.66667%; 147 | display: inline-block; 148 | margin: 0 .5%; 149 | float: left; } 150 | 151 | .twelve.columns { 152 | width: 99%; 153 | display: inline-block; 154 | margin: 0 .5%; 155 | float: left; } 156 | 157 | @media screen and (max-width: 750px) { 158 | .columns.desktop, .column.desktop { 159 | display: block !important; 160 | width: 99% !important; } } 161 | 162 | @media screen and (min-width: 750px) { 163 | .columns.mobile, .column.mobile { 164 | display: block !important; 165 | width: 99% !important; } } 166 | 167 | button { 168 | display: inline-block; 169 | padding: 8px 30px; 170 | margin: 5px 0; 171 | text-align: center; 172 | text-transform: uppercase; 173 | border: none; 174 | outline: none; 175 | border-radius: 2px; 176 | color: #413a3a; 177 | cursor: pointer; 178 | background-color: #212121; 179 | transition: 0.2s ease-in-out; } 180 | button:hover, button:disabled { 181 | background-color: #878787; } 182 | button:active { 183 | background-color: black; } 184 | button.success { 185 | background-color: #66cdaa; 186 | transition: 0.2s ease-in-out; } 187 | button.success:hover, button.success:disabled { 188 | background-color: #a0e0ca; } 189 | button.success:active { 190 | background-color: #39ae86; } 191 | button.error { 192 | background-color: #f08080; 193 | transition: 0.2s ease-in-out; } 194 | button.error:hover, button.error:disabled { 195 | background-color: #f8c4c4; } 196 | button.error:active { 197 | background-color: #e83c3c; } 198 | button.warning { 199 | background-color: #fef65b; 200 | transition: 0.2s ease-in-out; } 201 | button.warning:hover, button.warning:disabled { 202 | background-color: #fefaa7; } 203 | button.warning:active { 204 | background-color: #fef20f; } 205 | button.btn-shadow { 206 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } 207 | button.btn-shadow:hover { 208 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } 209 | button.btn-shadow:active { 210 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } 211 | 212 | input, textarea, select { 213 | display: block; 214 | width: 100%; 215 | padding: 5px; 216 | margin: 5px 0; 217 | border: 1px solid #c0c0c0; 218 | outline: none; 219 | border-radius: 2px; 220 | background-color: #ffffff; } 221 | input:hover, textarea:hover, select:hover { 222 | border-color: #6e6e6e; } 223 | input:focus, textarea:focus, select:focus { 224 | border-color: #212121; } 225 | 226 | textarea { 227 | resize: vertical; 228 | min-height: 60px; } 229 | 230 | b, strong { 231 | font-weight: 700; } 232 | 233 | a { 234 | text-decoration: underline; 235 | cursor: pointer; } 236 | a:hover { 237 | color: #6e6e6e; } 238 | a.none { 239 | text-decoration: none; } 240 | 241 | h1 { 242 | font-size: 3rem; } 243 | 244 | h2 { 245 | font-size: 2.6rem; } 246 | 247 | h3 { 248 | font-size: 2.2rem; } 249 | 250 | h4 { 251 | font-size: 1.8rem; } 252 | 253 | h5 { 254 | font-size: 1.6rem; } 255 | 256 | h6 { 257 | font-size: 1.4rem; } 258 | 259 | h1, h2, h3, h4, h5, h6 { 260 | margin-bottom: 10px; 261 | font-weight: bold; } 262 | 263 | small { 264 | font-size: .8rem; } 265 | 266 | p { 267 | margin: 15px 0; } 268 | 269 | .text-left { 270 | text-align: left; } 271 | 272 | .text-center { 273 | text-align: center; } 274 | 275 | .text-right { 276 | text-align: right; } 277 | 278 | .text-muted, .text-muted * { 279 | color: #616161; } 280 | 281 | .text-success, .text-success * { 282 | color: #66cdaa; } 283 | 284 | .text-error, .text-error * { 285 | color: #f08080; } 286 | 287 | .text-warning, .text-warning * { 288 | color: #fef65b; } 289 | 290 | .text-inverted, .text-inverted * { 291 | color: #413a3a; } 292 | 293 | table { 294 | border-collapse: collapse; 295 | width: 100%; 296 | margin-top: .5em; } 297 | @media screen and (max-width: 750px) { 298 | table { 299 | overflow-x: auto; 300 | display: block; } } 301 | table td, table th { 302 | padding: 12px 15px; 303 | text-align: left; 304 | border-bottom: 1px solid #c0c0c0; } 305 | 306 | ul ul { 307 | margin-left: 15px; } 308 | 309 | ul.inner, ul .inner { 310 | list-style-position: inside; } 311 | 312 | ul.outer, ul .outer { 313 | list-style-position: outside; } 314 | 315 | /** 316 | * Thanks to Chris Bracco for this tooltip from https://codepen.io/cbracco/pen/qzukg 317 | */ 318 | /* Add this attribute to the element that needs a tooltip */ 319 | [data-tooltip] { 320 | position: relative; 321 | z-index: 2; 322 | cursor: pointer; } 323 | 324 | /* Hide the tooltip content by default */ 325 | [data-tooltip]:before, 326 | [data-tooltip]:after { 327 | visibility: hidden; 328 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 329 | opacity: 0; 330 | pointer-events: none; } 331 | 332 | /* Position tooltip above the element */ 333 | [data-tooltip]:before { 334 | position: absolute; 335 | bottom: 150%; 336 | left: 50%; 337 | margin-bottom: 5px; 338 | margin-left: -80px; 339 | padding: 7px; 340 | width: 160px; 341 | border-radius: 3px; 342 | background-color: #000; 343 | background-color: rgba(51, 51, 51, 0.9); 344 | color: #fff; 345 | content: attr(data-tooltip); 346 | text-align: center; 347 | font-size: 14px; 348 | line-height: 1.2; } 349 | 350 | /* Triangle hack to make tooltip look like a speech bubble */ 351 | [data-tooltip]:after { 352 | position: absolute; 353 | bottom: 150%; 354 | left: 50%; 355 | margin-left: -5px; 356 | width: 0; 357 | border-top: 5px solid #000; 358 | border-top: 5px solid rgba(51, 51, 51, 0.9); 359 | border-right: 5px solid transparent; 360 | border-left: 5px solid transparent; 361 | content: " "; 362 | font-size: 0; 363 | line-height: 0; } 364 | 365 | /* Show tooltip content on hover */ 366 | [data-tooltip]:hover:before, 367 | [data-tooltip]:hover:after { 368 | visibility: visible; 369 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 370 | opacity: 1; } 371 | 372 | .card { 373 | margin: 15px; 374 | border-radius: 1px; 375 | border: 0.5px solid #c0c0c0; } 376 | .card img { 377 | width: 100%; 378 | display: block; 379 | border-radius: 1px 1px 0 0; } 380 | .card .content { 381 | padding: 10px; } 382 | .card .footer { 383 | border-top: 1px solid #c0c0c0; 384 | padding: 5px 15px; 385 | text-align: right; } 386 | .card.card-shadow { 387 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 388 | border: none; } 389 | 390 | hr { 391 | border: none; 392 | outline: none; 393 | height: 1px; 394 | width: 60%; 395 | background-color: #c0c0c0; } 396 | 397 | .bg-success { 398 | background-color: #66cdaa; } 399 | 400 | .bg-warning { 401 | background-color: #fef65b; } 402 | 403 | .bg-error { 404 | background-color: #f08080; } 405 | 406 | .bg-success-bright { 407 | background-color: #66cdaa; } 408 | 409 | .bg-warning-bright { 410 | background-color: #fef65b; } 411 | 412 | .bg-error-bright { 413 | background-color: #f08080; } 414 | 415 | code { 416 | background-color: #c0c0c0; 417 | display: inline-block; 418 | padding: 4px 8px; 419 | font-family: monospace; 420 | overflow-x: auto; } 421 | 422 | pre > code { 423 | display: block; 424 | white-space: pre; } 425 | 426 | .cover { 427 | min-height: 60vh; 428 | display: flex; 429 | align-items: center; 430 | justify-content: center; } 431 | .cover > div { 432 | flex: 1; } 433 | 434 | .progress { 435 | display: block; 436 | width: 100%; 437 | height: 3px; 438 | margin: 5px; 439 | background-color: #c0c0c0; } 440 | .progress .bar { 441 | transition: width .5s ease-in-out; 442 | display: block; 443 | height: 100%; 444 | width: 100%; 445 | max-width: 100%; } 446 | 447 | img { 448 | display: block; 449 | width: 100%; } 450 | 451 | .pagination { 452 | display: flex; 453 | width: 100%; 454 | text-align: center; 455 | padding: 15px; } 456 | .pagination * { 457 | text-decoration: none; } 458 | .pagination > * { 459 | flex: 1; 460 | padding: 3px; } 461 | .pagination > *:hover { 462 | background-color: #cdcdcd; 463 | transition: .3s background-color ease-in-out; } 464 | .pagination > *:hover, .pagination > *:hover * { 465 | color: #212121; } 466 | .pagination .action { 467 | flex: .5; } 468 | .pagination.no-flex { 469 | display: block; } 470 | .pagination.no-flex > * { 471 | display: inline-block; 472 | margin: 0 10px; } 473 | 474 | .lds-facebook { 475 | display: inline-block; 476 | position: relative; 477 | margin: 25px; 478 | width: 64px; 479 | height: 64px; } 480 | 481 | .lds-facebook div { 482 | display: inline-block; 483 | position: absolute; 484 | left: 6px; 485 | width: 13px; 486 | background: #413a3a; 487 | animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; } 488 | 489 | .lds-facebook div:nth-child(1) { 490 | left: 6px; 491 | animation-delay: -0.24s; } 492 | 493 | .lds-facebook div:nth-child(2) { 494 | left: 26px; 495 | animation-delay: -0.12s; } 496 | 497 | .lds-facebook div:nth-child(3) { 498 | left: 45px; 499 | animation-delay: 0; } 500 | 501 | @keyframes lds-facebook { 502 | 0% { 503 | top: 6px; 504 | height: 51px; } 505 | 50%, 100% { 506 | top: 19px; 507 | height: 26px; } } 508 | 509 | .lds-roller { 510 | display: inline-block; 511 | position: relative; 512 | margin: 25px; 513 | width: 64px; 514 | height: 64px; } 515 | 516 | .lds-roller div { 517 | animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; 518 | transform-origin: 32px 32px; } 519 | 520 | .lds-roller div:after { 521 | content: " "; 522 | display: block; 523 | position: absolute; 524 | width: 6px; 525 | height: 6px; 526 | border-radius: 50%; 527 | background: #413a3a; 528 | margin: -3px 0 0 -3px; } 529 | 530 | .lds-roller div:nth-child(1) { 531 | animation-delay: -0.036s; } 532 | 533 | .lds-roller div:nth-child(1):after { 534 | top: 50px; 535 | left: 50px; } 536 | 537 | .lds-roller div:nth-child(2) { 538 | animation-delay: -0.072s; } 539 | 540 | .lds-roller div:nth-child(2):after { 541 | top: 54px; 542 | left: 45px; } 543 | 544 | .lds-roller div:nth-child(3) { 545 | animation-delay: -0.108s; } 546 | 547 | .lds-roller div:nth-child(3):after { 548 | top: 57px; 549 | left: 39px; } 550 | 551 | .lds-roller div:nth-child(4) { 552 | animation-delay: -0.144s; } 553 | 554 | .lds-roller div:nth-child(4):after { 555 | top: 58px; 556 | left: 32px; } 557 | 558 | .lds-roller div:nth-child(5) { 559 | animation-delay: -0.18s; } 560 | 561 | .lds-roller div:nth-child(5):after { 562 | top: 57px; 563 | left: 25px; } 564 | 565 | .lds-roller div:nth-child(6) { 566 | animation-delay: -0.216s; } 567 | 568 | .lds-roller div:nth-child(6):after { 569 | top: 54px; 570 | left: 19px; } 571 | 572 | .lds-roller div:nth-child(7) { 573 | animation-delay: -0.252s; } 574 | 575 | .lds-roller div:nth-child(7):after { 576 | top: 50px; 577 | left: 14px; } 578 | 579 | .lds-roller div:nth-child(8) { 580 | animation-delay: -0.288s; } 581 | 582 | .lds-roller div:nth-child(8):after { 583 | top: 45px; 584 | left: 10px; } 585 | 586 | @keyframes lds-roller { 587 | 0% { 588 | transform: rotate(0deg); } 589 | 100% { 590 | transform: rotate(360deg); } } 591 | 592 | .lds-ripple { 593 | display: inline-block; 594 | position: relative; 595 | margin: 25px; 596 | width: 64px; 597 | height: 64px; } 598 | 599 | .lds-ripple div { 600 | position: absolute; 601 | border: 4px solid #413a3a; 602 | opacity: 1; 603 | border-radius: 50%; 604 | animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; } 605 | 606 | .lds-ripple div:nth-child(2) { 607 | animation-delay: -0.5s; } 608 | 609 | @keyframes lds-ripple { 610 | 0% { 611 | top: 28px; 612 | left: 28px; 613 | width: 0; 614 | height: 0; 615 | opacity: 1; } 616 | 100% { 617 | top: -1px; 618 | left: -1px; 619 | width: 58px; 620 | height: 58px; 621 | opacity: 0; } } 622 | 623 | .lds-ellipsis { 624 | display: inline-block; 625 | position: relative; 626 | margin: 25px; 627 | width: 64px; 628 | height: 64px; } 629 | 630 | .lds-ellipsis div { 631 | position: absolute; 632 | top: 27px; 633 | width: 11px; 634 | height: 11px; 635 | border-radius: 50%; 636 | background: #413a3a; 637 | animation-timing-function: cubic-bezier(0, 1, 1, 0); } 638 | 639 | .lds-ellipsis div:nth-child(1) { 640 | left: 6px; 641 | animation: lds-ellipsis1 0.6s infinite; } 642 | 643 | .lds-ellipsis div:nth-child(2) { 644 | left: 6px; 645 | animation: lds-ellipsis2 0.6s infinite; } 646 | 647 | .lds-ellipsis div:nth-child(3) { 648 | left: 26px; 649 | animation: lds-ellipsis2 0.6s infinite; } 650 | 651 | .lds-ellipsis div:nth-child(4) { 652 | left: 45px; 653 | animation: lds-ellipsis3 0.6s infinite; } 654 | 655 | @keyframes lds-ellipsis1 { 656 | 0% { 657 | transform: scale(0); } 658 | 100% { 659 | transform: scale(1); } } 660 | 661 | @keyframes lds-ellipsis3 { 662 | 0% { 663 | transform: scale(1); } 664 | 100% { 665 | transform: scale(0); } } 666 | 667 | @keyframes lds-ellipsis2 { 668 | 0% { 669 | transform: translate(0, 0); } 670 | 100% { 671 | transform: translate(19px, 0); } } 672 | 673 | .lds-circle { 674 | display: inline-block; 675 | margin: 25px; 676 | transform: translateZ(1px); } 677 | 678 | .lds-circle > div { 679 | display: inline-block; 680 | width: 51px; 681 | height: 51px; 682 | margin: 6px; 683 | border-radius: 50%; 684 | background: #413a3a; 685 | animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite; } 686 | 687 | @keyframes lds-circle { 688 | 0%, 100% { 689 | animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); } 690 | 0% { 691 | transform: rotateY(0deg); } 692 | 50% { 693 | transform: rotateY(1800deg); 694 | animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); } 695 | 100% { 696 | transform: rotateY(3600deg); } } 697 | 698 | .lds-hourglass { 699 | display: inline-block; 700 | position: relative; 701 | margin: 25px; 702 | width: 64px; 703 | height: 64px; } 704 | 705 | .lds-hourglass:after { 706 | content: " "; 707 | display: block; 708 | border-radius: 50%; 709 | width: 0; 710 | height: 0; 711 | margin: 6px; 712 | box-sizing: border-box; 713 | border: 26px solid #413a3a; 714 | border-color: #413a3a transparent #413a3a transparent; 715 | animation: lds-hourglass 1.2s infinite; } 716 | 717 | @keyframes lds-hourglass { 718 | 0% { 719 | transform: rotate(0); 720 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 721 | 50% { 722 | transform: rotate(900deg); 723 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 724 | 100% { 725 | transform: rotate(1800deg); } } 726 | 727 | .spinner { 728 | position: relative; 729 | display: inline-block; 730 | margin: 25px; 731 | width: 64px; 732 | height: 64px; } 733 | 734 | .cube1, .cube2 { 735 | background-color: #413a3a; 736 | width: 15px; 737 | height: 15px; 738 | position: absolute; 739 | top: 0; 740 | left: 0; 741 | animation: sk-cubemove 1.8s infinite ease-in-out; } 742 | 743 | .cube2 { 744 | animation-delay: -0.9s; } 745 | 746 | @keyframes sk-cubemove { 747 | 25% { 748 | transform: translateX(42px) rotate(-90deg) scale(0.5); 749 | -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 750 | 50% { 751 | transform: translateX(42px) translateY(42px) rotate(-179deg); 752 | -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 753 | 50.1% { 754 | transform: translateX(42px) translateY(42px) rotate(-180deg); 755 | -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 756 | 75% { 757 | transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 758 | -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 759 | 100% { 760 | transform: rotate(-360deg); 761 | -webkit-transform: rotate(-360deg); } } 762 | 763 | .box-spinner { 764 | position: relative; 765 | display: inline-block; 766 | margin: 25px; 767 | width: 64px; 768 | height: 64px; 769 | background-color: #413a3a; 770 | animation: sk-rotateplane 1.2s infinite ease-in-out; } 771 | 772 | @keyframes sk-rotateplane { 773 | 0% { 774 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 775 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 776 | 50% { 777 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 778 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 779 | 100% { 780 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 781 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } 782 | 783 | .sk-cube-grid { 784 | position: relative; 785 | display: inline-block; 786 | margin: 25px; 787 | width: 64px; 788 | height: 64px; } 789 | 790 | .sk-cube-grid .sk-cube { 791 | width: 33%; 792 | height: 33%; 793 | background-color: #413a3a; 794 | float: left; 795 | animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } 796 | 797 | .sk-cube-grid .sk-cube1 { 798 | animation-delay: 0.2s; } 799 | 800 | .sk-cube-grid .sk-cube2 { 801 | animation-delay: 0.3s; } 802 | 803 | .sk-cube-grid .sk-cube3 { 804 | animation-delay: 0.4s; } 805 | 806 | .sk-cube-grid .sk-cube4 { 807 | animation-delay: 0.1s; } 808 | 809 | .sk-cube-grid .sk-cube5 { 810 | animation-delay: 0.2s; } 811 | 812 | .sk-cube-grid .sk-cube6 { 813 | animation-delay: 0.3s; } 814 | 815 | .sk-cube-grid .sk-cube7 { 816 | animation-delay: 0s; } 817 | 818 | .sk-cube-grid .sk-cube8 { 819 | animation-delay: 0.1s; } 820 | 821 | .sk-cube-grid .sk-cube9 { 822 | animation-delay: 0.2s; } 823 | 824 | @keyframes sk-cubeGridScaleDelay { 825 | 0%, 70%, 100% { 826 | transform: scale3D(1, 1, 1); } 827 | 35% { 828 | transform: scale3D(0, 0, 1); } } 829 | 830 | .sk-folding-cube { 831 | margin: 25px; 832 | width: 40px; 833 | height: 40px; 834 | position: relative; 835 | display: inline-block; 836 | transform: rotateZ(45deg); } 837 | 838 | .sk-folding-cube .sk-cube { 839 | float: left; 840 | width: 50%; 841 | height: 50%; 842 | position: relative; 843 | transform: scale(1.1); } 844 | 845 | .sk-folding-cube .sk-cube:before { 846 | content: ''; 847 | position: absolute; 848 | top: 0; 849 | left: 0; 850 | width: 100%; 851 | height: 100%; 852 | background-color: #413a3a; 853 | animation: sk-foldCubeAngle 2.4s infinite linear both; 854 | transform-origin: 100% 100%; } 855 | 856 | .sk-folding-cube .sk-cube2 { 857 | transform: scale(1.1) rotateZ(90deg); } 858 | 859 | .sk-folding-cube .sk-cube3 { 860 | transform: scale(1.1) rotateZ(180deg); } 861 | 862 | .sk-folding-cube .sk-cube4 { 863 | transform: scale(1.1) rotateZ(270deg); } 864 | 865 | .sk-folding-cube .sk-cube2:before { 866 | animation-delay: 0.3s; } 867 | 868 | .sk-folding-cube .sk-cube3:before { 869 | animation-delay: 0.6s; } 870 | 871 | .sk-folding-cube .sk-cube4:before { 872 | animation-delay: 0.9s; } 873 | 874 | @keyframes sk-foldCubeAngle { 875 | 0%, 10% { 876 | transform: perspective(140px) rotateX(-180deg); 877 | opacity: 0; } 878 | 25%, 75% { 879 | transform: perspective(140px) rotateX(0deg); 880 | opacity: 1; } 881 | 90%, 100% { 882 | transform: perspective(140px) rotateY(180deg); 883 | opacity: 0; } } 884 | 885 | .scrollbar { 886 | margin-left: 30px; 887 | float: left; 888 | height: 300px; 889 | width: 65px; 890 | background: #F5F5F5; 891 | overflow-y: scroll; 892 | margin-bottom: 25px; } 893 | 894 | .force-overflow { 895 | min-height: 450px; } 896 | 897 | #wrapper { 898 | text-align: center; 899 | width: 500px; 900 | margin: auto; } 901 | 902 | /* 903 | * STYLE 1 904 | */ 905 | #style-1::-webkit-scrollbar-track { 906 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 907 | border-radius: 10px; 908 | background-color: #F5F5F5; } 909 | 910 | #style-1::-webkit-scrollbar { 911 | width: 12px; 912 | background-color: #F5F5F5; } 913 | 914 | #style-1::-webkit-scrollbar-thumb { 915 | border-radius: 10px; 916 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 917 | background-color: #555; } 918 | 919 | /* 920 | * STYLE 2 921 | */ 922 | #style-2::-webkit-scrollbar-track { 923 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 924 | border-radius: 10px; 925 | background-color: #F5F5F5; } 926 | 927 | #style-2::-webkit-scrollbar { 928 | width: 12px; 929 | background-color: #F5F5F5; } 930 | 931 | #style-2::-webkit-scrollbar-thumb { 932 | border-radius: 10px; 933 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 934 | background-color: #D62929; } 935 | 936 | /* 937 | * STYLE 3 938 | */ 939 | #style-3::-webkit-scrollbar-track { 940 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 941 | background-color: #F5F5F5; } 942 | 943 | #style-3::-webkit-scrollbar { 944 | width: 6px; 945 | background-color: #F5F5F5; } 946 | 947 | #style-3::-webkit-scrollbar-thumb { 948 | background-color: #000000; } 949 | 950 | /* 951 | * STYLE 4 952 | */ 953 | #style-4::-webkit-scrollbar-track { 954 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 955 | background-color: #F5F5F5; } 956 | 957 | #style-4::-webkit-scrollbar { 958 | width: 10px; 959 | background-color: #F5F5F5; } 960 | 961 | #style-4::-webkit-scrollbar-thumb { 962 | background-color: #000000; 963 | border: 2px solid #555555; } 964 | 965 | /* 966 | * STYLE 5 967 | */ 968 | #style-5::-webkit-scrollbar-track { 969 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 970 | background-color: #F5F5F5; } 971 | 972 | #style-5::-webkit-scrollbar { 973 | width: 10px; 974 | background-color: #F5F5F5; } 975 | 976 | #style-5::-webkit-scrollbar-thumb { 977 | background-color: #0ae; 978 | background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent)); } 979 | 980 | /* 981 | * STYLE 6 982 | */ 983 | #style-6::-webkit-scrollbar-track { 984 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 985 | background-color: #F5F5F5; } 986 | 987 | #style-6::-webkit-scrollbar { 988 | width: 10px; 989 | background-color: #F5F5F5; } 990 | 991 | #style-6::-webkit-scrollbar-thumb { 992 | background-color: #F90; 993 | background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); } 994 | 995 | /* 996 | * STYLE 7 997 | */ 998 | #style-7::-webkit-scrollbar-track { 999 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 1000 | background-color: #F5F5F5; 1001 | border-radius: 10px; } 1002 | 1003 | #style-7::-webkit-scrollbar { 1004 | width: 10px; 1005 | background-color: #F5F5F5; } 1006 | 1007 | #style-7::-webkit-scrollbar-thumb { 1008 | border-radius: 10px; 1009 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #7a99d9), color-stop(0.72, #497dbd), color-stop(0.86, #1c3a94)); } 1010 | 1011 | /* 1012 | * STYLE 8 1013 | */ 1014 | #style-8::-webkit-scrollbar-track { 1015 | border: 1px solid black; 1016 | background-color: #F5F5F5; } 1017 | 1018 | #style-8::-webkit-scrollbar { 1019 | width: 10px; 1020 | background-color: #F5F5F5; } 1021 | 1022 | #style-8::-webkit-scrollbar-thumb { 1023 | background-color: #000000; } 1024 | 1025 | /* 1026 | * STYLE 9 1027 | */ 1028 | #style-9::-webkit-scrollbar-track { 1029 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 1030 | background-color: #F5F5F5; } 1031 | 1032 | #style-9::-webkit-scrollbar { 1033 | width: 10px; 1034 | background-color: #F5F5F5; } 1035 | 1036 | #style-9::-webkit-scrollbar-thumb { 1037 | background-color: #F90; 1038 | background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); } 1039 | 1040 | /* 1041 | * STYLE 10 1042 | */ 1043 | #style-10::-webkit-scrollbar-track { 1044 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 1045 | background-color: #F5F5F5; 1046 | border-radius: 10px; } 1047 | 1048 | #style-10::-webkit-scrollbar { 1049 | width: 10px; 1050 | background-color: #F5F5F5; } 1051 | 1052 | #style-10::-webkit-scrollbar-thumb { 1053 | background-color: #AAA; 1054 | border-radius: 10px; 1055 | background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent); } 1056 | 1057 | /* 1058 | * STYLE 11 1059 | */ 1060 | #style-11::-webkit-scrollbar-track { 1061 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 1062 | background-color: #F5F5F5; 1063 | border-radius: 10px; } 1064 | 1065 | #style-11::-webkit-scrollbar { 1066 | width: 10px; 1067 | background-color: #F5F5F5; } 1068 | 1069 | #style-11::-webkit-scrollbar-thumb { 1070 | background-color: #3366FF; 1071 | border-radius: 10px; 1072 | background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent); } 1073 | 1074 | /* 1075 | * STYLE 12 1076 | */ 1077 | #style-12::-webkit-scrollbar-track { 1078 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9); 1079 | border-radius: 10px; 1080 | background-color: #444444; } 1081 | 1082 | #style-12::-webkit-scrollbar { 1083 | width: 12px; 1084 | background-color: #F5F5F5; } 1085 | 1086 | #style-12::-webkit-scrollbar-thumb { 1087 | border-radius: 10px; 1088 | background-color: #D62929; 1089 | background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent); } 1090 | 1091 | /* 1092 | * STYLE 13 1093 | */ 1094 | #style-13::-webkit-scrollbar-track { 1095 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9); 1096 | border-radius: 10px; 1097 | background-color: #CCCCCC; } 1098 | 1099 | #style-13::-webkit-scrollbar { 1100 | width: 12px; 1101 | background-color: #F5F5F5; } 1102 | 1103 | #style-13::-webkit-scrollbar-thumb { 1104 | border-radius: 10px; 1105 | background-color: #D62929; 1106 | background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent); } 1107 | 1108 | /* 1109 | * STYLE 14 1110 | */ 1111 | #style-14::-webkit-scrollbar-track { 1112 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); 1113 | background-color: #CCCCCC; } 1114 | 1115 | #style-14::-webkit-scrollbar { 1116 | width: 10px; 1117 | background-color: #F5F5F5; } 1118 | 1119 | #style-14::-webkit-scrollbar-thumb { 1120 | background-color: #FFF; 1121 | background-image: -webkit-linear-gradient(90deg, black 0%, black 25%, transparent 100%, black 75%, transparent); } 1122 | 1123 | /* 1124 | * STYLE 15 1125 | */ 1126 | #style-15::-webkit-scrollbar-track { 1127 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); 1128 | background-color: #F5F5F5; 1129 | border-radius: 10px; } 1130 | 1131 | #style-15::-webkit-scrollbar { 1132 | width: 10px; 1133 | background-color: #F5F5F5; } 1134 | 1135 | #style-15::-webkit-scrollbar-thumb { 1136 | border-radius: 10px; 1137 | background-color: #FFF; 1138 | background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(0.6, #54DE5D)); } 1139 | 1140 | /* 1141 | * STYLE 16 1142 | */ 1143 | #style-16::-webkit-scrollbar-track { 1144 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); 1145 | background-color: #F5F5F5; 1146 | border-radius: 10px; } 1147 | 1148 | #style-16::-webkit-scrollbar { 1149 | width: 10px; 1150 | background-color: #F5F5F5; } 1151 | 1152 | #style-16::-webkit-scrollbar-thumb { 1153 | border-radius: 10px; 1154 | background-color: #FFF; 1155 | background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); } 1156 | -------------------------------------------------------------------------------- /dist/preface.min.css: -------------------------------------------------------------------------------- 1 | /* PrefaceCSS , Copyright 2019, Conner Luzier */ 2 | @import url(https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap);*{font-family:"Roboto Mono",monospace;font-weight:400;color:#212121;padding:0;margin:0;box-sizing:border-box;word-wrap:break-word}nav{margin:20px auto;max-width:960px;width:95%}nav label{font-weight:700}nav ul{list-style:none;float:right}nav ul li{margin:0 15px}nav *{display:inline-block}@media screen and (max-width:640px){nav{text-align:center}nav>*{display:block}nav ul{float:none;margin-top:15px}}.container{max-width:960px;width:95%;margin:0 auto}.grid-flex{display:flex}.grid-flex-wrap{display:flex;flex-wrap:wrap}.row:after{content:'';display:table;clear:both}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.flex-5{flex:5}.flex-6{flex:6}.flex-7{flex:7}.flex-8{flex:8}.flex-9{flex:9}.flex-10{flex:10}.one.column,.one.columns{width:7.33333%;display:inline-block;margin:0 .5%;float:left}.two.columns{width:15.66667%;display:inline-block;margin:0 .5%;float:left}.three.columns{width:24%;display:inline-block;margin:0 .5%;float:left}.four.columns{width:32.33333%;display:inline-block;margin:0 .5%;float:left}.five.columns{width:40.66667%;display:inline-block;margin:0 .5%;float:left}.six.columns{width:49%;display:inline-block;margin:0 .5%;float:left}.seven.columns{width:57.33333%;display:inline-block;margin:0 .5%;float:left}.eight.columns{width:65.66667%;display:inline-block;margin:0 .5%;float:left}.nine.columns{width:74%;display:inline-block;margin:0 .5%;float:left}.ten.columns{width:82.33333%;display:inline-block;margin:0 .5%;float:left}.eleven.columns{width:90.66667%;display:inline-block;margin:0 .5%;float:left}.twelve.columns{width:99%;display:inline-block;margin:0 .5%;float:left}@media screen and (max-width:750px){.column.desktop,.columns.desktop{display:block!important;width:99%!important}}@media screen and (min-width:750px){.column.mobile,.columns.mobile{display:block!important;width:99%!important}}button{display:inline-block;padding:8px 30px;margin:5px 0;text-align:center;text-transform:uppercase;border:none;outline:0;border-radius:2px;color:#413a3a;cursor:pointer;background-color:#212121;transition:.2s ease-in-out}button:disabled,button:hover{background-color:#878787}button:active{background-color:#000}button.success{background-color:#66cdaa;transition:.2s ease-in-out}button.success:disabled,button.success:hover{background-color:#a0e0ca}button.success:active{background-color:#39ae86}button.error{background-color:#f08080;transition:.2s ease-in-out}button.error:disabled,button.error:hover{background-color:#f8c4c4}button.error:active{background-color:#e83c3c}button.warning{background-color:#fef65b;transition:.2s ease-in-out}button.warning:disabled,button.warning:hover{background-color:#fefaa7}button.warning:active{background-color:#fef20f}button.btn-shadow{box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}button.btn-shadow:hover{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}button.btn-shadow:active{box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}input,select,textarea{display:block;width:100%;padding:5px;margin:5px 0;border:1px solid silver;outline:0;border-radius:2px;background-color:#fff}input:hover,select:hover,textarea:hover{border-color:#6e6e6e}input:focus,select:focus,textarea:focus{border-color:#212121}textarea{resize:vertical;min-height:60px}b,strong{font-weight:700}a{text-decoration:underline;cursor:pointer}a:hover{color:#6e6e6e}a.none{text-decoration:none}h1{font-size:3rem}h2{font-size:2.6rem}h3{font-size:2.2rem}h4{font-size:1.8rem}h5{font-size:1.6rem}h6{font-size:1.4rem}h1,h2,h3,h4,h5,h6{margin-bottom:10px;font-weight:700}small{font-size:.8rem}p{margin:15px 0}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-muted,.text-muted *{color:#616161}.text-success,.text-success *{color:#66cdaa}.text-error,.text-error *{color:#f08080}.text-warning,.text-warning *{color:#fef65b}.text-inverted,.text-inverted *{color:#413a3a}table{border-collapse:collapse;width:100%;margin-top:.5em}@media screen and (max-width:750px){table{overflow-x:auto;display:block}}table td,table th{padding:12px 15px;text-align:left;border-bottom:1px solid silver}ul ul{margin-left:15px}ul .inner,ul.inner{list-style-position:inside}ul .outer,ul.outer{list-style-position:outside}[data-tooltip]{position:relative;z-index:2;cursor:pointer}[data-tooltip]:after,[data-tooltip]:before{visibility:hidden;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;pointer-events:none}[data-tooltip]:before{position:absolute;bottom:150%;left:50%;margin-bottom:5px;margin-left:-80px;padding:7px;width:160px;border-radius:3px;background-color:#000;background-color:rgba(51,51,51,.9);color:#fff;content:attr(data-tooltip);text-align:center;font-size:14px;line-height:1.2}[data-tooltip]:after{position:absolute;bottom:150%;left:50%;margin-left:-5px;width:0;border-top:5px solid #000;border-top:5px solid rgba(51,51,51,.9);border-right:5px solid transparent;border-left:5px solid transparent;content:" ";font-size:0;line-height:0}[data-tooltip]:hover:after,[data-tooltip]:hover:before{visibility:visible;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1}.card{margin:15px;border-radius:1px;border:.5px solid silver}.card img{width:100%;display:block;border-radius:1px 1px 0 0}.card .content{padding:10px}.card .footer{border-top:1px solid silver;padding:5px 15px;text-align:right}.card.card-shadow{box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);border:none}hr{border:none;outline:0;height:1px;width:60%;background-color:silver}.bg-success{background-color:#66cdaa}.bg-warning{background-color:#fef65b}.bg-error{background-color:#f08080}.bg-success-bright{background-color:#66cdaa}.bg-warning-bright{background-color:#fef65b}.bg-error-bright{background-color:#f08080}code{background-color:silver;display:inline-block;padding:4px 8px;font-family:monospace;overflow-x:auto}pre>code{display:block;white-space:pre}.cover{min-height:60vh;display:flex;align-items:center;justify-content:center}.cover>div{flex:1}.progress{display:block;width:100%;height:3px;margin:5px;background-color:silver}.progress .bar{transition:width .5s ease-in-out;display:block;height:100%;width:100%;max-width:100%}img{display:block;width:100%}.pagination{display:flex;width:100%;text-align:center;padding:15px}.pagination *{text-decoration:none}.pagination>*{flex:1;padding:3px}.pagination>:hover{background-color:#cdcdcd;transition:.3s background-color ease-in-out}.pagination>:hover,.pagination>:hover *{color:#212121}.pagination .action{flex:.5}.pagination.no-flex{display:block}.pagination.no-flex>*{display:inline-block;margin:0 10px}.lds-facebook{display:inline-block;position:relative;margin:25px;width:64px;height:64px}.lds-facebook div{display:inline-block;position:absolute;left:6px;width:13px;background:#413a3a;animation:lds-facebook 1.2s cubic-bezier(0,.5,.5,1) infinite}.lds-facebook div:nth-child(1){left:6px;animation-delay:-.24s}.lds-facebook div:nth-child(2){left:26px;animation-delay:-.12s}.lds-facebook div:nth-child(3){left:45px;animation-delay:0}@keyframes lds-facebook{0%{top:6px;height:51px}100%,50%{top:19px;height:26px}}.lds-roller{display:inline-block;position:relative;margin:25px;width:64px;height:64px}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:32px 32px}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#413a3a;margin:-3px 0 0 -3px}.lds-roller div:nth-child(1){animation-delay:-36ms}.lds-roller div:nth-child(1):after{top:50px;left:50px}.lds-roller div:nth-child(2){animation-delay:-72ms}.lds-roller div:nth-child(2):after{top:54px;left:45px}.lds-roller div:nth-child(3){animation-delay:-108ms}.lds-roller div:nth-child(3):after{top:57px;left:39px}.lds-roller div:nth-child(4){animation-delay:-144ms}.lds-roller div:nth-child(4):after{top:58px;left:32px}.lds-roller div:nth-child(5){animation-delay:-.18s}.lds-roller div:nth-child(5):after{top:57px;left:25px}.lds-roller div:nth-child(6){animation-delay:-216ms}.lds-roller div:nth-child(6):after{top:54px;left:19px}.lds-roller div:nth-child(7){animation-delay:-252ms}.lds-roller div:nth-child(7):after{top:50px;left:14px}.lds-roller div:nth-child(8){animation-delay:-288ms}.lds-roller div:nth-child(8):after{top:45px;left:10px}@keyframes lds-roller{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.lds-ripple{display:inline-block;position:relative;margin:25px;width:64px;height:64px}.lds-ripple div{position:absolute;border:4px solid #413a3a;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0,.2,.8,1) infinite}.lds-ripple div:nth-child(2){animation-delay:-.5s}@keyframes lds-ripple{0%{top:28px;left:28px;width:0;height:0;opacity:1}100%{top:-1px;left:-1px;width:58px;height:58px;opacity:0}}.lds-ellipsis{display:inline-block;position:relative;margin:25px;width:64px;height:64px}.lds-ellipsis div{position:absolute;top:27px;width:11px;height:11px;border-radius:50%;background:#413a3a;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:6px;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:6px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:26px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:45px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(19px,0)}}.lds-circle{display:inline-block;margin:25px;transform:translateZ(1px)}.lds-circle>div{display:inline-block;width:51px;height:51px;margin:6px;border-radius:50%;background:#413a3a;animation:lds-circle 2.4s cubic-bezier(0,.2,.8,1) infinite}@keyframes lds-circle{0%,100%{animation-timing-function:cubic-bezier(.5,0,1,.5)}0%{transform:rotateY(0)}50%{transform:rotateY(1800deg);animation-timing-function:cubic-bezier(0,.5,.5,1)}100%{transform:rotateY(3600deg)}}.lds-hourglass{display:inline-block;position:relative;margin:25px;width:64px;height:64px}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:6px;box-sizing:border-box;border:26px solid #413a3a;border-color:#413a3a transparent #413a3a transparent;animation:lds-hourglass 1.2s infinite}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(.215,.61,.355,1)}100%{transform:rotate(1800deg)}}.spinner{position:relative;display:inline-block;margin:25px;width:64px;height:64px}.cube1,.cube2{background-color:#413a3a;width:15px;height:15px;position:absolute;top:0;left:0;animation:sk-cubemove 1.8s infinite ease-in-out}.cube2{animation-delay:-.9s}@keyframes sk-cubemove{25%{transform:translateX(42px) rotate(-90deg) scale(.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)}50%{transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)}50.1%{transform:translateX(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5);-webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)}100%{transform:rotate(-360deg);-webkit-transform:rotate(-360deg)}}.box-spinner{position:relative;display:inline-block;margin:25px;width:64px;height:64px;background-color:#413a3a;animation:sk-rotateplane 1.2s infinite ease-in-out}@keyframes sk-rotateplane{0%{transform:perspective(120px) rotateX(0) rotateY(0);-webkit-transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-cube-grid{position:relative;display:inline-block;margin:25px;width:64px;height:64px}.sk-cube-grid .sk-cube{width:33%;height:33%;background-color:#413a3a;float:left;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{animation-delay:.2s}.sk-cube-grid .sk-cube2{animation-delay:.3s}.sk-cube-grid .sk-cube3{animation-delay:.4s}.sk-cube-grid .sk-cube4{animation-delay:.1s}.sk-cube-grid .sk-cube5{animation-delay:.2s}.sk-cube-grid .sk-cube6{animation-delay:.3s}.sk-cube-grid .sk-cube7{animation-delay:0s}.sk-cube-grid .sk-cube8{animation-delay:.1s}.sk-cube-grid .sk-cube9{animation-delay:.2s}@keyframes sk-cubeGridScaleDelay{0%,100%,70%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-folding-cube{margin:25px;width:40px;height:40px;position:relative;display:inline-block;transform:rotateZ(45deg)}.sk-folding-cube .sk-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-folding-cube .sk-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#413a3a;animation:sk-foldCubeAngle 2.4s infinite linear both;transform-origin:100% 100%}.sk-folding-cube .sk-cube2{transform:scale(1.1) rotateZ(90deg)}.sk-folding-cube .sk-cube3{transform:scale(1.1) rotateZ(180deg)}.sk-folding-cube .sk-cube4{transform:scale(1.1) rotateZ(270deg)}.sk-folding-cube .sk-cube2:before{animation-delay:.3s}.sk-folding-cube .sk-cube3:before{animation-delay:.6s}.sk-folding-cube .sk-cube4:before{animation-delay:.9s}@keyframes sk-foldCubeAngle{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}100%,90%{transform:perspective(140px) rotateY(180deg);opacity:0}}.scrollbar{margin-left:30px;float:left;height:300px;width:65px;background:#f5f5f5;overflow-y:scroll;margin-bottom:25px}.force-overflow{min-height:450px}#wrapper{text-align:center;width:500px;margin:auto}#style-1::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f5f5f5}#style-1::-webkit-scrollbar{width:12px;background-color:#f5f5f5}#style-1::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#555}#style-2::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f5f5f5}#style-2::-webkit-scrollbar{width:12px;background-color:#f5f5f5}#style-2::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#d62929}#style-3::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5}#style-3::-webkit-scrollbar{width:6px;background-color:#f5f5f5}#style-3::-webkit-scrollbar-thumb{background-color:#000}#style-4::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5}#style-4::-webkit-scrollbar{width:10px;background-color:#f5f5f5}#style-4::-webkit-scrollbar-thumb{background-color:#000;border:2px solid #555}#style-5::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5}#style-5::-webkit-scrollbar{width:10px;background-color:#f5f5f5}#style-5::-webkit-scrollbar-thumb{background-color:#0ae;background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(.5,rgba(255,255,255,.2)),color-stop(.5,transparent),to(transparent))}#style-6::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5}#style-6::-webkit-scrollbar{width:10px;background-color:#f5f5f5}#style-6::-webkit-scrollbar-thumb{background-color:#f90;background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)}#style-7::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5;border-radius:10px}#style-7::-webkit-scrollbar{width:10px;background-color:#f5f5f5}#style-7::-webkit-scrollbar-thumb{border-radius:10px;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(.44,#7a99d9),color-stop(.72,#497dbd),color-stop(.86,#1c3a94))}#style-8::-webkit-scrollbar-track{border:1px solid #000;background-color:#f5f5f5}#style-8::-webkit-scrollbar{width:10px;background-color:#f5f5f5}#style-8::-webkit-scrollbar-thumb{background-color:#000}#style-9::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5}#style-9::-webkit-scrollbar{width:10px;background-color:#f5f5f5}#style-9::-webkit-scrollbar-thumb{background-color:#f90;background-image:-webkit-linear-gradient(90deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)}#style-10::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5;border-radius:10px}#style-10::-webkit-scrollbar{width:10px;background-color:#f5f5f5}#style-10::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:10px;background-image:-webkit-linear-gradient(90deg,rgba(0,0,0,.2) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.2) 75%,transparent 75%,transparent)}#style-11::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5;border-radius:10px}#style-11::-webkit-scrollbar{width:10px;background-color:#f5f5f5}#style-11::-webkit-scrollbar-thumb{background-color:#36f;border-radius:10px;background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) 75%,transparent 75%,transparent)}#style-12::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.9);border-radius:10px;background-color:#444}#style-12::-webkit-scrollbar{width:12px;background-color:#f5f5f5}#style-12::-webkit-scrollbar-thumb{border-radius:10px;background-color:#d62929;background-image:-webkit-linear-gradient(90deg,transparent,rgba(0,0,0,.4) 50%,transparent,transparent)}#style-13::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.9);border-radius:10px;background-color:#ccc}#style-13::-webkit-scrollbar{width:12px;background-color:#f5f5f5}#style-13::-webkit-scrollbar-thumb{border-radius:10px;background-color:#d62929;background-image:-webkit-linear-gradient(90deg,transparent,rgba(0,0,0,.4) 50%,transparent,transparent)}#style-14::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.6);background-color:#ccc}#style-14::-webkit-scrollbar{width:10px;background-color:#f5f5f5}#style-14::-webkit-scrollbar-thumb{background-color:#fff;background-image:-webkit-linear-gradient(90deg,#000 0,#000 25%,transparent 100%,#000 75%,transparent)}#style-15::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#f5f5f5;border-radius:10px}#style-15::-webkit-scrollbar{width:10px;background-color:#f5f5f5}#style-15::-webkit-scrollbar-thumb{border-radius:10px;background-color:#fff;background-image:-webkit-gradient(linear,40% 0,75% 84%,from(#4d9c41),to(#19911d),color-stop(.6,#54de5d))}#style-16::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#f5f5f5;border-radius:10px}#style-16::-webkit-scrollbar{width:10px;background-color:#f5f5f5}#style-16::-webkit-scrollbar-thumb{border-radius:10px;background-color:#fff;background-image:-webkit-linear-gradient(top,#e4f5fc 0,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%)} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const sass = require('gulp-sass'); 3 | const autoprefixer = require('gulp-autoprefixer'); 4 | const cleanCSS = require('gulp-clean-css'); 5 | const banner = require('gulp-banner'); 6 | const rename = require('gulp-rename'); 7 | 8 | gulp.task('scss', function () { 9 | return gulp.src('./src/style.scss') 10 | .pipe(sass().on('error', sass.logError)) 11 | .pipe(autoprefixer({ browsers: ['> 1%', 'IE 7'], cascade: false })) 12 | .pipe(banner('/* PrefaceCSS , Copyright 2019, Conner Luzier */\n', {})) 13 | .pipe(rename('preface.css')) 14 | .pipe(gulp.dest('./dist')); 15 | }); 16 | 17 | gulp.task('scss:min', function () { 18 | return gulp.src('./src/style.scss') 19 | .pipe(sass().on('error', sass.logError)) 20 | .pipe(autoprefixer({ browsers: ['> 1%', 'IE 7'], cascade: false })) 21 | .pipe(cleanCSS({compatibility: 'ie8'})) 22 | .pipe(banner('/* PrefaceCSS , Copyright 2019, Conner Luzier */\n', {})) 23 | .pipe(rename('preface.min.css')) 24 | .pipe(gulp.dest('./dist')); 25 | }); 26 | 27 | gulp.task('watch', function () { 28 | gulp.watch('./src/*.scss', ['scss', 'scss:min']); 29 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "PrefaceCSS", 3 | "version": "3.0.0", 4 | "description": "A CSS Boilerplate for minimalists https://cluzier.github.io/css-boilerplate/dist/index.html", 5 | "author": "Conner Luzier ", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/cluzier/PrefaceCSS" 9 | }, 10 | "keywords": [ 11 | "PrefaceCSS", 12 | "preface", 13 | "boilerplate", 14 | "simple", 15 | "css" 16 | ], 17 | "devDependencies": { 18 | "@fortawesome/fontawesome-free": "^5.9.0", 19 | "gulp": "latest", 20 | "gulp-autoprefixer": "latest", 21 | "gulp-banner": "latest", 22 | "gulp-clean-css": "latest", 23 | "gulp-rename": "latest", 24 | "gulp-sass": "latest" 25 | }, 26 | "scripts": { 27 | "build-css": "gulp sass", 28 | "watch-css": "gulp sass:watch" 29 | }, 30 | "license": "MIT", 31 | "dependencies": { 32 | "font-awesome": "^4.7.0", 33 | "loaders.css": "^0.1.2", 34 | "lodash": "^4.17.21", 35 | "lodash.template": "^4.5.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /screenshots/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cluzier/PrefaceCSS/29b6fc30e0b7244f70379559d0cb5843e3521815/screenshots/screenshot.png -------------------------------------------------------------------------------- /src/_base.scss: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: $font; 3 | font-weight: 400; 4 | 5 | color: $textColor; 6 | 7 | padding: 0; 8 | margin: 0; 9 | 10 | box-sizing: border-box; 11 | word-wrap: break-word; 12 | } 13 | -------------------------------------------------------------------------------- /src/_button.scss: -------------------------------------------------------------------------------- 1 | @mixin button_color($color, $change) { 2 | background-color: $color; 3 | transition: 0.2s ease-in-out; 4 | 5 | // Actions 6 | &:hover, &:disabled { 7 | background-color: lighten($color, $change); 8 | } 9 | 10 | &:active { 11 | background-color: darken($color, $change); 12 | } 13 | } 14 | 15 | button { 16 | display: inline-block; 17 | 18 | padding: 8px 30px; 19 | margin: 5px 0; 20 | 21 | text-align: center; 22 | text-transform: uppercase; 23 | 24 | border: none; 25 | outline: none; 26 | 27 | border-radius: 2px; 28 | 29 | color: $textInvertColor; 30 | 31 | cursor: pointer; 32 | 33 | // Colors 34 | @include button_color($textColor, 40%); 35 | 36 | &.success { 37 | @include button_color($successColor, 15%); 38 | } 39 | 40 | &.error { 41 | @include button_color($errorColor, 15%); 42 | } 43 | 44 | &.warning { 45 | @include button_color($warningColor, 15%); 46 | } 47 | 48 | // Extras 49 | &.btn-shadow { 50 | box-shadow: $shadowIdle; 51 | 52 | // Actions 53 | &:hover { 54 | box-shadow: $shadowTiny; 55 | } 56 | 57 | &:active { 58 | box-shadow: $shadowHuge; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/_extra.scss: -------------------------------------------------------------------------------- 1 | // Cards 2 | .card { 3 | margin: 15px; 4 | border-radius: 1px; 5 | border: .5px solid $mutedColor; 6 | 7 | // Child elements 8 | img { 9 | width: 100%; 10 | display: block; 11 | border-radius: 1px 1px 0 0; 12 | } 13 | 14 | .content { 15 | padding: 10px; 16 | } 17 | 18 | .footer { 19 | border-top: 1px solid $mutedColor; 20 | padding: 5px 15px; 21 | text-align: right; 22 | } 23 | 24 | &.card-shadow { 25 | box-shadow: $shadowIdle; 26 | border: none; 27 | } 28 | } 29 | 30 | // Horizontal line 31 | hr { 32 | border: none; 33 | outline: none; 34 | 35 | height: 1px; 36 | width: 60%; 37 | background-color: $mutedColor; 38 | } 39 | 40 | // Background colors 41 | .bg-success { background-color: $successColor; } 42 | .bg-warning { background-color: $warningColor; } 43 | .bg-error { background-color: $errorColor; } 44 | 45 | .bg-success-bright { background-color: ($successColor); } 46 | .bg-warning-bright { background-color: ($warningColor); } 47 | .bg-error-bright { background-color: ($errorColor); } 48 | 49 | // Code element 50 | code { 51 | background-color: $mutedColor; 52 | display: inline-block; 53 | padding: 4px 8px; 54 | font-family: monospace; 55 | overflow-x: auto; 56 | } 57 | 58 | pre > code { 59 | display: block; 60 | white-space: pre; 61 | } 62 | 63 | // Cover 64 | .cover { 65 | min-height: 60vh; 66 | display: flex; 67 | align-items: center; 68 | justify-content: center; 69 | 70 | // Child elements 71 | & > div { 72 | flex: 1; 73 | } 74 | } 75 | 76 | // Progress bar 77 | .progress { 78 | display: block; 79 | width: 100%; 80 | height: 3px; 81 | margin: 5px; 82 | background-color: $mutedColor; 83 | 84 | .bar { 85 | transition: width .5s ease-in-out; 86 | display: block; 87 | height: 100%; 88 | width: 100%; 89 | max-width: 100%; 90 | } 91 | } 92 | 93 | // Other stuff 94 | img { 95 | display: block; 96 | width: 100%; 97 | } 98 | 99 | .pagination { 100 | display: flex; 101 | width: 100%; 102 | text-align: center; 103 | padding: 15px; 104 | 105 | // Child elements 106 | * { 107 | text-decoration: none; 108 | } 109 | 110 | & > * { 111 | flex: 1; 112 | padding: 3px; 113 | 114 | &:hover { 115 | &, * { 116 | color: $textColor; 117 | } 118 | 119 | background-color: lighten($mutedColor, 5%); 120 | transition: .3s background-color ease-in-out; 121 | } 122 | } 123 | 124 | .action { 125 | flex: .5; 126 | } 127 | 128 | // Extras 129 | &.no-flex { 130 | display: block; 131 | 132 | // Child elements 133 | & > * { 134 | display: inline-block; 135 | margin: 0 10px; 136 | } 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /src/_grid.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 960px; 3 | width: 95%; 4 | margin: 0 auto; 5 | } 6 | 7 | // New flex system 8 | .grid-flex { 9 | display: flex; 10 | } 11 | 12 | .grid-flex-wrap { 13 | display: flex; 14 | flex-wrap: wrap; 15 | } 16 | 17 | .row:after { 18 | content: ''; 19 | display: table; 20 | clear: both; 21 | } 22 | 23 | @for $i from 1 through 10 { 24 | .flex-#{$i} { 25 | flex: $i; 26 | } 27 | } 28 | 29 | /* Old grid system */ 30 | @mixin column($width) { 31 | width: $width; 32 | display: inline-block; 33 | margin: 0 .5%; 34 | float: left; 35 | } 36 | 37 | // Grid for any screen size 38 | @for $i from 1 through length($columnNames) { 39 | // Calculate width 40 | $width: ($i * $columnWidth) + ($i - 1 * 1%); 41 | 42 | // Change columns to column for one 43 | @if $i == 1 { 44 | .#{nth($columnNames, $i)}.column, .#{nth($columnNames, $i)}.columns { 45 | @include column($width); 46 | } 47 | // ELse generate normal class 48 | } @else { 49 | .#{nth($columnNames, $i)}.columns { 50 | @include column($width); 51 | } 52 | } 53 | } 54 | 55 | // Desktop Only 56 | @media screen and (max-width: $mobileBreak) { 57 | .columns.desktop, .column.desktop { 58 | display: block !important; 59 | width: 99% !important; 60 | } 61 | } 62 | 63 | // Mobile only 64 | @media screen and (min-width: $mobileBreak) { 65 | .columns.mobile, .column.mobile { 66 | display: block !important; 67 | width: 99% !important; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/_input.scss: -------------------------------------------------------------------------------- 1 | input, textarea, select { 2 | display: block; 3 | width: 100%; 4 | 5 | padding: 5px; 6 | margin: 5px 0; 7 | 8 | border: 1px solid $mutedColor; 9 | outline: none; 10 | 11 | border-radius: 2px; 12 | background-color: #ffffff; 13 | 14 | // Actions 15 | &:hover { 16 | border-color: lighten($textColor, $ligthenIntesity); 17 | } 18 | 19 | &:focus { 20 | border-color: $textColor; 21 | } 22 | } 23 | 24 | textarea { 25 | resize: vertical; 26 | min-height: 60px; 27 | } 28 | -------------------------------------------------------------------------------- /src/_lists.scss: -------------------------------------------------------------------------------- 1 | ul { 2 | // CHild elements 3 | ul { 4 | margin-left: 15px; 5 | } 6 | 7 | &.inner, .inner { 8 | list-style-position: inside; 9 | } 10 | 11 | &.outer, .outer { 12 | list-style-position: outside; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/_loaders.scss: -------------------------------------------------------------------------------- 1 | // using https://loading.io/css/ 2 | 3 | // declare colors 4 | $loaderColor: rgb(65, 58, 58); 5 | 6 | // start class styles 7 | .lds-facebook { 8 | display: inline-block; 9 | position: relative; 10 | margin: 25px; 11 | width: 64px; 12 | height: 64px; 13 | } 14 | .lds-facebook div { 15 | display: inline-block; 16 | position: absolute; 17 | left: 6px; 18 | width: 13px; 19 | background: $loaderColor; 20 | animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; 21 | } 22 | .lds-facebook div:nth-child(1) { 23 | left: 6px; 24 | animation-delay: -0.24s; 25 | } 26 | .lds-facebook div:nth-child(2) { 27 | left: 26px; 28 | animation-delay: -0.12s; 29 | } 30 | .lds-facebook div:nth-child(3) { 31 | left: 45px; 32 | animation-delay: 0; 33 | } 34 | 35 | // start keyframes/animations 36 | @keyframes lds-facebook { 37 | 0% { 38 | top: 6px; 39 | height: 51px; 40 | } 41 | 50%, 100% { 42 | top: 19px; 43 | height: 26px; 44 | } 45 | } 46 | 47 | 48 | .lds-roller { 49 | display: inline-block; 50 | position: relative; 51 | margin: 25px; 52 | width: 64px; 53 | height: 64px; 54 | } 55 | .lds-roller div { 56 | animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; 57 | transform-origin: 32px 32px; 58 | } 59 | .lds-roller div:after { 60 | content: " "; 61 | display: block; 62 | position: absolute; 63 | width: 6px; 64 | height: 6px; 65 | border-radius: 50%; 66 | background: $loaderColor; 67 | margin: -3px 0 0 -3px; 68 | } 69 | .lds-roller div:nth-child(1) { 70 | animation-delay: -0.036s; 71 | } 72 | .lds-roller div:nth-child(1):after { 73 | top: 50px; 74 | left: 50px; 75 | } 76 | .lds-roller div:nth-child(2) { 77 | animation-delay: -0.072s; 78 | } 79 | .lds-roller div:nth-child(2):after { 80 | top: 54px; 81 | left: 45px; 82 | } 83 | .lds-roller div:nth-child(3) { 84 | animation-delay: -0.108s; 85 | } 86 | .lds-roller div:nth-child(3):after { 87 | top: 57px; 88 | left: 39px; 89 | } 90 | .lds-roller div:nth-child(4) { 91 | animation-delay: -0.144s; 92 | } 93 | .lds-roller div:nth-child(4):after { 94 | top: 58px; 95 | left: 32px; 96 | } 97 | .lds-roller div:nth-child(5) { 98 | animation-delay: -0.18s; 99 | } 100 | .lds-roller div:nth-child(5):after { 101 | top: 57px; 102 | left: 25px; 103 | } 104 | .lds-roller div:nth-child(6) { 105 | animation-delay: -0.216s; 106 | } 107 | .lds-roller div:nth-child(6):after { 108 | top: 54px; 109 | left: 19px; 110 | } 111 | .lds-roller div:nth-child(7) { 112 | animation-delay: -0.252s; 113 | } 114 | .lds-roller div:nth-child(7):after { 115 | top: 50px; 116 | left: 14px; 117 | } 118 | .lds-roller div:nth-child(8) { 119 | animation-delay: -0.288s; 120 | } 121 | .lds-roller div:nth-child(8):after { 122 | top: 45px; 123 | left: 10px; 124 | } 125 | @keyframes lds-roller { 126 | 0% { 127 | transform: rotate(0deg); 128 | } 129 | 100% { 130 | transform: rotate(360deg); 131 | } 132 | } 133 | 134 | 135 | .lds-ripple { 136 | display: inline-block; 137 | position: relative; 138 | margin: 25px; 139 | width: 64px; 140 | height: 64px; 141 | } 142 | .lds-ripple div { 143 | position: absolute; 144 | border: 4px solid $loaderColor; 145 | opacity: 1; 146 | border-radius: 50%; 147 | animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; 148 | } 149 | .lds-ripple div:nth-child(2) { 150 | animation-delay: -0.5s; 151 | } 152 | @keyframes lds-ripple { 153 | 0% { 154 | top: 28px; 155 | left: 28px; 156 | width: 0; 157 | height: 0; 158 | opacity: 1; 159 | } 160 | 100% { 161 | top: -1px; 162 | left: -1px; 163 | width: 58px; 164 | height: 58px; 165 | opacity: 0; 166 | } 167 | } 168 | 169 | 170 | .lds-ellipsis { 171 | display: inline-block; 172 | position: relative; 173 | margin: 25px; 174 | width: 64px; 175 | height: 64px; 176 | } 177 | .lds-ellipsis div { 178 | position: absolute; 179 | top: 27px; 180 | width: 11px; 181 | height: 11px; 182 | border-radius: 50%; 183 | background: $loaderColor; 184 | animation-timing-function: cubic-bezier(0, 1, 1, 0); 185 | } 186 | .lds-ellipsis div:nth-child(1) { 187 | left: 6px; 188 | animation: lds-ellipsis1 0.6s infinite; 189 | } 190 | .lds-ellipsis div:nth-child(2) { 191 | left: 6px; 192 | animation: lds-ellipsis2 0.6s infinite; 193 | } 194 | .lds-ellipsis div:nth-child(3) { 195 | left: 26px; 196 | animation: lds-ellipsis2 0.6s infinite; 197 | } 198 | .lds-ellipsis div:nth-child(4) { 199 | left: 45px; 200 | animation: lds-ellipsis3 0.6s infinite; 201 | } 202 | @keyframes lds-ellipsis1 { 203 | 0% { 204 | transform: scale(0); 205 | } 206 | 100% { 207 | transform: scale(1); 208 | } 209 | } 210 | @keyframes lds-ellipsis3 { 211 | 0% { 212 | transform: scale(1); 213 | } 214 | 100% { 215 | transform: scale(0); 216 | } 217 | } 218 | @keyframes lds-ellipsis2 { 219 | 0% { 220 | transform: translate(0, 0); 221 | } 222 | 100% { 223 | transform: translate(19px, 0); 224 | } 225 | } 226 | 227 | 228 | .lds-circle { 229 | display: inline-block; 230 | margin: 25px; 231 | transform: translateZ(1px); 232 | } 233 | .lds-circle > div { 234 | display: inline-block; 235 | width: 51px; 236 | height: 51px; 237 | margin: 6px; 238 | border-radius: 50%; 239 | background: $loaderColor; 240 | animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite; 241 | } 242 | @keyframes lds-circle { 243 | 0%, 100% { 244 | animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); 245 | } 246 | 0% { 247 | transform: rotateY(0deg); 248 | } 249 | 50% { 250 | transform: rotateY(1800deg); 251 | animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); 252 | } 253 | 100% { 254 | transform: rotateY(3600deg); 255 | } 256 | } 257 | 258 | 259 | .lds-hourglass { 260 | display: inline-block; 261 | position: relative; 262 | margin: 25px; 263 | width: 64px; 264 | height: 64px; 265 | } 266 | .lds-hourglass:after { 267 | content: " "; 268 | display: block; 269 | border-radius: 50%; 270 | width: 0; 271 | height: 0; 272 | margin: 6px; 273 | box-sizing: border-box; 274 | border: 26px solid $loaderColor; 275 | border-color: $loaderColor transparent $loaderColor transparent; 276 | animation: lds-hourglass 1.2s infinite; 277 | } 278 | @keyframes lds-hourglass { 279 | 0% { 280 | transform: rotate(0); 281 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 282 | } 283 | 50% { 284 | transform: rotate(900deg); 285 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 286 | } 287 | 100% { 288 | transform: rotate(1800deg); 289 | } 290 | } 291 | 292 | 293 | .spinner { 294 | position: relative; 295 | display: inline-block; 296 | margin: 25px; 297 | width: 64px; 298 | height: 64px; 299 | } 300 | 301 | .cube1, .cube2 { 302 | background-color: $loaderColor; 303 | width: 15px; 304 | height: 15px; 305 | position: absolute; 306 | top: 0; 307 | left: 0; 308 | 309 | -webkit-animation: sk-cubemove 1.8s infinite ease-in-out; 310 | animation: sk-cubemove 1.8s infinite ease-in-out; 311 | } 312 | 313 | .cube2 { 314 | -webkit-animation-delay: -0.9s; 315 | animation-delay: -0.9s; 316 | } 317 | 318 | @-webkit-keyframes sk-cubemove { 319 | 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 320 | 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 321 | 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 322 | 100% { -webkit-transform: rotate(-360deg) } 323 | } 324 | 325 | @keyframes sk-cubemove { 326 | 25% { 327 | transform: translateX(42px) rotate(-90deg) scale(0.5); 328 | -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); 329 | } 50% { 330 | transform: translateX(42px) translateY(42px) rotate(-179deg); 331 | -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); 332 | } 50.1% { 333 | transform: translateX(42px) translateY(42px) rotate(-180deg); 334 | -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); 335 | } 75% { 336 | transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 337 | -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 338 | } 100% { 339 | transform: rotate(-360deg); 340 | -webkit-transform: rotate(-360deg); 341 | } 342 | } 343 | 344 | .box-spinner { 345 | position: relative; 346 | display: inline-block; 347 | margin: 25px; 348 | width: 64px; 349 | height: 64px; 350 | background-color: $loaderColor; 351 | 352 | -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; 353 | animation: sk-rotateplane 1.2s infinite ease-in-out; 354 | } 355 | 356 | @-webkit-keyframes sk-rotateplane { 357 | 0% { -webkit-transform: perspective(120px) } 358 | 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 359 | 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } 360 | } 361 | 362 | @keyframes sk-rotateplane { 363 | 0% { 364 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 365 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 366 | } 50% { 367 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 368 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 369 | } 100% { 370 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 371 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 372 | } 373 | } 374 | 375 | .sk-cube-grid { 376 | position: relative; 377 | display: inline-block; 378 | margin: 25px; 379 | width: 64px; 380 | height: 64px; 381 | } 382 | 383 | .sk-cube-grid .sk-cube { 384 | width: 33%; 385 | height: 33%; 386 | background-color: $loaderColor; 387 | float: left; 388 | -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 389 | animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 390 | } 391 | .sk-cube-grid .sk-cube1 { 392 | -webkit-animation-delay: 0.2s; 393 | animation-delay: 0.2s; } 394 | .sk-cube-grid .sk-cube2 { 395 | -webkit-animation-delay: 0.3s; 396 | animation-delay: 0.3s; } 397 | .sk-cube-grid .sk-cube3 { 398 | -webkit-animation-delay: 0.4s; 399 | animation-delay: 0.4s; } 400 | .sk-cube-grid .sk-cube4 { 401 | -webkit-animation-delay: 0.1s; 402 | animation-delay: 0.1s; } 403 | .sk-cube-grid .sk-cube5 { 404 | -webkit-animation-delay: 0.2s; 405 | animation-delay: 0.2s; } 406 | .sk-cube-grid .sk-cube6 { 407 | -webkit-animation-delay: 0.3s; 408 | animation-delay: 0.3s; } 409 | .sk-cube-grid .sk-cube7 { 410 | -webkit-animation-delay: 0s; 411 | animation-delay: 0s; } 412 | .sk-cube-grid .sk-cube8 { 413 | -webkit-animation-delay: 0.1s; 414 | animation-delay: 0.1s; } 415 | .sk-cube-grid .sk-cube9 { 416 | -webkit-animation-delay: 0.2s; 417 | animation-delay: 0.2s; } 418 | 419 | @-webkit-keyframes sk-cubeGridScaleDelay { 420 | 0%, 70%, 100% { 421 | -webkit-transform: scale3D(1, 1, 1); 422 | transform: scale3D(1, 1, 1); 423 | } 35% { 424 | -webkit-transform: scale3D(0, 0, 1); 425 | transform: scale3D(0, 0, 1); 426 | } 427 | } 428 | 429 | @keyframes sk-cubeGridScaleDelay { 430 | 0%, 70%, 100% { 431 | -webkit-transform: scale3D(1, 1, 1); 432 | transform: scale3D(1, 1, 1); 433 | } 35% { 434 | -webkit-transform: scale3D(0, 0, 1); 435 | transform: scale3D(0, 0, 1); 436 | } 437 | } 438 | 439 | .sk-folding-cube { 440 | margin: 25px; 441 | width: 40px; 442 | height: 40px; 443 | position: relative; 444 | display: inline-block; 445 | -webkit-transform: rotateZ(45deg); 446 | transform: rotateZ(45deg); 447 | } 448 | 449 | .sk-folding-cube .sk-cube { 450 | float: left; 451 | width: 50%; 452 | height: 50%; 453 | position: relative; 454 | -webkit-transform: scale(1.1); 455 | -ms-transform: scale(1.1); 456 | transform: scale(1.1); 457 | } 458 | .sk-folding-cube .sk-cube:before { 459 | content: ''; 460 | position: absolute; 461 | top: 0; 462 | left: 0; 463 | width: 100%; 464 | height: 100%; 465 | background-color: $loaderColor; 466 | -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; 467 | animation: sk-foldCubeAngle 2.4s infinite linear both; 468 | -webkit-transform-origin: 100% 100%; 469 | -ms-transform-origin: 100% 100%; 470 | transform-origin: 100% 100%; 471 | } 472 | .sk-folding-cube .sk-cube2 { 473 | -webkit-transform: scale(1.1) rotateZ(90deg); 474 | transform: scale(1.1) rotateZ(90deg); 475 | } 476 | .sk-folding-cube .sk-cube3 { 477 | -webkit-transform: scale(1.1) rotateZ(180deg); 478 | transform: scale(1.1) rotateZ(180deg); 479 | } 480 | .sk-folding-cube .sk-cube4 { 481 | -webkit-transform: scale(1.1) rotateZ(270deg); 482 | transform: scale(1.1) rotateZ(270deg); 483 | } 484 | .sk-folding-cube .sk-cube2:before { 485 | -webkit-animation-delay: 0.3s; 486 | animation-delay: 0.3s; 487 | } 488 | .sk-folding-cube .sk-cube3:before { 489 | -webkit-animation-delay: 0.6s; 490 | animation-delay: 0.6s; 491 | } 492 | .sk-folding-cube .sk-cube4:before { 493 | -webkit-animation-delay: 0.9s; 494 | animation-delay: 0.9s; 495 | } 496 | @-webkit-keyframes sk-foldCubeAngle { 497 | 0%, 10% { 498 | -webkit-transform: perspective(140px) rotateX(-180deg); 499 | transform: perspective(140px) rotateX(-180deg); 500 | opacity: 0; 501 | } 25%, 75% { 502 | -webkit-transform: perspective(140px) rotateX(0deg); 503 | transform: perspective(140px) rotateX(0deg); 504 | opacity: 1; 505 | } 90%, 100% { 506 | -webkit-transform: perspective(140px) rotateY(180deg); 507 | transform: perspective(140px) rotateY(180deg); 508 | opacity: 0; 509 | } 510 | } 511 | 512 | @keyframes sk-foldCubeAngle { 513 | 0%, 10% { 514 | -webkit-transform: perspective(140px) rotateX(-180deg); 515 | transform: perspective(140px) rotateX(-180deg); 516 | opacity: 0; 517 | } 25%, 75% { 518 | -webkit-transform: perspective(140px) rotateX(0deg); 519 | transform: perspective(140px) rotateX(0deg); 520 | opacity: 1; 521 | } 90%, 100% { 522 | -webkit-transform: perspective(140px) rotateY(180deg); 523 | transform: perspective(140px) rotateY(180deg); 524 | opacity: 0; 525 | } 526 | } -------------------------------------------------------------------------------- /src/_navigation.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | margin: 20px auto; 3 | max-width: 960px; 4 | width: 95%; 5 | 6 | // Child elements 7 | label { 8 | font-weight: bold; 9 | } 10 | 11 | ul { 12 | list-style: none; 13 | float: right; 14 | 15 | li { 16 | margin: 0 15px; 17 | } 18 | } 19 | 20 | * { 21 | display: inline-block; 22 | } 23 | 24 | // Screen query 25 | @media screen and (max-width: 640px) { 26 | text-align: center; 27 | 28 | & > * { 29 | display: block; 30 | } 31 | 32 | ul { 33 | float: none; 34 | margin-top: 15px; 35 | } 36 | } 37 | } 38 | 39 | footer {} 40 | -------------------------------------------------------------------------------- /src/_scrollbars.scss: -------------------------------------------------------------------------------- 1 | .scrollbar { 2 | margin-left: 30px; 3 | float: left; 4 | height: 300px; 5 | width: 65px; 6 | background: #F5F5F5; 7 | overflow-y: scroll; 8 | margin-bottom: 25px; 9 | } 10 | 11 | .force-overflow { 12 | min-height: 450px; 13 | } 14 | 15 | #wrapper { 16 | text-align: center; 17 | width: 500px; 18 | margin: auto; 19 | } 20 | 21 | /* 22 | * STYLE 1 23 | */ 24 | 25 | #style-1::-webkit-scrollbar-track { 26 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 27 | border-radius: 10px; 28 | background-color: #F5F5F5; 29 | } 30 | 31 | #style-1::-webkit-scrollbar { 32 | width: 12px; 33 | background-color: #F5F5F5; 34 | } 35 | 36 | #style-1::-webkit-scrollbar-thumb { 37 | border-radius: 10px; 38 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); 39 | background-color: #555; 40 | } 41 | 42 | /* 43 | * STYLE 2 44 | */ 45 | 46 | #style-2::-webkit-scrollbar-track { 47 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 48 | border-radius: 10px; 49 | background-color: #F5F5F5; 50 | } 51 | 52 | #style-2::-webkit-scrollbar { 53 | width: 12px; 54 | background-color: #F5F5F5; 55 | } 56 | 57 | #style-2::-webkit-scrollbar-thumb { 58 | border-radius: 10px; 59 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); 60 | background-color: #D62929; 61 | } 62 | 63 | /* 64 | * STYLE 3 65 | */ 66 | 67 | #style-3::-webkit-scrollbar-track { 68 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 69 | background-color: #F5F5F5; 70 | } 71 | 72 | #style-3::-webkit-scrollbar { 73 | width: 6px; 74 | background-color: #F5F5F5; 75 | } 76 | 77 | #style-3::-webkit-scrollbar-thumb { 78 | background-color: #000000; 79 | } 80 | 81 | /* 82 | * STYLE 4 83 | */ 84 | 85 | #style-4::-webkit-scrollbar-track { 86 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 87 | background-color: #F5F5F5; 88 | } 89 | 90 | #style-4::-webkit-scrollbar { 91 | width: 10px; 92 | background-color: #F5F5F5; 93 | } 94 | 95 | #style-4::-webkit-scrollbar-thumb { 96 | background-color: #000000; 97 | border: 2px solid #555555; 98 | } 99 | 100 | 101 | /* 102 | * STYLE 5 103 | */ 104 | 105 | #style-5::-webkit-scrollbar-track { 106 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 107 | background-color: #F5F5F5; 108 | } 109 | 110 | #style-5::-webkit-scrollbar { 111 | width: 10px; 112 | background-color: #F5F5F5; 113 | } 114 | 115 | #style-5::-webkit-scrollbar-thumb { 116 | background-color: #0ae; 117 | 118 | background-image: -webkit-gradient(linear, 0 0, 0 100%, 119 | color-stop(.5, rgba(255, 255, 255, .2)), 120 | color-stop(.5, transparent), to(transparent)); 121 | } 122 | 123 | 124 | /* 125 | * STYLE 6 126 | */ 127 | 128 | #style-6::-webkit-scrollbar-track { 129 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 130 | background-color: #F5F5F5; 131 | } 132 | 133 | #style-6::-webkit-scrollbar { 134 | width: 10px; 135 | background-color: #F5F5F5; 136 | } 137 | 138 | #style-6::-webkit-scrollbar-thumb { 139 | background-color: #F90; 140 | background-image: -webkit-linear-gradient(45deg, 141 | rgba(255, 255, 255, .2) 25%, 142 | transparent 25%, 143 | transparent 50%, 144 | rgba(255, 255, 255, .2) 50%, 145 | rgba(255, 255, 255, .2) 75%, 146 | transparent 75%, 147 | transparent) 148 | } 149 | 150 | 151 | /* 152 | * STYLE 7 153 | */ 154 | 155 | #style-7::-webkit-scrollbar-track { 156 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 157 | background-color: #F5F5F5; 158 | border-radius: 10px; 159 | } 160 | 161 | #style-7::-webkit-scrollbar { 162 | width: 10px; 163 | background-color: #F5F5F5; 164 | } 165 | 166 | #style-7::-webkit-scrollbar-thumb { 167 | border-radius: 10px; 168 | background-image: -webkit-gradient(linear, 169 | left bottom, 170 | left top, 171 | color-stop(0.44, rgb(122, 153, 217)), 172 | color-stop(0.72, rgb(73, 125, 189)), 173 | color-stop(0.86, rgb(28, 58, 148))); 174 | } 175 | 176 | /* 177 | * STYLE 8 178 | */ 179 | 180 | #style-8::-webkit-scrollbar-track { 181 | border: 1px solid black; 182 | background-color: #F5F5F5; 183 | } 184 | 185 | #style-8::-webkit-scrollbar { 186 | width: 10px; 187 | background-color: #F5F5F5; 188 | } 189 | 190 | #style-8::-webkit-scrollbar-thumb { 191 | background-color: #000000; 192 | } 193 | 194 | 195 | /* 196 | * STYLE 9 197 | */ 198 | 199 | #style-9::-webkit-scrollbar-track { 200 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 201 | background-color: #F5F5F5; 202 | } 203 | 204 | #style-9::-webkit-scrollbar { 205 | width: 10px; 206 | background-color: #F5F5F5; 207 | } 208 | 209 | #style-9::-webkit-scrollbar-thumb { 210 | background-color: #F90; 211 | background-image: -webkit-linear-gradient(90deg, 212 | rgba(255, 255, 255, .2) 25%, 213 | transparent 25%, 214 | transparent 50%, 215 | rgba(255, 255, 255, .2) 50%, 216 | rgba(255, 255, 255, .2) 75%, 217 | transparent 75%, 218 | transparent) 219 | } 220 | 221 | 222 | /* 223 | * STYLE 10 224 | */ 225 | 226 | #style-10::-webkit-scrollbar-track { 227 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 228 | background-color: #F5F5F5; 229 | border-radius: 10px; 230 | } 231 | 232 | #style-10::-webkit-scrollbar { 233 | width: 10px; 234 | background-color: #F5F5F5; 235 | } 236 | 237 | #style-10::-webkit-scrollbar-thumb { 238 | background-color: #AAA; 239 | border-radius: 10px; 240 | background-image: -webkit-linear-gradient(90deg, 241 | rgba(0, 0, 0, .2) 25%, 242 | transparent 25%, 243 | transparent 50%, 244 | rgba(0, 0, 0, .2) 50%, 245 | rgba(0, 0, 0, .2) 75%, 246 | transparent 75%, 247 | transparent) 248 | } 249 | 250 | 251 | /* 252 | * STYLE 11 253 | */ 254 | 255 | #style-11::-webkit-scrollbar-track { 256 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 257 | background-color: #F5F5F5; 258 | border-radius: 10px; 259 | } 260 | 261 | #style-11::-webkit-scrollbar { 262 | width: 10px; 263 | background-color: #F5F5F5; 264 | } 265 | 266 | #style-11::-webkit-scrollbar-thumb { 267 | background-color: #3366FF; 268 | border-radius: 10px; 269 | background-image: -webkit-linear-gradient(0deg, 270 | rgba(255, 255, 255, 0.5) 25%, 271 | transparent 25%, 272 | transparent 50%, 273 | rgba(255, 255, 255, 0.5) 50%, 274 | rgba(255, 255, 255, 0.5) 75%, 275 | transparent 75%, 276 | transparent) 277 | } 278 | 279 | /* 280 | * STYLE 12 281 | */ 282 | 283 | #style-12::-webkit-scrollbar-track { 284 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9); 285 | border-radius: 10px; 286 | background-color: #444444; 287 | } 288 | 289 | #style-12::-webkit-scrollbar { 290 | width: 12px; 291 | background-color: #F5F5F5; 292 | } 293 | 294 | #style-12::-webkit-scrollbar-thumb { 295 | border-radius: 10px; 296 | background-color: #D62929; 297 | background-image: -webkit-linear-gradient(90deg, 298 | transparent, 299 | rgba(0, 0, 0, 0.4) 50%, 300 | transparent, 301 | transparent) 302 | } 303 | 304 | /* 305 | * STYLE 13 306 | */ 307 | 308 | #style-13::-webkit-scrollbar-track { 309 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9); 310 | border-radius: 10px; 311 | background-color: #CCCCCC; 312 | } 313 | 314 | #style-13::-webkit-scrollbar { 315 | width: 12px; 316 | background-color: #F5F5F5; 317 | } 318 | 319 | #style-13::-webkit-scrollbar-thumb { 320 | border-radius: 10px; 321 | background-color: #D62929; 322 | background-image: -webkit-linear-gradient(90deg, 323 | transparent, 324 | rgba(0, 0, 0, 0.4) 50%, 325 | transparent, 326 | transparent) 327 | } 328 | 329 | /* 330 | * STYLE 14 331 | */ 332 | 333 | #style-14::-webkit-scrollbar-track { 334 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); 335 | background-color: #CCCCCC; 336 | } 337 | 338 | #style-14::-webkit-scrollbar { 339 | width: 10px; 340 | background-color: #F5F5F5; 341 | } 342 | 343 | #style-14::-webkit-scrollbar-thumb { 344 | background-color: #FFF; 345 | background-image: -webkit-linear-gradient(90deg, 346 | rgba(0, 0, 0, 1) 0%, 347 | rgba(0, 0, 0, 1) 25%, 348 | transparent 100%, 349 | rgba(0, 0, 0, 1) 75%, 350 | transparent) 351 | } 352 | 353 | /* 354 | * STYLE 15 355 | */ 356 | 357 | #style-15::-webkit-scrollbar-track { 358 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); 359 | background-color: #F5F5F5; 360 | border-radius: 10px; 361 | } 362 | 363 | #style-15::-webkit-scrollbar { 364 | width: 10px; 365 | background-color: #F5F5F5; 366 | } 367 | 368 | #style-15::-webkit-scrollbar-thumb { 369 | border-radius: 10px; 370 | background-color: #FFF; 371 | background-image: -webkit-gradient(linear, 372 | 40% 0%, 373 | 75% 84%, 374 | from(#4D9C41), 375 | to(#19911D), 376 | color-stop(.6, #54DE5D)) 377 | } 378 | 379 | /* 380 | * STYLE 16 381 | */ 382 | 383 | #style-16::-webkit-scrollbar-track { 384 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); 385 | background-color: #F5F5F5; 386 | border-radius: 10px; 387 | } 388 | 389 | #style-16::-webkit-scrollbar { 390 | width: 10px; 391 | background-color: #F5F5F5; 392 | } 393 | 394 | #style-16::-webkit-scrollbar-thumb { 395 | border-radius: 10px; 396 | background-color: #FFF; 397 | background-image: -webkit-linear-gradient(top, 398 | #e4f5fc 0%, 399 | #bfe8f9 50%, 400 | #9fd8ef 51%, 401 | #2ab0ed 100%); 402 | } -------------------------------------------------------------------------------- /src/_table.scss: -------------------------------------------------------------------------------- 1 | table { 2 | border-collapse: collapse; 3 | width: 100%; 4 | margin-top: .5em; 5 | 6 | // Mobile view 7 | @media screen and (max-width: $mobileBreak) { 8 | overflow-x: auto; 9 | display: block; 10 | } 11 | 12 | // Child elements 13 | td,th { 14 | padding: 12px 15px; 15 | text-align: left; 16 | border-bottom: 1px solid $mutedColor; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/_tooltip.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Thanks to Chris Bracco for this tooltip from https://codepen.io/cbracco/pen/qzukg 3 | */ 4 | 5 | /* Add this attribute to the element that needs a tooltip */ 6 | [data-tooltip] { 7 | position: relative; 8 | z-index: 2; 9 | cursor: pointer; 10 | } 11 | 12 | /* Hide the tooltip content by default */ 13 | [data-tooltip]:before, 14 | [data-tooltip]:after { 15 | visibility: hidden; 16 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 17 | opacity: 0; 18 | pointer-events: none; 19 | } 20 | 21 | /* Position tooltip above the element */ 22 | [data-tooltip]:before { 23 | position: absolute; 24 | bottom: 150%; 25 | left: 50%; 26 | margin-bottom: 5px; 27 | margin-left: -80px; 28 | padding: 7px; 29 | width: 160px; 30 | -webkit-border-radius: 3px; 31 | -moz-border-radius: 3px; 32 | border-radius: 3px; 33 | background-color: #000; 34 | background-color: hsla(0, 0%, 20%, 0.9); 35 | color: #fff; 36 | content: attr(data-tooltip); 37 | text-align: center; 38 | font-size: 14px; 39 | line-height: 1.2; 40 | } 41 | 42 | /* Triangle hack to make tooltip look like a speech bubble */ 43 | [data-tooltip]:after { 44 | position: absolute; 45 | bottom: 150%; 46 | left: 50%; 47 | margin-left: -5px; 48 | width: 0; 49 | border-top: 5px solid #000; 50 | border-top: 5px solid hsla(0, 0%, 20%, 0.9); 51 | border-right: 5px solid transparent; 52 | border-left: 5px solid transparent; 53 | content: " "; 54 | font-size: 0; 55 | line-height: 0; 56 | } 57 | 58 | /* Show tooltip content on hover */ 59 | [data-tooltip]:hover:before, 60 | [data-tooltip]:hover:after { 61 | visibility: visible; 62 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 63 | opacity: 1; 64 | } 65 | -------------------------------------------------------------------------------- /src/_typography.scss: -------------------------------------------------------------------------------- 1 | b, strong { font-weight: 700; } 2 | 3 | a { 4 | text-decoration: underline; 5 | cursor: pointer; 6 | 7 | // Actions 8 | &:hover { 9 | color: lighten($textColor, $ligthenIntesity); 10 | } 11 | 12 | // Extras 13 | &.none { 14 | text-decoration: none; 15 | } 16 | } 17 | 18 | h1 { font-size: 3rem; } 19 | h2 { font-size: 2.6rem; } 20 | h3 { font-size: 2.2rem; } 21 | h4 { font-size: 1.8rem; } 22 | h5 { font-size: 1.6rem; } 23 | h6 { font-size: 1.4rem; } 24 | 25 | h1, h2, h3, h4, h5, h6 { 26 | margin-bottom: 10px; 27 | 28 | font-weight: bold; 29 | } 30 | 31 | small { font-size: .8rem; } 32 | 33 | p { margin: 15px 0; } 34 | 35 | // aligment 36 | .text-left { text-align: left; } 37 | .text-center { text-align: center; } 38 | .text-right { text-align: right; } 39 | 40 | // colors 41 | .text-muted { &, * { color: lighten($textColor, $ligthenIntesity - 5); } } 42 | .text-success { &, * { color: $successColor; } } 43 | .text-error { &, * { color: $errorColor; } } 44 | .text-warning { &, * { color: $warningColor; } } 45 | 46 | .text-inverted { &, * { color: $textInvertColor; } } 47 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | /* Imports */ 2 | @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); 3 | 4 | /* Define some variables we will need (colors) */ 5 | $textColor: #212121; 6 | $textInvertColor: rgb(65, 58, 58); 7 | 8 | $mutedColor: #c0c0c0; 9 | $successColor: #66cdaa; 10 | $errorColor: #f08080; 11 | $warningColor: #fef65b; 12 | 13 | $ligthenIntesity: 30%; 14 | 15 | $font: 'Roboto Mono', monospace; 16 | 17 | $columnNames: 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve'; 18 | $columnWidth: 100% / length($columnNames) - 1%; 19 | 20 | $mobileBreak: 750px; 21 | 22 | $shadowIdle: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 23 | $shadowTiny: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 24 | $shadowHuge: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 25 | 26 | /* Do the imports for other scss */ 27 | @import 'base'; 28 | 29 | @import 'navigation'; 30 | 31 | @import 'grid'; 32 | 33 | @import 'button'; 34 | 35 | @import 'input'; 36 | 37 | @import 'typography'; 38 | 39 | @import 'table'; 40 | 41 | @import 'lists'; 42 | 43 | @import 'tooltip'; 44 | 45 | @import 'extra'; 46 | 47 | @import 'loaders'; 48 | 49 | @import 'scrollbars'; --------------------------------------------------------------------------------