Skip to content

Commit

Permalink
all: change how nav-collapse is styled to use a media query
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomaspark
thomaspark committed Aug 30, 2012
1 parent c47bd57 commit d4e7d3f
Show file tree
Hide file tree
Showing 33 changed files with 579 additions and 621 deletions.
61 changes: 32 additions & 29 deletions amelia/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4836,41 +4836,44 @@ hr {
.navbar .btn-group {
padding: 4px;
}
.navbar .nav-collapse.collapse .nav li > a {
color: rgba(255, 255, 255, 0.9);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.navbar .nav-collapse.collapse .nav li > a:hover {
background-color: #d92432;
}
.navbar .nav-collapse.collapse .dropdown-menu li > a:hover,
.navbar .nav-collapse.collapse .dropdown-menu li > a:focus,
.navbar .nav-collapse.collapse .dropdown-submenu:hover > a {
background-image: none;
}
.navbar .nav-collapse.collapse .navbar-form,
.navbar .nav-collapse.collapse .navbar-search {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
}
.navbar .nav-collapse.collapse .navbar-search .search-query {
border: 2px solid rgba(255, 255, 255, 0.9);
}
.navbar .nav-collapse.collapse .nav-header {
color: rgba(255, 255, 255, 0.5);
}
.navbar-inverse .dropdown-menu li > a:hover,
.navbar-inverse .dropdown-menu li > a:focus,
.navbar-inverse .dropdown-submenu:hover > a {
background-image: none;
background-color: #debb27;
}
.navbar-inverse .nav-collapse.collapse .nav li > a:hover {
background-color: #e5c953;
@media (max-width: 979px) {
.navbar .nav-collapse .nav li > a {
color: rgba(255, 255, 255, 0.9);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.navbar .nav-collapse .nav li > a:hover {
background-color: #d92432;
}
.navbar .nav-collapse .dropdown-menu li > a:hover,
.navbar .nav-collapse .dropdown-menu li > a:focus,
.navbar .nav-collapse .dropdown-submenu:hover > a {
background-image: none;
}
.navbar .nav-collapse .navbar-form,
.navbar .nav-collapse .navbar-search {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
}
.navbar .nav-collapse .navbar-search .search-query {
border: 2px solid rgba(255, 255, 255, 0.9);
}
.navbar .nav-collapse .nav-header {
color: rgba(255, 255, 255, 0.5);
}
.navbar-inverse .nav-collapse .nav li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
background-color: #e5c953 !important;
}
}
div.subnav {
background-color: rgba(42, 99, 105, 0.9);
Expand Down
11 changes: 2 additions & 9 deletions amelia/bootstrap.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 19 additions & 14 deletions amelia/bootswatch.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,9 +104,23 @@ hr {
padding: 4px;
}

.nav-collapse.collapse {
&-inverse {

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
background-image: none;
background-color: @yellow;
}
}
}

@media (max-width: @navbarCollapseWidth) {

.navbar .nav-collapse {

.nav li > a {

color: @textColor;
.border-radius(0);

Expand Down Expand Up @@ -136,20 +150,11 @@ hr {
}
}

&-inverse {
.navbar-inverse .nav-collapse {

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
background-image: none;
background-color: @yellow;
}

.nav-collapse.collapse {

.nav li > a:hover {
background-color: lighten(@navbarInverseBackground, 10%);
}
.nav li > a:hover,
.dropdown-menu a:hover {
background-color: lighten(@navbarInverseBackground, 10%) !important;
}
}
}
Expand Down
84 changes: 42 additions & 42 deletions cerulean/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4749,20 +4749,18 @@ a.badge:hover {
.affix {
position: fixed;
}
.navbar {
font-family: 'Telex', sans-serif;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.navbar .brand {
padding: 16px 20px 14px;
text-shadow: inherit;
font-family: 'Telex', sans-serif;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.navbar li {
line-height: 20px;
}
.navbar .nav > li > a {
padding: 16px 10px 14px;
text-shadow: inherit;
font-family: 'Telex', sans-serif;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.navbar .search-query {
border: 1px solid #178acc;
Expand All @@ -4776,45 +4774,47 @@ a.badge:hover {
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.navbar .nav-collapse.collapse .nav li > a {
color: #ffffff;
}
.navbar .nav-collapse.collapse .nav li > a:hover {
background-color: #2B7CAC;
}
.navbar .nav-collapse.collapse .nav .active > a {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: #2B7CAC;
}
.navbar .nav-collapse.collapse .dropdown-menu li > a:hover,
.navbar .nav-collapse.collapse .dropdown-menu li > a:focus,
.navbar .nav-collapse.collapse .dropdown-submenu:hover > a {
background-image: none;
}
.navbar .nav-collapse.collapse .navbar-form,
.navbar .nav-collapse.collapse .navbar-search {
border: none;
}
.navbar .nav-collapse.collapse .nav-header {
color: #2B7CAC;
}
.navbar-inverse {
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
.navbar-inverse .nav-collapse.collapse .nav li > a {
color: #555555;
}
.navbar-inverse .nav-collapse.collapse .nav li > a:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.navbar-inverse .nav-collapse.collapse .nav .active > a {
background-color: rgba(0, 0, 0, 0.1);
}
.navbar-inverse .navbar-search .search-query {
color: #555555;
}
@media (max-width: 979px) {
.navbar .nav-collapse .nav li > a {
font-family: 'Telex', sans-serif;
font-weight: normal;
color: #ffffff;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.navbar .nav-collapse .nav li > a:hover {
background-color: #2B7CAC;
}
.navbar .nav-collapse .nav .active > a {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: #2B7CAC;
}
.navbar .nav-collapse .dropdown-menu li > a:hover,
.navbar .nav-collapse .dropdown-menu li > a:focus,
.navbar .nav-collapse .dropdown-submenu:hover > a {
background-image: none;
}
.navbar .nav-collapse .navbar-form,
.navbar .nav-collapse .navbar-search {
border: none;
}
.navbar .nav-collapse .nav-header {
color: #2B7CAC;
}
.navbar-inverse .nav-collapse .nav li > a {
color: #555555;
}
.navbar-inverse .nav-collapse .nav li > a:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.navbar-inverse .nav-collapse .nav .active > a {
background-color: rgba(0, 0, 0, 0.1);
}
}
div.subnav {
font-family: 'Telex', sans-serif;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
Expand Down
13 changes: 3 additions & 10 deletions cerulean/bootstrap.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

45 changes: 25 additions & 20 deletions cerulean/bootswatch.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,11 @@

.navbar {

font-family: @headingsFontFamily;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);

.brand {
padding: 16px 20px 14px;
text-shadow: inherit;
font-family: @headingsFontFamily;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

li {
Expand All @@ -30,7 +29,8 @@

.nav > li > a {
padding: 16px 10px 14px;
text-shadow: inherit;
font-family: @headingsFontFamily;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.search-query {
Expand All @@ -48,10 +48,24 @@
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.nav-collapse.collapse {
&-inverse {

.navbar-search .search-query {
color: @textColor;
}
}
}

@media (max-width: @navbarCollapseWidth) {

.navbar .nav-collapse {

.nav li > a {

font-family: @headingsFontFamily;
font-weight: normal;
color: @white;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);

&:hover {
background-color: #2B7CAC;
Expand Down Expand Up @@ -79,27 +93,18 @@
}
}

&-inverse {

text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);

.nav-collapse.collapse {
.navbar-inverse .nav-collapse {

.nav li > a {
color: @navbarInverseLinkColor;

&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
}
.nav li > a {
color: @navbarInverseLinkColor;

.nav .active > a {
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
}

.navbar-search .search-query {
color: @textColor;
.nav .active > a {
background-color: rgba(0, 0, 0, 0.1);
}
}
}
Expand Down
Loading

0 comments on commit d4e7d3f

Please sign in to comment.