cerulean: widened navbar
authorThomas Park <thomas@thomaspark.me>
Sat, 4 Aug 2012 21:20:12 +0000 (17:20 -0400)
committerThomas Park <thomas@thomaspark.me>
Sat, 4 Aug 2012 21:20:12 +0000 (17:20 -0400)
cerulean/bootstrap.css
cerulean/bootstrap.min.css
cerulean/bootswatch.less
cerulean/variables.less

index f2ab7b0..4fc2964 100644 (file)
@@ -2981,7 +2981,7 @@ input[type="submit"].btn.btn-mini {
   margin-bottom: 18px;
 }
 .navbar-inner {
-  min-height: 40px;
+  min-height: 50px;
   padding-left: 20px;
   padding-right: 20px;
   background-color: #50a8dc;
@@ -3015,7 +3015,7 @@ input[type="submit"].btn.btn-mini {
 .navbar .brand {
   float: left;
   display: block;
-  padding: 8px 20px 12px;
+  padding: 13px 20px 17px;
   margin-left: -20px;
   font-size: 20px;
   font-weight: 200;
@@ -3024,7 +3024,7 @@ input[type="submit"].btn.btn-mini {
 }
 .navbar .navbar-text {
   margin-bottom: 0;
-  line-height: 40px;
+  line-height: 50px;
 }
 .navbar .navbar-link {
   color: #f5f5f5;
@@ -3034,7 +3034,7 @@ input[type="submit"].btn.btn-mini {
 }
 .navbar .btn,
 .navbar .btn-group {
-  margin-top: 5px;
+  margin-top: 10px;
 }
 .navbar .btn-group .btn {
   margin: 0;
@@ -3055,7 +3055,7 @@ input[type="submit"].btn.btn-mini {
 .navbar-form select,
 .navbar-form .radio,
 .navbar-form .checkbox {
-  margin-top: 5px;
+  margin-top: 10px;
 }
 .navbar-form input,
 .navbar-form select {
@@ -3079,7 +3079,7 @@ input[type="submit"].btn.btn-mini {
 .navbar-search {
   position: relative;
   float: left;
-  margin-top: 6px;
+  margin-top: 11px;
   margin-bottom: 0;
 }
 .navbar-search .search-query {
@@ -3163,7 +3163,7 @@ input[type="submit"].btn.btn-mini {
 }
 .navbar .nav > li > a {
   float: none;
-  padding: 9px 10px 11px;
+  padding: 14px 10px 16px;
   line-height: 19px;
   color: #f5f5f5;
   text-decoration: none;
@@ -3172,12 +3172,12 @@ input[type="submit"].btn.btn-mini {
 .navbar .btn {
   display: inline-block;
   padding: 4px 10px 4px;
-  margin: 5px 5px 6px;
+  margin: 10px 5px 11px;
   line-height: 18px;
 }
 .navbar .btn-group {
   margin: 0;
-  padding: 5px 5px 6px;
+  padding: 10px 5px 11px;
 }
 .navbar .nav > li > a:hover {
   background-color: transparent;
@@ -3191,7 +3191,7 @@ input[type="submit"].btn.btn-mini {
   background-color: rgba(0, 0, 0, 0.2);
 }
 .navbar .divider-vertical {
-  height: 40px;
+  height: 50px;
   width: 1px;
   margin: 0 9px;
   overflow: hidden;
@@ -4213,13 +4213,16 @@ a.badge:hover {
   background-repeat: no-repeat;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#369bd7', endColorstr='#61b0df', GradientType=0);
 }
+.navbar .brand {
+  padding: 15px 20px;
+}
+.navbar .nav > li > a {
+  padding: 16px 10px 14px;
+}
 .navbar .nav li.dropdown.active > .dropdown-toggle,
 .navbar .nav li.dropdown.active.open > .dropdown-toggle {
   background-color: rgba(0, 0, 0, 0.2);
 }
-.navbar .search-query {
-  border: 1px solid #2480b6;
-}
 .navbar .nav-collapse.in > .nav > li .dropdown-menu a {
   color: #ffffff;
 }
@@ -4232,9 +4235,18 @@ a.badge:hover {
 .navbar .nav-collapse.in .nav li > a:hover {
   background-color: #2B7CAC;
 }
+.navbar .search-query {
+  border: 1px solid #2480b6;
+}
 .navbar .btn-navbar:hover {
   background-color: #cccccc;
 }
+.navbar .navbar-text {
+  padding: 19px 10px 18px;
+  line-height: 13px;
+  color: rgba(0, 0, 0, 0.5);
+  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
+}
 div.subnav {
   font-family: 'Telex', sans-serif;
 }
index 3254e84..46cee3e 100644 (file)
@@ -541,22 +541,22 @@ button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-
 .tabs-right>.nav-tabs>li>a:hover{border-color:#f5f5f5 #f5f5f5 #f5f5f5 #dddddd;}
 .tabs-right>.nav-tabs .active>a,.tabs-right>.nav-tabs .active>a:hover{border-color:#ddd #ddd #ddd transparent;*border-left-color:#ffffff;}
 .navbar{*position:relative;*z-index:2;overflow:visible;margin-bottom:18px;}
-.navbar-inner{min-height:40px;padding-left:20px;padding-right:20px;background-color:#50a8dc;background-image:-moz-linear-gradient(top, #61b0df, #369bd7);background-image:-ms-linear-gradient(top, #61b0df, #369bd7);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#61b0df), to(#369bd7));background-image:-webkit-linear-gradient(top, #61b0df, #369bd7);background-image:-o-linear-gradient(top, #61b0df, #369bd7);background-image:linear-gradient(top, #61b0df, #369bd7);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#61b0df', endColorstr='#369bd7', GradientType=0);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);}
+.navbar-inner{min-height:50px;padding-left:20px;padding-right:20px;background-color:#50a8dc;background-image:-moz-linear-gradient(top, #61b0df, #369bd7);background-image:-ms-linear-gradient(top, #61b0df, #369bd7);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#61b0df), to(#369bd7));background-image:-webkit-linear-gradient(top, #61b0df, #369bd7);background-image:-o-linear-gradient(top, #61b0df, #369bd7);background-image:linear-gradient(top, #61b0df, #369bd7);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#61b0df', endColorstr='#369bd7', GradientType=0);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);}
 .navbar .container{width:auto;}
 .nav-collapse.collapse{height:auto;}
 .navbar{color:#f5f5f5;}.navbar .brand:hover{text-decoration:none;}
-.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#f5f5f5;}
-.navbar .navbar-text{margin-bottom:0;line-height:40px;}
+.navbar .brand{float:left;display:block;padding:13px 20px 17px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#f5f5f5;}
+.navbar .navbar-text{margin-bottom:0;line-height:50px;}
 .navbar .navbar-link{color:#f5f5f5;}.navbar .navbar-link:hover{color:#ffffff;}
-.navbar .btn,.navbar .btn-group{margin-top:5px;}
+.navbar .btn,.navbar .btn-group{margin-top:10px;}
 .navbar .btn-group .btn{margin:0;}
 .navbar-form{margin-bottom:0;*zoom:1;}.navbar-form:before,.navbar-form:after{display:table;content:"";}
 .navbar-form:after{clear:both;}
-.navbar-form input,.navbar-form select,.navbar-form .radio,.navbar-form .checkbox{margin-top:5px;}
+.navbar-form input,.navbar-form select,.navbar-form .radio,.navbar-form .checkbox{margin-top:10px;}
 .navbar-form input,.navbar-form select{display:inline-block;margin-bottom:0;}
 .navbar-form input[type="image"],.navbar-form input[type="checkbox"],.navbar-form input[type="radio"]{margin-top:3px;}
 .navbar-form .input-append,.navbar-form .input-prepend{margin-top:6px;white-space:nowrap;}.navbar-form .input-append input,.navbar-form .input-prepend input{margin-top:0;}
-.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;background-color:#a0d0ec;border:1px solid #288ecb;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);box-shadow:inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#ffffff;}
+.navbar-search{position:relative;float:left;margin-top:11px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;background-color:#a0d0ec;border:1px solid #288ecb;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);box-shadow:inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#ffffff;}
 .navbar-search .search-query:-ms-input-placeholder{color:#ffffff;}
 .navbar-search .search-query::-webkit-input-placeholder{color:#ffffff;}
 .navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#333333;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;}
@@ -568,12 +568,12 @@ button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-
 .navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}
 .navbar .nav.pull-right{float:right;}
 .navbar .nav>li{display:block;float:left;}
-.navbar .nav>li>a{float:none;padding:9px 10px 11px;line-height:19px;color:#f5f5f5;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
-.navbar .btn{display:inline-block;padding:4px 10px 4px;margin:5px 5px 6px;line-height:18px;}
-.navbar .btn-group{margin:0;padding:5px 5px 6px;}
+.navbar .nav>li>a{float:none;padding:14px 10px 16px;line-height:19px;color:#f5f5f5;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
+.navbar .btn{display:inline-block;padding:4px 10px 4px;margin:10px 5px 11px;line-height:18px;}
+.navbar .btn-group{margin:0;padding:10px 5px 11px;}
 .navbar .nav>li>a:hover{background-color:transparent;color:#ffffff;text-decoration:none;}
 .navbar .nav .active>a,.navbar .nav .active>a:hover{color:#ffffff;text-decoration:none;background-color:rgba(0, 0, 0, 0.2);}
-.navbar .divider-vertical{height:40px;width:1px;margin:0 9px;overflow:hidden;background-color:#369bd7;border-right:1px solid #61b0df;}
+.navbar .divider-vertical{height:50px;width:1px;margin:0 9px;overflow:hidden;background-color:#369bd7;border-right:1px solid #61b0df;}
 .navbar .nav.pull-right{margin-left:10px;margin-right:0;}
 .navbar .btn-navbar{display:none;float:right;padding:7px 10px;margin-left:5px;margin-right:5px;background-color:#50a8dc;background-image:-moz-linear-gradient(top, #61b0df, #369bd7);background-image:-ms-linear-gradient(top, #61b0df, #369bd7);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#61b0df), to(#369bd7));background-image:-webkit-linear-gradient(top, #61b0df, #369bd7);background-image:-o-linear-gradient(top, #61b0df, #369bd7);background-image:linear-gradient(top, #61b0df, #369bd7);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#61b0df', endColorstr='#369bd7', GradientType=0);border-color:#369bd7 #369bd7 #2071a1;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#369bd7;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);}.navbar .btn-navbar:hover,.navbar .btn-navbar:active,.navbar .btn-navbar.active,.navbar .btn-navbar.disabled,.navbar .btn-navbar[disabled]{background-color:#369bd7;*background-color:#288ecb;}
 .navbar .btn-navbar:active,.navbar .btn-navbar.active{background-color:#2480b6 \9;}
@@ -713,11 +713,14 @@ a.label:hover,a.badge:hover{color:#ffffff;text-decoration:none;cursor:pointer;}
 .show{display:block;}
 .invisible{visibility:hidden;}
 .navbar{font-family:'Telex',sans-serif;}.navbar .navbar-inner{background-color:#3f9fd9;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#369bd7), color-stop(90%, #369bd7), to(#61b0df));background-image:-webkit-linear-gradient(#369bd7, #369bd7 90%, #61b0df);background-image:-moz-linear-gradient(top, #369bd7, #369bd7 90%, #61b0df);background-image:-ms-linear-gradient(#369bd7, #369bd7 90%, #61b0df);background-image:-o-linear-gradient(#369bd7, #369bd7 90%, #61b0df);background-image:linear-gradient(#369bd7, #369bd7 90%, #61b0df);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#369bd7', endColorstr='#61b0df', GradientType=0);}
+.navbar .brand{padding:15px 20px;}
+.navbar .nav>li>a{padding:16px 10px 14px;}
 .navbar .nav li.dropdown.active>.dropdown-toggle,.navbar .nav li.dropdown.active.open>.dropdown-toggle{background-color:rgba(0, 0, 0, 0.2);}
-.navbar .search-query{border:1px solid #2480b6;}
 .navbar .nav-collapse.in>.nav>li .dropdown-menu a{color:#ffffff;}.navbar .nav-collapse.in>.nav>li .dropdown-menu a:hover{color:#ffffff;}
 .navbar .nav-collapse.in .nav li>a{color:#ffffff;}.navbar .nav-collapse.in .nav li>a:hover{background-color:#2B7CAC;}
+.navbar .search-query{border:1px solid #2480b6;}
 .navbar .btn-navbar:hover{background-color:#cccccc;}
+.navbar .navbar-text{padding:19px 10px 18px;line-height:13px;color:rgba(0, 0, 0, 0.5);text-shadow:1px 1px 0 rgba(255, 255, 255, 0.25);}
 div.subnav{font-family:'Telex',sans-serif;}
 .btn{background-color:#ffffff;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(5%, #ffffff), to(#ffffff));background-image:-webkit-linear-gradient(#ffffff, #ffffff 5%, #ffffff);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 5%, #ffffff);background-image:-ms-linear-gradient(#ffffff, #ffffff 5%, #ffffff);background-image:-o-linear-gradient(#ffffff, #ffffff 5%, #ffffff);background-image:linear-gradient(#ffffff, #ffffff 5%, #ffffff);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);}.btn:hover{background-position:0 0;}
 .btn-primary{background-color:#43a1da;background-image:-moz-linear-gradient(top, #4ba6db, #369bd7);background-image:-ms-linear-gradient(top, #4ba6db, #369bd7);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#4ba6db), to(#369bd7));background-image:-webkit-linear-gradient(top, #4ba6db, #369bd7);background-image:-o-linear-gradient(top, #4ba6db, #369bd7);background-image:linear-gradient(top, #4ba6db, #369bd7);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4ba6db', endColorstr='#369bd7', GradientType=0);border-color:#369bd7 #369bd7 #2071a1;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#369bd7;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{background-color:#369bd7;*background-color:#288ecb;}
index c552dcf..ff129db 100755 (executable)
                #gradient > .vertical-three-colors(@navbarBackground, @navbarBackground, 90%, @navbarBackgroundHighlight);
        }
 
+       .brand {
+               padding: 15px 20px;
+       }
+
+       .nav > li > a {
+               padding: 16px 10px 14px;
+       }
+
        .nav li.dropdown.active > .dropdown-toggle,
        .nav li.dropdown.active.open > .dropdown-toggle {
                background-color: @navbarLinkBackgroundActive;
        }
 
-       .search-query {
-               border: 1px solid darken(@linkColor, 10%);
-       }
-
        .nav-collapse.in > .nav > li .dropdown-menu a {
                color: @white;
 
                }
        }
 
+       .search-query {
+               border: 1px solid darken(@linkColor, 10%);
+       }
+
        .btn-navbar:hover {
            background-color: darken(@white, 20%);
        }
+
+       .navbar-text {
+               padding: 19px 10px 18px;
+               line-height: 13px;
+               color: rgba(0, 0, 0, 0.5);
+               text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
+       }
 }
 
 div.subnav {
index 6208176..3d35e2f 100755 (executable)
 
 // Navbar
 // -------------------------
-@navbarHeight:                    40px;
+@navbarHeight:                    50px;
 @navbarBackground:                @linkColor;
 @navbarBackgroundHighlight:       lighten(@linkColor, 10%);