├── .gitignore ├── LICENSE ├── README.md ├── css ├── blossom.css ├── blossom.min.css └── fonts │ ├── InterUI-Black.eot │ ├── InterUI-Black.woff │ ├── InterUI-BlackItalic.eot │ ├── InterUI-BlackItalic.woff │ ├── InterUI-Bold.eot │ ├── InterUI-Bold.woff │ ├── InterUI-BoldItalic.eot │ ├── InterUI-BoldItalic.woff │ ├── InterUI-Medium.eot │ ├── InterUI-Medium.woff │ ├── InterUI-MediumItalic.eot │ ├── InterUI-MediumItalic.woff │ ├── InterUI-Regular.eot │ ├── InterUI-Regular.woff │ ├── InterUI-RegularItalic.eot │ ├── InterUI-RegularItalic.woff │ └── LICENSE.txt ├── gulpfile.js ├── js ├── blossom.js └── blossom.min.js ├── package.json └── source ├── blossom.styl ├── fonts ├── InterUI-Black.eot ├── InterUI-Black.woff ├── InterUI-BlackItalic.eot ├── InterUI-BlackItalic.woff ├── InterUI-Bold.eot ├── InterUI-Bold.woff ├── InterUI-BoldItalic.eot ├── InterUI-BoldItalic.woff ├── InterUI-Medium.eot ├── InterUI-Medium.woff ├── InterUI-MediumItalic.eot ├── InterUI-MediumItalic.woff ├── InterUI-Regular.eot ├── InterUI-Regular.woff ├── InterUI-RegularItalic.eot ├── InterUI-RegularItalic.woff └── LICENSE.txt └── modules ├── _.styl ├── accordions.styl ├── animations.styl ├── breakpoints.styl ├── buttons.styl ├── cards.styl ├── code.styl ├── colors.styl ├── comments.styl ├── container.styl ├── dividers.styl ├── dropdowns.styl ├── font.styl ├── forms.styl ├── grid.styl ├── helpers.styl ├── labels.styl ├── lists.styl ├── loaders.styl ├── menus.styl ├── messages.styl ├── mixins.styl ├── progress.styl ├── stages.styl ├── tables.styl ├── tooltips.styl ├── ui.styl └── variables.styl /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.zip 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Stefan Mansson 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 | # Blossom UI 2 | 3 | [![downloads](https://img.shields.io/npm/dm/blossom-ui.svg?style=flat-square)](https://npm-stat.com/charts.html?package=blossom-ui&from=2017-07-01) 4 | [![npm](https://img.shields.io/npm/v/blossom-ui.svg?style=flat-square)](https://www.npmjs.com/package/blossom-ui) 5 | 6 | Blossom has been built for the ground up to provide an easy way for beginner and advanced web designers and developers to get their hands on a simple but powerful design framework. With a massive library of web elements, Blossom allows users to build & design intuitive websites efficiently. 7 | 8 | --- 9 | 10 | ### Getting started 11 | 12 | #### Self hosting 13 | Download the [ZIP bundle](http://getblossom.io/introduction) 14 | 15 | Include it in your markup 16 | 17 | `` 18 | 19 | `` 20 | 21 | #### NodeJS Dependancy 22 | 23 | Install the package 24 | 25 | `npm install blossom-ui --save` 26 | 27 | Directly link to the files built in your working directory 28 | 29 | #### CDN Hosting 30 | 31 | _Coming soon_ 32 | 33 | --- 34 | 35 | ### Elements 36 | The [Elements section](http://getblossom.io/elements/buttons) provides a vast range of elements needed to build a site from scratch; ranging from buttons to progress bars, you have all the building blocks needed to make a truly unique page. 37 | 38 | Just hover over the element you want to use and click the _code_ icon. You'll see the HTML markup needed to clone the element for your website. 39 | 40 | ### Design 41 | The [Design section](http://getblossom.io/elements/buttons) gives you all the helper classes needed to make a customized layout. Use the [12 Column Grid](http://getblossom.io/design/grid) to make the basic structure of your page. 42 | 43 | Make sure to start planning for mobile versions from the start by using several grid classes and breakpoints on your elements. 44 | 45 | ### Utility 46 | The [Utility section](http://getblossom.io/utility/js) provides additional helper classes and methods to add that next level of detail to your page. 47 | 48 | Ensure that you use Blossom JS as mentioned in the section to get your Progress Bars and Dropdowns working correctly. 49 | 50 | ### Theming 51 | Most theming can be achieved by editing the `variables.styl` file within Blossom's `src` folder. Changing single variables will have an effect across your whole website so try to experiment from the start to see what suits your site the most. 52 | 53 | A new [theming guide](http://getblossom.io/customization) has been released, going into detail about different parts of theming. 54 | 55 | ### Building 56 | Upon installing Blossom, a gulpfile with come along with all source files in the install directory. Run `gulp build` to watch the source directory and to allow Blossom to be recompiled each time you edit any .styl files. 57 | 58 | The file `_.styl` in included within Blossoms source folder so that custom Style markup can be written in and compiled directly with Blossom. 59 | 60 | When you are ready for production, simply run `gulp build` so that Blossom JS and Blossom CSS can be compiled and minified. 61 | 62 | ### Issues 63 | Found any issues with the build? Make sure you let me know by posting an issue. 64 | 65 | ###### Feel free to post enhancements in the Issues section 66 | 67 | --- 68 | 69 | Licensed under MIT - Copyright (c) Stefan Mansson 2019 70 | -------------------------------------------------------------------------------- /css/blossom.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:'Inter UI';src:url("fonts/InterUI-Black.eot");src:url("fonts/InterUI-Black.eot?#iefix") format('embedded-opentype'),url("fonts/InterUI-Black.woff") format('woff');font-weight:900;font-style:normal}@font-face{font-family:'Inter UI';src:url("fonts/InterUI-BoldItalic.eot");src:url("fonts/InterUI-BoldItalic.eot?#iefix") format('embedded-opentype'),url("fonts/InterUI-BoldItalic.woff") format('woff');font-weight:bold;font-style:italic}@font-face{font-family:'Inter UI';src:url("fonts/InterUI-Medium.eot");src:url("fonts/InterUI-Medium.eot?#iefix") format('embedded-opentype'),url("fonts/InterUI-Medium.woff") format('woff');font-weight:500;font-style:normal}@font-face{font-family:'Inter UI';src:url("fonts/InterUI-BlackItalic.eot");src:url("fonts/InterUI-BlackItalic.eot?#iefix") format('embedded-opentype'),url("fonts/InterUI-BlackItalic.woff") format('woff');font-weight:900;font-style:italic}@font-face{font-family:'Inter UI';src:url("fonts/InterUI-MediumItalic.eot");src:url("fonts/InterUI-MediumItalic.eot?#iefix") format('embedded-opentype'),url("fonts/InterUI-MediumItalic.woff") format('woff');font-weight:500;font-style:italic}@font-face{font-family:'Inter UI';src:url("fonts/InterUI-RegularItalic.eot");src:url("fonts/InterUI-RegularItalic.eot?#iefix") format('embedded-opentype'),url("fonts/InterUI-RegularItalic.woff") format('woff');font-weight:normal;font-style:italic}@font-face{font-family:'Inter UI';src:url("fonts/InterUI-Bold.eot");src:url("fonts/InterUI-Bold.eot?#iefix") format('embedded-opentype'),url("fonts/InterUI-Bold.woff") format('woff');font-weight:bold;font-style:normal}@font-face{font-family:'Inter UI';src:url("fonts/InterUI-Regular.eot");src:url("fonts/InterUI-Regular.eot?#iefix") format('embedded-opentype'),url("fonts/InterUI-Regular.woff") format('woff');font-weight:normal;font-style:normal}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0;vertical-align:middle}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}a img{border:none}html{height:100%;width:100%}body{font-family:"Inter UI",sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#53565a;height:100%;width:100%;margin:0;padding:0}h1{line-height:1.8em;font-size:3.8em;letter-spacing:-.02em;font-weight:500;color:#1c2a40}h2{line-height:1.8em;font-size:2.4em;letter-spacing:-.02em;font-weight:500;color:#1c2a40}h3{line-height:1.8em;font-size:2em;letter-spacing:-.02em;font-weight:500;color:#1c2a40}h4{line-height:1.8em;font-size:1.6em;letter-spacing:-.02em;font-weight:500;color:#1c2a40}h5{line-height:1.8em;font-size:1.4em;letter-spacing:-.02em;font-weight:500;color:#1c2a40}h6{line-height:1.8em;font-size:1.2em;letter-spacing:-.02em;font-weight:500;color:#1c2a40}::selection{color:#fff;background-color:#7b8deb}a{color:#435ce2;text-decoration:none;cursor:pointer;}a:hover{color:#2a46de}li > a:hover{text-decoration:none}p{line-height:1.6em;color:#53565a}b,strong,.strong{font-weight:600}small{font-size:.86rem}@media only screen and (max-width:480px){.breakpoint-xs-hide{display:none}}@media only screen and (max-width:768px){.breakpoint-s-hide{display:none}}@media only screen and (max-width:1024px){.breakpoint-m-hide{display:none}}@media only screen and (max-width:1224px){.breakpoint-l-hide{display:none}}@media only screen and (max-width:1824px){.breakpoint-xl-hide{display:none}}@media only screen{.breakpoint-xxl-hide{display:none}}.breakpoint-xs-show{display:none;}@media only screen and (max-width:480px){.breakpoint-xs-show{display:block}}.breakpoint-s-show{display:none;}@media only screen and (max-width:768px){.breakpoint-s-show{display:block}}.breakpoint-m-show{display:none;}@media only screen and (max-width:1024px){.breakpoint-m-show{display:block}}.breakpoint-l-show{display:none;}@media only screen and (max-width:1224px){.breakpoint-l-show{display:block}}.breakpoint-xl-show{display:none;}@media only screen and (max-width:1824px){.breakpoint-xl-show{display:block}}.breakpoint-xxl-show{display:none;}@media only screen{.breakpoint-xxl-show{display:block}}@media only screen and (max-width:480px){.breakpoint-xs-stack{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-xs-stack:first-child{margin-left:auto}.breakpoint-xs-stack:last-child{margin-right:auto}}@media only screen and (max-width:480px){.breakpoint-xs-stackable > *{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-xs-stackable > *:first-child{margin-left:auto}.breakpoint-xs-stackable > *:last-child{margin-right:auto}}@media only screen and (max-width:768px){.breakpoint-s-stack{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-s-stack:first-child{margin-left:auto}.breakpoint-s-stack:last-child{margin-right:auto}}@media only screen and (max-width:768px){.breakpoint-s-stackable > *{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-s-stackable > *:first-child{margin-left:auto}.breakpoint-s-stackable > *:last-child{margin-right:auto}}@media only screen and (max-width:1024px){.breakpoint-m-stack{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-m-stack:first-child{margin-left:auto}.breakpoint-m-stack:last-child{margin-right:auto}}@media only screen and (max-width:1024px){.breakpoint-m-stackable > *{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-m-stackable > *:first-child{margin-left:auto}.breakpoint-m-stackable > *:last-child{margin-right:auto}}@media only screen and (max-width:1224px){.breakpoint-l-stack{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-l-stack:first-child{margin-left:auto}.breakpoint-l-stack:last-child{margin-right:auto}}@media only screen and (max-width:1224px){.breakpoint-l-stackable > *{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-l-stackable > *:first-child{margin-left:auto}.breakpoint-l-stackable > *:last-child{margin-right:auto}}@media only screen and (max-width:1824px){.breakpoint-xl-stack{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-xl-stack:first-child{margin-left:auto}.breakpoint-xl-stack:last-child{margin-right:auto}}@media only screen and (max-width:1824px){.breakpoint-xl-stackable > *{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-xl-stackable > *:first-child{margin-left:auto}.breakpoint-xl-stackable > *:last-child{margin-right:auto}}@media only screen{.breakpoint-xxl-stack{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-xxl-stack:first-child{margin-left:auto}.breakpoint-xxl-stack:last-child{margin-right:auto}}@media only screen{.breakpoint-xxl-stackable > *{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;margin:0 !important;padding:0}.breakpoint-xxl-stackable > *:first-child{margin-left:auto}.breakpoint-xxl-stackable > *:last-child{margin-right:auto}}.contain{width:auto;max-width:1124px;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:1rem;padding-right:1rem;position:relative;}.contain::after{content:'';display:table;clear:both}.bind{height:100%;width:100%}.group .button{margin:0 !important;border-radius:0;}.group .button.outlined + .outlined{margin-left:-1px !important}.group .button:first-of-type{border-radius:4px 0 0 4px}.group .button:last-of-type{border-radius:0 4px 4px 0}.row{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;-o-box-lines:multiple;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:auto -15px}.equal{-webkit-flex-basis:0;flex-basis:0;-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-webkit-flex-grow:1;flex-grow:1;max-width:100%;padding:0 15px}.col{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;padding:0 15px}@media only screen{.xs-equal{-webkit-flex-basis:0;flex-basis:0;-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-webkit-flex-grow:1;flex-grow:1;max-width:100%}}@media only screen{.xs-1{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 8.333333333333332%;-ms-flex:0 0 8.333333333333332%;flex:0 0 8.333333333333332%;max-width:8.333333333333332%}.push-xs-1{margin-left:8.333333333333332%}}@media only screen{.xs-2{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 16.666666666666664%;-ms-flex:0 0 16.666666666666664%;flex:0 0 16.666666666666664%;max-width:16.666666666666664%}.push-xs-2{margin-left:16.666666666666664%}}@media only screen{.xs-3{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.push-xs-3{margin-left:25%}}@media only screen{.xs-4{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 33.33333333333333%;-ms-flex:0 0 33.33333333333333%;flex:0 0 33.33333333333333%;max-width:33.33333333333333%}.push-xs-4{margin-left:33.33333333333333%}}@media only screen{.xs-5{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 41.66666666666667%;-ms-flex:0 0 41.66666666666667%;flex:0 0 41.66666666666667%;max-width:41.66666666666667%}.push-xs-5{margin-left:41.66666666666667%}}@media only screen{.xs-6{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.push-xs-6{margin-left:50%}}@media only screen{.xs-7{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 58.333333333333336%;-ms-flex:0 0 58.333333333333336%;flex:0 0 58.333333333333336%;max-width:58.333333333333336%}.push-xs-7{margin-left:58.333333333333336%}}@media only screen{.xs-8{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 66.66666666666666%;-ms-flex:0 0 66.66666666666666%;flex:0 0 66.66666666666666%;max-width:66.66666666666666%}.push-xs-8{margin-left:66.66666666666666%}}@media only screen{.xs-9{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.push-xs-9{margin-left:75%}}@media only screen{.xs-10{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 83.33333333333334%;-ms-flex:0 0 83.33333333333334%;flex:0 0 83.33333333333334%;max-width:83.33333333333334%}.push-xs-10{margin-left:83.33333333333334%}}@media only screen{.xs-11{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 91.66666666666666%;-ms-flex:0 0 91.66666666666666%;flex:0 0 91.66666666666666%;max-width:91.66666666666666%}.push-xs-11{margin-left:91.66666666666666%}}@media only screen{.xs-12{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.push-xs-12{margin-left:100%}}@media only screen and (min-width:481px){.s-equal{-webkit-flex-basis:0;flex-basis:0;-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-webkit-flex-grow:1;flex-grow:1;max-width:100%}}@media only screen and (min-width:481px){.s-1{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 8.333333333333332%;-ms-flex:0 0 8.333333333333332%;flex:0 0 8.333333333333332%;max-width:8.333333333333332%}.push-s-1{margin-left:8.333333333333332%}}@media only screen and (min-width:481px){.s-2{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 16.666666666666664%;-ms-flex:0 0 16.666666666666664%;flex:0 0 16.666666666666664%;max-width:16.666666666666664%}.push-s-2{margin-left:16.666666666666664%}}@media only screen and (min-width:481px){.s-3{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.push-s-3{margin-left:25%}}@media only screen and (min-width:481px){.s-4{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 33.33333333333333%;-ms-flex:0 0 33.33333333333333%;flex:0 0 33.33333333333333%;max-width:33.33333333333333%}.push-s-4{margin-left:33.33333333333333%}}@media only screen and (min-width:481px){.s-5{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 41.66666666666667%;-ms-flex:0 0 41.66666666666667%;flex:0 0 41.66666666666667%;max-width:41.66666666666667%}.push-s-5{margin-left:41.66666666666667%}}@media only screen and (min-width:481px){.s-6{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.push-s-6{margin-left:50%}}@media only screen and (min-width:481px){.s-7{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 58.333333333333336%;-ms-flex:0 0 58.333333333333336%;flex:0 0 58.333333333333336%;max-width:58.333333333333336%}.push-s-7{margin-left:58.333333333333336%}}@media only screen and (min-width:481px){.s-8{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 66.66666666666666%;-ms-flex:0 0 66.66666666666666%;flex:0 0 66.66666666666666%;max-width:66.66666666666666%}.push-s-8{margin-left:66.66666666666666%}}@media only screen and (min-width:481px){.s-9{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.push-s-9{margin-left:75%}}@media only screen and (min-width:481px){.s-10{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 83.33333333333334%;-ms-flex:0 0 83.33333333333334%;flex:0 0 83.33333333333334%;max-width:83.33333333333334%}.push-s-10{margin-left:83.33333333333334%}}@media only screen and (min-width:481px){.s-11{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 91.66666666666666%;-ms-flex:0 0 91.66666666666666%;flex:0 0 91.66666666666666%;max-width:91.66666666666666%}.push-s-11{margin-left:91.66666666666666%}}@media only screen and (min-width:481px){.s-12{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.push-s-12{margin-left:100%}}@media only screen and (min-width:769px){.m-equal{-webkit-flex-basis:0;flex-basis:0;-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-webkit-flex-grow:1;flex-grow:1;max-width:100%}}@media only screen and (min-width:769px){.m-1{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 8.333333333333332%;-ms-flex:0 0 8.333333333333332%;flex:0 0 8.333333333333332%;max-width:8.333333333333332%}.push-m-1{margin-left:8.333333333333332%}}@media only screen and (min-width:769px){.m-2{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 16.666666666666664%;-ms-flex:0 0 16.666666666666664%;flex:0 0 16.666666666666664%;max-width:16.666666666666664%}.push-m-2{margin-left:16.666666666666664%}}@media only screen and (min-width:769px){.m-3{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.push-m-3{margin-left:25%}}@media only screen and (min-width:769px){.m-4{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 33.33333333333333%;-ms-flex:0 0 33.33333333333333%;flex:0 0 33.33333333333333%;max-width:33.33333333333333%}.push-m-4{margin-left:33.33333333333333%}}@media only screen and (min-width:769px){.m-5{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 41.66666666666667%;-ms-flex:0 0 41.66666666666667%;flex:0 0 41.66666666666667%;max-width:41.66666666666667%}.push-m-5{margin-left:41.66666666666667%}}@media only screen and (min-width:769px){.m-6{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.push-m-6{margin-left:50%}}@media only screen and (min-width:769px){.m-7{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 58.333333333333336%;-ms-flex:0 0 58.333333333333336%;flex:0 0 58.333333333333336%;max-width:58.333333333333336%}.push-m-7{margin-left:58.333333333333336%}}@media only screen and (min-width:769px){.m-8{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 66.66666666666666%;-ms-flex:0 0 66.66666666666666%;flex:0 0 66.66666666666666%;max-width:66.66666666666666%}.push-m-8{margin-left:66.66666666666666%}}@media only screen and (min-width:769px){.m-9{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.push-m-9{margin-left:75%}}@media only screen and (min-width:769px){.m-10{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 83.33333333333334%;-ms-flex:0 0 83.33333333333334%;flex:0 0 83.33333333333334%;max-width:83.33333333333334%}.push-m-10{margin-left:83.33333333333334%}}@media only screen and (min-width:769px){.m-11{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 91.66666666666666%;-ms-flex:0 0 91.66666666666666%;flex:0 0 91.66666666666666%;max-width:91.66666666666666%}.push-m-11{margin-left:91.66666666666666%}}@media only screen and (min-width:769px){.m-12{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.push-m-12{margin-left:100%}}@media only screen and (min-width:1025px){.l-equal{-webkit-flex-basis:0;flex-basis:0;-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-webkit-flex-grow:1;flex-grow:1;max-width:100%}}@media only screen and (min-width:1025px){.l-1{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 8.333333333333332%;-ms-flex:0 0 8.333333333333332%;flex:0 0 8.333333333333332%;max-width:8.333333333333332%}.push-l-1{margin-left:8.333333333333332%}}@media only screen and (min-width:1025px){.l-2{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 16.666666666666664%;-ms-flex:0 0 16.666666666666664%;flex:0 0 16.666666666666664%;max-width:16.666666666666664%}.push-l-2{margin-left:16.666666666666664%}}@media only screen and (min-width:1025px){.l-3{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.push-l-3{margin-left:25%}}@media only screen and (min-width:1025px){.l-4{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 33.33333333333333%;-ms-flex:0 0 33.33333333333333%;flex:0 0 33.33333333333333%;max-width:33.33333333333333%}.push-l-4{margin-left:33.33333333333333%}}@media only screen and (min-width:1025px){.l-5{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 41.66666666666667%;-ms-flex:0 0 41.66666666666667%;flex:0 0 41.66666666666667%;max-width:41.66666666666667%}.push-l-5{margin-left:41.66666666666667%}}@media only screen and (min-width:1025px){.l-6{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.push-l-6{margin-left:50%}}@media only screen and (min-width:1025px){.l-7{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 58.333333333333336%;-ms-flex:0 0 58.333333333333336%;flex:0 0 58.333333333333336%;max-width:58.333333333333336%}.push-l-7{margin-left:58.333333333333336%}}@media only screen and (min-width:1025px){.l-8{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 66.66666666666666%;-ms-flex:0 0 66.66666666666666%;flex:0 0 66.66666666666666%;max-width:66.66666666666666%}.push-l-8{margin-left:66.66666666666666%}}@media only screen and (min-width:1025px){.l-9{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.push-l-9{margin-left:75%}}@media only screen and (min-width:1025px){.l-10{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 83.33333333333334%;-ms-flex:0 0 83.33333333333334%;flex:0 0 83.33333333333334%;max-width:83.33333333333334%}.push-l-10{margin-left:83.33333333333334%}}@media only screen and (min-width:1025px){.l-11{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 91.66666666666666%;-ms-flex:0 0 91.66666666666666%;flex:0 0 91.66666666666666%;max-width:91.66666666666666%}.push-l-11{margin-left:91.66666666666666%}}@media only screen and (min-width:1025px){.l-12{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.push-l-12{margin-left:100%}}@media only screen and (min-width:1225px){.xl-equal{-webkit-flex-basis:0;flex-basis:0;-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-webkit-flex-grow:1;flex-grow:1;max-width:100%}}@media only screen and (min-width:1225px){.xl-1{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 8.333333333333332%;-ms-flex:0 0 8.333333333333332%;flex:0 0 8.333333333333332%;max-width:8.333333333333332%}.push-xl-1{margin-left:8.333333333333332%}}@media only screen and (min-width:1225px){.xl-2{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 16.666666666666664%;-ms-flex:0 0 16.666666666666664%;flex:0 0 16.666666666666664%;max-width:16.666666666666664%}.push-xl-2{margin-left:16.666666666666664%}}@media only screen and (min-width:1225px){.xl-3{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.push-xl-3{margin-left:25%}}@media only screen and (min-width:1225px){.xl-4{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 33.33333333333333%;-ms-flex:0 0 33.33333333333333%;flex:0 0 33.33333333333333%;max-width:33.33333333333333%}.push-xl-4{margin-left:33.33333333333333%}}@media only screen and (min-width:1225px){.xl-5{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 41.66666666666667%;-ms-flex:0 0 41.66666666666667%;flex:0 0 41.66666666666667%;max-width:41.66666666666667%}.push-xl-5{margin-left:41.66666666666667%}}@media only screen and (min-width:1225px){.xl-6{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.push-xl-6{margin-left:50%}}@media only screen and (min-width:1225px){.xl-7{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 58.333333333333336%;-ms-flex:0 0 58.333333333333336%;flex:0 0 58.333333333333336%;max-width:58.333333333333336%}.push-xl-7{margin-left:58.333333333333336%}}@media only screen and (min-width:1225px){.xl-8{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 66.66666666666666%;-ms-flex:0 0 66.66666666666666%;flex:0 0 66.66666666666666%;max-width:66.66666666666666%}.push-xl-8{margin-left:66.66666666666666%}}@media only screen and (min-width:1225px){.xl-9{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.push-xl-9{margin-left:75%}}@media only screen and (min-width:1225px){.xl-10{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 83.33333333333334%;-ms-flex:0 0 83.33333333333334%;flex:0 0 83.33333333333334%;max-width:83.33333333333334%}.push-xl-10{margin-left:83.33333333333334%}}@media only screen and (min-width:1225px){.xl-11{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 91.66666666666666%;-ms-flex:0 0 91.66666666666666%;flex:0 0 91.66666666666666%;max-width:91.66666666666666%}.push-xl-11{margin-left:91.66666666666666%}}@media only screen and (min-width:1225px){.xl-12{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.push-xl-12{margin-left:100%}}@media only screen and (min-width:1825px){.xxl-equal{-webkit-flex-basis:0;flex-basis:0;-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-webkit-flex-grow:1;flex-grow:1;max-width:100%}}@media only screen and (min-width:1825px){.xxl-1{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 8.333333333333332%;-ms-flex:0 0 8.333333333333332%;flex:0 0 8.333333333333332%;max-width:8.333333333333332%}.push-xxl-1{margin-left:8.333333333333332%}}@media only screen and (min-width:1825px){.xxl-2{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 16.666666666666664%;-ms-flex:0 0 16.666666666666664%;flex:0 0 16.666666666666664%;max-width:16.666666666666664%}.push-xxl-2{margin-left:16.666666666666664%}}@media only screen and (min-width:1825px){.xxl-3{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.push-xxl-3{margin-left:25%}}@media only screen and (min-width:1825px){.xxl-4{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 33.33333333333333%;-ms-flex:0 0 33.33333333333333%;flex:0 0 33.33333333333333%;max-width:33.33333333333333%}.push-xxl-4{margin-left:33.33333333333333%}}@media only screen and (min-width:1825px){.xxl-5{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 41.66666666666667%;-ms-flex:0 0 41.66666666666667%;flex:0 0 41.66666666666667%;max-width:41.66666666666667%}.push-xxl-5{margin-left:41.66666666666667%}}@media only screen and (min-width:1825px){.xxl-6{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.push-xxl-6{margin-left:50%}}@media only screen and (min-width:1825px){.xxl-7{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 58.333333333333336%;-ms-flex:0 0 58.333333333333336%;flex:0 0 58.333333333333336%;max-width:58.333333333333336%}.push-xxl-7{margin-left:58.333333333333336%}}@media only screen and (min-width:1825px){.xxl-8{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 66.66666666666666%;-ms-flex:0 0 66.66666666666666%;flex:0 0 66.66666666666666%;max-width:66.66666666666666%}.push-xxl-8{margin-left:66.66666666666666%}}@media only screen and (min-width:1825px){.xxl-9{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.push-xxl-9{margin-left:75%}}@media only screen and (min-width:1825px){.xxl-10{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 83.33333333333334%;-ms-flex:0 0 83.33333333333334%;flex:0 0 83.33333333333334%;max-width:83.33333333333334%}.push-xxl-10{margin-left:83.33333333333334%}}@media only screen and (min-width:1825px){.xxl-11{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 91.66666666666666%;-ms-flex:0 0 91.66666666666666%;flex:0 0 91.66666666666666%;max-width:91.66666666666666%}.push-xxl-11{margin-left:91.66666666666666%}}@media only screen and (min-width:1825px){.xxl-12{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.push-xxl-12{margin-left:100%}}.nogutter{padding:0;margin:0}.stackable > *{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;}.stackable > *:first-child{margin-left:auto}.stackable > *:last-child{margin-right:auto}.stack{display:block;clear:both;float:none;width:100%;margin-left:auto;margin-right:auto;}.stack:first-child{margin-left:auto}.stack:last-child{margin-right:auto}.unstack{text-align:left;display:inline;clear:none;width:auto;margin-left:0;margin-right:0;}.unstack:first-child{margin-left:0}.unstack:last-child{margin-right:0}.block{display:block !important}.inline{display:inline-block !important}.relative{position:relative}.fixed{position:fixed}.absolute,.pin{position:absolute}.pin.top,.fixed.top{top:0}.pin.left,.fixed.left{left:0}.pin.right,.fixed.right{right:0}.pin.bottom,.fixed.bottom{bottom:0}.pin.fixed,.fixed.fixed{position:fixed}.hidden{display:none !important}.invisible{visibility:hidden !important}.borderless{border:0 !important}.disabled,[disabled],.button.disabled,.button[disabled],.button.loading,.input[disabled] input[type="text"],.input.disabled input[type="text"],.input[disabled] input[type="number"],.input.disabled input[type="number"],.input[disabled] textarea,.input.disabled textarea,.input[disabled] .radio,.input.disabled .radio,.input[disabled] .checkbox,.input.disabled .checkbox,.input[disabled].range,.input.disabled.range{cursor:not-allowed;}.disabled > *,[disabled] > *,.button.disabled > *,.button[disabled] > *,.button.loading > *,.input[disabled] input[type="text"] > *,.input.disabled input[type="text"] > *,.input[disabled] input[type="number"] > *,.input.disabled input[type="number"] > *,.input[disabled] textarea > *,.input.disabled textarea > *,.input[disabled] .radio > *,.input.disabled .radio > *,.input[disabled] .checkbox > *,.input.disabled .checkbox > *,.input[disabled].range > *,.input.disabled.range > *{pointer-events:none;color:#8d9196 !important}.centered:not(.vertical):not(.horizontal){position:absolute;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.centered.vertical{position:absolute;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.centered.horizontal{position:absolute;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.nowrap{white-space:nowrap}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify;}.text-justify:after{display:inline-block;content:'';width:100%}.float-left{float:left}.float-right{float:right}.float-reset{float:none}.align-top{vertical-align:top;display:inline-block}.align-middle{vertical-align:middle;display:inline-block}.align-bottom{vertical-align:bottom;display:inline-block}.align-center{position:absolute;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.align-horizontal{position:absolute;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.align-vertical{position:absolute;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.transform.uppercase{text-transform:uppercase}.transform.lowercase{text-transform:lowercase}.transform.capitalize{text-transform:capitalize}.image-mini img{width:35px;height:auto}.image-tiny img{width:70px;height:auto}.image-small img{width:140px;height:auto}.image-medium img{width:280px;height:auto}.image-large img{width:400px;height:auto}.image-big img{width:600px;height:auto}.image-huge img{width:800px;height:auto}.image-massive img{width:940px;height:auto}.dropdown{position:relative;display:inline-block;}.dropdown.disabled .toggle{opacity:.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);pointer-events:none;cursor:default}.dropdown .toggle{cursor:pointer;}.dropdown .toggle:not(.button) > i{margin:0 .2rem;font-size:.86rem}.dropdown.floating .menu{margin-top:1rem}.dropdown.open .menu{display:block}.dropdown .menu{background-color:#fff;position:absolute;top:2rem;left:0;border:1px solid #e9ecef;border-radius:4px;min-width:13rem;z-index:2000;display:none;padding:1rem 0;-webkit-box-shadow:0 1px 5px 0 rgba(70,72,75,0.1);box-shadow:0 1px 5px 0 rgba(70,72,75,0.1)}.dropdown li{display:block;}.dropdown li i{width:1.3rem}.dropdown li.divider{margin:.6rem 0}.dropdown li.disabled{opacity:.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);pointer-events:none;cursor:default}.dropdown li.header{color:#53565a;padding:.5rem 1.4rem .5rem 1.4rem;font-size:16px;font-weight:500}.dropdown li:hover a{color:#435ce2}.dropdown li a{color:#53565a;display:block;padding:.25rem 1.4rem;line-height:1.6em}.dropdown.right .menu{left:auto;right:0}.dropdown.upward .menu{top:auto;bottom:2rem}.dropdown .sub{left:13rem}.table{width:100%;border-radius:4px;border:1px solid #e3e7eb;border-collapse:separate;}.table th{padding:1rem;background-color:#f5f7fa;font-weight:600;border-bottom:1px solid #e3e7eb}.table tr{background-color:#fff;}.table tr td{padding:.8rem 1rem;border-bottom:1px solid #e3e7eb;line-height:1.375rem;}.table tr td i{margin-right:.4rem;opacity:.6;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60)}.table tr:last-child td{border-bottom:0}.table.striped tr:nth-child(2n){background-color:#f8f9fb}.table.simple th{background-color:transparent}.table.basic{border:0;}.table.basic th,.table.basic tr{background-color:transparent}.table.cells th{border-left:1px solid #e3e7eb;}.table.cells th:first-child{border-left:0}.table.cells tr td{border-left:1px solid #e3e7eb;}.table.cells tr td:first-child{border-left:0}.tooltip[data-content]{position:relative;}.tooltip[data-content]:before{background-color:#fff;position:absolute;z-index:2;width:.8rem;height:.8rem;content:' ';font-size:1rem;-webkit-box-shadow:1px 1px 0 0 #e3e7eb;box-shadow:1px 1px 0 0 #e3e7eb;-webkit-transform-origin:center top;-moz-transform-origin:center top;-o-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top;-webkit-transform:rotate(45deg) scale(0);-moz-transform:rotate(45deg) scale(0);-o-transform:rotate(45deg) scale(0);-ms-transform:rotate(45deg) scale(0);transform:rotate(45deg) scale(0);-webkit-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;-moz-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;-o-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;-ms-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}.tooltip[data-content]:after{content:attr(data-content);position:absolute;z-index:1;color:#53565a;background-color:#fff;border:1px solid #e3e7eb;max-width:none;white-space:nowrap;font-size:1rem;text-align:left;border-radius:4px;padding:.75em 1em;-webkit-box-shadow:0 1px 2px 0 rgba(70,72,75,0.1);box-shadow:0 1px 2px 0 rgba(70,72,75,0.1);-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;-moz-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;-o-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;-ms-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;cursor:default;pointer-events:none}.tooltip[data-content][data-text=tiny]:after{font-size:.72rem}.tooltip[data-content][data-text=small]:after{font-size:.86rem}.tooltip[data-content][data-text=medium]:after{font-size:1.1rem}.tooltip[data-content][data-text=large]:after{font-size:1.4rem}.tooltip[data-content][data-text=big]:after{font-size:1.8rem}.tooltip[data-content].dark:before{-webkit-box-shadow:none !important;box-shadow:none !important;background-color:#6b6c6e}.tooltip[data-content].dark:after{border-color:#6b6c6e;background-color:#6b6c6e;color:#fff}.tooltip[data-content]:hover:before{-webkit-transform:rotate(45deg) scale(1);-moz-transform:rotate(45deg) scale(1);-o-transform:rotate(45deg) scale(1);-ms-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:1;-ms-filter:none;filter:none}.tooltip[data-content]:hover:after{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.tooltip[data-content][data-position~=top]:before{bottom:100%;margin-bottom:.18rem}.tooltip[data-content][data-position~=top]:after{bottom:100%;margin-bottom:.6rem}.tooltip[data-content][data-position~=bottom]:before{top:100%;margin-top:.4rem;-webkit-box-shadow:-1px -1px 0 0 #e3e7eb;box-shadow:-1px -1px 0 0 #e3e7eb}.tooltip[data-content][data-position~=bottom]:after{top:100%;margin-top:.6rem}.tooltip[data-content][data-position="top left"]:before{left:1rem}.tooltip[data-content][data-position="top left"]:after{left:0;right:auto;-webkit-transform-origin:left bottom;-moz-transform-origin:left bottom;-o-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom}.tooltip[data-content][data-position="top center"]:before{left:50%}.tooltip[data-content][data-position="top center"]:after{left:50%;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-o-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform:translateX(-50%) scale(0);-moz-transform:translateX(-50%) scale(0);-o-transform:translateX(-50%) scale(0);-ms-transform:translateX(-50%) scale(0);transform:translateX(-50%) scale(0)}.tooltip[data-content][data-position="top center"]:hover:after{-webkit-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-o-transform:translateX(-50%) scale(1);-ms-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1)}.tooltip[data-content][data-position="top center"]:hover:before{-webkit-transform:rotate(45deg) scale(1);-moz-transform:rotate(45deg) scale(1);-o-transform:rotate(45deg) scale(1);-ms-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1)}.tooltip[data-content][data-position="top right"]:before{right:1rem}.tooltip[data-content][data-position="top right"]:after{right:0;left:auto;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-o-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}.tooltip[data-content][data-position="bottom left"]:before{left:1rem}.tooltip[data-content][data-position="bottom left"]:after{left:0;right:auto;-webkit-transform-origin:left top;-moz-transform-origin:left top;-o-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.tooltip[data-content][data-position="bottom center"]:before{left:50%}.tooltip[data-content][data-position="bottom center"]:after{left:50%;-webkit-transform-origin:center top;-moz-transform-origin:center top;-o-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top;-webkit-transform:translateX(-50%) scale(0);-moz-transform:translateX(-50%) scale(0);-o-transform:translateX(-50%) scale(0);-ms-transform:translateX(-50%) scale(0);transform:translateX(-50%) scale(0)}.tooltip[data-content][data-position="bottom center"]:hover:after{-webkit-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-o-transform:translateX(-50%) scale(1);-ms-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1)}.tooltip[data-content][data-position="bottom right"]:before{right:1rem}.tooltip[data-content][data-position="bottom right"]:after{right:0;left:auto;-webkit-transform-origin:right top;-moz-transform-origin:right top;-o-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.accordion{float:left;clear:none;text-align:inherit;width:100%;margin-left:0%;margin-right:0%;}.accordion::after{content:'';display:table;clear:both}.accordion > .title{padding:.7rem 0;cursor:pointer;line-height:1.6em;color:#1c2a40;font-weight:500;}.accordion > .title > i{width:1.3rem;display:inline-block;height:1px;}.accordion > .title > i::before{content:'\f125';font:normal normal normal .74rem Ionicons;color:#6b6f74}.accordion > .title.open i::before{content:'\f123';font:normal normal normal .74rem Ionicons;color:#6b6f74}.accordion > .content{line-height:1.6rem;display:none;color:#53565a;}.accordion > .content.open{display:block}.accordion > .content + .title{margin-top:.6rem}.accordion.module{padding:0;max-width:40rem;}.accordion.module.fluid{max-width:none}.accordion.module > .title{padding:1.3rem 1.3rem;border-top:1px solid #e3e7eb;font-weight:600;color:#1c2a40;line-height:1.4rem;}.accordion.module > .title:first-child{border:none}.accordion.module > .content{padding:0 1.3rem 1.3rem 1.3rem;margin-top:-.8rem;}.accordion.module > .content + .title{margin-top:0}.button{display:inline-block;position:relative;border-radius:4px;color:#53565a;background-color:#e9ecef;outline:0;padding:.75em 1.8em;text-align:center;border:0;line-height:1.125;font-size:16px;font-weight:500;cursor:pointer;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;-ms-transition:all 0.2s ease;transition:all 0.2s ease;vertical-align:top;}.button.small{font-size:.86rem;padding:.65em 1.8em}.button.medium{font-size:1.2rem;padding:.75em 1.8em}.button.large{font-size:1.34rem;padding:.85em 2em}.button.big{font-size:1.5rem;padding:.95em 2.2em}.button.outlined{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #e9ecef;box-shadow:inset 0 0 0 1px #e9ecef;color:#53565a;}.button.outlined.white{color:#fff;}.button.outlined.white:hover{background-color:#fff;color:#53565a}.button:hover{-webkit-box-shadow:none;box-shadow:none;background-color:#e9ecef}.button.red{color:#fff;background-color:#ff2d2d;}.button.red.disabled,.button.red[disabled],.button.red.loading{pointer-events:none;color:#ffc0c0}.button.red.outlined{color:#ff2d2d;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #ff2d2d;box-shadow:inset 0 0 0 1px #ff2d2d}.button.red:hover{color:#fff;background-color:#ff1515}.button.orange{color:#fff;background-color:#ff8f17;}.button.orange.disabled,.button.orange[disabled],.button.orange.loading{pointer-events:none;color:#ffddb9}.button.orange.outlined{color:#ff8f17;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #ff8f17;box-shadow:inset 0 0 0 1px #ff8f17}.button.orange:hover{color:#fff;background-color:#ff8401}.button.yellow{color:#fff;background-color:#ffbd00;}.button.yellow.disabled,.button.yellow[disabled],.button.yellow.loading{pointer-events:none;color:#ffebb3}.button.yellow.outlined{color:#ffbd00;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #ffbd00;box-shadow:inset 0 0 0 1px #ffbd00}.button.yellow:hover{color:#fff;background-color:#ebae00}.button.green{color:#fff;background-color:#06c78a;}.button.green.disabled,.button.green[disabled],.button.green.loading{pointer-events:none;color:#a6fce1}.button.green.outlined{color:#06c78a;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #06c78a;box-shadow:inset 0 0 0 1px #06c78a}.button.green:hover{color:#fff;background-color:#06b77f}.button.teal{color:#fff;background-color:#00b1a1;}.button.teal.disabled,.button.teal[disabled],.button.teal.loading{pointer-events:none;color:#9bfff6}.button.teal.outlined{color:#00b1a1;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #00b1a1;box-shadow:inset 0 0 0 1px #00b1a1}.button.teal:hover{color:#fff;background-color:#00a394}.button.blue{color:#fff;background-color:#1d7aff;}.button.blue.disabled,.button.blue[disabled],.button.blue.loading{pointer-events:none;color:#bbd7ff}.button.blue.outlined{color:#1d7aff;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #1d7aff;box-shadow:inset 0 0 0 1px #1d7aff}.button.blue:hover{color:#fff;background-color:#066dff}.button.violet{color:#fff;background-color:#af00e8;}.button.violet.disabled,.button.violet[disabled],.button.violet.loading{pointer-events:none;color:#ebacff}.button.violet.outlined{color:#af00e8;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #af00e8;box-shadow:inset 0 0 0 1px #af00e8}.button.violet:hover{color:#fff;background-color:#a100d5}.button.purple{color:#fff;background-color:#670ef5;}.button.purple.disabled,.button.purple[disabled],.button.purple.loading{pointer-events:none;color:#d1b7fc}.button.purple.outlined{color:#670ef5;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #670ef5;box-shadow:inset 0 0 0 1px #670ef5}.button.purple:hover{color:#fff;background-color:#5e09e5}.button.pink{color:#fff;background-color:#fb0c92;}.button.pink.disabled,.button.pink[disabled],.button.pink.loading{pointer-events:none;color:#feb6de}.button.pink.outlined{color:#fb0c92;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #fb0c92;box-shadow:inset 0 0 0 1px #fb0c92}.button.pink:hover{color:#fff;background-color:#ee0487}.button.brown{color:#fff;background-color:#ab5b33;}.button.brown.disabled,.button.brown[disabled],.button.brown.loading{pointer-events:none;color:#ebccbc}.button.brown.outlined{color:#ab5b33;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #ab5b33;box-shadow:inset 0 0 0 1px #ab5b33}.button.brown:hover{color:#fff;background-color:#9d542f}.button.grey{color:#fff;background-color:#53565a;}.button.grey.disabled,.button.grey[disabled],.button.grey.loading{pointer-events:none;color:#caccce}.button.grey.outlined{color:#53565a;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #53565a;box-shadow:inset 0 0 0 1px #53565a}.button.grey:hover{color:#fff;background-color:#4c4f53}.button.black{color:#fff;background-color:#000;}.button.black.disabled,.button.black[disabled],.button.black.loading{pointer-events:none;color:#b3b3b3}.button.black.outlined{color:#000;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #000;box-shadow:inset 0 0 0 1px #000}.button.black:hover{color:#fff;background-color:#242424}.button.primary{color:#fff;background-color:#435ce2;}.button.primary.disabled,.button.primary[disabled],.button.primary.loading{pointer-events:none;color:#c7cef6}.button.primary.outlined{color:#435ce2;background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px #435ce2;box-shadow:inset 0 0 0 1px #435ce2}.button.primary:hover{color:#fff;background-color:#2f4adf}.button.labeled{padding-left:4.2em;}.button.labeled i{position:absolute;top:0;left:0;width:2.8rem;background-color:rgba(0,0,0,0.1);text-align:center;color:#fff;height:100%;line-height:2.7}.button.labeled.labeled-right{padding-left:1.8em;padding-right:4.2em;}.button.labeled.labeled-right i{position:absolute;top:0;right:0;left:auto}.button.icon{padding:auto .8275rem}.button:hover{color:#53565a;background-color:#dee3e7;text-decoration:none}.button.disabled,.button[disabled]{color:#8d9196}.button.loading{color:#8d9196;}.button.loading span{color:inherit !important}.button.loading .loader{height:1.125em;width:1.125em;line-height:1em;border-width:.2em;display:inline-block;vertical-align:top}.button.loading .loader + span,.button.loading span + .loader{margin-left:.8em}ul.list,ol.list{padding:0;margin:0;list-style:none}.list{font-size:16px;}.list li,.list .item{padding:.25rem 0;position:relative;line-height:1.7rem;display:list-item;table-layout:fixed;}.list li:after,.list .item:after{display:block;content:'';height:0;clear:both}.list li a.header,.list .item a.header{display:block}.list li .header,.list .item .header{font-weight:600;line-height:1.5rem}.list li .icon,.list .item .icon{display:inline-block;vertical-align:middle !important;margin-right:1rem}.list li .icon.large,.list .item .icon.large{font-size:1.4em;line-height:2.6rem}.list li .content,.list .item .content{display:inline-block;vertical-align:top}.list li code,.list .item code{padding:0;background:transparent}.list.spaced li,.list.spaced .item{padding:.4rem 0}.list.very-spaced li,.list.very-spaced .item{padding:.8rem 0}.list.links > .item{-webkit-transition:opacity 0.14s ease;-moz-transition:opacity 0.14s ease;-o-transition:opacity 0.14s ease;-ms-transition:opacity 0.14s ease;transition:opacity 0.14s ease;}.list.links > .item a{color:#6b6f74;font-weight:500}.list.links > .item:hover{color:#424548;text-decoration:none}.list.links > .item.active a{color:#435ce2}.list.divided li:first-child,.list.divided .item:first-child{border:none}.list.divided li,.list.divided .item{border-top:1px solid border-light-red-grey}.list.horizontal li{display:inline-block;}.list.horizontal li + li{margin-left:1.8rem}.list.ordered{counter-reset:ordereditem;}.list.ordered .list{counter-reset:ordereditem;padding:.55rem 0 .05rem .5rem}.list.ordered li,.list.ordered .item{list-style:none;}.list.ordered li:before,.list.ordered .item:before{counter-increment:ordereditem;content:counters(ordereditem,".") " ";margin-right:5px;opacity:.6;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60)}.list.bulleted{padding-left:1rem;}.list.bulleted .item:before{content:'\2022';position:absolute;left:0;auto:0;top:.2rem;margin-left:-.97rem}ol.ordered li[value]:before{content:attr(value)}.label{background-color:#e9ecef;color:text-lighter-grey;padding:.5rem .86rem;display:inline-block;font-size:.76rem;line-height:.76em;border-radius:4px;font-weight:700;text-transform:uppercase;overflow:hidden;}.label.circular{padding:.48rem;border-radius:50%;width:2.4em;height:2.4em;line-height:1em;text-align:center}.label .detail{background-color:rgba(0,0,0,0.1);padding:.48rem .72rem;height:100%;margin:-.5rem -.8rem -.5rem .8rem;display:inline-block;font-weight:500;vertical-align:top;float:right;color:rgba(255,255,255,0.7)}.label i{margin-right:.6rem}.label a{color:#6b6f74;margin-left:.8rem;padding-left:.8rem;font-weight:600;text-transform:none;border-left:2px solid rgba(0,0,0,0.1);}.label a:hover{color:#424548}.label.red{color:#fff}.label.orange{color:#fff}.label.yellow{color:#fff}.label.green{color:#fff}.label.teal{color:#fff}.label.blue{color:#fff}.label.violet{color:#fff}.label.purple{color:#fff}.label.pink{color:#fff}.label.brown{color:#fff}.label.grey{color:#fff}.label.black{color:#fff}.label.primary{color:#fff}.divider{margin:1rem 0;color:#53565a;font-size:16px;text-align:center;}.divider:not(.vertical):not(.horizontal){border-top:1px solid #e3e7eb}.divider.horizontal{display:table;white-space:nowrap;}.divider.horizontal:before{background-position:right 1rem top 50%}.divider.horizontal:after{background-position:left 1rem top 50%}.divider.horizontal:before,.divider.horizontal:after{display:table-cell;position:relative;content:'';width:50%;background-repeat:no-repeat;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAABCAIAAACnup5zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1QkQwODI0NDM1NUUxMUU2OTBENUY1MERFMUI2NDg3QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1QkQwODI0NTM1NUUxMUU2OTBENUY1MERFMUI2NDg3QyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM0NkE5QkVCMzQwRDExRTY5MEQ1RjUwREUxQjY0ODdDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM0NkE5QkVDMzQwRDExRTY5MEQ1RjUwREUxQjY0ODdDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+BsWJGwAAACRJREFUeNrswTENAAAIAzDwL5JnDy7QQdK2J1sAAAAAn50AAwA4LwKuOxCNAQAAAABJRU5ErkJggg==")}.message{padding:1.1rem 1.8rem;background-color:#fff;border:0;border-left:6px solid #e3e7eb;border-radius:4px;margin:1rem 0;background-color:#f8f9fb;color:#53565a;}.message h6{line-height:1.2em;margin-bottom:.2rem;color:#1c2a40}.message.warning{border-color:#ffc41a}.message.important{border-color:#ff4242}.message.success{border-color:#07e59f}.message.info{border-color:#3487ff}.input{position:relative;font-size:0;font-style:normal;}.input input[type="text"],.input input[type="number"],.input textarea{font-family:"Inter UI",sans-serif;font-size:16px;color:#53565a;margin:0;font-size:16px;max-width:100%;line-height:1.125;padding:.75rem 1rem;outline:0;border-radius:4px;text-align:left;border:0;border:1px solid #e9ecef;-webkit-transition:border-color 0.14s ease;-moz-transition:border-color 0.14s ease;-o-transition:border-color 0.14s ease;-ms-transition:border-color 0.14s ease;transition:border-color 0.14s ease;min-width:220px;background-color:#fff;height:2.625em;}.input input[type="text"]::-webkit-input-placeholder,.input input[type="number"]::-webkit-input-placeholder,.input textarea::-webkit-input-placeholder{color:#8d9196}.input input[type="text"]:-moz-placeholder,.input input[type="number"]:-moz-placeholder,.input textarea:-moz-placeholder{color:#8d9196}.input input[type="text"]::-moz-placeholder,.input input[type="number"]::-moz-placeholder,.input textarea::-moz-placeholder{color:#8d9196}.input input[type="text"]:-ms-input-placeholder,.input input[type="number"]:-ms-input-placeholder,.input textarea:-ms-input-placeholder{color:#8d9196}.input input[type="text"]:focus,.input input[type="number"]:focus,.input textarea:focus{border-color:#435ce2}.input textarea{line-height:1.2rem;min-height:3rem;min-width:23rem;width:100%;resize:vertical;max-width:20rem}.input textarea:not([rows]){min-height:8rem;max-height:22rem}.input .checkbox,.input .radio{font-size:16px;}.input .checkbox label,.input .radio label{display:inline-block;vertical-align:middle;margin-left:.8rem;color:#6b6f74;cursor:pointer}.input .checkbox .toggle,.input .radio .toggle{width:1.4rem;height:1.4rem;content:' ';display:inline-block;vertical-align:top;-webkit-box-shadow:inset 0 0 0 2px #e3e7eb;box-shadow:inset 0 0 0 2px #e3e7eb;cursor:pointer}.input .checkbox:hover label,.input .radio:hover label{color:#424548}.input .checkbox:hover .toggle,.input .radio:hover .toggle{background-color:#f8f9fb}.input .checkbox.selected label,.input .radio.selected label{color:#53565a}.input .checkbox .toggle{border-radius:4px;-webkit-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;-moz-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;-o-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;-ms-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s;}.input .checkbox .toggle:after{-webkit-background-size:100%;-moz-background-size:100%;background-size:100%;content:'';-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0);height:1.4rem;width:1.4rem;display:block;-webkit-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s 0.1s;-moz-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s 0.1s;-o-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s 0.1s;-ms-transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s 0.1s;transition:all cubic-bezier(0.02, 0.49, 0.01, 0.97) 0.14s 0.1s;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0ppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODgxODM1MEM1RTU1MTFFNzhGMDBFQjg1MzE5M0IxRTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODgxODM1MEI1RTU1MTFFNzhGMDBFQjg1MzE5M0IxRTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpjOTFhNDk2My01ZTU0LTExZTctOTIxOS1lMjc3NWExMTcwNGQiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpjOTFhNDk2My01ZTU0LTExZTctOTIxOS1lMjc3NWExMTcwNGQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4V+8aSAAAC60lEQVR42mL8//8/w2AGTAyDHIw6cNSBow4cdSCNAQs+yQsXLjA8f/6cqhZ+/fqVwcPDg4GHh8cSxH3w4MElDg4OBgkJCewaQDUJLuzj40P1EAkPD2f8/PnzxP8Q8GXx4sWJO3bswOkGvA4EGkZVx4mLi4PMbf+PCi4CMScuN9AtDXJzczMsXLiwDMisQJP6hVcjPUKQk5OTYdeuXSlAM/+ihd6vmTNnBh47dmzgopiLi4th7969oUDzfqA57u/mzZvTQGr27ds3MA4ERevu3bvdgGZ9QnPc/58/f1ba29uD1R05coQ8B4aFhVEUcsBotQSa8xaL47oDAwPhasl2YEBAAIOoqCiDpKSkMBAQ7TgBAQGGPXv26ALNeILuuL9//8708/NDyZxkO3DTpk3s79+/n/jr16/nL168WGJmZsZPjANbWloUgPqvoTsOaM4KX19fVnT1ZDsQiMORLfj06dN6S0tLDnyOc3Z2Fv3w4cMJLNG6Exgj3Nj0UOLAEnSLgJYvsrGxwVp+urm58QGrsj3oen7//n3U399fCJenyHbg1q1bVf78+fMU3cJ3795NAIYkiiVOTk7sX758WY2uFih2GZjmZPGFOtkOBBUzhw4dcgKyP6NbDEybdebm5rBoZfr+/fuc/5jgQWVlpRahNEtRLubn52c4d+5cMCimsDgyLzc3lwkYrX1YHPcKaLEZqBSgmQMjIiLglfzZs2fTsTgCVDtswiL+AWipC6i4IQZQFMUwACwLGa5cuVL3nzD4cerUqSAhISGiy02qOBAEQIX16dOnJ+Bx3N+jR48mABujJNU6VHMgtChhAcotwea6w4cPFxIbrTRzIBMTE0NDQwMvUH4XsuNOnjzZLCgoSFa9TbYD8TX5CwoKRIFV11KgurPbtm1ro6TVc+DAAZxuYMQ3uoWr0wTSA3Qcg7e3NwMrKysbsMH56+3btwwsLCxkOdDCwoIBV+gzjg6/jTpw1IGjDhx14OAGAAEGALOQyYV820TZAAAAAElFTkSuQmCC")}.input .checkbox.selected .toggle{-webkit-box-shadow:inset 0 0 0 1rem #06c78a;box-shadow:inset 0 0 0 1rem #06c78a;}.input .checkbox.selected .toggle:after{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.input .radio .toggle{border:2px solid #e3e7eb;-webkit-box-shadow:inset 0 0 0 2px #fff;box-shadow:inset 0 0 0 2px #fff;border-radius:50%}.input .radio.selected .toggle{background-color:#435ce2;border-color:#435ce2}.input.range input[type=range]{-webkit-appearance:none;width:100%;padding:5px 0;font-size:16px;}.input.range input[type=range]:focus{outline:0}.input.range input[type=range]::-webkit-slider-runnable-track{width:100%;height:3px;background:#e9ecef;border:none;border-radius:4px}.input.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:.8rem;width:.8rem;background-color:#53565a;border-radius:50px;cursor:pointer;margin-top:-.3rem;-webkit-transition:all 0.14s ease;-moz-transition:all 0.14s ease;-o-transition:all 0.14s ease;-ms-transition:all 0.14s ease;transition:all 0.14s ease}.input.range input[type=range]:hover::-webkit-slider-thumb{height:1.1rem;width:1.1rem;margin-top:-.4rem}.input.transparent input,.input.transparent textarea{padding:0;background-color:transparent;border:0}.input[disabled] input[type="text"],.input.disabled input[type="text"],.input[disabled] input[type="number"],.input.disabled input[type="number"],.input[disabled] textarea,.input.disabled textarea{background-color:#f8f9fb}.input[disabled] .radio .toggle,.input.disabled .radio .toggle,.input[disabled] .checkbox .toggle,.input.disabled .checkbox .toggle{opacity:.6;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60)}.input[disabled].range input[type=range]::-webkit-slider-thumb,.input.disabled.range input[type=range]::-webkit-slider-thumb{border:3px solid #e9ecef;background-color:#fff}.input.block textarea,.input.block input{max-width:none;width:100%}.action input{border-radius:4px 0 0 4px;display:inline-block;vertical-align:top;}.action input + .button{border-radius:0 4px 4px 0;display:inline-block;vertical-align:top;font-size:16px;margin-left:-1px}.action .button{border-radius:4px 0 0 4px;display:inline-block;vertical-align:top;font-size:16px;}.action .button + input{border-radius:0 4px 4px 0;display:inline-block;vertical-align:top;margin-left:-1px}.sidebar.left{border-right:1px solid #e3e7eb;height:100%;width:290px}.sidebar.right{border-left:1px solid #e3e7eb;height:100%}.sidebar.top{float:left;clear:none;text-align:inherit;width:100%;margin-left:0%;margin-right:0%;z-index:1100}.sidebar.top::after{content:'';display:table;clear:both}.menu{width:100%;}.menu.panel{position:relative;background-color:#fff;border:1px solid #e3e7eb;border-radius:4px;overflow:hidden;}.menu.panel.borderless{border:1px solid #e3e7eb !important;}.menu.panel.borderless .item{border:0 !important}.menu.panel .item{padding:.64rem 1.1rem;margin:0 !important;border-right:1px solid #e3e7eb;}.menu.panel .item:hover{background-color:#f5f7fa}.menu.panel .item.active{background-color:#435ce2;color:#fff;font-weight:500}.menu.panel.vertical .item{border:0;display:block;}.menu.panel.vertical .item + .item{border-top:1px solid #e3e7eb}.menu .item{display:inline-block;position:relative;padding:.65rem 1.4rem;color:#53565a;cursor:pointer;line-height:1.4rem;font-weight:500;}.menu .item:hover{text-decoration:none}.menu .item .label{padding:.4rem .5rem;margin:-.4rem 0;margin-left:.8rem}.menu .item + .item{margin-left:.4rem}.menu.vertical{width:15rem;}.menu.vertical:not(.panel) .item{display:block;}.menu.vertical:not(.panel) .item + .item{margin:.4rem 0 0 0 !important}.menu.underlined.show{border-bottom:2px solid #e3e7eb;}.menu.underlined.show .item{margin:0 0 -2px 0}.menu.underlined .item{padding:.85rem 1.14rem;color:#6b6f74;}.menu.underlined .item.active{border-bottom:2px #53565a solid;color:#53565a}.menu.underlined.vertical.show{border:0;border-right:2px solid #e3e7eb}.menu.underlined.vertical .item{padding:.65rem 1.14rem;}.menu.underlined.vertical .item:after{position:absolute;right:-2px;top:0;width:2px;height:100%;display:block;content:' ';background-color:transparent}.menu.underlined.vertical .item .label{float:right;margin-right:.4rem;position:relative;top:7px;}.menu.underlined.vertical .item.active{border:0;}.menu.underlined.vertical .item.active:after{background-color:#53565a}.menu.pills .item{border-radius:4px;}.menu.pills .item:hover{background-color:#f5f7fa}.menu.pills .item.active{background-color:#435ce2;color:#fff}.menu.basic .item{padding-left:0;padding-right:0;color:#6b6f74;}.menu.basic .item + .item{margin-left:2.4rem}.menu.basic .item:hover{color:#424548}.menu.basic .item.active{color:#53565a}.red:not(.button):not(.text){background-color:#ff2d2d;}.red:not(.button):not(.text).light{background-color:#ff5353}.red:not(.button):not(.text).dark{background-color:#f60000}.text.red{color:#ff2d2d}.orange:not(.button):not(.text){background-color:#ff8f17;}.orange:not(.button):not(.text).light{background-color:#ffa341}.orange:not(.button):not(.text).dark{background-color:#e47600}.text.orange{color:#ff8f17}.yellow:not(.button):not(.text){background-color:#ffbd00;}.yellow:not(.button):not(.text).light{background-color:#ffc92e}.yellow:not(.button):not(.text).dark{background-color:#d19b00}.text.yellow{color:#ffbd00}.green:not(.button):not(.text){background-color:#06c78a;}.green:not(.button):not(.text).light{background-color:#0cf8ad}.green:not(.button):not(.text).dark{background-color:#05a371}.text.green{color:#06c78a}.teal:not(.button):not(.text){background-color:#00b1a1;}.teal:not(.button):not(.text).light{background-color:#00edd8}.teal:not(.button):not(.text).dark{background-color:#009184}.text.teal{color:#00b1a1}.blue:not(.button):not(.text){background-color:#1d7aff;}.blue:not(.button):not(.text).light{background-color:#4692ff}.blue:not(.button):not(.text).dark{background-color:#0060e9}.text.blue{color:#1d7aff}.violet:not(.button):not(.text){background-color:#af00e8;}.violet:not(.button):not(.text).light{background-color:#c71bff}.violet:not(.button):not(.text).dark{background-color:#9000be}.text.violet{color:#af00e8}.purple:not(.button):not(.text){background-color:#670ef5;}.purple:not(.button):not(.text).light{background-color:#8239f7}.purple:not(.button):not(.text).dark{background-color:#5408cc}.text.purple{color:#670ef5}.pink:not(.button):not(.text){background-color:#fb0c92;}.pink:not(.button):not(.text).light{background-color:#fc38a6}.pink:not(.button):not(.text).dark{background-color:#d40378}.text.pink{color:#fb0c92}.brown:not(.button):not(.text){background-color:#ab5b33;}.brown:not(.button):not(.text).light{background-color:#c97449}.brown:not(.button):not(.text).dark{background-color:#8c4b2a}.text.brown{color:#ab5b33}.grey:not(.button):not(.text){background-color:#53565a;}.grey:not(.button):not(.text).light{background-color:#70747a}.grey:not(.button):not(.text).dark{background-color:#44474a}.text.grey{color:#53565a}.black:not(.button):not(.text){background-color:#000;}.black:not(.button):not(.text).light{background-color:#2e2e2e}.black:not(.button):not(.text).dark{background-color:#000}.text.black{color:#000}.primary:not(.button):not(.text){background-color:#435ce2;}.primary:not(.button):not(.text).light{background-color:#6579e7}.primary:not(.button):not(.text).dark{background-color:#203cd0}.text.primary{color:#435ce2}.ash:not(.button):not(.text){background-color:#6b6c6e;}.ash:not(.button):not(.text).light{background-color:#858689}.ash:not(.button):not(.text).dark{background-color:#58595a}.text.ash{color:#6b6c6e}.smoke:not(.button):not(.text){background-color:#e3e7eb;}.smoke:not(.button):not(.text).light{background-color:#e8ebef}.smoke:not(.button):not(.text).dark{background-color:#b2bdc8}.text.smoke{color:#e3e7eb}.loader{border-style:solid;border-width:.5rem;border-color:rgba(255,255,255,0.6);border-left-color:transparent;width:5rem;height:5rem;border-radius:50%;-webkit-animation:spin 1.3s infinite linear;-moz-animation:spin 1.3s infinite linear;-o-animation:spin 1.3s infinite linear;-ms-animation:spin 1.3s infinite linear;animation:spin 1.3s infinite linear;}.loader.disabled,.loader.hidden{display:none}.loader.inline{display:inline-block}.loader.small{width:3.3rem;height:3.3rem;border-width:.35rem}.loader.large{width:5rem;height:5rem}.loader.dark{border-color:rgba(0,0,0,0.4);border-left-color:transparent}.cards{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;-o-box-lines:multiple;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.card{position:relative;background-color:#fff;border:1px solid #e3e7eb;border-radius:4px;width:285px;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-o-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.card.fluid{float:left;clear:none;text-align:inherit;width:100%;margin-left:0%;margin-right:0%;}.card.fluid::after{content:'';display:table;clear:both}.card .image{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}.card .image img{max-width:100%}.card .image.header img{border-radius:4px 4px 0 0}.card .content{padding:1.2rem 1.4rem;-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-webkit-flex-grow:1;flex-grow:1;}.card .content a{color:#6b6f74;}.card .content a:hover{color:#424548}.card .content:after{display:block;content:'';clear:both}.card .content .header{font-size:1.4em;line-height:1.6}.card .content .sub{line-height:1.3;color:#53565a;font-weight:500}.card .content p{margin-top:.7rem}.card .content.footer{-webkit-box-flex:0;-moz-box-flex:0;-o-box-flex:0;-ms-box-flex:0;box-flex:0;-webkit-flex-grow:0;flex-grow:0;float:left;clear:none;text-align:inherit;width:100%;margin-left:0%;margin-right:0%;padding:1rem 1.4rem;border-top:1px solid #eaedf0;font-size:.86rem;}.card .content.footer::after{content:'';display:table;clear:both}.card .content.footer.button{padding:.75em 0;text-align:center;border-radius:0 0 4px 4px;}.card .content.footer.button:hover{color:#424548}.card .content.footer.button:hover,.card .content.footer.button:active{-webkit-box-shadow:none !important;box-shadow:none !important}.card .content.footer i{margin-right:.5rem;font-size:.86rem;color:#53565a}.comments .comment{position:relative;margin-top:1.4rem;}.comments .comment .avatar{width:2.5rem;height:2.5rem;height:auto;display:block;vertical-align:top;margin-top:.26rem;float:left;border-radius:4px;}.comments .comment .avatar img{max-width:100%;border-radius:4px}.comments .comment .content{display:block;vertical-align:top;margin-left:3.4rem;}.comments .comment .content .actions{display:block;font-size:.86rem;margin-top:.63rem;}.comments .comment .content .actions .action{display:inline-block;vertical-align:top;color:light-link;}.comments .comment .content .actions .action + .action{margin-left:.6rem}.comments .comment .content .actions .action.active{color:light-link-hover}.comments .comment .content .actions .action:hover{color:light-link-hover}.comments .comment .content .meta{font-size:.86rem;color:#53565a;margin-left:.6rem}.comments .comment .content .creator{font-weight:600;color:#1c2a40;line-height:1.62rem;}.comments .comment .content .creator:hover{color:#435ce2}.comments .comment .content .text{line-height:1.14rem}.comments .reply{position:relative;}.comments .reply textarea{margin-top:1rem}.comments .group{margin-top:1.4rem;}.comments .group .button{border-radius:4px}.progress{background-color:#e9ecef;border-radius:4px;height:1.7rem;content:'';}.progress .bar{height:100%;border-radius:4px;background-color:#4c5a68;position:relative;width:0;}.progress .bar .status{color:#fff;position:absolute;right:.6rem;font-size:.86rem;line-height:1.6rem;font-weight:700;display:none}.progress.tiny{height:.3rem}.progress.small{height:.8rem}.progress.large{height:2.7rem;}.progress.large .status{line-height:2.7rem;font-size:1rem}.progress:not(.tiny):not(.small) .bar.show .status{display:block}.stages{display:-webkit-inline-box;display:-moz-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-box;display:inline-flex;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-o-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-moz-box-align:stretch;-o-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch;border-radius:4px;border:1px solid #e3e7eb;}.stages.fluid{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex}.stages.vertical{-webkit-box-orient:vertical;-moz-box-orient:vertical;-o-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:visible;}.stages.vertical .stage{-webkit-box-pack:start;-moz-box-pack:start;-o-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;border-left:0 !important;}.stages.vertical .stage .icon{width:2rem;text-align:center}.stages.vertical .stage + .stage{border-top:1px solid #e3e7eb}.stages.vertical .stage:first-child{border-radius:4px 4px 0 0}.stages.vertical .stage:last-child{border-radius:0 0 4px 4px}.stages.vertical .stage:not(.active):before,.stages.vertical .stage:not(.active):after{display:none}.stages.vertical .stage.active:before,.stages.vertical .stage.active:after{display:block}.stages .stage{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;-webkit-box-lines:multiple;-moz-box-lines:multiple;-o-box-lines:multiple;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;vertical-align:center;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-o-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-moz-box-align:stretch;-o-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch;background-color:#fff;padding:1rem 1.8rem;position:relative;overflow:hidden;}.stages .stage .header{display:block;font-weight:500;font-size:16px;color:#1c2a40}.stages .stage:last-child:before,.stages .stage:last-child:after{display:none}.stages .stage:before{content:'';width:0;height:0;border-top:.8rem solid transparent;border-bottom:.8rem solid transparent;border-left:.8rem solid #fff;position:absolute;right:-.55rem;top:31%;z-index:900}.stages .stage:after{content:'';width:0;height:0;border-top:.6rem solid transparent;border-bottom:.6rem solid transparent;border-left:.6rem solid #e3e7eb;position:absolute;right:-.6rem;top:35%;z-index:800}.stages .stage .icon{margin-right:1.1rem;width:2.2rem;text-align:center;}.stages .stage .icon i{font-size:2em;position:relative;top:.5rem;color:#53565a}.stages .stage + .stage{border-left:1px solid #e3e7eb}.stages .stage.disabled > *{opacity:.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40)}.stages .stage.completed i{color:#06c78a}.stages .stage.active{background-color:#f8f9fb;}.stages .stage.active .header{color:#435ce2}.stages .stage.active:before{border-left-color:#f8f9fb}.stages .stage .content{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;color:#53565a;line-height:1.5rem}.stages .stage small{display:block;color:#53565a;margin:.4rem 0 0 0}.stages .stage pre{margin:1rem 0 0 0;white-space:pre-wrap;}.stages .stage pre code{display:inline-block;padding:.4rem 1rem}code{background-color:#f5f7fa;color:#435ce2;padding:.3rem .5rem;border-radius:4px;font-family:'Roboto Mono','Consolas','Monaco','Lucida Console',monospace;line-height:1.6rem;font-size:.86rem;font-weight:500}p code{margin:0 .3rem}.message code{background-color:transparent;border:1px solid #e3e7eb}.transitionDuration-0{-webkit-transition-duration:0s;-moz-transition-duration:0s;-o-transition-duration:0s;-ms-transition-duration:0s;transition-duration:0s}.transitionDuration-s{-webkit-transition-duration:.08s;-moz-transition-duration:.08s;-o-transition-duration:.08s;-ms-transition-duration:.08s;transition-duration:.08s}.transitionDuration-m{-webkit-transition-duration:.18s;-moz-transition-duration:.18s;-o-transition-duration:.18s;-ms-transition-duration:.18s;transition-duration:.18s}.transitionDuration-l{-webkit-transition-duration:.3s;-moz-transition-duration:.3s;-o-transition-duration:.3s;-ms-transition-duration:.3s;transition-duration:.3s}.transitionDuration-xl{-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;-ms-transition-duration:.5s;transition-duration:.5s}.transitionDuration-xxl{-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;-ms-transition-duration:.8s;transition-duration:.8s}.transitionType-linear{-webkit-transition-timing-function:linear;-moz-transition-timing-function:linear;-o-transition-timing-function:linear;-ms-transition-timing-function:linear;transition-timing-function:linear}.transitionType-ease{-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;-o-transition-timing-function:ease;-ms-transition-timing-function:ease;transition-timing-function:ease}.transitionType-scaleIn{-webkit-transition-timing-function:cubic-bezier(0,1.42,.44,1);-moz-transition-timing-function:cubic-bezier(0,1.42,.44,1);-o-transition-timing-function:cubic-bezier(0,1.42,.44,1);-ms-transition-timing-function:cubic-bezier(0,1.42,.44,1);transition-timing-function:cubic-bezier(0,1.42,.44,1)}.transitionType-scaleOut{-webkit-transition-timing-function:cubic-bezier(.16,.86,.44,1);-moz-transition-timing-function:cubic-bezier(.16,.86,.44,1);-o-transition-timing-function:cubic-bezier(.16,.86,.44,1);-ms-transition-timing-function:cubic-bezier(.16,.86,.44,1);transition-timing-function:cubic-bezier(.16,.86,.44,1)}.transitionType-spring{-webkit-transition-timing-function:cubic-bezier(.68,-.55,.27,1.55);-moz-transition-timing-function:cubic-bezier(.68,-.55,.27,1.55);-o-transition-timing-function:cubic-bezier(.68,-.55,.27,1.55);-ms-transition-timing-function:cubic-bezier(.68,-.55,.27,1.55);transition-timing-function:cubic-bezier(.68,-.55,.27,1.55)}.transitionType-bounce{-webkit-transition-timing-function:cubic-bezier(.04,.89,.76,1.74);-moz-transition-timing-function:cubic-bezier(.04,.89,.76,1.74);-o-transition-timing-function:cubic-bezier(.04,.89,.76,1.74);-ms-transition-timing-function:cubic-bezier(.04,.89,.76,1.74);transition-timing-function:cubic-bezier(.04,.89,.76,1.74)}.animation-spin{-webkit-animation:spin 1.2s infinite linear;-moz-animation:spin 1.2s infinite linear;-o-animation:spin 1.2s infinite linear;-ms-animation:spin 1.2s infinite linear;animation:spin 1.2s infinite linear}.animation-rotate{-webkit-animation:spin 3s .8s infinite cubic-bezier(.04,.95,.17,1);-moz-animation:spin 3s .8s infinite cubic-bezier(.04,.95,.17,1);-o-animation:spin 3s .8s infinite cubic-bezier(.04,.95,.17,1);-ms-animation:spin 3s .8s infinite cubic-bezier(.04,.95,.17,1);animation:spin 3s .8s infinite cubic-bezier(.04,.95,.17,1)}.animation-bounce{-webkit-animation:bounce 1.2s infinite cubic-bezier(.04,.95,.17,1);-moz-animation:bounce 1.2s infinite cubic-bezier(.04,.95,.17,1);-o-animation:bounce 1.2s infinite cubic-bezier(.04,.95,.17,1);-ms-animation:bounce 1.2s infinite cubic-bezier(.04,.95,.17,1);animation:bounce 1.2s infinite cubic-bezier(.04,.95,.17,1)}.animation-pulse{-webkit-animation:pulse 1.2s infinite linear;-moz-animation:pulse 1.2s infinite linear;-o-animation:pulse 1.2s infinite linear;-ms-animation:pulse 1.2s infinite linear;animation:pulse 1.2s infinite linear}.animation-shake{-webkit-animation:shake 1.2s infinite linear;-moz-animation:shake 1.2s infinite linear;-o-animation:shake 1.2s infinite linear;-ms-animation:shake 1.2s infinite linear;animation:shake 1.2s infinite linear}.animation-swing{-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-animation:swing 2s infinite linear;-moz-animation:swing 2s infinite linear;-o-animation:swing 2s infinite linear;-ms-animation:swing 2s infinite linear;animation:swing 2s infinite linear}.animation-spring{-webkit-animation:spring .3s cubic-bezier(.04,.95,.17,1);-moz-animation:spring .3s cubic-bezier(.04,.95,.17,1);-o-animation:spring .3s cubic-bezier(.04,.95,.17,1);-ms-animation:spring .3s cubic-bezier(.04,.95,.17,1);animation:spring .3s cubic-bezier(.04,.95,.17,1)}.landing-fadein{-webkit-animation:fadein .5s linear forwards;-moz-animation:fadein .5s linear forwards;-o-animation:fadein .5s linear forwards;-ms-animation:fadein .5s linear forwards;animation:fadein .5s linear forwards;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}.landing-ascend{-webkit-animation:ascend .5s linear forwards;-moz-animation:ascend .5s linear forwards;-o-animation:ascend .5s linear forwards;-ms-animation:ascend .5s linear forwards;animation:ascend .5s linear forwards;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}.landing-descend{-webkit-animation:descend .5s linear forwards;-moz-animation:descend .5s linear forwards;-o-animation:descend .5s linear forwards;-ms-animation:descend .5s linear forwards;animation:descend .5s linear forwards;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}@-moz-keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(1turn);-moz-transform:rotate(1turn);-o-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(1turn);-moz-transform:rotate(1turn);-o-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@-o-keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(1turn);-moz-transform:rotate(1turn);-o-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(1turn);-moz-transform:rotate(1turn);-o-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@-moz-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-15px);-moz-transform:translateY(-15px);-o-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}60%{-webkit-transform:translateY(-5px);-moz-transform:translateY(-5px);-o-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-15px);-moz-transform:translateY(-15px);-o-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}60%{-webkit-transform:translateY(-5px);-moz-transform:translateY(-5px);-o-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}}@-o-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-15px);-moz-transform:translateY(-15px);-o-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}60%{-webkit-transform:translateY(-5px);-moz-transform:translateY(-5px);-o-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}}@keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-15px);-moz-transform:translateY(-15px);-o-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}60%{-webkit-transform:translateY(-5px);-moz-transform:translateY(-5px);-o-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}}@-moz-keyframes pulse{0%,20%,50%,80%,100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}40%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}60%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}@-webkit-keyframes pulse{0%,20%,50%,80%,100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}40%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}60%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}@-o-keyframes pulse{0%,20%,50%,80%,100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}40%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}60%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulse{0%,20%,50%,80%,100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}40%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}60%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}@-moz-keyframes shake{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%,40%,60%,80%,100%{-webkit-transform:translateX(-3px);-moz-transform:translateX(-3px);-o-transform:translateX(-3px);-ms-transform:translateX(-3px);transform:translateX(-3px)}10%,30%,50%,70%,90%{-webkit-transform:translateX(3px);-moz-transform:translateX(3px);-o-transform:translateX(3px);-ms-transform:translateX(3px);transform:translateX(3px)}}@-webkit-keyframes shake{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%,40%,60%,80%,100%{-webkit-transform:translateX(-3px);-moz-transform:translateX(-3px);-o-transform:translateX(-3px);-ms-transform:translateX(-3px);transform:translateX(-3px)}10%,30%,50%,70%,90%{-webkit-transform:translateX(3px);-moz-transform:translateX(3px);-o-transform:translateX(3px);-ms-transform:translateX(3px);transform:translateX(3px)}}@-o-keyframes shake{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%,40%,60%,80%,100%{-webkit-transform:translateX(-3px);-moz-transform:translateX(-3px);-o-transform:translateX(-3px);-ms-transform:translateX(-3px);transform:translateX(-3px)}10%,30%,50%,70%,90%{-webkit-transform:translateX(3px);-moz-transform:translateX(3px);-o-transform:translateX(3px);-ms-transform:translateX(3px);transform:translateX(3px)}}@keyframes shake{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%,40%,60%,80%,100%{-webkit-transform:translateX(-3px);-moz-transform:translateX(-3px);-o-transform:translateX(-3px);-ms-transform:translateX(-3px);transform:translateX(-3px)}10%,30%,50%,70%,90%{-webkit-transform:translateX(3px);-moz-transform:translateX(3px);-o-transform:translateX(3px);-ms-transform:translateX(3px);transform:translateX(3px)}}@-moz-keyframes swing{0%{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg)}50%{-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-o-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}100%{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg)}}@-webkit-keyframes swing{0%{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg)}50%{-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-o-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}100%{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg)}}@-o-keyframes swing{0%{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg)}50%{-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-o-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}100%{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg)}}@keyframes swing{0%{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg)}50%{-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-o-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}100%{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg)}}@-moz-keyframes double-bounce{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}}@-webkit-keyframes double-bounce{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}}@-o-keyframes double-bounce{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}}@keyframes double-bounce{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}}@-moz-keyframes spring{0%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}40%{-webkit-transform:scale(.9);-moz-transform:scale(.9);-o-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes spring{0%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}40%{-webkit-transform:scale(.9);-moz-transform:scale(.9);-o-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-o-keyframes spring{0%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}40%{-webkit-transform:scale(.9);-moz-transform:scale(.9);-o-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes spring{0%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}40%{-webkit-transform:scale(.9);-moz-transform:scale(.9);-o-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-moz-keyframes fadein{0%{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none}}@-webkit-keyframes fadein{0%{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none}}@-o-keyframes fadein{0%{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none}}@keyframes fadein{0%{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none}}@-moz-keyframes ascend{0%{-webkit-transform:translateY(30px);-moz-transform:translateY(30px);-o-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}60%{-webkit-transform:translateY(20px);-moz-transform:translateY(20px);-o-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes ascend{0%{-webkit-transform:translateY(30px);-moz-transform:translateY(30px);-o-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}60%{-webkit-transform:translateY(20px);-moz-transform:translateY(20px);-o-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-o-keyframes ascend{0%{-webkit-transform:translateY(30px);-moz-transform:translateY(30px);-o-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}60%{-webkit-transform:translateY(20px);-moz-transform:translateY(20px);-o-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes ascend{0%{-webkit-transform:translateY(30px);-moz-transform:translateY(30px);-o-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}60%{-webkit-transform:translateY(20px);-moz-transform:translateY(20px);-o-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-moz-keyframes descend{0%{-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-o-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}60%{-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-o-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes descend{0%{-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-o-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}60%{-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-o-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-o-keyframes descend{0%{-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-o-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}60%{-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-o-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes descend{0%{-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-o-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}60%{-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-o-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-moz-keyframes load2{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes load2{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes load2{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load2{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}} -------------------------------------------------------------------------------- /css/fonts/InterUI-Black.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-Black.eot -------------------------------------------------------------------------------- /css/fonts/InterUI-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-Black.woff -------------------------------------------------------------------------------- /css/fonts/InterUI-BlackItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-BlackItalic.eot -------------------------------------------------------------------------------- /css/fonts/InterUI-BlackItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-BlackItalic.woff -------------------------------------------------------------------------------- /css/fonts/InterUI-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-Bold.eot -------------------------------------------------------------------------------- /css/fonts/InterUI-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-Bold.woff -------------------------------------------------------------------------------- /css/fonts/InterUI-BoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-BoldItalic.eot -------------------------------------------------------------------------------- /css/fonts/InterUI-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-BoldItalic.woff -------------------------------------------------------------------------------- /css/fonts/InterUI-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-Medium.eot -------------------------------------------------------------------------------- /css/fonts/InterUI-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-Medium.woff -------------------------------------------------------------------------------- /css/fonts/InterUI-MediumItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-MediumItalic.eot -------------------------------------------------------------------------------- /css/fonts/InterUI-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-MediumItalic.woff -------------------------------------------------------------------------------- /css/fonts/InterUI-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-Regular.eot -------------------------------------------------------------------------------- /css/fonts/InterUI-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-Regular.woff -------------------------------------------------------------------------------- /css/fonts/InterUI-RegularItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-RegularItalic.eot -------------------------------------------------------------------------------- /css/fonts/InterUI-RegularItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/css/fonts/InterUI-RegularItalic.woff -------------------------------------------------------------------------------- /css/fonts/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 The Inter UI Project Authors (me@rsms.me) 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | ----------------------------------------------------------- 8 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 9 | ----------------------------------------------------------- 10 | 11 | PREAMBLE 12 | The goals of the Open Font License (OFL) are to stimulate worldwide 13 | development of collaborative font projects, to support the font creation 14 | efforts of academic and linguistic communities, and to provide a free and 15 | open framework in which fonts may be shared and improved in partnership 16 | with others. 17 | 18 | The OFL allows the licensed fonts to be used, studied, modified and 19 | redistributed freely as long as they are not sold by themselves. The 20 | fonts, including any derivative works, can be bundled, embedded, 21 | redistributed and/or sold with any software provided that any reserved 22 | names are not used by derivative works. The fonts and derivatives, 23 | however, cannot be released under any other type of license. The 24 | requirement for fonts to remain under this license does not apply 25 | to any document created using the fonts or their derivatives. 26 | 27 | DEFINITIONS 28 | "Font Software" refers to the set of files released by the Copyright 29 | Holder(s) under this license and clearly marked as such. This may 30 | include source files, build scripts and documentation. 31 | 32 | "Reserved Font Name" refers to any names specified as such after the 33 | copyright statement(s). 34 | 35 | "Original Version" refers to the collection of Font Software components as 36 | distributed by the Copyright Holder(s). 37 | 38 | "Modified Version" refers to any derivative made by adding to, deleting, 39 | or substituting -- in part or in whole -- any of the components of the 40 | Original Version, by changing formats or by porting the Font Software to a 41 | new environment. 42 | 43 | "Author" refers to any designer, engineer, programmer, technical 44 | writer or other person who contributed to the Font Software. 45 | 46 | PERMISSION AND CONDITIONS 47 | Permission is hereby granted, free of charge, to any person obtaining 48 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 49 | redistribute, and sell modified and unmodified copies of the Font 50 | Software, subject to the following conditions: 51 | 52 | 1) Neither the Font Software nor any of its individual components, 53 | in Original or Modified Versions, may be sold by itself. 54 | 55 | 2) Original or Modified Versions of the Font Software may be bundled, 56 | redistributed and/or sold with any software, provided that each copy 57 | contains the above copyright notice and this license. These can be 58 | included either as stand-alone text files, human-readable headers or 59 | in the appropriate machine-readable metadata fields within text or 60 | binary files as long as those fields can be easily viewed by the user. 61 | 62 | 3) No Modified Version of the Font Software may use the Reserved Font 63 | Name(s) unless explicit written permission is granted by the corresponding 64 | Copyright Holder. This restriction only applies to the primary font name as 65 | presented to the users. 66 | 67 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 68 | Software shall not be used to promote, endorse or advertise any 69 | Modified Version, except to acknowledge the contribution(s) of the 70 | Copyright Holder(s) and the Author(s) or with their explicit written 71 | permission. 72 | 73 | 5) The Font Software, modified or unmodified, in part or in whole, 74 | must be distributed entirely under this license, and must not be 75 | distributed under any other license. The requirement for fonts to 76 | remain under this license does not apply to any document created 77 | using the Font Software. 78 | 79 | TERMINATION 80 | This license becomes null and void if any of the above conditions are 81 | not met. 82 | 83 | DISCLAIMER 84 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 85 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 86 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 87 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 88 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 89 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 90 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 91 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 92 | OTHER DEALINGS IN THE FONT SOFTWARE. 93 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | const gulp = require('gulp') 4 | const stylus = require('gulp-stylus') 5 | const watch = require('gulp-watch') 6 | const rename = require('gulp-rename') 7 | const uglify = require('gulp-uglify') 8 | const babel = require('gulp-babel') 9 | const runSequence = require('gulp-run-sequence') 10 | const pump = require('pump') 11 | 12 | const argv = require('yargs').argv 13 | const appRoot = require('app-root-path') 14 | const del = require('del') 15 | 16 | const nib = require('nib') 17 | const jeet = require('jeet') 18 | const rupture = require('rupture') 19 | 20 | const source = { 21 | ROOT: process.cwd() + '/../../blossom-ui', 22 | ORIGIN: '.' 23 | } 24 | 25 | let origin = source.ORIGIN 26 | argv.root == 1 ? origin = source.ROOT : origin = source.ORIGIN 27 | 28 | gulp.task('purge', function (cb) { 29 | return del([ 30 | origin + '/css/blossom.min.css', 31 | origin + '/js/blossom.min.js' 32 | ], {force: true}, cb) 33 | }) 34 | 35 | gulp.task('watch source', function () { 36 | watch(['./source/**/*.styl', './source/blossom.styl'], () => { gulp.start('compile css') }) 37 | }) 38 | 39 | gulp.task('compile css', function () { 40 | return gulp.src('./source/blossom.styl') 41 | .pipe(stylus({ 42 | use: [jeet(), nib(), rupture()] 43 | })) 44 | .pipe(gulp.dest(origin + '/css')) 45 | }) 46 | 47 | gulp.task('minify css', function () { 48 | return gulp.src('./source/blossom.styl') 49 | .pipe(stylus({ 50 | compress: true, 51 | use: [jeet(), nib(), rupture()] 52 | })) 53 | .pipe(rename({ 54 | basename: "blossom", 55 | suffix: ".min", 56 | })) 57 | .pipe(gulp.dest(origin + '/css')) 58 | }) 59 | 60 | gulp.task('compile js', function () { 61 | return gulp.src('./js/blossom.js') 62 | .pipe(gulp.dest(origin + '/js')) 63 | }) 64 | 65 | gulp.task('minify js', function (cb) { 66 | pump([ 67 | gulp.src('./js/blossom.js'), 68 | babel({ 69 | presets: ['es2015'] 70 | }), 71 | uglify(), 72 | rename({ 73 | basename: "blossom", 74 | suffix: ".min", 75 | }), 76 | gulp.dest(origin + '/js') 77 | ], cb) 78 | }) 79 | 80 | gulp.task('copy gulp', function (cb) { 81 | if (origin = source.ROOT) { 82 | return gulp.src('./gulpfile.js') 83 | .pipe(gulp.dest(origin)) 84 | } 85 | return false 86 | }) 87 | 88 | gulp.task('copy fonts', function (cb) { 89 | return gulp.src('./source/fonts/*') 90 | .pipe(gulp.dest(origin + '/css/fonts')) 91 | }) 92 | 93 | gulp.task('copy source', function (cb) { 94 | if (origin = source.ROOT) { 95 | return gulp.src(['./source/**/*', '!./source/**/_.styl']) 96 | .pipe(gulp.dest(origin + '/source')) 97 | } 98 | return false 99 | }) 100 | 101 | gulp.task('check custom', function (cb) { 102 | const _path = path.join(origin, '/source/modules/_.styl') 103 | 104 | fs.stat(_path, function(err, stat) { 105 | if(err != null) { 106 | return gulp.src(['./source/modules/_.styl']) 107 | .pipe(gulp.dest(origin + '/source/modules')) 108 | } 109 | 110 | return false 111 | }) 112 | 113 | }) 114 | 115 | gulp.task('build', function(cb) { 116 | runSequence('purge', ['compile css', 'compile js'], ['minify css', 'minify js'], ['copy gulp', 'copy source'], 'copy fonts', 'check custom', cb) 117 | }) 118 | 119 | gulp.task('watch', ['watch source']) 120 | -------------------------------------------------------------------------------- /js/blossom.js: -------------------------------------------------------------------------------- 1 | if (typeof(jQuery) == 'undefined') { 2 | console.log('Blossom did not detect jQuery. Include the latest source url at the end of your body markup.') 3 | } else { 4 | 5 | $(function() { 6 | loadProgressBars() 7 | loadActiveProgressBars() 8 | $('.dropdown').dropdown() 9 | 10 | $('body').on('click', '.menu .item', function(e) { 11 | const _parent = $(this).parents('.menu') 12 | _parent.find('.item').removeClass('active') 13 | $(this).addClass('active') 14 | }).on('click', '.accordion .title', function(e) { 15 | if ($(this).parent().hasClass('single') && !$(this).hasClass('open')) { 16 | $('.accordion .title, .accordion .content').removeClass('open') 17 | $('.accordion .content').slideUp('fast') 18 | } 19 | 20 | if ($(this).hasClass('open')) { 21 | $(this).removeClass('open').next().slideUp('fast') 22 | } else { 23 | $(this).addClass('open').next().slideDown('fast') 24 | } 25 | }) 26 | }) 27 | 28 | $.fn.extend({ 29 | dropdown: function(o){ 30 | o = $.extend({ maxHeight: 600, buffer: 100, delay: 0 }, o) 31 | 32 | return this.each(function(){ 33 | var dropdown = $(this), 34 | toggle = dropdown.find('.toggle'), 35 | menu = dropdown.find('.menu'), 36 | a = dropdown.find('a') 37 | 38 | if(!dropdown.length) return 39 | 40 | toggle.unbind("click") 41 | toggle.click(function(e){ 42 | (!menu.is(':visible')) && $('.menu').parent().removeClass('open') 43 | 44 | setTimeout(function() { 45 | menu.parent().addClass('open') 46 | }, o.delay) 47 | }) 48 | 49 | a.bind('click', function(e){ 50 | menu.parent().removeClass('open') 51 | }) 52 | 53 | $(document).bind('click', function(e) { 54 | if (! $(e.target).parents().hasClass('dropdown')) 55 | menu.parent().removeClass('open') 56 | }) 57 | }) 58 | } 59 | }) 60 | 61 | 62 | function loadProgressBars() { 63 | $('.progress:not(.active) .bar[data-percent]').each(function () { 64 | const progress = $(this) 65 | const status = $(this).find('.status') 66 | const percentage = Math.ceil($(this).attr('data-percent')) + '%' 67 | progress.css('width',percentage) 68 | status.text(percentage) 69 | }) 70 | } 71 | 72 | function loadActiveProgressBars() { 73 | $('.progress.active .bar[data-percent]').each(function () { 74 | const progress = $(this) 75 | const status = $(this).find('.status') 76 | const percentage = Math.ceil($(this).attr('data-percent')) 77 | $({countNum: 0}).animate({countNum: percentage}, { 78 | duration: 1600, 79 | easing:'linear', 80 | step: function() { 81 | var pct = '' 82 | if(percentage == 0){ 83 | pct = Math.floor(this.countNum) + '%' 84 | }else{ 85 | pct = Math.floor(this.countNum+1) + '%' 86 | } 87 | status.text(pct) && progress.css('width',pct) 88 | } 89 | }) 90 | }) 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /js/blossom.min.js: -------------------------------------------------------------------------------- 1 | "use strict";if("undefined"==typeof jQuery)console.log("Blossom did not detect jQuery. Include the latest source url at the end of your body markup.");else{var loadProgressBars=function(){$(".progress:not(.active) .bar[data-percent]").each(function(){var t=$(this),e=$(this).find(".status"),n=Math.ceil($(this).attr("data-percent"))+"%";t.css("width",n),e.text(n)})},loadActiveProgressBars=function(){$(".progress.active .bar[data-percent]").each(function(){var t=$(this),e=$(this).find(".status"),n=Math.ceil($(this).attr("data-percent"));$({countNum:0}).animate({countNum:n},{duration:1600,easing:"linear",step:function(){var s="";s=0==n?Math.floor(this.countNum)+"%":Math.floor(this.countNum+1)+"%",e.text(s)&&t.css("width",s)}})})};$(function(){loadProgressBars(),loadActiveProgressBars(),$(".dropdown").dropdown(),$("body").on("click",".menu .item",function(t){$(this).parents(".menu").find(".item").removeClass("active"),$(this).addClass("active")}).on("click",".accordion .title",function(t){$(this).parent().hasClass("single")&&!$(this).hasClass("open")&&($(".accordion .title, .accordion .content").removeClass("open"),$(".accordion .content").slideUp("fast")),$(this).hasClass("open")?$(this).removeClass("open").next().slideUp("fast"):$(this).addClass("open").next().slideDown("fast")})}),$.fn.extend({dropdown:function(t){return t=$.extend({maxHeight:600,buffer:100,delay:0},t),this.each(function(){var e=$(this),n=e.find(".toggle"),s=e.find(".menu"),a=e.find("a");e.length&&(n.unbind("click"),n.click(function(e){!s.is(":visible")&&$(".menu").parent().removeClass("open"),setTimeout(function(){s.parent().addClass("open")},t.delay)}),a.bind("click",function(t){s.parent().removeClass("open")}),$(document).bind("click",function(t){$(t.target).parents().hasClass("dropdown")||s.parent().removeClass("open")}))})}})} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blossom-ui", 3 | "version": "1.6.1", 4 | "description": "A free open-source design framework for the modern web", 5 | "main": "index.js", 6 | "scripts": { 7 | "build:root": "gulp build --root", 8 | "build:origin": "gulp build", 9 | "postinstall": "npm run build:root", 10 | "build": "npm run build:origin", 11 | "postversion": "npm run build:root" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/cindr-io/Blossom.git" 16 | }, 17 | "keywords": [ 18 | "blossom", 19 | "blossom-ui", 20 | "framework", 21 | "ui", 22 | "css", 23 | "stylus", 24 | "responsive", 25 | "design" 26 | ], 27 | "author": "Stefan Mansson (https://cindr.io)", 28 | "license": "SEE LICENSE IN LICENSE", 29 | "bugs": { 30 | "url": "https://github.com/cindr-io/Blossom/issues" 31 | }, 32 | "homepage": "https://getblossom.io", 33 | "dependencies": { 34 | "app-root-path": "^2.0.1", 35 | "babel-preset-es2015": "^6.24.1", 36 | "del": "^2.2.1", 37 | "gulp": "^3.9.1", 38 | "gulp-babel": "^6.1.2", 39 | "gulp-rename": "^1.2.2", 40 | "gulp-run-sequence": "^0.3.2", 41 | "gulp-stylus": "^2.5.0", 42 | "gulp-uglify": "^2.1.2", 43 | "gulp-watch": "^4.3.11", 44 | "jeet": "^7.1.0", 45 | "nib": "^1.1.0", 46 | "pump": "^1.0.2", 47 | "rupture": "^0.6.1", 48 | "yargs": "^8.0.1" 49 | }, 50 | "peerDependencies": { 51 | "app-root-path": "^1.3.0", 52 | "del": "*", 53 | "gulp": "*", 54 | "gulp-rename": "*", 55 | "gulp-stylus": "*", 56 | "gulp-uglify": "*", 57 | "gulp-watch": "*", 58 | "jeet": "*", 59 | "nib": "*", 60 | "rupture": "*", 61 | "yargs": "*" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /source/blossom.styl: -------------------------------------------------------------------------------- 1 | @import 'nib' 2 | @import 'jeet' 3 | @import 'rupture' 4 | 5 | @import 'modules/font' 6 | @import 'modules/variables' 7 | @import 'modules/ui' 8 | @import 'modules/breakpoints' 9 | @import 'modules/mixins' 10 | 11 | @import 'modules/container' 12 | @import 'modules/grid' 13 | 14 | @import 'modules/helpers' 15 | @import 'modules/dropdowns' 16 | @import 'modules/tables' 17 | @import 'modules/tooltips' 18 | @import 'modules/accordions' 19 | @import 'modules/buttons' 20 | @import 'modules/lists' 21 | @import 'modules/labels' 22 | @import 'modules/dividers' 23 | @import 'modules/messages' 24 | @import 'modules/forms' 25 | @import 'modules/menus' 26 | @import 'modules/colors' 27 | @import 'modules/loaders' 28 | @import 'modules/cards' 29 | @import 'modules/comments' 30 | @import 'modules/progress' 31 | @import 'modules/stages' 32 | @import 'modules/code' 33 | @import 'modules/animations' 34 | 35 | @import 'modules/_' 36 | -------------------------------------------------------------------------------- /source/fonts/InterUI-Black.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-Black.eot -------------------------------------------------------------------------------- /source/fonts/InterUI-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-Black.woff -------------------------------------------------------------------------------- /source/fonts/InterUI-BlackItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-BlackItalic.eot -------------------------------------------------------------------------------- /source/fonts/InterUI-BlackItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-BlackItalic.woff -------------------------------------------------------------------------------- /source/fonts/InterUI-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-Bold.eot -------------------------------------------------------------------------------- /source/fonts/InterUI-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-Bold.woff -------------------------------------------------------------------------------- /source/fonts/InterUI-BoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-BoldItalic.eot -------------------------------------------------------------------------------- /source/fonts/InterUI-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-BoldItalic.woff -------------------------------------------------------------------------------- /source/fonts/InterUI-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-Medium.eot -------------------------------------------------------------------------------- /source/fonts/InterUI-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-Medium.woff -------------------------------------------------------------------------------- /source/fonts/InterUI-MediumItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-MediumItalic.eot -------------------------------------------------------------------------------- /source/fonts/InterUI-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-MediumItalic.woff -------------------------------------------------------------------------------- /source/fonts/InterUI-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-Regular.eot -------------------------------------------------------------------------------- /source/fonts/InterUI-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-Regular.woff -------------------------------------------------------------------------------- /source/fonts/InterUI-RegularItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-RegularItalic.eot -------------------------------------------------------------------------------- /source/fonts/InterUI-RegularItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/animify/Blossom/32133395c002abf31ff2a2f40da1ddce92ad3908/source/fonts/InterUI-RegularItalic.woff -------------------------------------------------------------------------------- /source/fonts/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 The Inter UI Project Authors (me@rsms.me) 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | ----------------------------------------------------------- 8 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 9 | ----------------------------------------------------------- 10 | 11 | PREAMBLE 12 | The goals of the Open Font License (OFL) are to stimulate worldwide 13 | development of collaborative font projects, to support the font creation 14 | efforts of academic and linguistic communities, and to provide a free and 15 | open framework in which fonts may be shared and improved in partnership 16 | with others. 17 | 18 | The OFL allows the licensed fonts to be used, studied, modified and 19 | redistributed freely as long as they are not sold by themselves. The 20 | fonts, including any derivative works, can be bundled, embedded, 21 | redistributed and/or sold with any software provided that any reserved 22 | names are not used by derivative works. The fonts and derivatives, 23 | however, cannot be released under any other type of license. The 24 | requirement for fonts to remain under this license does not apply 25 | to any document created using the fonts or their derivatives. 26 | 27 | DEFINITIONS 28 | "Font Software" refers to the set of files released by the Copyright 29 | Holder(s) under this license and clearly marked as such. This may 30 | include source files, build scripts and documentation. 31 | 32 | "Reserved Font Name" refers to any names specified as such after the 33 | copyright statement(s). 34 | 35 | "Original Version" refers to the collection of Font Software components as 36 | distributed by the Copyright Holder(s). 37 | 38 | "Modified Version" refers to any derivative made by adding to, deleting, 39 | or substituting -- in part or in whole -- any of the components of the 40 | Original Version, by changing formats or by porting the Font Software to a 41 | new environment. 42 | 43 | "Author" refers to any designer, engineer, programmer, technical 44 | writer or other person who contributed to the Font Software. 45 | 46 | PERMISSION AND CONDITIONS 47 | Permission is hereby granted, free of charge, to any person obtaining 48 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 49 | redistribute, and sell modified and unmodified copies of the Font 50 | Software, subject to the following conditions: 51 | 52 | 1) Neither the Font Software nor any of its individual components, 53 | in Original or Modified Versions, may be sold by itself. 54 | 55 | 2) Original or Modified Versions of the Font Software may be bundled, 56 | redistributed and/or sold with any software, provided that each copy 57 | contains the above copyright notice and this license. These can be 58 | included either as stand-alone text files, human-readable headers or 59 | in the appropriate machine-readable metadata fields within text or 60 | binary files as long as those fields can be easily viewed by the user. 61 | 62 | 3) No Modified Version of the Font Software may use the Reserved Font 63 | Name(s) unless explicit written permission is granted by the corresponding 64 | Copyright Holder. This restriction only applies to the primary font name as 65 | presented to the users. 66 | 67 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 68 | Software shall not be used to promote, endorse or advertise any 69 | Modified Version, except to acknowledge the contribution(s) of the 70 | Copyright Holder(s) and the Author(s) or with their explicit written 71 | permission. 72 | 73 | 5) The Font Software, modified or unmodified, in part or in whole, 74 | must be distributed entirely under this license, and must not be 75 | distributed under any other license. The requirement for fonts to 76 | remain under this license does not apply to any document created 77 | using the Font Software. 78 | 79 | TERMINATION 80 | This license becomes null and void if any of the above conditions are 81 | not met. 82 | 83 | DISCLAIMER 84 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 85 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 86 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 87 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 88 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 89 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 90 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 91 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 92 | OTHER DEALINGS IN THE FONT SOFTWARE. 93 | -------------------------------------------------------------------------------- /source/modules/_.styl: -------------------------------------------------------------------------------- 1 | // Enter your custom styling here 2 | -------------------------------------------------------------------------------- /source/modules/accordions.styl: -------------------------------------------------------------------------------- 1 | .accordion 2 | span((1 / 1)); 3 | 4 | & > .title 5 | padding: .7rem 0; 6 | cursor: pointer; 7 | line-height: 1.6em; 8 | color: color-heading; 9 | font-weight: 500; 10 | 11 | & > i 12 | width: 1.3rem; 13 | display: inline-block; 14 | height: 1px; 15 | 16 | &::before 17 | content: '\f125'; 18 | font: normal normal normal .74rem Ionicons; 19 | color: link-light; 20 | 21 | &.open 22 | i::before 23 | content: '\f123'; 24 | font: normal normal normal .74rem Ionicons; 25 | color: link-light; 26 | 27 | & > .content 28 | line-height: 1.6rem; 29 | display: none; 30 | color: text-default; 31 | 32 | &.open 33 | display: block; 34 | 35 | & + .title 36 | margin-top: .6rem; 37 | 38 | &.module 39 | padding: 0; 40 | max-width: 40rem; 41 | 42 | &.fluid 43 | max-width: none; 44 | 45 | & > .title 46 | padding: 1.3rem 1.3rem; 47 | border-top: 1px solid border-grey; 48 | font-weight: 600; 49 | color: color-heading; 50 | line-height: 1.4rem; 51 | 52 | &:first-child 53 | border: none; 54 | 55 | & > .content 56 | padding: 0 1.3rem 1.3rem 1.3rem; 57 | margin-top: -.8rem; 58 | 59 | & + .title 60 | margin-top: 0; 61 | -------------------------------------------------------------------------------- /source/modules/animations.styl: -------------------------------------------------------------------------------- 1 | .transitionDuration 2 | &-0 3 | transition-duration: duration-0; 4 | 5 | &-s 6 | transition-duration: duration-s; 7 | 8 | &-m 9 | transition-duration: duration-m; 10 | 11 | &-l 12 | transition-duration: duration-l; 13 | 14 | &-xl 15 | transition-duration: duration-xl; 16 | 17 | &-xxl 18 | transition-duration: duration-xxl; 19 | 20 | .transitionType 21 | &-linear 22 | transition-timing-function: linear; 23 | 24 | &-ease 25 | transition-timing-function: ease; 26 | 27 | &-scaleIn 28 | transition-timing-function: cubic-bezier(0, 1.42, .44, 1); 29 | 30 | &-scaleOut 31 | transition-timing-function: cubic-bezier(.16, .86, .44, 1); 32 | 33 | &-spring 34 | transition-timing-function: cubic-bezier(.68, -.55, .27, 1.55); 35 | 36 | &-bounce 37 | transition-timing-function: cubic-bezier(.04, .89, .76, 1.74); 38 | 39 | .animation-spin 40 | animation: spin duration-xxxl infinite linear; 41 | 42 | .animation-rotate 43 | animation: spin 3s duration-xxl infinite cubic-bezier(.04, .95, .17, 1); 44 | 45 | .animation-bounce 46 | animation: bounce duration-xxxl infinite cubic-bezier(.04, .95, .17, 1); 47 | 48 | .animation-pulse 49 | animation: pulse duration-xxxl infinite linear; 50 | 51 | .animation-shake 52 | animation: shake duration-xxxl infinite linear; 53 | 54 | .animation-swing 55 | transform-origin: 50% 0; 56 | animation: swing duration-xxxxl infinite linear; 57 | 58 | .animation-spring 59 | animation: spring duration-l cubic-bezier(.04, .95, .17, 1); 60 | 61 | .landing-fadein 62 | animation: fadein duration-xl linear forwards; 63 | opacity: 0; 64 | 65 | .landing-ascend 66 | animation: ascend duration-xl linear forwards; 67 | opacity: 0; 68 | 69 | .landing-descend 70 | animation: descend duration-xl linear forwards; 71 | opacity: 0; 72 | 73 | @keyframes spin 74 | 0% 75 | transform: rotate(0deg); 76 | 77 | 100% 78 | transform: rotate(1turn); 79 | 80 | @keyframes bounce 81 | 0%, 20%, 50%, 80%, 100% 82 | transform: translateY(0); 83 | 84 | 40% 85 | transform: translateY(-15px); 86 | 87 | 60% 88 | transform: translateY(-5px); 89 | 90 | @keyframes pulse 91 | 0%, 20%, 50%, 80%, 100% 92 | transform: scale(1); 93 | 94 | 40% 95 | transform: scale(1.1); 96 | 97 | 60% 98 | transform: scale(1.1); 99 | 100 | @keyframes shake 101 | 0% 102 | transform: translateY(0); 103 | 104 | 20%, 40%, 60%, 80%, 100% 105 | transform: translateX(-3px); 106 | 107 | 10%, 30%, 50%, 70%, 90% 108 | transform: translateX(3px); 109 | 110 | @keyframes swing 111 | 0% 112 | transform: rotate(20deg); 113 | 114 | 50% 115 | transform: rotate(-10deg); 116 | 117 | 100% 118 | transform: rotate(20deg); 119 | 120 | @keyframes double-bounce 121 | 0% 122 | transform: scale(0); 123 | 124 | 50% 125 | transform: scale(1); 126 | 127 | 100% 128 | transform: scale(0); 129 | 130 | @keyframes spring 131 | 0% 132 | transform: scale(1.1); 133 | 134 | 40% 135 | transform: scale(.9); 136 | 137 | 100% 138 | transform: scale(1); 139 | 140 | @keyframes fadein 141 | 0% 142 | opacity: 0; 143 | 144 | 100% 145 | opacity: 1; 146 | 147 | @keyframes ascend 148 | 0% 149 | transform: translateY(30px); 150 | opacity: 0; 151 | 152 | 60% 153 | transform: translateY(20px); 154 | opacity: 0; 155 | 156 | 100% 157 | opacity: 1; 158 | transform: translateY(0); 159 | 160 | @keyframes descend 161 | 0% 162 | transform: translateY(-30px); 163 | opacity: 0; 164 | 165 | 60% 166 | transform: translateY(-20px); 167 | opacity: 0; 168 | 169 | 100% 170 | opacity: 1; 171 | transform: translateY(0); 172 | 173 | @keyframes load2 174 | 0% 175 | transform: rotate(0deg); 176 | 177 | 100% 178 | transform: rotate(360deg); 179 | -------------------------------------------------------------------------------- /source/modules/breakpoints.styl: -------------------------------------------------------------------------------- 1 | .breakpoint- 2 | &xs-hide 3 | +below('xs') 4 | display: none; 5 | 6 | &s-hide 7 | +below('s') 8 | display: none; 9 | 10 | &m-hide 11 | +below('m') 12 | display: none; 13 | 14 | &l-hide 15 | +below('l') 16 | display: none; 17 | 18 | &xl-hide 19 | +below('xl') 20 | display: none; 21 | 22 | &xxl-hide 23 | +below('xxl') 24 | display: none; 25 | 26 | &xs-show 27 | display: none; 28 | 29 | +below('xs') 30 | display: block; 31 | 32 | &s-show 33 | display: none; 34 | 35 | +below('s') 36 | display: block; 37 | 38 | &m-show 39 | display: none; 40 | 41 | +below('m') 42 | display: block; 43 | 44 | &l-show 45 | display: none; 46 | 47 | +below('l') 48 | display: block; 49 | 50 | &xl-show 51 | display: none; 52 | 53 | +below('xl') 54 | display: block; 55 | 56 | &xxl-show 57 | display: none; 58 | 59 | +below('xxl') 60 | display: block; 61 | 62 | &xs-stack 63 | +below('xs') 64 | stack(); 65 | 66 | margin: 0 !important; 67 | padding: 0; 68 | 69 | &able > * 70 | +below('xs') 71 | stack(); 72 | 73 | margin: 0 !important; 74 | padding: 0; 75 | 76 | &s-stack 77 | +below('s') 78 | stack(); 79 | 80 | margin: 0 !important; 81 | padding: 0; 82 | 83 | &able > * 84 | +below('s') 85 | stack(); 86 | 87 | margin: 0 !important; 88 | padding: 0; 89 | 90 | &m-stack 91 | +below('m') 92 | stack(); 93 | 94 | margin: 0 !important; 95 | padding: 0; 96 | 97 | &able > * 98 | +below('m') 99 | stack(); 100 | 101 | margin: 0 !important; 102 | padding: 0; 103 | 104 | &l-stack 105 | +below('l') 106 | stack(); 107 | 108 | margin: 0 !important; 109 | padding: 0; 110 | 111 | &able > * 112 | +below('l') 113 | stack(); 114 | 115 | margin: 0 !important; 116 | padding: 0; 117 | 118 | &xl-stack 119 | +below('xl') 120 | stack(); 121 | 122 | margin: 0 !important; 123 | padding: 0; 124 | 125 | &able > * 126 | +below('xl') 127 | stack(); 128 | 129 | margin: 0 !important; 130 | padding: 0; 131 | 132 | &xxl-stack 133 | +below('xxl') 134 | stack(); 135 | 136 | margin: 0 !important; 137 | padding: 0; 138 | 139 | &able > * 140 | +below('xxl') 141 | stack(); 142 | 143 | margin: 0 !important; 144 | padding: 0; 145 | -------------------------------------------------------------------------------- /source/modules/buttons.styl: -------------------------------------------------------------------------------- 1 | .button 2 | display: inline-block; 3 | position: relative; 4 | border-radius: border-radius-normal; 5 | color: text-default; 6 | background-color: background-light-grey; 7 | outline: 0; 8 | padding: .75em 1.8em; 9 | text-align: center; 10 | border: 0; 11 | line-height: 1.125; 12 | font-size: font-size-standard; 13 | font-weight: 500; 14 | cursor: pointer; 15 | transition: all .2s ease; 16 | vertical-align: top; 17 | 18 | for size in 'small' 'medium' 'large' 'big' 19 | &.{size} 20 | btn-size(size); 21 | 22 | &.outlined 23 | box-sizing: border-box; 24 | background-color: transparent; 25 | box-shadow: inset 0px 0px 0px 1px background-light-grey; 26 | color: text-default; 27 | 28 | &.white 29 | color: #fff; 30 | 31 | &:hover 32 | background-color: #fff; 33 | color: text-default; 34 | 35 | &:hover 36 | box-shadow: none; 37 | background-color: background-light-grey; 38 | 39 | for clr in 'red' 'orange' 'yellow' 'green' 'teal' 'blue' 'violet' 'purple' 'pink' 'brown' 'grey' 'black' 'primary' 40 | &.{clr} 41 | btn-color(clr); 42 | btn-background(clr); 43 | 44 | &.disabled, &[disabled], &.loading 45 | pointer-events: none; 46 | 47 | btn-disabled-color(clr); 48 | 49 | &.outlined 50 | btn-color-outlined(clr); 51 | 52 | background-color: transparent; 53 | 54 | btn-border(clr); 55 | 56 | &:hover 57 | btn-color(clr); 58 | btn-background-hover(clr); 59 | 60 | &.labeled 61 | padding-left: 4.2em; 62 | 63 | i 64 | absolute: top left; 65 | width: 2.8rem; 66 | background-color: rgba(0, 0, 0, .1); 67 | text-align: center; 68 | color: #fff; 69 | height: 100%; 70 | line-height: 2.7; 71 | 72 | &.labeled-right 73 | padding-left: 1.8em; 74 | padding-right: 4.2em; 75 | 76 | i 77 | absolute: top right; 78 | left: auto; 79 | 80 | &.icon 81 | padding: auto .8275rem; 82 | 83 | &:hover 84 | color: text-default; 85 | background-color: darken(background-light-grey, 4%); 86 | text-decoration: none; 87 | 88 | &.disabled, &[disabled] 89 | @extend .disabled; 90 | 91 | color: text-disabled; 92 | 93 | &.loading 94 | @extend .disabled; 95 | 96 | color: text-disabled; 97 | 98 | span 99 | color: inherit !important; 100 | 101 | .loader 102 | height: 1.125em; 103 | width: 1.125em; 104 | line-height: 1em; 105 | border-width: .2em; 106 | display: inline-block; 107 | vertical-align: top; 108 | 109 | .loader + span, span + .loader 110 | margin-left: .8em; 111 | -------------------------------------------------------------------------------- /source/modules/cards.styl: -------------------------------------------------------------------------------- 1 | .cards 2 | display: flex; 3 | flex-wrap: wrap; 4 | 5 | .card 6 | position: relative; 7 | background-color: #fff; 8 | border: 1px solid border-grey; 9 | border-radius: border-radius-normal; 10 | width: 285px; 11 | display: flex; 12 | flex-direction: column; 13 | 14 | &.fluid 15 | span((1 / 1)); 16 | 17 | .image 18 | flex: 0 0 auto; 19 | 20 | img 21 | max-width: 100%; 22 | 23 | &.header 24 | img 25 | border-radius: border-radius-normal border-radius-normal 0 0; 26 | 27 | .content 28 | padding: 1.2rem 1.4rem; 29 | flex-grow: 1; 30 | 31 | a 32 | color: link-light; 33 | 34 | &:hover 35 | color: link-light-hover; 36 | 37 | &:after 38 | display: block; 39 | content: ''; 40 | clear: both; 41 | 42 | .header 43 | font-size: font-size-h5; 44 | line-height: 1.6; 45 | 46 | .sub 47 | line-height: 1.3; 48 | color: text-default; 49 | font-weight: 500; 50 | 51 | p 52 | margin-top: .7rem; 53 | 54 | &.footer 55 | flex-grow: 0; 56 | 57 | span((1 / 1)); 58 | 59 | padding: 1rem 1.4rem; 60 | border-top: 1px solid lighten(border-grey, 25%); 61 | font-size: font-size-small; 62 | 63 | &.button 64 | padding: .75em 0; 65 | text-align: center; 66 | border-radius: 0 0 border-radius-normal border-radius-normal; 67 | 68 | &:hover 69 | color: link-light-hover; 70 | 71 | &:hover, &:active 72 | box-shadow: none !important; 73 | 74 | i 75 | margin-right: .5rem; 76 | font-size: font-size-small; 77 | color: text-default; 78 | -------------------------------------------------------------------------------- /source/modules/code.styl: -------------------------------------------------------------------------------- 1 | code 2 | background-color: background-lighter-grey; 3 | color: color-primary; 4 | padding: .3rem .5rem; 5 | border-radius: border-radius-normal; 6 | font-family: font-family-code; 7 | line-height: 1.6rem; 8 | font-size: font-size-code; 9 | font-weight: 500; 10 | 11 | p 12 | code 13 | margin: 0 .3rem; 14 | 15 | .message 16 | code 17 | background-color: transparent; 18 | border: 1px solid border-grey; 19 | -------------------------------------------------------------------------------- /source/modules/colors.styl: -------------------------------------------------------------------------------- 1 | for color in 'red' 'orange' 'yellow' 'green' 'teal' 'blue' 'violet' 'purple' 'pink' 'brown' 'grey' 'black' 'primary' 'ash' 'smoke' 2 | .{color}:not(.button):not(.text) 3 | background-color: lookup('color-' + color); 4 | 5 | &.light 6 | background-color: lighten(lookup('color-' + color), 18%); 7 | 8 | &.dark 9 | background-color: darken(lookup('color-' + color), 18%); 10 | 11 | .text.{color} 12 | text-color(color); 13 | -------------------------------------------------------------------------------- /source/modules/comments.styl: -------------------------------------------------------------------------------- 1 | .comments 2 | cf(); 3 | 4 | .comment 5 | position: relative; 6 | margin-top: 1.4rem; 7 | 8 | cf(); 9 | 10 | .avatar 11 | width: 2.5rem; 12 | height: 2.5rem; 13 | height: auto; 14 | display: block; 15 | vertical-align: top; 16 | margin-top: .26rem; 17 | float: left; 18 | border-radius: border-radius-normal; 19 | 20 | img 21 | max-width: 100%; 22 | border-radius: border-radius-normal; 23 | 24 | .content 25 | display: block; 26 | vertical-align: top; 27 | margin-left: 3.4rem; 28 | 29 | .actions 30 | display: block; 31 | font-size: font-size-small; 32 | margin-top: .63rem; 33 | 34 | .action 35 | display: inline-block; 36 | vertical-align: top; 37 | color: light-link; 38 | 39 | & + .action 40 | margin-left: .6rem; 41 | 42 | &.active 43 | color: light-link-hover; 44 | 45 | &:hover 46 | color: light-link-hover; 47 | 48 | .meta 49 | font-size: font-size-small; 50 | color: text-default; 51 | margin-left: .6rem; 52 | 53 | .creator 54 | font-weight: 600; 55 | color: color-heading; 56 | line-height: 1.62rem; 57 | 58 | &:hover 59 | color: primary-color; 60 | 61 | .text 62 | line-height: 1.14rem; 63 | 64 | .reply 65 | position: relative; 66 | 67 | textarea 68 | margin-top: 1rem; 69 | 70 | .group 71 | margin-top: 1.4rem; 72 | 73 | .button 74 | border-radius: border-radius-normal; 75 | -------------------------------------------------------------------------------- /source/modules/container.styl: -------------------------------------------------------------------------------- 1 | .contain 2 | center(standard-page-width, standard-page-padding); 3 | 4 | position: relative; 5 | 6 | cf(); 7 | 8 | .bind 9 | height: 100%; 10 | width: 100%; 11 | 12 | .group 13 | .button 14 | margin: 0 !important; 15 | border-radius: 0; 16 | 17 | &.outlined 18 | & + .outlined 19 | margin-left: -1px !important; 20 | 21 | &:first-of-type 22 | border-radius: border-radius-normal 0 0 border-radius-normal; 23 | 24 | &:last-of-type 25 | border-radius: 0 border-radius-normal border-radius-normal 0; 26 | -------------------------------------------------------------------------------- /source/modules/dividers.styl: -------------------------------------------------------------------------------- 1 | .divider 2 | margin: 1rem 0; 3 | color: text-default; 4 | font-size: font-size-standard; 5 | text-align: center; 6 | 7 | &:not(.vertical):not(.horizontal) 8 | border-top: 1px solid border-grey; 9 | 10 | &.horizontal 11 | display: table; 12 | white-space: nowrap; 13 | 14 | &:before 15 | background-position: right 1rem top 50%; 16 | 17 | &:after 18 | background-position: left 1rem top 50%; 19 | 20 | &:before, &:after 21 | display: table-cell; 22 | position: relative; 23 | content: ''; 24 | width: 50%; 25 | background-repeat: no-repeat; 26 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAABCAIAAACnup5zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1QkQwODI0NDM1NUUxMUU2OTBENUY1MERFMUI2NDg3QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1QkQwODI0NTM1NUUxMUU2OTBENUY1MERFMUI2NDg3QyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM0NkE5QkVCMzQwRDExRTY5MEQ1RjUwREUxQjY0ODdDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM0NkE5QkVDMzQwRDExRTY5MEQ1RjUwREUxQjY0ODdDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+BsWJGwAAACRJREFUeNrswTENAAAIAzDwL5JnDy7QQdK2J1sAAAAAn50AAwA4LwKuOxCNAQAAAABJRU5ErkJggg=='); 27 | -------------------------------------------------------------------------------- /source/modules/dropdowns.styl: -------------------------------------------------------------------------------- 1 | .dropdown 2 | position: relative; 3 | display: inline-block; 4 | 5 | &.disabled 6 | .toggle 7 | opacity: .4; 8 | pointer-events: none; 9 | cursor: default; 10 | 11 | .toggle 12 | cursor: pointer; 13 | 14 | &:not(.button) > i 15 | margin: 0 .2rem; 16 | font-size: font-size-small; 17 | 18 | &.floating 19 | .menu 20 | margin-top: 1rem; 21 | 22 | &.open 23 | .menu 24 | display: block; 25 | 26 | .menu 27 | background-color: #fff; 28 | absolute: top 2rem left 0; 29 | border: 1px solid background-light-grey; 30 | border-radius: border-radius-normal; 31 | min-width: 13rem; 32 | z-index: 2000; 33 | display: none; 34 | padding: 1rem 0; 35 | box-shadow: 0 1px 5px 0 box-shadow-grey; 36 | 37 | li 38 | display: block; 39 | 40 | i 41 | width: 1.3rem; 42 | 43 | &.divider 44 | margin: .6rem 0; 45 | 46 | &.disabled 47 | opacity: .4; 48 | pointer-events: none; 49 | cursor: default; 50 | 51 | &.header 52 | color: text-default; 53 | padding: .5rem 1.4rem .5rem 1.4rem; 54 | font-size: font-size-standard; 55 | font-weight: 500; 56 | 57 | &:hover 58 | a 59 | color: color-primary; 60 | 61 | a 62 | color: text-default; 63 | display: block; 64 | padding: .25rem 1.4rem; 65 | line-height: 1.6em; 66 | 67 | &.right 68 | .menu 69 | left: auto; 70 | right: 0; 71 | 72 | &.upward 73 | .menu 74 | top: auto; 75 | bottom: 2rem; 76 | 77 | .sub 78 | left: 13rem; 79 | -------------------------------------------------------------------------------- /source/modules/font.styl: -------------------------------------------------------------------------------- 1 | @font-face 2 | font-family: 'Inter UI'; 3 | src: url('fonts/InterUI-Black.eot'); 4 | src: url('fonts/InterUI-Black.eot?#iefix') format('embedded-opentype'), url('fonts/InterUI-Black.woff') format('woff'); 5 | font-weight: 900; 6 | font-style: normal; 7 | 8 | @font-face 9 | font-family: 'Inter UI'; 10 | src: url('fonts/InterUI-BoldItalic.eot'); 11 | src: url('fonts/InterUI-BoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/InterUI-BoldItalic.woff') format('woff'); 12 | font-weight: bold; 13 | font-style: italic; 14 | 15 | @font-face 16 | font-family: 'Inter UI'; 17 | src: url('fonts/InterUI-Medium.eot'); 18 | src: url('fonts/InterUI-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/InterUI-Medium.woff') format('woff'); 19 | font-weight: 500; 20 | font-style: normal; 21 | 22 | @font-face 23 | font-family: 'Inter UI'; 24 | src: url('fonts/InterUI-BlackItalic.eot'); 25 | src: url('fonts/InterUI-BlackItalic.eot?#iefix') format('embedded-opentype'), url('fonts/InterUI-BlackItalic.woff') format('woff'); 26 | font-weight: 900; 27 | font-style: italic; 28 | 29 | @font-face 30 | font-family: 'Inter UI'; 31 | src: url('fonts/InterUI-MediumItalic.eot'); 32 | src: url('fonts/InterUI-MediumItalic.eot?#iefix') format('embedded-opentype'), url('fonts/InterUI-MediumItalic.woff') format('woff'); 33 | font-weight: 500; 34 | font-style: italic; 35 | 36 | @font-face 37 | font-family: 'Inter UI'; 38 | src: url('fonts/InterUI-RegularItalic.eot'); 39 | src: url('fonts/InterUI-RegularItalic.eot?#iefix') format('embedded-opentype'), url('fonts/InterUI-RegularItalic.woff') format('woff'); 40 | font-weight: normal; 41 | font-style: italic; 42 | 43 | @font-face 44 | font-family: 'Inter UI'; 45 | src: url('fonts/InterUI-Bold.eot'); 46 | src: url('fonts/InterUI-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/InterUI-Bold.woff') format('woff'); 47 | font-weight: bold; 48 | font-style: normal; 49 | 50 | @font-face 51 | font-family: 'Inter UI'; 52 | src: url('fonts/InterUI-Regular.eot'); 53 | src: url('fonts/InterUI-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/InterUI-Regular.woff') format('woff'); 54 | font-weight: normal; 55 | font-style: normal; 56 | -------------------------------------------------------------------------------- /source/modules/forms.styl: -------------------------------------------------------------------------------- 1 | .input 2 | position: relative; 3 | font-size: 0; 4 | font-style: normal; 5 | 6 | input[type='text'], input[type='number'], textarea 7 | font-family: font-family-standard; 8 | font-size: font-size-standard; 9 | color: text-default; 10 | margin: 0; 11 | font-size: font-size-standard; 12 | max-width: 100%; 13 | line-height: 1.125; 14 | padding: .75rem 1rem; 15 | outline: 0; 16 | border-radius: border-radius-normal; 17 | text-align: left; 18 | border: 0; 19 | border: 1px solid background-light-grey; 20 | transition: border-color .14s ease; 21 | min-width: 220px; 22 | background-color: #fff; 23 | height: 2.625em; 24 | 25 | +placeholder() 26 | color: text-disabled; 27 | 28 | &:focus 29 | border-color: color-primary; 30 | 31 | textarea 32 | &:not([rows]) 33 | min-height: 8rem; 34 | max-height: 22rem; 35 | 36 | line-height: 1.2rem; 37 | min-height: 3rem; 38 | min-width: 23rem; 39 | width: 100%; 40 | resize: vertical; 41 | max-width: 20rem; 42 | 43 | .checkbox, .radio 44 | font-size: font-size-standard; 45 | 46 | label 47 | display: inline-block; 48 | vertical-align: middle; 49 | margin-left: .8rem; 50 | color: link-light; 51 | cursor: pointer; 52 | 53 | .toggle 54 | width: 1.4rem; 55 | height: 1.4rem; 56 | content: ' '; 57 | display: inline-block; 58 | vertical-align: top; 59 | box-shadow: inset 0 0 0 2px border-grey; 60 | cursor: pointer; 61 | 62 | &:hover 63 | label 64 | color: link-light-hover; 65 | 66 | .toggle 67 | background-color: background-lightest-grey; 68 | 69 | &.selected 70 | label 71 | color: text-default; 72 | 73 | .checkbox 74 | .toggle 75 | border-radius: border-radius-normal; 76 | transition: all cubic-bezier(.02, .49, .01, .97) .14s; 77 | 78 | &:after 79 | background-size: 100%; 80 | content: ''; 81 | transform: scale(0); 82 | height: 1.4rem; 83 | width: 1.4rem; 84 | display: block; 85 | transition: all cubic-bezier(.02, .49, .01, .97) .14s .1s; 86 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0ppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODgxODM1MEM1RTU1MTFFNzhGMDBFQjg1MzE5M0IxRTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODgxODM1MEI1RTU1MTFFNzhGMDBFQjg1MzE5M0IxRTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpjOTFhNDk2My01ZTU0LTExZTctOTIxOS1lMjc3NWExMTcwNGQiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpjOTFhNDk2My01ZTU0LTExZTctOTIxOS1lMjc3NWExMTcwNGQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4V+8aSAAAC60lEQVR42mL8//8/w2AGTAyDHIw6cNSBow4cdSCNAQs+yQsXLjA8f/6cqhZ+/fqVwcPDg4GHh8cSxH3w4MElDg4OBgkJCewaQDUJLuzj40P1EAkPD2f8/PnzxP8Q8GXx4sWJO3bswOkGvA4EGkZVx4mLi4PMbf+PCi4CMScuN9AtDXJzczMsXLiwDMisQJP6hVcjPUKQk5OTYdeuXSlAM/+ihd6vmTNnBh47dmzgopiLi4th7969oUDzfqA57u/mzZvTQGr27ds3MA4ERevu3bvdgGZ9QnPc/58/f1ba29uD1R05coQ8B4aFhVEUcsBotQSa8xaL47oDAwPhasl2YEBAAIOoqCiDpKSkMBAQ7TgBAQGGPXv26ALNeILuuL9//8708/NDyZxkO3DTpk3s79+/n/jr16/nL168WGJmZsZPjANbWloUgPqvoTsOaM4KX19fVnT1ZDsQiMORLfj06dN6S0tLDnyOc3Z2Fv3w4cMJLNG6Exgj3Nj0UOLAEnSLgJYvsrGxwVp+urm58QGrsj3oen7//n3U399fCJenyHbg1q1bVf78+fMU3cJ3795NAIYkiiVOTk7sX758WY2uFih2GZjmZPGFOtkOBBUzhw4dcgKyP6NbDEybdebm5rBoZfr+/fuc/5jgQWVlpRahNEtRLubn52c4d+5cMCimsDgyLzc3lwkYrX1YHPcKaLEZqBSgmQMjIiLglfzZs2fTsTgCVDtswiL+AWipC6i4IQZQFMUwACwLGa5cuVL3nzD4cerUqSAhISGiy02qOBAEQIX16dOnJ+Bx3N+jR48mABujJNU6VHMgtChhAcotwea6w4cPFxIbrTRzIBMTE0NDQwMvUH4XsuNOnjzZLCgoSFa9TbYD8TX5CwoKRIFV11KgurPbtm1ro6TVc+DAAZxuYMQ3uoWr0wTSA3Qcg7e3NwMrKysbsMH56+3btwwsLCxkOdDCwoIBV+gzjg6/jTpw1IGjDhx14OAGAAEGALOQyYV820TZAAAAAElFTkSuQmCC'); 87 | 88 | &.selected 89 | .toggle 90 | box-shadow: inset 0 0 0 1rem color-green; 91 | 92 | &:after 93 | transform: scale(1); 94 | 95 | .radio 96 | .toggle 97 | border: 2px solid border-grey; 98 | box-shadow: inset 0 0 0 2px #fff; 99 | border-radius: 50%; 100 | 101 | &.selected 102 | .toggle 103 | background-color: color-primary; 104 | border-color: color-primary; 105 | 106 | &.range 107 | input[type=range] 108 | -webkit-appearance: none; 109 | width: 100%; 110 | padding: 5px 0; 111 | font-size: 16px; 112 | 113 | &:focus 114 | outline: 0; 115 | 116 | &::-webkit-slider-runnable-track 117 | width: 100%; 118 | height: 3px; 119 | background: background-light-grey; 120 | border: none; 121 | border-radius: border-radius-normal; 122 | 123 | &::-webkit-slider-thumb 124 | -webkit-appearance: none; 125 | height: .8rem; 126 | width: .8rem; 127 | background-color: text-default; 128 | border-radius: 50px; 129 | cursor: pointer; 130 | margin-top: -.3rem; 131 | transition: all .14s ease; 132 | 133 | &:hover 134 | &::-webkit-slider-thumb 135 | height: 1.1rem; 136 | width: 1.1rem; 137 | margin-top: -.4rem; 138 | 139 | &.transparent 140 | input, textarea 141 | padding: 0; 142 | background-color: transparent; 143 | border: 0; 144 | 145 | &[disabled], &.disabled 146 | input[type='text'], input[type='number'], textarea 147 | @extend .disabled; 148 | 149 | background-color: background-lightest-grey; 150 | 151 | .radio, .checkbox 152 | @extend .disabled; 153 | 154 | .toggle 155 | opacity: .6; 156 | 157 | &.range 158 | @extend .disabled; 159 | 160 | input[type=range] 161 | &::-webkit-slider-thumb 162 | border: 3px solid background-light-grey; 163 | background-color: #fff; 164 | 165 | &.block 166 | textarea, input 167 | max-width: none; 168 | width: 100%; 169 | 170 | .action 171 | input 172 | border-radius: border-radius-normal 0 0 border-radius-normal; 173 | display: inline-block; 174 | vertical-align: top; 175 | 176 | & + .button 177 | border-radius: 0 border-radius-normal border-radius-normal 0; 178 | display: inline-block; 179 | vertical-align: top; 180 | font-size: font-size-standard; 181 | margin-left: -1px; 182 | 183 | .button 184 | border-radius: border-radius-normal 0 0 border-radius-normal; 185 | display: inline-block; 186 | vertical-align: top; 187 | font-size: font-size-standard; 188 | 189 | & + input 190 | border-radius: 0 border-radius-normal border-radius-normal 0; 191 | display: inline-block; 192 | vertical-align: top; 193 | margin-left: -1px; 194 | -------------------------------------------------------------------------------- /source/modules/grid.styl: -------------------------------------------------------------------------------- 1 | .row 2 | display: flex; 3 | flex-wrap: wrap; 4 | 5 | gridrowmargin(); 6 | 7 | .equal 8 | flex-basis: 0; 9 | flex-grow: 1; 10 | max-width: 100%; 11 | 12 | flexgridpadding(); 13 | 14 | .col 15 | flex: 0 0 100%; 16 | max-width: 100%; 17 | 18 | flexgridpadding(); 19 | 20 | for size in 'xs' 's' 'm' 'l' 'xl' 'xxl' 21 | +above(size) 22 | .{size}-equal 23 | flex-basis: 0; 24 | flex-grow: 1; 25 | max-width: 100%; 26 | 27 | for len in (1 .. grid-length) 28 | +above(size) 29 | .{size}-{len} 30 | flexgrid(len); 31 | 32 | .push-{size}-{len} 33 | gridpush(len); 34 | 35 | .nogutter 36 | padding: 0; 37 | margin: 0; 38 | -------------------------------------------------------------------------------- /source/modules/helpers.styl: -------------------------------------------------------------------------------- 1 | .clearfix 2 | cf(); 3 | 4 | .stackable 5 | & > * 6 | stack(); 7 | 8 | .stack 9 | stack(); 10 | 11 | .unstack 12 | unstack(); 13 | 14 | .block 15 | display: block !important; 16 | 17 | .inline 18 | display: inline-block !important; 19 | 20 | .relative 21 | position: relative; 22 | 23 | .fixed 24 | position: fixed; 25 | 26 | .absolute, .pin 27 | position: absolute; 28 | 29 | .pin, .fixed 30 | &.top 31 | top: 0; 32 | 33 | &.left 34 | left: 0; 35 | 36 | &.right 37 | right: 0; 38 | 39 | &.bottom 40 | bottom: 0; 41 | 42 | &.fixed 43 | position: fixed; 44 | 45 | .hidden 46 | display: none !important; 47 | 48 | .invisible 49 | visibility: hidden !important; 50 | 51 | .borderless 52 | border: 0 !important; 53 | 54 | .disabled, [disabled] 55 | cursor: not-allowed; 56 | 57 | & > * 58 | pointer-events: none; 59 | color: text-disabled !important; 60 | 61 | .centered 62 | &:not(.vertical):not(.horizontal) 63 | align(both); 64 | 65 | &.vertical 66 | align(vertical); 67 | 68 | &.horizontal 69 | align(horizontal); 70 | 71 | .nowrap 72 | white-space: nowrap; 73 | 74 | .text-left 75 | text-align: left; 76 | 77 | .text-right 78 | text-align: right; 79 | 80 | .text-center 81 | text-align: center; 82 | 83 | .text-justify 84 | text-align: justify; 85 | 86 | &:after 87 | display: inline-block; 88 | content: ''; 89 | width: 100%; 90 | 91 | .float-left 92 | float: left; 93 | 94 | .float-right 95 | float: right; 96 | 97 | .float-reset 98 | float: none; 99 | 100 | .align-top 101 | vertical-align: top; 102 | display: inline-block; 103 | 104 | .align-middle 105 | vertical-align: middle; 106 | display: inline-block; 107 | 108 | .align-bottom 109 | vertical-align: bottom; 110 | display: inline-block; 111 | 112 | .align-center 113 | align(both); 114 | 115 | .align-horizontal 116 | align(horizontal); 117 | 118 | .align-vertical 119 | align(vertical); 120 | 121 | .transform 122 | &.uppercase 123 | text-transform: uppercase; 124 | 125 | &.lowercase 126 | text-transform: lowercase; 127 | 128 | &.capitalize 129 | text-transform: capitalize; 130 | 131 | for size in 'mini' 'tiny' 'small' 'medium' 'large' 'big' 'huge' 'massive' 132 | .image-{size} 133 | image-size(size); 134 | -------------------------------------------------------------------------------- /source/modules/labels.styl: -------------------------------------------------------------------------------- 1 | .label 2 | background-color: background-light-grey; 3 | color: text-lighter-grey; 4 | padding: .5rem .86rem; 5 | display: inline-block; 6 | font-size: font-size-label; 7 | line-height: .76em; 8 | border-radius: border-radius-normal; 9 | font-weight: 700; 10 | text-transform: uppercase; 11 | overflow: hidden; 12 | 13 | &.circular 14 | padding: .48rem; 15 | border-radius: 50%; 16 | width: 2.4em; 17 | height: 2.4em; 18 | line-height: 1em; 19 | text-align: center; 20 | 21 | .detail 22 | background-color: rgba(0, 0, 0, .1); 23 | padding: .48rem .72rem; 24 | height: 100%; 25 | margin: -.5rem -.8rem -.5rem .8rem; 26 | border-radius: inherit; 27 | display: inline-block; 28 | font-weight: 500; 29 | vertical-align: top; 30 | float: right; 31 | color: rgba(255, 255, 255, .7); 32 | 33 | i 34 | margin-right: .6rem; 35 | 36 | a 37 | color: link-light; 38 | margin-left: .8rem; 39 | padding-left: .8rem; 40 | font-weight: 600; 41 | text-transform: none; 42 | border-left: 2px solid rgba(0, 0, 0, .1); 43 | 44 | &:hover 45 | color: link-light-hover; 46 | 47 | for bc in 'red' 'orange' 'yellow' 'green' 'teal' 'blue' 'violet' 'purple' 'pink' 'brown' 'grey' 'black' 'primary' 48 | &.{bc} 49 | color: primary-white; 50 | -------------------------------------------------------------------------------- /source/modules/lists.styl: -------------------------------------------------------------------------------- 1 | ul.list, ol.list 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | 6 | .list 7 | font-size: font-size-standard; 8 | 9 | li, .item 10 | padding: .25rem 0; 11 | position: relative; 12 | line-height: 1.7rem; 13 | display: list-item; 14 | table-layout: fixed; 15 | 16 | &:after 17 | display: block; 18 | content: ''; 19 | height: 0; 20 | clear: both; 21 | 22 | a.header 23 | display: block; 24 | 25 | .header 26 | font-weight: 600; 27 | line-height: 1.5rem; 28 | 29 | .icon 30 | &.large 31 | font-size: font-size-h5; 32 | line-height: 2.6rem; 33 | 34 | display: inline-block; 35 | vertical-align: middle !important; 36 | margin-right: 1rem; 37 | 38 | .content 39 | display: inline-block; 40 | vertical-align: top; 41 | 42 | code 43 | padding: 0; 44 | background: transparent; 45 | 46 | &.spaced 47 | li, .item 48 | padding: .4rem 0; 49 | 50 | &.very-spaced 51 | li, .item 52 | padding: .8rem 0; 53 | 54 | &.links 55 | > .item 56 | transition: opacity .14s ease; 57 | 58 | a 59 | color: link-light; 60 | font-weight: 500; 61 | 62 | &:hover 63 | color: link-light-hover; 64 | text-decoration: none; 65 | 66 | &.active 67 | a 68 | color: color-primary; 69 | 70 | &.divided 71 | li:first-child, .item:first-child 72 | border: none; 73 | 74 | li, .item 75 | border-top: 1px solid border-light-red-grey; 76 | 77 | &.horizontal 78 | li 79 | display: inline-block; 80 | 81 | & + li 82 | margin-left: 1.8rem; 83 | 84 | &.ordered 85 | counter-reset: ordereditem; 86 | 87 | .list 88 | counter-reset: ordereditem; 89 | padding: .55rem 0 .05rem .5rem; 90 | 91 | li, .item 92 | list-style: none; 93 | 94 | &:before 95 | counter-increment: ordereditem; 96 | content: counters(ordereditem, '.') ' '; 97 | margin-right: 5px; 98 | opacity: .6; 99 | 100 | &.bulleted 101 | padding-left: 1rem; 102 | 103 | .item 104 | &:before 105 | content: '\2022'; 106 | absolute: left auto top .2rem; 107 | margin-left: -.97rem; 108 | 109 | ol.ordered 110 | li[value]:before 111 | content: attr(value); 112 | -------------------------------------------------------------------------------- /source/modules/loaders.styl: -------------------------------------------------------------------------------- 1 | .loader 2 | border-style: solid; 3 | border-width: .5rem; 4 | border-color: transparentify(#ffffff, 60%); 5 | border-left-color: transparent; 6 | width: 5rem; 7 | height: 5rem; 8 | border-radius: 50%; 9 | animation: spin 1.3s infinite linear; 10 | 11 | &.disabled, &.hidden 12 | display: none; 13 | 14 | &.inline 15 | display: inline-block; 16 | 17 | &.small 18 | width: 3.3rem; 19 | height: 3.3rem; 20 | border-width: .35rem; 21 | 22 | &.large 23 | width: 5rem; 24 | height: 5rem; 25 | 26 | &.dark 27 | border-color: transparentify(text-default, 40%); 28 | border-left-color: transparent; 29 | -------------------------------------------------------------------------------- /source/modules/menus.styl: -------------------------------------------------------------------------------- 1 | .sidebar 2 | &.left 3 | border-right: 1px solid border-grey; 4 | height: 100%; 5 | width: 290px; 6 | 7 | &.right 8 | border-left: 1px solid border-grey; 9 | height: 100%; 10 | 11 | &.top 12 | span((1 / 1)); 13 | 14 | z-index: 1100; 15 | 16 | .menu 17 | width: 100%; 18 | 19 | cf(); 20 | 21 | &.panel 22 | position: relative; 23 | background-color: #fff; 24 | border: 1px solid border-grey; 25 | border-radius: border-radius-normal; 26 | overflow: hidden; 27 | 28 | &.borderless 29 | border: 1px solid border-grey !important; 30 | 31 | .item 32 | border: 0 !important; 33 | 34 | .item 35 | padding: .64rem 1.1rem; 36 | margin: 0 !important; 37 | border-right: 1px solid border-grey; 38 | 39 | &:hover 40 | background-color: background-lighter-grey; 41 | 42 | &.active 43 | background-color: color-primary; 44 | color: #fff; 45 | font-weight: 500; 46 | 47 | &.vertical 48 | .item 49 | border: 0; 50 | display: block; 51 | 52 | & + .item 53 | border-top: 1px solid border-grey; 54 | 55 | .item 56 | display: inline-block; 57 | position: relative; 58 | padding: .65rem 1.4rem; 59 | color: text-default; 60 | cursor: pointer; 61 | line-height: 1.4rem; 62 | font-weight: 500; 63 | 64 | &:hover 65 | text-decoration: none; 66 | 67 | .label 68 | padding: .4rem .5rem; 69 | margin: -.4rem 0; 70 | margin-left: .8rem; 71 | 72 | & + .item 73 | margin-left: .4rem; 74 | 75 | &.vertical 76 | width: 15rem; 77 | 78 | &:not(.panel) 79 | .item 80 | display: block; 81 | 82 | & + .item 83 | margin: .4rem 0 0 0 !important; 84 | 85 | &.underlined 86 | &.show 87 | border-bottom: 2px solid border-grey; 88 | 89 | .item 90 | margin: 0 0 -2px 0; 91 | 92 | .item 93 | padding: .85rem 1.14rem; 94 | color: link-light; 95 | 96 | &.active 97 | border-bottom: 2px text-default solid; 98 | color: text-default; 99 | 100 | &.vertical 101 | &.show 102 | border: 0; 103 | border-right: 2px solid border-grey; 104 | 105 | .item 106 | padding: .65rem 1.14rem; 107 | 108 | &:after 109 | absolute: right -2px top; 110 | width: 2px; 111 | height: 100%; 112 | display: block; 113 | content: ' '; 114 | background-color: transparent; 115 | 116 | .label 117 | float: right; 118 | margin-right: .4rem; 119 | relative: top 7px; 120 | 121 | &.active 122 | border: 0; 123 | 124 | &:after 125 | background-color: text-default; 126 | 127 | &.pills 128 | .item 129 | border-radius: border-radius-normal; 130 | 131 | &:hover 132 | background-color: background-lighter-grey; 133 | 134 | &.active 135 | background-color: color-primary; 136 | color: #fff; 137 | 138 | &.basic 139 | .item 140 | padding-left: 0; 141 | padding-right: 0; 142 | color: link-light; 143 | 144 | & + .item 145 | margin-left: 2.4rem; 146 | 147 | &:hover 148 | color: link-light-hover; 149 | 150 | &.active 151 | color: text-default; 152 | -------------------------------------------------------------------------------- /source/modules/messages.styl: -------------------------------------------------------------------------------- 1 | .message 2 | padding: 1.1rem 1.8rem; 3 | background-color: #fff; 4 | border: 0; 5 | border-left: 6px solid border-grey; 6 | border-radius: border-radius-normal; 7 | margin: 1rem 0; 8 | background-color: background-lightest-grey; 9 | color: text-default; 10 | 11 | h6 12 | line-height: 1.2em; 13 | margin-bottom: .2rem; 14 | color: color-heading; 15 | 16 | &.warning 17 | border-color: border-warning; 18 | 19 | &.important 20 | border-color: border-important; 21 | 22 | &.success 23 | border-color: border-success; 24 | 25 | &.info 26 | border-color: border-info; 27 | -------------------------------------------------------------------------------- /source/modules/mixins.styl: -------------------------------------------------------------------------------- 1 | $grid 2 | padding: 0 grid-padding; 3 | @css { * }zoom: 1; 4 | float: left; 5 | clear: none; 6 | text-align: inherit; 7 | margin-left: 0%; 8 | margin-right: 0%; 9 | width: 100%; 10 | 11 | &:before, &:after 12 | display: table; 13 | content: ''; 14 | 15 | &:after 16 | clear: both; 17 | 18 | placeholder() 19 | &::-webkit-input-placeholder 20 | {block}; 21 | 22 | &:-moz-placeholder 23 | {block}; 24 | 25 | &::-moz-placeholder 26 | {block}; 27 | 28 | &:-ms-input-placeholder 29 | {block}; 30 | 31 | image-size(s) 32 | img 33 | width: lookup('image-' + s); 34 | height: auto; 35 | 36 | grid(n) 37 | width: percentage((n / grid-length)); 38 | 39 | flexgridpadding() 40 | padding: 0 grid-padding; 41 | 42 | gridrowmargin() 43 | margin: auto - grid-padding; 44 | 45 | flexgrid(n) 46 | flex: 0 0 percentage((n / grid-length)); 47 | max-width: percentage((n / grid-length)); 48 | 49 | gridpush(n) 50 | margin-left: percentage((n / grid-length)); 51 | 52 | pull(n) 53 | margin-left: percentage((-(n) / grid-length)); 54 | 55 | tooltip-text(c) 56 | font-size: lookup('tooltip-' + c); 57 | 58 | text-color(c) 59 | color: lookup('color-' + c); 60 | 61 | btn-border(c) 62 | box-shadow: inset 0px 0px 0px 1px lookup('color-' + c); 63 | 64 | btn-size(c) 65 | font-size: lookup('button-' + c + '-fontsize'); 66 | padding: lookup('button-' + c + '-padding'); 67 | 68 | btn-color(c) 69 | color: lookup('text-button-' + c); 70 | 71 | btn-disabled-color(c) 72 | color: lighten(lookup('color-' + c), 70%); 73 | 74 | btn-color-outlined(c) 75 | color: lookup('color-' + c); 76 | 77 | btn-background(c) 78 | background-color: lookup('color-' + c); 79 | 80 | btn-background-hover(c) 81 | if (c == 'black') 82 | background-color: lighten(lookup('color-' + c), 14%); 83 | else 84 | background-color: darken(lookup('color-' + c), 8%); 85 | -------------------------------------------------------------------------------- /source/modules/progress.styl: -------------------------------------------------------------------------------- 1 | .progress 2 | background-color: background-light-grey; 3 | 4 | cf(); 5 | 6 | border-radius: border-radius-normal; 7 | height: 1.7rem; 8 | content: ''; 9 | 10 | .bar 11 | height: 100%; 12 | border-radius: border-radius-normal; 13 | background-color: darken(background-light-grey, 62%); 14 | position: relative; 15 | width: 0; 16 | 17 | .status 18 | color: #fff; 19 | absolute: right .6rem; 20 | font-size: font-size-small; 21 | line-height: 1.6rem; 22 | font-weight: 700; 23 | display: none; 24 | 25 | &.tiny 26 | height: .3rem; 27 | 28 | &.small 29 | height: .8rem; 30 | 31 | &.large 32 | height: 2.7rem; 33 | 34 | .status 35 | line-height: 2.7rem; 36 | font-size: 1rem; 37 | 38 | &:not(.tiny):not(.small) 39 | .bar.show 40 | .status 41 | display: block; 42 | -------------------------------------------------------------------------------- /source/modules/stages.styl: -------------------------------------------------------------------------------- 1 | .stages 2 | display: inline-flex; 3 | flex-direction: row; 4 | align-items: stretch; 5 | border-radius: border-radius-normal; 6 | border: 1px solid border-grey; 7 | 8 | &.fluid 9 | display: flex; 10 | 11 | &.vertical 12 | flex-direction: column; 13 | overflow: visible; 14 | 15 | .stage 16 | justify-content: flex-start; 17 | border-left: 0 !important; 18 | 19 | .icon 20 | width: 2rem; 21 | text-align: center; 22 | 23 | & + .stage 24 | border-top: 1px solid border-grey; 25 | 26 | &:first-child 27 | border-radius: border-radius-normal border-radius-normal 0 0; 28 | 29 | &:last-child 30 | border-radius: 0 0 border-radius-normal border-radius-normal; 31 | 32 | &:not(.active) 33 | &:before, &:after 34 | display: none; 35 | 36 | &.active 37 | &:before, &:after 38 | display: block; 39 | 40 | .stage 41 | display: flex; 42 | flex: 1 0 auto; 43 | flex-wrap: wrap; 44 | vertical-align: center; 45 | flex-direction: row; 46 | align-items: stretch; 47 | background-color: #fff; 48 | padding: 1rem 1.8rem; 49 | position: relative; 50 | overflow: hidden; 51 | 52 | .header 53 | display: block; 54 | font-weight: 500; 55 | font-size: font-size-standard; 56 | color: color-heading; 57 | 58 | &:last-child 59 | &:before, &:after 60 | display: none; 61 | 62 | &:before 63 | content: ''; 64 | width: 0; 65 | height: 0; 66 | border-top: .8rem solid transparent; 67 | border-bottom: .8rem solid transparent; 68 | border-left: .8rem solid #fff; 69 | absolute: right -.55rem top 31%; 70 | z-index: 900; 71 | 72 | &:after 73 | content: ''; 74 | width: 0; 75 | height: 0; 76 | border-top: .6rem solid transparent; 77 | border-bottom: .6rem solid transparent; 78 | border-left: .6rem solid border-grey; 79 | absolute: right -.6rem top 35%; 80 | z-index: 800; 81 | 82 | .icon 83 | margin-right: 1.1rem; 84 | width: 2.2rem; 85 | text-align: center; 86 | 87 | i 88 | font-size: font-size-h3; 89 | relative: top .5rem; 90 | color: color-grey; 91 | 92 | & + .stage 93 | border-left: 1px solid border-grey; 94 | 95 | &.disabled > * 96 | opacity: .4; 97 | 98 | &.completed 99 | i 100 | color: color-green; 101 | 102 | &.active 103 | background-color: background-lightest-grey; 104 | 105 | .header 106 | color: color-primary; 107 | 108 | &:before 109 | border-left-color: background-lightest-grey; 110 | 111 | .content 112 | flex: 0 1 auto; 113 | color: text-default; 114 | line-height: 1.5rem; 115 | 116 | small 117 | display: block; 118 | color: text-default; 119 | margin: .4rem 0 0 0; 120 | 121 | pre 122 | margin: 1rem 0 0 0; 123 | white-space: pre-wrap; 124 | 125 | code 126 | display: inline-block; 127 | padding: .4rem 1rem; 128 | -------------------------------------------------------------------------------- /source/modules/tables.styl: -------------------------------------------------------------------------------- 1 | .table 2 | width: 100%; 3 | border-radius: border-radius-normal; 4 | border: 1px solid border-grey; 5 | border-collapse: separate; 6 | 7 | th 8 | padding: 1rem; 9 | background-color: background-lighter-grey; 10 | font-weight: 600; 11 | border-bottom: 1px solid border-grey; 12 | 13 | tr 14 | background-color: #fff; 15 | 16 | td 17 | padding: .8rem 1rem; 18 | border-bottom: 1px solid border-grey; 19 | line-height: 1.375rem; 20 | 21 | i 22 | margin-right: .4rem; 23 | opacity: .6; 24 | 25 | &:last-child 26 | td 27 | border-bottom: 0; 28 | 29 | &.striped 30 | tr:nth-child(2n) 31 | background-color: background-lightest-grey; 32 | 33 | &.simple 34 | th 35 | background-color: transparent; 36 | 37 | &.basic 38 | border: 0; 39 | 40 | th, tr 41 | background-color: transparent; 42 | 43 | &.cells 44 | th 45 | border-left: 1px solid border-grey; 46 | 47 | &:first-child 48 | border-left: 0; 49 | 50 | tr 51 | td 52 | border-left: 1px solid border-grey; 53 | 54 | &:first-child 55 | border-left: 0; 56 | -------------------------------------------------------------------------------- /source/modules/tooltips.styl: -------------------------------------------------------------------------------- 1 | arrow-indent = 1rem; 2 | dark-tooltip-color = color-ash; 3 | 4 | .tooltip[data-content] 5 | position: relative; 6 | 7 | &:before 8 | background-color: #fff; 9 | position: absolute; 10 | z-index: 2; 11 | width: .8rem; 12 | height: .8rem; 13 | content: ' '; 14 | font-size: 1rem; 15 | box-shadow: 1px 1px 0 0 border-grey; 16 | transform-origin: center top; 17 | transform: rotate(45deg) scale(0); 18 | transition: all cubic-bezier(.02, .49, .01, .97) .14s; 19 | opacity: 0; 20 | 21 | &:after 22 | content: attr(data-content); 23 | position: absolute; 24 | z-index: 1; 25 | color: text-default; 26 | background-color: #fff; 27 | border: 1px solid border-grey; 28 | max-width: none; 29 | white-space: nowrap; 30 | font-size: 1rem; 31 | text-align: left; 32 | border-radius: border-radius-normal; 33 | padding: .75em 1em; 34 | box-shadow: 0 1px 2px 0 box-shadow-grey; 35 | transform: scale(0); 36 | transition: all cubic-bezier(.02, .49, .01, .97) .14s; 37 | cursor: default; 38 | pointer-events: none; 39 | 40 | for size in 'tiny' 'small' 'medium' 'large' 'big' 41 | &[data-text={size}] 42 | &:after 43 | tooltip-text(size); 44 | 45 | &.dark 46 | &:before 47 | box-shadow: none !important; 48 | background-color: dark-tooltip-color; 49 | 50 | &:after 51 | border-color: dark-tooltip-color; 52 | background-color: dark-tooltip-color; 53 | color: #fff; 54 | 55 | &:hover 56 | &:before 57 | transform: rotate(45deg) scale(1); 58 | opacity: 1; 59 | 60 | &:after 61 | transform: scale(1); 62 | 63 | &[data-position~=top] 64 | &:before 65 | bottom: 100%; 66 | margin-bottom: .18rem; 67 | 68 | &:after 69 | bottom: 100%; 70 | margin-bottom: .6rem; 71 | 72 | &[data-position~=bottom] 73 | &:before 74 | top: 100%; 75 | margin-top: .4rem; 76 | box-shadow: -1px -1px 0 0 border-grey; 77 | 78 | &:after 79 | top: 100%; 80 | margin-top: .6rem; 81 | 82 | &[data-position='top left'] 83 | &:before 84 | left: arrow-indent; 85 | 86 | &:after 87 | left: 0; 88 | right: auto; 89 | transform-origin: left bottom; 90 | 91 | &[data-position='top center'] 92 | &:before 93 | left: 50%; 94 | 95 | &:after 96 | left: 50%; 97 | transform-origin: center bottom; 98 | transform: translateX(-50%) scale(0); 99 | 100 | &:hover 101 | &:after 102 | transform: translateX(-50%) scale(1); 103 | 104 | &:before 105 | transform: rotate(45deg) scale(1); 106 | 107 | &[data-position='top right'] 108 | &:before 109 | right: arrow-indent; 110 | 111 | &:after 112 | right: 0; 113 | left: auto; 114 | transform-origin: right bottom; 115 | 116 | &[data-position='bottom left'] 117 | &:before 118 | left: arrow-indent; 119 | 120 | &:after 121 | left: 0; 122 | right: auto; 123 | transform-origin: left top; 124 | 125 | &[data-position='bottom center'] 126 | &:before 127 | left: 50%; 128 | 129 | &:after 130 | left: 50%; 131 | transform-origin: center top; 132 | transform: translateX(-50%) scale(0); 133 | 134 | &:hover:after 135 | transform: translateX(-50%) scale(1); 136 | 137 | &[data-position='bottom right'] 138 | &:before 139 | right: arrow-indent; 140 | 141 | &:after 142 | right: 0; 143 | left: auto; 144 | transform-origin: right top; 145 | -------------------------------------------------------------------------------- /source/modules/ui.styl: -------------------------------------------------------------------------------- 1 | * 2 | box-sizing: border-box; 3 | 4 | global-reset(); 5 | 6 | html 7 | height: 100%; 8 | width: 100%; 9 | 10 | body 11 | font-family: font-family-standard; 12 | font-size: font-size-standard; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | color: text-default; 16 | height: 100%; 17 | width: 100%; 18 | margin: 0; 19 | padding: 0; 20 | 21 | for h in (1 .. 6) 22 | h{h} 23 | line-height: 1.8em; 24 | font-size: lookup('font-size-h' + h); 25 | letter-spacing: -.02em; 26 | font-weight: 500; 27 | color: color-heading; 28 | 29 | ::selection 30 | color: #fff; 31 | background-color: lighten(primary-color, 30%); 32 | 33 | a 34 | color: color-primary; 35 | text-decoration: none; 36 | cursor: pointer; 37 | 38 | &:hover 39 | color: darken(color-primary, 10%); 40 | 41 | li > a 42 | &:hover 43 | text-decoration: none; 44 | 45 | p 46 | line-height: 1.6em; 47 | color: text-default; 48 | 49 | b, strong, .strong 50 | font-weight: 600; 51 | 52 | small 53 | font-size: font-size-small; 54 | -------------------------------------------------------------------------------- /source/modules/variables.styl: -------------------------------------------------------------------------------- 1 | // Typography 2 | font-size-hero = 1.2em; 3 | font-size-label = .76rem; 4 | font-size-small = .86rem; 5 | font-size-code = .86rem; 6 | font-size-standard = 16px; 7 | font-size-h1 = 3.8em; 8 | font-size-h2 = 2.4em; 9 | font-size-h3 = 2em; 10 | font-size-h4 = 1.6em; 11 | font-size-h5 = 1.4em; 12 | font-size-h6 = 1.2em; 13 | font-family-standard = 'Inter UI', sans-serif; 14 | font-family-code = 'Roboto Mono', 'Consolas', 'Monaco', 'Lucida Console', monospace; 15 | // Colors 16 | primary-color = #435ce2; 17 | primary-white = #fff; 18 | primary-black = #000; 19 | color-heading = #1c2a40; 20 | color-red = #ff2d2d; 21 | color-orange = #ff8f17; 22 | color-yellow = #ffbd00; 23 | color-green = #06c78a; 24 | color-teal = #00b1a1; 25 | color-blue = #1d7aff; 26 | color-violet = #af00e8; 27 | color-purple = #670ef5; 28 | color-pink = #fb0c92; 29 | color-brown = #ab5b33; 30 | color-grey = #53565a; 31 | color-black = #000; 32 | color-primary = primary-color; 33 | color-ash = #6b6c6e; 34 | color-smoke = #e3e7eb; 35 | background-light-grey = lighten(color-smoke, 20%); 36 | background-lighter-grey = #f5f7fa; 37 | background-lightest-grey = lighten(background-lighter-grey, 25%); 38 | border-info = lighten(color-blue, 10%); 39 | border-warning = lighten(color-yellow, 10%); 40 | border-important = lighten(color-red, 10%); 41 | border-success = lighten(color-green, 10%); 42 | border-grey = color-smoke; 43 | box-shadow-grey = rgba(70, 72, 75, .1); 44 | text-button-primary = primary-white; 45 | text-button-red = primary-white; 46 | text-button-orange = primary-white; 47 | text-button-yellow = primary-white; 48 | text-button-green = primary-white; 49 | text-button-teal = primary-white; 50 | text-button-blue = primary-white; 51 | text-button-violet = primary-white; 52 | text-button-purple = primary-white; 53 | text-button-pink = primary-white; 54 | text-button-brown = primary-white; 55 | text-button-grey = primary-white; 56 | text-button-black = primary-white; 57 | text-button-white = text-default; 58 | text-default = color-grey; 59 | text-disabled = lighten(text-default, 35%); 60 | text-code = primary-black; 61 | link-light = lighten(color-grey, 15%); 62 | link-light-hover = darken(color-grey, 20%); 63 | // Identifiers 64 | border-radius-normal = 4px; 65 | em-height = 2.8rem; 66 | // Page 67 | standard-page-width = 1124px; 68 | standard-page-padding = 1rem; 69 | // Button size 70 | button-small-fontsize = .86rem; 71 | button-medium-fontsize = 1.2rem; 72 | button-large-fontsize = 1.34rem; 73 | button-big-fontsize = 1.5rem; 74 | button-small-padding = .65em 1.8em; 75 | button-medium-padding = .75em 1.8em; 76 | button-large-padding = .85em 2em; 77 | button-big-padding = .95em 2.2em; 78 | // Tooltip text size 79 | tooltip-tiny = .72rem; 80 | tooltip-small = .86rem; 81 | tooltip-medium = 1.1rem; 82 | tooltip-large = 1.4rem; 83 | tooltip-big = 1.8rem; 84 | // Image size 85 | image-mini = 35px; 86 | image-tiny = 70px; 87 | image-small = 140px; 88 | image-medium = 280px; 89 | image-large = 400px; 90 | image-big = 600px; 91 | image-huge = 800px; 92 | image-massive = 940px; 93 | // Animations 94 | duration-0 = 0s; 95 | duration-s = .08s; 96 | duration-m = .18s; 97 | duration-l = .3s; 98 | duration-xl = .5s; 99 | duration-xxl = .8s; 100 | duration-xxxl = 1.2s; 101 | duration-xxxxl = 2s; 102 | // Grids 103 | grid-padding = 15px; 104 | grid-length = 12; 105 | // Rupture 106 | rupture.base-font-size = 15px; 107 | rupture.anti-overlap = true; 108 | rupture.scale = 0 480px 768px 1024px 1224px 1824px; 109 | rupture.scale-names = 'xs' 's' 'm' 'l' 'xl' 'xxl'; 110 | --------------------------------------------------------------------------------