subnav mobile fix
authorThomas Park <thomas@thomaspark.me>
Tue, 14 Feb 2012 16:18:59 +0000 (11:18 -0500)
committerThomas Park <thomas@thomaspark.me>
Tue, 14 Feb 2012 16:18:59 +0000 (11:18 -0500)
cyborg/bootstrap.css
cyborg/bootstrap.min.css
cyborg/bootswatch.less

index ef42003..39797b4 100644 (file)
@@ -3354,7 +3354,8 @@ h2,
 h3,
 h4,
 h5,
-.navbar .brand {
+.navbar .brand,
+.navbar .nav-collapse.collapse .nav li > a {
   color: #eeeeee;
   font-weight: normal;
   text-shadow: none;
@@ -3485,17 +3486,15 @@ div.subnav .nav .dropdown.open .dropdown-menu li > a:hover {
   border-bottom: 0;
   background: #33b5e5;
 }
-.nav.nav-tabs .active a:hover {
-  background-color: #33b5e5;
-  color: #ffffff;
-}
-.nav.nav-tabs .dropdown.open .dropdown-toggle, .nav.nav-pills .dropdown.open .dropdown-toggle {
-  background-color: #060606 !important;
-  border-top: 0;
-  border: 1px solid #222;
-}
-.nav.nav-tabs .dropdown.open .dropdown-menu li > a:hover, .nav.nav-pills .dropdown.open .dropdown-menu li > a:hover {
-  border-bottom: 0;
+@media (max-width: 768px) {
+  div.subnav .nav > li + li > a, div.subnav .nav > li:first-child > a {
+    border-top: 1px solid #222;
+    border-left: 1px solid #222;
+  }
+  .subnav .nav > li + li > a:hover, .subnav .nav > li:first-child > a:hover {
+    border-bottom: 0;
+    background-color: #33b5e5;
+  }
 }
 .table-bordered {
   border: 1px solid #222;
@@ -3563,6 +3562,18 @@ select,
 .nav-tabs > .active > a:hover {
   border: 1px solid #222 !important;
 }
+.nav.nav-tabs .active a:hover {
+  background-color: #33b5e5;
+  color: #ffffff;
+}
+.nav.nav-tabs .dropdown.open .dropdown-toggle, .nav.nav-pills .dropdown.open .dropdown-toggle {
+  background-color: #060606 !important;
+  border-top: 0;
+  border: 1px solid #222;
+}
+.nav.nav-tabs .dropdown.open .dropdown-menu li > a:hover, .nav.nav-pills .dropdown.open .dropdown-menu li > a:hover {
+  border-bottom: 0;
+}
 .tabbable .nav-tabs, .thumbnail {
   border-color: #222;
 }
index dcd09b1..55abb4b 100644 (file)
@@ -604,7 +604,7 @@ a.thumbnail:hover{border-color:#33b5e5;-webkit-box-shadow:0 1px 4px rgba(0, 105,
 .carousel-caption h4,.carousel-caption p{color:#ffffff;}
 .hero-unit{padding:60px;margin-bottom:30px;background-color:#f5f5f5;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
 .hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
-h1,h2,h3,h4,h5,.navbar .brand{color:#eeeeee;font-weight:normal;text-shadow:none;}
+h1,h2,h3,h4,h5,.navbar .brand,.navbar .nav-collapse.collapse .nav li>a{color:#eeeeee;font-weight:normal;text-shadow:none;}
 .navbar{font-size:16px;}
 label,input,button,select,textarea{font-family:'Droid Sans',sans-serif;color:#999999;}
 .navbar .search-query::-moz-placeholder{font-family:'Droid Sans',sans-serif;color:#999999;}
@@ -630,10 +630,7 @@ div.subnav .nav li>a,div.subnav .nav .active a{border-left:1px solid #222;border
 .subnav .nav>li>a:hover,.subnav .nav>li.active>a:hover,.subnav .nav>li:first-child>a:hover{background:transparent;border-bottom:2px solid #33b5e5;border-left:1px solid #222;color:#ffffff;}
 div.subnav .nav .dropdown.open .dropdown-toggle{border:0;border-left:1px solid #222;border-bottom:2px solid #33b5e5;background-color:#060606;}
 div.subnav .nav .dropdown.open .dropdown-menu{background-color:#020202;border-left:0;}div.subnav .nav .dropdown.open .dropdown-menu li>a:hover{border-bottom:0;background:#33b5e5;}
-.nav.nav-tabs .active a:hover{background-color:#33b5e5;color:#ffffff;}
-.nav.nav-tabs .dropdown.open .dropdown-toggle,.nav.nav-pills .dropdown.open .dropdown-toggle{background-color:#060606 !important;border-top:0;border:1px solid #222;}
-.nav.nav-tabs .dropdown.open .dropdown-menu li>a:hover,.nav.nav-pills .dropdown.open .dropdown-menu li>a:hover{border-bottom:0;}
-.table-bordered{border:1px solid #222;}.table-bordered th+th,.table-bordered td+td,.table-bordered th+td,.table-bordered td+th{border-left:1px solid #222;}
+@media (max-width:768px){div.subnav .nav>li+li>a,div.subnav .nav>li:first-child>a{border-top:1px solid #222;border-left:1px solid #222;} .subnav .nav>li+li>a:hover,.subnav .nav>li:first-child>a:hover{border-bottom:0;background-color:#33b5e5;}}.table-bordered{border:1px solid #222;}.table-bordered th+th,.table-bordered td+td,.table-bordered th+td,.table-bordered td+th{border-left:1px solid #222;}
 .table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0;}
 .table th,.table td{border-top:1px solid #222;}
 .breadcrumb,.table-striped tbody tr:nth-child(odd) td,.table-striped tbody tr:nth-child(odd) th{background-color:rgba(40, 40, 40, 0.5);}
@@ -645,6 +642,9 @@ input,textarea,select,.uneditable-input{color:#282828;}
 .nav-list li>a:hover,.nav-tabs li>a:hover,.nav-tabs li.active>a,.nav-pills li>a:hover,.nav-stacked li>a:hover,.nav-stacked li.active>a{background-color:#33b5e5;color:#ffffff;}
 .nav-tabs{border-bottom:1px solid #222;}
 .nav-stacked>li>a,.nav-tabs>li>a:hover,.nav-tabs>.active>a,.nav-tabs>.active>a:hover{border:1px solid #222 !important;}
+.nav.nav-tabs .active a:hover{background-color:#33b5e5;color:#ffffff;}
+.nav.nav-tabs .dropdown.open .dropdown-toggle,.nav.nav-pills .dropdown.open .dropdown-toggle{background-color:#060606 !important;border-top:0;border:1px solid #222;}
+.nav.nav-tabs .dropdown.open .dropdown-menu li>a:hover,.nav.nav-pills .dropdown.open .dropdown-menu li>a:hover{border-bottom:0;}
 .tabbable .nav-tabs,.thumbnail{border-color:#222;}
 .breadcrumb{background-color:transparent;background-image:none;border-width:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:14px;}.breadcrumb li>a{color:#33b5e5;text-shadow:none;}
 .breadcrumb li.active{text-shadow:none;}
index 6f567cc..c4ce362 100755 (executable)
@@ -8,7 +8,7 @@
 // Ubuntu web font
 @import url('http://fonts.googleapis.com/css?family=Droid+Sans:400,700');
 
-h1, h2, h3, h4, h5, .navbar .brand {
+h1, h2, h3, h4, h5, .navbar .brand, .navbar .nav-collapse.collapse .nav li > a {
        color: @grayLighter;
        font-weight: normal;
        text-shadow: none;
@@ -163,20 +163,19 @@ div.subnav .nav .dropdown.open {
        }
 }
 
-.nav.nav-tabs .active a:hover {
-       background-color: @blue;
-       color: @white;
-}
-
-.nav.nav-tabs .dropdown.open,
-.nav.nav-pills .dropdown.open {
-       .dropdown-toggle {
-               background-color: #060606 !important;
-               border-top: 0;
-               border: 1px solid #222;
+@media (max-width: 768px) {
+       div.subnav .nav > li + li > a,
+       div.subnav .nav > li:first-child > a {
+               border-top: 1px solid #222;
+               border-left: 1px solid #222;
+       }
+       
+       .subnav .nav > li + li > a:hover,
+       .subnav .nav > li:first-child > a:hover {
+                       border-bottom: 0;
+                       background-color: @blue;
        }
        
-       .dropdown-menu li > a:hover { border-bottom: 0; }
 }
 
 // TABLES
@@ -260,6 +259,22 @@ input, textarea, select, .uneditable-input {
        border: 1px solid #222 !important;
 }
 
+.nav.nav-tabs .active a:hover {
+       background-color: @blue;
+       color: @white;
+}
+
+.nav.nav-tabs .dropdown.open,
+.nav.nav-pills .dropdown.open {
+       .dropdown-toggle {
+               background-color: #060606 !important;
+               border-top: 0;
+               border: 1px solid #222;
+       }
+       
+       .dropdown-menu li > a:hover { border-bottom: 0; }
+}
+
 .tabbable .nav-tabs, .thumbnail {
        border-color: #222;
 }