From 14a416c121e6cd919112b3f6ce146c2d0c6cefc6 Mon Sep 17 00:00:00 2001 From: Glen Cheney Date: Tue, 11 Jul 2017 23:44:46 -0700 Subject: [PATCH] Update type styles. Change homepage diff --git a/docs/_posts/2013-06-19-adding-removing.html b/docs/_posts/2013-06-19-adding-removing.html index 48b2dab..ffc0d3b 100644 --- a/docs/_posts/2013-06-19-adding-removing.html +++ b/docs/_posts/2013-06-19-adding-removing.html @@ -83,9 +83,9 @@ prism: true
-
-

Sort

-
+
+

Sort

+
@@ -100,7 +100,7 @@ prism: true

-

Actions

+

Actions

diff --git a/docs/_posts/2013-07-16-faq.html b/docs/_posts/2013-07-16-faq.html index cb6b052..00e476f 100644 --- a/docs/_posts/2013-07-16-faq.html +++ b/docs/_posts/2013-07-16-faq.html @@ -15,7 +15,7 @@ extraJS: [ "faq.js" ]
- +
diff --git a/docs/_posts/2014-03-08-bootstrap3-grid.html b/docs/_posts/2014-03-08-bootstrap3-grid.html index 3581096..87e2a08 100644 --- a/docs/_posts/2014-03-08-bootstrap3-grid.html +++ b/docs/_posts/2014-03-08-bootstrap3-grid.html @@ -49,7 +49,7 @@ extraJS: [ "demos/padding-grid.js" ]

Bootstrap 3 Grid

- On this page, I have added the minified bootstrap css file from the Bootstrap CDN (which is also why some of the site-styles are being overriden). + On this page, I have added the minified bootstrap css file from the Bootstrap CDN (which is also why some of the site-styles are being overridden).
The Bootstrap 3 grid system uses padding for gutters instead of margins. This page demonstrates one way to use Shuffle with these types of grids, as well as showing you don't have to use the full width of the page with Shuffle.

