diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
index 99562111a..109cc3ca3 100644
--- a/templates/widgets/asidenav.julius
+++ b/templates/widgets/asidenav.julius
@@ -4,7 +4,7 @@
window.utils = window.utils || {};
// Defines a function to turn an element into an interactive aside-navigation.
- // If the small is smaller than 999px the navigation is automatically
+ // If the screen is smaller than 999px the navigation is automatically
// collapsed - even when dynamically resized (e.g. switching from portatit
// to landscape).
// The can user may also manually collapse and expand the navigation by
@@ -16,7 +16,7 @@
// (potentially happening) initial collapse of the asidenav
// goes unnoticed by the user.
var animClass = 'main__aside--transitioning';
- var aboveCollapsedNav = false;
+ var hoveringAboveCollapsedNav = false;
init();
function init() {
@@ -62,17 +62,21 @@
if (!hasCollapsedClass()) {
return false;
}
- aboveCollapsedNav = true;
+ hoveringAboveCollapsedNav = true;
window.setTimeout(function() {
- if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
+ if (hoveringAboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
asideEl.classList.add('pseudo-hover');
}
- }, 800);
+ }, 200);
}, false);
asideEl.addEventListener('mouseleave', function(event) {
- aboveCollapsedNav = false;
- asideEl.classList.remove('pseudo-hover');
+ hoveringAboveCollapsedNav = false;
+ window.setTimeout(function() {
+ if (!hoveringAboveCollapsedNav) {
+ asideEl.classList.remove('pseudo-hover');
+ }
+ }, 200);
}, false);
}
};
@@ -82,4 +86,36 @@ document.addEventListener('DOMContentLoaded', function() {
utils.aside(document.querySelector('.main__aside'));
+ // remove me before flight:
+ // EXPERIMENTAL
+ var selector = document.querySelector('#theme-selector');
+ var options = Array.from(selector.querySelectorAll('option'))
+ .reduce(function(acc, optEl) {
+ if (!acc.includes(optEl.value)) {
+ acc.push(optEl.value);
+ }
+ return acc;
+ },
+ []);
+
+ selector.addEventListener('change', function(event) {
+ setTheme(event.target.value);
+ });
+
+ function setTheme(theme) {
+ document.body.className = 'theme--' + theme;
+ }
+
+ // random theme on loading and again every 20 seconds
+ // setInterval(function() {
+ // setTheme(randomOption());
+ // }, 20000);
+
+ // function randomOption() {
+ // return options[Math.floor(Math.random() * options.length)];
+ // }
+
+ // // initial theme
+ // setTheme(randomOption());
+
});
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 62c2d3f0c..4fe8dcdc1 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -1,6 +1,6 @@
.main__aside {
position: relative;
- background-color: var(--darkbase);
+ background-color: var(--color-dark);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1;
flex: 0 0 300px;
@@ -12,48 +12,8 @@
transition: opacity .2s ease;
}
-.main__aside--collapsed.pseudo-hover {
- overflow: visible;
-}
-.main__aside--collapsed {
- width: 50px;
- flex-basis: 50px;
- overflow: hidden;
-
- .asidenav__box-title {
- width: 50px;
- padding: 0;
- }
-
- .asidenav__link-wrapper {
- .asidenav__link-shorthand {
- display: flex;
- position: static;
- background-color: var(--darkbase);
- color: var(--whitebase);
- height: 50px;
- width: 50px;
- text-align: center;
- opacity: 1;
- font-size: 16px;
- line-height: 1em;
- margin-right: 13px;
- flex-shrink: 0;
- outline: 1px solid white;
- text-transform: uppercase;
- word-break: break-all;
- align-items: center;
- justify-content: center;
- }
- .asidenav__link-label {
- padding-left: 0;
- }
- }
-}
-
.asidenav {
width: 300px;
- margin-top: 20px;
color: white;
.js-show-hide__target {
@@ -78,82 +38,50 @@
.asidenav__box-title {
padding: 7px 13px;
-
- a {
- color: white;
- }
-}
-
-/* hover sub-menus */
-.asidenav__nested-list {
- position: absolute;
- top: 0;
- right: 0;
- color: var(--fontbase);
- transform: translateX(0);
- opacity: 0;
- transition: all .2s ease-out;
- width: 0;
- overflow: hidden;
- z-index: -1;
-
- .asidenav__list-item {
- background-color: var(--darkbase);
- color: white;
-
- &:first-child {
- margin-top: 0;
- }
- }
-
- .asidenav__link-wrapper {
- padding-left: 13px;
- padding-right: 13px;
- border-left: 20px solid white;
- transition: all .2s ease;
-
- &:hover {
- background-color: white;
- color: var(--darkbase) !important;
- border-left: 20px solid var(--darkbase);
- }
- }
+ margin-top: 13px;
+ background-color: transparent;
+ transition: all .2s ease;
}
.asidenav__list-item {
position: relative;
- background-color: white;
- color: var(--darkbase);
+ color: var(--color-lightwhite);
margin: 4px 0;
- &:not(.asidenav__list-item--active):hover {
- color: white;
- background-color: var(--darkbase);
+ &:hover {
+ color: var(--color-link);
+ background-color: var(--color-lightwhite);
+
+ .asidenav__link-shorthand {
+ transform: scale(1.05, 1.0);
+ transform-origin: right;
+ text-shadow: none;
+ }
+
+ > .asidenav__link-wrapper {
+ color: var(--color-link);
+ }
.asidenav__nested-list {
transform: translateX(100%);
opacity: 1;
width: 200px;
}
-
- .asidenav__link-wrapper,
- .asidenav__link-label {
- color: white;
- }
-
- .asidenav__link-shorthand {
- transform: scale(1.05, 1.0);
- transform-origin: right;
- }
}
}
+
.asidenav__list-item--active {
- background-color: var(--darkbase);
- color: white;
+ background-color: var(--color-lightwhite);
.asidenav__link-wrapper {
pointer-events: none;
- color: white;
+ color: var(--color-link);
+ }
+
+ .asidenav__link-shorthand {
+ transform: scale(1.05, 1.0);
+ transform-origin: right;
+ text-shadow: none;
}
}
@@ -163,35 +91,81 @@
height: 50px;
align-items: center;
justify-content: flex-start;
- color: var(--darkbase);
+ color: var(--color-lightwhite);
z-index: 1;
.glyphicon {
width: 50px;
}
- .asidenav__link-shorthand {
- display: block;
- position: absolute;
- color: var(--greybase);
- line-height: 50px;
- opacity: 0.3;
- right: 10px;
- top: 0;
- font-size: 40px;
- text-transform: uppercase;
- transition: transform .2s ease;
- }
-
- .asidenav__link-label {
- padding-left: 13px;
- }
.glyphicon + .asidenav__link-label {
padding-left: 0;
}
}
+.asidenav__link-shorthand {
+ display: block;
+ position: absolute;
+ color: var(--color-grey);
+ line-height: 50px;
+ opacity: 0.2;
+ right: 10px;
+ top: 0;
+ font-size: 40px;
+ text-transform: uppercase;
+ transition: transform .2s ease;
+ text-shadow: 1px 1px 4px rgba(30, 30, 30, 0.8);
+}
+
+.asidenav__link-label {
+ padding-left: 13px;
+}
+
+/* hover sub-menus */
+.asidenav__nested-list {
+ position: absolute;
+ top: 0;
+ right: 0;
+ color: var(--color-font);
+ transform: translateX(0);
+ opacity: 0;
+ transition: all .2s ease-out;
+ width: 0;
+ overflow: hidden;
+ z-index: -1;
+}
+
+.asidenav__nested-list-item {
+ position: relative;
+ color: var(--color-lightwhite);
+ background-color: var(--color-dark);
+
+ &:hover {
+ color: var(--color-link);
+ background-color: var(--color-lightwhite);
+
+ .asidenav__link-wrapper {
+ background-color: white;
+ color: var(--color-link);
+ }
+
+ .asidenav__nested-list {
+ transform: translateX(100%);
+ opacity: 1;
+ width: 200px;
+ }
+ }
+
+ .asidenav__link-wrapper {
+ padding-left: 13px;
+ padding-right: 13px;
+ border-left: 20px solid white;
+ transition: all .2s ease;
+ color: var(--color-lightwhite);
+ }
+}
+
.asidenav__toggler {
position: absolute;
bottom: 20px;
@@ -201,22 +175,78 @@
align-items: center;
justify-content: center;
transition: background-color .2s ease;
- border-top: 1px solid var(--whitebase);
- border-bottom: 1px solid var(--whitebase);
+ border-top: 1px solid var(--color-lightwhite);
+ border-bottom: 1px solid var(--color-lightwhite);
cursor: pointer;
&::before {
content: '\e079';
display: block;
font-family: 'Glyphicons Halflings';
- color: var(--whitebase);
+ color: var(--color-lightwhite);
}
&:hover {
- background-color: var(--lightbase);
+ background-color: var(--color-light);
}
}
-.main__aside--collapsed .asidenav__toggler::before {
- content: '\e080';
+.main__aside--collapsed {
+ width: 50px;
+ flex-basis: 50px;
+ overflow: hidden;
+
+ &.pseudo-hover {
+ overflow: visible;
+ }
+
+ .asidenav__toggler::before {
+ content: '\e080';
+ }
+
+ .asidenav__box-title {
+ width: 50px;
+ padding: 1px;
+ font-size: 18px;
+ text-align: center;
+ margin-bottom: 0;
+ }
+
+ .asidenav__link-shorthand {
+ display: flex;
+ position: static;
+ background-color: var(--color-dark);
+ color: var(--color-lightwhite);
+ height: 50px;
+ width: 50px;
+ text-align: center;
+ opacity: 1;
+ font-size: 15px;
+ line-height: 1em;
+ margin-right: 13px;
+ flex-shrink: 0;
+ padding: 1px;
+ outline: 1px solid white;
+ text-transform: uppercase;
+ word-break: break-all;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .asidenav__list-item:hover {
+
+ > .asidenav__link-wrapper {
+ color: var(--color-dark);
+ background-color: var(--color-lightwhite);
+ }
+ }
+
+ .asidenav__link-wrapper {
+ color: var(--color-lightwhite);
+ background-color: var(--color-dark);
+ }
+
+ .asidenav__link-label {
+ padding-left: 0;
+ }
}
diff --git a/templates/widgets/breadcrumbs.hamlet b/templates/widgets/breadcrumbs.hamlet
index fd2ab3529..ca7501f63 100644
--- a/templates/widgets/breadcrumbs.hamlet
+++ b/templates/widgets/breadcrumbs.hamlet
@@ -1,7 +1,7 @@
+$newline never
$forall bc <- parents
-
#{snd bc}
- >
-
- #{title}
+
- #{title}
diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius
index b110eb0e3..d6407b59e 100644
--- a/templates/widgets/breadcrumbs.lucius
+++ b/templates/widgets/breadcrumbs.lucius
@@ -3,12 +3,82 @@
color: white;
z-index: 10;
align-self: flex-end;
- margin-bottom: 20px;
+ margin-bottom: 10px;
transition: margin-bottom .2s ease;
+ margin-left: -40px;
+ margin-right: -40px;
+ background-color: var(--color-dark);
}
.breadcrumbs__container--animated {
transition: left .2s ease;
}
-.breadcrumbs__container .breadcrumbs__link {
- color: white;
+.breadcrumbs__link {
+ color: var(--color-lightwhite);
+ z-index: 2;
+}
+
+.breadcrumbs__item {
+ padding-left: 10px;
+ padding-right: 4px;
+ position: relative;
+ line-height: 28px;
+
+ &:nth-child(even) {
+ background-color: var(--color-light);
+ }
+
+ &:first-child {
+ padding-left: 20px;
+ }
+
+ &:nth-child(even) {
+ background-color: var(--color-light);
+
+ &::before {
+ border-left-color: var(--color-primary) !important;
+ }
+
+ &::after {
+ border-left-color: var(--color-light) !important;
+ }
+ }
+
+ &:nth-child(odd) {
+ background-color: var(--color-primary);
+
+ &::before {
+ border-left-color: var(--color-light) !important;
+ }
+
+ &::after {
+ border-left-color: var(--color-primary) !important;
+ }
+ }
+
+ &:not(:first-child) {
+ padding-left: 25px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ border-top: 14px solid transparent;
+ border-bottom: 14px solid transparent;
+ border-left: 14px solid var(--color-light);
+ }
+ }
+
+ &:last-child {
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: -14px;
+ border-top: 14px solid transparent;
+ border-bottom: 14px solid transparent;
+ border-left: 14px solid var(--color-light);
+ }
+ }
}
diff --git a/templates/widgets/form.julius b/templates/widgets/form.julius
index 973e1217d..994f1bece 100644
--- a/templates/widgets/form.julius
+++ b/templates/widgets/form.julius
@@ -4,8 +4,8 @@
window.utils = window.utils || {};
// registers input-listener for each element in (array) and
- // enables