diff --git a/README.md b/README.md index 69306bb..97a06ac 100644 --- a/README.md +++ b/README.md @@ -16,3 +16,5 @@ Illusion is an opinionated, mobile-first, progressive enhanced, accessible, SCSS - [Custom Management](https://www.custommanagement.nl) - [Brouwer Tours](https://www.brouwertours.nl) - [Anton Goudsmit](http://antongoudsmit.nl) +- [GGNet](http://ggnet.test/) +- [Brouwer Tours](https://www.brouwertours.nl/) \ No newline at end of file diff --git a/docs/_scss/_shame.scss b/docs/_scss/_shame.scss index 493f8ed..dc1e3f2 100644 --- a/docs/_scss/_shame.scss +++ b/docs/_scss/_shame.scss @@ -28,8 +28,6 @@ header { width: 220%; height: 220%; background: linear-gradient(248deg, $color1, $color2, $color3); - transform: translate(0, 0); - animation: headerAnimate 20s ease infinite; } h1 { @@ -43,18 +41,6 @@ header { } } -@keyframes headerAnimate { - 0% { - transform: translate(0, 0); - } - 50% { - transform: translate(-50%, 0); - } - 100% { - transform: translate(0, 0); - } -} - nav { @include clearfix; padding: $spacing-m 0; diff --git a/docs/css/style.css b/docs/css/style.css index fca2418..ec22449 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -1 +1 @@ -/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{margin:.67em 0}pre{font-family:monospace,monospace;font-size:1em;margin-top:0;margin-bottom:24px}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:inherit}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none;max-width:100%;height:auto}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}*,:after,:before{box-sizing:inherit}a:focus,a:hover{text-decoration:none}address{font-style:normal;margin-top:0;margin-bottom:16px}address:last-child,fieldset legend:last-child,figure:last-child,h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,ol:last-child,p:last-child,ul:last-child{margin-bottom:0}body{margin:0 auto;font-family:"Source Serif Pro",serif;font-size:17px;line-height:24px;font-weight:400;width:560px;position:relative;color:#0b0c0c}fieldset{width:100%;border:0;padding:0;margin:0}fieldset legend{margin-bottom:16px}figure{margin:0 0 16px}h1,h2,h3,h4,h5,h6{font-weight:700;font-size:inherit;margin-top:0;margin-bottom:16px}img:only-child,picture img{vertical-align:middle}ol,p,ul{margin-top:0;margin-bottom:16px}svg{width:1em;height:1em;fill:currentColor}.svg-sprite{display:none}:root body{width:calc(100%)}.form{margin-bottom:16px}.form:last-child{margin-bottom:0}@media screen and (min-width:560px){.form{margin-bottom:24px}.form:last-child{margin-bottom:0}}@media screen and (min-width:1024px){.form{margin-bottom:32px}.form:last-child{margin-bottom:0}}.form [disabled]{cursor:not-allowed;opacity:.6}.form__group{margin-bottom:16px}.form__group:last-child{margin-bottom:0}.form__input,.form__label{font-size:inherit;line-height:inherit}.form__label{display:inline-block;padding-bottom:8px}.form__input{width:100%;padding:4px 8px;border:2px solid;line-height:28px}.form__input:focus{outline:#febd22 solid 3px;outline-offset:0}input.form__input,textarea.form__input{-webkit-appearance:none;border-radius:0}select{height:40px}[type=submit]{-webkit-appearance:none;display:inline-block;vertical-align:middle;cursor:pointer}[type=submit]:focus{outline:#febd22 solid 3px}.multiple-choice{display:block;float:none;clear:left;position:relative;padding:0 0 0 40px;margin-bottom:16px;min-height:40px}.multiple-choice input{position:absolute;cursor:pointer;left:0;top:0;width:40px;height:40px;z-index:1;margin:0;opacity:0}.multiple-choice label{cursor:pointer;padding:4px 16px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:40px;-ms-touch-action:manipulation;touch-action:manipulation}.multiple-choice [type=checkbox]+label::before,.multiple-choice [type=radio]+label::before{content:"";border:2px solid;background:0 0;width:40px;height:40px;position:absolute;top:0;left:0}.multiple-choice [type=checkbox]+label::after,.multiple-choice [type=radio]+label::after{content:"";border:12px solid;position:absolute;opacity:0;transform:scale(.5);transition:all .2s cubic-bezier(.195,.4,.45,.785) 0s}.multiple-choice [type=radio]+label::before{border-radius:50%}.multiple-choice [type=radio]+label::after{width:0;height:0;top:8px;left:8px;border-radius:50%}.multiple-choice [type=checkbox]+label::after{border-width:0 0 4.8px 4.8px;background:0 0;width:22px;height:12px;top:12px;left:9.6px;transform:rotate(-45deg) scale(.5)}.multiple-choice input:checked+label::after{opacity:1;transform:rotate(-45deg) scale(1)}.multiple-choice [type=checkbox]:focus+label::before,.multiple-choice [type=radio]:focus+label::before{box-shadow:0 0 0 3px #febd22}.multiple-choice input:disabled{opacity:0}.multiple-choice input:disabled+label{opacity:.6;cursor:not-allowed}.skip{background:#fff}.skip a{display:block;float:left;padding:0 8px;color:#fff;height:0;overflow:hidden;transition:all .2s cubic-bezier(.195,.4,.45,.785) 0s}.skip a:focus{margin:8px;height:24px;overflow:visible}.skip a:visited{color:inherit}.highlight{background-color:#fdf6e3;color:#586e75;overflow:auto;-webkit-overflow-scrolling:touch;width:100%}.highlight pre{padding:16px 0 16px 16px}.highlight code{padding-right:16px}.highlighter-rouge{background:rgba(0,0,0,.1);box-shadow:0 -3px 0 0 rgba(0,0,0,.1),0 3px 0 0 rgba(0,0,0,.1);padding:0 4px;font-size:14px;line-height:inherit;color:#cb4b16}.highlight .c{color:#93a1a1}.highlight .err,.highlight .g{color:#586e75}.highlight .k{color:#859900}.highlight .l,.highlight .n{color:#586e75}.highlight .o{color:#859900}.highlight .x{color:#cb4b16}.highlight .p{color:#586e75}.highlight .cm{color:#93a1a1}.highlight .cp{color:#859900}.highlight .c1{color:#93a1a1}.highlight .cs{color:#859900}.highlight .gd{color:#2aa198}.highlight .ge{color:#586e75;font-style:italic}.highlight .gr{color:#dc322f}.highlight .gh{color:#cb4b16}.highlight .gi{color:#859900}.highlight .go,.highlight .gp{color:#586e75}.highlight .gs{color:#586e75;font-weight:700}.highlight .gu{color:#cb4b16}.highlight .gt{color:#586e75}.highlight .kc{color:#cb4b16}.highlight .kd{color:#268bd2}.highlight .kn,.highlight .kp{color:#859900}.highlight .kr{color:#268bd2}.highlight .kt{color:#dc322f}.highlight .ld{color:#586e75}.highlight .m,.highlight .s{color:#2aa198}.highlight .na{color:#586e75}.highlight .nb{color:#b58900}.highlight .nc{color:#268bd2}.highlight .no{color:#cb4b16}.highlight .nd{color:#268bd2}.highlight .ne,.highlight .ni{color:#cb4b16}.highlight .nf{color:#268bd2}.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#586e75}.highlight .nt,.highlight .nv{color:#268bd2}.highlight .ow{color:#859900}.highlight .w{color:#586e75}.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#2aa198}.highlight .sb{color:#93a1a1}.highlight .sc{color:#2aa198}.highlight .sd{color:#586e75}.highlight .s2{color:#2aa198}.highlight .se{color:#cb4b16}.highlight .sh{color:#586e75}.highlight .si,.highlight .sx{color:#2aa198}.highlight .sr{color:#dc322f}.highlight .s1,.highlight .ss{color:#2aa198}.highlight .bp,.highlight .vc,.highlight .vg,.highlight .vi{color:#268bd2}.highlight .il{color:#2aa198}table{border-collapse:collapse;font-size:14px;line-height:24px;margin-bottom:24px}table:last-child{margin-bottom:0}td,th{padding:8px 12px 7px;border:1px solid rgba(0,0,0,.1);height:40px}th{background:#eee;text-align:left}@media screen and (min-width:0) and (max-width:768px){table{vertical-align:top;max-width:100%;white-space:nowrap;border-right:1px solid #ddd;display:-ms-flexbox;display:flex;overflow:hidden;background:0 0}thead{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}thead th:last-child{height:auto;-ms-flex:1 1 auto;flex:1 1 auto}tbody{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left,rgba(0,0,0,.2) 0,rgba(0,0,0,0) 75%) 0 center,radial-gradient(ellipse at right,rgba(0,0,0,.2) 0,rgba(0,0,0,0) 75%) 100% center;background-size:10px 100%,10px 100%;background-attachment:scroll,scroll;background-repeat:no-repeat;display:-ms-flexbox;display:flex;position:relative;overflow-x:auto;overflow-y:hidden}tbody tr:first-child,tbody tr:last-child{position:relative}tbody tr:first-child:before{position:absolute;content:" ";display:block;z-index:1;width:20px;height:100%;top:0;left:0;background-image:linear-gradient(to right,#fff 50%,rgba(255,255,255,0) 100%)}tbody tr:last-child:after{position:absolute;content:" ";display:block;z-index:1;width:20px;height:100%;top:0;right:0;background-image:linear-gradient(to left,#fff 50%,rgba(255,255,255,0) 100%)}tr{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0}tr:last-child td{border-right:0}td,th{position:relative;z-index:2;display:block}td{border-left:none}td:last-child{height:auto;white-space:normal;max-width:280px;-ms-flex:1 1 auto;flex:1 1 auto}td:not(:last-child),th:not(:last-child){border-bottom:0}}.container{max-width:1176px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}.container:after,.container:before{display:table;content:" "}.container:after{clear:both}main{position:relative}footer,header{color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}header{padding-top:16px;padding-bottom:16px;overflow:hidden;position:relative}@media screen and (min-width:560px){.multiple-choice{float:left}.container{padding-left:24px;padding-right:24px}header{padding-top:24px;padding-bottom:24px}}@media screen and (min-width:1024px){.container{padding-left:32px;padding-right:32px}header{padding-top:32px;padding-bottom:32px}}header:before{position:absolute;content:" ";display:block;z-index:-1;top:0;left:0;width:220%;height:220%;background:linear-gradient(248deg,#8cc63f,#37b549,#089448);transform:translate(0,0);animation:20s infinite headerAnimate}header h1{font-size:24px;line-height:32px}@keyframes headerAnimate{0%,100%{transform:translate(0,0)}50%{transform:translate(-50%,0)}}nav{padding:16px 0;text-align:center}nav:after,nav:before{display:table;content:" "}nav:after{clear:both}.logo{display:inline-block;width:166px}@media screen and (min-width:560px){header h1{font-size:32px;line-height:48px}.logo{display:block;float:left}}.navigation{margin:16px 0;padding:0;list-style:none;border:none;background:0 0;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;max-width:320px;margin-left:auto;margin-right:auto}.navigation li:first-child{margin-left:0}aside{display:block;width:100%;padding-top:16px;padding-bottom:16px;max-height:100vh;overflow:auto}article{display:block;width:100%;padding-top:16px;padding-bottom:16px}article h1,article h2,article h3{color:#333}article h2:not(:first-child){margin-top:32px}article a{color:#089448}footer{padding-top:16px;padding-bottom:16px;background:#089448}h1{font-size:32px;line-height:40px}h2{font-size:24px;line-height:32px}h3{font-size:20px;line-height:24px}hr{box-sizing:content-box;overflow:visible;border:none;height:2px;margin-top:31px;margin-bottom:31px;background:rgba(0,0,0,.1);position:relative}@media screen and (min-width:560px){.navigation{float:right;margin:8px 0}.navigation li{float:left;margin-left:24px}aside{padding-top:24px;padding-bottom:24px;width:calc((100% - 48px)/ 3);margin-left:calc(24px);float:left;position:-webkit-sticky;position:sticky;top:0}article:first-child,aside:first-child{margin-left:0}article:last-child,aside:last-child{margin-right:-1px}article{width:calc((100% - 12px)/ 1.5);margin-left:calc(24px);float:left;padding-top:24px;padding-bottom:24px}article h2:not(:first-child){margin-top:48px}footer{padding-top:24px;padding-bottom:24px}hr{margin-top:47px;margin-bottom:47px}}hr:before{position:absolute;content:" ";display:block;top:0;left:0;width:24px;height:2px;background:#8cc63f}pre:last-child{margin-bottom:0}.button{background:#bdc3c7;padding:16px 24px;border:none;font-size:inherit;transition:all .2s cubic-bezier(.195,.4,.45,.785) 0s}.button:focus,.button:hover{background:#95a5a6;color:#fff}.pull-top{margin-top:-16px}.gallery-12,.gallery-3{margin-bottom:-16px}.gallery-12:after,.gallery-12:before,.gallery-3:after,.gallery-3:before{display:table;content:" "}.gallery-12:after,.gallery-3:after{clear:both}.gallery__item{background:#bdc3c7;padding:16px}.gallery-3 .gallery__item{width:calc((100% - 16px)/ 2);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.gallery-3 .gallery__item:nth-child(2n){margin-right:-1px}.gallery-3 .gallery__item:nth-child(2n+1){margin-left:0;clear:left}.gallery-3 .gallery__item:first-child{margin-left:0}@media screen and (min-width:440px){.gallery-3 .gallery__item{width:calc((100% - 32px)/ 3);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.gallery-3 .gallery__item:nth-child(n){margin-left:calc(16px);margin-right:0;clear:none}.gallery-3 .gallery__item:nth-child(3n){margin-right:-1px}.gallery-3 .gallery__item:nth-child(3n+1){margin-left:0;clear:left}.gallery-3 .gallery__item:first-child{margin-left:0}}@media screen and (min-width:560px){.gallery-12,.gallery-3{margin-bottom:-24px}.gallery-3 .gallery__item{width:calc((100% - 72px)/ 4);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.gallery-3 .gallery__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.gallery-3 .gallery__item:nth-child(4n){margin-right:-1px}.gallery-3 .gallery__item:nth-child(4n+1){margin-left:0;clear:left}.gallery-3 .gallery__item:first-child{margin-left:0}}@media screen and (min-width:768px){.gallery-3 .gallery__item{width:calc((100% - 48px)/ 3);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.gallery-3 .gallery__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.gallery-3 .gallery__item:nth-child(3n){margin-right:-1px}.gallery-3 .gallery__item:nth-child(3n+1){margin-left:0;clear:left}.gallery-3 .gallery__item:first-child{margin-left:0}}@media screen and (min-width:1024px){aside{padding-top:32px;padding-bottom:32px;width:calc((100% - 96px)/ 4);margin-left:calc(32px);float:left}article:first-child,aside:first-child{margin-left:0}article:last-child,aside:last-child{margin-right:-1px}article{width:calc((100% - 10.6666666667px)/ 1.3333333333);margin-left:calc(32px);float:left;padding-top:32px;padding-bottom:32px}article h2:not(:first-child){margin-top:64px}hr{margin-top:63px;margin-bottom:63px}.gallery-12,.gallery-3{margin-bottom:-32px}.gallery-3 .gallery__item{width:calc((100% - 64px)/ 3);margin-left:calc(32px);margin-bottom:calc(32px)}.gallery-3 .gallery__item:nth-child(n){margin-left:calc(32px);margin-right:0;clear:none}.gallery-3 .gallery__item:nth-child(3n){margin-right:-1px}.gallery-3 .gallery__item:nth-child(3n+1){margin-left:0;clear:left}}.gallery-12 .gallery__item{width:calc((100% - 16px)/ 2);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.gallery-12 .gallery__item:nth-child(2n){margin-right:-1px}.gallery-12 .gallery__item:nth-child(2n+1){margin-left:0;clear:left}.gallery-12 .gallery__item:first-child{margin-left:0}@media screen and (min-width:440px){.gallery-12 .gallery__item{width:calc((100% - 32px)/ 3);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.gallery-12 .gallery__item:nth-child(n){margin-left:calc(16px);margin-right:0;clear:none}.gallery-12 .gallery__item:nth-child(3n){margin-right:-1px}.gallery-12 .gallery__item:nth-child(3n+1){margin-left:0;clear:left}.gallery-12 .gallery__item:first-child{margin-left:0}}@media screen and (min-width:560px){.gallery-12 .gallery__item{width:calc((100% - 72px)/ 4);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.gallery-12 .gallery__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.gallery-12 .gallery__item:nth-child(4n){margin-right:-1px}.gallery-12 .gallery__item:nth-child(4n+1){margin-left:0;clear:left}.gallery-12 .gallery__item:first-child{margin-left:0}}@media screen and (min-width:768px){.gallery-12 .gallery__item{width:calc((100% - 264px)/ 12);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.gallery-12 .gallery__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.gallery-12 .gallery__item:nth-child(12n){margin-right:-1px}.gallery-12 .gallery__item:nth-child(12n+1){margin-left:0;clear:left}.gallery-12 .gallery__item:first-child{margin-left:0}}.spaced-vertical{padding-top:16px;padding-bottom:16px}#markdown-toc{margin:0;padding:0;list-style:none;border:none;background:0 0}#markdown-toc li{position:relative}#markdown-toc li:before{position:absolute;content:" ";display:block;left:0;top:8px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid #089448;opacity:0;transition:all .2s cubic-bezier(.195,.4,.45,.785) 0s;transform:translateX(-16px)}#markdown-toc li,#markdown-toc li a{transition:all .2s cubic-bezier(.195,.4,.45,.785) 0s}#markdown-toc li ul{margin:0;padding:0 0 0 16px;list-style:none;border:none;background:0 0}#markdown-toc li li{font-size:15px;line-height:24px}#markdown-toc li.is-active{padding-left:8px}#markdown-toc li.is-active:before{opacity:1;transform:translateX(0)}#markdown-toc li.is-active>a{text-decoration:none;color:#37b549}.overlay-grid-container{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;pointer-events:none}.overlay-grid{max-width:1176px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;position:absolute;top:0;right:0;bottom:0;left:0;outline:#ff00ff solid 1px;overflow:hidden}.overlay-grid:after,.overlay-grid:before{display:table;content:" "}.overlay-grid:after{clear:both}@media screen and (min-width:560px){.spaced-vertical{padding-top:24px;padding-bottom:24px}.overlay-grid{padding-left:24px;padding-right:24px}}@media screen and (min-width:1024px){.gallery-12 .gallery__item{width:calc((100% - 352px)/ 12);margin-left:calc(32px);margin-bottom:calc(32px)}.gallery-12 .gallery__item:nth-child(n){margin-left:calc(32px);margin-right:0;clear:none}.gallery-12 .gallery__item:nth-child(12n){margin-right:-1px}.gallery-12 .gallery__item:nth-child(12n+1){margin-left:0;clear:left}.spaced-vertical{padding-top:32px;padding-bottom:32px}.overlay-grid{padding-left:32px;padding-right:32px}}.overlay-grid__item{outline:#ff00ff solid 1px;height:100%;width:calc((100% - 16px)/ 2);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.overlay-grid__item:nth-child(2n){margin-right:-1px}.overlay-grid__item:nth-child(2n+1){margin-left:0;clear:left}.overlay-grid__item:first-child{margin-left:0}@media screen and (min-width:440px){.overlay-grid__item{width:calc((100% - 32px)/ 3);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.overlay-grid__item:nth-child(n){margin-left:calc(16px);margin-right:0;clear:none}.overlay-grid__item:nth-child(3n){margin-right:-1px}.overlay-grid__item:nth-child(3n+1){margin-left:0;clear:left}.overlay-grid__item:first-child{margin-left:0}}@media screen and (min-width:560px){.overlay-grid__item{width:calc((100% - 72px)/ 4);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.overlay-grid__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.overlay-grid__item:nth-child(4n){margin-right:-1px}.overlay-grid__item:nth-child(4n+1){margin-left:0;clear:left}.overlay-grid__item:first-child{margin-left:0}}@media screen and (min-width:768px){.overlay-grid__item{width:calc((100% - 264px)/ 12);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.overlay-grid__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.overlay-grid__item:nth-child(12n){margin-right:-1px}.overlay-grid__item:nth-child(12n+1){margin-left:0;clear:left}.overlay-grid__item:first-child{margin-left:0}}@media screen and (min-width:1024px){.overlay-grid__item{width:calc((100% - 352px)/ 12);margin-left:calc(32px);margin-bottom:calc(32px)}.overlay-grid__item:nth-child(n){margin-left:calc(32px);margin-right:0;clear:none}.overlay-grid__item:nth-child(12n){margin-right:-1px}.overlay-grid__item:nth-child(12n+1){margin-left:0;clear:left}}.overlay-8pixel{position:absolute;top:0;right:0;bottom:0;left:0;background-size:8px 8px;background-image:repeating-linear-gradient(0deg,rgba(255,0,255,.33),rgba(255,0,255,.33) 1px,transparent 1px,transparent 8px)} \ No newline at end of file +/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;overflow:visible}pre{font-family:monospace,monospace;font-size:1em;margin-top:0;margin-bottom:24px}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:inherit}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none;max-width:100%;height:auto}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}a:focus,a:hover{text-decoration:none}address{font-style:normal;margin-top:0;margin-bottom:16px}address:last-child,fieldset legend:last-child,figure:last-child,h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,ol:last-child,p:last-child,ul:last-child{margin-bottom:0}body{margin:0 auto;font-family:"Source Serif Pro",serif;font-size:17px;line-height:24px;font-weight:400;width:560px;position:relative;color:#0b0c0c}fieldset{width:100%;border:0;padding:0;margin:0}fieldset legend{margin-bottom:16px}figure{margin:0 0 16px}h1,h2,h3,h4,h5,h6{font-weight:700;font-size:inherit;margin-top:0;margin-bottom:16px}img:only-child,picture img{vertical-align:middle}ol,p,ul{margin-top:0;margin-bottom:16px}svg{width:1em;height:1em;fill:currentColor}.svg-sprite{display:none}:root body{width:calc(100%)}.custom-select{position:relative;display:block;border:2px solid}.custom-select select{width:100%;margin:0;padding:4px 4px 4px 8px;outline:0;height:36px;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:16px;font-family:inherit;font-weight:inherit;color:inherit;border:none;line-height:30px}.custom-select:after{content:" ";position:absolute;top:50%;right:8px;z-index:2;pointer-events:none;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid;margin-top:-3px;display:none}@supports (-webkit-appearance:none) or (appearance:none) or ((-moz-appearance:none) and (mask-type:alpha)){.custom-select:after{display:block}.custom-select select{padding-right:28px;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.custom-select select::-ms-expand{display:none}.custom-select select:focus::-ms-value{background:0 0;color:inherit}.custom-select:after{display:block}.custom-select select{padding-right:28px;background:0 0}}.custom-select select:focus:focus{outline:#febd22 solid 3px;outline-offset:2px}.form{margin-bottom:16px}.form:last-child{margin-bottom:0}@media screen and (min-width:560px){.form{margin-bottom:24px}.form:last-child{margin-bottom:0}}@media screen and (min-width:1024px){.form{margin-bottom:32px}.form:last-child{margin-bottom:0}}.form [disabled]{cursor:not-allowed;opacity:.6}.form__group{margin-bottom:16px}.form__group:last-child{margin-bottom:0}.form__input,.form__label{font-size:inherit;line-height:inherit}.form__label{display:inline-block;padding-bottom:8px}.form__input{width:100%;padding:4px 8px;border:2px solid;line-height:28px;min-height:40px;font-family:inherit;font-weight:inherit}.form__input:focus{outline:#febd22 solid 3px;outline-offset:0}input.form__input,textarea.form__input{-webkit-appearance:none;border-radius:0}select{height:40px}[type=submit]{-webkit-appearance:none;display:inline-block;vertical-align:middle;cursor:pointer}[type=submit]:focus{outline:#febd22 solid 3px}.multiple-choice{display:block;float:none;clear:left;position:relative;padding:0 0 0 40px;margin-bottom:16px;min-height:40px}.multiple-choice input{position:absolute;cursor:pointer;left:0;top:0;width:40px;height:40px;z-index:1;margin:0;opacity:0}.multiple-choice label{cursor:pointer;padding:4px 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:40px;-ms-touch-action:manipulation;touch-action:manipulation}.multiple-choice [type=checkbox]+label::before,.multiple-choice [type=radio]+label::before{content:"";border:2px solid;background:0 0;width:40px;height:40px;position:absolute;top:0;left:0}.multiple-choice [type=checkbox]+label::after,.multiple-choice [type=radio]+label::after{content:"";border:12px solid;position:absolute;opacity:0;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transition:.2s cubic-bezier(.195,.4,.45,.785);transition:.2s cubic-bezier(.195,.4,.45,.785)}.multiple-choice [type=radio]+label::before{border-radius:50%}.multiple-choice [type=radio]+label::after{width:0;height:0;top:8px;left:8px;border-radius:50%}.multiple-choice [type=checkbox]+label::after{border-width:0 0 4.8px 4.8px;background:0 0;width:22px;height:12px;top:12px;left:9.6px;-webkit-transform:rotate(-45deg) scale(.5);transform:rotate(-45deg) scale(.5)}.multiple-choice input:checked+label::after{opacity:1;-webkit-transform:rotate(-45deg) scale(1);transform:rotate(-45deg) scale(1)}.multiple-choice [type=checkbox]:focus+label::before,.multiple-choice [type=radio]:focus+label::before{-webkit-box-shadow:0 0 0 3px #febd22;box-shadow:0 0 0 3px #febd22}.multiple-choice input:disabled{opacity:0}.multiple-choice input:disabled+label{opacity:.6;cursor:not-allowed}.skip{background:#fff}.skip a{display:block;float:left;padding:0 8px;color:#fff;height:0;overflow:hidden;-webkit-transition:.2s cubic-bezier(.195,.4,.45,.785);transition:.2s cubic-bezier(.195,.4,.45,.785)}.skip a:focus{margin:8px;height:24px;overflow:visible}.skip a:visited{color:inherit}.highlight{background-color:#fdf6e3;color:#586e75;overflow:auto;-webkit-overflow-scrolling:touch;width:100%}.highlight pre{padding:16px 0 16px 16px}.highlight code{padding-right:16px}.highlighter-rouge{background:rgba(0,0,0,.1);-webkit-box-shadow:0 -3px 0 0 rgba(0,0,0,.1),0 3px 0 0 rgba(0,0,0,.1);box-shadow:0 -3px 0 0 rgba(0,0,0,.1),0 3px 0 0 rgba(0,0,0,.1);padding:0 4px;font-size:14px;line-height:inherit;color:#cb4b16}.highlight .c{color:#93a1a1}.highlight .err,.highlight .g{color:#586e75}.highlight .k{color:#859900}.highlight .l,.highlight .n{color:#586e75}.highlight .o{color:#859900}.highlight .x{color:#cb4b16}.highlight .p{color:#586e75}.highlight .cm{color:#93a1a1}.highlight .cp{color:#859900}.highlight .c1{color:#93a1a1}.highlight .cs{color:#859900}.highlight .gd{color:#2aa198}.highlight .ge{color:#586e75;font-style:italic}.highlight .gr{color:#dc322f}.highlight .gh{color:#cb4b16}.highlight .gi{color:#859900}.highlight .go,.highlight .gp{color:#586e75}.highlight .gs{color:#586e75;font-weight:700}.highlight .gu{color:#cb4b16}.highlight .gt{color:#586e75}.highlight .kc{color:#cb4b16}.highlight .kd{color:#268bd2}.highlight .kn,.highlight .kp{color:#859900}.highlight .kr{color:#268bd2}.highlight .kt{color:#dc322f}.highlight .ld{color:#586e75}.highlight .m,.highlight .s{color:#2aa198}.highlight .na{color:#586e75}.highlight .nb{color:#b58900}.highlight .nc{color:#268bd2}.highlight .no{color:#cb4b16}.highlight .nd{color:#268bd2}.highlight .ne,.highlight .ni{color:#cb4b16}.highlight .nf{color:#268bd2}.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#586e75}.highlight .nt,.highlight .nv{color:#268bd2}.highlight .ow{color:#859900}.highlight .w{color:#586e75}.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#2aa198}.highlight .sb{color:#93a1a1}.highlight .sc{color:#2aa198}.highlight .sd{color:#586e75}.highlight .s2{color:#2aa198}.highlight .se{color:#cb4b16}.highlight .sh{color:#586e75}.highlight .si,.highlight .sx{color:#2aa198}.highlight .sr{color:#dc322f}.highlight .s1,.highlight .ss{color:#2aa198}.highlight .bp,.highlight .vc,.highlight .vg,.highlight .vi{color:#268bd2}.highlight .il{color:#2aa198}table{border-collapse:collapse;font-size:14px;line-height:24px;margin-bottom:24px}table:last-child{margin-bottom:0}td,th{padding:8px 12px 7px;border:1px solid rgba(0,0,0,.1);height:40px}th{background:#eee;text-align:left}@media screen and (min-width:0) and (max-width:768px){table{vertical-align:top;max-width:100%;white-space:nowrap;border-right:1px solid #ddd;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;background:0 0}thead{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}thead th:last-child{height:auto;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}tbody{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left,rgba(0,0,0,.2) 0,rgba(0,0,0,0) 75%) 0 center,radial-gradient(ellipse at right,rgba(0,0,0,.2) 0,rgba(0,0,0,0) 75%) 100% center;background-size:10px 100%,10px 100%;background-attachment:scroll,scroll;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;overflow-x:auto;overflow-y:hidden}tbody tr:first-child,tbody tr:last-child{position:relative}tbody tr:first-child:before{position:absolute;content:" ";display:block;z-index:1;width:20px;height:100%;top:0;left:0;background-image:-webkit-gradient(linear,left top,right top,color-stop(50%,#fff),to(rgba(255,255,255,0)));background-image:linear-gradient(to right,#fff 50%,rgba(255,255,255,0) 100%)}tbody tr:last-child:after{position:absolute;content:" ";display:block;z-index:1;width:20px;height:100%;top:0;right:0;background-image:-webkit-gradient(linear,right top,left top,color-stop(50%,#fff),to(rgba(255,255,255,0)));background-image:linear-gradient(to left,#fff 50%,rgba(255,255,255,0) 100%)}tr{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0}tr:last-child td{border-right:0}td,th{position:relative;z-index:2;display:block}td{border-left:none}td:last-child{height:auto;white-space:normal;max-width:280px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}td:not(:last-child),th:not(:last-child){border-bottom:0}}.container{max-width:1176px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}.container:after,.container:before{display:table;content:" "}.container:after{clear:both}main{position:relative}footer,header{color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}header{padding-top:16px;padding-bottom:16px;overflow:hidden;position:relative}@media screen and (min-width:560px){.multiple-choice{float:left}.container{padding-left:24px;padding-right:24px}header{padding-top:24px;padding-bottom:24px}}@media screen and (min-width:1024px){.container{padding-left:32px;padding-right:32px}header{padding-top:32px;padding-bottom:32px}}header:before{position:absolute;content:" ";display:block;z-index:-1;top:0;left:0;width:220%;height:220%;background:linear-gradient(248deg,#8cc63f,#37b549,#089448)}header h1{font-size:24px;line-height:32px}nav{padding:16px 0;text-align:center}nav:after,nav:before{display:table;content:" "}nav:after{clear:both}.logo{display:inline-block;width:166px}@media screen and (min-width:560px){header h1{font-size:32px;line-height:48px}.logo{display:block;float:left}}.navigation{margin:16px 0;padding:0;list-style:none;border:none;background:0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;max-width:320px;margin-left:auto;margin-right:auto}.navigation li:first-child{margin-left:0}aside{display:block;width:100%;padding-top:16px;padding-bottom:16px;max-height:100vh;overflow:auto}article{display:block;width:100%;padding-top:16px;padding-bottom:16px}article h1,article h2,article h3{color:#333}article h2:not(:first-child){margin-top:32px}article a{color:#089448}footer{padding-top:16px;padding-bottom:16px;background:#089448}h1{font-size:32px;line-height:40px}h2{font-size:24px;line-height:32px}h3{font-size:20px;line-height:24px}hr{border:none;height:2px;margin-top:31px;margin-bottom:31px;background:rgba(0,0,0,.1);position:relative}@media screen and (min-width:560px){.navigation{float:right;margin:8px 0}.navigation li{float:left;margin-left:24px}aside{padding-top:24px;padding-bottom:24px;width:calc((100% - 48px)/ 3);margin-left:calc(24px);float:left;position:-webkit-sticky;position:sticky;top:0}article:first-child,aside:first-child{margin-left:0}article:last-child,aside:last-child{margin-right:-1px}article{width:calc((100% - 12px)/ 1.5);margin-left:calc(24px);float:left;padding-top:24px;padding-bottom:24px}article h2:not(:first-child){margin-top:48px}footer{padding-top:24px;padding-bottom:24px}hr{margin-top:47px;margin-bottom:47px}}hr:before{position:absolute;content:" ";display:block;top:0;left:0;width:24px;height:2px;background:#8cc63f}pre:last-child{margin-bottom:0}.button{background:#bdc3c7;padding:16px 24px;border:none;font-size:inherit;-webkit-transition:.2s cubic-bezier(.195,.4,.45,.785);transition:.2s cubic-bezier(.195,.4,.45,.785)}.button:focus,.button:hover{background:#95a5a6;color:#fff}.pull-top{margin-top:-16px}.gallery-12,.gallery-3{margin-bottom:-16px}.gallery-12:after,.gallery-12:before,.gallery-3:after,.gallery-3:before{display:table;content:" "}.gallery-12:after,.gallery-3:after{clear:both}.gallery__item{background:#bdc3c7;padding:16px}.gallery-3 .gallery__item{width:calc((100% - 16px)/ 2);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.gallery-3 .gallery__item:nth-child(2n){margin-right:-1px}.gallery-3 .gallery__item:nth-child(2n+1){margin-left:0;clear:left}.gallery-3 .gallery__item:first-child{margin-left:0}@media screen and (min-width:440px){.gallery-3 .gallery__item{width:calc((100% - 32px)/ 3);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.gallery-3 .gallery__item:nth-child(n){margin-left:calc(16px);margin-right:0;clear:none}.gallery-3 .gallery__item:nth-child(3n){margin-right:-1px}.gallery-3 .gallery__item:nth-child(3n+1){margin-left:0;clear:left}.gallery-3 .gallery__item:first-child{margin-left:0}}@media screen and (min-width:560px){.gallery-12,.gallery-3{margin-bottom:-24px}.gallery-3 .gallery__item{width:calc((100% - 72px)/ 4);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.gallery-3 .gallery__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.gallery-3 .gallery__item:nth-child(4n){margin-right:-1px}.gallery-3 .gallery__item:nth-child(4n+1){margin-left:0;clear:left}.gallery-3 .gallery__item:first-child{margin-left:0}}@media screen and (min-width:768px){.gallery-3 .gallery__item{width:calc((100% - 48px)/ 3);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.gallery-3 .gallery__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.gallery-3 .gallery__item:nth-child(3n){margin-right:-1px}.gallery-3 .gallery__item:nth-child(3n+1){margin-left:0;clear:left}.gallery-3 .gallery__item:first-child{margin-left:0}}@media screen and (min-width:1024px){aside{padding-top:32px;padding-bottom:32px;width:calc((100% - 96px)/ 4);margin-left:calc(32px);float:left}article:first-child,aside:first-child{margin-left:0}article:last-child,aside:last-child{margin-right:-1px}article{width:calc((100% - 10.6666666667px)/ 1.3333333333);margin-left:calc(32px);float:left;padding-top:32px;padding-bottom:32px}article h2:not(:first-child){margin-top:64px}hr{margin-top:63px;margin-bottom:63px}.gallery-12,.gallery-3{margin-bottom:-32px}.gallery-3 .gallery__item{width:calc((100% - 64px)/ 3);margin-left:calc(32px);margin-bottom:calc(32px)}.gallery-3 .gallery__item:nth-child(n){margin-left:calc(32px);margin-right:0;clear:none}.gallery-3 .gallery__item:nth-child(3n){margin-right:-1px}.gallery-3 .gallery__item:nth-child(3n+1){margin-left:0;clear:left}}.gallery-12 .gallery__item{width:calc((100% - 16px)/ 2);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.gallery-12 .gallery__item:nth-child(2n){margin-right:-1px}.gallery-12 .gallery__item:nth-child(2n+1){margin-left:0;clear:left}.gallery-12 .gallery__item:first-child{margin-left:0}@media screen and (min-width:440px){.gallery-12 .gallery__item{width:calc((100% - 32px)/ 3);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.gallery-12 .gallery__item:nth-child(n){margin-left:calc(16px);margin-right:0;clear:none}.gallery-12 .gallery__item:nth-child(3n){margin-right:-1px}.gallery-12 .gallery__item:nth-child(3n+1){margin-left:0;clear:left}.gallery-12 .gallery__item:first-child{margin-left:0}}@media screen and (min-width:560px){.gallery-12 .gallery__item{width:calc((100% - 72px)/ 4);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.gallery-12 .gallery__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.gallery-12 .gallery__item:nth-child(4n){margin-right:-1px}.gallery-12 .gallery__item:nth-child(4n+1){margin-left:0;clear:left}.gallery-12 .gallery__item:first-child{margin-left:0}}@media screen and (min-width:768px){.gallery-12 .gallery__item{width:calc((100% - 264px)/ 12);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.gallery-12 .gallery__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.gallery-12 .gallery__item:nth-child(12n){margin-right:-1px}.gallery-12 .gallery__item:nth-child(12n+1){margin-left:0;clear:left}.gallery-12 .gallery__item:first-child{margin-left:0}}.spaced-vertical{padding-top:16px;padding-bottom:16px}#markdown-toc{margin:0;padding:0;list-style:none;border:none;background:0 0}#markdown-toc li{position:relative}#markdown-toc li:before{position:absolute;content:" ";display:block;left:0;top:8px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid #089448;opacity:0;-webkit-transition:.2s cubic-bezier(.195,.4,.45,.785);transition:.2s cubic-bezier(.195,.4,.45,.785);-webkit-transform:translateX(-16px);transform:translateX(-16px)}#markdown-toc li,#markdown-toc li a{-webkit-transition:.2s cubic-bezier(.195,.4,.45,.785);transition:.2s cubic-bezier(.195,.4,.45,.785)}#markdown-toc li ul{margin:0;padding:0 0 0 16px;list-style:none;border:none;background:0 0}#markdown-toc li li{font-size:15px;line-height:24px}#markdown-toc li.is-active{padding-left:8px}#markdown-toc li.is-active:before{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}#markdown-toc li.is-active>a{text-decoration:none;color:#37b549}.overlay-grid-container{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;pointer-events:none}.overlay-grid{max-width:1176px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;position:absolute;top:0;right:0;bottom:0;left:0;outline:#ff00ff solid 1px;overflow:hidden}.overlay-grid:after,.overlay-grid:before{display:table;content:" "}.overlay-grid:after{clear:both}@media screen and (min-width:560px){.spaced-vertical{padding-top:24px;padding-bottom:24px}.overlay-grid{padding-left:24px;padding-right:24px}}@media screen and (min-width:1024px){.gallery-12 .gallery__item{width:calc((100% - 352px)/ 12);margin-left:calc(32px);margin-bottom:calc(32px)}.gallery-12 .gallery__item:nth-child(n){margin-left:calc(32px);margin-right:0;clear:none}.gallery-12 .gallery__item:nth-child(12n){margin-right:-1px}.gallery-12 .gallery__item:nth-child(12n+1){margin-left:0;clear:left}.spaced-vertical{padding-top:32px;padding-bottom:32px}.overlay-grid{padding-left:32px;padding-right:32px}}.overlay-grid__item{outline:#ff00ff solid 1px;height:100%;width:calc((100% - 16px)/ 2);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.overlay-grid__item:nth-child(2n){margin-right:-1px}.overlay-grid__item:nth-child(2n+1){margin-left:0;clear:left}.overlay-grid__item:first-child{margin-left:0}@media screen and (min-width:440px){.overlay-grid__item{width:calc((100% - 32px)/ 3);margin-left:calc(16px);margin-bottom:calc(16px);float:left}.overlay-grid__item:nth-child(n){margin-left:calc(16px);margin-right:0;clear:none}.overlay-grid__item:nth-child(3n){margin-right:-1px}.overlay-grid__item:nth-child(3n+1){margin-left:0;clear:left}.overlay-grid__item:first-child{margin-left:0}}@media screen and (min-width:560px){.overlay-grid__item{width:calc((100% - 72px)/ 4);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.overlay-grid__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.overlay-grid__item:nth-child(4n){margin-right:-1px}.overlay-grid__item:nth-child(4n+1){margin-left:0;clear:left}.overlay-grid__item:first-child{margin-left:0}}@media screen and (min-width:768px){.overlay-grid__item{width:calc((100% - 264px)/ 12);margin-left:calc(24px);margin-bottom:calc(24px);float:left}.overlay-grid__item:nth-child(n){margin-left:calc(24px);margin-right:0;clear:none}.overlay-grid__item:nth-child(12n){margin-right:-1px}.overlay-grid__item:nth-child(12n+1){margin-left:0;clear:left}.overlay-grid__item:first-child{margin-left:0}}@media screen and (min-width:1024px){.overlay-grid__item{width:calc((100% - 352px)/ 12);margin-left:calc(32px);margin-bottom:calc(32px)}.overlay-grid__item:nth-child(n){margin-left:calc(32px);margin-right:0;clear:none}.overlay-grid__item:nth-child(12n){margin-right:-1px}.overlay-grid__item:nth-child(12n+1){margin-left:0;clear:left}}.overlay-8pixel{position:absolute;top:0;right:0;bottom:0;left:0;background-size:8px 8px;background-image:repeating-linear-gradient(0deg,rgba(255,0,255,.33),rgba(255,0,255,.33) 1px,transparent 1px,transparent 8px)} \ No newline at end of file diff --git a/docs/examples/index.html b/docs/examples/index.html index 3b3b5e1..593e710 100644 --- a/docs/examples/index.html +++ b/docs/examples/index.html @@ -64,6 +64,18 @@

Form example

+
+ +
+ +
+
+
Select option diff --git a/scss/atoms/_body.scss b/scss/atoms/_body.scss index 7817a7b..a381e98 100755 --- a/scss/atoms/_body.scss +++ b/scss/atoms/_body.scss @@ -7,10 +7,10 @@ body { margin: $illusion-extendalize-body-margin; - font-family: $font-family; - font-size: $font-size; - line-height: $line-height; - font-weight: $weight-normal; - color: $color-type; + font-family: $illusion-extendalize-body-font-family; + font-size: $illusion-extendalize-body-font-size; + line-height: $illusion-extendalize-body-line-height; + font-weight: $illusion-extendalize-body-font-weight; + color: $illusion-extendalize-body-color; } } diff --git a/scss/atoms/_boxsizing.scss b/scss/atoms/_boxsizing.scss index 8f202af..9a86d10 100644 --- a/scss/atoms/_boxsizing.scss +++ b/scss/atoms/_boxsizing.scss @@ -4,7 +4,7 @@ */ html { - box-sizing: border-box; + box-sizing: $illusion-extendalize-html-box-sizing; } *, *:before, *:after { diff --git a/scss/illusion.scss b/scss/illusion.scss index 1662d9e..0fca26f 100644 --- a/scss/illusion.scss +++ b/scss/illusion.scss @@ -17,5 +17,6 @@ // Molecules @import "molecules/body-fallback"; +@import "molecules/custom-select"; @import "molecules/form"; @import "molecules/multiple-choice"; diff --git a/scss/molecules/_custom-select.scss b/scss/molecules/_custom-select.scss new file mode 100644 index 0000000..720ed26 --- /dev/null +++ b/scss/molecules/_custom-select.scss @@ -0,0 +1,113 @@ +@if ($illusion-form == true and $illusion-custom-select != false) or $illusion-custom-select == true { + + /* Highly based on https://github.com/filamentgroup/select-css */ + + // Custom select container + .custom-select { + position: $illusion-custom-select-position; + display: $illusion-custom-select-display; + } + + // Native select invisible except for content + .custom-select select { + width: $illusion-custom-select-width; + margin: $illusion-custom-select-margin; + padding: $illusion-custom-select-padding; + outline: $illusion-custom-select-outline; + height: $illusion-custom-select-height; + box-sizing: $illusion-custom-select-box-sizing; + font-size: $illusion-custom-select-font-size; + } + + // Custom arrow + .custom-select:after { + content: $illusion-custom-select-arrow-content; + position: $illusion-custom-select-arrow-position; + top: $illusion-custom-select-arrow-top; + right: $illusion-custom-select-arrow-right; + z-index: $illusion-custom-select-arrow-z-index; + pointer-events: $illusion-custom-select-arrow-pointer-events; + width: $illusion-custom-select-arrow-width; + height: $illusion-custom-select-arrow-height; + border-left: $illusion-custom-select-arrow-border-horizontal; + border-right: $illusion-custom-select-arrow-border-horizontal; + border-top: $illusion-custom-select-arrow-border-top; + margin-top: $illusion-custom-select-arrow-margin-top; + display: none; + } + + // Custom styling when appearance is supported + /* autoprefixer: ignore next */ + @supports (-webkit-appearance: none) or (appearance: none) or ((-moz-appearance: none) and (mask-type: alpha)) { + + // Display custom arrow + /* autoprefixer: on */ + .custom-select:after { + display: $illusion-custom-select-arrow-display; + } + + // Select styling + .custom-select select { + padding-right: $illusion-custom-select-padding-right; + background: none; + appearance: none; + } + } + + // IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance. + // Targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 + + // The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's + // fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */ + + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + + // Hide native arrow + .custom-select select::-ms-expand { + display: none; + } + + .custom-select select:focus::-ms-value { + background: $illusion-custom-select-ms-focus-background; + color: $illusion-custom-select-ms-focus-color; + } + + // Display custom arrow + .custom-select:after { + display: $illusion-custom-select-arrow-display; + } + + // Styling select + .custom-select select { + padding-right: $illusion-custom-select-padding-right; // make room for the arrow + background: none; + } + } + + @if ($illusion-custom-select-theme != false) or $illusion-custom-select-theme == true { + // Theming custom-select + .custom-select { + border: $illusion-custom-select-border; + } + + .custom-select select { + font-family: $illusion-custom-select-font-family; + font-weight: $illusion-custom-select-font-weight; + color: $illusion-custom-select-color; + border: none; + line-height: $illusion-custom-select-line-height; + padding-top: $illusion-custom-select-padding-top; + padding-bottom: $illusion-custom-select-padding-bottom; + padding-left: $illusion-custom-select-padding-left; + } + + // Focus style + .custom-select select:focus { + &:focus { + outline: $illusion-custom-select-focus-outline; + outline-offset: $illusion-custom-select-focus-outline-offset; + } + } + } +} + diff --git a/scss/molecules/_form.scss b/scss/molecules/_form.scss index 7296b88..9ff6be8 100644 --- a/scss/molecules/_form.scss +++ b/scss/molecules/_form.scss @@ -32,6 +32,9 @@ padding: $illusion-form-input-padding; border: $illusion-form-input-border; line-height: $illusion-form-input-line-height; + min-height: $illusion-form-input-min-height; + font-family: $illusion-form-input-font-family; + font-weight: $illusion-form-input-font-weight; &:focus { outline: $illusion-form-input-focus-outline; diff --git a/scss/tools/_tools.scss b/scss/tools/_tools.scss index 289d8ce..ae5ecb5 100755 --- a/scss/tools/_tools.scss +++ b/scss/tools/_tools.scss @@ -5,13 +5,25 @@ @import "variables/type"; @import "variables/body-fallback"; +@import "variables/button"; +@import "variables/clearfix"; +@import "variables/collapse"; @import "variables/color"; +@import "variables/content-block"; +@import "variables/coverall"; @import "variables/extendalize"; @import "variables/flexbox"; @import "variables/form"; +@import "variables/gallery"; @import "variables/grid"; +@import "variables/pseudo"; +@import "variables/ratio-block"; +@import "variables/reset"; +@import "variables/shift"; +@import "variables/span"; @import "variables/svg"; @import "variables/transition"; +@import "variables/triangle"; // Functions diff --git a/scss/tools/mixins/_breakpoint.scss b/scss/tools/mixins/_breakpoint.scss index 672b5f5..b95fccc 100755 --- a/scss/tools/mixins/_breakpoint.scss +++ b/scss/tools/mixins/_breakpoint.scss @@ -1,7 +1,7 @@ // Breakpoint // Sets a temporary global $inside-breakpoint variable to be used inside other mixins -@mixin breakpoint($width, $width--max: false) { +@mixin breakpoint($width, $width--max: $illusion-breakpoint-width-max) { $inside-breakpoint: $width !global; @if $width--max == false { @media screen and (min-width: $width) { diff --git a/scss/tools/mixins/_button.scss b/scss/tools/mixins/_button.scss index bb97999..6ee625e 100644 --- a/scss/tools/mixins/_button.scss +++ b/scss/tools/mixins/_button.scss @@ -7,7 +7,7 @@ // 3. Line buttons vertically // 4. Appear clickable -@mixin button-structure($appearance: none, $display: inline-block, $vertical-align: middle, $cursor: pointer) { +@mixin button-structure($appearance: $illusion-button-appearance, $display: $illusion-button-display, $vertical-align: $illusion-button-vertical-align, $cursor: $illusion-button-cursor) { @if $appearance != false { -webkit-appearance: $appearance; // 1 } diff --git a/scss/tools/mixins/_clearfix.scss b/scss/tools/mixins/_clearfix.scss index e8dc523..624f415 100755 --- a/scss/tools/mixins/_clearfix.scss +++ b/scss/tools/mixins/_clearfix.scss @@ -2,7 +2,7 @@ // Also clearing top-margin // Still using single colon for better browser compatibility -@mixin clearfix($reset: false) { +@mixin clearfix($reset: $illusion-clearfix-reset) { @if $reset == false { &:before, &:after { diff --git a/scss/tools/mixins/_collapse.scss b/scss/tools/mixins/_collapse.scss index 269163b..14c4c88 100644 --- a/scss/tools/mixins/_collapse.scss +++ b/scss/tools/mixins/_collapse.scss @@ -3,7 +3,7 @@ // Use as direct child of `@include span` element // Make sure there's no padding on the parent element -@mixin collapse($sides: both, $multiplier: 1, $fromto: false, $gutter: false) { +@mixin collapse($sides: $illusion-collapse-sides, $multiplier: $illusion-collapse-multiplier, $fromto: $illusion-collapse-fromto, $gutter: $illusion-collapse-gutter) { // Give a warning when $multiplier is not dividable by 0.5 @if ($multiplier % 0.5 != 0) { diff --git a/scss/tools/mixins/_container.scss b/scss/tools/mixins/_container.scss index d1a7b14..314f76b 100644 --- a/scss/tools/mixins/_container.scss +++ b/scss/tools/mixins/_container.scss @@ -1,6 +1,6 @@ // Container -@mixin container($type: $illusion-grid-container-type, $align: center) { +@mixin container($type: $illusion-grid-container-type, $align: $illusion-grid-container-align) { // Set default styling max-width: $illusion-grid-maxwidth + (largestGutter() * 2); diff --git a/scss/tools/mixins/_content-block.scss b/scss/tools/mixins/_content-block.scss index 34ffc5a..64c2297 100755 --- a/scss/tools/mixins/_content-block.scss +++ b/scss/tools/mixins/_content-block.scss @@ -1,6 +1,6 @@ // Content block -@mixin content-block($spacing: $line-height, $location: bottom ) { +@mixin content-block($spacing: $illusion-content-block-spacing, $location: $illusion-content-block-location ) { @if $location == top { margin-top: $spacing; diff --git a/scss/tools/mixins/_coverall.scss b/scss/tools/mixins/_coverall.scss index 9abda5b..4b133d9 100755 --- a/scss/tools/mixins/_coverall.scss +++ b/scss/tools/mixins/_coverall.scss @@ -1,6 +1,6 @@ // Cover the entire parent element -@mixin coverall($offset: 0, $top: true, $right: true, $bottom: true, $left: true, $position: absolute, $reset: false) { +@mixin coverall($offset: $illusion-coverall-offset, $top: $illusion-coverall-top, $right: $illusion-coverall-right, $bottom: $illusion-coverall-bottom, $left: $illusion-coverall-left, $position: $illusion-coverall-position, $reset: $illusion-coverall-reset) { @if $position != false { position: $position; } @@ -25,10 +25,10 @@ left: $left; } @if $reset == true { - position: relative; - top: auto; - right: auto; - bottom: auto; - left: auto; + position: $illusion-coverall-reset-position; + top: $illusion-coverall-reset-top; + right: $illusion-coverall-reset-right; + bottom: $illusion-coverall-reset-bottom; + left: $illusion-coverall-reset-left; } } diff --git a/scss/tools/mixins/_flexbox.scss b/scss/tools/mixins/_flexbox.scss index 3e0d168..3360594 100755 --- a/scss/tools/mixins/_flexbox.scss +++ b/scss/tools/mixins/_flexbox.scss @@ -8,8 +8,8 @@ // Because we're adding .flexbox and .flexboxlegacy classes flexbox will only work when JS is enabled // This is a good thing since we're not sure what we're showing / hiding with JS that might mess with flexbox -@mixin flexbox($horizontal: $flexbox-horizontal, $vertical: $flexbox-vertical) { - @if $flexbox == true { // 1 +@mixin flexbox($horizontal: $illusion-flexbox-horizontal, $vertical: $illusion-flexbox-vertical) { + @if $illusion-flexbox == true { // 1 @at-root { // 2 .flexbox &, // 3 .flexboxlegacy & { // 3 diff --git a/scss/tools/mixins/_fluid-type.scss b/scss/tools/mixins/_fluid-type.scss index e4f22d9..f115a0a 100644 --- a/scss/tools/mixins/_fluid-type.scss +++ b/scss/tools/mixins/_fluid-type.scss @@ -1,6 +1,6 @@ // Fluid type -@mixin fluid-type($min-value: $fluid-type-min-value, $max-value: $fluid-type-max-value, $min-screen: $fluid-type-min-screen, $max-screen: $fluid-type-max-screen) { +@mixin fluid-type($min-value: $illusion-fluid-type-min-value, $max-value: $illusion-fluid-type-max-value, $min-screen: $illusion-fluid-type-min-screen, $max-screen: $illusion-fluid-type-max-screen) { font-size: $min-value; @media screen and (min-width: $min-screen) { diff --git a/scss/tools/mixins/_gallery.scss b/scss/tools/mixins/_gallery.scss index 3ca9ab2..8f4d9d6 100644 --- a/scss/tools/mixins/_gallery.scss +++ b/scss/tools/mixins/_gallery.scss @@ -1,6 +1,6 @@ // Gallery mixin -@mixin gallery($span: null, $fromto: false, $multiplier: 1, $bottom: true, $defaults: true, $gutter: false) { +@mixin gallery($span: $illusion-gallery-span, $fromto: $illusion-gallery-fromto, $multiplier: $illusion-gallery-multiplier, $bottom: $illusion-gallery-bottom, $defaults: $illusion-gallery-defaults, $gutter: $illusion-gallery-gutter) { // Span values $spanColumns: nth($span, 1); diff --git a/scss/tools/mixins/_pseudo.scss b/scss/tools/mixins/_pseudo.scss index 06fd410..a3da91c 100755 --- a/scss/tools/mixins/_pseudo.scss +++ b/scss/tools/mixins/_pseudo.scss @@ -1,11 +1,11 @@ // Pseudo elements -@mixin pseudo($pseudo: after, $parent-position: relative, $position: absolute, $content: " ", $display: block) { +@mixin pseudo($illusion-pseudo: $illusion-pseudo, $parent-position: $illusion-pseudo-parent-position, $position: $illusion-pseudo-position, $content: $illusion-pseudo-content, $display: $illusion-pseudo-display) { @if $parent-position != false { position: $parent-position; } - &:#{$pseudo} { + &:#{$illusion-pseudo} { @if $position != false { position: $position; } diff --git a/scss/tools/mixins/_ratio-block.scss b/scss/tools/mixins/_ratio-block.scss index af2c40d..7ca5bb6 100755 --- a/scss/tools/mixins/_ratio-block.scss +++ b/scss/tools/mixins/_ratio-block.scss @@ -1,6 +1,6 @@ // Aspect ratio blocks -@mixin ratio-block($ratio: 16 by 9, $overflow: hidden) { +@mixin ratio-block($ratio: $illusion-ratio-block, $overflow: $illusion-ratio-block-overflow, $after: $illusion-ratio-block-after) { // Variables $width: nth($ratio, 1); @@ -12,15 +12,17 @@ } &:before { - display: block; - float: left; - content: " "; + display: $illusion-ratio-block-before-display; + float: $illusion-ratio-block-before-float; + content: $illusion-ratio-block-before-content; padding-top: $percent; } - &:after { - content: " "; - clear: left; - display: table; + @if $after != false { + &:after { + content: $illusion-ratio-block-after-content; + clear: $illusion-ratio-block-after-clear; + display: $illusion-ratio-block-after-display; + } } } diff --git a/scss/tools/mixins/_reset.scss b/scss/tools/mixins/_reset.scss index cca63ad..bce9fc6 100755 --- a/scss/tools/mixins/_reset.scss +++ b/scss/tools/mixins/_reset.scss @@ -1,6 +1,6 @@ // Reset elements -@mixin reset($margin: 0, $padding: 0, $list-style: none, $border: none, $background: transparent) { +@mixin reset($margin: $illusion-reset-margin, $padding: $illusion-reset-padding, $list-style: $illusion-reset-list-style, $border: $illusion-reset-border, $background: $illusion-reset-background) { @if $margin != false { margin: $margin; } diff --git a/scss/tools/mixins/_row.scss b/scss/tools/mixins/_row.scss index 25ff0dd..bf6ad71 100644 --- a/scss/tools/mixins/_row.scss +++ b/scss/tools/mixins/_row.scss @@ -1,6 +1,6 @@ // Row -@mixin row($type: $illusion-grid-container-type) { +@mixin row($type: $illusion-grid-row-type) { // Floats @if $type != flex { diff --git a/scss/tools/mixins/_shift.scss b/scss/tools/mixins/_shift.scss index 0a3e078..f915c83 100644 --- a/scss/tools/mixins/_shift.scss +++ b/scss/tools/mixins/_shift.scss @@ -1,6 +1,6 @@ // Shift -@mixin shift($shift: null, $fromto: false, $multiplier: 1, $defaults: true, $gutter: false) { +@mixin shift($shift: $illusion-shift, $fromto: $illusion-shift-fromto, $multiplier: $illusion-shift-multiplier, $defaults: $illusion-shift-defaults, $gutter: $illusion-shift-gutter) { // Give a warning when $multiplier is not dividable by 0.5 @if ($multiplier % 0.5 != 0) { diff --git a/scss/tools/mixins/_spacing.scss b/scss/tools/mixins/_spacing.scss index 279f6f3..8437108 100644 --- a/scss/tools/mixins/_spacing.scss +++ b/scss/tools/mixins/_spacing.scss @@ -2,7 +2,7 @@ // // Responsive spacing that follows the grid breakpoints -@mixin spacing($sides: all, $type: padding, $multiplier: 1, $fromto: false, $lastchildnone: false, $minus: 0) { +@mixin spacing($sides: $illusion-spacing-sides, $type: $illusion-spacing-type, $multiplier: $illusion-spacing-multiplier, $fromto: $illusion-spacing-fromto, $lastchildnone: $illusion-spacing-lastchildnone, $minus: $illusion-spacing-minus) { // Give a warning when $multiplier is not dividable by 0.5 @if ($multiplier % 0.5 != 0) { diff --git a/scss/tools/mixins/_span.scss b/scss/tools/mixins/_span.scss index 4d7c818..ea03b80 100644 --- a/scss/tools/mixins/_span.scss +++ b/scss/tools/mixins/_span.scss @@ -1,6 +1,6 @@ // Span mixin -@mixin span($span: null, $fromto: false, $multiplier: 1, $bottom: false, $defaults: true, $omega: null, $gutter: false) { +@mixin span($span: $illusion-span-span, $fromto: $illusion-span-fromto, $multiplier: $illusion-span-multiplier, $bottom: $illusion-span-bottom, $defaults: $illusion-span-defaults, $omega: $illusion-span-omega, $gutter: $illusion-span-gutter) { // Give a warning when $multiplier is not dividable by 0.5 @if ($multiplier % 0.5 != 0) { diff --git a/scss/tools/mixins/_svg-background.scss b/scss/tools/mixins/_svg-background.scss index 1831ba4..14aa4da 100644 --- a/scss/tools/mixins/_svg-background.scss +++ b/scss/tools/mixins/_svg-background.scss @@ -2,7 +2,7 @@ // // @include svg-background('', black, 16); -@mixin svg-background($svg, $color: $svg-background-color, $width: $svg-background-width, $height: $svg-background-height, $viewboxWidth: $svg-background-viewboxWidth, $viewboxHeight: $svg-background-viewboxHeight, $background-position: $svg-background-position, $background-repeat: $svg-background-repeat) { +@mixin svg-background($svg, $color: $illusion-svg-background-color, $width: $illusion-svg-background-width, $height: $illusion-svg-background-height, $viewboxWidth: $illusion-svg-background-viewboxWidth, $viewboxHeight: $illusion-svg-background-viewboxHeight, $background-position: $illusion-svg-background-position, $background-repeat: $illusion-svg-background-repeat) { @if $height == false { $height: $width; } diff --git a/scss/tools/mixins/_triangle.scss b/scss/tools/mixins/_triangle.scss index 9667791..0295bba 100755 --- a/scss/tools/mixins/_triangle.scss +++ b/scss/tools/mixins/_triangle.scss @@ -1,7 +1,7 @@ // Triangle // CSS only triangles using borders -@mixin triangle($direction: right, $size: 4px, $color: false) { +@mixin triangle($direction: $illusion-triangle-direction, $size: $illusion-triangle-size, $color: $illusion-triangle-color) { // Top and bottom arrows @if $direction == top or $direction == bottom { diff --git a/scss/tools/mixins/_visually-hidden.scss b/scss/tools/mixins/_visually-hidden.scss index 09fce5f..4066fc8 100644 --- a/scss/tools/mixins/_visually-hidden.scss +++ b/scss/tools/mixins/_visually-hidden.scss @@ -1,6 +1,6 @@ // Visually hidden -@mixin visually-hidden($position: absolute, $overflow: hidden, $backface-visibility: hidden, $clip: rect(0 0 0 0), $height: 1px, $width: 1px, $margin: -1px, $padding: 0, $border: none) { +@mixin visually-hidden($position: $illusion-visually-hidden-position, $overflow: $illusion-visually-hidden-overflow, $backface-visibility: $illusion-visually-hidden-backface-visibility, $clip: $illusion-visually-hidden-clip, $height: $illusion-visually-hidden-height, $width: $illusion-visually-hidden-width, $margin: $illusion-visually-hidden-margin, $padding: $illusion-visually-hidden-padding, $border: $illusion-visually-hidden-border) { @if $position != false { position: $position; } @@ -28,4 +28,4 @@ @if $border != false { border: $border; } -} \ No newline at end of file +} diff --git a/scss/tools/mixins/_visually-shown.scss b/scss/tools/mixins/_visually-shown.scss index 45db49c..a805b29 100644 --- a/scss/tools/mixins/_visually-shown.scss +++ b/scss/tools/mixins/_visually-shown.scss @@ -1,6 +1,6 @@ // Visually shown -@mixin visually-shown($position: static, $overflow: visible, $backface-visibility: visible, $clip: auto, $height: auto, $width: auto, $margin: 0, $padding: 0, $border: none) { +@mixin visually-hidden($position: $illusion-visually-shown-position, $overflow: $illusion-visually-shown-overflow, $backface-visibility: $illusion-visually-shown-backface-visibility, $clip: $illusion-visually-shown-clip, $height: $illusion-visually-shown-height, $width: $illusion-visually-shown-width, $margin: $illusion-visually-shown-margin, $padding: $illusion-visually-shown-padding, $border: $illusion-visually-shown-border) { @if $position != false { position: $position; } @@ -28,4 +28,4 @@ @if $border != false { border: $border; } -} \ No newline at end of file +} diff --git a/scss/tools/variables/_breakpoints.scss b/scss/tools/variables/_breakpoints.scss index 6bec051..4009503 100755 --- a/scss/tools/variables/_breakpoints.scss +++ b/scss/tools/variables/_breakpoints.scss @@ -1,23 +1,24 @@ // Breakpoints // Default breakpoints following the 8pt grid -$alfa: 320px !default; -$alfa--plus: 440px !default; -$bravo: 560px !default; -$charlie: 768px !default; -$delta: 1024px !default; -$echo: 1112px !default; +$alfa: 320px !default; +$alfa--plus: 440px !default; +$bravo: 560px !default; +$charlie: 768px !default; +$delta: 1024px !default; +$echo: 1112px !default; // The above values minus 1px to be used for min-max media queries -$alfa--plus-min: $alfa--plus - 1px !default; -$bravo-min: $bravo - 1px !default; -$charlie-min: $charlie - 1px !default; -$delta-min: $delta - 1px !default; -$echo-min: $echo - 1px !default; +$alfa--plus-min: $alfa--plus - 1px !default; +$bravo-min: $bravo - 1px !default; +$charlie-min: $charlie - 1px !default; +$delta-min: $delta - 1px !default; +$echo-min: $echo - 1px !default; // Set default to false so we can use spacing() function outside breakpoint -$inside-breakpoint: false; \ No newline at end of file +$illusion-breakpoint-width-max: false !default; +$inside-breakpoint: false; diff --git a/scss/tools/variables/_button.scss b/scss/tools/variables/_button.scss new file mode 100644 index 0000000..43d4406 --- /dev/null +++ b/scss/tools/variables/_button.scss @@ -0,0 +1,6 @@ +// Button + +$illusion-button-appearance: none !default; +$illusion-button-display: inline-block !default; +$illusion-button-vertical-align: middle !default; +$illusion-button-cursor: pointer !default; diff --git a/scss/tools/variables/_clearfix.scss b/scss/tools/variables/_clearfix.scss new file mode 100644 index 0000000..2e8b718 --- /dev/null +++ b/scss/tools/variables/_clearfix.scss @@ -0,0 +1,3 @@ +// Clearfix + +$illusion-clearfix-reset: false !default; \ No newline at end of file diff --git a/scss/tools/variables/_collapse.scss b/scss/tools/variables/_collapse.scss new file mode 100644 index 0000000..6ce5927 --- /dev/null +++ b/scss/tools/variables/_collapse.scss @@ -0,0 +1,6 @@ +// Collapse + +$illusion-collapse-sides: both !default; +$illusion-collapse-multiplier: 1 !default; +$illusion-collapse-fromto: false !default; +$illusion-collapse-gutter: false !default; diff --git a/scss/tools/variables/_content-block.scss b/scss/tools/variables/_content-block.scss new file mode 100644 index 0000000..806ea17 --- /dev/null +++ b/scss/tools/variables/_content-block.scss @@ -0,0 +1,4 @@ +// Content block + +$illusion-content-block-spacing: $line-height !default; +$illusion-content-block-location: bottom !default; diff --git a/scss/tools/variables/_coverall.scss b/scss/tools/variables/_coverall.scss new file mode 100644 index 0000000..4fd0bfd --- /dev/null +++ b/scss/tools/variables/_coverall.scss @@ -0,0 +1,14 @@ +// Coverall + +$illusion-coverall-offset: 0 !default; +$illusion-coverall-top: true !default; +$illusion-coverall-right: true !default; +$illusion-coverall-bottom: true !default; +$illusion-coverall-left: true !default; +$illusion-coverall-position: absolute !default; +$illusion-coverall-reset: false !default; +$illusion-coverall-reset-position: false !default; +$illusion-coverall-reset-top: auto !default; +$illusion-coverall-reset-right: auto !default; +$illusion-coverall-reset-bottom: auto !default; +$illusion-coverall-reset-left: auto !default; diff --git a/scss/tools/variables/_extendalize.scss b/scss/tools/variables/_extendalize.scss index 1e10994..a4c0627 100644 --- a/scss/tools/variables/_extendalize.scss +++ b/scss/tools/variables/_extendalize.scss @@ -19,6 +19,11 @@ $illusion-extendalize-address-margin-bottom: $spacing-m !default; $illusion-extendalize-body: default !default; $illusion-extendalize-body-margin: 0 !default; +$illusion-extendalize-body-font-family: $font-family !default; +$illusion-extendalize-body-font-size: $font-size !default; +$illusion-extendalize-body-line-height: $line-height !default; +$illusion-extendalize-body-font-weight: $weight-normal !default; +$illusion-extendalize-body-color: $color-type !default; $illusion-extendalize-fieldset: default !default; $illusion-extendalize-fieldset-width: 100% !default; @@ -39,6 +44,8 @@ $illusion-extendalize-heading-font-size: inherit !default; $illusion-extendalize-heading-margin-top: 0 !default; $illusion-extendalize-heading-margin-bottom: $spacing-m !default; +$illusion-extendalize-html-box-sizing: border-box !default; + $illusion-extendalize-image: default !default; $illusion-extendalize-image-max-width: 100% !default; $illusion-extendalize-image-height: auto !default; diff --git a/scss/tools/variables/_flexbox.scss b/scss/tools/variables/_flexbox.scss index 4ded992..a142bbf 100755 --- a/scss/tools/variables/_flexbox.scss +++ b/scss/tools/variables/_flexbox.scss @@ -4,6 +4,6 @@ // 2. Used with the flexbox mixin, will only flex from set width, overwriteable per mixin // 3. Used with the flexbox mixin, will only flex from set height, overwriteable per mixin -$flexbox: true !default; // 1 -$flexbox-horizontal: 0 !default; // 2 -$flexbox-vertical: 0 !default; // 3 +$illusion-flexbox: true !default; // 1 +$illusion-flexbox-horizontal: 0 !default; // 2 +$illusion-flexbox-vertical: 0 !default; // 3 diff --git a/scss/tools/variables/_form.scss b/scss/tools/variables/_form.scss index f4ca7e5..c0da23e 100644 --- a/scss/tools/variables/_form.scss +++ b/scss/tools/variables/_form.scss @@ -12,6 +12,10 @@ $illusion-form-input-width: 100% !default; $illusion-form-input-padding: $spacing-xs $spacing-s !default; $illusion-form-input-border: $illusion-form-border-width solid !default; $illusion-form-input-line-height: $line-height + $spacing-xs !default; +$illusion-form-input-min-height: $illusion-form-input-line-height + ($spacing-xs * 2) + ($illusion-form-border-width * 2) !default; +$illusion-form-input-font-family: inherit !default; +$illusion-form-input-font-weight: inherit !default; +$illusion-form-input-color: inherit !default; $illusion-form-input-focus-outline: 3px solid $illusion-form-focus-color !default; $illusion-form-input-focus-outline-offset: 0 !default; $illusion-form-input-border-radius: 0 !default; @@ -82,3 +86,46 @@ $illusion-multiple-choice-label-focus-before-box-shadow: 0 0 0 3px $illusio $illusion-multiple-choice-input-disabled-opacity: 0 !default; $illusion-multiple-choice-label-disabled-opacity: 0.6 !default; $illusion-multiple-choice-label-disabled-cursor: not-allowed !default; + +$illusion-custom-select: inherit !default; +$illusion-custom-select-theme: inherit !default; +$illusion-custom-select-position: relative !default; +$illusion-custom-select-display: block !default; + +$illusion-custom-select-width: 100% !default; +$illusion-custom-select-margin: 0 !default; +$illusion-custom-select-padding: ($spacing-xs - ($illusion-form-border-width * 2)) ($spacing-s - ($illusion-form-border-width * 2)) !default; +$illusion-custom-select-outline: none !default; +$illusion-custom-select-height: $illusion-form-input-min-height - ($illusion-form-border-width * 2) !default; +$illusion-custom-select-box-sizing: border-box !default; +$illusion-custom-select-font-size: 16px !default; +$illusion-custom-select-border: $illusion-form-input-border !default; +$illusion-custom-select-font-family: $illusion-form-input-font-family !default; +$illusion-custom-select-font-weight: $illusion-form-input-font-weight !default; +$illusion-custom-select-color: $illusion-form-input-color !default; +$illusion-custom-select-line-height: $illusion-form-input-line-height + $illusion-form-border-width !default; +$illusion-custom-select-padding-top: $spacing-xs !default; +$illusion-custom-select-padding-bottom: $spacing-xs !default; +$illusion-custom-select-padding-left: $spacing-s !default; + +$illusion-custom-select-arrow-content: " " !default; +$illusion-custom-select-arrow-position: absolute !default; +$illusion-custom-select-arrow-top: 50% !default; +$illusion-custom-select-arrow-right: $spacing-s !default; +$illusion-custom-select-arrow-z-index: 2 !default; +$illusion-custom-select-arrow-pointer-events: none !default; +$illusion-custom-select-arrow-width: 0 !default; +$illusion-custom-select-arrow-height: 0 !default; +$illusion-custom-select-arrow-size: 6px !default; +$illusion-custom-select-arrow-border-horizontal: $illusion-custom-select-arrow-size solid transparent !default; +$illusion-custom-select-arrow-border-top: $illusion-custom-select-arrow-size solid !default; +$illusion-custom-select-arrow-margin-top: -($illusion-custom-select-arrow-size / 2) !default; +$illusion-custom-select-arrow-display: block !default; + +$illusion-custom-select-padding-right: ($illusion-custom-select-arrow-right * 2) + ($illusion-custom-select-arrow-size * 2) !default; + +$illusion-custom-select-ms-focus-background: none !default; +$illusion-custom-select-ms-focus-color: inherit !default; + +$illusion-custom-select-focus-outline: $illusion-form-input-focus-outline !default; +$illusion-custom-select-focus-outline-offset: $illusion-form-border-width !default; \ No newline at end of file diff --git a/scss/tools/variables/_gallery.scss b/scss/tools/variables/_gallery.scss new file mode 100644 index 0000000..dc814e0 --- /dev/null +++ b/scss/tools/variables/_gallery.scss @@ -0,0 +1,8 @@ +// Gallery + +$illusion-gallery-span: null !default; +$illusion-gallery-fromto: false !default; +$illusion-gallery-multiplier: 1 !default; +$illusion-gallery-bottom: true !default; +$illusion-gallery-defaults: true !default; +$illusion-gallery-gutter: false !default; diff --git a/scss/tools/variables/_grid.scss b/scss/tools/variables/_grid.scss index c72b53c..ded1c12 100644 --- a/scss/tools/variables/_grid.scss +++ b/scss/tools/variables/_grid.scss @@ -1,14 +1,14 @@ // Grid -$illusion-grid-container: 12 !default; -$illusion-grid-maxwidth: $echo !default; -$illusion-grid-default-width: 0 !default; -$illusion-grid-default-gutter: 16px !default; -$illusion-grid-bravo-width: $bravo !default; -$illusion-grid-bravo-gutter: 24px !default; -$illusion-grid-delta-width: $delta !default; -$illusion-grid-delta-gutter: 32px !default; -$illusion-grid-breakpoints: ( +$illusion-grid-container: 12 !default; +$illusion-grid-maxwidth: $echo !default; +$illusion-grid-default-width: 0 !default; +$illusion-grid-default-gutter: 16px !default; +$illusion-grid-bravo-width: $bravo !default; +$illusion-grid-bravo-gutter: 24px !default; +$illusion-grid-delta-width: $delta !default; +$illusion-grid-delta-gutter: 32px !default; +$illusion-grid-breakpoints: ( default: ( width: $illusion-grid-default-width, gutter: $illusion-grid-default-gutter @@ -23,4 +23,6 @@ $illusion-grid-breakpoints: ( ) ) !default; $illusion-grid-type: float !default; -$illusion-grid-container-type: $illusion-grid-type !default; \ No newline at end of file +$illusion-grid-container-type: $illusion-grid-type !default; +$illusion-grid-container-align: center !default; +$illusion-grid-row-type: $illusion-grid-container-type !default; diff --git a/scss/tools/variables/_pseudo.scss b/scss/tools/variables/_pseudo.scss new file mode 100644 index 0000000..392e2b9 --- /dev/null +++ b/scss/tools/variables/_pseudo.scss @@ -0,0 +1,7 @@ +// Pseudo + +$illusion-pseudo: after !default; +$illusion-pseudo-parent-position: relative !default; +$illusion-pseudo-position: absolute !default; +$illusion-pseudo-content: " " !default; +$illusion-pseudo-display: block !default; diff --git a/scss/tools/variables/_ratio-block.scss b/scss/tools/variables/_ratio-block.scss new file mode 100644 index 0000000..af73fef --- /dev/null +++ b/scss/tools/variables/_ratio-block.scss @@ -0,0 +1,11 @@ +// Ratio block + +$illusion-ratio-block: 16 by 9 !default; +$illusion-ratio-block-overflow: hidden !default; +$illusion-ratio-block-before-display: block !default; +$illusion-ratio-block-before-float: left !default; +$illusion-ratio-block-before-content: " " !default; +$illusion-ratio-block-after: true !default; +$illusion-ratio-block-after-content: " " !default; +$illusion-ratio-block-after-clear: left !default; +$illusion-ratio-block-after-display: table !default; diff --git a/scss/tools/variables/_reset.scss b/scss/tools/variables/_reset.scss new file mode 100644 index 0000000..fee7cdb --- /dev/null +++ b/scss/tools/variables/_reset.scss @@ -0,0 +1,7 @@ +// Reset + +$illusion-reset-margin: 0 !default; +$illusion-reset-padding: 0 !default; +$illusion-reset-list-style: none !default; +$illusion-reset-border: none !default; +$illusion-reset-background: transparent !default; diff --git a/scss/tools/variables/_shift.scss b/scss/tools/variables/_shift.scss new file mode 100644 index 0000000..f1f1207 --- /dev/null +++ b/scss/tools/variables/_shift.scss @@ -0,0 +1,7 @@ +// Shift + +$illusion-shift: null !default; +$illusion-shift-fromto: false !default; +$illusion-shift-multiplier: 1 !default; +$illusion-shift-defaults: true !default; +$illusion-shift-gutter: false !default; diff --git a/scss/tools/variables/_spacing.scss b/scss/tools/variables/_spacing.scss index 7addbeb..27e8197 100644 --- a/scss/tools/variables/_spacing.scss +++ b/scss/tools/variables/_spacing.scss @@ -3,10 +3,17 @@ // Following the 8 pixel grid with the exception of 4px // Use the 4px only when the total width/height of the element will be dividable by 8 in the end -$spacing-xs: 4px !default; -$spacing-s: 8px !default; -$spacing-m: 16px !default; -$spacing-l: 24px !default; -$spacing-xl: 32px !default; +$spacing-xs: 4px !default; +$spacing-s: 8px !default; +$spacing-m: 16px !default; +$spacing-l: 24px !default; +$spacing-xl: 32px !default; -$margin-top: 0 !default; \ No newline at end of file +$margin-top: 0 !default; + +$illusion-spacing-sides: all !default; +$illusion-spacing-type: padding !default; +$illusion-spacing-multiplier: 1 !default; +$illusion-spacing-fromto: false !default; +$illusion-spacing-lastchildnone: false !default; +$illusion-spacing-minus: 0 !default; diff --git a/scss/tools/variables/_span.scss b/scss/tools/variables/_span.scss new file mode 100644 index 0000000..e9c1df8 --- /dev/null +++ b/scss/tools/variables/_span.scss @@ -0,0 +1,9 @@ +// Span + +$illusion-span-span: null !default; +$illusion-span-fromto: false !default; +$illusion-span-multiplier: 1 !default; +$illusion-span-bottom: false !default; +$illusion-span-defaults: true !default; +$illusion-span-omega: null !default; +$illusion-span-gutter: false !default; diff --git a/scss/tools/variables/_svg.scss b/scss/tools/variables/_svg.scss index f3c6e3b..34ea7a9 100644 --- a/scss/tools/variables/_svg.scss +++ b/scss/tools/variables/_svg.scss @@ -1,9 +1,9 @@ // SVG background -$svg-background-color: black !default; -$svg-background-width: 24 !default; -$svg-background-height: false !default; -$svg-background-viewboxWidth: 24 !default; -$svg-background-viewboxHeight: false !default; -$svg-background-position: center !default; -$svg-background-repeat: no-repeat !default; +$illusion-svg-background-color: black !default; +$illusion-svg-background-width: 24 !default; +$illusion-svg-background-height: false !default; +$illusion-svg-background-viewboxWidth: 24 !default; +$illusion-svg-background-viewboxHeight: false !default; +$illusion-svg-background-position: center !default; +$illusion-svg-background-repeat: no-repeat !default; diff --git a/scss/tools/variables/_triangle.scss b/scss/tools/variables/_triangle.scss new file mode 100644 index 0000000..9590695 --- /dev/null +++ b/scss/tools/variables/_triangle.scss @@ -0,0 +1,5 @@ +// Triangle + +$illusion-triangle-direction: right !default; +$illusion-triangle-size: 4px !default; +$illusion-triangle-color: false !default; diff --git a/scss/tools/variables/_type.scss b/scss/tools/variables/_type.scss index e1b750a..4fedeb8 100755 --- a/scss/tools/variables/_type.scss +++ b/scss/tools/variables/_type.scss @@ -14,7 +14,7 @@ $weight-bold: 700 !default; // Fluid type settings -$fluid-type-min-value: $font-size !default; -$fluid-type-max-value: 20px !default; -$fluid-type-min-screen: $bravo !default; -$fluid-type-max-screen: $delta !default; +$illusion-fluid-type-min-value: $font-size !default; +$illusion-fluid-type-max-value: 20px !default; +$illusion-fluid-type-min-screen: $bravo !default; +$illusion-fluid-type-max-screen: $delta !default; diff --git a/scss/tools/variables/_visually-hidden.scss b/scss/tools/variables/_visually-hidden.scss new file mode 100644 index 0000000..fd9af31 --- /dev/null +++ b/scss/tools/variables/_visually-hidden.scss @@ -0,0 +1,11 @@ +// Visually hidden + +$illusion-visually-hidden-position: absolute !default; +$illusion-visually-hidden-overflow: hidden !default; +$illusion-visually-hidden-backface-visibility: hidden !default; +$illusion-visually-hidden-clip: rect(0 0 0 0) !default; +$illusion-visually-hidden-height: 1px !default; +$illusion-visually-hidden-width: 1px !default; +$illusion-visually-hidden-margin: -1px !default; +$illusion-visually-hidden-padding: 0 !default; +$illusion-visually-hidden-border: none !default; diff --git a/scss/tools/variables/_visually-shown.scss b/scss/tools/variables/_visually-shown.scss new file mode 100644 index 0000000..3855997 --- /dev/null +++ b/scss/tools/variables/_visually-shown.scss @@ -0,0 +1,11 @@ +// Visually hidden + +$illusion-visually-shown-position: absolute !default; +$illusion-visually-shown-overflow: hidden !default; +$illusion-visually-shown-backface-visibility: hidden !default; +$illusion-visually-shown-clip: rect(0 0 0 0) !default; +$illusion-visually-shown-height: 1px !default; +$illusion-visually-shown-width: 1px !default; +$illusion-visually-shown-margin: -1px !default; +$illusion-visually-shown-padding: 0 !default; +$illusion-visually-shown-border: none !default;