fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed issues with font color in nested lists

Browse Source
This commit is contained in:
Felix Hamann 2018-06-09 17:39:31 +02:00
parent 694ce90551
commit d2a626371f
3 changed files with 126 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/default-layout.lucius
View File

@ -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;
}

2
templates/widgets/asidenav.hamlet
View File

@ -25,7 +25,7 @@ $newline never
$forall action <- pageActions
$case action
$of PageActionPrime (MenuItem{..})
<li .asidenav__list-item>
<li .asidenav__nested-list-item>
<a .asidenav__link-wrapper href=@{menuItemRoute}>#{menuItemLabel}
$of _

245
templates/widgets/asidenav.lucius
View File

@ -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;
}
}