mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-02-10 15:08:40 +00:00
active nav link highlighting draft
This commit is contained in:
parent
018f8c1aea
commit
7a189b5044
|
|
@ -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 */
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
8
nav.css
8
nav.css
|
|
@ -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; }
|
||||||
|
|
|
||||||
4
nav.scss
4
nav.scss
|
|
@ -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 {
|
||||||
|
|
|
||||||
15
styles.css
15
styles.css
|
|
@ -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; }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user