Toggle sidebar
Change-Id: I2b1e804895830931226765424efae0d2af8aa541
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 0478638..f878e36 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -65,7 +65,7 @@
</form>
</header>
- <aside tabindex="0" class="active">
+ <aside tabindex="0">
<div>
<fieldset>
<form>
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 294a3c9..6b4ad67 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -141,6 +141,11 @@
});
};
+ document.getElementsByTagName('aside')[0].addEventListener('focus', function() {
+ this.classList.add('active')
+ });
+
+
// Replace QL select menus with KorAP menus
var qlField = document.getElementById('ql-field');
if (qlField !== null) {
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index 665f222..4584437 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -65,85 +65,84 @@
li {
padding: 0;
> a {
- padding: $item-padding;
- &:visited {
- @include choose-item;
- }
-
+ padding: $item-padding;
+ &:visited {
+ @include choose-item;
+ }
}
li.folded {
- &.active ul {
- display: block;
- }
- ul {
- display: none;
- }
+ &.active ul {
+ display: block;
+ }
+ ul {
+ display: none;
+ }
}
&.active > a:link {
- @include choose-active;
+ @include choose-active;
}
> a:link {
- @include choose-item;
- border-right: {
- width: $border-size;
- style: solid;
- }
+ @include choose-item;
+ border-right: {
+ width: $border-size;
+ style: solid;
+ }
- display: block;
- &:hover {
- // color: inherit;
- transition: none;
- @include choose-hover;
- }
+ display: block;
+ &:hover {
+ // color: inherit;
+ transition: none;
+ @include choose-hover;
+ }
}
h3 {
font: {
- weight: bold;
- size: 100%;
- }
- padding: 0;
- margin: 0;
+ weight: bold;
+ size: 100%;
+ }
+ padding: 0;
+ margin: 0;
}
/*
&.active {
- text-shadow: none;
- h3 {
- margin-bottom: 2pt;
- padding-bottom: 2pt;
- border-bottom: 1px solid black;
- }
+ text-shadow: none;
+ h3 {
+ margin-bottom: 2pt;
+ padding-bottom: 2pt;
+ border-bottom: 1px solid black;
+ }
}
*/
> a {
- padding-left: 6pt;
+ padding-left: 6pt;
}
li > a {
- padding-left: 18pt;
+ padding-left: 18pt;
}
li li > a {
- padding-left: 36pt;
+ padding-left: 36pt;
}
}
}
nav > ul > li > a {
font-weight: bold;
}
-
+
fieldset {
position: relative;
border-width: 0;
legend {
display: none;
}
-
+
input[type=text], input[type=password] {
@include input-field;
width: 100%;
}
-
+
> form > div {
position: relative;
width: 100%;
@@ -156,10 +155,10 @@
font-size: 80%;
text-align: right;
> li {
- display: inline;
- &:first-child::after {
- content: ' | ';
- }
+ display: inline;
+ &:first-child::after {
+ content: ' | ';
+ }
}
padding: 0;
margin-top: 0;
@@ -171,7 +170,7 @@
top: 0;
right: 0;
&::after {
- content: $fa-login;
+ content: $fa-login;
}
}
}
@@ -186,6 +185,7 @@
&::after {
opacity: 1;
}
+
> * {
opacity: 0;
transition: {