Skip to content

B
bootstrap
Commit 930c75e5 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

Merge branch '3.0.0-wip' of github.com:twitter/bootstrap into 3.0.0-wip

parents 217eb988 8540515e
Show whitespace changes
Inline Side-by-side
Showing with 174 additions and 89 deletions
_includes/nav-customize.html
View file @ 930c75e5
...@@ -21,12 +21,14 @@ ...@@ -21,12 +21,14 @@
<li><a href="#variables-breadcrumbs">Breadcrumbs</a></li> <li><a href="#variables-breadcrumbs">Breadcrumbs</a></li>
<li><a href="#variables-jumbotron">Jumbotron</a></li> <li><a href="#variables-jumbotron">Jumbotron</a></li>
<li><a href="#variables-modals">Modals</a></li> <li><a href="#variables-modals">Modals</a></li>
<li><a href="#variables-carousel">Carousel</a></li>
<li><a href="#variables-list-group">List group</a></li> <li><a href="#variables-list-group">List group</a></li>
<li><a href="#variables-thumbnails">Thumbnails</a></li> <li><a href="#variables-thumbnails">Thumbnails</a></li>
<li><a href="#variables-progress">Progress bars</a></li> <li><a href="#variables-progress">Progress bars</a></li>
<li><a href="#variables-pagination">Pagination</a></li> <li><a href="#variables-pagination">Pagination</a></li>
<li><a href="#variables-labels">Labels</a></li> <li><a href="#variables-labels">Labels</a></li>
<li><a href="#variables-tooltips-popovers">Tooltips and popovers</a></li> <li><a href="#variables-tooltips-popovers">Tooltips and popovers</a></li>
<li><a href="#variables-close">Close button</a></li>
<li><a href="#variables-other">Other</a></li> <li><a href="#variables-other">Other</a></li>
</ul> </ul>
</li> </li>
......
customize.html
View file @ 930c75e5
...@@ -407,6 +407,22 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -407,6 +407,22 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
</div> </div>
<h3>Code blocks</h3>
<div class="row">
<div class="col-lg-6">
<label>@code-color</label>
<input type="text" placeholder="#c7254e">
<label>@code-bg</label>
<input type="text" placeholder="#f9f2f4">
</div>
<div class="col-lg-6">
<label>@pre-bg</label>
<input type="text" placeholder="#f5f5f5">
<label>@code-border-color</label>
<input type="text" placeholder="#ccc">
</div>
</div>
<h4>Headings</h4> <h4>Headings</h4>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
...@@ -569,6 +585,9 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -569,6 +585,9 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="@brand-info"> <input type="text" placeholder="@brand-info">
<label>@btn-info-border</label> <label>@btn-info-border</label>
<input type="text" placeholder="@btn-info-bg"> <input type="text" placeholder="@btn-info-bg">
<h4>Button hover</h4>
<label>@btn-hover-color</label>
<input type="text" placeholder="@btn-default-color">
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<h4>Success</h4> <h4>Success</h4>
...@@ -761,46 +780,60 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -761,46 +780,60 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-forms">Forms</h2> <h2 id="variables-forms">Forms</h2>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<h3>Background</h3> <h3>Inputs</h3>
<label>@input-bg</label> <label>@input-bg</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
<p class="help-block"><code>&lt;input&gt;</code> background color</p> <p class="help-block"><code>&lt;input&gt;</code> background color</p>
<label>@input-border</label>
<input type="text" placeholder="#ccc">
<p class="help-block"><code>&lt;input&gt;</code> border color</p>
<label>@input-border-radius</label>
<input type="text" placeholder="@border-radius-base">
<p class="help-block"><code>&lt;input&gt;</code> border radius</p>
<label>@input-bg-disabled</label> <label>@input-bg-disabled</label>
<input type="text" placeholder="@gray-lighter"> <input type="text" placeholder="@gray-lighter">
<p class="help-block"><code>&lt;input disabled&gt;</code>background color</p> <p class="help-block"><code>&lt;input disabled&gt;</code> background color</p>
</div>
<div class="col-lg-6">
<h3>Placeholder</h3> <h3>Placeholder</h3>
<label>@input-color-placeholder</label> <label>@input-color-placeholder</label>
<input type="text" placeholder="@gray-light"> <input type="text" placeholder="@gray-light">
<p class="help-block">Placeholder text color</p> <p class="help-block">Placeholder text color</p>
</div>
<div class="col-lg-6"> <h3>Legend</h3>
<h3>Border</h3> <label>@legend-border-color</label>
<label>@input-border</label> <input type="text" placeholder="#e5e5e5">
<input type="text" placeholder="#ccc"> <p class="help-block"><code>&lt;legend&gt;</code> border color</p>
<p class="help-block"><code>&lt;input&gt;</code> border color</p>
<label>@input-border-radius</label> <h3>Input groups</h3>
<input type="text" placeholder="@border-radius-base"> <label>@input-group-addon-border-color</label>
<p class="help-block"><code>&lt;input&gt;</code>border radius</p> <input type="text" placeholder="@input-border">
<p class="help-block">Border color for textual input addons</p>
</div> </div>
</div> </div>
<h2 id="variables-dropdowns">Dropdowns</h2> <h2 id="variables-dropdowns">Dropdowns</h2>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<h3>Background</h3> <h3>Dropdown menu</h3>
<label>@dropdown-bg</label> <label>@dropdown-bg</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
<p class="help-block">Dropdown menu background color</p> <p class="help-block">Dropdown menu background color</p>
<label>@dropdown-link-active-bg</label> <label>@dropdown-border</label>
<input type="text" placeholder="@component-active-bg"> <input type="text" placeholder="rgba(0,0,0,.15)">
<p class="help-block">Active dropdown menu entry background color</p> <p class="help-block">Dropdown menu border color</p>
<label>@dropdown-link-hover-bg</label> <label>@dropdown-fallback-border</label>
<input type="text" placeholder="@dropdown-link-active-bg"> <input type="text" placeholder="#ccc">
<p class="help-block">Hovered dropdown menu entry background color</p> <p class="help-block">Dropdown menu border color <strong>for IE8</strong></p>
<label>@dropdown-caret-color</label>
<input type="text" placeholder="@dropdown-caret-color">
<p class="help-block">Indicator arrow for showing an element has a dropdown</p>
<label>@dropdown-divider-bg</label>
<input type="text" placeholder="#e5e5e5">
<p class="help-block">Dropdown divider top border color</p>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<h3>Colors</h3> <h3>Dropdown items</h3>
<label>@dropdown-link-color</label> <label>@dropdown-link-color</label>
<input type="text" placeholder="@gray-dark"> <input type="text" placeholder="@gray-dark">
<p class="help-block">Dropdown text color</p> <p class="help-block">Dropdown text color</p>
...@@ -810,17 +843,12 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -810,17 +843,12 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<label>@dropdown-link-hover-bg</label> <label>@dropdown-link-hover-bg</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
<p class="help-block">Hovered dropdown menu entry text color</p> <p class="help-block">Hovered dropdown menu entry text color</p>
</div> <label>@dropdown-link-active-bg</label>
</div> <input type="text" placeholder="@component-active-bg">
<h3>Dividers</h3> <p class="help-block">Active dropdown menu entry background color</p>
<div class="row"> <label>@dropdown-link-hover-bg</label>
<div class="col-lg-6"> <input type="text" placeholder="@dropdown-link-active-bg">
<label>@dropdown-divider-top</label> <p class="help-block">Hovered dropdown menu entry background color</p>
<input type="text" placeholder="#e5e5e5">
<p class="help-block">Dropdown divider top border color</p>
<label>@dropdown-divider-bottom</label>
<input type="text" placeholder="#fff">
<p class="help-block">Dropdown divider bottom border color</p>
</div> </div>
</div> </div>
...@@ -973,6 +1001,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -973,6 +1001,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<p class="help-block">Jumbotron lead paragraph color</p> <p class="help-block">Jumbotron lead paragraph color</p>
</div> </div>
</div> </div>
<h2 id="variables-modals">Modals</h2> <h2 id="variables-modals">Modals</h2>
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
...@@ -991,6 +1020,19 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -991,6 +1020,19 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<p class="help-block">Modal title line-height</p> <p class="help-block">Modal title line-height</p>
</div> </div>
</div> </div>
<h2 id="variables-carousel">Carousel</h2>
<label>@carousel-text-shadow</label>
<input type="text" placeholder="0 1px 2px rgba(0,0,0,.6)">
<label>@carousel-control-color</label>
<input type="text" placeholder="#fff">
<label>@carousel-indicator-border-color</label>
<input type="text" placeholder="#fff">
<label>@carousel-indicator-active-bg</label>
<input type="text" placeholder="#fff">
<label>@carousel-caption-color</label>
<input type="text" placeholder="#fff">
<h2 id="variables-list-group">List group</h2> <h2 id="variables-list-group">List group</h2>
<h3>Background</h3> <h3>Background</h3>
<div class="row"> <div class="row">
...@@ -1174,6 +1216,13 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -1174,6 +1216,13 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<p class="help-block">Popover outer arrow color</p> <p class="help-block">Popover outer arrow color</p>
</div> </div>
</div> </div>
<h2 id="variables-close">Close button</h2>
<label>@close-color</label>
<input type="text" placeholder="#000">
<label>@close-text-shadow</label>
<input type="text" placeholder="0 1px 0 #fff">
<h2 id="variables-other">Other</h2> <h2 id="variables-other">Other</h2>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
......
dist/css/bootstrap.css
View file @ 930c75e5
...@@ -700,8 +700,7 @@ pre { ...@@ -700,8 +700,7 @@ pre {
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid #ccc; border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 4px;
} }
...@@ -1702,9 +1701,8 @@ select.input-small { ...@@ -1702,9 +1701,8 @@ select.input-small {
font-weight: normal; font-weight: normal;
line-height: 1.428571429; line-height: 1.428571429;
text-align: center; text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eeeeee; background-color: #eeeeee;
border: 1px solid #ccc; border: 1px solid #cccccc;
border-radius: 4px; border-radius: 4px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -1818,7 +1816,7 @@ select.input-small { ...@@ -1818,7 +1816,7 @@ select.input-small {
.btn:hover, .btn:hover,
.btn:focus { .btn:focus {
color: #fff; color: #ffffff;
text-decoration: none; text-decoration: none;
} }
...@@ -2136,7 +2134,7 @@ input[type="button"].btn-block { ...@@ -2136,7 +2134,7 @@ input[type="button"].btn-block {
height: 0; height: 0;
margin-left: 2px; margin-left: 2px;
vertical-align: middle; vertical-align: middle;
border-top: 4px solid #000; border-top: 4px solid #000000;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-left: 4px solid transparent; border-left: 4px solid transparent;
content: ""; content: "";
...@@ -2154,7 +2152,7 @@ input[type="button"].btn-block { ...@@ -2154,7 +2152,7 @@ input[type="button"].btn-block {
margin: 2px 0 0; margin: 2px 0 0;
list-style: none; list-style: none;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #ccc; border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
...@@ -2168,11 +2166,10 @@ input[type="button"].btn-block { ...@@ -2168,11 +2166,10 @@ input[type="button"].btn-block {
} }
.dropdown-menu .divider { .dropdown-menu .divider {
height: 2px; height: 1px;
margin: 9px 0; margin: 9px 0;
overflow: hidden; overflow: hidden;
background-color: #e5e5e5; background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
} }
.dropdown-menu > li > a { .dropdown-menu > li > a {
...@@ -2261,7 +2258,7 @@ input[type="button"].btn-block { ...@@ -2261,7 +2258,7 @@ input[type="button"].btn-block {
.dropup .caret, .dropup .caret,
.navbar-fixed-bottom .dropdown .caret { .navbar-fixed-bottom .dropdown .caret {
border-top: 0; border-top: 0;
border-bottom: 4px solid #000; border-bottom: 4px solid #000000;
content: ""; content: "";
} }
...@@ -2313,11 +2310,11 @@ input[type="button"].btn-block { ...@@ -2313,11 +2310,11 @@ input[type="button"].btn-block {
} }
a.list-group-item .list-group-item-heading { a.list-group-item .list-group-item-heading {
color: #333; color: #333333;
} }
a.list-group-item .list-group-item-text { a.list-group-item .list-group-item-text {
color: #555; color: #555555;
} }
a.list-group-item:hover, a.list-group-item:hover,
...@@ -2469,7 +2466,7 @@ a.list-group-item.active .list-group-item-text { ...@@ -2469,7 +2466,7 @@ a.list-group-item.active .list-group-item-text {
font-size: 21px; font-size: 21px;
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
color: #000; color: #000000;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff;
opacity: 0.2; opacity: 0.2;
filter: alpha(opacity=20); filter: alpha(opacity=20);
...@@ -2477,7 +2474,7 @@ a.list-group-item.active .list-group-item-text { ...@@ -2477,7 +2474,7 @@ a.list-group-item.active .list-group-item-text {
.close:hover, .close:hover,
.close:focus { .close:focus {
color: #000; color: #000000;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
opacity: 0.5; opacity: 0.5;
...@@ -2571,11 +2568,10 @@ button.close { ...@@ -2571,11 +2568,10 @@ button.close {
} }
.nav .nav-divider { .nav .nav-divider {
height: 2px; height: 1px;
margin: 9px 0; margin: 9px 0;
overflow: hidden; overflow: hidden;
background-color: #e5e5e5; background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
} }
.nav-tabs { .nav-tabs {
...@@ -3971,7 +3967,7 @@ a.thumbnail:focus { ...@@ -3971,7 +3967,7 @@ a.thumbnail:focus {
font-size: 75%; font-size: 75%;
font-weight: 500; font-weight: 500;
line-height: 1; line-height: 1;
color: #fff; color: #ffffff;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
...@@ -3981,7 +3977,7 @@ a.thumbnail:focus { ...@@ -3981,7 +3977,7 @@ a.thumbnail:focus {
.label[href]:hover, .label[href]:hover,
.label[href]:focus { .label[href]:focus {
color: #fff; color: #ffffff;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
background-color: #808080; background-color: #808080;
...@@ -4294,7 +4290,7 @@ a.list-group-item.active > .badge, ...@@ -4294,7 +4290,7 @@ a.list-group-item.active > .badge,
left: 0; left: 0;
width: 15%; width: 15%;
font-size: 20px; font-size: 20px;
color: #fff; color: #ffffff;
text-align: center; text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
opacity: 0.5; opacity: 0.5;
...@@ -4327,7 +4323,7 @@ a.list-group-item.active > .badge, ...@@ -4327,7 +4323,7 @@ a.list-group-item.active > .badge,
.carousel-control:hover, .carousel-control:hover,
.carousel-control:focus { .carousel-control:focus {
color: #fff; color: #ffffff;
text-decoration: none; text-decoration: none;
opacity: 0.9; opacity: 0.9;
filter: alpha(opacity=90); filter: alpha(opacity=90);
...@@ -4374,7 +4370,7 @@ a.list-group-item.active > .badge, ...@@ -4374,7 +4370,7 @@ a.list-group-item.active > .badge,
margin: 1px; margin: 1px;
text-indent: -999px; text-indent: -999px;
cursor: pointer; cursor: pointer;
border: 1px solid #fff; border: 1px solid #ffffff;
border-radius: 10px; border-radius: 10px;
} }
...@@ -4382,7 +4378,7 @@ a.list-group-item.active > .badge, ...@@ -4382,7 +4378,7 @@ a.list-group-item.active > .badge,
width: 12px; width: 12px;
height: 12px; height: 12px;
margin: 0; margin: 0;
background-color: #fff; background-color: #ffffff;
} }
.carousel-caption { .carousel-caption {
...@@ -4393,7 +4389,7 @@ a.list-group-item.active > .badge, ...@@ -4393,7 +4389,7 @@ a.list-group-item.active > .badge,
z-index: 10; z-index: 10;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
color: #fff; color: #ffffff;
text-align: center; text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
} }
......
dist/css/bootstrap.min.css
View file @ 930c75e5
This source diff could not be displayed because it is too large. You can view the blob instead.
less/buttons.less
View file @ 930c75e5
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: @btn-hover-color;
text-decoration: none; text-decoration: none;
} }
......
less/carousel.less
View file @ 930c75e5
...@@ -72,9 +72,9 @@ ...@@ -72,9 +72,9 @@
width: 15%; width: 15%;
.opacity(.5); .opacity(.5);
font-size: 20px; font-size: 20px;
color: #fff; color: @carousel-control-color;
text-align: center; text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6); text-shadow: @carousel-text-shadow;
// We can't have this transition here because webkit cancels the carousel // We can't have this transition here because webkit cancels the carousel
// animation if you trip this while in the middle of another animation. // animation if you trip this while in the middle of another animation.
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
// Hover/focus state // Hover/focus state
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: @carousel-control-color;
text-decoration: none; text-decoration: none;
.opacity(.9); .opacity(.9);
} }
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
height: 10px; height: 10px;
margin: 1px; margin: 1px;
text-indent: -999px; text-indent: -999px;
border: 1px solid #fff; border: 1px solid @carousel-indicator-border-color;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
} }
...@@ -152,7 +152,7 @@ ...@@ -152,7 +152,7 @@
margin: 0; margin: 0;
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: #fff; background-color: @carousel-indicator-active-bg;
} }
} }
...@@ -167,9 +167,9 @@ ...@@ -167,9 +167,9 @@
z-index: 10; z-index: 10;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
color: #fff; color: @carousel-caption-color;
text-align: center; text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6); text-shadow: @carousel-text-shadow;
& .btn { & .btn {
text-shadow: none; // No shadow for button elements in carousel-caption text-shadow: none; // No shadow for button elements in carousel-caption
} }
......
less/close.less
View file @ 930c75e5
...@@ -8,13 +8,13 @@ ...@@ -8,13 +8,13 @@
font-size: (@font-size-base * 1.5); font-size: (@font-size-base * 1.5);
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
color: #000; color: @close-color;
text-shadow: 0 1px 0 rgba(255,255,255,1); text-shadow: @close-text-shadow;
.opacity(.2); .opacity(.2);
&:hover, &:hover,
&:focus { &:focus {
color: #000; color: @close-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
.opacity(.5); .opacity(.5);
......
less/code.less
View file @ 930c75e5
...@@ -13,8 +13,8 @@ pre { ...@@ -13,8 +13,8 @@ pre {
code { code {
padding: 2px 4px; padding: 2px 4px;
font-size: 90%; font-size: 90%;
color: #c7254e; color: @code-color;
background-color: #f9f2f4; background-color: @code-bg;
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
} }
...@@ -29,9 +29,8 @@ pre { ...@@ -29,9 +29,8 @@ pre {
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
color: @gray-dark; color: @gray-dark;
background-color: #f5f5f5; background-color: @pre-bg;
border: 1px solid #ccc; // IE8 fallback border: 1px solid @pre-border-color;
border: 1px solid rgba(0,0,0,.15);
border-radius: @border-radius-base; border-radius: @border-radius-base;
// Make prettyprint styles more spaced out for readability // Make prettyprint styles more spaced out for readability
......
less/dropdowns.less
View file @ 930c75e5
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
height: 0; height: 0;
margin-left: 2px; margin-left: 2px;
vertical-align: middle; vertical-align: middle;
border-top: 4px solid #000; border-top: 4px solid @dropdown-caret-color;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-left: 4px solid transparent; border-left: 4px solid transparent;
content: ""; content: "";
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
margin: 2px 0 0; // override default ul margin: 2px 0 0; // override default ul
list-style: none; list-style: none;
background-color: @dropdown-bg; background-color: @dropdown-bg;
border: 1px solid #ccc; // IE8 fallback border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border; border: 1px solid @dropdown-border;
border-radius: @border-radius-base; border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0,0,0,.175)); .box-shadow(0 6px 12px rgba(0,0,0,.175));
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
// Dividers (basically an hr) within the dropdown // Dividers (basically an hr) within the dropdown
.divider { .divider {
.nav-divider(@dropdown-divider-top, @dropdown-divider-bottom); .nav-divider(@dropdown-divider-bg);
} }
// Links within the dropdown menu // Links within the dropdown menu
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,7 @@
// Reverse the caret // Reverse the caret
.caret { .caret {
border-top: 0; border-top: 0;
border-bottom: 4px solid #000; border-bottom: 4px solid @dropdown-caret-color;
content: ""; content: "";
} }
// Different positioning for bottom up menu // Different positioning for bottom up menu
......
less/forms.less
View file @ 930c75e5
...@@ -25,7 +25,7 @@ legend { ...@@ -25,7 +25,7 @@ legend {
line-height: inherit; line-height: inherit;
color: @gray-dark; color: @gray-dark;
border: 0; border: 0;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid @legend-border-color;
} }
label { label {
...@@ -344,9 +344,8 @@ select { ...@@ -344,9 +344,8 @@ select {
font-weight: normal; font-weight: normal;
line-height: @line-height-base; line-height: @line-height-base;
text-align: center; text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: @gray-lighter; background-color: @gray-lighter;
border: 1px solid #ccc; border: 1px solid @input-group-addon-border-color;
border-radius: @border-radius-base; border-radius: @border-radius-base;
&.input-small { &.input-small {
......
less/labels.less
View file @ 930c75e5
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
font-size: 75%; font-size: 75%;
font-weight: 500; font-weight: 500;
line-height: 1; line-height: 1;
color: #fff; color: @label-color;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
&[href] { &[href] {
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: @label-link-hover-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
background-color: darken(@gray-light, 10%); background-color: darken(@gray-light, 10%);
......
less/list-group.less
View file @ 930c75e5
...@@ -58,10 +58,10 @@ ...@@ -58,10 +58,10 @@
a.list-group-item { a.list-group-item {
// Colorize content accordingly // Colorize content accordingly
.list-group-item-heading { .list-group-item-heading {
color: #333; color: @list-group-link-heading-color;
} }
.list-group-item-text { .list-group-item-text {
color: #555; color: @list-group-link-color;
} }
// Hover state // Hover state
......
less/mixins.less
View file @ 930c75e5
...@@ -332,12 +332,11 @@ ...@@ -332,12 +332,11 @@
// Horizontal dividers // Horizontal dividers
// ------------------------- // -------------------------
// Dividers (basically an hr) within dropdowns and nav lists // Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: #fff) { .nav-divider(@color: #e5e5e5) {
height: 2px; // 1px for background, one for border height: 1px;
margin: ((@line-height-computed / 2) - 1) 0; margin: ((@line-height-computed / 2) - 1) 0;
overflow: hidden; overflow: hidden;
background-color: @top; background-color: @color;
border-bottom: 1px solid @bottom;
} }
// Alerts // Alerts
......
less/variables.less
View file @ 930c75e5
...@@ -117,6 +117,7 @@ ...@@ -117,6 +117,7 @@
@btn-info-bg: @brand-info; @btn-info-bg: @brand-info;
@btn-info-border: @btn-info-bg; @btn-info-border: @btn-info-bg;
@btn-hover-color: @btn-default-color;
// Forms // Forms
...@@ -134,14 +135,18 @@ ...@@ -134,14 +135,18 @@
@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2); @input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2); @input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
@legend-border-color: #e5e5e5;
@input-group-addon-border-color: @input-border;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@dropdown-bg: #fff; @dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15); @dropdown-border: rgba(0,0,0,.15);
@dropdown-divider-top: #e5e5e5; @dropdown-fallback-border: #ccc;
@dropdown-divider-bottom: #fff; @dropdown-divider-bg: #e5e5e5;
@dropdown-link-active-color: #fff; @dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg; @dropdown-link-active-bg: @component-active-bg;
...@@ -150,6 +155,8 @@ ...@@ -150,6 +155,8 @@
@dropdown-link-hover-color: #fff; @dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg; @dropdown-link-hover-bg: @dropdown-link-active-bg;
@dropdown-caret-color: #000;
// COMPONENT VARIABLES // COMPONENT VARIABLES
// -------------------------------------------------- // --------------------------------------------------
...@@ -278,6 +285,9 @@ ...@@ -278,6 +285,9 @@
@label-warning-bg: @brand-warning; @label-warning-bg: @brand-warning;
@label-danger-bg: @brand-danger; @label-danger-bg: @brand-danger;
@label-color: #fff;
@label-link-hover-color: #fff;
// Modals // Modals
// ------------------------- // -------------------------
...@@ -327,6 +337,10 @@ ...@@ -327,6 +337,10 @@
@list-group-active-bg: @component-active-bg; @list-group-active-bg: @component-active-bg;
@list-group-active-border: @list-group-active-bg; @list-group-active-border: @list-group-active-bg;
@list-group-link-color: #555;
@list-group-link-heading-color: #333;
// Panels // Panels
// ------------------------- // -------------------------
@panel-bg: #fff; @panel-bg: #fff;
...@@ -391,6 +405,33 @@ ...@@ -391,6 +405,33 @@
@breadcrumb-active-color: @gray-light; @breadcrumb-active-color: @gray-light;
// Carousel
// ------------------------
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-indicator-border-color: #fff;
@carousel-indicator-active-bg: #fff;
@carousel-caption-color: #fff;
// Close
// ------------------------
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
// Code
// ------------------------
@code-color: #c7254e;
@code-bg: #f9f2f4;
@pre-bg: #f5f5f5;
@pre-border-color: #ccc;
// Miscellaneous // Miscellaneous
// ------------------------- // -------------------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment