diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 91fc648de..feaf8624c 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -236,7 +236,7 @@ input[type="button"]:not([disabled]):hover,
button:not([disabled]):hover,
a.btn:not([disabled]):hover,
.btn:not([disabled]):hover {
- background-color: var(--color-lighter);
+ background-color: var(--color-light);
text-decoration: underline;
color: white;
}
diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet
index f23452ae9..cd00430be 100644
--- a/templates/widgets/asidenav.hamlet
+++ b/templates/widgets/asidenav.hamlet
@@ -25,7 +25,7 @@ $newline never
$forall action <- pageActions
$case action
$of PageActionPrime (MenuItem{..})
-
+
#{menuItemLabel}
$of _
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 287955c0d..98ec92cc0 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -12,50 +12,6 @@
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: 1px;
- font-size: 18px;
- text-align: center;
- margin-bottom: 0;
- background-color: var(--color-fontsec);
- }
-
- .asidenav__link-wrapper {
- .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__link-label {
- padding-left: 0;
- }
- }
-}
-
.asidenav {
width: 300px;
margin-top: 20px;
@@ -86,82 +42,40 @@
margin-top: 13px;
background-color: transparent;
transition: all .2s ease;
-
- a {
- color: white;
- }
-}
-
-/* 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__list-item {
- background-color: var(--color-dark);
- 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(--color-dark) !important;
- border-left: 20px solid var(--color-dark);
- }
- }
}
.asidenav__list-item {
position: relative;
- background-color: white;
- color: var(--color-dark);
+ color: var(--color-lightwhite);
margin: 4px 0;
- &:not(.asidenav__list-item--active):hover {
- color: white;
- background-color: var(--color-dark);
+ &:hover {
+ color: var(--color-link);
+ background-color: var(--color-lightwhite);
+
+ .asidenav__link-shorthand {
+ transform: scale(1.05, 1.0);
+ transform-origin: right;
+ }
+
+ > .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(--color-dark);
- color: white;
+ background-color: var(--color-lightwhite);
.asidenav__link-wrapper {
pointer-events: none;
- color: white;
+ color: var(--color-link);
}
.asidenav__link-shorthand {
@@ -176,35 +90,80 @@
height: 50px;
align-items: center;
justify-content: flex-start;
- color: var(--color-link);
+ color: var(--color-lightwhite);
z-index: 1;
.glyphicon {
width: 50px;
}
- .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;
- }
-
- .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;
+}
+
+.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;
@@ -230,6 +189,50 @@
}
}
-.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;
+ background-color: var(--color-lightwhite);
+ }
+
+ .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__link-label {
+ padding-left: 0;
+ }
}