Commit 9d8b81c2 authored by Agami4's avatar Agami4
Browse files

Issue #3179425 by agami4: Improve secondary navigation items on focus

parent 19fca242
......@@ -16,17 +16,31 @@
}
.socialblue--sky .navbar-secondary .navbar-nav li a, .socialblue--sky .navbar-secondary .navbar-nav li button {
padding: 9px 20px 8px;
position: relative;
padding: 10px 20px;
opacity: 1;
border-bottom-width: 3px;
border-bottom-width: 0;
}
.socialblue--sky .navbar-secondary .navbar-nav li a:after, .socialblue--sky .navbar-secondary .navbar-nav li button:after {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: transparent;
}
.socialblue--sky .navbar-secondary .navbar-nav li a:hover, .socialblue--sky .navbar-secondary .navbar-nav li a:active, .socialblue--sky .navbar-secondary .navbar-nav li a:focus, .socialblue--sky .navbar-secondary .navbar-nav li button:hover, .socialblue--sky .navbar-secondary .navbar-nav li button:active, .socialblue--sky .navbar-secondary .navbar-nav li button:focus {
background: transparent;
border-bottom-color: #fff;
color: #fff;
}
.socialblue--sky .navbar-secondary .navbar-nav li a:hover:after, .socialblue--sky .navbar-secondary .navbar-nav li a:active:after, .socialblue--sky .navbar-secondary .navbar-nav li a:focus:after, .socialblue--sky .navbar-secondary .navbar-nav li button:hover:after, .socialblue--sky .navbar-secondary .navbar-nav li button:active:after, .socialblue--sky .navbar-secondary .navbar-nav li button:focus:after {
background: #fff;
}
.socialblue--sky .navbar-secondary .navbar-nav li.active a, .socialblue--sky .navbar-secondary .navbar-nav li.active button {
color: #fff;
border-bottom-color: #fff;
......
......@@ -43,16 +43,30 @@
.navbar-nav {
li {
a, button {
padding: 9px 20px 8px;
position: relative;
padding: 10px 20px;
opacity: 1;
border-bottom-width: 3px;
border-bottom-width: 0;
&:after {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: transparent;
}
&:hover,
&:active,
&:focus {
background: transparent;
border-bottom-color: #fff;
color: #fff;
&:after {
background: #fff;
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment