mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
update alert and button styling aproach
This commit is contained in:
Jacob Thornton
parent
50f484eed6
commit
0e9d7c1c4d
344
bootstrap-1.1.0.css
vendored
344
bootstrap-1.1.0.css
vendored
@ -6,7 +6,7 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Thu Aug 25 01:55:33 PDT 2011
|
||||
* Date: Thu Aug 25 13:30:35 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
@ -121,6 +121,79 @@ aside {
|
||||
.container:after {
|
||||
clear: both;
|
||||
}
|
||||
.btn.danger,
|
||||
.alert.danger,
|
||||
.btn.danger:hover,
|
||||
.alert.danger:hover,
|
||||
.btn.error,
|
||||
.alert.error,
|
||||
.btn.error:hover,
|
||||
.alert.error:hover,
|
||||
.btn.success,
|
||||
.alert.success,
|
||||
.btn.success:hover,
|
||||
.alert.success:hover,
|
||||
.btn.info,
|
||||
.alert.info,
|
||||
.btn.info:hover,
|
||||
.alert.info:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.danger,
|
||||
.alert.danger,
|
||||
.btn.danger:hover,
|
||||
.alert.danger:hover,
|
||||
.btn.error,
|
||||
.alert.error,
|
||||
.btn.error:hover,
|
||||
.alert.error:hover {
|
||||
background-color: #d6463e;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));
|
||||
background-image: -moz-linear-gradient(#f56a66, #d6463e);
|
||||
background-image: -ms-linear-gradient(#f56a66, #d6463e);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));
|
||||
background-image: -webkit-linear-gradient(#f56a66, #d6463e);
|
||||
background-image: -o-linear-gradient(#f56a66, #d6463e);
|
||||
background-image: linear-gradient(#f56a66, #d6463e);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #d6463e #d6463e #a52a23;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.success,
|
||||
.alert.success,
|
||||
.btn.success:hover,
|
||||
.alert.success:hover {
|
||||
background-color: #57a957;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
|
||||
background-image: -moz-linear-gradient(#62c462, #57a957);
|
||||
background-image: -ms-linear-gradient(#62c462, #57a957);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
|
||||
background-image: -webkit-linear-gradient(#62c462, #57a957);
|
||||
background-image: -o-linear-gradient(#62c462, #57a957);
|
||||
background-image: linear-gradient(#62c462, #57a957);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #57a957 #57a957 #3d773d;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.info,
|
||||
.alert.info,
|
||||
.btn.info:hover,
|
||||
.alert.info:hover {
|
||||
background-color: #36b3d9;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));
|
||||
background-image: -moz-linear-gradient(#6bd0ee, #36b3d9);
|
||||
background-image: -ms-linear-gradient(#6bd0ee, #36b3d9);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));
|
||||
background-image: -webkit-linear-gradient(#6bd0ee, #36b3d9);
|
||||
background-image: -o-linear-gradient(#6bd0ee, #36b3d9);
|
||||
background-image: linear-gradient(#6bd0ee, #36b3d9);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #36b3d9 #36b3d9 #1f85a4;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
/*
|
||||
* Scaffolding
|
||||
* Basic and global styles for generating a grid system, structural layout, and page templates
|
||||
@ -286,110 +359,6 @@ a:hover {
|
||||
color: #0050a3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
background-color: #e6e6e6;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));
|
||||
background-image: -webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
||||
background-image: -moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
||||
background-image: -ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
||||
background-image: -o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
||||
background-image: linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
||||
padding: 5px 14px 6px;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
line-height: normal;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-transition: 0.1s linear all;
|
||||
-moz-transition: 0.1s linear all;
|
||||
transition: 0.1s linear all;
|
||||
}
|
||||
.btn:hover {
|
||||
background-position: 0 -15px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn.primary,
|
||||
.btn.danger,
|
||||
.btn.danger:hover,
|
||||
.btn.primary:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.btn.primary {
|
||||
background-color: #0064cd;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
|
||||
background-image: -moz-linear-gradient(#049cdb, #0064cd);
|
||||
background-image: -ms-linear-gradient(#049cdb, #0064cd);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
|
||||
background-image: -webkit-linear-gradient(#049cdb, #0064cd);
|
||||
background-image: -o-linear-gradient(#049cdb, #0064cd);
|
||||
background-image: linear-gradient(#049cdb, #0064cd);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #0064cd #0064cd #003f81;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.danger {
|
||||
background-color: #9d261d;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#d83a2e), to(#9d261d));
|
||||
background-image: -moz-linear-gradient(#d83a2e, #9d261d);
|
||||
background-image: -ms-linear-gradient(#d83a2e, #9d261d);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d83a2e), color-stop(100%, #9d261d));
|
||||
background-image: -webkit-linear-gradient(#d83a2e, #9d261d);
|
||||
background-image: -o-linear-gradient(#d83a2e, #9d261d);
|
||||
background-image: linear-gradient(#d83a2e, #9d261d);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #9d261d #9d261d #5c1611;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.disabled {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
filter: alpha(opacity=65);
|
||||
-khtml-opacity: 0.65;
|
||||
-moz-opacity: 0.65;
|
||||
opacity: 0.65;
|
||||
}
|
||||
.btn:disabled {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
filter: alpha(opacity=65);
|
||||
-khtml-opacity: 0.65;
|
||||
-moz-opacity: 0.65;
|
||||
opacity: 0.65;
|
||||
}
|
||||
.btn:active {
|
||||
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.btn.large {
|
||||
font-size: 16px;
|
||||
line-height: normal;
|
||||
padding: 9px 14px 9px;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.btn.small {
|
||||
padding: 7px 9px 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
/* Typography.less
|
||||
* Headings, body text, lists, code, and more for a versatile and durable typography system
|
||||
* ---------------------------------------------------------------------------------------- */
|
||||
@ -1324,6 +1293,91 @@ footer {
|
||||
.page-header h1 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
background-color: #e6e6e6;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));
|
||||
background-image: -webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
||||
background-image: -moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
||||
background-image: -ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
||||
background-image: -o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
||||
background-image: linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
||||
padding: 5px 14px 6px;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
line-height: normal;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-transition: 0.1s linear all;
|
||||
-moz-transition: 0.1s linear all;
|
||||
transition: 0.1s linear all;
|
||||
}
|
||||
.btn:hover {
|
||||
background-position: 0 -15px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn.disabled {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
filter: alpha(opacity=65);
|
||||
-khtml-opacity: 0.65;
|
||||
-moz-opacity: 0.65;
|
||||
opacity: 0.65;
|
||||
}
|
||||
.btn:disabled {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
filter: alpha(opacity=65);
|
||||
-khtml-opacity: 0.65;
|
||||
-moz-opacity: 0.65;
|
||||
opacity: 0.65;
|
||||
}
|
||||
.btn:active {
|
||||
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.btn.primary, .btn.primary:hover {
|
||||
color: #fff;
|
||||
background-color: #0064cd;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
|
||||
background-image: -moz-linear-gradient(#049cdb, #0064cd);
|
||||
background-image: -ms-linear-gradient(#049cdb, #0064cd);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
|
||||
background-image: -webkit-linear-gradient(#049cdb, #0064cd);
|
||||
background-image: -o-linear-gradient(#049cdb, #0064cd);
|
||||
background-image: linear-gradient(#049cdb, #0064cd);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #0064cd #0064cd #003f81;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.large {
|
||||
font-size: 16px;
|
||||
line-height: normal;
|
||||
padding: 9px 14px 9px;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.btn.small {
|
||||
padding: 7px 9px 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.alert {
|
||||
background-color: #eedc94;
|
||||
background-repeat: repeat-x;
|
||||
@ -1335,8 +1389,8 @@ footer {
|
||||
background-image: -o-linear-gradient(#fceec1, #eedc94);
|
||||
background-image: linear-gradient(#fceec1, #eedc94);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #e7ce68 #e7ce68 #e4c652;
|
||||
border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);
|
||||
border-color: #eedc94 #eedc94 #e4c652;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
margin-bottom: 18px;
|
||||
padding: 7px 14px;
|
||||
color: #404040;
|
||||
@ -1366,58 +1420,7 @@ footer {
|
||||
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.alert-error,
|
||||
.alert-success,
|
||||
.alert-info,
|
||||
.alert-error h5,
|
||||
.alert-success h5,
|
||||
.alert-info h5 {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.alert-error {
|
||||
background-color: #d6463e;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));
|
||||
background-image: -moz-linear-gradient(#f56a66, #d6463e);
|
||||
background-image: -ms-linear-gradient(#f56a66, #d6463e);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));
|
||||
background-image: -webkit-linear-gradient(#f56a66, #d6463e);
|
||||
background-image: -o-linear-gradient(#f56a66, #d6463e);
|
||||
background-image: linear-gradient(#f56a66, #d6463e);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #ba2f27 #ba2f27 #a52a23;
|
||||
border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
.alert-success {
|
||||
background-color: #57a957;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
|
||||
background-image: -moz-linear-gradient(#62c462, #57a957);
|
||||
background-image: -ms-linear-gradient(#62c462, #57a957);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
|
||||
background-image: -webkit-linear-gradient(#62c462, #57a957);
|
||||
background-image: -o-linear-gradient(#62c462, #57a957);
|
||||
background-image: linear-gradient(#62c462, #57a957);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #458845 #458845 #3d773d;
|
||||
border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
.alert-info {
|
||||
background-color: #36b3d9;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));
|
||||
background-image: -moz-linear-gradient(#6bd0ee, #36b3d9);
|
||||
background-image: -ms-linear-gradient(#6bd0ee, #36b3d9);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));
|
||||
background-image: -webkit-linear-gradient(#6bd0ee, #36b3d9);
|
||||
background-image: -o-linear-gradient(#6bd0ee, #36b3d9);
|
||||
background-image: linear-gradient(#6bd0ee, #36b3d9);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #2396b9 #2396b9 #1f85a4;
|
||||
border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
.close {
|
||||
.alert .close {
|
||||
float: right;
|
||||
margin-top: -2px;
|
||||
color: #000000;
|
||||
@ -1429,7 +1432,7 @@ footer {
|
||||
-moz-opacity: 0.2;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.close:hover {
|
||||
.alert .close:hover {
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
filter: alpha(opacity=40);
|
||||
@ -1437,7 +1440,7 @@ footer {
|
||||
-moz-opacity: 0.4;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.alert-block {
|
||||
.alert.alert-block, .alert.alert-block:hover {
|
||||
background-image: none;
|
||||
background-color: #fdf5d9;
|
||||
padding: 14px;
|
||||
@ -1446,21 +1449,30 @@ footer {
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.alert-block p {
|
||||
.alert.alert-block p, .alert.alert-block:hover p {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.alert-block .alert-actions {
|
||||
.alert.alert-block .alert-actions, .alert.alert-block:hover .alert-actions {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.alert-block.error {
|
||||
.alert.alert-block.error,
|
||||
.alert.alert-block:hover.error,
|
||||
.alert.alert-block.success,
|
||||
.alert.alert-block:hover.success,
|
||||
.alert.alert-block.info,
|
||||
.alert.alert-block:hover.info {
|
||||
color: #404040;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.alert.alert-block.error, .alert.alert-block:hover.error {
|
||||
background-color: #fddfde;
|
||||
border-color: #fbc7c6;
|
||||
}
|
||||
.alert-block.success {
|
||||
.alert.alert-block.success, .alert.alert-block:hover.success {
|
||||
background-color: #d1eed1;
|
||||
border-color: #bfe7bf;
|
||||
}
|
||||
.alert-block.info {
|
||||
.alert.alert-block.info, .alert.alert-block:hover.info {
|
||||
background-color: #ddf4fb;
|
||||
border-color: #c6edf9;
|
||||
}
|
||||
|
||||
41
bootstrap-1.1.0.min.css
vendored
41
bootstrap-1.1.0.min.css
vendored
@ -9,6 +9,10 @@ header,section,footer,article,aside{display:block;}
|
||||
.center-block{display:block;margin:0 auto;}
|
||||
.container{width:940px;margin:0 auto;zoom:1;}.container:before,.container:after{display:table;content:"";}
|
||||
.container:after{clear:both;}
|
||||
.btn.danger,.alert.danger,.btn.danger:hover,.alert.danger:hover,.btn.error,.alert.error,.btn.error:hover,.alert.error:hover,.btn.success,.alert.success,.btn.success:hover,.alert.success:hover,.btn.info,.alert.info,.btn.info:hover,.alert.info:hover{color:#ffffff;}
|
||||
.btn.danger,.alert.danger,.btn.danger:hover,.alert.danger:hover,.btn.error,.alert.error,.btn.error:hover,.alert.error:hover{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.success,.alert.success,.btn.success:hover,.alert.success:hover{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.info,.alert.info,.btn.info:hover,.alert.info:hover{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";}
|
||||
.row:after{clear:both;}
|
||||
.row .span1,.row .span2,.row .span3,.row .span4,.row .span5,.row .span6,.row .span7,.row .span8,.row .span9,.row .span10,.row .span11,.row .span12,.row .span13,.row .span14,.row .span15,.row .span16{display:inline;float:left;margin-left:20px;}
|
||||
@ -48,16 +52,6 @@ div.container-fluid:after{clear:both;}
|
||||
div.container-fluid div.sidebar{float:left;width:220px;}
|
||||
div.container-fluid div.content{min-width:700px;max-width:1180px;margin-left:240px;}
|
||||
a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#0050a3;text-decoration:underline;}
|
||||
.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
|
||||
.btn.primary,.btn.danger,.btn.danger:hover,.btn.primary:hover{color:#fff;}
|
||||
.btn.primary{background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(#049cdb, #0064cd);background-image:-ms-linear-gradient(#049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(#049cdb, #0064cd);background-image:-o-linear-gradient(#049cdb, #0064cd);background-image:linear-gradient(#049cdb, #0064cd);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.danger{background-color:#9d261d;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#d83a2e), to(#9d261d));background-image:-moz-linear-gradient(#d83a2e, #9d261d);background-image:-ms-linear-gradient(#d83a2e, #9d261d);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #d83a2e), color-stop(100%, #9d261d));background-image:-webkit-linear-gradient(#d83a2e, #9d261d);background-image:-o-linear-gradient(#d83a2e, #9d261d);background-image:linear-gradient(#d83a2e, #9d261d);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#9d261d #9d261d #5c1611;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;}
|
||||
.btn:disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;}
|
||||
.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);}
|
||||
.btn.large{font-size:16px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
|
||||
.btn.small{padding:7px 9px 7px;font-size:11px;}
|
||||
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
|
||||
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
|
||||
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
|
||||
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
|
||||
@ -182,20 +176,25 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
|
||||
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
|
||||
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
|
||||
.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}
|
||||
.alert{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#e7ce68 #e7ce68 #e4c652;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert h5{line-height:18px;}
|
||||
.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
|
||||
.btn.disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;}
|
||||
.btn:disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;}
|
||||
.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);}
|
||||
.btn.primary,.btn.primary:hover{color:#fff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(#049cdb, #0064cd);background-image:-ms-linear-gradient(#049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(#049cdb, #0064cd);background-image:-o-linear-gradient(#049cdb, #0064cd);background-image:linear-gradient(#049cdb, #0064cd);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.large{font-size:16px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
|
||||
.btn.small{padding:7px 9px 7px;font-size:11px;}
|
||||
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
|
||||
.alert{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert h5{line-height:18px;}
|
||||
.alert p{margin-bottom:0;}
|
||||
.alert div{margin-top:5px;margin-bottom:2px;line-height:28px;}
|
||||
.alert .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);}
|
||||
.alert-error,.alert-success,.alert-info,.alert-error h5,.alert-success h5,.alert-info h5{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);}
|
||||
.alert-error{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#ba2f27 #ba2f27 #a52a23;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);}
|
||||
.alert-success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#458845 #458845 #3d773d;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);}
|
||||
.alert-info{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#2396b9 #2396b9 #1f85a4;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);}
|
||||
.close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
|
||||
.alert-block{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-block p{margin-right:30px;}
|
||||
.alert-block .alert-actions{margin-top:5px;}
|
||||
.alert-block.error{background-color:#fddfde;border-color:#fbc7c6;}
|
||||
.alert-block.success{background-color:#d1eed1;border-color:#bfe7bf;}
|
||||
.alert-block.info{background-color:#ddf4fb;border-color:#c6edf9;}
|
||||
.alert .close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.alert .close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
|
||||
.alert.alert-block,.alert.alert-block:hover{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert.alert-block p,.alert.alert-block:hover p{margin-right:30px;}
|
||||
.alert.alert-block .alert-actions,.alert.alert-block:hover .alert-actions{margin-top:5px;}
|
||||
.alert.alert-block.error,.alert.alert-block:hover.error,.alert.alert-block.success,.alert.alert-block:hover.success,.alert.alert-block.info,.alert.alert-block:hover.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
|
||||
.alert.alert-block.error,.alert.alert-block:hover.error{background-color:#fddfde;border-color:#fbc7c6;}
|
||||
.alert.alert-block.success,.alert.alert-block:hover.success{background-color:#d1eed1;border-color:#bfe7bf;}
|
||||
.alert.alert-block.info,.alert.alert-block:hover.info{background-color:#ddf4fb;border-color:#c6edf9;}
|
||||
.tabs,.pills{margin:0 0 20px;padding:0;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";}
|
||||
.tabs:after,.pills:after{clear:both;}
|
||||
.tabs li,.pills li{display:inline;}.tabs li a,.pills li a{float:left;width:auto;}
|
||||
|
||||
@ -859,13 +859,17 @@
|
||||
<div class="span4 columns">
|
||||
<h2>Buttons</h2>
|
||||
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
|
||||
<p>All buttons default to a light gray style, but a blue <code>.primary</code> class and a red <code>.danger</code> class is available. Plus, rolling your own styles is easy peasy.</p>
|
||||
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class. Plus, rolling your own styles is easy peasy.</p>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<h3>Example buttons</h3>
|
||||
<p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
|
||||
<div class="well" style="padding: 14px 19px;">
|
||||
<button type="submit" class="btn primary">Submit</button> <button type="submit" class="btn">Cancel</button> <button class="btn danger">Delete</button>
|
||||
<button class="btn primary">Primary</button>
|
||||
<button class="btn">Default</button>
|
||||
<button class="btn info">Info</button>
|
||||
<button class="btn success">Success</button>
|
||||
<button class="btn danger">Danger</button>
|
||||
</div>
|
||||
<h3>Alternate sizes</h3>
|
||||
<p>Fancy larger or smaller buttons? Have at it!</p>
|
||||
@ -1077,15 +1081,15 @@
|
||||
<a class="close" href="#">×</a>
|
||||
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
|
||||
</div>
|
||||
<div class="alert alert-error">
|
||||
<div class="alert error">
|
||||
<a class="close" href="#">×</a>
|
||||
<p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
<div class="alert success">
|
||||
<a class="close" href="#">×</a>
|
||||
<p><strong>Well done!</strong> You successfully read this alert message.</p>
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
<div class="alert info">
|
||||
<a class="close" href="#">×</a>
|
||||
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
|
||||
</div>
|
||||
|
||||
@ -288,21 +288,96 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
// BUTTON STYLES
|
||||
// -------------
|
||||
|
||||
|
||||
// Base .btn styles
|
||||
.btn {
|
||||
// Button Base
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
#gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
|
||||
padding: 5px 14px 6px;
|
||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
line-height: normal;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
.border-radius(4px);
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
|
||||
&:hover {
|
||||
background-position: 0 -15px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Transitions
|
||||
.transition(.1s linear all);
|
||||
|
||||
// Active and Disabled states
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
.opacity(65);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
// disabled pseudo can't be included with .disabled
|
||||
// def because IE8 and below will drop it ;_;
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
.opacity(65);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
|
||||
// Primary Button Type
|
||||
&.primary,
|
||||
&.primary:hover {
|
||||
color:#fff;
|
||||
.gradientBar(@blue, @blueDark)
|
||||
}
|
||||
|
||||
|
||||
// Button Sizes
|
||||
&.large {
|
||||
font-size: 16px;
|
||||
line-height: normal;
|
||||
padding: 9px 14px 9px;
|
||||
.border-radius(6px);
|
||||
}
|
||||
|
||||
&.small {
|
||||
padding: 7px 9px 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Help Firefox not be a jerk about adding extra padding to buttons
|
||||
button.btn,
|
||||
input[type=submit].btn {
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ERROR STYLES
|
||||
// ------------
|
||||
|
||||
// Setup a mixin to colorize different alerts
|
||||
.alertTheme(@primaryColor, @secondaryColor) {
|
||||
#gradient > .vertical(@primaryColor, @secondaryColor);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
border-color: darken(@secondaryColor, 10%) darken(@secondaryColor, 10%) darken(@secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.05) rgba(0,0,0,.075) rgba(0,0,0,.125);
|
||||
}
|
||||
|
||||
// Base alert styles
|
||||
.alert {
|
||||
.alertTheme(#fceec1, #eedc94);
|
||||
.gradientBar(#fceec1, #eedc94); // warning by default
|
||||
margin-bottom: @baseline;
|
||||
padding: 7px 14px;
|
||||
color: @grayDark;
|
||||
@ -311,6 +386,7 @@ footer {
|
||||
border-style: solid;
|
||||
.border-radius(4px);
|
||||
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
|
||||
|
||||
// Remove extra margin from content
|
||||
h5 {
|
||||
line-height: @baseline;
|
||||
@ -323,66 +399,59 @@ footer {
|
||||
margin-bottom: 2px;
|
||||
line-height: 28px;
|
||||
}
|
||||
// Provide actions with buttons
|
||||
.btn {
|
||||
// Provide actions with buttons
|
||||
.box-shadow(0 1px 0 rgba(255,255,255,.25));
|
||||
}
|
||||
}
|
||||
// Alternate alerts
|
||||
.alert-error,
|
||||
.alert-success,
|
||||
.alert-info,
|
||||
.alert-error h5,
|
||||
.alert-success h5,
|
||||
.alert-info h5 {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
.alert-error { .alertTheme(#f56a66, #d6463e); }
|
||||
.alert-success { .alertTheme(#62c462, #57a957); }
|
||||
.alert-info { .alertTheme(#6bd0ee, #36b3d9); }
|
||||
// Close action
|
||||
.close {
|
||||
float: right;
|
||||
margin-top: -2px;
|
||||
color: @black;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
.opacity(20);
|
||||
&:hover {
|
||||
.close {
|
||||
float: right;
|
||||
margin-top: -2px;
|
||||
color: @black;
|
||||
text-decoration: none;
|
||||
.opacity(40);
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
.opacity(20);
|
||||
&:hover {
|
||||
color: @black;
|
||||
text-decoration: none;
|
||||
.opacity(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Block-level alerts
|
||||
.alert-block {
|
||||
background-image: none;
|
||||
background-color: lighten(#fceec1, 5%);
|
||||
padding: 14px;
|
||||
border-color: #fceec1;
|
||||
.box-shadow(none);
|
||||
p {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.alert-actions {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.alert-block.error {
|
||||
background-color: lighten(#f56a66, 25%);
|
||||
border-color: lighten(#f56a66, 20%);
|
||||
}
|
||||
.alert-block.success {
|
||||
background-color: lighten(#62c462, 30%);
|
||||
border-color: lighten(#62c462, 25%);
|
||||
}
|
||||
.alert-block.info {
|
||||
background-color: lighten(#6bd0ee, 25%);
|
||||
border-color: lighten(#6bd0ee, 20%);
|
||||
}
|
||||
|
||||
&.alert-block,
|
||||
&.alert-block:hover {
|
||||
background-image: none;
|
||||
background-color: lighten(#fceec1, 5%);
|
||||
padding: 14px;
|
||||
border-color: #fceec1;
|
||||
.box-shadow(none);
|
||||
|
||||
p {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.alert-actions {
|
||||
margin-top: 5px;
|
||||
}
|
||||
&.error,
|
||||
&.success,
|
||||
&.info {
|
||||
color: @grayDark;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
}
|
||||
&.error {
|
||||
background-color: lighten(#f56a66, 25%);
|
||||
border-color: lighten(#f56a66, 20%);
|
||||
}
|
||||
&.success {
|
||||
background-color: lighten(#62c462, 30%);
|
||||
border-color: lighten(#62c462, 25%);
|
||||
}
|
||||
&.info {
|
||||
background-color: lighten(#6bd0ee, 25%);
|
||||
border-color: lighten(#6bd0ee, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NAVIGATION
|
||||
// ----------
|
||||
|
||||
@ -170,14 +170,6 @@
|
||||
column-gap: @columnGap;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.btnColoring(@primaryColor, @secondaryColor) {
|
||||
#gradient > .vertical(@primaryColor, @secondaryColor);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
||||
}
|
||||
|
||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
||||
#translucent {
|
||||
.background(@color: @white, @alpha: 1) {
|
||||
@ -189,6 +181,49 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Gradient Bar Colors for buttons and allerts
|
||||
.gradientBar(@primaryColor, @secondaryColor) {
|
||||
#gradient > .vertical(@primaryColor, @secondaryColor);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
||||
}
|
||||
|
||||
// Shared colors for buttons and alerts
|
||||
|
||||
.btn,
|
||||
.alert {
|
||||
|
||||
&.danger,
|
||||
&.danger:hover,
|
||||
&.error,
|
||||
&.error:hover,
|
||||
&.success,
|
||||
&.success:hover,
|
||||
&.info,
|
||||
&.info:hover {
|
||||
color: @white
|
||||
}
|
||||
|
||||
&.danger,
|
||||
&.danger:hover,
|
||||
&.error,
|
||||
&.error:hover {
|
||||
.gradientBar(#f56a66, #d6463e);
|
||||
}
|
||||
|
||||
&.success,
|
||||
&.success:hover {
|
||||
.gradientBar(#62c462, #57a957);
|
||||
}
|
||||
|
||||
&.info,
|
||||
&.info:hover {
|
||||
.gradientBar(#6bd0ee, #36b3d9);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Gradients
|
||||
#gradient {
|
||||
.horizontal (@startColor: #555, @endColor: #333) {
|
||||
|
||||
@ -115,90 +115,4 @@ a {
|
||||
color: @linkColorHover;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.btn {
|
||||
// Button Base
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
#gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
|
||||
padding: 5px 14px 6px;
|
||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
line-height: normal;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
.border-radius(4px);
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
|
||||
&:hover {
|
||||
background-position: 0 -15px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Transitions
|
||||
.transition(.1s linear all);
|
||||
|
||||
// Colored Button Types
|
||||
&.primary,
|
||||
&.danger,
|
||||
&.danger:hover,
|
||||
&.primary:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
.btnColoring(@blue, @blueDark)
|
||||
}
|
||||
|
||||
&.danger {
|
||||
.btnColoring(lighten(@red, 15%), @red)
|
||||
}
|
||||
|
||||
// Active and Disabled states
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
.opacity(65);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
// disabled pseudo can't be included with .disabled
|
||||
// def because IE8 and below will drop it ;_;
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
.opacity(65);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
|
||||
// Button Sizes
|
||||
&.large {
|
||||
font-size: 16px;
|
||||
line-height: normal;
|
||||
padding: 9px 14px 9px;
|
||||
.border-radius(6px);
|
||||
}
|
||||
|
||||
&.small {
|
||||
padding: 7px 9px 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Help Firefox not be a jerk about adding extra padding to buttons
|
||||
button.btn,
|
||||
input[type=submit].btn {
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user