active nav link highlighting draft

This commit is contained in:
Dennis Eichhorn 2019-02-02 23:57:22 +01:00
parent 018f8c1aea
commit 7a189b5044
5 changed files with 23 additions and 14 deletions

View File

@ -45,14 +45,17 @@
.ipt-wrap { .ipt-wrap {
display: table; display: table;
vertical-align: top;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.ipt-wrap .ipt-first { .ipt-wrap .ipt-first {
width: 100%; width: 100%;
display: table-cell; } display: table-cell;
vertical-align: inherit; }
.ipt-wrap .ipt-second { .ipt-wrap .ipt-second {
padding-left: 5px; padding-left: 5px;
display: table-cell; } display: table-cell;
vertical-align: inherit; }
/*# sourceMappingURL=layout.css.map */ /*# sourceMappingURL=layout.css.map */

View File

@ -2,15 +2,18 @@
.ipt-wrap { .ipt-wrap {
display: table; display: table;
vertical-align: top;
@include box-sizing(border-box); @include box-sizing(border-box);
.ipt-first { .ipt-first {
width: 100%; width: 100%;
display: table-cell; display: table-cell;
vertical-align: inherit;
} }
.ipt-second { .ipt-second {
padding-left: 5px; padding-left: 5px;
display: table-cell; display: table-cell;
vertical-align: inherit;
} }
} }

View File

@ -65,7 +65,7 @@
border-bottom: 1px solid #252525; } border-bottom: 1px solid #252525; }
#nav-side > li li:not(:first-child) { #nav-side > li li:not(:first-child) {
background: #444; } background: #444; }
#nav-side > li li:hover { #nav-side > li li:hover, #nav-side > li li.active {
color: #252525; color: #252525;
background: #FBA026; background: #FBA026;
border-top: 1px solid #ffc06e; } border-top: 1px solid #ffc06e; }
@ -120,17 +120,17 @@ label[for="nav-trigger"] {
display: inline-block; display: inline-block;
position: relative; position: relative;
cursor: pointer; } cursor: pointer; }
.nav-top li:hover { .nav-top li:hover, .nav-top li.active {
-moz-box-shadow: inset 0px 1px 0px 0px #FFC06E; -moz-box-shadow: inset 0px 1px 0px 0px #FFC06E;
-webkit-box-shadow: inset 0px 1px 0px 0px #FFC06E; -webkit-box-shadow: inset 0px 1px 0px 0px #FFC06E;
box-shadow: inset 0px 1px 0px 0px #FFC06E; box-shadow: inset 0px 1px 0px 0px #FFC06E;
background: #FBA026; background: #FBA026;
color: #252525; } color: #252525; }
.nav-top li:hover:first-child { .nav-top li:hover:first-child, .nav-top li.active:first-child {
-moz-box-shadow: inset 1px 1px 0px 0px #FFC06E; -moz-box-shadow: inset 1px 1px 0px 0px #FFC06E;
-webkit-box-shadow: inset 1px 1px 0px 0px #FFC06E; -webkit-box-shadow: inset 1px 1px 0px 0px #FFC06E;
box-shadow: inset 1px 1px 0px 0px #FFC06E; } box-shadow: inset 1px 1px 0px 0px #FFC06E; }
.nav-top li:hover > ul { .nav-top li:hover > ul, .nav-top li.active > ul {
display: block; display: block;
opacity: 1; opacity: 1;
visibility: visible; } visibility: visible; }

View File

@ -80,7 +80,7 @@
border-bottom: 1px solid #252525; border-bottom: 1px solid #252525;
&:hover { &:hover, &.active {
color: #252525; color: #252525;
background: $default-highlighter; background: $default-highlighter;
border-top: 1px solid rgb(255, 192, 110); border-top: 1px solid rgb(255, 192, 110);
@ -162,7 +162,7 @@ label[for="nav-trigger"] {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&:hover { &:hover, &.active {
@include box-shadow-top(#FFC06E); @include box-shadow-top(#FFC06E);
&:first-child { &:first-child {

View File

@ -3333,15 +3333,18 @@ article {
.ipt-wrap { .ipt-wrap {
display: table; display: table;
vertical-align: top;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.ipt-wrap .ipt-first { .ipt-wrap .ipt-first {
width: 100%; width: 100%;
display: table-cell; } display: table-cell;
vertical-align: inherit; }
.ipt-wrap .ipt-second { .ipt-wrap .ipt-second {
padding-left: 5px; padding-left: 5px;
display: table-cell; } display: table-cell;
vertical-align: inherit; }
*[draggable] { *[draggable] {
cursor: move; } cursor: move; }
@ -4427,7 +4430,7 @@ ul.h-list li {
border-bottom: 1px solid #252525; } border-bottom: 1px solid #252525; }
#nav-side > li li:not(:first-child) { #nav-side > li li:not(:first-child) {
background: #444; } background: #444; }
#nav-side > li li:hover { #nav-side > li li:hover, #nav-side > li li.active {
color: #252525; color: #252525;
background: #FBA026; background: #FBA026;
border-top: 1px solid #ffc06e; } border-top: 1px solid #ffc06e; }
@ -4482,17 +4485,17 @@ label[for="nav-trigger"] {
display: inline-block; display: inline-block;
position: relative; position: relative;
cursor: pointer; } cursor: pointer; }
.nav-top li:hover { .nav-top li:hover, .nav-top li.active {
-moz-box-shadow: inset 0px 1px 0px 0px #FFC06E; -moz-box-shadow: inset 0px 1px 0px 0px #FFC06E;
-webkit-box-shadow: inset 0px 1px 0px 0px #FFC06E; -webkit-box-shadow: inset 0px 1px 0px 0px #FFC06E;
box-shadow: inset 0px 1px 0px 0px #FFC06E; box-shadow: inset 0px 1px 0px 0px #FFC06E;
background: #FBA026; background: #FBA026;
color: #252525; } color: #252525; }
.nav-top li:hover:first-child { .nav-top li:hover:first-child, .nav-top li.active:first-child {
-moz-box-shadow: inset 1px 1px 0px 0px #FFC06E; -moz-box-shadow: inset 1px 1px 0px 0px #FFC06E;
-webkit-box-shadow: inset 1px 1px 0px 0px #FFC06E; -webkit-box-shadow: inset 1px 1px 0px 0px #FFC06E;
box-shadow: inset 1px 1px 0px 0px #FFC06E; } box-shadow: inset 1px 1px 0px 0px #FFC06E; }
.nav-top li:hover > ul { .nav-top li:hover > ul, .nav-top li.active > ul {
display: block; display: block;
opacity: 1; opacity: 1;
visibility: visible; } visibility: visible; }