mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip
This commit is contained in:
Jacob Thornton
commit
402c480097
422
bootstrap.css
vendored
422
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: Thu Jan 5 23:24:01 PST 2012
|
||||
* Date: Sat Jan 7 04:20:37 PST 2012
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
@ -209,21 +209,27 @@ body {
|
||||
.fluid-container:after {
|
||||
clear: both;
|
||||
}
|
||||
.fluid-sidebar-left, .fluid-sidebar-right {
|
||||
.fluid-sidebar {
|
||||
width: 220px;
|
||||
margin: 0 20px 18px;
|
||||
}
|
||||
.fluid-sidebar-left {
|
||||
.sidebar-left {
|
||||
padding-left: 260px;
|
||||
}
|
||||
.sidebar-right {
|
||||
padding-right: 260px;
|
||||
}
|
||||
.sidebar-left .fluid-sidebar {
|
||||
float: left;
|
||||
margin-left: -240px;
|
||||
}
|
||||
.fluid-sidebar-right {
|
||||
.sidebar-right .fluid-sidebar {
|
||||
float: right;
|
||||
margin-right: -240px;
|
||||
}
|
||||
.fluid-content {
|
||||
margin-left: 240px;
|
||||
}
|
||||
.fluid-container.reverse .fluid-content {
|
||||
margin-left: 0;
|
||||
margin-right: 240px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
a {
|
||||
font-weight: inherit;
|
||||
@ -382,20 +388,20 @@ h3 {
|
||||
h3 small {
|
||||
font-size: 14px;
|
||||
}
|
||||
h4, h5, h6 {
|
||||
line-height: 18px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
h4 small {
|
||||
font-size: 12px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-size: 11px;
|
||||
color: #999999;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -435,7 +441,7 @@ dl dd {
|
||||
margin-left: 9px;
|
||||
}
|
||||
hr {
|
||||
margin: 27px 0;
|
||||
margin: 18px 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid #fff;
|
||||
@ -601,8 +607,10 @@ select, input[type=file] {
|
||||
line-height: 27px;
|
||||
}
|
||||
select {
|
||||
background-color: #ffffff;
|
||||
width: 220px;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
select[multiple], select[size] {
|
||||
height: inherit;
|
||||
@ -625,10 +633,17 @@ textarea {
|
||||
.controls > .radio:first-child, .controls > .checkbox:first-child {
|
||||
padding-top: 6px;
|
||||
}
|
||||
.radio.inline, .checkbox.inline {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
|
||||
margin-left: 10px;
|
||||
}
|
||||
input, textarea {
|
||||
-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);
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
-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;
|
||||
@ -637,9 +652,9 @@ input, textarea {
|
||||
}
|
||||
input:focus, textarea:focus {
|
||||
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);
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
outline: 0;
|
||||
}
|
||||
input[type=file]:focus, input[type=checkbox]:focus, select:focus {
|
||||
@ -666,133 +681,84 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
|
||||
.input-xxlarge {
|
||||
width: 530px;
|
||||
}
|
||||
input.span1,
|
||||
textarea.span1,
|
||||
select.span1,
|
||||
.uneditable-input.span1 {
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span1, textarea.span1, .uneditable-input.span1 {
|
||||
width: 50px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span2,
|
||||
textarea.span2,
|
||||
select.span2,
|
||||
.uneditable-input.span2 {
|
||||
float: none;
|
||||
input.span2, textarea.span2, .uneditable-input.span2 {
|
||||
width: 130px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span3,
|
||||
textarea.span3,
|
||||
select.span3,
|
||||
.uneditable-input.span3 {
|
||||
float: none;
|
||||
input.span3, textarea.span3, .uneditable-input.span3 {
|
||||
width: 210px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span4,
|
||||
textarea.span4,
|
||||
select.span4,
|
||||
.uneditable-input.span4 {
|
||||
float: none;
|
||||
input.span4, textarea.span4, .uneditable-input.span4 {
|
||||
width: 290px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span5,
|
||||
textarea.span5,
|
||||
select.span5,
|
||||
.uneditable-input.span5 {
|
||||
float: none;
|
||||
input.span5, textarea.span5, .uneditable-input.span5 {
|
||||
width: 370px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span6,
|
||||
textarea.span6,
|
||||
select.span6,
|
||||
.uneditable-input.span6 {
|
||||
float: none;
|
||||
input.span6, textarea.span6, .uneditable-input.span6 {
|
||||
width: 450px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span7,
|
||||
textarea.span7,
|
||||
select.span7,
|
||||
.uneditable-input.span7 {
|
||||
float: none;
|
||||
input.span7, textarea.span7, .uneditable-input.span7 {
|
||||
width: 530px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span8,
|
||||
textarea.span8,
|
||||
select.span8,
|
||||
.uneditable-input.span8 {
|
||||
float: none;
|
||||
input.span8, textarea.span8, .uneditable-input.span8 {
|
||||
width: 610px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span9,
|
||||
textarea.span9,
|
||||
select.span9,
|
||||
.uneditable-input.span9 {
|
||||
float: none;
|
||||
input.span9, textarea.span9, .uneditable-input.span9 {
|
||||
width: 690px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span10,
|
||||
textarea.span10,
|
||||
select.span10,
|
||||
.uneditable-input.span10 {
|
||||
float: none;
|
||||
input.span10, textarea.span10, .uneditable-input.span10 {
|
||||
width: 770px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span11,
|
||||
textarea.span11,
|
||||
select.span11,
|
||||
.uneditable-input.span11 {
|
||||
float: none;
|
||||
input.span11, textarea.span11, .uneditable-input.span11 {
|
||||
width: 850px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span12,
|
||||
textarea.span12,
|
||||
select.span12,
|
||||
.uneditable-input.span12 {
|
||||
float: none;
|
||||
input.span12, textarea.span12, .uneditable-input.span12 {
|
||||
width: 930px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span13,
|
||||
textarea.span13,
|
||||
select.span13,
|
||||
.uneditable-input.span13 {
|
||||
float: none;
|
||||
width: 1010px;
|
||||
margin-left: 0;
|
||||
select.span1 {
|
||||
width: 70px;
|
||||
}
|
||||
input.span14,
|
||||
textarea.span14,
|
||||
select.span14,
|
||||
.uneditable-input.span14 {
|
||||
float: none;
|
||||
width: 1090px;
|
||||
margin-left: 0;
|
||||
select.span2 {
|
||||
width: 150px;
|
||||
}
|
||||
input.span15,
|
||||
textarea.span15,
|
||||
select.span15,
|
||||
.uneditable-input.span15 {
|
||||
float: none;
|
||||
width: 1170px;
|
||||
margin-left: 0;
|
||||
select.span3 {
|
||||
width: 230px;
|
||||
}
|
||||
input.span16,
|
||||
textarea.span16,
|
||||
select.span16,
|
||||
.uneditable-input.span16 {
|
||||
float: none;
|
||||
width: 1250px;
|
||||
margin-left: 0;
|
||||
select.span4 {
|
||||
width: 310px;
|
||||
}
|
||||
select.span5 {
|
||||
width: 390px;
|
||||
}
|
||||
select.span6 {
|
||||
width: 470px;
|
||||
}
|
||||
select.span7 {
|
||||
width: 550px;
|
||||
}
|
||||
select.span8 {
|
||||
width: 630px;
|
||||
}
|
||||
select.span9 {
|
||||
width: 710px;
|
||||
}
|
||||
select.span10 {
|
||||
width: 790px;
|
||||
}
|
||||
select.span11 {
|
||||
width: 870px;
|
||||
}
|
||||
select.span12 {
|
||||
width: 950px;
|
||||
}
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
@ -911,11 +877,17 @@ input::-webkit-input-placeholder {
|
||||
.input-prepend:after, .input-append:after {
|
||||
clear: both;
|
||||
}
|
||||
.input-prepend input, .input-append input {
|
||||
.input-prepend input,
|
||||
.input-append input,
|
||||
.input-prepend .uneditable-input,
|
||||
.input-append .uneditable-input {
|
||||
-webkit-border-radius: 0 3px 3px 0;
|
||||
-moz-border-radius: 0 3px 3px 0;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.input-prepend .uneditable-input, .input-append .uneditable-input {
|
||||
border-left-color: #ccc;
|
||||
}
|
||||
.input-prepend .add-on, .input-append .add-on {
|
||||
float: left;
|
||||
display: block;
|
||||
@ -944,12 +916,15 @@ input::-webkit-input-placeholder {
|
||||
/* IE6-7 */
|
||||
|
||||
}
|
||||
.input-append input {
|
||||
.input-append input, .input-append .uneditable-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 .uneditable-input {
|
||||
border-right-color: #ccc;
|
||||
}
|
||||
.input-append .add-on {
|
||||
margin-right: 0;
|
||||
margin-left: -1px;
|
||||
@ -1471,23 +1446,25 @@ i {
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-toggle:after {
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid #ffffff;
|
||||
border-top: 4px solid #000;
|
||||
filter: alpha(opacity=30);
|
||||
-moz-opacity: 0.3;
|
||||
opacity: 0.3;
|
||||
content: "\2193";
|
||||
}
|
||||
.dropdown:hover .dropdown-toggle:after {
|
||||
.dropdown .caret {
|
||||
margin-top: 8px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.dropdown:hover .caret {
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
@ -1495,68 +1472,63 @@ i {
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
z-index: 900;
|
||||
z-index: 1000;
|
||||
float: left;
|
||||
display: none;
|
||||
min-width: 160px;
|
||||
max-width: 220px;
|
||||
_width: 160px;
|
||||
padding: 6px 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background-color: #ffffff;
|
||||
border-color: #999;
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
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);
|
||||
border-width: 1px;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
zoom: 1;
|
||||
}
|
||||
.dropdown-menu li {
|
||||
float: none;
|
||||
display: block;
|
||||
background-color: none;
|
||||
}
|
||||
.dropdown-menu .divider {
|
||||
height: 1px;
|
||||
margin: 5px 0;
|
||||
margin: 5px 1px;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
background-color: #e5e5e5;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
.topbar .dropdown-menu a, .dropdown-menu a {
|
||||
.dropdown-menu a {
|
||||
display: block;
|
||||
padding: 4px 15px;
|
||||
padding: 2px 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 {
|
||||
color: #333333;
|
||||
.dropdown-menu a:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
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);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
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='#eeeeee', endColorstr='#dddddd', GradientType=0);
|
||||
-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);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.dropdown.open .dropdown-toggle {
|
||||
color: #ffffff;
|
||||
@ -1672,6 +1644,13 @@ i {
|
||||
.navbar .btn {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.navbar-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.navbar-form input, .navbar-form select {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.navbar-search {
|
||||
position: relative;
|
||||
float: left;
|
||||
@ -1735,7 +1714,7 @@ i {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
z-index: 1010;
|
||||
}
|
||||
.nav {
|
||||
position: relative;
|
||||
@ -2111,19 +2090,22 @@ i {
|
||||
}
|
||||
.side-nav .nav-label, .side-nav .nav-item {
|
||||
display: block;
|
||||
padding: 3px 16px;
|
||||
padding: 3px 15px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.side-nav .nav-label {
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
color: #333333;
|
||||
color: #999999;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.side-nav .nav-group {
|
||||
margin: 0 -1px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.side-nav .nav-group + .nav-label {
|
||||
margin-top: 9px;
|
||||
}
|
||||
.side-nav .nav-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -2136,16 +2118,16 @@ i {
|
||||
.side-nav .active .nav-item {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: #aaaaaa;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa);
|
||||
background-image: -ms-linear-gradient(top, #cccccc, #aaaaaa);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));
|
||||
background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa);
|
||||
background-image: -o-linear-gradient(top, #cccccc, #aaaaaa);
|
||||
background-image: linear-gradient(top, #cccccc, #aaaaaa);
|
||||
background-color: #999999;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));
|
||||
background-image: -moz-linear-gradient(top, #cccccc, #999999);
|
||||
background-image: -ms-linear-gradient(top, #cccccc, #999999);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));
|
||||
background-image: -webkit-linear-gradient(top, #cccccc, #999999);
|
||||
background-image: -o-linear-gradient(top, #cccccc, #999999);
|
||||
background-image: linear-gradient(top, #cccccc, #999999);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
@ -2237,7 +2219,7 @@ i {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
z-index: 1020;
|
||||
background-color: #000000;
|
||||
}
|
||||
.modal-backdrop.fade {
|
||||
@ -2252,7 +2234,7 @@ i {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 11000;
|
||||
z-index: 1030;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
width: 560px;
|
||||
@ -2273,9 +2255,6 @@ i {
|
||||
-moz-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.modal .close {
|
||||
margin-top: 7px;
|
||||
}
|
||||
.modal.fade {
|
||||
-webkit-transition: opacity .3s linear, top .3s ease-out;
|
||||
-moz-transition: opacity .3s linear, top .3s ease-out;
|
||||
@ -2291,6 +2270,9 @@ i {
|
||||
padding: 5px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.modal-header .close {
|
||||
margin-top: 7px;
|
||||
}
|
||||
.modal-body {
|
||||
padding: 15px;
|
||||
}
|
||||
@ -2322,7 +2304,7 @@ i {
|
||||
}
|
||||
.twipsy {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
z-index: 1050;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
padding: 5px;
|
||||
@ -2400,7 +2382,7 @@ i {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
z-index: 1040;
|
||||
display: none;
|
||||
padding: 5px;
|
||||
}
|
||||
@ -2653,23 +2635,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.btn-toolbar {
|
||||
zoom: 1;
|
||||
}
|
||||
.btn-toolbar:before, .btn-toolbar:after {
|
||||
display: table;
|
||||
*display: inline;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
}
|
||||
.btn-toolbar:after {
|
||||
clear: both;
|
||||
}
|
||||
.btn-toolbar .btn-group {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.btn-group {
|
||||
position: relative;
|
||||
zoom: 1;
|
||||
}
|
||||
.btn-group:before, .btn-group:after {
|
||||
@ -2681,6 +2648,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
.btn-group:after {
|
||||
clear: both;
|
||||
}
|
||||
.btn-group + .btn-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.btn-toolbar .btn-group {
|
||||
display: inline-block;
|
||||
}
|
||||
.btn-group .btn {
|
||||
position: relative;
|
||||
float: left;
|
||||
@ -2698,7 +2671,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.btn-group .btn:last-child {
|
||||
.btn-group .btn:last-child, .btn-group .dropdown-toggle {
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
@ -2715,7 +2688,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
-moz-border-radius-bottomleft: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
.btn-group .btn.large:last-child {
|
||||
.btn-group .btn.large:last-child, .btn-group .large.dropdown-toggle {
|
||||
-webkit-border-top-right-radius: 6px;
|
||||
-moz-border-radius-topright: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
@ -2726,6 +2699,39 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
.btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active {
|
||||
z-index: 2;
|
||||
}
|
||||
.btn-group .dropdown-toggle {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
-webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.btn-group.open .dropdown-menu {
|
||||
display: block;
|
||||
top: 30px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.btn-group.open .dropdown-toggle {
|
||||
background-image: none;
|
||||
-webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.btn .caret {
|
||||
margin-top: 6px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.primary .caret,
|
||||
.danger .caret,
|
||||
.info .caret,
|
||||
.success .caret {
|
||||
border-top-color: #fff;
|
||||
filter: alpha(opacity=75);
|
||||
-moz-opacity: 0.75;
|
||||
opacity: 0.75;
|
||||
}
|
||||
.alert-message {
|
||||
position: relative;
|
||||
padding: 7px 15px;
|
||||
@ -2956,6 +2962,9 @@ a.thumbnail:hover {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.modal.fade.in {
|
||||
top: auto;
|
||||
}
|
||||
.horizontal-form .control-group > label {
|
||||
float: none;
|
||||
width: auto;
|
||||
@ -3143,6 +3152,9 @@ a.thumbnail:hover {
|
||||
.container {
|
||||
width: @siteWidth;
|
||||
}
|
||||
.row {
|
||||
margin-left: @gridGutterWidth * -1;
|
||||
}
|
||||
[class*="span"] {
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
@ -3176,4 +3188,4 @@ a.thumbnail:hover {
|
||||
.offset12 { .offset(12); }
|
||||
|
||||
}
|
||||
*/
|
||||
*/
|
||||
129
bootstrap.min.css
vendored
129
bootstrap.min.css
vendored
@ -25,11 +25,12 @@ body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:
|
||||
.container:after{clear:both;}
|
||||
.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.fluid-container:after{clear:both;}
|
||||
.fluid-sidebar-left,.fluid-sidebar-right{width:220px;}
|
||||
.fluid-sidebar-left{float:left;}
|
||||
.fluid-sidebar-right{float:right;}
|
||||
.fluid-content{margin-left:240px;}
|
||||
.fluid-container.reverse .fluid-content{margin-left:0;margin-right:240px;}
|
||||
.fluid-sidebar{width:220px;margin:0 20px 18px;}
|
||||
.sidebar-left{padding-left:260px;}
|
||||
.sidebar-right{padding-right:260px;}
|
||||
.sidebar-left .fluid-sidebar{float:left;margin-left:-240px;}
|
||||
.sidebar-right .fluid-sidebar{float:right;margin-right:-240px;}
|
||||
.fluid-content{float:left;width:100%;}
|
||||
a{font-weight:inherit;line-height:inherit;color:#0088cc;text-decoration:none;}a:hover{color:#005580;text-decoration:underline;}
|
||||
.pull-right{float:right;}
|
||||
.pull-left{float:left;}
|
||||
@ -66,9 +67,10 @@ h1,h2,h3,h4,h5,h6{font-weight:bold;color:#333333;text-rendering:optimizelegibili
|
||||
h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;}
|
||||
h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;}
|
||||
h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;}
|
||||
h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
|
||||
h5{font-size:14px;line-height:18px;}
|
||||
h6{font-size:13px;line-height:18px;color:#999999;text-transform:uppercase;}
|
||||
h4,h5,h6{line-height:18px;}
|
||||
h4{font-size:14px;}h4 small{font-size:12px;}
|
||||
h5{font-size:12px;}
|
||||
h6{font-size:11px;color:#999999;text-transform:uppercase;}
|
||||
ul,ol{margin:0 0 9px 25px;}
|
||||
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
|
||||
ul{list-style:disc;}
|
||||
@ -78,7 +80,7 @@ ul.unstyled{margin-left:0;list-style:none;}
|
||||
dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
|
||||
dl dt{font-weight:bold;}
|
||||
dl dd{margin-left:9px;}
|
||||
hr{margin:27px 0;border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #fff;}
|
||||
hr{margin:18px 0;border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #fff;}
|
||||
strong{font-style:inherit;font-weight:bold;}
|
||||
em{font-style:italic;font-weight:inherit;line-height:inherit;}
|
||||
.muted{color:#999999;}
|
||||
@ -100,15 +102,17 @@ input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;
|
||||
input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color: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;*margin-top:4px;line-height:27px;}
|
||||
select{background-color:#ffffff;vertical-align:middle;}
|
||||
select{width:220px;padding:0;vertical-align:middle;background-color:#ffffff;}
|
||||
select[multiple],select[size]{height:inherit;}
|
||||
input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
||||
textarea{height:auto;}
|
||||
.radio,.checkbox{padding-left:18px;}
|
||||
.radio input[type=radio],.checkbox input[type=checkbox]{float:left;margin-left:-18px;}
|
||||
.controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;}
|
||||
input,textarea{-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);-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;}
|
||||
input:focus,textarea:focus{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);outline:0;}
|
||||
.radio.inline,.checkbox.inline{display:inline-block;margin-bottom:0;}
|
||||
.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;}
|
||||
input,textarea{-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1);-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;}
|
||||
input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;}
|
||||
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;}
|
||||
.input-mini{width:60px;}
|
||||
.input-small{width:90px;}
|
||||
@ -116,22 +120,31 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado
|
||||
.input-large{width:210px;}
|
||||
.input-xlarge{width:270px;}
|
||||
.input-xxlarge{width:530px;}
|
||||
input.span1,textarea.span1,select.span1,.uneditable-input.span1{float:none;width:50px;margin-left:0;}
|
||||
input.span2,textarea.span2,select.span2,.uneditable-input.span2{float:none;width:130px;margin-left:0;}
|
||||
input.span3,textarea.span3,select.span3,.uneditable-input.span3{float:none;width:210px;margin-left:0;}
|
||||
input.span4,textarea.span4,select.span4,.uneditable-input.span4{float:none;width:290px;margin-left:0;}
|
||||
input.span5,textarea.span5,select.span5,.uneditable-input.span5{float:none;width:370px;margin-left:0;}
|
||||
input.span6,textarea.span6,select.span6,.uneditable-input.span6{float:none;width:450px;margin-left:0;}
|
||||
input.span7,textarea.span7,select.span7,.uneditable-input.span7{float:none;width:530px;margin-left:0;}
|
||||
input.span8,textarea.span8,select.span8,.uneditable-input.span8{float:none;width:610px;margin-left:0;}
|
||||
input.span9,textarea.span9,select.span9,.uneditable-input.span9{float:none;width:690px;margin-left:0;}
|
||||
input.span10,textarea.span10,select.span10,.uneditable-input.span10{float:none;width:770px;margin-left:0;}
|
||||
input.span11,textarea.span11,select.span11,.uneditable-input.span11{float:none;width:850px;margin-left:0;}
|
||||
input.span12,textarea.span12,select.span12,.uneditable-input.span12{float:none;width:930px;margin-left:0;}
|
||||
input.span13,textarea.span13,select.span13,.uneditable-input.span13{float:none;width:1010px;margin-left:0;}
|
||||
input.span14,textarea.span14,select.span14,.uneditable-input.span14{float:none;width:1090px;margin-left:0;}
|
||||
input.span15,textarea.span15,select.span15,.uneditable-input.span15{float:none;width:1170px;margin-left:0;}
|
||||
input.span16,textarea.span16,select.span16,.uneditable-input.span16{float:none;width:1250px;margin-left:0;}
|
||||
input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{float:none;margin-left:0;}
|
||||
input.span1,textarea.span1,.uneditable-input.span1{width:50px;}
|
||||
input.span2,textarea.span2,.uneditable-input.span2{width:130px;}
|
||||
input.span3,textarea.span3,.uneditable-input.span3{width:210px;}
|
||||
input.span4,textarea.span4,.uneditable-input.span4{width:290px;}
|
||||
input.span5,textarea.span5,.uneditable-input.span5{width:370px;}
|
||||
input.span6,textarea.span6,.uneditable-input.span6{width:450px;}
|
||||
input.span7,textarea.span7,.uneditable-input.span7{width:530px;}
|
||||
input.span8,textarea.span8,.uneditable-input.span8{width:610px;}
|
||||
input.span9,textarea.span9,.uneditable-input.span9{width:690px;}
|
||||
input.span10,textarea.span10,.uneditable-input.span10{width:770px;}
|
||||
input.span11,textarea.span11,.uneditable-input.span11{width:850px;}
|
||||
input.span12,textarea.span12,.uneditable-input.span12{width:930px;}
|
||||
select.span1{width:70px;}
|
||||
select.span2{width:150px;}
|
||||
select.span3{width:230px;}
|
||||
select.span4{width:310px;}
|
||||
select.span5{width:390px;}
|
||||
select.span6{width:470px;}
|
||||
select.span7{width:550px;}
|
||||
select.span8{width:630px;}
|
||||
select.span9{width:710px;}
|
||||
select.span10{width:790px;}
|
||||
select.span11{width:870px;}
|
||||
select.span12{width:950px;}
|
||||
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
|
||||
.control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;}
|
||||
.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#ee5f5b;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
|
||||
@ -150,11 +163,13 @@ input::-webkit-input-placeholder{color:#999999;}
|
||||
.help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;}
|
||||
.input-prepend,.input-append{margin-bottom:5px;zoom:1;}.input-prepend:before,.input-append:before,.input-prepend:after,.input-append:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.input-prepend:after,.input-append:after{clear:both;}
|
||||
.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 input,.input-append input,.input-prepend .uneditable-input,.input-append .uneditable-input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
|
||||
.input-prepend .uneditable-input,.input-append .uneditable-input{border-left-color:#ccc;}
|
||||
.input-prepend .add-on,.input-append .add-on{float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#999999;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-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-color:#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 input,.input-append .uneditable-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 .uneditable-input{border-right-color:#ccc;}
|
||||
.input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
|
||||
.search-query{padding-left:14px;padding-right:14px;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
|
||||
.search-form input,.inline-form input,.horizontal-form input,.search-form textarea,.inline-form textarea,.horizontal-form textarea,.search-form select,.inline-form select,.horizontal-form select,.search-form .uneditable-input,.inline-form .uneditable-input,.horizontal-form .uneditable-input{display:inline-block;margin-bottom:0;}
|
||||
@ -267,11 +282,11 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
||||
.minus{background-position:-432px -96px;}
|
||||
.asterisk{background-position:-456px -96px;}
|
||||
.dropdown{position:relative;}
|
||||
.dropdown-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";}
|
||||
.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
|
||||
.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;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;zoom:1;}.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:#555555;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{color:#333333;text-decoration:none;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);-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);}
|
||||
.caret{display:inline-block;width:0;height:0;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";}
|
||||
.dropdown .caret{margin-top:8px;margin-left:2px;}
|
||||
.dropdown:hover .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
|
||||
.dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;}
|
||||
.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);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);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);}
|
||||
.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
|
||||
.dropdown.open .dropdown-menu{display:block;}
|
||||
.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;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);}
|
||||
@ -284,13 +299,14 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
||||
.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;}
|
||||
.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;}
|
||||
.navbar .btn{margin-top:5px;}
|
||||
.navbar-form{margin-bottom:0;}.navbar-form input,.navbar-form select{display:inline-block;margin-bottom:0;}
|
||||
.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#eeeeee;}
|
||||
.navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;}
|
||||
.navbar-search .search-query:hover{color:#ffffff;background-color:#999999;background-color:rgba(255, 255, 255, 0.5);}
|
||||
.navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#333333;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-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);outline:0;}
|
||||
.navbar-static{margin-bottom:18px;}
|
||||
.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
|
||||
.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:10000;}
|
||||
.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1010;}
|
||||
.nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;}
|
||||
.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;}
|
||||
.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
|
||||
@ -340,13 +356,14 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
||||
.subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;}
|
||||
.subnav ul .active>a{color:#333333;background-color:#eee;}
|
||||
.side-nav{padding:9px 0;}
|
||||
.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
|
||||
.side-nav .nav-label{font-size:11px;line-height:18px;color:#333333;text-transform:uppercase;}
|
||||
.side-nav .nav-group{margin:0 -1px;list-style:none;}
|
||||
.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 15px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
|
||||
.side-nav .nav-label{font-size:11px;line-height:18px;color:#999999;text-transform:uppercase;}
|
||||
.side-nav .nav-group{margin:0;list-style:none;}
|
||||
.side-nav .nav-group+.nav-label{margin-top:9px;}
|
||||
.side-nav .nav-item{font-weight:bold;}
|
||||
.side-nav .nav-item i{vertical-align:-2px;}
|
||||
.side-nav .nav-item:hover{text-decoration:none;}
|
||||
.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#aaaaaa;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));background-image:-moz-linear-gradient(top, #cccccc, #aaaaaa);background-image:-ms-linear-gradient(top, #cccccc, #aaaaaa);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));background-image:-webkit-linear-gradient(top, #cccccc, #aaaaaa);background-image:-o-linear-gradient(top, #cccccc, #aaaaaa);background-image:linear-gradient(top, #cccccc, #aaaaaa);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);}
|
||||
.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#999999;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));background-image:-moz-linear-gradient(top, #cccccc, #999999);background-image:-ms-linear-gradient(top, #cccccc, #999999);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #cccccc, #999999);background-image:-o-linear-gradient(top, #cccccc, #999999);background-image:linear-gradient(top, #cccccc, #999999);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);}
|
||||
.breadcrumb{padding:7px 14px;margin:0 0 18px;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:#999999;}
|
||||
.breadcrumb .active a{color:#333333;}
|
||||
@ -357,17 +374,16 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
||||
.pagination .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;cursor:default;}
|
||||
.pagination .next a{border:0;}
|
||||
.pagination.centered{text-align:center;}
|
||||
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;}
|
||||
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1020;background-color:#000000;}.modal-backdrop.fade{opacity:0;}
|
||||
.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
|
||||
.modal{position:fixed;top:50%;left:50%;z-index:11000;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
|
||||
.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
|
||||
.modal{position:fixed;top:50%;left:50%;z-index:1030;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
|
||||
.modal.fade.in{top:50%;}
|
||||
.modal-header{padding:5px 15px;border-bottom:1px solid #eee;}
|
||||
.modal-header{padding:5px 15px;border-bottom:1px solid #eee;}.modal-header .close{margin-top:7px;}
|
||||
.modal-body{padding:15px;}
|
||||
.modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.modal-footer:after{clear:both;}
|
||||
.modal-footer .btn{float:right;margin-left:5px;}
|
||||
.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
|
||||
.twipsy{position:absolute;z-index:1050;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
|
||||
.twipsy.top{margin-top:-2px;}
|
||||
.twipsy.right{margin-left:2px;}
|
||||
.twipsy.bottom{margin-top:2px;}
|
||||
@ -378,7 +394,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
||||
.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
|
||||
.twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
|
||||
.twipsy-arrow{position:absolute;width:0;height:0;}
|
||||
.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.top{margin-top:-5px;}
|
||||
.popover{position:absolute;top:0;left:0;z-index:1040;display:none;padding:5px;}.popover.top{margin-top:-5px;}
|
||||
.popover.right{margin-left:5px;}
|
||||
.popover.bottom{margin-top:5px;}
|
||||
.popover.left{margin-left:-5px;}
|
||||
@ -404,16 +420,21 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
||||
.btn.small{padding:7px 9px 7px;font-size:11px;}
|
||||
: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;}
|
||||
.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.btn-toolbar:after{clear:both;}
|
||||
.btn-toolbar .btn-group{float:left;margin-right:10px;}
|
||||
.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.btn-group{position:relative;zoom:1;}.btn-group:before,.btn-group:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.btn-group:after{clear:both;}
|
||||
.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
|
||||
.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
|
||||
.btn-group+.btn-group{margin-left:5px;}
|
||||
.btn-toolbar .btn-group{display:inline-block;}
|
||||
.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
|
||||
.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
|
||||
.btn-group .btn:last-child,.btn-group .dropdown-toggle{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
|
||||
.btn-group .btn.large:first-child{margin-left:0;-webkit-border-top-left-radius:6px;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;}
|
||||
.btn-group .btn.large:last-child{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}
|
||||
.btn-group .btn.large:last-child,.btn-group .large.dropdown-toggle{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}
|
||||
.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
|
||||
.btn-group .dropdown-toggle{padding-left:8px;padding-right:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);}
|
||||
.btn-group.open .dropdown-menu{display:block;top:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
|
||||
.btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);}
|
||||
.btn .caret{margin-top:6px;margin-left:0;}
|
||||
.primary .caret,.danger .caret,.info .caret,.success .caret{border-top-color:#fff;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}
|
||||
.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);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);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);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;}
|
||||
@ -451,4 +472,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
|
||||
.label.success{background-color:#46a546;}
|
||||
.label.notice{background-color:#62cffc;}
|
||||
.hidden{display:none;visibility:hidden;}
|
||||
@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
|
||||
@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
|
||||
|
||||
@ -192,6 +192,75 @@ body > .navbar-fixed .brand:hover {
|
||||
}
|
||||
|
||||
|
||||
/* Quickstart section for getting le code
|
||||
-------------------------------------------------- */
|
||||
.getting-started {
|
||||
background-color: #f5f5f5;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5));
|
||||
background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5);
|
||||
background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5));
|
||||
background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5);
|
||||
background-image: -o-linear-gradient(#f9f9f9, #f5f5f5);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)";
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0);
|
||||
background-image: linear-gradient(#f9f9f9, #f5f5f5);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.getting-started {
|
||||
border-color: #eee;
|
||||
}
|
||||
.getting-started td {
|
||||
width: 33%;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
.getting-started td + td {
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
.getting-started td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.quick-start {
|
||||
padding: 17px 20px;
|
||||
}
|
||||
.quick-start h3,
|
||||
.quick-start p {
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.quick-start p {
|
||||
color: #777;
|
||||
}
|
||||
.quick-start .current-version,
|
||||
.quick-start .current-version a {
|
||||
color: #999;
|
||||
}
|
||||
.quick-start form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.quick-start textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
line-height: 21px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
/* Makes inputs behave like true block-level elements */
|
||||
-webkit-box-sizing: border-box; /* Older Webkit */
|
||||
-moz-box-sizing: border-box; /* Older FF */
|
||||
-ms-box-sizing: border-box; /* IE8 */
|
||||
box-sizing: border-box; /* CSS3 spec*/
|
||||
/* Hacks for IE7 to make this work just okay enough to function */
|
||||
*width: 90%;
|
||||
*height: 24px;
|
||||
}
|
||||
|
||||
|
||||
/* Footer
|
||||
-------------------------------------------------- */
|
||||
.footer {
|
||||
@ -333,7 +402,8 @@ pre.prettyprint {
|
||||
}
|
||||
|
||||
/* Make tables spaced out a bit more */
|
||||
h2 + table {
|
||||
h2 + table,
|
||||
h2 + .row {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
@ -341,8 +411,10 @@ h2 + table {
|
||||
.example-sites img {
|
||||
max-width: 290px;
|
||||
}
|
||||
.built-with {
|
||||
.marketing-byline {
|
||||
margin: -18px 0 27px;
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
@ -385,7 +457,11 @@ form.well {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
/* For input sizes, make them display block */
|
||||
.docs-input-sizes input[type=text] {
|
||||
display: block;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
/* Icons
|
||||
------------------------- */
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
.lit { color: #195f91; }
|
||||
.pun, .opn, .clo { color: #93a1a1; }
|
||||
.fun { color: #dc322f; }
|
||||
.str, .atv { color: #62C462; }
|
||||
.kwd, .linenums .tag { color: #049CD9; }
|
||||
.typ, .atn, .dec, .var { color: #EE5F5B; }
|
||||
.pln { color: #93a1a1; }
|
||||
.str, .atv { color: #D14; }
|
||||
.kwd, .linenums .tag { color: #1e347b; }
|
||||
.typ, .atn, .dec, .var { color: teal; }
|
||||
.pln { color: #48484c; }
|
||||
pre.prettyprint {
|
||||
background-color: #fefbf3;
|
||||
padding: 9px;
|
||||
@ -17,8 +17,26 @@ pre.prettyprint {
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
pre.prettyprint {
|
||||
padding: 8px;
|
||||
background-color: #f7f7f9;
|
||||
border: 1px solid #e1e1e8;
|
||||
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
}
|
||||
|
||||
/* Specify class=linenums on a pre to get line numbering */
|
||||
ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */
|
||||
ol.linenums li { color: #444; line-height: 18px; }
|
||||
ol.linenums {
|
||||
margin: 0 0 0 33px; /* IE indents via margin-left */
|
||||
}
|
||||
ol.linenums li {
|
||||
padding-left: 12px;
|
||||
color: #bebec5;
|
||||
line-height: 18px;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
/* Alternate shading for lines */
|
||||
li.L1, li.L3, li.L5, li.L7, li.L9 { }
|
||||
li.L1, li.L3, li.L5, li.L7, li.L9 {
|
||||
|
||||
}
|
||||
@ -1009,8 +1009,9 @@
|
||||
<hr>
|
||||
<h3>Form validation</h3>
|
||||
<p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p>
|
||||
<pre class="prettyprint">
|
||||
<fieldset class="control-group error">
|
||||
<pre class="prettyprint linenums">
|
||||
<fieldset
|
||||
class="control-group error">
|
||||
...
|
||||
</fieldset>
|
||||
</pre>
|
||||
@ -1024,12 +1025,21 @@
|
||||
<div class="span8">
|
||||
<form class="horizontal-form">
|
||||
<legend>Extending form controls</legend>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label">Form sizes</label>
|
||||
<div class="controls docs-input-sizes">
|
||||
<input class="span2" type="text" name="" placeholder=".span2">
|
||||
<input class="span3" type="text" name="" placeholder=".span3">
|
||||
<input class="span4" type="text" name="" placeholder=".span4">
|
||||
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="prependedInput">Prepended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text">
|
||||
<input class="span2" id="prependedInput" name="prependedInput" size="16" type="text">
|
||||
</div>
|
||||
<p class="help-block">Here's some help text</p>
|
||||
</div>
|
||||
@ -1038,12 +1048,26 @@
|
||||
<label class="control-label" for="appendedInput">Appended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-append">
|
||||
<input class="input-small" id="appendedInput" name="appendedInput" size="16" type="text">
|
||||
<input class="span2" id="appendedInput" name="appendedInput" size="16" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
<p class="help-block">Here's more help text</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
|
||||
<div class="controls">
|
||||
<label class="checkbox inline">
|
||||
<input type="checkbox" name="inlineCheckbox1" value="option1"> 1
|
||||
</label>
|
||||
<label class="checkbox inline">
|
||||
<input type="checkbox" name="inlineCheckbox1" value="option1"> 2
|
||||
</label>
|
||||
<label class="checkbox inline">
|
||||
<input type="checkbox" name="inlineCheckbox1" value="option1"> 3
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="optionsCheckboxes">Checkboxes</label>
|
||||
<div class="controls">
|
||||
@ -1088,6 +1112,7 @@
|
||||
<hr>
|
||||
<h3>Checkboxes and radios</h3>
|
||||
<p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.</p>
|
||||
<p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
@ -1178,17 +1203,12 @@
|
||||
|
||||
<br>
|
||||
|
||||
<h2>Button groups <small>Join buttons for more toolbar-like functionality</small></h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Button groups</h2>
|
||||
<p>Use button groups to join multiple buttons together as one composite component. Just build them with a series of <code><a></code> or <code><button></code> elements. Button groups can also function as radios and checkboxes (see <a href="./javascript.html#buttons">the Javascript docs</a> for that).</p>
|
||||
<p>You can also combine sets of button groups into a toolbar for more complex projects.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p>
|
||||
<p class="muted">Heads up: CSS for button groups is in a separate file, button-groups.less.</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Linked button group</h3>
|
||||
<p>Using the standard <code><a class="btn" href="#">...</a></code> markup, simply add all the buttons you need.</p>
|
||||
<h3>Button groups</h3>
|
||||
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p>
|
||||
<p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Left</a>
|
||||
@ -1196,7 +1216,6 @@
|
||||
<a class="btn" href="#">Right</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Level up one more time by wrapping multiple instances of <code><div class="btn-group"></code> with <code><div class="btn-toolbar"></code>.</p>
|
||||
<div class="well" style="padding: 10px;">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
@ -1204,24 +1223,132 @@
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
<a class="btn" href="#">4</a>
|
||||
<a class="btn" href="#">5</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">5</a>
|
||||
<a class="btn" href="#">6</a>
|
||||
<a class="btn" href="#">7</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">8</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">9</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">10</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Example markup</h3>
|
||||
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
</div>
|
||||
</pre>
|
||||
<p>And with a toolbar for multiple groups:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Checkbox and radio flavors</h3>
|
||||
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p>
|
||||
<hr>
|
||||
<h4 class="muted">Heads up</h4>
|
||||
<p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<h2>Button dropdowns <small>Built on button groups to provide contextual menus</small></h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Split button dropdowns</h3>
|
||||
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-toolbar" style="margin-bottom: 9px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Action</a>
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<a class="btn primary" href="#">Action</a>
|
||||
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<a class="btn danger" href="#">Danger</a>
|
||||
<a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn success" href="#">Success</a>
|
||||
<a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<a class="btn info" href="#">Info</a>
|
||||
<a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
</div> <!-- /well -->
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Example markup</h3>
|
||||
<p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Action</a>
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<!-- dropdown menu links -->
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -1429,5 +1556,11 @@
|
||||
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('.dropdown-toggle').dropdown();
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -227,27 +227,27 @@
|
||||
================================================== -->
|
||||
<section id="sidenav">
|
||||
<div class="page-header">
|
||||
<h1>Side nav <small></small></h1>
|
||||
<h1>Side nav <small>for lists of links</small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>Examples</h3>
|
||||
<p>Side navs can be just links, links with headings, and links with icons.</p>
|
||||
<div class="well side-nav">
|
||||
<h6 class="nav-label">Your account</h6>
|
||||
<ul class="nav-group">
|
||||
<li class="active"><a class="nav-item" href="#">Home</a></li>
|
||||
<li><a class="nav-item" href="#">Library</a></li>
|
||||
<li><a class="nav-item" href="#">Profile</a></li>
|
||||
<li><a class="nav-item" href="#">Settings</a></li>
|
||||
<li><a class="nav-item" href="#">Help</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="well side-nav">
|
||||
<h6 class="nav-label">Your account</h6>
|
||||
<ul class="nav-group">
|
||||
<li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
|
||||
<li><a class="nav-item" href="#">Profile</a></li>
|
||||
<li><a class="nav-item" href="#">Settings</a></li>
|
||||
</ul>
|
||||
<h6 class="nav-label">Your account</h6>
|
||||
<ul class="nav-group">
|
||||
<li><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
|
||||
<li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
|
||||
<li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li>
|
||||
<li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
|
||||
@ -255,6 +255,34 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3>Why use it</h3>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>Markup</h3>
|
||||
<p>Marking up a side nav is at the core just writing an unordered list of links.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav-group">
|
||||
<li class="active">
|
||||
<a class="nav-item" href="#">Home</a>
|
||||
</li>
|
||||
<li><a class="nav-item" href="#">Library</a></li>
|
||||
<li><a class="nav-item" href="#">Help</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<h6 class="nav-label"></h6>
|
||||
<ul class="nav-group">
|
||||
...
|
||||
</ul>
|
||||
<h6 class="nav-label"></h6>
|
||||
<ul class="nav-group">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -267,10 +295,12 @@
|
||||
<div class="page-header">
|
||||
<h1>Navbar</h1>
|
||||
</div>
|
||||
<div class="navbar navbar-static" >
|
||||
<h2>Static navbar example</h2>
|
||||
<p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
|
||||
<div class="navbar navbar-static">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="brand" href="#">Project Name</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
@ -306,20 +336,70 @@
|
||||
</div><!-- /navbar -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>What is it</h3>
|
||||
<p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
|
||||
<div class="span8">
|
||||
<h3>Navbar scaffolding</h3>
|
||||
<p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-static">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto;">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
<p>To make the navbar fixed, swamp the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
<br>
|
||||
<h3>Brand name</h3>
|
||||
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<a class="brand" href="#">
|
||||
Project name
|
||||
</a>
|
||||
</pre>
|
||||
<br>
|
||||
<h3>Search form</h3>
|
||||
<p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-search">
|
||||
<input type="text" class="search-query pull-left" placeholder="Search">
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Customizable</h3>
|
||||
<p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Dropdowns included</h3>
|
||||
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p>
|
||||
<h3>Nav links</h3>
|
||||
<p>Nav items are simple to add via unordered lists.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
<li class="active">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdowns">our javascript plugin</a>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
<li class="dropdown">
|
||||
<a href="#"
|
||||
class="dropdown-toggle"
|
||||
data-toggle="dropdown">
|
||||
Account
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
|
||||
|
||||
</section>
|
||||
|
||||
@ -507,34 +587,39 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="span6">
|
||||
<h3>Why use them</h3>
|
||||
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.</p>
|
||||
|
||||
<h3>Examples</h3>
|
||||
<p>A single example shown as it might be displayed across multiple pages.</p>
|
||||
<ul class="breadcrumb">
|
||||
<li class="active">Home</li>
|
||||
</ul>
|
||||
<ul class="breadcrumb">
|
||||
<li><a href="#">Home</a> <span class="divider">/</span></li>
|
||||
<li class="active">Middle page</li>
|
||||
<li class="active">Library</li>
|
||||
</ul>
|
||||
<ul class="breadcrumb">
|
||||
<li><a href="#">Home</a> <span class="divider">/</span></li>
|
||||
<li><a href="#">Middle page</a> <span class="divider">/</span></li>
|
||||
<li class="active">Another one</li>
|
||||
</ul>
|
||||
<ul class="breadcrumb">
|
||||
<li><a href="#">Home</a> <span class="divider">/</span></li>
|
||||
<li><a href="#">Middle page</a> <span class="divider">/</span></li>
|
||||
<li><a href="#">Another one</a> <span class="divider">/</span></li>
|
||||
<li class="active">You are here</li>
|
||||
<li><a href="#">Library</a> <span class="divider">/</span></li>
|
||||
<li class="active">Data</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>Markup</h3>
|
||||
<p>HTML is your standard unordered list with links.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="breadcrumb">
|
||||
<li><a href="#">Home</a> <span class="divider">/</span></li>
|
||||
<li><a href="#">Middle page</a> <span class="divider">/</span></li>
|
||||
<li><a href="#">Another one</a> <span class="divider">/</span></li>
|
||||
<li class="active">You are here</li>
|
||||
<li>
|
||||
<a href="#">Home</a> <span class="divider">/</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Library</a> <span class="divider">/</span>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
@ -545,13 +630,14 @@
|
||||
|
||||
|
||||
<!-- Step nav
|
||||
================================================== -->
|
||||
==================================================
|
||||
|
||||
COMMENTED OUT AND NOT SUPPORTED AT THIS TIME.
|
||||
|
||||
<section id="stepNav">
|
||||
<div class="page-header">
|
||||
<h1>Step nav <small></small></h1>
|
||||
</div>
|
||||
|
||||
<!-- Step nav -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<p>Placeholder for now!</p>
|
||||
@ -571,8 +657,8 @@
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
-->
|
||||
|
||||
|
||||
|
||||
@ -682,6 +768,9 @@
|
||||
</pre>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Block messages -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
|
||||
@ -106,8 +106,8 @@
|
||||
|
||||
|
||||
<div class="marketing">
|
||||
<h1>Built with Bootstrap</h1>
|
||||
<p class="built-with">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a>.</p>
|
||||
<h1>Built with Bootstrap.</h1>
|
||||
<p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a>.</p>
|
||||
<ul class="thumbnails example-sites">
|
||||
<li class="span4">
|
||||
<a class="thumbnail" href="http://kippt.com/" target="_blank">
|
||||
@ -126,7 +126,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Designed for everyone, everywhere</h1>
|
||||
<h1>Designed for everyone, everywhere.</h1>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<img class="icon" src="assets/img/glyphicons/glyphicons_042_group.png">
|
||||
@ -200,8 +200,40 @@
|
||||
<p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p>
|
||||
</div>
|
||||
</div><!--/row-->
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Quickstart options
|
||||
================================================== -->
|
||||
<h1>Get started in no time.</h1>
|
||||
<p class="marketing-byline">Built for any skill level, Bootstrap fits your workflow and development process.</p>
|
||||
<table class="bordered-table getting-started">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="quick-start">
|
||||
<h3>Hotlink the CSS</h3>
|
||||
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
|
||||
<form>
|
||||
<textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
|
||||
</form>
|
||||
</td>
|
||||
<td class="quick-start">
|
||||
<h3>Use it with LESS</h3>
|
||||
<p>A fan of using LESS? No problem, just clone the repo and add these lines:</p>
|
||||
<form>
|
||||
<textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less">
|
||||
<script src="/path/to/less.js"></script></textarea>
|
||||
</form>
|
||||
</td>
|
||||
<td class="quick-start">
|
||||
<h3>Fork on GitHub</h3>
|
||||
<p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p>
|
||||
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p>
|
||||
<p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.marketing -->
|
||||
</div><!-- /#overview -->
|
||||
|
||||
|
||||
|
||||
@ -235,7 +235,14 @@ $('#myModal').on('hidden', function () {
|
||||
<h3>Modal Heading</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
<h4>Text in a modal</h4>
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
|
||||
|
||||
<h4>Popover in a modal</h4>
|
||||
<p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
|
||||
|
||||
<h4>Twipsy tooltips in a modal</h4>
|
||||
<p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn primary">Save changes</a>
|
||||
@ -274,7 +281,7 @@ $('#myModal').on('hidden', function () {
|
||||
<ul class="tabs">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li id="secondary" class="dropdown">
|
||||
<a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
||||
<a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
@ -302,7 +309,7 @@ $('#myModal').on('hidden', function () {
|
||||
</form>
|
||||
<ul class="nav secondary-nav">
|
||||
<li id="fat-menu" class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1 <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
@ -311,7 +318,7 @@ $('#myModal').on('hidden', function () {
|
||||
</ul>
|
||||
</li>
|
||||
<li id="mdo-menu" class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
@ -1144,6 +1151,7 @@ $('.myCarousel').carousel({
|
||||
$('.twipsy-demo.well').twipsy({
|
||||
selector: "a[rel=twipsy]"
|
||||
})
|
||||
$('.twipsy-test').twipsy()
|
||||
|
||||
// popover demo
|
||||
$("a[rel=popover]")
|
||||
|
||||
@ -403,8 +403,8 @@
|
||||
<tr>
|
||||
<td>Node with makefile</td>
|
||||
<td>
|
||||
<p>Install the less command line compiler with npm by running the following command:</p>
|
||||
<pre>$ npm install lessc</pre>
|
||||
<p>Install the LESS command line compiler with npm by running the following command:</p>
|
||||
<pre>$ npm install less</pre>
|
||||
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
|
||||
<p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
|
||||
</td>
|
||||
@ -422,7 +422,7 @@
|
||||
<tr>
|
||||
<td>Command line</td>
|
||||
<td>
|
||||
<p>If you already have the less command line tool installed, simply run the following command:</p>
|
||||
<p>Install the LESS command line tool via Node and run the following command:</p>
|
||||
<pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
|
||||
<p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
|
||||
</td>
|
||||
|
||||
@ -395,7 +395,6 @@
|
||||
<dd><a href="./components.html#sidenav">Side nav</a></dd>
|
||||
<dd><a href="./components.html#navbar">Navbar</a></dd>
|
||||
<dd><a href="./components.html#tabspills">Tabs and pills</a></dd>
|
||||
<dd><a href="./components.html#stepnav">Step nav</a></dd>
|
||||
<dd><a href="./components.html#pagination">Pagination</a></dd>
|
||||
<dd><a href="./components.html#alerts">Alerts and errors</a></dd>
|
||||
<dd><a href="./components.html#modals">Modals</a></dd>
|
||||
|
||||
@ -92,6 +92,9 @@
|
||||
<li>Typography
|
||||
<ul>
|
||||
<li>Right-aligned option for blockquotes if float: right;</li>
|
||||
<li><code>h4</code> elements were dropped from 16px to 14px with a default <code>line-height</code> of 18px</li>
|
||||
<li><code>h5</code> elements were dropped from 14px to 12px</li>
|
||||
<li><code>h6</code> elements were dropped from 13px to 11px</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Buttons
|
||||
@ -99,6 +102,17 @@
|
||||
<li>Added button bar options</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Examples
|
||||
<ul>
|
||||
<li>Fluid examples redone. <code>.fluid-container</code> now requires a <code>.sidebar-left</code> or <code>.sidebar-right</code> as well. Fluid sidebar element has a new class, <code>.fluid-sidebar</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Dropdown menus
|
||||
<ul>
|
||||
<li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
|
||||
<li>Now requires you to add a <code><span class="caret"></span></code> to show the dropdown arrow</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!--
|
||||
<li>
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div class="navbar">
|
||||
<div class="navbar navbar-fixed">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Project name</a>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div class="navbar">
|
||||
<div class="navbar navbar-fixed">
|
||||
<div class="navbar-inner">
|
||||
<div class="fluid-container">
|
||||
<a class="brand" href="#">Project name</a>
|
||||
@ -42,8 +42,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fluid-container reverse">
|
||||
<div class="fluid-sidebar-right">
|
||||
<div class="fluid-container sidebar-right">
|
||||
<div class="fluid-sidebar">
|
||||
<div class="well">
|
||||
<h5>Sidebar</h5>
|
||||
<ul>
|
||||
@ -78,17 +78,17 @@
|
||||
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
@ -99,23 +99,25 @@
|
||||
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<footer>
|
||||
<p>© Company 2011</p>
|
||||
</footer>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div class="navbar">
|
||||
<div class="navbar navbar-fixed">
|
||||
<div class="navbar-inner">
|
||||
<div class="fluid-container">
|
||||
<a class="brand" href="#">Project name</a>
|
||||
@ -42,29 +42,29 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fluid-container">
|
||||
<div class="fluid-sidebar-left">
|
||||
<div class="well">
|
||||
<h5>Sidebar</h5>
|
||||
<ul>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<div class="fluid-container sidebar-left">
|
||||
<div class="fluid-sidebar">
|
||||
<div class="well side-nav">
|
||||
<h5 class="nav-label">Sidebar</h5>
|
||||
<ul class="nav-group">
|
||||
<li class="active"><a class="nav-item" href="#">Link</a></li>
|
||||
<li><a class="nav-item" href="#">Link</a></li>
|
||||
<li><a class="nav-item" href="#">Link</a></li>
|
||||
<li><a class="nav-item" href="#">Link</a></li>
|
||||
</ul>
|
||||
<h5>Sidebar</h5>
|
||||
<ul>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<h5 class="nav-label">Sidebar</h5>
|
||||
<ul class="nav-group">
|
||||
<li><a class="nav-item" href="#">Link</a></li>
|
||||
<li><a class="nav-item" href="#">Link</a></li>
|
||||
<li><a class="nav-item" href="#">Link</a></li>
|
||||
<li><a class="nav-item" href="#">Link</a></li>
|
||||
<li><a class="nav-item" href="#">Link</a></li>
|
||||
<li><a class="nav-item" href="#">Link</a></li>
|
||||
</ul>
|
||||
<h5>Sidebar</h5>
|
||||
<ul>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<h5 class="nav-label">Sidebar</h5>
|
||||
<ul class="nav-group">
|
||||
<li><a class="nav-item" href="#">Link</a></li>
|
||||
<li><a class="nav-item" href="#">Link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -78,9 +78,9 @@
|
||||
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
@ -99,9 +99,9 @@
|
||||
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
@ -116,6 +116,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<footer>
|
||||
<p>© Company 2011</p>
|
||||
</footer>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div class="navbar">
|
||||
<div class="navbar navbar-fixed">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Project name</a>
|
||||
@ -52,17 +52,17 @@
|
||||
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
|
||||
@ -1,65 +1,116 @@
|
||||
// BUTTON GROUPS
|
||||
// -------------
|
||||
|
||||
// Group multiple button groups together for a toolbar
|
||||
|
||||
// Make the div behave like a button
|
||||
.btn-group {
|
||||
position: relative;
|
||||
.clearfix(); // clears the floated buttons
|
||||
}
|
||||
|
||||
// Space out series of button groups
|
||||
.btn-group + .btn-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
.clearfix();
|
||||
.btn-group {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// Clear the float
|
||||
.btn-group {
|
||||
.clearfix();
|
||||
}
|
||||
// Float them, remove border radius, then re-add to first and last elements
|
||||
.btn-group .btn {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: -1px;
|
||||
.border-radius(0);
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
&:last-child {
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
// Reset corners for large buttons
|
||||
&.large:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 6px;
|
||||
-moz-border-radius-topleft: 6px;
|
||||
border-top-left-radius: 6px;
|
||||
-webkit-border-bottom-left-radius: 6px;
|
||||
-moz-border-radius-bottomleft: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
&.large:last-child {
|
||||
-webkit-border-top-right-radius: 6px;
|
||||
-moz-border-radius-topright: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
-webkit-border-bottom-right-radius: 6px;
|
||||
-moz-border-radius-bottomright: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
}
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
||||
.btn-group .btn:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.btn-group .btn:last-child,
|
||||
.btn-group .dropdown-toggle {
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
// Reset corners for large buttons
|
||||
.btn-group .btn.large:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 6px;
|
||||
-moz-border-radius-topleft: 6px;
|
||||
border-top-left-radius: 6px;
|
||||
-webkit-border-bottom-left-radius: 6px;
|
||||
-moz-border-radius-bottomleft: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
.btn-group .btn.large:last-child,
|
||||
.btn-group .large.dropdown-toggle {
|
||||
-webkit-border-top-right-radius: 6px;
|
||||
-moz-border-radius-topright: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
-webkit-border-bottom-right-radius: 6px;
|
||||
-moz-border-radius-bottomright: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
// On hover/focus/active, bring the proper btn to front
|
||||
.btn-group .btn:hover,
|
||||
.btn-group .btn:focus,
|
||||
.btn-group .btn:active {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
// Split button dropdowns
|
||||
// ----------------------
|
||||
|
||||
// Give the line between buttons some depth
|
||||
.btn-group .dropdown-toggle {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
@shadow: inset 1px 0 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
|
||||
// Reposition menu on open and round all corners
|
||||
.btn-group.open .dropdown-menu {
|
||||
display: block;
|
||||
top: 30px;
|
||||
.border-radius(5px);
|
||||
}
|
||||
.btn-group.open .dropdown-toggle {
|
||||
background-image: none;
|
||||
@shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
|
||||
// Reposition the caret
|
||||
.btn .caret {
|
||||
margin-top: 6px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Account for other colors
|
||||
.primary,
|
||||
.danger,
|
||||
.info,
|
||||
.success {
|
||||
.caret {
|
||||
border-top-color: #fff;
|
||||
.opacity(75);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,79 +3,75 @@
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
// The link that is clicked to toggle the dropdown
|
||||
.dropdown-toggle:after {
|
||||
// Dropdown arrow/caret
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
border-left: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid @white;
|
||||
border-top: 4px solid #000;
|
||||
.opacity(30);
|
||||
content: "\2193";
|
||||
}
|
||||
.dropdown:hover .dropdown-toggle:after {
|
||||
.dropdown .caret {
|
||||
margin-top: 8px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.dropdown:hover .caret {
|
||||
.opacity(100);
|
||||
}
|
||||
// The dropdown menu (ul)
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
z-index: 900;
|
||||
z-index: @zindexDropdown;
|
||||
float: left;
|
||||
display: none; // None by default, but block on "open" of the menu
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
min-width: 160px;
|
||||
max-width: 220px;
|
||||
_width: 160px;
|
||||
padding: 6px 0;
|
||||
margin-left: 0; // override default ul styles
|
||||
margin-right: 0;
|
||||
padding: 5px 0;
|
||||
margin: 0; // override default ul
|
||||
list-style: none;
|
||||
background-color: @white;
|
||||
border-color: #999;
|
||||
border-color: rgba(0,0,0,.2);
|
||||
border-color: rgba(0,0,0,.1);
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px;
|
||||
.border-radius(0 0 6px 6px);
|
||||
.box-shadow(0 2px 4px rgba(0,0,0,.2));
|
||||
.background-clip(padding-box);
|
||||
border-width: 1px;
|
||||
.border-radius(0 0 5px 5px);
|
||||
.box-shadow(0 5px 10px rgba(0,0,0,.2));
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
zoom: 1; // do we need this?
|
||||
|
||||
// Unfloat any li's to make them stack
|
||||
li {
|
||||
float: none;
|
||||
display: block;
|
||||
background-color: none;
|
||||
}
|
||||
// Dividers (basically an hr) within the dropdown
|
||||
.divider {
|
||||
height: 1px;
|
||||
margin: 5px 0;
|
||||
margin: 5px 1px;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
background-color: #e5e5e5;
|
||||
border-bottom: 1px solid @white;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar .dropdown-menu, .dropdown-menu {
|
||||
// Links within the dropdown menu
|
||||
a {
|
||||
display: block;
|
||||
padding: 4px 15px;
|
||||
padding: 2px 15px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: @gray;
|
||||
text-shadow: 0 1px 0 @white;
|
||||
// Hover state
|
||||
&:hover {
|
||||
color: @grayDark;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
#gradient > .vertical(#eeeeee, #dddddd);
|
||||
@shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
#gradient > .vertical(@blue, @blueDark);
|
||||
@shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@ -96,8 +96,10 @@ input[type=file] {
|
||||
|
||||
// Chrome on Linux and Mobile Safari need background-color
|
||||
select {
|
||||
background-color: @white;
|
||||
width: 220px; // default input width + 10px of padding that doesn't get applied
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
@ -137,6 +139,17 @@ textarea {
|
||||
padding-top: 6px; // has to be padding because margin collaspes
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
.radio.inline,
|
||||
.checkbox.inline {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.radio.inline + .radio.inline,
|
||||
.checkbox.inline + .checkbox.inline {
|
||||
margin-left: 10px; // space out consecutive inline controls
|
||||
}
|
||||
|
||||
|
||||
|
||||
// FOCUS STATE
|
||||
@ -144,14 +157,14 @@ textarea {
|
||||
|
||||
input,
|
||||
textarea {
|
||||
.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.1));
|
||||
@transition: border linear .2s, box-shadow linear .2s;
|
||||
.transition(@transition);
|
||||
}
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border-color: rgba(82,168,236,.8);
|
||||
@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
|
||||
@shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
|
||||
.box-shadow(@shadow);
|
||||
outline: 0;
|
||||
}
|
||||
@ -176,33 +189,52 @@ select:focus {
|
||||
.input-xxlarge { width: 530px; }
|
||||
|
||||
// Grid style input sizes
|
||||
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
|
||||
.formColumns(@columnSpan: 1) {
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input {
|
||||
float: none;
|
||||
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
|
||||
.inputColumns(@columnSpan: 1) {
|
||||
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.uneditable-input {
|
||||
// Default columns
|
||||
&.span1 { .formColumns(1); }
|
||||
&.span2 { .formColumns(2); }
|
||||
&.span3 { .formColumns(3); }
|
||||
&.span4 { .formColumns(4); }
|
||||
&.span5 { .formColumns(5); }
|
||||
&.span6 { .formColumns(6); }
|
||||
&.span7 { .formColumns(7); }
|
||||
&.span8 { .formColumns(8); }
|
||||
&.span9 { .formColumns(9); }
|
||||
&.span10 { .formColumns(10); }
|
||||
&.span11 { .formColumns(11); }
|
||||
&.span12 { .formColumns(12); }
|
||||
&.span13 { .formColumns(13); }
|
||||
&.span14 { .formColumns(14); }
|
||||
&.span15 { .formColumns(15); }
|
||||
&.span16 { .formColumns(16); }
|
||||
&.span1 { .inputColumns(1); }
|
||||
&.span2 { .inputColumns(2); }
|
||||
&.span3 { .inputColumns(3); }
|
||||
&.span4 { .inputColumns(4); }
|
||||
&.span5 { .inputColumns(5); }
|
||||
&.span6 { .inputColumns(6); }
|
||||
&.span7 { .inputColumns(7); }
|
||||
&.span8 { .inputColumns(8); }
|
||||
&.span9 { .inputColumns(9); }
|
||||
&.span10 { .inputColumns(10); }
|
||||
&.span11 { .inputColumns(11); }
|
||||
&.span12 { .inputColumns(12); }
|
||||
}
|
||||
|
||||
.selectColumns(@columnSpan: 1) {
|
||||
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10;
|
||||
}
|
||||
select {
|
||||
&.span1 { .selectColumns(1); }
|
||||
&.span2 { .selectColumns(2); }
|
||||
&.span3 { .selectColumns(3); }
|
||||
&.span4 { .selectColumns(4); }
|
||||
&.span5 { .selectColumns(5); }
|
||||
&.span6 { .selectColumns(6); }
|
||||
&.span7 { .selectColumns(7); }
|
||||
&.span8 { .selectColumns(8); }
|
||||
&.span9 { .selectColumns(9); }
|
||||
&.span10 { .selectColumns(10); }
|
||||
&.span11 { .selectColumns(11); }
|
||||
&.span12 { .selectColumns(12); }
|
||||
}
|
||||
|
||||
|
||||
@ -325,9 +357,13 @@ input::-webkit-input-placeholder {
|
||||
.input-append {
|
||||
margin-bottom: 5px;
|
||||
.clearfix(); // Clear the float to prevent wrapping
|
||||
input {
|
||||
input,
|
||||
.uneditable-input {
|
||||
.border-radius(0 3px 3px 0);
|
||||
}
|
||||
.uneditable-input {
|
||||
border-left-color: #ccc;
|
||||
}
|
||||
.add-on {
|
||||
float: left;
|
||||
display: block;
|
||||
@ -356,10 +392,14 @@ input::-webkit-input-placeholder {
|
||||
}
|
||||
}
|
||||
.input-append {
|
||||
input {
|
||||
input,
|
||||
.uneditable-input {
|
||||
float: left;
|
||||
.border-radius(3px 0 0 3px);
|
||||
}
|
||||
.uneditable-input {
|
||||
border-right-color: #ccc;
|
||||
}
|
||||
.add-on {
|
||||
margin-right: 0;
|
||||
margin-left: -1px;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
z-index: @zindexModalBackdrop;
|
||||
background-color: @black;
|
||||
// Fade for backdrop
|
||||
&.fade { opacity: 0; }
|
||||
@ -22,7 +22,7 @@
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 11000;
|
||||
z-index: @zindexModal;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
width: 560px;
|
||||
@ -34,7 +34,6 @@
|
||||
.border-radius(6px);
|
||||
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
||||
.background-clip(padding-box);
|
||||
.close { margin-top: 7px; }
|
||||
&.fade {
|
||||
.transition(e('opacity .3s linear, top .3s ease-out'));
|
||||
top: -25%;
|
||||
@ -44,6 +43,8 @@
|
||||
.modal-header {
|
||||
padding: 5px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
// Close icon
|
||||
.close { margin-top: 7px; }
|
||||
}
|
||||
.modal-body {
|
||||
padding: 15px;
|
||||
|
||||
@ -53,6 +53,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar forms
|
||||
.navbar-form {
|
||||
margin-bottom: 0; // remove default bottom margin
|
||||
input,
|
||||
select {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar search
|
||||
.navbar-search {
|
||||
position: relative;
|
||||
@ -115,7 +125,7 @@
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
z-index: @zindexFixedNavbar;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
z-index: @zindexPopover;
|
||||
display: none;
|
||||
padding: 5px;
|
||||
&.top { margin-top: -5px; }
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
.modal {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
&.fade.in { top: auto; }
|
||||
}
|
||||
|
||||
// Remove the horizontal form styles
|
||||
@ -205,6 +206,9 @@
|
||||
.container {
|
||||
width: @siteWidth;
|
||||
}
|
||||
.row {
|
||||
margin-left: @gridGutterWidth * -1;
|
||||
}
|
||||
[class*="span"] {
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
@ -238,4 +242,4 @@
|
||||
.offset12 { .offset(12); }
|
||||
|
||||
}
|
||||
*/
|
||||
*/
|
||||
@ -29,21 +29,23 @@ body {
|
||||
padding-right: 20px;
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
// Sidebars (left and right options)
|
||||
.fluid-sidebar-left,
|
||||
.fluid-sidebar-right {
|
||||
width: 220px;
|
||||
.fluid-sidebar {
|
||||
width: @fluidSidebarWidth;
|
||||
margin: 0 20px 18px;
|
||||
}
|
||||
.fluid-sidebar-left { float: left; }
|
||||
.fluid-sidebar-right { float: right; }
|
||||
.sidebar-left { padding-left: @fluidSidebarWidth + 40; }
|
||||
.sidebar-right { padding-right: @fluidSidebarWidth + 40; }
|
||||
|
||||
// Float the sidebars accordingly
|
||||
.sidebar-left .fluid-sidebar { float: left; margin-left: (@fluidSidebarWidth + 20) * -1; }
|
||||
.sidebar-right .fluid-sidebar { float: right; margin-right: (@fluidSidebarWidth + 20) * -1; }
|
||||
|
||||
// The main content area
|
||||
.fluid-content {
|
||||
margin-left: 240px;
|
||||
}
|
||||
// Reverse layout for sidebar on right
|
||||
.fluid-container.reverse .fluid-content {
|
||||
margin-left: 0;
|
||||
margin-right: 240px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -8,19 +8,22 @@
|
||||
.side-nav .nav-label,
|
||||
.side-nav .nav-item {
|
||||
display: block;
|
||||
padding: 3px 16px;
|
||||
padding: 3px 15px;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
}
|
||||
.side-nav .nav-label {
|
||||
font-size: 11px;
|
||||
line-height: @baseLineHeight;
|
||||
color: @grayDark;
|
||||
color: @grayLight;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.side-nav .nav-group {
|
||||
margin: 0 -1px;
|
||||
margin: 0; // clear default ul margins
|
||||
list-style: none;
|
||||
}
|
||||
.side-nav .nav-group + .nav-label {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.side-nav .nav-item {
|
||||
font-weight: bold;
|
||||
@ -34,7 +37,7 @@
|
||||
.side-nav .active .nav-item {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
|
||||
#gradient > .vertical(#ccc, #aaa);
|
||||
#gradient > .vertical(#ccc, #999);
|
||||
@shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
.twipsy {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
z-index: @zindexTwipsy;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
padding: 5px;
|
||||
|
||||
@ -50,20 +50,20 @@ h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
h4, h5, h6 {
|
||||
line-height: @baseLineHeight;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
line-height: @baseLineHeight * 2;
|
||||
font-size: 14px;
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
line-height: @baseLineHeight;
|
||||
font-size: 12px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 13px;
|
||||
line-height: @baseLineHeight;
|
||||
font-size: 11px;
|
||||
color: @grayLight;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -116,7 +116,7 @@ dl {
|
||||
|
||||
// Horizontal rules
|
||||
hr {
|
||||
margin: @baseLineHeight * 1.5 0;
|
||||
margin: @baseLineHeight 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid #fff;
|
||||
|
||||
@ -43,6 +43,19 @@
|
||||
@gridGutterWidth: 20px;
|
||||
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
|
||||
// Fluid width sidebar
|
||||
@fluidSidebarWidth: 220px;
|
||||
|
||||
|
||||
// Z-INDEX
|
||||
// -------
|
||||
@zindexDropdown: 1000;
|
||||
@zindexFixedNavbar: 1010;
|
||||
@zindexModalBackdrop: 1020;
|
||||
@zindexModal: 1030;
|
||||
@zindexPopover: 1040;
|
||||
@zindexTwipsy: 1050;
|
||||
|
||||
|
||||
// THEME VARIABLES
|
||||
// ---------------
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user