Import assets from Xnew-ui branch

.gitignore

@@ -169,3 +169,64 @@ crashlytics-build.properties
 ### php-cs-fixer ###
 .php_cs.cache
 cs_fixer_tmp*
+
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env

package.json

+{
+  "name": "yarn",
+  "version": "1.0.0",
+  "description": "yarn pkgmanager",
+  "main": "index.js",
+  "repository": "https://github.com/simplesamlphp/simplesamlphp",
+  "author": "olimpiam",
+  "license": "MIT",
+  "dependencies": {
+    "clipboard": "^1.7.1",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.2.1",
+    "jquery-ui": "^1.10.4",
+    "purecss": "^1.0.0",
+    "selectize": "^0.12.4"
+  }
+}

www/assets/css/lib/font-awesome.min.css

+../../../../node_modules/font-awesome/css/font-awesome.min.css
\ No newline at end of file

www/assets/css/lib/font-awesome/css

+../../../../../node_modules/font-awesome/css
\ No newline at end of file

www/assets/css/lib/font-awesome/fonts

+../../../../../node_modules/font-awesome/fonts
\ No newline at end of file

www/assets/css/lib/pure-min.css

+../../../../node_modules/purecss/build/pure-min.css
\ No newline at end of file

www/assets/css/lib/selectize.default.css

+../../../../node_modules/selectize/dist/css/selectize.default.css
\ No newline at end of file

www/assets/css/src/default-rtl.css

+/* these styles are in the head of this page because this is a unique page */
+
+/* THE BIG GUYS */
+html {
+	direction: rtl;
+}
+#header{
+	background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
+}
+#footer{
+	background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
+}
+/* LISTS */
+ul {
+	margin: .3em 2em 1.5em 0;
+}
+
+li {
+	margin-right: 2em;
+}
+
+/* TYPOGRAPHY */
+dl dd {
+	margin-right: 3em;
+}
+
+.efieldlist {
+	border-right: 1px solid #e6e6e6;
+}
+
+div.caution {
+	padding: .2em 60px .2em .2em;
+	background-position: right;
+}
+
+th.rowtitle {
+	text-align: right;
+}
+.enablebox table {
+	margin-right: 1em;
+}
+.enablebox.mini table {
+	float: left;
+}
+.enablebox tr td {
+	padding: .5px .5em 1px 1em;
+}
+
+/* Attribute presentation in example page */
+table.attributes td.attrname {
+	text-align: left;
+}
+
+fieldset.fancyfieldset {
+	margin: 2em 0px 1em 1em;
+}
+fieldset.fancyfieldset legend {
+	margin-right: 2em;
+}
+
+
+/* Reverse Float Left <-> Right */
+.right {
+	float: left;
+}
+.left {
+	float: right;
+}
+.v-center-right{
+	right: 0;
+}
+.logo-footer-right{
+	left:0;
+	right: auto;
+}
+.message-box {
+	border-left-style: initial;
+	border-left-width: 0;
+	border-left-color: none;
+	border-right-style: solid;
+	border-right-width: 0.3125rem;
+}
+.message-box.error{
+	border-right-color: #cc4b37;
+}
+.message-box.success{
+	border-right-color: #46cc48;
+}
+.code-box-title .clipboard-btn {
+	right: auto;
+	left: 0;
+	margin-left: 4px;
+	margin-right: auto;
+}
+
+/*selectize elements*/
+div .item{
+	float: right;
+}
+.selectize-input{
+	padding-right:8px;
+}
+.selectize-input:after{
+	transform: translate(-8px, 0);
+}
+
+/*purecss elements*/
+.pure-form-aligned .pure-control-group label {
+	text-align: left;
+	margin: 0 0 0 1em;
+}
+@media only screen and (max-width : 480px) {
+	.pure-form-aligned .pure-control-group label {
+		text-align: right;
+	}
+}
+.pure-form-aligned .pure-controls {
+	margin: 1.5em 11em 0 0;
+}
+.pure-form .pure-help-inline,
+.pure-form-message-inline {
+	padding-left: 0;
+	padding-right: 0.3em;
+}
+.pure-select{
+	float: left;
+}
+.pure-table-attributes ul{
+	margin:0;
+}
+.pure-table-attributes li{
+	margin:0;
+}
+
+/* language side menu on medium and small screens*/
+#layout.active #menu {
+	right: initial;
+	left: 11em;
+}
+#layout.active .menu-link {
+	right: initial;
+	left: 11em;
+}
+#menu {
+	right: initial;
+	margin-right: 0;
+	margin-left: -11em; /* "#menu" width */
+	left: 0;
+}
+#menu a {
+	padding: 0.6em 0.6em 0.6em 0em;
+}
+
+.menu-link {
+	right: initial;
+	left: 0; /* "#menu width" */
+}
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+@media screen and (max-width: 0em), screen and (min-width: 40em) {
+	#layout.active {
+		right: auto;
+		left: 11em;
+	}
+	#menuLink.menu-link.active {
+		right: auto;
+		left: 13em;
+	}
+	#foot.active {
+		margin-right: auto;
+		margin-left: 11em;
+	}
+}

