Skip to content

B
bootstrap
Commit 34070af4 authored by kostyatretyak's avatar kostyatretyak
Browse files
Options

Merge branch 'master' of https://github.com/twbs/bootstrap into correction

parents 6145cc02 5fdd9179
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1183 additions and 906 deletions
README.md
View file @ 34070af4
......@@ -123,7 +123,6 @@ Keep track of development and community news.
* Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
* Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
* Have a question that's not a feature request or bug report? [Ask on the mailing list.](http://groups.google.com/group/twitter-bootstrap)
* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
......
_includes/footer.html
View file @ 34070af4
......@@ -2,7 +2,7 @@
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="{{ page.base_url }}dist/js/bootstrap.js"></script>
<script src="{{ page.base_url }}dist/js/bootstrap.min.js"></script>
<script src="{{ page.base_url }}docs-assets/js/holder.js"></script>
......
_includes/header.html
View file @ 34070af4
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contibutors">
<title>
{% if page.title == "Bootstrap" %}
......
_includes/nav-components.html
View file @ 34070af4
......@@ -121,6 +121,7 @@
<li><a href="#list-group-basic">Basic example</a></li>
<li><a href="#list-group-badges">Badges</a></li>
<li><a href="#list-group-linked">Linked items</a></li>
<li><a href="#list-group-contextual-classes">Contextual classes</a></li>
<li><a href="#list-group-custom-content">Custom content</a></li>
</ul>
</li>
......
_includes/nav-css.html
View file @ 34070af4
......@@ -37,7 +37,14 @@
<li><a href="#type-lists">Lists</a></li>
</ul>
</li>
<li><a href="#code">Code</a></li>
<li>
<a href="#code">Code</a>
<ul class="nav">
<li><a href="#code-inline">Inline code</a></li>
<li><a href="#code-user-input">User input</a></li>
<li><a href="#code-block">Blocks of code</a></li>
</ul>
</li>
<li>
<a href="#tables">Tables</a>
<ul class="nav">
......
about.html
View file @ 34070af4
......@@ -69,7 +69,6 @@ base_url: "../"
<p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
<ul>
<li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
<li>Have a question that's not a feature request or bug report? <a href="http://groups.google.com/group/twitter-bootstrap">Ask on the mailing list.</a></li>
<li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
<li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
</ul>
......
components.html
View file @ 34070af4
......@@ -16,7 +16,8 @@ base_url: "../"
<h2 id="glyphicons-glyphs">Available glyphs</h2>
<p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
<ul class="bs-glyphicons">
<div class="bs-glyphicons">
<ul class="bs-glyphicons-list">
<li>
<span class="glyphicon glyphicon-adjust"></span>
<span class="glyphicon-class">glyphicon glyphicon-adjust</span>
......@@ -818,6 +819,7 @@ base_url: "../"
<span class="glyphicon-class">glyphicon glyphicon-zoom-out</span>
</li>
</ul>
</div>
<h2 id="glyphicons-how-to-use">How to use</h2>
......@@ -1172,7 +1174,7 @@ base_url: "../"
<a class="btn btn-default" role="button">Middle</a>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Right dropdown <span class="caret"></span>
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
......@@ -3354,6 +3356,43 @@ body { padding-bottom: 70px; }
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
{% endhighlight %}
<h3 id="list-group-contextual-classes">Contextual classes</h3>
<p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p>
<div class="bs-example">
<div class="row">
<div class="col-sm-6">
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
</ul>
</div>
<div class="col-sm-6">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
</div>
</div>
</div>
</div>
{% highlight html %}
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
</div>
{% endhighlight %}
<h3 id="list-group-custom-content">Custom content</h3>
......
css.html
View file @ 34070af4
......@@ -1047,7 +1047,7 @@ base_url: "../"
<h1 id="code">Code</h1>
</div>
<h2>Inline</h2>
<h2 id="code-inline">Inline</h2>
<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<div class="bs-example">
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
......@@ -1056,7 +1056,16 @@ base_url: "../"
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2>Basic block</h2>
<h2 id="code-user-input">User input</h2>
<p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
<div class="bs-example">
To switch directories, type <kbd>cd</kbd> followed the name of the directory.
</div>
{% highlight html %}
To switch directories, type <kbd>cd</kbd> followed the name of the directory.
{% endhighlight %}
<h2 id="code-block">Basic block</h2>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<div class="bs-example">
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
......@@ -1327,6 +1336,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td>
<code>.info</code>
</td>
<td>Indicates a neutral informative change or action</td>
</tr>
</tbody>
</table>
</div>
......@@ -1383,6 +1398,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>8</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<td>9</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
......@@ -1392,6 +1419,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
......@@ -1399,6 +1427,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
{% endhighlight %}
......
dist/css/bootstrap.css
View file @ 34070af4
......@@ -576,6 +576,10 @@ cite {
text-align: center;
}
.text-justify {
text-align: justify;
}
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
......@@ -753,6 +757,15 @@ code {
border-radius: 4px;
}
kbd {
padding: 2px 4px;
font-size: 90%;
color: #ffffff;
background-color: #333333;
border-radius: 3px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
pre {
display: block;
padding: 9.5px;
......@@ -1767,6 +1780,24 @@ table th[class*="col-"] {
background-color: #d0e9c6;
}
.table > thead > tr > .warning,
.table > tbody > tr > .warning,
.table > tfoot > tr > .warning,
.table > thead > .warning > td,
.table > tbody > .warning > td,
.table > tfoot > .warning > td,
.table > thead > .warning > th,
.table > tbody > .warning > th,
.table > tfoot > .warning > th {
background-color: #fcf8e3;
}
.table-hover > tbody > tr > .warning:hover,
.table-hover > tbody > .warning:hover > td,
.table-hover > tbody > .warning:hover > th {
background-color: #faf2cc;
}
.table > thead > tr > .danger,
.table > tbody > tr > .danger,
.table > tfoot > tr > .danger,
......@@ -1785,22 +1816,22 @@ table th[class*="col-"] {
background-color: #ebcccc;
}
.table > thead > tr > .warning,
.table > tbody > tr > .warning,
.table > tfoot > tr > .warning,
.table > thead > .warning > td,
.table > tbody > .warning > td,
.table > tfoot > .warning > td,
.table > thead > .warning > th,
.table > tbody > .warning > th,
.table > tfoot > .warning > th {
background-color: #fcf8e3;
.table > thead > tr > .info,
.table > tbody > tr > .info,
.table > tfoot > tr > .info,
.table > thead > .info > td,
.table > tbody > .info > td,
.table > tfoot > .info > td,
.table > thead > .info > th,
.table > tbody > .info > th,
.table > tfoot > .info > th {
background-color: #d9edf7;
}
.table-hover > tbody > tr > .warning:hover,
.table-hover > tbody > .warning:hover > td,
.table-hover > tbody > .warning:hover > th {
background-color: #faf2cc;
.table-hover > tbody > tr > .info:hover,
.table-hover > tbody > .info:hover > td,
.table-hover > tbody > .info:hover > th {
background-color: #c4e3f3;
}
@media (max-width: 767px) {
......@@ -2344,7 +2375,7 @@ fieldset[disabled] .btn-default.active {
.btn-default .badge {
color: #ffffff;
background-color: #fff;
background-color: #333333;
}
.btn-primary {
......@@ -2390,7 +2421,53 @@ fieldset[disabled] .btn-primary.active {
.btn-primary .badge {
color: #428bca;
background-color: #fff;
background-color: #ffffff;
}
.btn-success {
color: #ffffff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #47a447;
border-color: #398439;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success .badge {
color: #5cb85c;
background-color: #ffffff;
}
.btn-warning {
......@@ -2436,7 +2513,7 @@ fieldset[disabled] .btn-warning.active {
.btn-warning .badge {
color: #f0ad4e;
background-color: #fff;
background-color: #ffffff;
}
.btn-danger {
......@@ -2482,53 +2559,7 @@ fieldset[disabled] .btn-danger.active {
.btn-danger .badge {
color: #d9534f;
background-color: #fff;
}
.btn-success {
color: #ffffff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #47a447;
border-color: #398439;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success .badge {
color: #5cb85c;
background-color: #fff;
background-color: #ffffff;
}
.btn-info {
......@@ -2574,7 +2605,7 @@ fieldset[disabled] .btn-info.active {
.btn-info .badge {
color: #5bc0de;
background-color: #fff;
background-color: #ffffff;
}
.btn-link {
......@@ -4754,7 +4785,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #cccccc;
background-color: #888888;
}
.navbar-default .navbar-collapse,
......@@ -5581,6 +5612,114 @@ a.list-group-item.active:focus .list-group-item-text {
color: #e1edf7;
}
.list-group-item-success {
color: #3c763d;
background-color: #dff0d8;
}
a.list-group-item-success {
color: #3c763d;
}
a.list-group-item-success .list-group-item-heading {
color: inherit;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
color: #3c763d;
background-color: #d0e9c6;
}
a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
color: #fff;
background-color: #3c763d;
border-color: #3c763d;
}
.list-group-item-warning {
color: #8a6d3b;
background-color: #fcf8e3;
}
a.list-group-item-warning {
color: #8a6d3b;
}
a.list-group-item-warning .list-group-item-heading {
color: inherit;
}
a.list-group-item-warning:hover,
a.list-group-item-warning:focus {
color: #8a6d3b;
background-color: #faf2cc;
}
a.list-group-item-warning.active,
a.list-group-item-warning.active:hover,
a.list-group-item-warning.active:focus {
color: #fff;
background-color: #8a6d3b;
border-color: #8a6d3b;
}
.list-group-item-danger {
color: #a94442;
background-color: #f2dede;
}
a.list-group-item-danger {
color: #a94442;
}
a.list-group-item-danger .list-group-item-heading {
color: inherit;
}
a.list-group-item-danger:hover,
a.list-group-item-danger:focus {
color: #a94442;
background-color: #ebcccc;
}
a.list-group-item-danger.active,
a.list-group-item-danger.active:hover,
a.list-group-item-danger.active:focus {
color: #fff;
background-color: #a94442;
border-color: #a94442;
}
.list-group-item-info {
color: #31708f;
background-color: #d9edf7;
}
a.list-group-item-info {
color: #31708f;
}
a.list-group-item-info .list-group-item-heading {
color: inherit;
}
a.list-group-item-info:hover,
a.list-group-item-info:focus {
color: #31708f;
background-color: #c4e3f3;
}
a.list-group-item-info.active,
a.list-group-item-info.active:hover,
a.list-group-item-info.active:focus {
color: #fff;
background-color: #31708f;
border-color: #31708f;
}
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
......
dist/css/bootstrap.min.css
View file @ 34070af4
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/bootstrap.js
View file @ 34070af4
......@@ -763,7 +763,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index=0
if (!~index) index = 0
$items.eq(index).focus()
}
......@@ -1013,7 +1013,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
$.support.transition && this.$element.hasClass('fade')?
$.support.transition && this.$element.hasClass('fade') ?
this.$backdrop
.one($.support.transition.end, callback)
.emulateTransitionEnd(150) :
......@@ -1213,7 +1213,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
}
Tooltip.prototype.show = function () {
var e = $.Event('show.bs.'+ this.type)
var e = $.Event('show.bs.' + this.type)
if (this.hasContent() && this.enabled) {
this.$element.trigger(e)
......
docs-assets/css/docs.css
View file @ 34070af4
......@@ -921,7 +921,6 @@ h1[id] {
*/
.highlight {
display: none; /* hidden by default, until >480px */
padding: 9px 14px;
margin-bottom: 14px;
background-color: #f7f7f9;
......@@ -949,13 +948,6 @@ h1[id] {
color: #bebec5;
}
/* Show code snippets when we have the space */
@media (min-width: 481px) {
.highlight {
display: block;
}
}
/*
* Responsive tests
......@@ -1037,11 +1029,12 @@ h1[id] {
*/
.bs-glyphicons {
margin: 0 -19px 20px -16px;
overflow: hidden;
}
.bs-glyphicons-list {
padding-left: 0;
padding-bottom: 1px;
margin-bottom: 20px;
list-style: none;
overflow: hidden;
}
.bs-glyphicons li {
float: left;
......@@ -1049,7 +1042,7 @@ h1[id] {
height: 115px;
padding: 10px;
margin: 0 -1px -1px 0;
font-size: 12px;
font-size: 10px;
line-height: 1.4;
text-align: center;
border: 1px solid #ddd;
......@@ -1069,8 +1062,13 @@ h1[id] {
}
@media (min-width: 768px) {
.bs-glyphicons {
margin-left: 0;
margin-right: 0;
}
.bs-glyphicons li {
width: 12.5%;
font-size: 12px;
}
}
......
docs-assets/js/raw-files.js
View file @ 34070af4
This diff is collapsed.
getting-started.html
View file @ 34070af4
......@@ -17,7 +17,7 @@ base_url: "../"
<h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
<p>The fastest way to get Bootstrap is to download the precompiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source code files are included.</p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download precompiled Bootstrap</a></p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download Bootstrap</a></p>
<h3 id="download-additional">Additional downloads</h3>
<div class="bs-docs-dl-options">
......@@ -805,7 +805,8 @@ bootstrap/
{% highlight html %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endhighlight %}
<p>This tag is included in all docs pages and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
<p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
<p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
<h3 id="ie-10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
......
less/buttons.less
View file @ 34070af4
......@@ -56,6 +56,10 @@
.btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Success appears as green
.btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
......@@ -64,10 +68,6 @@
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Success appears as green
.btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as blue-green
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
......
less/code.less
View file @ 34070af4
......@@ -21,6 +21,16 @@ code {
border-radius: @border-radius-base;
}
// User input typically entered via keyboard
kbd {
padding: 2px 4px;
font-size: 90%;
color: @kbd-color;
background-color: @kbd-bg;
border-radius: @border-radius-small;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}
// Blocks of code
pre {
display: block;
......
less/list-group.less
View file @ 34070af4
......@@ -2,17 +2,21 @@
// List groups
// --------------------------------------------------
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
}
// Individual list items
// -------------------------
//
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
position: relative;
......@@ -41,7 +45,12 @@
}
}
// Linked list items
//
// Use anchor elements instead of `li`s or `div`s to create linked list items.
// Includes an extra `.active` modifier class for showing selected items.
a.list-group-item {
color: @list-group-link-color;
......@@ -75,8 +84,21 @@ a.list-group-item {
}
}
// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
.list-group-item-variant(success; @state-success-bg; @state-success-text);
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
.list-group-item-variant(info; @state-info-bg; @state-info-text);
// Custom content options
// -------------------------
//
// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-item-heading {
margin-top: 0;
......
less/mixins.less
View file @ 34070af4
......@@ -437,6 +437,33 @@
}
}
// List Groups
// -------------------------
.list-group-item-variant(@state; @background; @color) {
.list-group-item-@{state} {
color: @color;
background-color: @background;
}
a.list-group-item-@{state} {
color: @color;
.list-group-item-heading { color: inherit; }
&:hover,
&:focus {
color: @color;
background-color: darken(@background, 5%);
}
&.active,
&.active:hover,
&.active:focus {
color: #fff;
background-color: @color;
border-color: @color;
}
}
}
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
......@@ -475,7 +502,7 @@
.badge {
color: @background;
background-color: #fff;
background-color: @color;
}
}
......
less/tables.less
View file @ 34070af4
......@@ -156,8 +156,9 @@ table {
// Generate the contextual variants
.table-row-variant(active; @table-bg-active);
.table-row-variant(success; @state-success-bg);
.table-row-variant(danger; @state-danger-bg);
.table-row-variant(warning; @state-warning-bg);
.table-row-variant(danger; @state-danger-bg);
.table-row-variant(info; @state-info-bg);
// Responsive tables
......
less/type.less
View file @ 34070af4
......@@ -120,6 +120,7 @@ cite { font-style: normal; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
// Page header
......
less/variables.less
View file @ 34070af4
......@@ -286,7 +286,7 @@
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-icon-bar-bg: #888;
@navbar-default-toggle-border-color: #ddd;
......@@ -602,6 +602,9 @@
@code-color: #c7254e;
@code-bg: #f9f2f4;
@kbd-color: #fff;
@kbd-bg: #333;
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
......
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