0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00

clean up search form in navbar, add new variable for placeholder text color

This commit is contained in:
Mark Otto 2012-03-10 16:15:54 -08:00
parent f4ac080f9e
commit a3e9fc547c
6 changed files with 21 additions and 25 deletions

Binary file not shown.

View File

@ -2881,10 +2881,8 @@ input[type="submit"].btn.btn-small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: #ffffff; color: #ffffff;
color: rgba(255, 255, 255, 0.75); background-color: #626262;
background: #666; border: 1px solid #000000;
background: rgba(255, 255, 255, 0.3);
border: 1px solid #111;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
@ -2894,16 +2892,11 @@ input[type="submit"].btn.btn-small {
-o-transition: none; -o-transition: none;
transition: none; transition: none;
} }
.navbar-search .search-query :-moz-placeholder { .navbar-search .search-query:-moz-placeholder {
color: #eeeeee; color: #cccccc;
} }
.navbar-search .search-query ::-webkit-input-placeholder { .navbar-search .search-query::-webkit-input-placeholder {
color: #eeeeee; color: #cccccc;
}
.navbar-search .search-query:hover {
color: #ffffff;
background-color: #999999;
background-color: rgba(255, 255, 255, 0.5);
} }
.navbar-search .search-query:focus, .navbar-search .search-query:focus,
.navbar-search .search-query.focused { .navbar-search .search-query.focused {

View File

@ -327,6 +327,8 @@
<input type="text" class="span3" placeholder="transparent"> <input type="text" class="span3" placeholder="transparent">
<label>@navbarLinkBackgroundActive</label> <label>@navbarLinkBackgroundActive</label>
<input type="text" class="span3" placeholder="@navbarBackground"> <input type="text" class="span3" placeholder="@navbarBackground">
<label>@navbarSearchPlaceholderColor</label>
<input type="text" class="span3" placeholder="#ccc">
<h3>Dropdowns</h3> <h3>Dropdowns</h3>
<label>@dropdownBackground</label> <label>@dropdownBackground</label>

View File

@ -251,6 +251,8 @@
<input type="text" class="span3" placeholder="transparent"> <input type="text" class="span3" placeholder="transparent">
<label>@navbarLinkBackgroundActive</label> <label>@navbarLinkBackgroundActive</label>
<input type="text" class="span3" placeholder="@navbarBackground"> <input type="text" class="span3" placeholder="@navbarBackground">
<label>@navbarSearchPlaceholderColor</label>
<input type="text" class="span3" placeholder="#ccc">
<h3>{{_i}}Dropdowns{{/i}}</h3> <h3>{{_i}}Dropdowns{{/i}}</h3>
<label>@dropdownBackground</label> <label>@dropdownBackground</label>

View File

@ -127,23 +127,20 @@
padding: 4px 9px; padding: 4px 9px;
#font > .sans-serif(13px, normal, 1); #font > .sans-serif(13px, normal, 1);
color: @white; color: @white;
color: rgba(255,255,255,.75); background-color: lighten(@navbarBackground, 25%);
background: #666; border: 1px solid darken(@navbarBackground, 15%);
background: rgba(255,255,255,.3);
border: 1px solid #111;
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
.box-shadow(@shadow); .box-shadow(@shadow);
.transition(none); .transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason // Placeholder text gets special styles; can't be a grouped selector
.placeholder(@grayLighter); &:-moz-placeholder {
color: @navbarSearchPlaceholderColor;
// Hover states
&:hover {
color: @white;
background-color: @grayLight;
background-color: rgba(255,255,255,.5);
} }
&::-webkit-input-placeholder {
color: @navbarSearchPlaceholderColor;
}
// Focus states (we use .focused since IE7-8 and down doesn't support :focus) // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
&:focus, &:focus,
&.focused { &.focused {

View File

@ -149,6 +149,8 @@
@navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: @navbarBackground; @navbarLinkBackgroundActive: @navbarBackground;
@navbarSearchPlaceholderColor: #ccc;
// Hero unit // Hero unit
// ------------------------- // -------------------------