Commit ec6814d5 authored by Thomas Park's avatar Thomas Park
Browse files

slate: .nav hover and active styles, improved .nav-list

parent f05a04bb
......@@ -1809,7 +1809,7 @@ table .span24 {
padding: 4px 0;
margin: 0;
list-style: none;
background-color: #ffffff;
background-color: #3a3f44;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
......@@ -1845,15 +1845,15 @@ table .span24 {
clear: both;
font-weight: normal;
line-height: 18px;
color: #3a3f44;
color: #757c82;
white-space: nowrap;
}
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #ffffff;
color: #bbbfc2;
text-decoration: none;
background-color: #ffffff;
background-color: #272b30;
}
.dropdown.open {
*z-index: 1000;
......@@ -3051,7 +3051,7 @@ input[type="submit"].btn.btn-mini {
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-bottom: 6px solid #3a3f44;
position: absolute;
top: -6px;
left: 10px;
......@@ -3064,7 +3064,7 @@ input[type="submit"].btn.btn-mini {
top: auto;
}
.navbar-fixed-bottom .dropdown-menu:after {
border-top: 6px solid #ffffff;
border-top: 6px solid #3a3f44;
border-bottom: 0;
bottom: -6px;
top: auto;
......@@ -3997,13 +3997,9 @@ h6,
body,
legend,
label {
text-shadow: -1px -1px 0 #111111;
}
.navbar .brand {
font-weight: bold;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}
.navbar .navbar-inner,
div.subnav {
.navbar .navbar-inner {
background-color: #3a3f44;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#52575c), color-stop(70%, #3a3f44), to(#3a3f44));
background-image: -webkit-linear-gradient(#52575c, #3a3f44 70%, #3a3f44);
......@@ -4014,23 +4010,19 @@ div.subnav {
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52575c', endColorstr='#3a3f44', GradientType=0);
}
.navbar .divider-vertical {
background-color: transparent;
border-right: none;
}
.navbar .brand,
.navbar .nav > li > a,
div.subnav .nav > li > a {
.navbar .brand {
color: #bbbfc2;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-right: 1px solid #2e3134;
}
.navbar .nav > li > a,
div.subnav .nav > li > a {
.navbar .nav > li > a {
color: #bbbfc2;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-right: 1px solid #2e3134;
border-left: 1px solid #52575c;
}
.navbar .nav > li > a:hover,
div.subnav .nav > li > a:hover {
.navbar .nav > li > a:hover {
color: #bbbfc2;
background-color: #3a3f44;
background-color: #3a3f44;
......@@ -4044,9 +4036,7 @@ div.subnav .nav > li > a:hover {
border-right: 1px solid transparent;
}
.navbar .nav > li.active > a,
div.subnav .nav > li.active > a,
.navbar .nav > li.active > a:hover,
div.subnav .nav > li.active > a:hover {
.navbar .nav > li.active > a:hover {
color: #bbbfc2;
background-color: #3a3f44;
background-color: #43494f;
......@@ -4058,44 +4048,25 @@ div.subnav .nav > li.active > a:hover {
background-image: linear-gradient(280deg, #30353b, #43494f);
border-right: 1px solid #2e3134;
}
div.subnav .nav > li:first-child > a,
div.subnav .nav > li:first-child > a:hover {
border-left: 1px solid transparent;
}
div.subnav.subnav-fixed .nav > li.active:first-child > a,
div.subnav.subnav-fixed .nav > li:first-child > a:hover {
border-left: 1px solid #2e3134;
}
div.subnav .nav > li.active:last-child > a,
div.subnav .nav > li:last-child > a:hover {
border-right: 1px solid #2e3134;
}
div.subnav {
border: 1px solid transparent;
-webkit-box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
-moz-box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
}
div.subnav-fixed {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-search .search-query {
.navbar .navbar-search .search-query {
border: 1px solid #2e3134;
}
.nav .nav-header {
text-shadow: none;
.navbar .divider-vertical {
background-color: transparent;
border-right: none;
}
.navbar .dropdown-menu::after {
border-bottom: 6px solid #3a3f44;
}
.navbar .nav-collapse.in > .nav > li > a,
.navbar .nav-collapse.in > .nav > li.active > a,
.navbar .nav-collapse.in > .nav > li > a:hover,
.navbar .nav-collapse.in > .nav > li.active > a:hover {
color: #bbbfc2;
border: 1px solid transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #bbbfc2;
border: 1px solid transparent;
background-color: transparent;
background-image: none;
}
......@@ -4108,6 +4079,70 @@ div.subnav-fixed {
border-right: none;
}
}
div.subnav {
background-color: #3a3f44;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#52575c), color-stop(70%, #3a3f44), to(#3a3f44));
background-image: -webkit-linear-gradient(#52575c, #3a3f44 70%, #3a3f44);
background-image: -moz-linear-gradient(top, #52575c, #3a3f44 70%, #3a3f44);
background-image: -ms-linear-gradient(#52575c, #3a3f44 70%, #3a3f44);
background-image: -o-linear-gradient(#52575c, #3a3f44 70%, #3a3f44);
background-image: linear-gradient(#52575c, #3a3f44 70%, #3a3f44);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52575c', endColorstr='#3a3f44', GradientType=0);
border: 1px solid transparent;
-webkit-box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
-moz-box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
}
div.subnav .nav > li > a {
color: #bbbfc2;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-right: 1px solid #2e3134;
border-left: 1px solid #52575c;
}
div.subnav .nav > li > a:hover {
color: #bbbfc2;
background-color: #3a3f44;
background-color: #3a3f44;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(280deg, #272b30, #3a3f44);
background-image: -ms-linear-gradient(280deg, #272b30, #3a3f44);
background-image: -webkit-linear-gradient(280deg, #272b30, #3a3f44);
background-image: -o-linear-gradient(280deg, #272b30, #3a3f44);
background-image: linear-gradient(280deg, #272b30, #3a3f44);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
div.subnav .nav > li.active > a,
div.subnav .nav > li.active > a:hover {
color: #bbbfc2;
background-color: #3a3f44;
background-color: #43494f;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(280deg, #30353b, #43494f);
background-image: -ms-linear-gradient(280deg, #30353b, #43494f);
background-image: -webkit-linear-gradient(280deg, #30353b, #43494f);
background-image: -o-linear-gradient(280deg, #30353b, #43494f);
background-image: linear-gradient(280deg, #30353b, #43494f);
border-right: 1px solid #2e3134;
}
div.subnav .nav > li:first-child > a,
div.subnav .nav > li:first-child > a:hover {
border-left: 1px solid transparent;
}
div.subnav.subnav-fixed .nav > li.active:first-child > a,
div.subnav.subnav-fixed .nav > li:first-child > a:hover {
border-left: 1px solid #2e3134;
}
div.subnav .nav > li.active:last-child > a,
div.subnav .nav > li:last-child > a:hover {
border-right: 1px solid #2e3134;
}
div.subnav.subnav-fixed {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
@media (max-width: 768px) {
div.subnav .nav > li + li > a {
border-top: 1px solid transparent;
......@@ -4389,47 +4424,10 @@ div.subnav-fixed {
background-image: linear-gradient(280deg, #272b30, #3a3f44);
border: 1px solid transparent;
}
.nav > li > a,
.nav > li > a:hover,
.nav > li.active > a,
.nav > li.active > a:hover,
.nav-tabs.nav-stacked > li > a,
.nav-tabs.nav-stacked > li > a:hover {
border: none;
background-color: transparent;
color: #bbbfc2;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.dropdown-menu {
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.dropdown-menu,
.dropdown-menu li.active a,
.dropdown-menu li.active a:hover {
background-color: #3a3f44;
}
.dropdown-menu a,
.dropdown-menu li.active a,
.dropdown-menu li a:hover,
.dropdown-menu li.active a:hover,
.dropdown.open .dropdown-toggle {
color: #bbbfc2;
}
.dropdown-menu li a:hover,
.dropdown-menu li.active a:hover {
background-color: #272b30;
}
.navbar .dropdown-menu::after {
border-bottom: 6px solid #3a3f44;
.nav .nav-header {
text-shadow: none;
}
.nav > li > a {
border: none;
-webkit-box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
-moz-box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
background-color: #3a3f44;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#52575c), color-stop(70%, #3a3f44), to(#3a3f44));
background-image: -webkit-linear-gradient(#52575c, #3a3f44 70%, #3a3f44);
......@@ -4439,12 +4437,39 @@ div.subnav-fixed {
background-image: linear-gradient(#52575c, #3a3f44 70%, #3a3f44);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52575c', endColorstr='#3a3f44', GradientType=0);
}
.nav.nav-list .nav-header {
-webkit-box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
-moz-box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
box-shadow: '0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)';
border: none;
color: #757c82;
text-shadow: -1px -1px 0 #111111;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.nav > li.active > a,
.nav > li.active > a:hover {
background-color: transparent;
border: none;
color: #ffffff;
}
.nav > li > a:hover {
background-color: transparent;
color: #bbbfc2;
}
.nav-list {
background-color: #3a3f44;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
.nav-list li > a {
background-image: none;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}
.nav.nav-list .divider {
.nav-list .nav-header {
color: #52575c;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}
.nav-list .divider {
border-bottom: 1px solid #1c1e22;
background-color: transparent;
}
......@@ -4460,6 +4485,23 @@ div.subnav-fixed {
.tabs-right .nav-tabs {
border-left: none;
}
.nav-tabs.nav-stacked > li > a,
.nav-tabs.nav-stacked > li > a:hover {
border: none;
}
.dropdown-menu {
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.dropdown-menu li.active a,
.dropdown-menu li.active a:hover {
background-color: #3a3f44;
}
.dropdown.open .dropdown-toggle {
background-color: #3a3f44;
color: #bbbfc2;
}
label,
input,
button,
......@@ -4496,7 +4538,7 @@ textarea[readonly] {
.label,
.alert {
color: rgba(255, 255, 255, 0.9);
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
......
This diff is collapsed.
......@@ -7,111 +7,136 @@
// -----------------------------------------------------
h1, h2, h3, h4, h5, h6, body, legend, label {
text-shadow: -1px -1px 0 #111;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}
// NAVBAR
// -----------------------------------------------------
.navbar .brand {
font-weight: bold;
}
.navbar .navbar-inner,
div.subnav {
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
}
.navbar .divider-vertical {
background-color: transparent;
border-right: none;
}
.navbar .brand,
.navbar .nav > li > a,
div.subnav .nav > li > a {
color: @grayLighter;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-right: 1px solid darken(@gray, 15%);
}
.navbar .nav > li > a,
div.subnav .nav > li > a {
border-left: 1px solid @gray;
.navbar {
.navbar-inner {
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
}
&:hover {
.brand {
color: @grayLighter;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-right: 1px solid darken(@gray, 15%);
}
.nav > li > a {
color: @grayLighter;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-right: 1px solid darken(@gray, 15%);
border-left: 1px solid @gray;
&:hover {
color: @grayLighter;
background-color: @grayDark;
#gradient > .directional(@grayDarker, @grayDark, 280deg);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
}
.nav > li.active > a,
.nav > li.active > a:hover {
color: @grayLighter;
background-color: @grayDark;
#gradient > .directional(@grayDarker, @grayDark, 280deg);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
border-right: 1px solid darken(@gray, 15%);
}
.navbar-search .search-query {
border: 1px solid darken(@gray, 15%);
}
}
.navbar .nav > li.active > a,
div.subnav .nav > li.active > a,
.navbar .nav > li.active > a:hover,
div.subnav .nav > li.active > a:hover {
color: @grayLighter;
background-color: @grayDark;
#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
border-right: 1px solid darken(@gray, 15%);
}
.divider-vertical {
background-color: transparent;
border-right: none;
}
.dropdown-menu::after {
border-bottom: 6px solid @grayDark;
}
.nav-collapse.in > .nav > li > a,
.nav-collapse.in > .nav > li.active > a,
.nav-collapse.in > .nav > li > a:hover,
.nav-collapse.in > .nav > li.active > a:hover {
.box-shadow(none);
color: @grayLighter;
border: 1px solid transparent;
background-color: transparent;
background-image: none;
}
div.subnav .nav > li:first-child > a,
div.subnav .nav > li:first-child > a:hover {
border-left: 1px solid transparent;
.nav-collapse.in > .nav > li > a:hover,
.nav-collapse.in > .nav > li.active > a:hover {
background-color: @grayDarker;
}
}
div.subnav.subnav-fixed .nav > li.active:first-child > a,
div.subnav.subnav-fixed .nav > li:first-child > a:hover {
border-left: 1px solid darken(@gray, 15%);
@media (max-width: 979px) {
.navbar .brand {
border-right: none;
}
}
div.subnav .nav > li.active:last-child > a,
div.subnav .nav > li:last-child > a:hover {
border-right: 1px solid darken(@gray, 15%);
}
div.subnav {
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
border: 1px solid transparent;
.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
}
div.subnav-fixed {
.box-shadow(none);
}
.nav > li > a {
color: @grayLighter;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-right: 1px solid darken(@gray, 15%);
border-left: 1px solid @gray;
&:hover {
color: @grayLighter;
background-color: @grayDark;
#gradient > .directional(@grayDarker, @grayDark, 280deg);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
}
.navbar-search .search-query {
border: 1px solid darken(@gray, 15%);
}
.nav .nav-header {
text-shadow: none;
}
.nav > li.active > a,
.nav > li.active > a:hover {
color: @grayLighter;
background-color: @grayDark;
#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
border-right: 1px solid darken(@gray, 15%);
}
.navbar .nav-collapse.in > .nav > li > a,
.navbar .nav-collapse.in > .nav > li.active > a,
.navbar .nav-collapse.in > .nav > li > a:hover,
.navbar .nav-collapse.in > .nav > li.active > a:hover {
color: @grayLighter;
border: 1px solid transparent;
.box-shadow(none);
background-color: transparent;
background-image: none;
}
.nav > li:first-child > a,
.nav > li:first-child > a:hover {
border-left: 1px solid transparent;
}
.navbar .nav-collapse.in > .nav > li > a:hover,
.navbar .nav-collapse.in > .nav > li.active > a:hover {
background-color: @grayDarker;
}
&.subnav-fixed .nav > li.active:first-child > a,
&.subnav-fixed .nav > li:first-child > a:hover {
border-left: 1px solid darken(@gray, 15%);
}
@media (max-width: 979px) {
.navbar .brand {
border-right: none;
.nav > li.active:last-child > a,
.nav > li:last-child > a:hover {
border-right: 1px solid darken(@gray, 15%);
}
&.subnav-fixed {
.box-shadow(none);
}
}
@media (max-width: 768px) {
div.subnav .nav > li + li > a {
border-top: 1px solid transparent;
......@@ -136,6 +161,7 @@ div.subnav-fixed {
.btn-primary {
.buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
}
.btn-warning {
.buttonBackground(lighten(@orange, 15%), @orange);
}
......@@ -223,61 +249,49 @@ div.subnav-fixed {
border: 1px solid transparent;
}
.nav > li > a,
.nav > li > a:hover,
.nav > li.active > a,
.nav > li.active > a:hover,
.nav-tabs.nav-stacked > li > a,
.nav-tabs.nav-stacked > li > a:hover {
border: none;
background-color: transparent;
color: @grayLighter;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
.nav .nav-header {
text-shadow: none;
}
.dropdown-menu {
.box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
.nav > li > a {
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
border: none;
color: @grayLight;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.dropdown-menu,
.dropdown-menu li.active a,
.dropdown-menu li.active a:hover {
background-color: @grayDark;
.nav > li.active > a,
.nav > li.active > a:hover {
background-color: transparent;
border: none;
color: @white;
}
.dropdown-menu a,
.dropdown-menu li.active a,
.dropdown-menu li a:hover,
.dropdown-menu li.active a:hover,
.dropdown.open .dropdown-toggle {
.nav > li > a:hover {
background-color: transparent;
color: @grayLighter;
}
.dropdown-menu li a:hover,
.dropdown-menu li.active a:hover {
background-color: @grayDarker;
}
.navbar .dropdown-menu::after {
border-bottom: 6px solid @grayDark;