diff options
author | Thomas Park <thomas@thomaspark.me> | 2012-08-30 10:29:07 -0400 |
---|---|---|
committer | Thomas Park <thomas@thomaspark.me> | 2012-08-30 10:29:07 -0400 |
commit | d4e7d3f04894d308c2278002012fccb6de09b610 (patch) | |
tree | eb7e084d0d7f8178827ff3c4b4d258e909d92f73 /cerulean/bootswatch.less | |
parent | c47bd572e125009f4fd81a8ee3c419d66f0d83ad (diff) |
all: change how nav-collapse is styled to use a media query
Diffstat (limited to 'cerulean/bootswatch.less')
-rwxr-xr-x | cerulean/bootswatch.less | 45 |
1 files changed, 25 insertions, 20 deletions
diff --git a/cerulean/bootswatch.less b/cerulean/bootswatch.less index 837d8b8c..16270465 100755 --- a/cerulean/bootswatch.less +++ b/cerulean/bootswatch.less @@ -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 { @@ -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 { @@ -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; @@ -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); } } } |