www/assets/css/src/default.css

+/* ***********************************************************
+GENERAL
+************************************************************ */
+* {
+    margin:0;
+    padding:0;
+}
+html, body{
+    height: 100%;
+}
+body {
+    font-family: sans-serif;
+    line-height: 1.5;
+    min-height: 100%;
+}
+.wrap{
+    width: 80%;
+    max-width: 1100px;
+    margin: auto;
+    position:relative;
+}
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+.center {
+    padding: auto;
+    text-align: center;
+}
+.v-center { /*specify a height to center vertically*/
+    display: table-cell;
+    vertical-align: middle;
+}
+h1{
+    margin: 0.2em 0;
+    font-size: 3em;
+    font-weight: 300;
+}
+h2{
+    margin: 50px 0 20px 0;
+    font-weight: 300;
+    color: #1c1c1c;
+}
+h3{
+    font-weight: 300;
+    color: #2e3436;
+    padding: 0;
+    margin-top: 0;
+}
+p{
+    padding: 0.5em;
+    margin-bottom: 1em;
+}
+a{
+   color: midnightblue;
+}
+a:hover{
+    color: rgba(25,25,112,0.5);
+}
+.dark-bg a{
+    color: #e2e2e2;
+}
+.dark-bg a:hover{
+    color: rgba(0,0,0,0.75);
+}
+.overflow {
+    overflow: hidden;
+}
+ul{
+    padding-left: 1.5em;
+}
+/* ***********************************************************
+BUTTONS
+************************************************************ */
+.code-box-title .clipboard-btn {
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    position: absolute;
+    right:0;
+    height: inherit;
+    margin-top: -2em;
+    margin-right: 4px;
+}
+.pure-button-red,
+a.pure-button-red {
+    background-color: rgb(219, 1, 0);
+    color: #fff;
+}
+
+.pure-button.hollow {
+    background-color: #FFFFFF;
+    color: #6f6f6f;
+    border: solid 1px #E6E6E6;
+}
+.pure-button.hollow:hover {
+    background-image: none;
+}
+.pure-button.hollow[disabled]{
+    cursor: auto;
+    opacity: initial;
+    pointer-events: auto;
+    -webkit-user-drag: auto;
+    -webkit-user-select: auto;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+}
+.pure-button-group .pure-button:first-child,
+.pure-button-group .pure-button:last-child {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+
+.pure-button-group.two-elements .pure-button {
+    margin: 0;
+    line-height: unset;
+    border: 1px solid #E6E6E6;
+}
+.pure-button-group.two-elements .pure-button:first-child {
+    border-right: none;
+}
+.pure-button-group.two-elements .pure-button:last-child {
+    border-right: 1px solid #E6E6E6;
+}
+.pure-button-group .pure-button.show-files{
+    max-width: 450px;
+    overflow: hidden;
+}
+
+/* ***********************************************************
+SLIDING SIDE-MENU FOR SMALL SCREENS
+************************************************************ */
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout,
+#menu,
+#foot,
+.menu-link {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout.active #menu {
+    right: 11em;
+    width: 11em;
+}
+#layout.active .menu-link {
+    right: 11em;
+}
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+#menu {
+    margin-right: -11em; /* "#menu" width */
+    width: 11em;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000; /* so the menu or its navicon stays above all content */
+    background: #E8410C;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+/*
+All anchors inside the menu should be styled like this.
+*/
+#menu a {
+    color: #ffffff;
+    border: none;
+    padding: 0.6em 0em 0.6em 0.6em;
+}
+
+/*
+Remove all background/borders, since we are applying them to #menu.
+*/
+#menu .pure-menu,
+#menu .pure-menu ul {
+    border: none;
+    background: transparent;
+}
+
+/*
+Add that light border to separate items into groups.
+*/
+#menu .pure-menu ul,
+#menu .pure-menu .menu-item-divided {
+    border-top: 1px solid #db0100;
+}
+/*
+Change color of the anchor links on hover/focus.
+*/
+#menu .pure-menu li a:hover,
+#menu .pure-menu li a:focus {
+    background: #db0100;
+}
+
+/*
+This styles the selected menu item `<li>`.
+*/
+#menu .pure-menu-selected,
+#menu .pure-menu-heading {
+    background: #ffa86f;
+    color: black;
+}
+
+/*
+This styles a link within a selected menu item `<li>`.
+*/
+#menu .pure-menu-selected a {
+    color: #fff;
+}
+
+/*
+This styles the menu heading.
+*/
+#menu .pure-menu-heading {
+    font-size: 110%;
+    color: #fff;
+    margin: 0;
+}
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
+/*
+The button to open/close the Menu is custom-made and not part of Pure. Here's
+how it works:
+*/
+
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link {
+    position: relative;
+    display: block; /* show this only on small screens */
+    top: 0;
+    right: 0; /* "#menu width" */
+    background: transparent;
+    z-index: 10;
+    height: 2rem;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    text-decoration: none;
+}
+.menu-link span:hover,
+.menu-link span:focus {
+    color: rgba(1,1,1,0.8);
+}
+.menu-link span {
+    position: relative;
+    display: block;
+    color: #FFFFFF;
+}
+.menu-link span,
+.menu-link span:before,
+.menu-link span:after {
+    background-color: transparent;
+}
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+@media screen and (max-width: 63.9375em) {
+    #layout.active {
+        position: relative;
+        right: 11em;
+        /* moves to right as many ems as the one used by the menu */
+    }
+    #menuLink.menu-link.active {
+        position: fixed;
+        right: 13em;
+    }
+    #foot.active {
+        margin-right: 11em;
+    }
+}
+
+
+/* ***********************************************************
+HEADER
+************************************************************ */
+#header{
+    height: 6rem;
+    background-color: darkred;
+    background: linear-gradient(141deg, #b8002c 0%, #db0100 51%, #e8410c 75%)
+}
+.logo-header{
+    min-width: 8em;
+    height: 6rem;
+    max-width: 70%;
+ }
+#logo{
+    font-family: sans-serif;
+    font-size: 2.5em;
+    color: white;
+    text-shadow: 0px 3px 2px rgba(83, 41, 0, 1);
+}
+.simple{
+    font-weight: 300;
+}
+.saml{
+    font-family: Verdana;
+    letter-spacing: -0.12em;
+    font-weight: 600;
+    margin-left: -0.05em;
+}
+.language-menu{
+    font-family: FontAwesome, sans-serif;
+    min-width: 10rem;
+}
+.language-bar {
+    height: 6rem;
+}
+
+/* ***********************************************************
+CONTENT
+************************************************************ */
+#layout {
+    position: relative;
+    right: 0;
+    padding-right: 0;
+  }
+#content {
+    padding-top: 2em;
+    padding-bottom: 4rem;
+}
+
+.message-box {
+    background-color: #f4f4f4;
+    border-left-color: #444444;
+    border-left-style: solid;
+    border-left-width: 0.3125rem;
+    box-shadow: 0 5px 8px -6px rgba(0, 0, 0, 0.2);
+    margin: 1rem 0;
+    padding: 1.3rem;
+    position: relative;
+}
+.message-box.error {
+    background-color: #f7e4e1;
+    border-left-color: #cc4b37;
+}
+.message-box.success {
+    background-color: #daf7e6;
+    border-left-color: #46cc48;
+}
+
+.auth_methods{
+    margin-top: 2em;
+    width: 35%;
+}
+.pure-menu-item {
+    border-bottom: 1px solid lightgrey;
+}
+.pure-menu-item:last-child {
+    border-bottom: none;
+}
+.code-box{
+    border:1px solid #ccc;
+    margin-bottom: 1em;
+}
+.code-box-content{
+    font-size: 1em;
+    line-height: 1.15;
+    padding: 0.5em 1em;
+}
+.code-box-title{
+    border-bottom: 1px solid #ccc;
+    background-color: #e0e0e0;
+    padding: 0.5em 0 0.5em 0.5em;
+}
+
+/* ***********************************************************
+FOOTER
+************************************************************ */
+#layout{
+    min-height: 100%;
+    height: auto !important;
+    height: 100%;
+    margin: 0 auto -6rem; /*negative margin = footer height + padding-top + padding-bottom*/
+}
+#bottom, #push {
+    height:4rem;
+}
+#footer {
+    background-color: darkred;
+    background: linear-gradient(141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
+    height: 4rem;
+    padding: 2rem 0 0;
+    text-align: center;
+}
+.copyrights {
+    height:4rem;
+    font-size: .75em;
+}
+.logo-footer-right{
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+.logo-footer {
+    height: 4rem;
+}
+
+/* ***********************************************************
+FORMS
+************************************************************ */
+.text-area{
+    margin-top: .5em;
+    width:100%;
+    font-size: 0.9em;
+    line-height: 1.15;
+}
+.file-upload input[type="url"][disabled]{
+    cursor: pointer;
+    color: inherit;
+}
+input[type="file"]{
+    color:black;
+}
+.form-align{
+     position: relative;
+ }
+.center-form{
+    display: inline-block;
+    margin-right: auto;
+    margin-left: auto;
+}
+.v-center-right{
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+/* PURE */
+.pure-button,
+.pure-form input.edge,
+.pure-form textarea.edge {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+ }
+.pure-form-aligned .pure-controls{
+     margin: 0 0 0 11em;
+ }
+.pure-select{
+    float: right;
+}
+
+/* SELECTIZE */
+.selectize-input,
+.selectize-dropdown,
+.selectize-input.dropdown-active{
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+.selectize-input:after{
+    transform: translate(8px, 0);
+}
+div .item{
+    float: left;
+}
+.selectize-dropdown{
+    text-align: left;
+}
+
+.selectize-control.single .selectize-input, .selectize-dropdown.single {
+    background-color: white;
+    background-image: none;
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 3px #ddd;
+    box-sizing: border-box;
+    font-size: inherit;
+    padding: 0.5em 0.6em;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+/* ***********************************************************
+IMAGES
+************************************************************ */
+.fa {
+    font-family: FontAwesome !important;
+}
+span.fa, i.fa {
+    padding: 0 0.5em;
+}
+.message-box span.fa,
+.message-box i.fa{
+    padding: 0;
+}
+
+/* ***********************************************************
+TABLES
+************************************************************ */
+.pure-table-attributes{
+    table-layout: fixed;
+    width:100%;
+}
+.attrname{
+    text-align: right;
+}
+.attrvalue{
+    overflow-wrap: break-word;
+}
+table.attributes ul{
+    padding: inherit;
+}
+/* ***********************************************************
+MEDIA QUERIES
+************************************************************ */
+
+@media screen and (max-width: 480px) {
+    .pure-form .pure-input-sm-1-1{
+        width: 100%;
+    }
+}
+@media screen and (max-width: 39.9375em) {
+    .hide-for-small-only {
+        display: none !important;
+    }
+    .selectize-input{
+        padding-right: 0.1rem;
+    }
+    body {
+        font-size:75%;
+    }
+    .wrap{
+        width: 90%;
+    }
+    .pure-form-aligned .pure-controls{
+        margin: 0.5em 0 0;
+        float: left;
+    }
+    #layout {
+        padding-top: 0;
+    }
+    .auth_methods {
+        width: 60%;
+    }
+    #logo{
+        font-size: 1.8em;
+    }
+}
+
+@media screen and (max-width: 0em), screen and (min-width: 40em) {
+    .show-for-small-only {
+        display: none !important;
+    }
+    .input-sm-placeholder {
+        display: inline-block;
+    }
+}
+
+@media screen and (min-width: 40em) and (max-width: 63.9375em) {
+    .hide-for-medium-only {
+        display: none !important;
+    }
+    body{
+        font-size: 85%;
+    }
+}
+@media screen and (max-width: 39.9375em) {
+    .show-for-medium {
+        display: none !important;
+    }
+}
+
+@media screen and (max-width: 39.9375em), screen and (min-width: 64em) {
+    .show-for-medium-only {
+        display: none !important;
+    }
+}
+@media screen and (min-width: 64em) {
+    .hide-for-large {
+        display: none !important;
+    }
+}
+@media screen and (max-width: 63.9375em) {
+    .show-for-large {
+        display: none !important;
+    }
+}
+
+/*************************************************
+ * Specifics for modules/core/frontpage*
+ ************************************************/
+code.simplesaml_version {
+    background: #f5f5f5;
+    border: 1px dotted #bbb;
+    padding: 1em;
+    color: #555;
+}
+.float-r {
+    float: right;
+}
+.enablebox table {
+    border: 1px solid #eee;
+
+    margin-left: 1em;
+}
+.enablebox.mini table {
+    float: right;
+}
+.enablebox tr td {
+    padding: .5px 1em 1px .5em;
+    margin: 0px;
+}
+.enablebox {
+    font-size: 85%;
+}
+.enablebox tr.enabled td {
+    background: #eee;
+}
+.enablebox tr.disabled td {
+    background: #ccc;
+}
+fieldset.fancyfieldset {
+    margin: 2em 1em 1em 0px;
+    border: 1px solid #bbb;
+}
+fieldset.fancyfieldset legend {
+    margin-left: 2em;
+    padding: 3px 2em 3px 2em;
+    border: 1px solid #bbb;
+}
+dt {
+    font-weight: bold;
+}
+.frontpage-menu {
+    margin-bottom: 1em;
+}
+.entity-name, .entity-deprecated, .entity-expired {
+    font-weight: bold;
+}
+.entity-expired {
+    color: #500;
+}

www/assets/js/lib/clipboard.min.js

+../../../../node_modules/clipboard/dist/clipboard.min.js
\ No newline at end of file

www/assets/js/lib/jquery-3.2.1.min.js

+../../../../node_modules/jquery/dist/jquery.min.js
\ No newline at end of file

www/assets/js/lib/selectize.min.js

+../../../../node_modules/selectize/dist/js/standalone/selectize.min.js
\ No newline at end of file

www/assets/js/src/language.js

+
+$(document).ready(function() {
+    // get available languages
+    var languages = $.map($('#language_selector option') ,function(option) {
+        return option.text.toLowerCase();
+    });
+
+    $('#SelectLang').on("change", function (e) {
+        if (-1 !== $.inArray(
+            $('#language_selector-selectized').prev().text().toLowerCase(),
+            languages
+            )
+        ) {
+            e.currentTarget.submit();
+        }
+    });
+
+});

www/assets/js/src/script.js

+/**
+ * Set focus to the element with the given id.
+ *
+ * @param id  The id of the element which should receive focus.
+ */
+function SimpleSAML_focus(id) {
+  element = document.getElementById(id);
+  if(element != null) {
+    element.focus();
+  }
+}
+
+
+/**
+ * Show the given DOM element.
+ *
+ * @param id  The id of the element which should be shown.
+ */
+function SimpleSAML_show(id) {
+  element = document.getElementById(id);
+  if (element == null) {
+    return;
+  }
+
+  element.style.display = 'block';
+}
+
+
+/**
+ * Hide the given DOM element.
+ *
+ * @param id  The id of the element which should be hidden.
+ */
+function SimpleSAML_hide(id) {
+  element = document.getElementById(id);
+  if (element == null) {
+    return;
+  }
+
+  element.style.display = 'none';
+}
+
+// Attach the `fileselect` event to all file inputs on the page
+$(document).on('change', ':file', function() {
+    var input = $(this),
+        numFiles = input.get(0).files ? input.get(0).files.length : 1,
+        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+    input.trigger('fileselect', [numFiles, label]);
+});
+
+$(document).ready(function() {
+    $('.language-menu').selectize();
+    $('#organization').selectize();
+    new Clipboard('.clipboard-btn');
+
+// Watch for custom `fileselect` event
+    $(':file').on('fileselect', function(event, numFiles, label) {
+
+        var input = $(this).parents('.pure-button-group').find(':text'),
+            log = numFiles > 1 ? numFiles + ' files selected' : label;
+
+        if( input.length ) {
+            input.val(log);
+        } else {
+            if( log ) {
+                document.getElementById('show-file').innerHTML = log;
+            }
+        }
+    });
+
+});
+

www/assets/js/src/side_menu.js

+(function (window, document) {
+
+    var layout   = document.getElementById('layout'),
+        menu     = document.getElementById('menu'),
+        menuLink = document.getElementById('menuLink'),
+        content  = document.getElementById('content');
+    footer  = document.getElementById('foot');
+
+    function toggleClass(element, className) {
+        var classes = element.className.split(/\s+/),
+            length = classes.length,
+            i = 0;
+
+        for(; i < length; i++) {
+            if (classes[i] === className) {
+                classes.splice(i, 1);
+                break;
+            }
+        }
+        // The className is not found
+        if (length === classes.length) {
+            classes.push(className);
+        }
+
+        element.className = classes.join(' ');
+    }
+
+    function toggleAll(e) {
+        var active = 'active';
+
+        e.preventDefault();
+        toggleClass(layout, active);
+        toggleClass(menu, active);
+        toggleClass(menuLink, active);
+        toggleClass(footer, active);
+    }
+
+    menuLink.onclick = function (e) {
+        toggleAll(e);
+    };
+
+    content.onclick = function(e) {
+        if (menu.className.indexOf('active') !== -1) {
+            toggleAll(e);
+        }
+    };
+
+}(this, this.document));

yarn.lock

+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansicolors@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+are-we-there-yet@~1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+async@0.2.x:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+
+bindings@1.2.x:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.2.1.tgz#14ad6113812d2d37d72e67b4cacb4bb726505f11"
+
+bl@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.1.tgz#cac328f7bee45730d404b692203fcb590e172d5e"
+  dependencies:
+    readable-stream "^2.0.5"
+
+cardinal@0.4.x:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-0.4.4.tgz#ca5bb68a5b511b90fe93b9acea49bdee5c32bfe2"
+  dependencies:
+    ansicolors "~0.2.1"
+    redeyed "~0.4.0"
+
+chownr@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
+
+clipboard@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b"
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+
+csv-parse@^1.1.7:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/csv-parse/-/csv-parse-1.3.3.tgz#d1cfd8743c2f849a0abb2fd544db56695d19a490"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+delegate@^3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.1.3.tgz#9a8251a777d7025faa55737bc3b071742127a9fd"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
+  dependencies:
+    once "^1.4.0"
+
+esprima@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.0.4.tgz#9f557e08fc3b4d26ece9dd34f8fbf476b62585ad"
+
+expand-template@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-1.1.0.tgz#e09efba977bf98f9ee0ed25abd0c692e02aec3fc"
+
+font-awesome@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+
+gauge@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
+  dependencies:
+    aproba "^1.0.3"
+    console-control-strings "^1.0.0"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+github-from-package@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
+
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  dependencies:
+    delegate "^3.1.2"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+humanize@0.0.x:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/humanize/-/humanize-0.0.9.tgz#1994ffaecdfe9c441ed2bdac7452b7bb4c9e41a4"
+
+inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+jquery-ui@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.10.4.tgz#a096fe5f4e0f2ab69a0585cf10455877f57506bd"
+
+jquery@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
+
+microplugin@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/microplugin/-/microplugin-0.0.3.tgz#1fc2e1bb7c9e19e82bd84bba9137bbe71250d8cd"
+
+microtime@^2.1.0:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/microtime/-/microtime-2.1.6.tgz#76047a03f91ced5abb2e5367e5f1df2ede756bae"
+  dependencies:
+    bindings "1.2.x"
+    nan "2.6.x"
+    prebuild-install "^2.1.0"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+
+mkdirp@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+nan@2.6.x:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45"
+
+node-abi@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.1.1.tgz#c9cda256ec8aa99bcab2f6446db38af143338b2a"
+
+noop-logger@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
+
+npmlog@^4.0.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+
+object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+once@^1.3.1, once@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+optimist@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+prebuild-install@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-2.3.0.tgz#19481247df728b854ab57b187ce234211311b485"
+  dependencies:
+    expand-template "^1.0.2"
+    github-from-package "0.0.0"
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    node-abi "^2.1.1"
+    noop-logger "^0.1.1"
+    npmlog "^4.0.1"
+    os-homedir "^1.0.1"
+    pump "^1.0.1"
+    rc "^1.1.6"
+    simple-get "^1.4.2"
+    tar-fs "^1.13.0"
+    tunnel-agent "^0.6.0"
+    xtend "4.0.1"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+pump@^1.0.0, pump@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.2.tgz#3b3ee6512f94f0e575538c17995f9f16990a5d51"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+purecss@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/purecss/-/purecss-1.0.0.tgz#3dbcd9e2a7592448a69acb705cce16311bf4b785"
+
+rc@^1.1.6:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+readable-stream@^2.0.0, readable-stream@^2.0.5, readable-stream@^2.0.6:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+redeyed@~0.4.0:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/redeyed/-/redeyed-0.4.4.tgz#37e990a6f2b21b2a11c2e6a48fd4135698cba97f"
+  dependencies:
+    esprima "~1.0.4"
+
+safe-buffer@^5.0.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+
+selectize@^0.12.4:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/selectize/-/selectize-0.12.4.tgz#50c697526b609dea11da153cf7252b98948f4c0e"
+  dependencies:
+    microplugin "0.0.3"
+    sifter "^0.5.1"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+sifter@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/sifter/-/sifter-0.5.2.tgz#4702e3cee3036903da1f194b29e6dc7a4fb59abe"
+  dependencies:
+    async "0.2.x"
+    cardinal "0.4.x"
+    csv-parse "^1.1.7"
+    humanize "0.0.x"
+    optimist "0.6.x"
+  optionalDependencies:
+    microtime "^2.1.0"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+simple-get@^1.4.2:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-1.4.3.tgz#e9755eda407e96da40c5e5158c9ea37b33becbeb"
+  dependencies:
+    once "^1.3.1"
+    unzip-response "^1.0.0"
+    xtend "^4.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+
+tar-fs@^1.13.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-1.16.0.tgz#e877a25acbcc51d8c790da1c57c9cf439817b896"
+  dependencies:
+    chownr "^1.0.1"
+    mkdirp "^0.5.1"
+    pump "^1.0.0"
+    tar-stream "^1.1.2"
+
+tar-stream@^1.1.2:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.5.4.tgz#36549cf04ed1aee9b2a30c0143252238daf94016"
+  dependencies:
+    bl "^1.0.0"
+    end-of-stream "^1.0.0"
+    readable-stream "^2.0.0"
+    xtend "^4.0.0"
+
+tiny-emitter@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
+
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  dependencies:
+    safe-buffer "^5.0.1"
+
+unzip-response@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+wide-align@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
+  dependencies:
+    string-width "^1.0.2"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xtend@4.0.1, xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"