update alert and button styling aproach
This commit is contained in:
Jacob Thornton
parent
50f484eed6
commit
0e9d7c1c4d
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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…
Reference in New Issue