mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 10:52:19 +01:00
huge update to forms, docs for the new forms, added a new link for js example to tabs/pills, add some new mixins
This commit is contained in:
Mark Otto
parent
2d81d65533
commit
f919f6f94f
340
bootstrap.css
vendored
340
bootstrap.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: Wed Sep 28 19:14:58 PDT 2011
|
||||
* Date: Thu Sep 29 01:39:48 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).
|
||||
@ -189,7 +189,7 @@ body {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: #404040;
|
||||
color: #333333;
|
||||
}
|
||||
.container {
|
||||
width: 940px;
|
||||
@ -400,7 +400,7 @@ p {
|
||||
}
|
||||
p small {
|
||||
font-size: 11px;
|
||||
color: #bfbfbf;
|
||||
color: #777777;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
@ -409,7 +409,7 @@ h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
color: #404040;
|
||||
color: #333333;
|
||||
}
|
||||
h1 small,
|
||||
h2 small,
|
||||
@ -417,7 +417,7 @@ h3 small,
|
||||
h4 small,
|
||||
h5 small,
|
||||
h6 small {
|
||||
color: #bfbfbf;
|
||||
color: #777777;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 18px;
|
||||
@ -434,18 +434,16 @@ h2 {
|
||||
h2 small {
|
||||
font-size: 14px;
|
||||
}
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 36px;
|
||||
}
|
||||
h3 {
|
||||
line-height: 36px;
|
||||
font-size: 18px;
|
||||
}
|
||||
h3 small {
|
||||
font-size: 14px;
|
||||
}
|
||||
h4, h5, h6 {
|
||||
line-height: 18px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -457,7 +455,7 @@ h5 {
|
||||
}
|
||||
h6 {
|
||||
font-size: 13px;
|
||||
color: #bfbfbf;
|
||||
color: #777777;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
ul, ol {
|
||||
@ -477,7 +475,7 @@ ol {
|
||||
}
|
||||
li {
|
||||
line-height: 18px;
|
||||
color: #808080;
|
||||
color: #555555;
|
||||
}
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
@ -510,7 +508,7 @@ em {
|
||||
line-height: inherit;
|
||||
}
|
||||
.muted {
|
||||
color: #bfbfbf;
|
||||
color: #777777;
|
||||
}
|
||||
blockquote {
|
||||
margin-bottom: 18px;
|
||||
@ -528,7 +526,7 @@ blockquote small {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
color: #bfbfbf;
|
||||
color: #777777;
|
||||
}
|
||||
blockquote small:before {
|
||||
content: '\2014 \00A0';
|
||||
@ -573,35 +571,14 @@ pre {
|
||||
form {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
fieldset {
|
||||
margin-bottom: 18px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
fieldset legend {
|
||||
legend {
|
||||
display: block;
|
||||
padding-left: 150px;
|
||||
width: 100%;
|
||||
margin-bottom: 27px;
|
||||
font-size: 19.5px;
|
||||
line-height: 1;
|
||||
color: #404040;
|
||||
*padding: 0 0 5px 145px;
|
||||
/* IE6-7 */
|
||||
|
||||
*line-height: 1.5;
|
||||
/* IE6-7 */
|
||||
|
||||
}
|
||||
form .clearfix {
|
||||
margin-bottom: 18px;
|
||||
zoom: 1;
|
||||
}
|
||||
form .clearfix:before, form .clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
form .clearfix:after {
|
||||
clear: both;
|
||||
line-height: 36px;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
label,
|
||||
input,
|
||||
@ -610,19 +587,12 @@ textarea {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
line-height: 18px;
|
||||
}
|
||||
label {
|
||||
padding-top: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
float: left;
|
||||
width: 130px;
|
||||
text-align: right;
|
||||
color: #404040;
|
||||
}
|
||||
form .input {
|
||||
margin-left: 150px;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: #333333;
|
||||
}
|
||||
input[type=checkbox], input[type=radio] {
|
||||
cursor: pointer;
|
||||
@ -637,13 +607,13 @@ select,
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #808080;
|
||||
color: #555555;
|
||||
border: 1px solid #ccc;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
/* mini reset for non-html5 file types */
|
||||
/* Mini reset for unique input types */
|
||||
input[type=checkbox], input[type=radio] {
|
||||
width: auto;
|
||||
height: auto;
|
||||
@ -681,21 +651,6 @@ select[multiple] {
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
.uneditable-input {
|
||||
background-color: #ffffff;
|
||||
display: block;
|
||||
border-color: #eee;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
input, textarea {
|
||||
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
@ -719,34 +674,6 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
|
||||
box-shadow: none;
|
||||
outline: 1px dotted #666;
|
||||
}
|
||||
form div.clearfix.error {
|
||||
background: #fae5e3;
|
||||
padding: 10px 0;
|
||||
margin: -10px 0 10px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
form div.clearfix.error > label, form div.clearfix.error span.help-inline, form div.clearfix.error span.help-block {
|
||||
color: #9d261d;
|
||||
}
|
||||
form div.clearfix.error input, form div.clearfix.error textarea {
|
||||
border-color: #c87872;
|
||||
-webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
|
||||
-moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
|
||||
box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
|
||||
}
|
||||
form div.clearfix.error input:focus, form div.clearfix.error textarea:focus {
|
||||
border-color: #b9554d;
|
||||
-webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
|
||||
-moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
|
||||
box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
|
||||
}
|
||||
form div.clearfix.error .input-prepend span.add-on, form div.clearfix.error .input-append span.add-on {
|
||||
background: #f4c8c5;
|
||||
border-color: #c87872;
|
||||
color: #b9554d;
|
||||
}
|
||||
.input-mini {
|
||||
width: 60px;
|
||||
}
|
||||
@ -871,31 +798,63 @@ textarea[readonly] {
|
||||
border-color: #ddd;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.actions {
|
||||
background: #f5f5f5;
|
||||
.has-error {
|
||||
background: #f8dcda;
|
||||
padding: 9px 0;
|
||||
margin: -10px 0 10px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.has-error > label, .has-error span.help-inline, .has-error span.help-block {
|
||||
color: #9d261d;
|
||||
}
|
||||
.has-error input, .has-error textarea, .has-error select {
|
||||
border-color: #c87872;
|
||||
-webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
|
||||
-moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
|
||||
box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
|
||||
}
|
||||
.has-error input:focus, .has-error textarea:focus, .has-error select:focus {
|
||||
border-color: #b9554d;
|
||||
-webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
|
||||
-moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
|
||||
box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
|
||||
}
|
||||
.has-error .input-prepend span.add-on, .has-error .input-append span.add-on {
|
||||
background: #f4c8c5;
|
||||
border-color: #c87872;
|
||||
color: #b9554d;
|
||||
}
|
||||
.form-actions {
|
||||
padding: 17px 20px 18px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 18px;
|
||||
padding: 17px 20px 18px 150px;
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #ddd;
|
||||
-webkit-border-radius: 0 0 3px 3px;
|
||||
-moz-border-radius: 0 0 3px 3px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.actions .secondary-action {
|
||||
float: right;
|
||||
.uneditable-input {
|
||||
background-color: #ffffff;
|
||||
display: block;
|
||||
border-color: #eee;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.actions .secondary-action a {
|
||||
line-height: 30px;
|
||||
:-moz-placeholder {
|
||||
color: #777777;
|
||||
}
|
||||
.actions .secondary-action a:hover {
|
||||
text-decoration: underline;
|
||||
::-webkit-input-placeholder {
|
||||
color: #777777;
|
||||
}
|
||||
.help-inline, .help-block {
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
color: #bfbfbf;
|
||||
.help-text {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
color: #777777;
|
||||
}
|
||||
.help-inline {
|
||||
display: inline;
|
||||
padding-left: 5px;
|
||||
*position: relative;
|
||||
/* IE6-7 */
|
||||
@ -909,7 +868,7 @@ textarea[readonly] {
|
||||
max-width: 600px;
|
||||
}
|
||||
.inline-inputs {
|
||||
color: #808080;
|
||||
color: #555555;
|
||||
}
|
||||
.inline-inputs span, .inline-inputs input {
|
||||
display: inline-block;
|
||||
@ -942,7 +901,7 @@ textarea[readonly] {
|
||||
margin-right: -1px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: #bfbfbf;
|
||||
color: #777777;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
-webkit-border-radius: 3px 0 0 3px;
|
||||
@ -971,89 +930,36 @@ textarea[readonly] {
|
||||
margin-right: 0;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.inputs-list {
|
||||
margin: 0 0 5px;
|
||||
width: 100%;
|
||||
.control-group {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.inputs-list li {
|
||||
display: block;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
.control-group > label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.inputs-list label {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
.form-horizontal .control-group > label {
|
||||
float: left;
|
||||
width: 130px;
|
||||
padding-top: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
.inputs-list label strong {
|
||||
color: #808080;
|
||||
.form-horizontal .controls {
|
||||
margin-left: 150px;
|
||||
}
|
||||
.inputs-list label small {
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.inputs-list .inputs-list {
|
||||
margin-left: 25px;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.inputs-list:first-child {
|
||||
.form-horizontal .control-list {
|
||||
padding-top: 6px;
|
||||
}
|
||||
.inputs-list li + li {
|
||||
padding-top: 2px;
|
||||
.form-horizontal .form-actions {
|
||||
padding-left: 150px;
|
||||
}
|
||||
.inputs-list input[type=radio], .inputs-list input[type=checkbox] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-stacked {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.form-stacked fieldset {
|
||||
padding-top: 9px;
|
||||
}
|
||||
.form-stacked legend {
|
||||
padding-left: 0;
|
||||
}
|
||||
.form-stacked label {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.form-stacked .clearfix {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.form-stacked .clearfix div.input {
|
||||
margin-left: 0;
|
||||
}
|
||||
.form-stacked .inputs-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-stacked .inputs-list li {
|
||||
padding-top: 0;
|
||||
}
|
||||
.form-stacked .inputs-list li label {
|
||||
font-weight: normal;
|
||||
padding-top: 0;
|
||||
}
|
||||
.form-stacked div.clearfix.error {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
margin-top: 0;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.form-stacked .actions {
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
.radial-test {
|
||||
background-color: #009900;
|
||||
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#990000), to(#009900));
|
||||
background-image: -webkit-radial-gradient(circle, #990000, #009900);
|
||||
background-image: -moz-radial-gradient(circle, #990000, #009900);
|
||||
background-image: -ms-radial-gradient(circle, #990000, #009900);
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
height: 940px;
|
||||
}
|
||||
/*
|
||||
* Tables.less
|
||||
@ -1214,7 +1120,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
overflow: visible;
|
||||
}
|
||||
.topbar a {
|
||||
color: #bfbfbf;
|
||||
color: #777777;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.topbar .brand a:hover, .topbar ul .active > a {
|
||||
@ -1277,20 +1183,20 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
transition: none;
|
||||
}
|
||||
.topbar input:-moz-placeholder {
|
||||
color: #e6e6e6;
|
||||
color: #cccccc;
|
||||
}
|
||||
.topbar input::-webkit-input-placeholder {
|
||||
color: #e6e6e6;
|
||||
color: #cccccc;
|
||||
}
|
||||
.topbar input:hover {
|
||||
background-color: #bfbfbf;
|
||||
background-color: #777777;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #ffffff;
|
||||
}
|
||||
.topbar input:focus, .topbar input.focused {
|
||||
outline: 0;
|
||||
background-color: #ffffff;
|
||||
color: #404040;
|
||||
color: #333333;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
border: 0;
|
||||
padding: 5px 10px;
|
||||
@ -1301,7 +1207,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
.topbar-inner {
|
||||
background-color: #222;
|
||||
background-color: #222222;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
|
||||
background-image: -moz-linear-gradient(top, #333333, #222222);
|
||||
background-image: -ms-linear-gradient(top, #333333, #222222);
|
||||
@ -1309,6 +1214,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
background-image: -webkit-linear-gradient(top, #333333, #222222);
|
||||
background-image: -o-linear-gradient(top, #333333, #222222);
|
||||
background-image: linear-gradient(top, #333333, #222222);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
@ -1369,7 +1275,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
}
|
||||
.nav .dropdown-menu li a:hover {
|
||||
background-color: #191919;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
|
||||
background-image: -moz-linear-gradient(top, #292929, #191919);
|
||||
background-image: -ms-linear-gradient(top, #292929, #191919);
|
||||
@ -1377,6 +1282,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
background-image: -webkit-linear-gradient(top, #292929, #191919);
|
||||
background-image: -o-linear-gradient(top, #292929, #191919);
|
||||
background-image: linear-gradient(top, #292929, #191919);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
|
||||
color: #ffffff;
|
||||
}
|
||||
@ -1456,12 +1362,11 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: #808080;
|
||||
color: #555555;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
}
|
||||
.topbar .dropdown-menu a:hover, .dropdown-menu a:hover {
|
||||
background-color: #dddddd;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
|
||||
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
|
||||
@ -1469,8 +1374,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
|
||||
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
|
||||
background-image: linear-gradient(top, #eeeeee, #dddddd);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
|
||||
color: #404040;
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
|
||||
@ -1532,7 +1438,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
border-color: #eee #eee #ddd;
|
||||
}
|
||||
.tabs > li.active > a {
|
||||
color: #808080;
|
||||
color: #555555;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
@ -1588,7 +1494,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
margin: 0 0 18px;
|
||||
padding: 7px 14px;
|
||||
background-color: #f5f5f5;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
|
||||
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
|
||||
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
|
||||
@ -1596,6 +1501,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
|
||||
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
|
||||
background-image: linear-gradient(top, #ffffff, #f5f5f5);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 3px;
|
||||
@ -1611,10 +1517,10 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
}
|
||||
.breadcrumb .divider {
|
||||
padding: 0 5px;
|
||||
color: #bfbfbf;
|
||||
color: #777777;
|
||||
}
|
||||
.breadcrumb .active a {
|
||||
color: #404040;
|
||||
color: #333333;
|
||||
}
|
||||
.hero-unit {
|
||||
background-color: #f5f5f5;
|
||||
@ -1673,7 +1579,6 @@ footer {
|
||||
.btn.error,
|
||||
.alert-message.error {
|
||||
background-color: #c43c35;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
|
||||
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
@ -1681,6 +1586,7 @@ footer {
|
||||
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #c43c35 #c43c35 #882a25;
|
||||
@ -1688,7 +1594,6 @@ footer {
|
||||
}
|
||||
.btn.success, .alert-message.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(top, #62c462, #57a957);
|
||||
background-image: -ms-linear-gradient(top, #62c462, #57a957);
|
||||
@ -1696,6 +1601,7 @@ footer {
|
||||
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: -o-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: linear-gradient(top, #62c462, #57a957);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #57a957 #57a957 #3d773d;
|
||||
@ -1703,7 +1609,6 @@ footer {
|
||||
}
|
||||
.btn.info, .alert-message.info {
|
||||
background-color: #339bb9;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
|
||||
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
|
||||
@ -1711,6 +1616,7 @@ footer {
|
||||
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #339bb9 #339bb9 #22697d;
|
||||
@ -1720,13 +1626,13 @@ footer {
|
||||
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(25%, #ffffff), to(#e6e6e6));
|
||||
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
|
||||
padding: 5px 14px 6px;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
@ -1758,7 +1664,6 @@ footer {
|
||||
.btn.primary {
|
||||
color: #ffffff;
|
||||
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(top, #049cdb, #0064cd);
|
||||
background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
|
||||
@ -1766,6 +1671,7 @@ footer {
|
||||
background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
|
||||
background-image: -o-linear-gradient(top, #049cdb, #0064cd);
|
||||
background-image: linear-gradient(top, #049cdb, #0064cd);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #0064cd #0064cd #003f81;
|
||||
@ -1843,9 +1749,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
position: relative;
|
||||
padding: 7px 15px;
|
||||
margin-bottom: 18px;
|
||||
color: #404040;
|
||||
color: #333333;
|
||||
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(top, #fceec1, #eedc94);
|
||||
background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
|
||||
@ -1853,6 +1758,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
|
||||
background-image: -o-linear-gradient(top, #fceec1, #eedc94);
|
||||
background-image: linear-gradient(top, #fceec1, #eedc94);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #eedc94 #eedc94 #e4c652;
|
||||
@ -1905,13 +1811,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.alert-message.block-message li {
|
||||
color: #404040;
|
||||
color: #333333;
|
||||
}
|
||||
.alert-message.block-message .alert-actions {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
|
||||
color: #404040;
|
||||
color: #333333;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.alert-message.block-message.error {
|
||||
@ -1962,7 +1868,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
}
|
||||
.pagination .disabled a, .pagination .disabled a:hover {
|
||||
background-color: transparent;
|
||||
color: #bfbfbf;
|
||||
color: #777777;
|
||||
}
|
||||
.pagination .next a {
|
||||
border: 0;
|
||||
@ -2232,7 +2138,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
}
|
||||
.label {
|
||||
padding: 1px 3px 2px;
|
||||
background-color: #bfbfbf;
|
||||
background-color: #777777;
|
||||
font-size: 9.75px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
|
||||
116
bootstrap.min.css
vendored
116
bootstrap.min.css
vendored
@ -21,7 +21,7 @@ input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box
|
||||
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
|
||||
textarea{overflow:auto;vertical-align:top;}
|
||||
html,body{background-color:#ffffff;}
|
||||
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#404040;}
|
||||
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#333333;}
|
||||
.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.container:after{clear:both;}
|
||||
.container-fluid{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
@ -76,20 +76,20 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
|
||||
.span-two-thirds{width:620px;}
|
||||
.offset-one-third{margin-left:340px;}
|
||||
.offset-two-thirds{margin-left:660px;}
|
||||
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;}
|
||||
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#777777;}
|
||||
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#333333;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#777777;}
|
||||
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
|
||||
h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
|
||||
h3,h4,h5,h6{line-height:36px;}
|
||||
h3{font-size:18px;}h3 small{font-size:14px;}
|
||||
h3{line-height:36px;font-size:18px;}h3 small{font-size:14px;}
|
||||
h4,h5,h6{line-height:18px;}
|
||||
h4{font-size:16px;}h4 small{font-size:12px;}
|
||||
h5{font-size:14px;}
|
||||
h6{font-size:13px;color:#bfbfbf;text-transform:uppercase;}
|
||||
h6{font-size:13px;color:#777777;text-transform:uppercase;}
|
||||
ul,ol{margin:0 0 18px 25px;}
|
||||
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
|
||||
ul{list-style:disc;}
|
||||
ol{list-style:decimal;}
|
||||
li{line-height:18px;color:#808080;}
|
||||
li{line-height:18px;color:#555555;}
|
||||
ul.unstyled{list-style:none;margin-left:0;}
|
||||
dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
|
||||
dl dt{font-weight:bold;}
|
||||
@ -97,37 +97,28 @@ dl dd{margin-left:9px;}
|
||||
hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;}
|
||||
strong{font-style:inherit;font-weight:bold;}
|
||||
em{font-style:italic;font-weight:inherit;line-height:inherit;}
|
||||
.muted{color:#bfbfbf;}
|
||||
.muted{color:#777777;}
|
||||
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
|
||||
blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
|
||||
blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#777777;}blockquote small:before{content:'\2014 \00A0';}
|
||||
address{display:block;line-height:18px;margin-bottom:18px;}
|
||||
code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
|
||||
pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
|
||||
form{margin-bottom:18px;}
|
||||
fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;padding-left:150px;font-size:19.5px;line-height:1;color:#404040;*padding:0 0 5px 145px;*line-height:1.5;}
|
||||
form .clearfix{margin-bottom:18px;zoom:1;}form .clearfix:before,form .clearfix:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
form .clearfix:after{clear:both;}
|
||||
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;}
|
||||
label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;}
|
||||
form .input{margin-left:150px;}
|
||||
legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;}
|
||||
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;}
|
||||
label{display:block;margin-bottom:5px;color:#333333;}
|
||||
input[type=checkbox],input[type=radio]{cursor:pointer;}
|
||||
input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
|
||||
input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
||||
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
|
||||
select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;}
|
||||
select[multiple]{height:inherit;}
|
||||
textarea{height:auto;}
|
||||
.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
|
||||
:-moz-placeholder{color:#bfbfbf;}
|
||||
::-webkit-input-placeholder{color:#bfbfbf;}
|
||||
input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
|
||||
input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
|
||||
input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;}
|
||||
form div.clearfix.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.clearfix.error>label,form div.clearfix.error span.help-inline,form div.clearfix.error span.help-block{color:#9d261d;}
|
||||
form div.clearfix.error input,form div.clearfix.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.clearfix.error input:focus,form div.clearfix.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
|
||||
form div.clearfix.error .input-prepend span.add-on,form div.clearfix.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
|
||||
.input-mini{width:60px;}
|
||||
.input-small{width:90px;}
|
||||
.input-medium{width:150px;}
|
||||
@ -151,34 +142,33 @@ input.span14,textarea.span14,select.span14{display:inline-block;float:none;width
|
||||
input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;}
|
||||
input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;}
|
||||
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
|
||||
.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
|
||||
.help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
|
||||
.help-inline{padding-left:5px;*position:relative;*top:-5px;}
|
||||
.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;}
|
||||
.has-error input,.has-error textarea,.has-error select{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}.has-error input:focus,.has-error textarea:focus,.has-error select:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
|
||||
.has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
|
||||
.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
|
||||
.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
|
||||
:-moz-placeholder{color:#777777;}
|
||||
::-webkit-input-placeholder{color:#777777;}
|
||||
.help-text{margin-top:5px;margin-bottom:0;color:#777777;}
|
||||
.help-inline{display:inline;padding-left:5px;*position:relative;*top:-5px;}
|
||||
.help-block{display:block;max-width:600px;}
|
||||
.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;}
|
||||
.inline-inputs{color:#555555;}.inline-inputs span,.inline-inputs input{display:inline-block;}
|
||||
.inline-inputs input.mini{width:60px;}
|
||||
.inline-inputs input.small{width:90px;}
|
||||
.inline-inputs span{padding:0 2px 0 1px;}
|
||||
.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
|
||||
.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
|
||||
.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#777777;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
|
||||
.input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;}
|
||||
.input-prepend .add-on{*margin-top:1px;}
|
||||
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
|
||||
.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;}
|
||||
.inputs-list{margin:0 0 5px;width:100%;}.inputs-list li{display:block;padding:0;width:100%;}
|
||||
.inputs-list label{display:block;float:none;width:auto;padding:0;line-height:18px;text-align:left;white-space:normal;}.inputs-list label strong{color:#808080;}
|
||||
.inputs-list label small{font-size:11px;font-weight:normal;}
|
||||
.inputs-list .inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;}
|
||||
.inputs-list:first-child{padding-top:6px;}
|
||||
.inputs-list li+li{padding-top:2px;}
|
||||
.inputs-list input[type=radio],.inputs-list input[type=checkbox]{margin-bottom:0;}
|
||||
.form-stacked{padding-left:20px;}.form-stacked fieldset{padding-top:9px;}
|
||||
.form-stacked legend{padding-left:0;}
|
||||
.form-stacked label{display:block;float:none;width:auto;font-weight:bold;text-align:left;line-height:20px;padding-top:0;}
|
||||
.form-stacked .clearfix{margin-bottom:9px;}.form-stacked .clearfix div.input{margin-left:0;}
|
||||
.form-stacked .inputs-list{margin-bottom:0;}.form-stacked .inputs-list li{padding-top:0;}.form-stacked .inputs-list li label{font-weight:normal;padding-top:0;}
|
||||
.form-stacked div.clearfix.error{padding-top:10px;padding-bottom:10px;padding-left:10px;margin-top:0;margin-left:-10px;}
|
||||
.form-stacked .actions{margin-left:-20px;padding-left:20px;}
|
||||
.control-group{margin-bottom:18px;}
|
||||
.control-group>label{font-weight:bold;}
|
||||
.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
|
||||
.form-horizontal .controls{margin-left:150px;}
|
||||
.form-horizontal .control-list{padding-top:6px;}
|
||||
.form-horizontal .form-actions{padding-left:150px;}
|
||||
.radial-test{background-color:#009900;background-image:-webkit-gradient(radial, center center, 0, center center, 460, from(#990000), to(#009900));background-image:-webkit-radial-gradient(circle, #990000, #009900);background-image:-moz-radial-gradient(circle, #990000, #009900);background-image:-ms-radial-gradient(circle, #990000, #009900);background-repeat:no-repeat;width:100%;height:940px;}
|
||||
table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
|
||||
table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;}
|
||||
table td{vertical-align:top;}
|
||||
@ -207,24 +197,24 @@ table .orange{color:#f89406;border-bottom-color:#f89406;}
|
||||
table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc;}
|
||||
table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
|
||||
table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
|
||||
.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
|
||||
.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#777777;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
|
||||
.topbar .brand a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
|
||||
.topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
|
||||
.topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;color:#ffffff;}
|
||||
.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
|
||||
.topbar form.pull-right{float:right;}
|
||||
.topbar input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#e6e6e6;}
|
||||
.topbar input::-webkit-input-placeholder{color:#e6e6e6;}
|
||||
.topbar input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
|
||||
.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#404040;text-shadow:0 1px 0 #ffffff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
|
||||
.topbar-inner{background-color:#222;background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
|
||||
.topbar input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#cccccc;}
|
||||
.topbar input::-webkit-input-placeholder{color:#cccccc;}
|
||||
.topbar input:hover{background-color:#777777;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
|
||||
.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#333333;text-shadow:0 1px 0 #ffffff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
|
||||
.topbar-inner{background-color:#222;background-color:#222222;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
|
||||
.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.nav>li{display:block;float:left;}
|
||||
.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.nav a:hover{color:#ffffff;text-decoration:none;}
|
||||
.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
|
||||
.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.nav.secondary-nav .dropdown-menu{right:0;border:0;}
|
||||
.nav .dropdown-toggle:hover,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
|
||||
.nav .dropdown-menu{background-color:#333;}.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
|
||||
.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
|
||||
.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
|
||||
.nav .dropdown-menu .active a{color:#ffffff;}
|
||||
.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
|
||||
.topbar ul .dropdown-menu li a{padding:4px 15px;}
|
||||
@ -232,14 +222,14 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
|
||||
.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
|
||||
.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
|
||||
.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
|
||||
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
|
||||
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#333333;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
|
||||
.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
|
||||
.dropdown.open .dropdown-menu{display:block;}
|
||||
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.tabs:after,.pills:after{clear:both;}
|
||||
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
|
||||
.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
|
||||
.tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
|
||||
.tabs>li.active>a{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
|
||||
.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
|
||||
.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
|
||||
.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
|
||||
@ -249,20 +239,20 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
|
||||
.pills .active a{background:#0069d6;color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
|
||||
.tab-content>*,.pill-content>*{display:none;}
|
||||
.tab-content>.active,.pill-content>.active{display:block;}
|
||||
.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
|
||||
.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
|
||||
.breadcrumb .active a{color:#404040;}
|
||||
.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
|
||||
.breadcrumb .divider{padding:0 5px;color:#777777;}
|
||||
.breadcrumb .active a{color:#333333;}
|
||||
.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
|
||||
.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;}
|
||||
.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
|
||||
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.success,.alert-message.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(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);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-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.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(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);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;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
|
||||
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);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-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);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;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
|
||||
.btn:focus{outline:1px dotted #666;}
|
||||
.btn.primary{color:#ffffff;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(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);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.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);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:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
|
||||
.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
||||
.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
||||
@ -271,16 +261,16 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
|
||||
:root .alert-message,:root .btn{border-radius:0 \0;}
|
||||
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
|
||||
.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;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-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;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(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);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);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-message .close{*margin-top:3px;}
|
||||
.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);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);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-message .close{*margin-top:3px;}
|
||||
.alert-message h5{line-height:18px;}
|
||||
.alert-message p{margin-bottom:0;}
|
||||
.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
|
||||
.alert-message .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-message.block-message{background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;}
|
||||
.alert-message.block-message ul{margin-bottom:0;}
|
||||
.alert-message.block-message li{color:#404040;}
|
||||
.alert-message.block-message li{color:#333333;}
|
||||
.alert-message.block-message .alert-actions{margin-top:5px;}
|
||||
.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
|
||||
.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
|
||||
.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
|
||||
.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
|
||||
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
|
||||
@ -288,7 +278,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||
.pagination li{display:inline;}
|
||||
.pagination a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;}
|
||||
.pagination a:hover,.pagination .active a{background-color:#c7eefe;}
|
||||
.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;}
|
||||
.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#777777;}
|
||||
.pagination .next a{border:0;}
|
||||
.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
|
||||
.modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;}
|
||||
@ -317,7 +307,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||
.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
|
||||
.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
|
||||
.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
|
||||
.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
|
||||
.label{padding:1px 3px 2px;background-color:#777777;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
|
||||
.label.warning{background-color:#f89406;}
|
||||
.label.success{background-color:#46a546;}
|
||||
.label.notice{background-color:#62cffc;}
|
||||
|
||||
@ -310,8 +310,16 @@ img.large-bird {
|
||||
opacity: .1;
|
||||
}
|
||||
|
||||
|
||||
/* Pretty Print
|
||||
-------------------------------------------------- */
|
||||
pre.prettyprint {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* Wells
|
||||
-------------------------------------------------- */
|
||||
.well form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
423
docs/index.html
423
docs/index.html
@ -884,331 +884,198 @@
|
||||
<div class="page-header">
|
||||
<h1>Forms</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span-one-third">
|
||||
<h3>Four types of forms</h3>
|
||||
<p>With 2.0, we now have four types of forms to choose from:</p>
|
||||
<ul>
|
||||
<li>Search form for a super-rounded input and optional button</li>
|
||||
<li>Inline form for a series of elements on one line</li>
|
||||
<li>Horizontal form for left-aligned labels</li>
|
||||
<li>Vertical form for stacked labels and inputs</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span-one-third">
|
||||
<h3></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Default styles</h2>
|
||||
<p>All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.</p>
|
||||
<h2>Search form</h2>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label for="xlInput">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
|
||||
<div class="well">
|
||||
<form class="form-search">
|
||||
<input type="text" class="search-query">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</form>
|
||||
</div><!--/well-->
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="normalSelect">Select</label>
|
||||
<div class="input">
|
||||
<select name="normalSelect" id="normalSelect">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="mediumSelect">Select</label>
|
||||
<div class="input">
|
||||
<select class="medium" name="mediumSelect" id="mediumSelect">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Inline form</h2>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="multiSelect">Multiple select</label>
|
||||
<div class="input">
|
||||
<select class="medium" multiple="multiple" name="multiSelect" id="multiSelect">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
<div class="span12">
|
||||
<div class="well">
|
||||
<form class="form-inline">
|
||||
<h4>Some directional text</h4>
|
||||
<p>And maybe some kind of optional supporting text right here.</p>
|
||||
<input type="text" class="input-medium">
|
||||
<input type="text" class="input-medium">
|
||||
<input type="text" class="input-medium">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</form>
|
||||
</div><!--/well-->
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label>Uneditable input</label>
|
||||
<div class="input">
|
||||
<span class="uneditable-input">Some value here</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="disabledInput">Disabled input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled />
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Horizontal form</h2>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="disabledInput">Disabled textarea</label>
|
||||
<div class="input">
|
||||
<textarea class="xxlarge" name="textarea" id="textarea" rows="3" disabled></textarea>
|
||||
<div class="span12">
|
||||
<form class="form-horizontal">
|
||||
<legend>Example form</legend>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="input01">Text input</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="xlarge" name="input01">
|
||||
<p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix error">
|
||||
<label for="xlInput2">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
|
||||
<span class="help-inline">Small snippet of help text</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label for="prependedInput">Prepended text</label>
|
||||
<div class="input">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input class="medium" id="prependedInput" name="prependedInput" size="16" type="text" />
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="select01">Select list</label>
|
||||
<div class="controls">
|
||||
<select name="select01">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="multiSelect">Multi-select</label>
|
||||
<div class="controls">
|
||||
<select multiple="multiple" name="multiSelect">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="prependedInput2">Prepended checkbox</label>
|
||||
<div class="input">
|
||||
<div class="input-prepend">
|
||||
<label class="add-on"><input type="checkbox" name="" id="" value="" /></label>
|
||||
<input class="mini" id="prependedInput2" name="prependedInput2" size="16" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="appendedInput">Appended checkbox</label>
|
||||
<div class="input">
|
||||
<div class="input-append">
|
||||
<input class="mini" id="appendedInput" name="appendedInput" size="16" type="text" />
|
||||
<label class="add-on active"><input type="checkbox" name="" id="" value="" checked="checked" /></label>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="fileInput">File input</label>
|
||||
<div class="input">
|
||||
</fieldset>
|
||||
<legend>Example form</legend>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="fileInput">File input</label>
|
||||
<div class="controls">
|
||||
<input class="input-file" id="fileInput" name="fileInput" type="file" />
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label id="optionsCheckboxes">List of options</label>
|
||||
<div class="input">
|
||||
<ul class="inputs-list">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option1" />
|
||||
<span>Option one is this and that—be sure to include why it’s great</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option2" />
|
||||
<span>Option two can also be checked and included in form results</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option2" />
|
||||
<span>Option three can—yes, you guessed it—also be checked and included in form results</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="disabled">
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option2" disabled />
|
||||
<span>Option four cannot be checked as it is disabled.</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="help-block">
|
||||
<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
|
||||
</span>
|
||||
<fieldset class="control-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="inputError">
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label>Date range</label>
|
||||
<div class="input">
|
||||
<div class="inline-inputs">
|
||||
<input class="small" type="text" value="May 1, 2011" />
|
||||
<input class="mini" type="text" value="12:00am" />
|
||||
to
|
||||
<input class="small" type="text" value="May 8, 2011" />
|
||||
<input class="mini" type="text" value="11:59pm" />
|
||||
<span class="help-inline">All times are shown as Pacific Standard Time (GMT -08:00).</span>
|
||||
</fieldset>
|
||||
<fieldset class="control-group has-error">
|
||||
<label class="control-label" for="textareaError">Textarea with error</label>
|
||||
<div class="controls">
|
||||
<textarea class="input-xxlarge" rows="3"></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="optionsCheckboxes">Checkboxes</label>
|
||||
<div class="controls">
|
||||
<div class="control-list">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option1">
|
||||
Option one is this and that—be sure to include why it’s great
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option2">
|
||||
Option two can also be checked and included in form results
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option3">
|
||||
Option three can—yes, you guessed it—also be checked and included in form results
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option4">
|
||||
Option four cannot be checked as it is disabled
|
||||
</label>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="textarea">Textarea</label>
|
||||
<div class="input">
|
||||
<textarea class="xxlarge" id="textarea2" name="textarea2" rows="3"></textarea>
|
||||
<span class="help-block">
|
||||
Block of help text to describe the field above if need be.
|
||||
</span>
|
||||
<p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label id="optionsRadio">List of options</label>
|
||||
<div class="input">
|
||||
<ul class="inputs-list">
|
||||
<li>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="optionsRadios">Radio buttons</label>
|
||||
<div class="controls">
|
||||
<div class="control-list">
|
||||
<label>
|
||||
<input type="radio" checked name="optionsRadios" value="option1" />
|
||||
<span>Option one is this and that—be sure to include why it’s great</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" value="option2" />
|
||||
<span>Option two can is something else and selecting it will deselect options 1</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="actions">
|
||||
<input type="submit" class="btn primary" value="Save changes"> <button type="reset" class="btn">Cancel</button>
|
||||
<p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="form-actions">
|
||||
<button type="submit" class="btn primary">Save changes</button>
|
||||
<button type="reset" class="btn">Cancel</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<br />
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Stacked forms</h2>
|
||||
<p>Add <code>.form-stacked</code> to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.</p>
|
||||
<h2>Vertical form</h2>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<form action="" class="form-stacked">
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label for="xlInput3">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge" id="xlInput3" name="xlInput3" size="30" type="text" />
|
||||
<form class="form-vertical">
|
||||
<legend>Example form</legend>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="input01">Label</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="xlarge" name="input01">
|
||||
<p class="help-text">Be sure to fill this out like so, or else!</p>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="stackedSelect">Select</label>
|
||||
<div class="input">
|
||||
<select name="stackedSelect" id="stackedSelect">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix error">
|
||||
<label for="xlInput4">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge error" id="xlInput4" name="xlInput4" size="30" type="text" />
|
||||
<span class="help-inline">Small snippet of help text</span>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="select01">Label</label>
|
||||
<div class="controls">
|
||||
<select name="select01"></select>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label id="optionsCheckboxes">List of options</label>
|
||||
<div class="input">
|
||||
<ul class="inputs-list">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option1" />
|
||||
<span>Option one is this and that—be sure to include why it’s great</span>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="input02">Label</label>
|
||||
<div class="controls">
|
||||
<div class="control-list">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Something something something something something
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option2" />
|
||||
<span>Option two can also be checked and included in form results</span>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Something something something something
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Something something something
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="help-block">
|
||||
<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
|
||||
</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="form-actions">
|
||||
<button type="submit" class="btn primary">Save changes</button>
|
||||
<button type="reset" class="btn">Cancel</button>
|
||||
</fieldset>
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn primary">Save changes</button> <button type="reset" class="btn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Form field sizes</h2>
|
||||
<p>Customize any form <code>input</code>, <code>select</code>, or <code>textarea</code> width by adding just a few classes to your markup.</p>
|
||||
<p>As of v1.3.0, we have added the grid-based sizing classes for form elements. <strong>Please use the these over the existing <code>.mini</code>, <code>.small</code>, etc classes.</strong></p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<form action="">
|
||||
<div class="clearfix"><input class="span2" id="" name="" type="text" placeholder=".span2" /></div>
|
||||
<div class="clearfix"><input class="span3" id="" name="" type="text" placeholder=".span3" /></div>
|
||||
<div class="clearfix"><input class="span4" id="" name="" type="text" placeholder=".span4" /></div>
|
||||
<div class="clearfix"><input class="span5" id="" name="" type="text" placeholder=".span5" /></div>
|
||||
<div class="clearfix"><input class="span6" id="" name="" type="text" placeholder=".span6" /></div>
|
||||
<div class="clearfix"><input class="span7" id="" name="" type="text" placeholder=".span7" /></div>
|
||||
<div class="clearfix"><input class="span8" id="" name="" type="text" placeholder=".span8" /></div>
|
||||
<div class="clearfix"><input class="span9" id="" name="" type="text" placeholder=".span9" /></div>
|
||||
<div class="clearfix"><input class="span10" id="" name="" type="text" placeholder=".span10" /></div>
|
||||
<div class="clearfix"><input class="span11" id="" name="" type="text" placeholder=".span11" /></div>
|
||||
<div class="clearfix"><input class="span12" id="" name="" type="text" placeholder=".span12" /></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<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 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.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<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 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>
|
||||
<div class="well">
|
||||
<a href="#" class="btn large primary">Primary action</a>
|
||||
<a href="#" class="btn large">Action</a>
|
||||
</div>
|
||||
<div class="well" style="padding: 16px 19px;">
|
||||
<a href="#" class="btn small primary">Primary action</a>
|
||||
<a href="#" class="btn small">Action</a>
|
||||
</div>
|
||||
<h3>Disabled state</h3>
|
||||
<p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
|
||||
<h4>Links</h4>
|
||||
<div class="well">
|
||||
<a href="#" class="btn large primary disabled">Primary action</a>
|
||||
<a href="#" class="btn large disabled">Action</a>
|
||||
</div>
|
||||
<h4>Buttons</h4>
|
||||
<div class="well">
|
||||
<button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
@ -1378,6 +1245,7 @@
|
||||
<h2>Tabs and pills</h2>
|
||||
<p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
|
||||
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#tabs">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<ul class="tabs">
|
||||
@ -1929,6 +1797,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
</section>
|
||||
|
||||
|
||||
<div class="radial-test"></div>
|
||||
|
||||
</div><!-- /container -->
|
||||
|
||||
|
||||
319
lib/forms.less
319
lib/forms.less
@ -6,29 +6,20 @@
|
||||
// GENERAL STYLES
|
||||
// --------------
|
||||
|
||||
// Make all forms have space below them
|
||||
form {
|
||||
margin-bottom: @baseline;
|
||||
}
|
||||
|
||||
// Groups of fields with labels on top (legends)
|
||||
fieldset {
|
||||
margin-bottom: @baseline;
|
||||
padding-top: @baseline;
|
||||
legend {
|
||||
legend {
|
||||
display: block;
|
||||
padding-left: 150px;
|
||||
width: 100%;
|
||||
margin-bottom: @baseline * 1.5;
|
||||
font-size: @basefont * 1.5;
|
||||
line-height: 1;
|
||||
line-height: @baseline * 2;
|
||||
color: @grayDark;
|
||||
*padding: 0 0 5px 145px; /* IE6-7 */
|
||||
*line-height: 1.5; /* IE6-7 */
|
||||
}
|
||||
}
|
||||
|
||||
// Parent element that clears floats and wraps labels and fields together
|
||||
form .clearfix {
|
||||
margin-bottom: @baseline;
|
||||
.clearfix()
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
// Set font for forms
|
||||
@ -36,25 +27,16 @@ label,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
#font > .sans-serif(normal,13px,normal);
|
||||
#font > .sans-serif(normal,@basefont,@baseline);
|
||||
}
|
||||
|
||||
// Float labels left
|
||||
// Identify controls by their labels
|
||||
label {
|
||||
padding-top: 6px;
|
||||
font-size: @basefont;
|
||||
line-height: @baseline;
|
||||
float: left;
|
||||
width: 130px;
|
||||
text-align: right;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: @grayDark;
|
||||
}
|
||||
|
||||
// Shift over the inside div to align all label's relevant content
|
||||
form .input {
|
||||
margin-left: 150px;
|
||||
}
|
||||
|
||||
// Checkboxs and radio buttons
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
@ -77,7 +59,7 @@ select,
|
||||
.border-radius(3px);
|
||||
}
|
||||
|
||||
/* mini reset for non-html5 file types */
|
||||
/* Mini reset for unique input types */
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
width: auto;
|
||||
@ -89,6 +71,7 @@ input[type=radio] {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Reset the file input to browser defaults
|
||||
input[type=file] {
|
||||
background-color: @white;
|
||||
padding: initial;
|
||||
@ -97,6 +80,7 @@ input[type=file] {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Help out input buttons
|
||||
input[type=button],
|
||||
input[type=reset],
|
||||
input[type=submit] {
|
||||
@ -120,24 +104,11 @@ textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// For text that needs to appear as an input but should not be an input
|
||||
.uneditable-input {
|
||||
background-color: @white;
|
||||
display: block;
|
||||
border-color: #eee;
|
||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Placeholder text gets special styles; can't be bundled together though for some reason
|
||||
:-moz-placeholder {
|
||||
color: @grayLight;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: @grayLight;
|
||||
}
|
||||
|
||||
// Focus states
|
||||
// FOCUS STATE
|
||||
// -----------
|
||||
|
||||
input,
|
||||
textarea {
|
||||
@transition: border linear .2s, box-shadow linear .2s;
|
||||
@ -158,36 +129,6 @@ select:focus {
|
||||
outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
|
||||
}
|
||||
|
||||
// Error styles
|
||||
form div.clearfix.error {
|
||||
background: lighten(@red, 57%);
|
||||
padding: 10px 0;
|
||||
margin: -10px 0 10px;
|
||||
.border-radius(4px);
|
||||
@error-text: desaturate(lighten(@red, 25%), 25%);
|
||||
> label,
|
||||
span.help-inline,
|
||||
span.help-block {
|
||||
color: @red;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
border-color: @error-text;
|
||||
.box-shadow(0 0 3px rgba(171,41,32,.25));
|
||||
&:focus {
|
||||
border-color: darken(@error-text, 10%);
|
||||
.box-shadow(0 0 6px rgba(171,41,32,.5));
|
||||
}
|
||||
}
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
span.add-on {
|
||||
background: lighten(@red, 50%);
|
||||
border-color: @error-text;
|
||||
color: darken(@error-text, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// INPUT SIZES
|
||||
@ -232,8 +173,9 @@ select {
|
||||
}
|
||||
|
||||
|
||||
// INPUT STATES
|
||||
// ------------
|
||||
|
||||
// DISABLED STATE
|
||||
// --------------
|
||||
|
||||
// Disabled and read-only inputs
|
||||
input[disabled],
|
||||
@ -247,36 +189,89 @@ textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Actions (the buttons)
|
||||
.actions {
|
||||
background: #f5f5f5;
|
||||
margin-top: @baseline;
|
||||
margin-bottom: @baseline;
|
||||
padding: (@baseline - 1) 20px @baseline 150px;
|
||||
border-top: 1px solid #ddd;
|
||||
.border-radius(0 0 3px 3px);
|
||||
.secondary-action {
|
||||
float: right;
|
||||
a {
|
||||
line-height: 30px;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
|
||||
// ERROR STATE
|
||||
// -----------
|
||||
|
||||
// Set color of error text
|
||||
@error-text: desaturate(lighten(@red, 25%), 25%);
|
||||
|
||||
// Style the background of control-groups with errors
|
||||
.has-error {
|
||||
background: lighten(@red, 55%);
|
||||
padding: (@baseline / 2) 0;
|
||||
margin: -10px 0 10px;
|
||||
.border-radius(4px);
|
||||
> label,
|
||||
span.help-inline,
|
||||
span.help-block {
|
||||
color: @red;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
border-color: @error-text;
|
||||
.box-shadow(0 0 3px rgba(171,41,32,.25));
|
||||
&:focus {
|
||||
border-color: darken(@error-text, 10%);
|
||||
.box-shadow(0 0 6px rgba(171,41,32,.5));
|
||||
}
|
||||
}
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
span.add-on {
|
||||
background: lighten(@red, 50%);
|
||||
border-color: @error-text;
|
||||
color: darken(@error-text, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// FORM ACTIONS
|
||||
// ------------
|
||||
|
||||
.form-actions {
|
||||
padding: (@baseline - 1) 20px @baseline;
|
||||
margin-top: @baseline;
|
||||
margin-bottom: @baseline;
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
// For text that needs to appear as an input but should not be an input
|
||||
.uneditable-input {
|
||||
background-color: @white;
|
||||
display: block;
|
||||
border-color: #eee;
|
||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Placeholder text gets special styles; can't be bundled together though for some reason
|
||||
:-moz-placeholder {
|
||||
color: @grayLight;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: @grayLight;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// HELP TEXT
|
||||
// ---------
|
||||
|
||||
.help-inline,
|
||||
.help-block {
|
||||
font-size: @basefont - 2;
|
||||
line-height: @baseline;
|
||||
.help-text {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
color: @grayLight;
|
||||
}
|
||||
|
||||
.help-inline {
|
||||
display: inline;
|
||||
padding-left: 5px;
|
||||
*position: relative; /* IE6-7 */
|
||||
*top: -5px; /* IE6-7 */
|
||||
@ -290,7 +285,7 @@ textarea[readonly] {
|
||||
|
||||
|
||||
// INLINE FIELDS
|
||||
// ---------
|
||||
// -------------
|
||||
|
||||
.inline-inputs {
|
||||
color: @gray;
|
||||
@ -309,8 +304,8 @@ textarea[readonly] {
|
||||
}
|
||||
|
||||
|
||||
// INPUTS GROUPS
|
||||
// -------------
|
||||
// INPUT GROUPS
|
||||
// ------------
|
||||
|
||||
// Allow us to put symbols and text within the input field for a cleaner look
|
||||
.input-prepend,
|
||||
@ -360,97 +355,49 @@ textarea[readonly] {
|
||||
}
|
||||
|
||||
|
||||
// LISTS OF CONTROLS
|
||||
|
||||
|
||||
// HORIZONTAL & VERTICAL FORMS
|
||||
// ---------------------------
|
||||
|
||||
|
||||
// Common properties
|
||||
// -----------------
|
||||
|
||||
// Stacked options for forms (radio buttons or checkboxes)
|
||||
.inputs-list {
|
||||
margin: 0 0 5px;
|
||||
width: 100%;
|
||||
li {
|
||||
display: block;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
line-height: @baseline;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
strong {
|
||||
color: @gray;
|
||||
}
|
||||
small {
|
||||
font-size: @basefont - 2;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.inputs-list {
|
||||
margin-left: 25px;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
&:first-child {
|
||||
padding-top: 6px;
|
||||
}
|
||||
li + li {
|
||||
padding-top: 2px;
|
||||
}
|
||||
input[type=radio],
|
||||
input[type=checkbox] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// Margin to space out fieldsets
|
||||
.control-group {
|
||||
margin-bottom: @baseline;
|
||||
}
|
||||
|
||||
|
||||
// STACKED FORMS
|
||||
// -------------
|
||||
|
||||
.form-stacked {
|
||||
padding-left: 20px;
|
||||
fieldset {
|
||||
padding-top: @baseline / 2;
|
||||
}
|
||||
legend {
|
||||
padding-left: 0;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
// Bold the labels so they stand out
|
||||
.control-group > label {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.clearfix {
|
||||
margin-bottom: @baseline / 2;
|
||||
div.input {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.inputs-list {
|
||||
margin-bottom: 0;
|
||||
li {
|
||||
padding-top: 0;
|
||||
label {
|
||||
font-weight: normal;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.clearfix.error {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
margin-top: 0;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.actions {
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Lists of controls (checkboxes and radios)
|
||||
.control-list {
|
||||
}
|
||||
|
||||
|
||||
// Horizontal-specific styles
|
||||
// --------------------------
|
||||
|
||||
// Float the labels left
|
||||
.form-horizontal .control-group > label {
|
||||
float: left;
|
||||
width: 130px;
|
||||
padding-top: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
// Move over all input controls and content
|
||||
.form-horizontal .controls {
|
||||
margin-left: 150px;
|
||||
}
|
||||
// Move the options list down to align with labels
|
||||
.form-horizontal .control-list {
|
||||
padding-top: 6px; // has to be padding because margin collaspes
|
||||
}
|
||||
// Move over buttons in .form-actions to align with .controls
|
||||
.form-horizontal .form-actions {
|
||||
padding-left: 150px;
|
||||
}
|
||||
@ -119,6 +119,19 @@
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
// Transform for scale and rotate
|
||||
// translate, rotate, scale -- need to finalize
|
||||
.rotation(@degrees: 5deg) {
|
||||
-webkit-transform: rotate(@degrees);
|
||||
-moz-transform: rotate(@degrees);
|
||||
transform: rotate(@degrees);
|
||||
}
|
||||
.scale(@value: 1.5) {
|
||||
-webkit-transform: scale(@value);
|
||||
-moz-transform: scale(@value);
|
||||
transform: scale(@value);
|
||||
}
|
||||
|
||||
// Background clipping
|
||||
.background-clip(@clip) {
|
||||
-webkit-background-clip: @clip;
|
||||
@ -157,9 +170,8 @@
|
||||
|
||||
// Gradients
|
||||
#gradient {
|
||||
.horizontal (@startColor: #555, @endColor: #333) {
|
||||
.horizontal(@startColor: #555, @endColor: #333) {
|
||||
background-color: @endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
|
||||
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
|
||||
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
|
||||
@ -167,11 +179,11 @@
|
||||
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
|
||||
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
|
||||
background-repeat: repeat-x;
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
|
||||
}
|
||||
.vertical (@startColor: #555, @endColor: #333) {
|
||||
.vertical(@startColor: #555, @endColor: #333) {
|
||||
background-color: @endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
|
||||
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
|
||||
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
|
||||
@ -179,9 +191,10 @@
|
||||
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
|
||||
background-image: linear-gradient(top, @startColor, @endColor); // The standard
|
||||
background-repeat: repeat-x;
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
|
||||
}
|
||||
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
|
||||
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
|
||||
background-color: @endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
|
||||
@ -192,15 +205,24 @@
|
||||
}
|
||||
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
|
||||
background-color: @endColor;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
|
||||
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
||||
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
|
||||
background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
||||
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
||||
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
||||
background-repeat: no-repeat;
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
.radial(@centerColor: #555, @outsideColor: #333) {
|
||||
background-color: @outsideColor;
|
||||
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@centerColor), to(@outsideColor));
|
||||
background-image: -webkit-radial-gradient(circle, @centerColor, @outsideColor);
|
||||
background-image: -moz-radial-gradient(circle, @centerColor, @outsideColor);
|
||||
background-image: -ms-radial-gradient(circle, @centerColor, @outsideColor);
|
||||
background-repeat: no-repeat;
|
||||
// Opera cannot do radial gradients yet
|
||||
}
|
||||
}
|
||||
|
||||
// Reset filters for IE
|
||||
|
||||
@ -41,15 +41,16 @@ h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
h3, h4, h5, h6 {
|
||||
line-height: @baseline * 2;
|
||||
}
|
||||
h3 {
|
||||
line-height: @baseline * 2;
|
||||
font-size: 18px;
|
||||
small {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
h4, h5, h6 {
|
||||
line-height: @baseline;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
small {
|
||||
|
||||
@ -9,10 +9,10 @@
|
||||
|
||||
// Grays
|
||||
@black: #000;
|
||||
@grayDark: lighten(@black, 25%);
|
||||
@gray: lighten(@black, 50%);
|
||||
@grayLight: lighten(@black, 75%);
|
||||
@grayLighter: lighten(@black, 90%);
|
||||
@grayDark: #333;
|
||||
@gray: #555;
|
||||
@grayLight: #777;
|
||||
@grayLighter: #ccc;
|
||||
@white: #fff;
|
||||
|
||||
// Accent Colors
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user