From d2a626371f1adec02a3d25986f1a87165739886c Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sat, 9 Jun 2018 17:39:31 +0200 Subject: [PATCH] fixed issues with font color in nested lists --- templates/default-layout.lucius | 2 +- templates/widgets/asidenav.hamlet | 2 +- templates/widgets/asidenav.lucius | 245 +++++++++++++++--------------- 3 files changed, 126 insertions(+), 123 deletions(-) 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; + } }