Commit 8fd177bf authored by Julian Thilo's avatar Julian Thilo
Browse files

Fix #12073: Consistent order of variations

This changes the order of component variations throughout the repo (code and docs) to be more consistent.
The order now used everywhere is the one most frequently found in the repo before:
Default, Primary, Success, Info, Warning, Danger
parent 5f328dce
Showing with 256 additions and 244 deletions
+256 -244
...@@ -89,6 +89,24 @@ ...@@ -89,6 +89,24 @@
background-color: #419641; background-color: #419641;
border-color: #3e8f3e; border-color: #3e8f3e;
} }
.btn-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #28a4c9;
}
.btn-info:hover,
.btn-info:focus {
background-color: #2aabd2;
background-position: 0 -15px;
}
.btn-info:active,
.btn-info.active {
background-color: #2aabd2;
border-color: #28a4c9;
}
.btn-warning { .btn-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%); background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
...@@ -125,24 +143,6 @@ ...@@ -125,24 +143,6 @@
background-color: #c12e2a; background-color: #c12e2a;
border-color: #b92c28; border-color: #b92c28;
} }
.btn-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #28a4c9;
}
.btn-info:hover,
.btn-info:focus {
background-color: #2aabd2;
background-position: 0 -15px;
}
.btn-info:active,
.btn-info.active {
background-color: #2aabd2;
border-color: #28a4c9;
}
.thumbnail, .thumbnail,
.img-thumbnail { .img-thumbnail {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
This diff is collapsed.
...@@ -491,18 +491,6 @@ cite { ...@@ -491,18 +491,6 @@ cite {
.text-primary:hover { .text-primary:hover {
color: #3071a9; color: #3071a9;
} }
.text-warning {
color: #8a6d3b;
}
.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
.text-danger:hover {
color: #843534;
}
.text-success { .text-success {
color: #3c763d; color: #3c763d;
} }
...@@ -515,6 +503,18 @@ cite { ...@@ -515,6 +503,18 @@ cite {
.text-info:hover { .text-info:hover {
color: #245269; color: #245269;
} }
.text-warning {
color: #8a6d3b;
}
.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
.text-danger:hover {
color: #843534;
}
.bg-primary { .bg-primary {
color: #fff; color: #fff;
background-color: #428bca; background-color: #428bca;
...@@ -522,18 +522,6 @@ cite { ...@@ -522,18 +522,6 @@ cite {
a.bg-primary:hover { a.bg-primary:hover {
background-color: #3071a9; background-color: #3071a9;
} }
.bg-warning {
background-color: #fcf8e3;
}
a.bg-warning:hover {
background-color: #f7ecb5;
}
.bg-danger {
background-color: #f2dede;
}
a.bg-danger:hover {
background-color: #e4b9b9;
}
.bg-success { .bg-success {
background-color: #dff0d8; background-color: #dff0d8;
} }
...@@ -546,6 +534,18 @@ a.bg-success:hover { ...@@ -546,6 +534,18 @@ a.bg-success:hover {
a.bg-info:hover { a.bg-info:hover {
background-color: #afd9ee; background-color: #afd9ee;
} }
.bg-warning {
background-color: #fcf8e3;
}
a.bg-warning:hover {
background-color: #f7ecb5;
}
.bg-danger {
background-color: #f2dede;
}
a.bg-danger:hover {
background-color: #e4b9b9;
}
.page-header { .page-header {
padding-bottom: 9px; padding-bottom: 9px;
margin: 40px 0 20px; margin: 40px 0 20px;
...@@ -1508,6 +1508,26 @@ table th[class*="col-"] { ...@@ -1508,6 +1508,26 @@ table th[class*="col-"] {
.table-hover > tbody > tr.success:hover > th { .table-hover > tbody > tr.success:hover > th {
background-color: #d0e9c6; background-color: #d0e9c6;
} }
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr.info:hover > th {
background-color: #c4e3f3;
}
.table > thead > tr > td.warning, .table > thead > tr > td.warning,
.table > tbody > tr > td.warning, .table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning, .table > tfoot > tr > td.warning,
...@@ -1548,26 +1568,6 @@ table th[class*="col-"] { ...@@ -1548,26 +1568,6 @@ table th[class*="col-"] {
.table-hover > tbody > tr.danger:hover > th { .table-hover > tbody > tr.danger:hover > th {
background-color: #ebcccc; background-color: #ebcccc;
} }
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr.info:hover > th {
background-color: #c4e3f3;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.table-responsive { .table-responsive {
width: 100%; width: 100%;
...@@ -1826,6 +1826,32 @@ textarea.input-lg { ...@@ -1826,6 +1826,32 @@ textarea.input-lg {
line-height: 34px; line-height: 34px;
text-align: center; text-align: center;
} }
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
color: #3c763d;
}
.has-success .form-control {
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-success .form-control:focus {
border-color: #2b542c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
}
.has-success .input-group-addon {
color: #3c763d;
background-color: #dff0d8;
border-color: #3c763d;
}
.has-success .form-control-feedback {
color: #3c763d;
}
.has-warning .help-block, .has-warning .help-block,
.has-warning .control-label, .has-warning .control-label,
.has-warning .radio, .has-warning .radio,
...@@ -1878,32 +1904,6 @@ textarea.input-lg { ...@@ -1878,32 +1904,6 @@ textarea.input-lg {
.has-error .form-control-feedback { .has-error .form-control-feedback {
color: #a94442; color: #a94442;
} }
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
color: #3c763d;
}
.has-success .form-control {
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-success .form-control:focus {
border-color: #2b542c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
}
.has-success .input-group-addon {
color: #3c763d;
background-color: #dff0d8;
border-color: #3c763d;
}
.has-success .form-control-feedback {
color: #3c763d;
}
.form-control-static { .form-control-static {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -2144,6 +2144,47 @@ fieldset[disabled] .btn-success.active { ...@@ -2144,6 +2144,47 @@ fieldset[disabled] .btn-success.active {
color: #5cb85c; color: #5cb85c;
background-color: #fff; background-color: #fff;
} }
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
color: #fff;
background-color: #39b3d7;
border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info .badge {
color: #5bc0de;
background-color: #fff;
}
.btn-warning { .btn-warning {
color: #fff; color: #fff;
background-color: #f0ad4e; background-color: #f0ad4e;
...@@ -2226,47 +2267,6 @@ fieldset[disabled] .btn-danger.active { ...@@ -2226,47 +2267,6 @@ fieldset[disabled] .btn-danger.active {
color: #d9534f; color: #d9534f;
background-color: #fff; background-color: #fff;
} }
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
color: #fff;
background-color: #39b3d7;
border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info .badge {
color: #5bc0de;
background-color: #fff;
}
.btn-link { .btn-link {
font-weight: normal; font-weight: normal;
color: #428bca; color: #428bca;
...@@ -4669,6 +4669,28 @@ a.list-group-item-success.active:focus { ...@@ -4669,6 +4669,28 @@ a.list-group-item-success.active:focus {
background-color: #3c763d; background-color: #3c763d;
border-color: #3c763d; border-color: #3c763d;
} }
.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-warning { .list-group-item-warning {
color: #8a6d3b; color: #8a6d3b;
background-color: #fcf8e3; background-color: #fcf8e3;
...@@ -4713,28 +4735,6 @@ a.list-group-item-danger.active:focus { ...@@ -4713,28 +4735,6 @@ a.list-group-item-danger.active:focus {
background-color: #a94442; background-color: #a94442;
border-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 { .list-group-item-heading {
margin-top: 0; margin-top: 0;
margin-bottom: 5px; margin-bottom: 5px;
...@@ -4939,6 +4939,20 @@ a.list-group-item-info.active:focus { ...@@ -4939,6 +4939,20 @@ a.list-group-item-info.active:focus {
.panel-success > .panel-footer + .panel-collapse .panel-body { .panel-success > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #d6e9c6; border-bottom-color: #d6e9c6;
} }
.panel-info {
border-color: #bce8f1;
}
.panel-info > .panel-heading {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse .panel-body {
border-top-color: #bce8f1;
}
.panel-info > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #bce8f1;
}
.panel-warning { .panel-warning {
border-color: #faebcc; border-color: #faebcc;
} }
...@@ -4967,20 +4981,6 @@ a.list-group-item-info.active:focus { ...@@ -4967,20 +4981,6 @@ a.list-group-item-info.active:focus {
.panel-danger > .panel-footer + .panel-collapse .panel-body { .panel-danger > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #ebccd1; border-bottom-color: #ebccd1;
} }
.panel-info {
border-color: #bce8f1;
}
.panel-info > .panel-heading {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse .panel-body {
border-top-color: #bce8f1;
}
.panel-info > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #bce8f1;
}
.well { .well {
min-height: 20px; min-height: 20px;
padding: 19px; padding: 19px;
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
This diff is collapsed.
...@@ -15,7 +15,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -15,7 +15,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/) // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================ // ============================================================
...@@ -63,7 +64,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -63,7 +64,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// ALERT CLASS DEFINITION // ALERT CLASS DEFINITION
// ====================== // ======================
...@@ -151,7 +153,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -151,7 +153,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// BUTTON PUBLIC CLASS DEFINITION // BUTTON PUBLIC CLASS DEFINITION
// ============================== // ==============================
...@@ -258,7 +261,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -258,7 +261,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// CAROUSEL CLASS DEFINITION // CAROUSEL CLASS DEFINITION
// ========================= // =========================
...@@ -463,7 +467,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -463,7 +467,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// COLLAPSE PUBLIC CLASS DEFINITION // COLLAPSE PUBLIC CLASS DEFINITION
// ================================ // ================================
...@@ -632,7 +637,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -632,7 +637,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// DROPDOWN CLASS DEFINITION // DROPDOWN CLASS DEFINITION
// ========================= // =========================
...@@ -779,7 +785,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -779,7 +785,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// MODAL CLASS DEFINITION // MODAL CLASS DEFINITION
// ====================== // ======================
...@@ -1023,7 +1030,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -1023,7 +1030,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// TOOLTIP PUBLIC CLASS DEFINITION // TOOLTIP PUBLIC CLASS DEFINITION
// =============================== // ===============================
...@@ -1421,7 +1429,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -1421,7 +1429,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// POPOVER PUBLIC CLASS DEFINITION // POPOVER PUBLIC CLASS DEFINITION
// =============================== // ===============================
...@@ -1531,7 +1540,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -1531,7 +1540,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// SCROLLSPY CLASS DEFINITION // SCROLLSPY CLASS DEFINITION
// ========================== // ==========================
...@@ -1684,7 +1694,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -1684,7 +1694,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// TAB CLASS DEFINITION // TAB CLASS DEFINITION
// ==================== // ====================
...@@ -1809,7 +1820,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -1809,7 +1820,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
* ======================================================================== */ * ======================================================================== */
+function ($) { 'use strict'; +function ($) {
'use strict';
// AFFIX CLASS DEFINITION // AFFIX CLASS DEFINITION
// ====================== // ======================
......
...@@ -2616,17 +2616,17 @@ body { padding-bottom: 70px; } ...@@ -2616,17 +2616,17 @@ body { padding-bottom: 70px; }
<div class="col-sm-6"> <div class="col-sm-6">
<ul class="list-group"> <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-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</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-danger">Vestibulum at eros</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
</ul> </ul>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<div class="list-group"> <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-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</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-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-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>
</div> </div>
...@@ -2634,15 +2634,15 @@ body { padding-bottom: 70px; } ...@@ -2634,15 +2634,15 @@ body { padding-bottom: 70px; }
{% highlight html %} {% highlight html %}
<ul class="list-group"> <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-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</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-danger">Vestibulum at eros</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
</ul> </ul>
<div class="list-group"> <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-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</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-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-danger">Vestibulum at eros</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
</div> </div>
{% endhighlight %} {% endhighlight %}
......
...@@ -1312,21 +1312,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1312,21 +1312,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.warning</code> <code>.info</code>
</td> </td>
<td>Indicates a warning that might need attention</td> <td>Indicates a neutral informative change or action</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.danger</code> <code>.warning</code>
</td> </td>
<td>Indicates a dangerous or potentially negative action</td> <td>Indicates a warning that might need attention</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.info</code> <code>.danger</code>
</td> </td>
<td>Indicates a neutral informative change or action</td> <td>Indicates a dangerous or potentially negative action</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -1366,7 +1366,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1366,7 +1366,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr class="warning"> <tr class="info">
<td>5</td> <td>5</td>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
...@@ -1378,7 +1378,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1378,7 +1378,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr class="danger"> <tr class="warning">
<td>7</td> <td>7</td>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
...@@ -1390,7 +1390,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1390,7 +1390,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr class="info"> <tr class="danger">
<td>9</td> <td>9</td>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
...@@ -2848,17 +2848,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2848,17 +2848,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="color-swatches"> <div class="color-swatches">
<div class="color-swatch brand-primary"></div> <div class="color-swatch brand-primary"></div>
<div class="color-swatch brand-success"></div> <div class="color-swatch brand-success"></div>
<div class="color-swatch brand-info"></div>
<div class="color-swatch brand-warning"></div> <div class="color-swatch brand-warning"></div>
<div class="color-swatch brand-danger"></div> <div class="color-swatch brand-danger"></div>
<div class="color-swatch brand-info"></div>
</div> </div>
</div> </div>
{% highlight css %} {% highlight css %}
@brand-primary: #428bca; @brand-primary: #428bca;
@brand-success: #5cb85c; @brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e; @brand-warning: #f0ad4e;
@brand-danger: #d9534f; @brand-danger: #d9534f;
@brand-info: #5bc0de;
{% endhighlight %} {% endhighlight %}
<p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p> <p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
......
This diff is collapsed.
This diff is collapsed.
...@@ -60,6 +60,10 @@ ...@@ -60,6 +60,10 @@
.btn-success { .btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); .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);
}
// Warning appears as orange // Warning appears as orange
.btn-warning { .btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
...@@ -68,10 +72,6 @@ ...@@ -68,10 +72,6 @@
.btn-danger { .btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
} }
// Info appears as blue-green
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
// Link buttons // Link buttons
......
...@@ -276,15 +276,15 @@ input[type="checkbox"], ...@@ -276,15 +276,15 @@ input[type="checkbox"],
} }
// Feedback states // Feedback states
.has-success {
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
.has-warning { .has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
} }
.has-error { .has-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
} }
.has-success {
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
// Static form control text // Static form control text
......
...@@ -91,9 +91,9 @@ a.list-group-item { ...@@ -91,9 +91,9 @@ a.list-group-item {
// Organizationally, this must come after the `:hover` states. // Organizationally, this must come after the `:hover` states.
.list-group-item-variant(success; @state-success-bg; @state-success-text); .list-group-item-variant(success; @state-success-bg; @state-success-text);
.list-group-item-variant(info; @state-info-bg; @state-info-text);
.list-group-item-variant(warning; @state-warning-bg; @state-warning-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(danger; @state-danger-bg; @state-danger-text);
.list-group-item-variant(info; @state-info-bg; @state-info-text);
// Custom content options // Custom content options
......
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
> .table, > .table,
> .table-responsive > .table { > .table-responsive > .table {
margin-bottom: 0; margin-bottom: 0;
> tbody:last-child, > tbody:last-child,
> tfoot:last-child { > tfoot:last-child {
> tr:last-child { > tr:last-child {
...@@ -185,12 +185,12 @@ ...@@ -185,12 +185,12 @@
.panel-success { .panel-success {
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
} }
.panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}
.panel-warning { .panel-warning {
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
} }
.panel-danger { .panel-danger {
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
} }
.panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}
...@@ -157,9 +157,9 @@ table { ...@@ -157,9 +157,9 @@ table {
// Generate the contextual variants // Generate the contextual variants
.table-row-variant(active; @table-bg-active); .table-row-variant(active; @table-bg-active);
.table-row-variant(success; @state-success-bg); .table-row-variant(success; @state-success-bg);
.table-row-variant(info; @state-info-bg);
.table-row-variant(warning; @state-warning-bg); .table-row-variant(warning; @state-warning-bg);
.table-row-variant(danger; @state-danger-bg); .table-row-variant(danger; @state-danger-bg);
.table-row-variant(info; @state-info-bg);
// Responsive tables // Responsive tables
......
...@@ -63,9 +63,9 @@ ...@@ -63,9 +63,9 @@
.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } .btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
.btn-primary { .btn-styles(@btn-primary-bg); } .btn-primary { .btn-styles(@btn-primary-bg); }
.btn-success { .btn-styles(@btn-success-bg); } .btn-success { .btn-styles(@btn-success-bg); }
.btn-info { .btn-styles(@btn-info-bg); }
.btn-warning { .btn-styles(@btn-warning-bg); } .btn-warning { .btn-styles(@btn-warning-bg); }
.btn-danger { .btn-styles(@btn-danger-bg); } .btn-danger { .btn-styles(@btn-danger-bg); }
.btn-info { .btn-styles(@btn-info-bg); }
......
...@@ -97,18 +97,6 @@ cite { font-style: normal; } ...@@ -97,18 +97,6 @@ cite { font-style: normal; }
color: darken(@brand-primary, 10%); color: darken(@brand-primary, 10%);
} }
} }
.text-warning {
color: @state-warning-text;
&:hover {
color: darken(@state-warning-text, 10%);
}
}
.text-danger {
color: @state-danger-text;
&:hover {
color: darken(@state-danger-text, 10%);
}
}
.text-success { .text-success {
color: @state-success-text; color: @state-success-text;
&:hover { &:hover {
...@@ -121,6 +109,18 @@ cite { font-style: normal; } ...@@ -121,6 +109,18 @@ cite { font-style: normal; }
color: darken(@state-info-text, 10%); color: darken(@state-info-text, 10%);
} }
} }
.text-warning {
color: @state-warning-text;
&:hover {
color: darken(@state-warning-text, 10%);
}
}
.text-danger {
color: @state-danger-text;
&:hover {
color: darken(@state-danger-text, 10%);
}
}
// Contextual backgrounds // Contextual backgrounds
// For now we'll leave these alongside the text classes until v4 when we can // For now we'll leave these alongside the text classes until v4 when we can
...@@ -134,18 +134,6 @@ cite { font-style: normal; } ...@@ -134,18 +134,6 @@ cite { font-style: normal; }
background-color: darken(@brand-primary, 10%); background-color: darken(@brand-primary, 10%);
} }
} }
.bg-warning {
background-color: @state-warning-bg;
a&:hover {
background-color: darken(@state-warning-bg, 10%);
}
}
.bg-danger {
background-color: @state-danger-bg;
a&:hover {
background-color: darken(@state-danger-bg, 10%);
}
}
.bg-success { .bg-success {
background-color: @state-success-bg; background-color: @state-success-bg;
a&:hover { a&:hover {
...@@ -158,6 +146,18 @@ cite { font-style: normal; } ...@@ -158,6 +146,18 @@ cite { font-style: normal; }
background-color: darken(@state-info-bg, 10%); background-color: darken(@state-info-bg, 10%);
} }
} }
.bg-warning {
background-color: @state-warning-bg;
a&:hover {
background-color: darken(@state-warning-bg, 10%);
}
}
.bg-danger {
background-color: @state-danger-bg;
a&:hover {
background-color: darken(@state-danger-bg, 10%);
}
}
// Page header // Page header
......
...@@ -20,9 +20,9 @@ ...@@ -20,9 +20,9 @@
@brand-primary: #428bca; @brand-primary: #428bca;
@brand-success: #5cb85c; @brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e; @brand-warning: #f0ad4e;
@brand-danger: #d9534f; @brand-danger: #d9534f;
@brand-info: #5bc0de;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
...@@ -131,6 +131,10 @@ ...@@ -131,6 +131,10 @@
@btn-success-bg: @brand-success; @btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 5%); @btn-success-border: darken(@btn-success-bg, 5%);
@btn-info-color: #fff;
@btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-warning-color: #fff; @btn-warning-color: #fff;
@btn-warning-bg: @brand-warning; @btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%); @btn-warning-border: darken(@btn-warning-bg, 5%);
...@@ -139,10 +143,6 @@ ...@@ -139,10 +143,6 @@
@btn-danger-bg: @brand-danger; @btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%); @btn-danger-border: darken(@btn-danger-bg, 5%);
@btn-info-color: #fff;
@btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-link-disabled-color: @gray-light; @btn-link-disabled-color: @gray-light;
...@@ -506,9 +506,9 @@ ...@@ -506,9 +506,9 @@
@progress-bar-bg: @brand-primary; @progress-bar-bg: @brand-primary;
@progress-bar-success-bg: @brand-success; @progress-bar-success-bg: @brand-success;
@progress-bar-info-bg: @brand-info;
@progress-bar-warning-bg: @brand-warning; @progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger; @progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
// List group // List group
...@@ -547,6 +547,10 @@ ...@@ -547,6 +547,10 @@
@panel-success-border: @state-success-border; @panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg; @panel-success-heading-bg: @state-success-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
@panel-warning-text: @state-warning-text; @panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border; @panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg; @panel-warning-heading-bg: @state-warning-bg;
...@@ -555,10 +559,6 @@ ...@@ -555,10 +559,6 @@
@panel-danger-border: @state-danger-border; @panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg; @panel-danger-heading-bg: @state-danger-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
// Thumbnails // Thumbnails
// ------------------------- // -------------------------
......
Supports Markdown
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