diff --git a/docs/_scss/components/_buttons.scss b/docs/_scss/components/_buttons.scss index f495311..79a08cc 100644 --- a/docs/_scss/components/_buttons.scss +++ b/docs/_scss/components/_buttons.scss @@ -28,14 +28,15 @@ .btn { display: inline-block; padding: .75em .8em; - -webkit-appearance: none; text-align: center; border-radius: 3px; border: 1px solid $gray20; color: $gray20; + font-size: 1rem; background-color: rgba($gray20, 0); transition: .2s ease-out; cursor: pointer; + -webkit-appearance: none; &:hover { color: white; diff --git a/docs/_scss/components/_demo-list.scss b/docs/_scss/components/_demo-list.scss index 71ad4ff..e5d1ea8 100644 --- a/docs/_scss/components/_demo-list.scss +++ b/docs/_scss/components/_demo-list.scss @@ -37,6 +37,7 @@ } .demo-list .figure-wrap figcaption { + height: 2em; margin-top: .5em; margin-bottom: 1em; } diff --git a/docs/_scss/components/_site-nav.scss b/docs/_scss/components/_site-nav.scss index 5b14a78..a8b5e81 100644 --- a/docs/_scss/components/_site-nav.scss +++ b/docs/_scss/components/_site-nav.scss @@ -1,6 +1,7 @@ .site-nav { padding: 10px 0; border-bottom: 1px solid $gray90; + margin-bottom: 28px; background: $gray95; } diff --git a/docs/_scss/extensions/_variables.scss b/docs/_scss/extensions/_variables.scss index 3582d22..5f3c173 100644 --- a/docs/_scss/extensions/_variables.scss +++ b/docs/_scss/extensions/_variables.scss @@ -32,8 +32,8 @@ $black: #000; $gray10: $midnightBlue; $gray20: $wet-asphalt; $gray30: #5D6D77; -$gray40: $concrete; $gray50: $asbestos; +$gray60: $concrete; $gray80: $silver; $gray90: #E1E5E6; $gray95: $clouds; diff --git a/docs/_scss/global-rules/_forms.scss b/docs/_scss/global-rules/_forms.scss index 8c48fa8..f543678 100644 --- a/docs/_scss/global-rules/_forms.scss +++ b/docs/_scss/global-rules/_forms.scss @@ -2,20 +2,20 @@ -webkit-appearance: searchfield; box-sizing: border-box; width: 100%; - border: 2px solid $gray40; + border: 2px solid $gray60; border-radius: 4px; padding: 0.5em; - font-size: 1.125em; - color: $gray40; + font-size: 1rem; + color: $gray20; transition: .15s; &::placeholder { - color: $gray40; + color: $gray60; transition: .15s; } &:hover { - outline: 0; + outline-width: 0; color: $gray30; border-color: $gray30; @@ -25,12 +25,16 @@ } &:focus { - outline: 0; - color: $nephritis; - border-color: $nephritis; + outline-width: 0; + // color: $gray20; + border-color: $gray20; &::placeholder { - color: $nephritis; + color: $gray20; } } } + +.textfield--large { + font-size: 1.125em; +} diff --git a/docs/_scss/global-rules/_global.scss b/docs/_scss/global-rules/_global.scss index a444e50..a37e9dd 100644 --- a/docs/_scss/global-rules/_global.scss +++ b/docs/_scss/global-rules/_global.scss @@ -36,17 +36,15 @@ li { line-height: 1.4; } +li + li { + margin-top: 4px; +} + nav > a { display: block; margin: 5px 0; } -.breathable-list li { - line-height: 1.7; -} - -#be-social { - h2 { - margin-bottom: 32px; - } +#demos { + margin-top: 1em; } diff --git a/docs/_scss/global-rules/_grid.scss b/docs/_scss/global-rules/_grid.scss index 8758d1c..00dc7c7 100644 --- a/docs/_scss/global-rules/_grid.scss +++ b/docs/_scss/global-rules/_grid.scss @@ -81,8 +81,10 @@ .code-block { position: relative; overflow: visible; - margin-left: calc(-3.5vw - #{($grid-gutter-width / 2)}); + margin-top: 0.5em; margin-right: calc(-3.5vw - #{($grid-gutter-width / 2)}); + margin-bottom: 0.5em; + margin-left: calc(-3.5vw - #{($grid-gutter-width / 2)}); pre { position: relative; @@ -92,7 +94,7 @@ padding-bottom: 1em; padding-left: calc(3.5vw + #{($grid-gutter-width / 2)}); padding-right: calc(3.5vw + #{($grid-gutter-width / 2)}); - margin: .5em 0; + margin: 0; } } diff --git a/docs/_scss/global-rules/_type.scss b/docs/_scss/global-rules/_type.scss index 0a0b642..9b67aff 100644 --- a/docs/_scss/global-rules/_type.scss +++ b/docs/_scss/global-rules/_type.scss @@ -31,77 +31,76 @@ h6 { font-weight: 400; } - -// Headers h1 { - margin: 0.5em 0 0.25em; + margin: 3vw 0; + font-size: 10vw; font-weight: 300; - font-size: 3.5em; line-height: 1; } h2 { position: relative; - font-size: 2.5em; - margin-bottom: 18px; - - // Bottom border BEHIND the descenders! - &::after { - content: ''; - position: absolute; - bottom: 0.1em; - left: 0; - z-index: -1; - width: 100%; - height: 2px; - background-color: $emerald; - transform: translateZ(0); - } + font-size: 7vw; + margin: 3vw 0; } h3 { - margin: .6667em 0 0.5em; - font-size: 1.5em; + font-size: 6vw; + margin: 2vw 0; } h4 { font-size: 1.25em; } -@include breakpoint(sm, true) { +p { + margin: 1em 0; + line-height: 1.4; +} + +.intro-text { + margin: 0.7em 0; + font-size: 1.125em; +} + +@include breakpoint(sm) { h1 { - font-size: 8vw; - margin: 3vw 0; + margin: 0.5em 0 0.25em; + font-size: 3.5em; } + h2 { - font-size: 6vw; - margin: 2vw 0; + margin: 0.45em 0; + font-size: 2.5em; } -} -h1 > a, -h2 > a, -h3 > a { - display: none; -} + h3 { + margin: 0.8em 0 0.5em; + font-size: 1.5em; + } -h1:hover > a, -h2:hover > a, -h3:hover > a { - position: absolute; - display: block; - top: 0; - left: -40px; - height: 50px; - width: 50px; - background: url('../img/link.svg') no-repeat; - overflow: hidden; - text-indent: -999em; -} + h1 > a, + h2 > a, + h3 > a { + display: none; + } -.intro-text { - margin: 0.7em 0; - font-size: 1.25em; + h1:hover > a, + h2:hover > a, + h3:hover > a { + position: absolute; + display: inline-block; + top: 0; + height: 50px; + width: 50px; + background: url('../img/link.svg') no-repeat; + overflow: hidden; + text-indent: -999em; + } + + .intro-text { + font-size: 1.25em; + } } .unstyled { @@ -110,19 +109,20 @@ h3:hover > a { margin: 0; } -:not(pre) > code { +code:not([class*="language"]) { padding: 0; padding-top: 0.2em; padding-bottom: 0.2em; margin: 0; font-size: 85%; - color: get-color(black); - background-color: rgba(0,0,0,0.04); + color: $gray10; + background-color: rgba(27,31,35,0.05); border-radius: 3px; + font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace; +} - &::before, - &::after { - letter-spacing: -0.2em; - content: "\00a0"; - } +code:not([class*="language"])::before, +code:not([class*="language"])::after { + content: "\00a0"; + letter-spacing: -.2em; } diff --git a/docs/_scss/pages/_compound-filters.scss b/docs/_scss/pages/_compound-filters.scss index a9b08ae..adf03e3 100644 --- a/docs/_scss/pages/_compound-filters.scss +++ b/docs/_scss/pages/_compound-filters.scss @@ -24,10 +24,6 @@ } } -.filter-group__label--compound { - margin: 0 0 5px; -} - .shape-shuffle-container { position: relative; overflow: hidden; diff --git a/docs/_scss/pages/_homepage-filters.scss b/docs/_scss/pages/_homepage-filters.scss index 4fe74c0..0f0da87 100644 --- a/docs/_scss/pages/_homepage-filters.scss +++ b/docs/_scss/pages/_homepage-filters.scss @@ -1,15 +1,12 @@ // Filters -.filter__label { - color: $gray80; - margin: 0 0 3px; +.filter-label { + display: block; + margin-top: 0; + margin-bottom: 4px; + color: $gray60; } -.filter__search { - margin: 5px 0; -} - - -.sort-options { - margin-top: 10px; +.filters-group { + margin-bottom: 4px; } diff --git a/docs/css/normalize.css b/docs/css/normalize.css index c5785a8..e04d10a 100644 --- a/docs/css/normalize.css +++ b/docs/css/normalize.css @@ -1,2 +1,3 @@ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ -html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}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}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;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:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio],legend{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} +/* search cancel styles removed */ +html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}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}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;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:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio],legend{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}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none} diff --git a/docs/css/style.css b/docs/css/style.css index f3541aa..2c532b6 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -1 +1 @@ -@charset "UTF-8";*,:after,:before{box-sizing:border-box}main{overflow:hidden}pre.max-height{max-height:30em}img,picture{display:block}img{max-width:100%;height:auto}figure,ul ul{margin:0}ul ul{padding-left:1.25em;list-style-type:circle}li{line-height:1.4}nav>a{display:block;margin:5px 0}.breathable-list li{line-height:1.7}#be-social h2{margin-bottom:32px}body{font-family:Open Sans,Helvetica Neue,Helvetica,sans-serif;color:#5d6d77}a{text-decoration:none}a,a:visited{color:#3498db}a:hover{text-decoration:underline}a:active{color:#2ecc71}h1,h2,h3,h4,h5,h6{color:#34495e;font-weight:400}h1{margin:.5em 0 .25em;font-weight:300;font-size:3.5em;line-height:1}h2{position:relative;font-size:2.5em;margin-bottom:18px}h2:after{content:"";position:absolute;bottom:.1em;left:0;z-index:-1;width:100%;height:2px;background-color:#2ecc71;-webkit-transform:translateZ(0);transform:translateZ(0)}h3{margin:.6667em 0 .5em;font-size:1.5em}h4{font-size:1.25em}@media screen and (max-width:767px){h1{font-size:8vw;margin:3vw 0}h2{font-size:6vw;margin:2vw 0}}h1>a,h2>a,h3>a{display:none}h1:hover>a,h2:hover>a,h3:hover>a{position:absolute;display:block;top:0;left:-40px;height:50px;width:50px;background:url(../img/link.svg) no-repeat;overflow:hidden;text-indent:-999em}.intro-text{margin:.7em 0;font-size:1.25em}.unstyled{list-style-type:none;padding:0;margin:0}:not(pre)>code{padding:.2em 0;margin:0;font-size:85%;color:get-color(#000);background-color:rgba(0,0,0,.04);border-radius:3px}:not(pre)>code:after,:not(pre)>code:before{letter-spacing:-.2em;content:"\00a0"}.container{padding-left:3.5%;padding-right:3.5%}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}.row{margin-left:auto;margin-right:auto}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.row .row{margin-left:-8px;margin-right:-8px}.row--centered{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.aspect{position:relative;width:100%;height:0;overflow:hidden;padding-bottom:100%}.aspect--16x9{padding-bottom:56.25%}.aspect--9x16{padding-bottom:177.77778%}.aspect--4x3{padding-bottom:75%}.aspect--3x4{padding-bottom:133.33333%}.aspect--3x2{padding-bottom:66.66667%}.aspect--3x1{padding-bottom:33.33333%}.aspect--2x3{padding-bottom:150%}.aspect--2x1{padding-bottom:50%}.aspect--1x2{padding-bottom:200%}.aspect--1x1{padding-bottom:100%}.aspect--none{height:auto;padding-bottom:0;overflow:visible}.aspect--none>.aspect__inner{position:static}.aspect>div,.aspect__inner{position:absolute;top:0;left:0;right:0;bottom:0}.col-1\@lg,.col-1\@md,.col-1\@sm,.col-1\@xs,.col-2\@lg,.col-2\@md,.col-2\@sm,.col-2\@xs,.col-3\@lg,.col-3\@md,.col-3\@sm,.col-3\@xs,.col-4\@lg,.col-4\@md,.col-4\@sm,.col-4\@xs,.col-5\@lg,.col-5\@md,.col-5\@sm,.col-5\@xs,.col-6\@lg,.col-6\@md,.col-6\@sm,.col-6\@xs,.col-7\@lg,.col-7\@md,.col-7\@sm,.col-7\@xs,.col-8\@lg,.col-8\@md,.col-8\@sm,.col-8\@xs,.col-9\@lg,.col-9\@md,.col-9\@sm,.col-9\@xs,.col-10\@lg,.col-10\@md,.col-10\@sm,.col-10\@xs,.col-11\@lg,.col-11\@md,.col-11\@sm,.col-11\@xs,.col-12\@lg,.col-12\@md,.col-12\@sm,.col-12\@xs{position:relative;box-sizing:border-box;min-height:1px;padding-left:8px;padding-right:8px}.col-1\@xs,.col-2\@xs,.col-3\@xs,.col-4\@xs,.col-5\@xs,.col-6\@xs,.col-7\@xs,.col-8\@xs,.col-9\@xs,.col-10\@xs,.col-11\@xs,.col-12\@xs{float:left}.aspect--16x9\@xs{padding-bottom:56.25%}.aspect--9x16\@xs{padding-bottom:177.77778%}.aspect--4x3\@xs{padding-bottom:75%}.aspect--3x4\@xs{padding-bottom:133.33333%}.aspect--3x2\@xs{padding-bottom:66.66667%}.aspect--3x1\@xs{padding-bottom:33.33333%}.aspect--2x3\@xs{padding-bottom:150%}.aspect--2x1\@xs{padding-bottom:50%}.aspect--1x2\@xs{padding-bottom:200%}.aspect--1x1\@xs{padding-bottom:100%}.aspect--none\@xs{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@xs>.aspect__inner{position:static}.col-1\@xs{width:16.66667%}.col-2\@xs{width:33.33333%}.col-3\@xs{width:50%}.col-4\@xs{width:66.66667%}.col-5\@xs{width:83.33333%}.col-6\@xs{width:100%}.col-pull-0\@xs{right:auto}.col-pull-1\@xs{right:16.66667%}.col-pull-2\@xs{right:33.33333%}.col-pull-3\@xs{right:50%}.col-pull-4\@xs{right:66.66667%}.col-pull-5\@xs{right:83.33333%}.col-pull-6\@xs{right:100%}.col-push-0\@xs{left:auto}.col-push-1\@xs{left:16.66667%}.col-push-2\@xs{left:33.33333%}.col-push-3\@xs{left:50%}.col-push-4\@xs{left:66.66667%}.col-push-5\@xs{left:83.33333%}.col-push-6\@xs{left:100%}.col-offset-0\@xs{margin-left:0}.col-offset-1\@xs{margin-left:16.66667%}.col-offset-2\@xs{margin-left:33.33333%}.col-offset-3\@xs{margin-left:50%}.col-offset-4\@xs{margin-left:66.66667%}.col-offset-5\@xs{margin-left:83.33333%}.col-offset-6\@xs{margin-left:100%}@media screen and (min-width:768px){.col-1\@sm,.col-2\@sm,.col-3\@sm,.col-4\@sm,.col-5\@sm,.col-6\@sm,.col-7\@sm,.col-8\@sm,.col-9\@sm,.col-10\@sm,.col-11\@sm,.col-12\@sm{float:left}.aspect--16x9\@sm{padding-bottom:56.25%}.aspect--9x16\@sm{padding-bottom:177.77778%}.aspect--4x3\@sm{padding-bottom:75%}.aspect--3x4\@sm{padding-bottom:133.33333%}.aspect--3x2\@sm{padding-bottom:66.66667%}.aspect--3x1\@sm{padding-bottom:33.33333%}.aspect--2x3\@sm{padding-bottom:150%}.aspect--2x1\@sm{padding-bottom:50%}.aspect--1x2\@sm{padding-bottom:200%}.aspect--1x1\@sm{padding-bottom:100%}.aspect--none\@sm{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@sm>.aspect__inner{position:static}.col-1\@sm{width:8.33333%}.col-2\@sm{width:16.66667%}.col-3\@sm{width:25%}.col-4\@sm{width:33.33333%}.col-5\@sm{width:41.66667%}.col-6\@sm{width:50%}.col-7\@sm{width:58.33333%}.col-8\@sm{width:66.66667%}.col-9\@sm{width:75%}.col-10\@sm{width:83.33333%}.col-11\@sm{width:91.66667%}.col-12\@sm{width:100%}.col-pull-0\@sm{right:auto}.col-pull-1\@sm{right:8.33333%}.col-pull-2\@sm{right:16.66667%}.col-pull-3\@sm{right:25%}.col-pull-4\@sm{right:33.33333%}.col-pull-5\@sm{right:41.66667%}.col-pull-6\@sm{right:50%}.col-pull-7\@sm{right:58.33333%}.col-pull-8\@sm{right:66.66667%}.col-pull-9\@sm{right:75%}.col-pull-10\@sm{right:83.33333%}.col-pull-11\@sm{right:91.66667%}.col-pull-12\@sm{right:100%}.col-push-0\@sm{left:auto}.col-push-1\@sm{left:8.33333%}.col-push-2\@sm{left:16.66667%}.col-push-3\@sm{left:25%}.col-push-4\@sm{left:33.33333%}.col-push-5\@sm{left:41.66667%}.col-push-6\@sm{left:50%}.col-push-7\@sm{left:58.33333%}.col-push-8\@sm{left:66.66667%}.col-push-9\@sm{left:75%}.col-push-10\@sm{left:83.33333%}.col-push-11\@sm{left:91.66667%}.col-push-12\@sm{left:100%}.col-offset-0\@sm{margin-left:0}.col-offset-1\@sm{margin-left:8.33333%}.col-offset-2\@sm{margin-left:16.66667%}.col-offset-3\@sm{margin-left:25%}.col-offset-4\@sm{margin-left:33.33333%}.col-offset-5\@sm{margin-left:41.66667%}.col-offset-6\@sm{margin-left:50%}.col-offset-7\@sm{margin-left:58.33333%}.col-offset-8\@sm{margin-left:66.66667%}.col-offset-9\@sm{margin-left:75%}.col-offset-10\@sm{margin-left:83.33333%}.col-offset-11\@sm{margin-left:91.66667%}.col-offset-12\@sm{margin-left:100%}.container{padding-left:7%;padding-right:7%}.row{max-width:1200px}}@media screen and (min-width:1024px){.col-1\@md,.col-2\@md,.col-3\@md,.col-4\@md,.col-5\@md,.col-6\@md,.col-7\@md,.col-8\@md,.col-9\@md,.col-10\@md,.col-11\@md,.col-12\@md{float:left}.aspect--16x9\@md{padding-bottom:56.25%}.aspect--9x16\@md{padding-bottom:177.77778%}.aspect--4x3\@md{padding-bottom:75%}.aspect--3x4\@md{padding-bottom:133.33333%}.aspect--3x2\@md{padding-bottom:66.66667%}.aspect--3x1\@md{padding-bottom:33.33333%}.aspect--2x3\@md{padding-bottom:150%}.aspect--2x1\@md{padding-bottom:50%}.aspect--1x2\@md{padding-bottom:200%}.aspect--1x1\@md{padding-bottom:100%}.aspect--none\@md{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@md>.aspect__inner{position:static}.col-1\@md{width:8.33333%}.col-2\@md{width:16.66667%}.col-3\@md{width:25%}.col-4\@md{width:33.33333%}.col-5\@md{width:41.66667%}.col-6\@md{width:50%}.col-7\@md{width:58.33333%}.col-8\@md{width:66.66667%}.col-9\@md{width:75%}.col-10\@md{width:83.33333%}.col-11\@md{width:91.66667%}.col-12\@md{width:100%}.col-pull-0\@md{right:auto}.col-pull-1\@md{right:8.33333%}.col-pull-2\@md{right:16.66667%}.col-pull-3\@md{right:25%}.col-pull-4\@md{right:33.33333%}.col-pull-5\@md{right:41.66667%}.col-pull-6\@md{right:50%}.col-pull-7\@md{right:58.33333%}.col-pull-8\@md{right:66.66667%}.col-pull-9\@md{right:75%}.col-pull-10\@md{right:83.33333%}.col-pull-11\@md{right:91.66667%}.col-pull-12\@md{right:100%}.col-push-0\@md{left:auto}.col-push-1\@md{left:8.33333%}.col-push-2\@md{left:16.66667%}.col-push-3\@md{left:25%}.col-push-4\@md{left:33.33333%}.col-push-5\@md{left:41.66667%}.col-push-6\@md{left:50%}.col-push-7\@md{left:58.33333%}.col-push-8\@md{left:66.66667%}.col-push-9\@md{left:75%}.col-push-10\@md{left:83.33333%}.col-push-11\@md{left:91.66667%}.col-push-12\@md{left:100%}.col-offset-0\@md{margin-left:0}.col-offset-1\@md{margin-left:8.33333%}.col-offset-2\@md{margin-left:16.66667%}.col-offset-3\@md{margin-left:25%}.col-offset-4\@md{margin-left:33.33333%}.col-offset-5\@md{margin-left:41.66667%}.col-offset-6\@md{margin-left:50%}.col-offset-7\@md{margin-left:58.33333%}.col-offset-8\@md{margin-left:66.66667%}.col-offset-9\@md{margin-left:75%}.col-offset-10\@md{margin-left:83.33333%}.col-offset-11\@md{margin-left:91.66667%}.col-offset-12\@md{margin-left:100%}}.code-block{position:relative;overflow:visible;margin-left:calc(-3.5vw - 8px);margin-right:calc(-3.5vw - 8px)}.code-block pre{position:relative;z-index:1;min-height:56px;padding:1em calc(3.5vw + 8px);margin:.5em 0}@media screen and (min-width:768px){.code-block{margin-left:calc(-7vw - 8px);margin-right:calc(-7vw - 8px)}.code-block pre{position:relative;z-index:1;padding-left:calc(7vw + 8px);padding-right:calc(7vw + 8px)}}@media (min-width:1395px){.code-block{margin-left:calc(-50vw + 592px);margin-right:calc(-50vw + 592px)}.code-block pre{padding-left:calc(50vw - 592px);padding-right:calc(50vw - 592px)}}.textfield{-webkit-appearance:searchfield;box-sizing:border-box;width:100%;border:2px solid #95a5a6;border-radius:4px;padding:.5em;font-size:1.125em;color:#95a5a6;transition:.15s}.textfield::-webkit-input-placeholder{color:#95a5a6;transition:.15s}.textfield:-ms-input-placeholder{color:#95a5a6;transition:.15s}.textfield::placeholder{color:#95a5a6;transition:.15s}.textfield:hover{outline:0;color:#5d6d77;border-color:#5d6d77}.textfield:hover::-webkit-input-placeholder{color:#5d6d77}.textfield:hover:-ms-input-placeholder{color:#5d6d77}.textfield:hover::placeholder{color:#5d6d77}.textfield:focus{outline:0;color:#27ae60;border-color:#27ae60}.textfield:focus::-webkit-input-placeholder{color:#27ae60}.textfield:focus:-ms-input-placeholder{color:#27ae60}.textfield:focus::placeholder{color:#27ae60}.text-center{text-align:center}.ib{display:inline-block}@media screen and (max-width:767px){.hidden\@xs{display:none}}.hidden{display:none!important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.clearfix,.clearfix:after{content:" ";display:table;clear:both}.pull-left{float:left}.pull-right{float:right}.full-width{width:100%}.full-height{height:100%}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.table-center-wrap{display:table;table-layout:fixed}.table-center{display:table-cell;vertical-align:middle}.btn-group:after,.btn-group:before{content:" ";display:table}.btn-group:after{clear:both}.btn-group .btn{float:left;border-radius:0}.btn-group .btn:first-child{border-radius:3px 0 0 3px}.btn-group .btn:not(:first-child){margin-left:-1px}.btn-group .btn:last-child{border-radius:0 3px 3px 0}.btn-group label.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn{display:inline-block;padding:.75em .8em;-webkit-appearance:none;text-align:center;border-radius:3px;border:1px solid #34495e;color:#34495e;background-color:rgba(52,73,94,0);transition:.2s ease-out;cursor:pointer}.btn:hover{color:#fff;text-decoration:none;background-color:#34495e}.btn:focus{outline-width:0;box-shadow:0 0 0 2px rgba(52,73,94,.4)}.btn.active,.btn:active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3);color:#fff;background-color:#34495e}.btn:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,73,94,.4)}.btn--warning{color:#e67e22;border-color:#e67e22;background-color:rgba(230,126,34,0)}.btn--warning:hover{background-color:#e67e22}.btn--warning:focus{box-shadow:0 0 0 2px rgba(230,126,34,.4)}.btn--warning.active,.btn--warning:active{background-color:#e67e22}.btn--warning:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(230,126,34,.4)}.btn--primary{color:#3498db;border-color:#3498db;background-color:rgba(52,152,219,0)}.btn--primary:hover{background-color:#3498db}.btn--primary:focus{box-shadow:0 0 0 2px rgba(52,152,219,.4)}.btn--primary.active,.btn--primary:active{background-color:#3498db}.btn--primary:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,152,219,.4)}.btn--danger{color:#e74c3c;border-color:#e74c3c;background-color:rgba(231,76,60,0)}.btn--danger:hover{background-color:#e74c3c}.btn--danger:focus{box-shadow:0 0 0 2px rgba(231,76,60,.4)}.btn--danger.active,.btn--danger:active{background-color:#e74c3c}.btn--danger:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(231,76,60,.4)}.btn--go{color:#2ecc71;border-color:#2ecc71;background-color:rgba(46,204,113,0)}.btn--go:hover{background-color:#2ecc71}.btn--go:focus{box-shadow:0 0 0 2px rgba(46,204,113,.4)}.btn--go.active,.btn--go:active{background-color:#2ecc71}.btn--go:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(46,204,113,.4)}.filter-group .btn{position:relative}.filter-group .btn.active:after,.filter-group .btn.active:before{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin-left:-10px;margin-top:-10px;opacity:0;transition:.2s}.filter-group .btn:before{background-color:#2c3e50;border-radius:50%}.filter-group .btn:after{background-size:60%;background-position:50%;background-repeat:no-repeat;background-image:url(../img/check.svg)}.filter-group .btn.active:after,.filter-group .btn.active:before{opacity:1}.demo-list .figure-wrap{position:relative;z-index:1}.demo-list .figure-wrap,.demo-list .figure-wrap img{-webkit-transform:translateZ(0);transform:translateZ(0);transition:.1s ease}.demo-list:hover .figure-wrap{-webkit-transform:scaleX(1);transform:scaleX(1)}.demo-list:hover .figure-wrap img{-webkit-filter:grayscale(1);filter:grayscale(1)}.demo-list:hover .figure-wrap:hover{z-index:2;-webkit-transform:scale3d(1.05,1.05,1);transform:scale3d(1.05,1.05,1)}.demo-list:hover .figure-wrap:hover img{-webkit-filter:none;filter:none}.demo-list .figure-wrap:nth-child(4n+1){margin-left:0}.demo-list .figure-wrap>a{display:block}.demo-list .figure-wrap figcaption{margin-top:.5em;margin-bottom:1em}.demo-link-container:before{content:"➜";color:#2ecc71;margin-right:5px}span.demo-link-container:before{margin-left:5px}@media screen and (max-width:47.9375em){.demo-list+.demo-list{margin-top:1em}.figure-wrap:nth-child(odd){margin-left:0}.figure-wrap:nth-child(n+3){margin-top:1em}}.site-nav{padding:10px 0;border-bottom:1px solid #e1e5e6;background:#ecf0f1}.site-nav__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.site-nav__logo{font-size:20px}.site-nav__logo,.site-nav__logo:visited{color:#34495e}.site-nav__logo:hover,.site-nav__logo:visited:hover{text-decoration:none}.site-nav__links,.site-nav__logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.site-nav__logo svg{display:block;width:24px;height:24px;margin-right:4px}.site-nav__logo rect{transition:.18s cubic-bezier(.4,0,.2,1)}.site-nav__link{position:relative;z-index:3}.site-nav__link:not(:last-child){margin-right:8px}.site-nav__link--dropdown{position:relative}.site-nav__dropdown{position:absolute;z-index:2;top:40px;right:0;opacity:0;visibility:hidden;max-height:100vh;transition:.3s cubic-bezier(.165,.84,.44,1);background-color:#fff;-webkit-transform:translateY(10px);transform:translateY(10px)}.site-nav__dropdown:before{content:"";position:absolute;top:-8px;right:32px;display:block;border-bottom:8px solid #fff;border-left:9px solid transparent;border-right:9px solid transparent}.site-nav__dropdown li+li{margin-top:8px}.site-nav__dropdown a{display:block;color:#5d6d77}.site-nav__dropdown a:hover{background-color:#ecf0f1;text-decoration:none;color:#5d6d77}.site-nav__dropdown figure{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.site-nav__dropdown picture{-ms-flex-negative:0;flex-shrink:0;width:100px;height:75px}.site-nav__dropdown figcaption{padding-left:8px;padding-right:8px}.site-nav__link-toggle{padding:5px;border:1px solid transparent;background:none;border-radius:3px;cursor:pointer}.site-nav__link-toggle:after{content:"";display:inline-block;vertical-align:middle;margin-top:-1px;margin-left:2px;border-top:6px solid #34495e;border-left:5px solid transparent;border-right:5px solid transparent;transition:-webkit-transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1),-webkit-transform .18s cubic-bezier(.4,0,.2,1)}.site-nav__link--dropdown-active .site-nav__link-toggle{border-color:#bdc3c7}.site-nav__link--dropdown-active .site-nav__link-toggle:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.site-nav__link--dropdown-active .site-nav__dropdown{visibility:visible;opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}@media (-moz-touch-enabled:0),(pointer:fine){.site-nav__logo:hover rect:first-of-type{-webkit-transform:translate(20px,10px);transform:translate(20px,10px);transition-delay:0ms}.site-nav__logo:hover rect:nth-of-type(2){-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:10ms}.site-nav__logo:hover rect:nth-of-type(3){-webkit-transform:translate(-20px,6px);transform:translate(-20px,6px);transition-delay:20ms}.site-nav__logo:hover rect:nth-of-type(4){-webkit-transform:translate(10px,-10px);transform:translate(10px,-10px);transition-delay:30ms}.site-nav__logo:hover rect:nth-of-type(5){-webkit-transform:translate(-10px,10px);transform:translate(-10px,10px);transition-delay:40ms}.site-nav__logo:hover rect:nth-of-type(6){-webkit-transform:translate(-20px,-14px);transform:translate(-20px,-14px);transition-delay:50ms}.site-nav__logo:hover rect:nth-of-type(7){-webkit-transform:translateY(-20px);transform:translateY(-20px);transition-delay:60ms}.site-nav__link-toggle:hover{border-color:#34495e}}@media screen and (max-width:767px){body.site-nav--open{padding-top:51px}body.site-nav--open .site-nav{position:fixed;z-index:4;top:0;left:0;width:100%}.site-nav__dropdown{position:fixed;left:0;right:0;top:51px;width:100vw;padding:8px calc(3.5vw + 8px);overflow:auto;-webkit-overflow-scrolling:touch}}@media screen and (min-width:768px){.site-nav{padding:16px 0}.site-nav__logo{font-size:24px}.site-nav__logo svg{width:32px;height:32px}.site-nav__link:not(:last-child){margin-right:16px}.site-nav__dropdown{max-height:none!important;right:-100px;padding:16px;box-shadow:0 0 10px rgba(0,0,0,.12)}.site-nav__dropdown:before{right:132px}.site-nav__dropdown ul{-webkit-column-count:2;column-count:2;-webkit-column-gap:16px;column-gap:16px}.site-nav__dropdown li{-webkit-column-break-inside:avoid;break-inside:avoid}.site-nav__dropdown figcaption{white-space:nowrap}@supports ((-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,0.12))) or (filter:drop-shadow(0 0 5px rgba(0,0,0,0.12)))){.site-nav__dropdown{box-shadow:none;-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,.12));filter:drop-shadow(0 0 5px rgba(0,0,0,.12))}}.site-nav__link-img{width:24px;height:24px}}@media screen and (min-width:1024px){.site-nav__dropdown{right:0}.site-nav__dropdown:before{right:32px}}.site-footer{margin-top:2em;padding:1em 0;background-color:#34495e}.has-code-block .code-block pre{margin-bottom:0}.has-code-block+.site-footer{margin-top:0}.site-footer__credit{margin:0;text-align:right}.light-text-dark-box a,.light-text-dark-box p{color:#ecf0f1}.light-text-dark-box a:hover{color:#fff}.filter__label{color:#bdc3c7;margin:0 0 3px}.filter__search{margin:5px 0}.sort-options{margin-top:10px}.compound-filter-options{margin-top:20px;margin-bottom:40px}.filter-group--compound button{width:40px;height:40px;padding:0;background-color:currentColor}.filter-group--compound label{cursor:pointer}.filter-group--compound .ib+.ib{margin-left:8px}.filter-group__label--compound{margin:0 0 5px}.shape-shuffle-container{position:relative;overflow:hidden}.shape{position:relative;margin-left:0;margin-top:10px}.shape .shape__space{width:100%;height:100%;background-color:#000;border:0 solid transparent}.shape--blue .shape__space{background-color:#3498db;border-bottom-color:#3498db}.shape--red .shape__space{background-color:#e74c3c;border-bottom-color:#e74c3c}.shape--orange .shape__space{background-color:#f39c12;border-bottom-color:#f39c12}.shape--green .shape__space{background-color:#2ecc71;border-bottom-color:#2ecc71}.shape--circle .shape__space{border-radius:50%}.shape--diamond .shape__space{-webkit-transform:rotate(45deg) scale(.70711);transform:rotate(45deg) scale(.70711)}.shape--triangle .shape__space{padding-top:9px;height:0;width:0;border-width:0 66px 114px;background-color:transparent;margin:auto}@media (min-width:425px){.shape--triangle .shape__space{padding-top:12px;height:0;width:0;border-width:0 90px 156px}}@media (min-width:600px){.shape--triangle .shape__space{padding-top:17.5px;height:0;width:0;border-width:0 131px 227px}}@media (min-width:768px){.shape--triangle .shape__space{padding-top:10px;height:0;width:0;border-width:0 74px 128px}}@media (min-width:1024px){.shape--triangle .shape__space{padding-top:13.5px;height:0;width:0;border-width:0 102px 177px}}@media (min-width:1200px){.shape--triangle .shape__space{padding-top:18px;height:0;width:0;border-width:0 135px 234px}}@media (min-width:1392px){.shape--triangle .shape__space{padding-top:19px;height:0;width:0;border-width:0 142px 246px}}.search-section{margin-top:1em;margin-bottom:1em}.question{float:none;margin:2em 0;overflow:hidden;transition:.2s ease-out}.question--collapsed{height:0!important;margin:0;border-width:0}.question--collapsed+.question{margin-top:0}.question--unanswered{padding-top:1.25em;border-top:2px solid #2ecc71}.question__title{margin-top:0}.question__answer{padding-bottom:1px;margin-bottom:0} \ No newline at end of file +@charset "UTF-8";*,:after,:before{box-sizing:border-box}main{overflow:hidden}pre.max-height{max-height:30em}img,picture{display:block}img{max-width:100%;height:auto}figure,ul ul{margin:0}ul ul{padding-left:1.25em;list-style-type:circle}li{line-height:1.4}li+li{margin-top:4px}nav>a{display:block;margin:5px 0}#demos{margin-top:1em}body{font-family:Open Sans,Helvetica Neue,Helvetica,sans-serif;color:#5d6d77}a{text-decoration:none}a,a:visited{color:#3498db}a:hover{text-decoration:underline}a:active{color:#2ecc71}h1,h2,h3,h4,h5,h6{color:#34495e;font-weight:400}h1{font-size:10vw;font-weight:300;line-height:1}h1,h2{margin:3vw 0}h2{position:relative;font-size:7vw}h3{font-size:6vw;margin:2vw 0}h4{font-size:1.25em}p{margin:1em 0;line-height:1.4}.intro-text{margin:.7em 0;font-size:1.125em}@media screen and (min-width:768px){h1{margin:.5em 0 .25em;font-size:3.5em}h2{margin:.45em 0;font-size:2.5em}h3{margin:.8em 0 .5em;font-size:1.5em}h1>a,h2>a,h3>a{display:none}h1:hover>a,h2:hover>a,h3:hover>a{position:absolute;display:inline-block;top:0;height:50px;width:50px;background:url(../img/link.svg) no-repeat;overflow:hidden;text-indent:-999em}.intro-text{font-size:1.25em}}.unstyled{list-style-type:none;padding:0;margin:0}code:not([class*=language]){padding:.2em 0;margin:0;font-size:85%;color:#2c3e50;background-color:rgba(27,31,35,.05);border-radius:3px;font-family:Menlo,Consolas,Liberation Mono,Courier,monospace}code:not([class*=language]):after,code:not([class*=language]):before{content:"\00a0";letter-spacing:-.2em}.container{padding-left:3.5%;padding-right:3.5%}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}.row{margin-left:auto;margin-right:auto}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.row .row{margin-left:-8px;margin-right:-8px}.row--centered{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.aspect{position:relative;width:100%;height:0;overflow:hidden;padding-bottom:100%}.aspect--16x9{padding-bottom:56.25%}.aspect--9x16{padding-bottom:177.77778%}.aspect--4x3{padding-bottom:75%}.aspect--3x4{padding-bottom:133.33333%}.aspect--3x2{padding-bottom:66.66667%}.aspect--3x1{padding-bottom:33.33333%}.aspect--2x3{padding-bottom:150%}.aspect--2x1{padding-bottom:50%}.aspect--1x2{padding-bottom:200%}.aspect--1x1{padding-bottom:100%}.aspect--none{height:auto;padding-bottom:0;overflow:visible}.aspect--none>.aspect__inner{position:static}.aspect>div,.aspect__inner{position:absolute;top:0;left:0;right:0;bottom:0}.col-1\@lg,.col-1\@md,.col-1\@sm,.col-1\@xs,.col-2\@lg,.col-2\@md,.col-2\@sm,.col-2\@xs,.col-3\@lg,.col-3\@md,.col-3\@sm,.col-3\@xs,.col-4\@lg,.col-4\@md,.col-4\@sm,.col-4\@xs,.col-5\@lg,.col-5\@md,.col-5\@sm,.col-5\@xs,.col-6\@lg,.col-6\@md,.col-6\@sm,.col-6\@xs,.col-7\@lg,.col-7\@md,.col-7\@sm,.col-7\@xs,.col-8\@lg,.col-8\@md,.col-8\@sm,.col-8\@xs,.col-9\@lg,.col-9\@md,.col-9\@sm,.col-9\@xs,.col-10\@lg,.col-10\@md,.col-10\@sm,.col-10\@xs,.col-11\@lg,.col-11\@md,.col-11\@sm,.col-11\@xs,.col-12\@lg,.col-12\@md,.col-12\@sm,.col-12\@xs{position:relative;box-sizing:border-box;min-height:1px;padding-left:8px;padding-right:8px}.col-1\@xs,.col-2\@xs,.col-3\@xs,.col-4\@xs,.col-5\@xs,.col-6\@xs,.col-7\@xs,.col-8\@xs,.col-9\@xs,.col-10\@xs,.col-11\@xs,.col-12\@xs{float:left}.aspect--16x9\@xs{padding-bottom:56.25%}.aspect--9x16\@xs{padding-bottom:177.77778%}.aspect--4x3\@xs{padding-bottom:75%}.aspect--3x4\@xs{padding-bottom:133.33333%}.aspect--3x2\@xs{padding-bottom:66.66667%}.aspect--3x1\@xs{padding-bottom:33.33333%}.aspect--2x3\@xs{padding-bottom:150%}.aspect--2x1\@xs{padding-bottom:50%}.aspect--1x2\@xs{padding-bottom:200%}.aspect--1x1\@xs{padding-bottom:100%}.aspect--none\@xs{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@xs>.aspect__inner{position:static}.col-1\@xs{width:16.66667%}.col-2\@xs{width:33.33333%}.col-3\@xs{width:50%}.col-4\@xs{width:66.66667%}.col-5\@xs{width:83.33333%}.col-6\@xs{width:100%}.col-pull-0\@xs{right:auto}.col-pull-1\@xs{right:16.66667%}.col-pull-2\@xs{right:33.33333%}.col-pull-3\@xs{right:50%}.col-pull-4\@xs{right:66.66667%}.col-pull-5\@xs{right:83.33333%}.col-pull-6\@xs{right:100%}.col-push-0\@xs{left:auto}.col-push-1\@xs{left:16.66667%}.col-push-2\@xs{left:33.33333%}.col-push-3\@xs{left:50%}.col-push-4\@xs{left:66.66667%}.col-push-5\@xs{left:83.33333%}.col-push-6\@xs{left:100%}.col-offset-0\@xs{margin-left:0}.col-offset-1\@xs{margin-left:16.66667%}.col-offset-2\@xs{margin-left:33.33333%}.col-offset-3\@xs{margin-left:50%}.col-offset-4\@xs{margin-left:66.66667%}.col-offset-5\@xs{margin-left:83.33333%}.col-offset-6\@xs{margin-left:100%}@media screen and (min-width:768px){.col-1\@sm,.col-2\@sm,.col-3\@sm,.col-4\@sm,.col-5\@sm,.col-6\@sm,.col-7\@sm,.col-8\@sm,.col-9\@sm,.col-10\@sm,.col-11\@sm,.col-12\@sm{float:left}.aspect--16x9\@sm{padding-bottom:56.25%}.aspect--9x16\@sm{padding-bottom:177.77778%}.aspect--4x3\@sm{padding-bottom:75%}.aspect--3x4\@sm{padding-bottom:133.33333%}.aspect--3x2\@sm{padding-bottom:66.66667%}.aspect--3x1\@sm{padding-bottom:33.33333%}.aspect--2x3\@sm{padding-bottom:150%}.aspect--2x1\@sm{padding-bottom:50%}.aspect--1x2\@sm{padding-bottom:200%}.aspect--1x1\@sm{padding-bottom:100%}.aspect--none\@sm{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@sm>.aspect__inner{position:static}.col-1\@sm{width:8.33333%}.col-2\@sm{width:16.66667%}.col-3\@sm{width:25%}.col-4\@sm{width:33.33333%}.col-5\@sm{width:41.66667%}.col-6\@sm{width:50%}.col-7\@sm{width:58.33333%}.col-8\@sm{width:66.66667%}.col-9\@sm{width:75%}.col-10\@sm{width:83.33333%}.col-11\@sm{width:91.66667%}.col-12\@sm{width:100%}.col-pull-0\@sm{right:auto}.col-pull-1\@sm{right:8.33333%}.col-pull-2\@sm{right:16.66667%}.col-pull-3\@sm{right:25%}.col-pull-4\@sm{right:33.33333%}.col-pull-5\@sm{right:41.66667%}.col-pull-6\@sm{right:50%}.col-pull-7\@sm{right:58.33333%}.col-pull-8\@sm{right:66.66667%}.col-pull-9\@sm{right:75%}.col-pull-10\@sm{right:83.33333%}.col-pull-11\@sm{right:91.66667%}.col-pull-12\@sm{right:100%}.col-push-0\@sm{left:auto}.col-push-1\@sm{left:8.33333%}.col-push-2\@sm{left:16.66667%}.col-push-3\@sm{left:25%}.col-push-4\@sm{left:33.33333%}.col-push-5\@sm{left:41.66667%}.col-push-6\@sm{left:50%}.col-push-7\@sm{left:58.33333%}.col-push-8\@sm{left:66.66667%}.col-push-9\@sm{left:75%}.col-push-10\@sm{left:83.33333%}.col-push-11\@sm{left:91.66667%}.col-push-12\@sm{left:100%}.col-offset-0\@sm{margin-left:0}.col-offset-1\@sm{margin-left:8.33333%}.col-offset-2\@sm{margin-left:16.66667%}.col-offset-3\@sm{margin-left:25%}.col-offset-4\@sm{margin-left:33.33333%}.col-offset-5\@sm{margin-left:41.66667%}.col-offset-6\@sm{margin-left:50%}.col-offset-7\@sm{margin-left:58.33333%}.col-offset-8\@sm{margin-left:66.66667%}.col-offset-9\@sm{margin-left:75%}.col-offset-10\@sm{margin-left:83.33333%}.col-offset-11\@sm{margin-left:91.66667%}.col-offset-12\@sm{margin-left:100%}.container{padding-left:7%;padding-right:7%}.row{max-width:1200px}}@media screen and (min-width:1024px){.col-1\@md,.col-2\@md,.col-3\@md,.col-4\@md,.col-5\@md,.col-6\@md,.col-7\@md,.col-8\@md,.col-9\@md,.col-10\@md,.col-11\@md,.col-12\@md{float:left}.aspect--16x9\@md{padding-bottom:56.25%}.aspect--9x16\@md{padding-bottom:177.77778%}.aspect--4x3\@md{padding-bottom:75%}.aspect--3x4\@md{padding-bottom:133.33333%}.aspect--3x2\@md{padding-bottom:66.66667%}.aspect--3x1\@md{padding-bottom:33.33333%}.aspect--2x3\@md{padding-bottom:150%}.aspect--2x1\@md{padding-bottom:50%}.aspect--1x2\@md{padding-bottom:200%}.aspect--1x1\@md{padding-bottom:100%}.aspect--none\@md{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@md>.aspect__inner{position:static}.col-1\@md{width:8.33333%}.col-2\@md{width:16.66667%}.col-3\@md{width:25%}.col-4\@md{width:33.33333%}.col-5\@md{width:41.66667%}.col-6\@md{width:50%}.col-7\@md{width:58.33333%}.col-8\@md{width:66.66667%}.col-9\@md{width:75%}.col-10\@md{width:83.33333%}.col-11\@md{width:91.66667%}.col-12\@md{width:100%}.col-pull-0\@md{right:auto}.col-pull-1\@md{right:8.33333%}.col-pull-2\@md{right:16.66667%}.col-pull-3\@md{right:25%}.col-pull-4\@md{right:33.33333%}.col-pull-5\@md{right:41.66667%}.col-pull-6\@md{right:50%}.col-pull-7\@md{right:58.33333%}.col-pull-8\@md{right:66.66667%}.col-pull-9\@md{right:75%}.col-pull-10\@md{right:83.33333%}.col-pull-11\@md{right:91.66667%}.col-pull-12\@md{right:100%}.col-push-0\@md{left:auto}.col-push-1\@md{left:8.33333%}.col-push-2\@md{left:16.66667%}.col-push-3\@md{left:25%}.col-push-4\@md{left:33.33333%}.col-push-5\@md{left:41.66667%}.col-push-6\@md{left:50%}.col-push-7\@md{left:58.33333%}.col-push-8\@md{left:66.66667%}.col-push-9\@md{left:75%}.col-push-10\@md{left:83.33333%}.col-push-11\@md{left:91.66667%}.col-push-12\@md{left:100%}.col-offset-0\@md{margin-left:0}.col-offset-1\@md{margin-left:8.33333%}.col-offset-2\@md{margin-left:16.66667%}.col-offset-3\@md{margin-left:25%}.col-offset-4\@md{margin-left:33.33333%}.col-offset-5\@md{margin-left:41.66667%}.col-offset-6\@md{margin-left:50%}.col-offset-7\@md{margin-left:58.33333%}.col-offset-8\@md{margin-left:66.66667%}.col-offset-9\@md{margin-left:75%}.col-offset-10\@md{margin-left:83.33333%}.col-offset-11\@md{margin-left:91.66667%}.col-offset-12\@md{margin-left:100%}}.code-block{position:relative;overflow:visible;margin:.5em calc(-3.5vw - 8px)}.code-block pre{position:relative;z-index:1;min-height:56px;padding:1em calc(3.5vw + 8px);margin:0}@media screen and (min-width:768px){.code-block{margin-left:calc(-7vw - 8px);margin-right:calc(-7vw - 8px)}.code-block pre{position:relative;z-index:1;padding-left:calc(7vw + 8px);padding-right:calc(7vw + 8px)}}@media (min-width:1395px){.code-block{margin-left:calc(-50vw + 592px);margin-right:calc(-50vw + 592px)}.code-block pre{padding-left:calc(50vw - 592px);padding-right:calc(50vw - 592px)}}.textfield{-webkit-appearance:searchfield;box-sizing:border-box;width:100%;border:2px solid #95a5a6;border-radius:4px;padding:.5em;font-size:1rem;color:#34495e;transition:.15s}.textfield::-webkit-input-placeholder{color:#95a5a6;transition:.15s}.textfield:-ms-input-placeholder{color:#95a5a6;transition:.15s}.textfield::placeholder{color:#95a5a6;transition:.15s}.textfield:hover{outline-width:0;color:#5d6d77;border-color:#5d6d77}.textfield:hover::-webkit-input-placeholder{color:#5d6d77}.textfield:hover:-ms-input-placeholder{color:#5d6d77}.textfield:hover::placeholder{color:#5d6d77}.textfield:focus{outline-width:0;border-color:#34495e}.textfield:focus::-webkit-input-placeholder{color:#34495e}.textfield:focus:-ms-input-placeholder{color:#34495e}.textfield:focus::placeholder{color:#34495e}.textfield--large{font-size:1.125em}.text-center{text-align:center}.ib{display:inline-block}@media screen and (max-width:767px){.hidden\@xs{display:none}}.hidden{display:none!important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.clearfix,.clearfix:after{content:" ";display:table;clear:both}.pull-left{float:left}.pull-right{float:right}.full-width{width:100%}.full-height{height:100%}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.table-center-wrap{display:table;table-layout:fixed}.table-center{display:table-cell;vertical-align:middle}.btn-group:after,.btn-group:before{content:" ";display:table}.btn-group:after{clear:both}.btn-group .btn{float:left;border-radius:0}.btn-group .btn:first-child{border-radius:3px 0 0 3px}.btn-group .btn:not(:first-child){margin-left:-1px}.btn-group .btn:last-child{border-radius:0 3px 3px 0}.btn-group label.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn{display:inline-block;padding:.75em .8em;text-align:center;border-radius:3px;border:1px solid #34495e;color:#34495e;font-size:1rem;background-color:rgba(52,73,94,0);transition:.2s ease-out;cursor:pointer;-webkit-appearance:none}.btn:hover{color:#fff;text-decoration:none;background-color:#34495e}.btn:focus{outline-width:0;box-shadow:0 0 0 2px rgba(52,73,94,.4)}.btn.active,.btn:active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3);color:#fff;background-color:#34495e}.btn:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,73,94,.4)}.btn--warning{color:#e67e22;border-color:#e67e22;background-color:rgba(230,126,34,0)}.btn--warning:hover{background-color:#e67e22}.btn--warning:focus{box-shadow:0 0 0 2px rgba(230,126,34,.4)}.btn--warning.active,.btn--warning:active{background-color:#e67e22}.btn--warning:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(230,126,34,.4)}.btn--primary{color:#3498db;border-color:#3498db;background-color:rgba(52,152,219,0)}.btn--primary:hover{background-color:#3498db}.btn--primary:focus{box-shadow:0 0 0 2px rgba(52,152,219,.4)}.btn--primary.active,.btn--primary:active{background-color:#3498db}.btn--primary:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,152,219,.4)}.btn--danger{color:#e74c3c;border-color:#e74c3c;background-color:rgba(231,76,60,0)}.btn--danger:hover{background-color:#e74c3c}.btn--danger:focus{box-shadow:0 0 0 2px rgba(231,76,60,.4)}.btn--danger.active,.btn--danger:active{background-color:#e74c3c}.btn--danger:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(231,76,60,.4)}.btn--go{color:#2ecc71;border-color:#2ecc71;background-color:rgba(46,204,113,0)}.btn--go:hover{background-color:#2ecc71}.btn--go:focus{box-shadow:0 0 0 2px rgba(46,204,113,.4)}.btn--go.active,.btn--go:active{background-color:#2ecc71}.btn--go:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(46,204,113,.4)}.filter-group .btn{position:relative}.filter-group .btn.active:after,.filter-group .btn.active:before{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin-left:-10px;margin-top:-10px;opacity:0;transition:.2s}.filter-group .btn:before{background-color:#2c3e50;border-radius:50%}.filter-group .btn:after{background-size:60%;background-position:50%;background-repeat:no-repeat;background-image:url(../img/check.svg)}.filter-group .btn.active:after,.filter-group .btn.active:before{opacity:1}.demo-list .figure-wrap{position:relative;z-index:1}.demo-list .figure-wrap,.demo-list .figure-wrap img{-webkit-transform:translateZ(0);transform:translateZ(0);transition:.1s ease}.demo-list:hover .figure-wrap{-webkit-transform:scaleX(1);transform:scaleX(1)}.demo-list:hover .figure-wrap img{-webkit-filter:grayscale(1);filter:grayscale(1)}.demo-list:hover .figure-wrap:hover{z-index:2;-webkit-transform:scale3d(1.05,1.05,1);transform:scale3d(1.05,1.05,1)}.demo-list:hover .figure-wrap:hover img{-webkit-filter:none;filter:none}.demo-list .figure-wrap:nth-child(4n+1){margin-left:0}.demo-list .figure-wrap>a{display:block}.demo-list .figure-wrap figcaption{height:2em;margin-top:.5em;margin-bottom:1em}.demo-link-container:before{content:"➜";color:#2ecc71;margin-right:5px}span.demo-link-container:before{margin-left:5px}@media screen and (max-width:47.9375em){.demo-list+.demo-list{margin-top:1em}.figure-wrap:nth-child(odd){margin-left:0}.figure-wrap:nth-child(n+3){margin-top:1em}}.site-nav{padding:10px 0;border-bottom:1px solid #e1e5e6;margin-bottom:28px;background:#ecf0f1}.site-nav__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.site-nav__logo{font-size:20px}.site-nav__logo,.site-nav__logo:visited{color:#34495e}.site-nav__logo:hover,.site-nav__logo:visited:hover{text-decoration:none}.site-nav__links,.site-nav__logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.site-nav__logo svg{display:block;width:24px;height:24px;margin-right:4px}.site-nav__logo rect{transition:.18s cubic-bezier(.4,0,.2,1)}.site-nav__link{position:relative;z-index:3}.site-nav__link:not(:last-child){margin-right:8px}.site-nav__link--dropdown{position:relative}.site-nav__dropdown{position:absolute;z-index:2;top:40px;right:0;opacity:0;visibility:hidden;max-height:100vh;transition:.3s cubic-bezier(.165,.84,.44,1);background-color:#fff;-webkit-transform:translateY(10px);transform:translateY(10px)}.site-nav__dropdown:before{content:"";position:absolute;top:-8px;right:32px;display:block;border-bottom:8px solid #fff;border-left:9px solid transparent;border-right:9px solid transparent}.site-nav__dropdown li+li{margin-top:8px}.site-nav__dropdown a{display:block;color:#5d6d77}.site-nav__dropdown a:hover{background-color:#ecf0f1;text-decoration:none;color:#5d6d77}.site-nav__dropdown figure{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.site-nav__dropdown picture{-ms-flex-negative:0;flex-shrink:0;width:100px;height:75px}.site-nav__dropdown figcaption{padding-left:8px;padding-right:8px}.site-nav__link-toggle{padding:5px;border:1px solid transparent;background:none;border-radius:3px;cursor:pointer}.site-nav__link-toggle:after{content:"";display:inline-block;vertical-align:middle;margin-top:-1px;margin-left:2px;border-top:6px solid #34495e;border-left:5px solid transparent;border-right:5px solid transparent;transition:-webkit-transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1),-webkit-transform .18s cubic-bezier(.4,0,.2,1)}.site-nav__link--dropdown-active .site-nav__link-toggle{border-color:#bdc3c7}.site-nav__link--dropdown-active .site-nav__link-toggle:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.site-nav__link--dropdown-active .site-nav__dropdown{visibility:visible;opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}@media (-moz-touch-enabled:0),(pointer:fine){.site-nav__logo:hover rect:first-of-type{-webkit-transform:translate(20px,10px);transform:translate(20px,10px);transition-delay:0ms}.site-nav__logo:hover rect:nth-of-type(2){-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:10ms}.site-nav__logo:hover rect:nth-of-type(3){-webkit-transform:translate(-20px,6px);transform:translate(-20px,6px);transition-delay:20ms}.site-nav__logo:hover rect:nth-of-type(4){-webkit-transform:translate(10px,-10px);transform:translate(10px,-10px);transition-delay:30ms}.site-nav__logo:hover rect:nth-of-type(5){-webkit-transform:translate(-10px,10px);transform:translate(-10px,10px);transition-delay:40ms}.site-nav__logo:hover rect:nth-of-type(6){-webkit-transform:translate(-20px,-14px);transform:translate(-20px,-14px);transition-delay:50ms}.site-nav__logo:hover rect:nth-of-type(7){-webkit-transform:translateY(-20px);transform:translateY(-20px);transition-delay:60ms}.site-nav__link-toggle:hover{border-color:#34495e}}@media screen and (max-width:767px){body.site-nav--open{padding-top:51px}body.site-nav--open .site-nav{position:fixed;z-index:4;top:0;left:0;width:100%}.site-nav__dropdown{position:fixed;left:0;right:0;top:51px;width:100vw;padding:8px calc(3.5vw + 8px);overflow:auto;-webkit-overflow-scrolling:touch}}@media screen and (min-width:768px){.site-nav{padding:16px 0}.site-nav__logo{font-size:24px}.site-nav__logo svg{width:32px;height:32px}.site-nav__link:not(:last-child){margin-right:16px}.site-nav__dropdown{max-height:none!important;right:-100px;padding:16px;box-shadow:0 0 10px rgba(0,0,0,.12)}.site-nav__dropdown:before{right:132px}.site-nav__dropdown ul{-webkit-column-count:2;column-count:2;-webkit-column-gap:16px;column-gap:16px}.site-nav__dropdown li{-webkit-column-break-inside:avoid;break-inside:avoid}.site-nav__dropdown figcaption{white-space:nowrap}@supports ((-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,0.12))) or (filter:drop-shadow(0 0 5px rgba(0,0,0,0.12)))){.site-nav__dropdown{box-shadow:none;-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,.12));filter:drop-shadow(0 0 5px rgba(0,0,0,.12))}}.site-nav__link-img{width:24px;height:24px}}@media screen and (min-width:1024px){.site-nav__dropdown{right:0}.site-nav__dropdown:before{right:32px}}.site-footer{margin-top:2em;padding:1em 0;background-color:#34495e}.has-code-block .code-block pre{margin-bottom:0}.has-code-block+.site-footer{margin-top:0}.site-footer__credit{margin:0;text-align:right}.light-text-dark-box a,.light-text-dark-box p{color:#ecf0f1}.light-text-dark-box a:hover{color:#fff}.filter-label{display:block;margin-top:0;color:#95a5a6}.filter-label,.filters-group{margin-bottom:4px}.compound-filter-options{margin-top:20px;margin-bottom:40px}.filter-group--compound button{width:40px;height:40px;padding:0;background-color:currentColor}.filter-group--compound label{cursor:pointer}.filter-group--compound .ib+.ib{margin-left:8px}.shape-shuffle-container{position:relative;overflow:hidden}.shape{position:relative;margin-left:0;margin-top:10px}.shape .shape__space{width:100%;height:100%;background-color:#000;border:0 solid transparent}.shape--blue .shape__space{background-color:#3498db;border-bottom-color:#3498db}.shape--red .shape__space{background-color:#e74c3c;border-bottom-color:#e74c3c}.shape--orange .shape__space{background-color:#f39c12;border-bottom-color:#f39c12}.shape--green .shape__space{background-color:#2ecc71;border-bottom-color:#2ecc71}.shape--circle .shape__space{border-radius:50%}.shape--diamond .shape__space{-webkit-transform:rotate(45deg) scale(.70711);transform:rotate(45deg) scale(.70711)}.shape--triangle .shape__space{padding-top:9px;height:0;width:0;border-width:0 66px 114px;background-color:transparent;margin:auto}@media (min-width:425px){.shape--triangle .shape__space{padding-top:12px;height:0;width:0;border-width:0 90px 156px}}@media (min-width:600px){.shape--triangle .shape__space{padding-top:17.5px;height:0;width:0;border-width:0 131px 227px}}@media (min-width:768px){.shape--triangle .shape__space{padding-top:10px;height:0;width:0;border-width:0 74px 128px}}@media (min-width:1024px){.shape--triangle .shape__space{padding-top:13.5px;height:0;width:0;border-width:0 102px 177px}}@media (min-width:1200px){.shape--triangle .shape__space{padding-top:18px;height:0;width:0;border-width:0 135px 234px}}@media (min-width:1392px){.shape--triangle .shape__space{padding-top:19px;height:0;width:0;border-width:0 142px 246px}}.search-section{margin-top:1em;margin-bottom:1em}.question{float:none;margin:2em 0;overflow:hidden;transition:.2s ease-out}.question--collapsed{height:0!important;margin:0;border-width:0}.question--collapsed+.question{margin-top:0}.question--unanswered{padding-top:1.25em;border-top:2px solid #2ecc71}.question__title{margin-top:0}.question__answer{padding-bottom:1px;margin-bottom:0} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 77db1ba..44b9ea7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -23,31 +23,40 @@ prism: true
-
+
-
- + +
+ +
+
-
-

Filter

-
- - - - + +
+

Filter

+
+ + + +
-
-
-

Sort

- + +
+

Sort

+
+ + +
diff --git a/docs/js/demos/adding-removing.js b/docs/js/demos/adding-removing.js index 7ecd442..6c26752 100644 --- a/docs/js/demos/adding-removing.js +++ b/docs/js/demos/adding-removing.js @@ -175,8 +175,7 @@ Demo.prototype.onRandomize = function () { Demo.prototype.onSortChange = function (evt) { // Add and remove `active` class from buttons. - var wrapper = evt.currentTarget; - var buttons = Array.from(wrapper.querySelector('.btn-group').children); + var buttons = Array.from(evt.currentTarget.children); buttons.forEach(function (button) { if (button.querySelector('input').value === evt.target.value) { button.classList.add('active'); diff --git a/docs/js/demos/homepage.js b/docs/js/demos/homepage.js index bc8a603..85fbfda 100644 --- a/docs/js/demos/homepage.js +++ b/docs/js/demos/homepage.js @@ -105,16 +105,28 @@ Demo.prototype._removeActiveClassFromChildren = function (parent) { }; Demo.prototype.addSorting = function () { - var menu = document.querySelector('.sort-options'); + var buttonGroup = document.querySelector('.sort-options'); - if (!menu) { + if (!buttonGroup) { return; } - menu.addEventListener('change', this._handleSortChange.bind(this)); + buttonGroup.addEventListener('change', this._handleSortChange.bind(this)); }; Demo.prototype._handleSortChange = function (evt) { + // Add and remove `active` class from buttons. + var wrapper = evt.currentTarget; + var buttons = Array.from(evt.currentTarget.children); + buttons.forEach(function (button) { + if (button.querySelector('input').value === evt.target.value) { + button.classList.add('active'); + } else { + button.classList.remove('active'); + } + }); + + // Create the sort options to give to Shuffle. var value = evt.target.value; var options = {};