mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Merge branch '2.0.3-wip' of https://github.com/twitter/bootstrap into 2.0.3-wip
Conflicts: docs/assets/bootstrap.zip
This commit is contained in:
Jacob Thornton
commit
4953629ccd
23 changed files with 440 additions and 186 deletions
Binary file not shown.
99
docs/assets/css/bootstrap-responsive.css
vendored
99
docs/assets/css/bootstrap-responsive.css
vendored
|
|
@ -139,6 +139,15 @@
|
|||
.container-fluid {
|
||||
padding: 0;
|
||||
}
|
||||
.dl-horizontal dt {
|
||||
float: none;
|
||||
clear: none;
|
||||
width: auto;
|
||||
text-align: left;
|
||||
}
|
||||
.dl-horizontal dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -148,16 +157,13 @@
|
|||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row > [class*="span"],
|
||||
.row-fluid > [class*="span"] {
|
||||
[class*="span"],
|
||||
.row-fluid [class*="span"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.thumbnails [class*="span"] {
|
||||
width: auto;
|
||||
}
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
|
|
@ -174,8 +180,11 @@
|
|||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input-prepend input,
|
||||
.input-append input,
|
||||
.input-prepend input[class*="span"],
|
||||
.input-append input[class*="span"] {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -286,46 +295,57 @@
|
|||
clear: both;
|
||||
}
|
||||
.row-fluid [class*="span"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 28px;
|
||||
/* Make inputs at least the height of their button counterpart */
|
||||
|
||||
/* Makes inputs behave like true block-level elements */
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
margin-left: 2.762430939%;
|
||||
}
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row-fluid > .span12 {
|
||||
.row-fluid .span12 {
|
||||
width: 99.999999993%;
|
||||
}
|
||||
.row-fluid > .span11 {
|
||||
.row-fluid .span11 {
|
||||
width: 91.436464082%;
|
||||
}
|
||||
.row-fluid > .span10 {
|
||||
.row-fluid .span10 {
|
||||
width: 82.87292817100001%;
|
||||
}
|
||||
.row-fluid > .span9 {
|
||||
.row-fluid .span9 {
|
||||
width: 74.30939226%;
|
||||
}
|
||||
.row-fluid > .span8 {
|
||||
.row-fluid .span8 {
|
||||
width: 65.74585634900001%;
|
||||
}
|
||||
.row-fluid > .span7 {
|
||||
.row-fluid .span7 {
|
||||
width: 57.182320438000005%;
|
||||
}
|
||||
.row-fluid > .span6 {
|
||||
.row-fluid .span6 {
|
||||
width: 48.618784527%;
|
||||
}
|
||||
.row-fluid > .span5 {
|
||||
.row-fluid .span5 {
|
||||
width: 40.055248616%;
|
||||
}
|
||||
.row-fluid > .span4 {
|
||||
.row-fluid .span4 {
|
||||
width: 31.491712705%;
|
||||
}
|
||||
.row-fluid > .span3 {
|
||||
.row-fluid .span3 {
|
||||
width: 22.928176794%;
|
||||
}
|
||||
.row-fluid > .span2 {
|
||||
.row-fluid .span2 {
|
||||
width: 14.364640883%;
|
||||
}
|
||||
.row-fluid > .span1 {
|
||||
.row-fluid .span1 {
|
||||
width: 5.801104972%;
|
||||
}
|
||||
input,
|
||||
|
|
@ -477,46 +497,57 @@
|
|||
clear: both;
|
||||
}
|
||||
.row-fluid [class*="span"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 28px;
|
||||
/* Make inputs at least the height of their button counterpart */
|
||||
|
||||
/* Makes inputs behave like true block-level elements */
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
margin-left: 2.564102564%;
|
||||
}
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row-fluid > .span12 {
|
||||
.row-fluid .span12 {
|
||||
width: 100%;
|
||||
}
|
||||
.row-fluid > .span11 {
|
||||
.row-fluid .span11 {
|
||||
width: 91.45299145300001%;
|
||||
}
|
||||
.row-fluid > .span10 {
|
||||
.row-fluid .span10 {
|
||||
width: 82.905982906%;
|
||||
}
|
||||
.row-fluid > .span9 {
|
||||
.row-fluid .span9 {
|
||||
width: 74.358974359%;
|
||||
}
|
||||
.row-fluid > .span8 {
|
||||
.row-fluid .span8 {
|
||||
width: 65.81196581200001%;
|
||||
}
|
||||
.row-fluid > .span7 {
|
||||
.row-fluid .span7 {
|
||||
width: 57.264957265%;
|
||||
}
|
||||
.row-fluid > .span6 {
|
||||
.row-fluid .span6 {
|
||||
width: 48.717948718%;
|
||||
}
|
||||
.row-fluid > .span5 {
|
||||
.row-fluid .span5 {
|
||||
width: 40.170940171000005%;
|
||||
}
|
||||
.row-fluid > .span4 {
|
||||
.row-fluid .span4 {
|
||||
width: 31.623931624%;
|
||||
}
|
||||
.row-fluid > .span3 {
|
||||
.row-fluid .span3 {
|
||||
width: 23.076923077%;
|
||||
}
|
||||
.row-fluid > .span2 {
|
||||
.row-fluid .span2 {
|
||||
width: 14.529914530000001%;
|
||||
}
|
||||
.row-fluid > .span1 {
|
||||
.row-fluid .span1 {
|
||||
width: 5.982905983%;
|
||||
}
|
||||
input,
|
||||
|
|
@ -563,8 +594,8 @@
|
|||
.thumbnails {
|
||||
margin-left: -30px;
|
||||
}
|
||||
.thumbnails > li {
|
||||
margin-left: 30px;
|
||||
.row-fluid .thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 979px) {
|
||||
|
|
@ -655,9 +686,9 @@
|
|||
margin: 9px 0;
|
||||
border-top: 1px solid #222222;
|
||||
border-bottom: 1px solid #222222;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
}
|
||||
.navbar .nav.pull-right {
|
||||
float: none;
|
||||
|
|
|
|||
135
docs/assets/css/bootstrap.css
vendored
135
docs/assets/css/bootstrap.css
vendored
|
|
@ -254,46 +254,57 @@ a:hover {
|
|||
clear: both;
|
||||
}
|
||||
.row-fluid [class*="span"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 28px;
|
||||
/* Make inputs at least the height of their button counterpart */
|
||||
|
||||
/* Makes inputs behave like true block-level elements */
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
margin-left: 2.127659574%;
|
||||
}
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row-fluid > .span12 {
|
||||
.row-fluid .span12 {
|
||||
width: 99.99999998999999%;
|
||||
}
|
||||
.row-fluid > .span11 {
|
||||
.row-fluid .span11 {
|
||||
width: 91.489361693%;
|
||||
}
|
||||
.row-fluid > .span10 {
|
||||
.row-fluid .span10 {
|
||||
width: 82.97872339599999%;
|
||||
}
|
||||
.row-fluid > .span9 {
|
||||
.row-fluid .span9 {
|
||||
width: 74.468085099%;
|
||||
}
|
||||
.row-fluid > .span8 {
|
||||
.row-fluid .span8 {
|
||||
width: 65.95744680199999%;
|
||||
}
|
||||
.row-fluid > .span7 {
|
||||
.row-fluid .span7 {
|
||||
width: 57.446808505%;
|
||||
}
|
||||
.row-fluid > .span6 {
|
||||
.row-fluid .span6 {
|
||||
width: 48.93617020799999%;
|
||||
}
|
||||
.row-fluid > .span5 {
|
||||
.row-fluid .span5 {
|
||||
width: 40.425531911%;
|
||||
}
|
||||
.row-fluid > .span4 {
|
||||
.row-fluid .span4 {
|
||||
width: 31.914893614%;
|
||||
}
|
||||
.row-fluid > .span3 {
|
||||
.row-fluid .span3 {
|
||||
width: 23.404255317%;
|
||||
}
|
||||
.row-fluid > .span2 {
|
||||
.row-fluid .span2 {
|
||||
width: 14.89361702%;
|
||||
}
|
||||
.row-fluid > .span1 {
|
||||
.row-fluid .span1 {
|
||||
width: 6.382978723%;
|
||||
}
|
||||
.container {
|
||||
|
|
@ -447,6 +458,9 @@ dd {
|
|||
margin-left: 9px;
|
||||
}
|
||||
.dl-horizontal dt {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 120px;
|
||||
|
|
@ -750,9 +764,9 @@ textarea {
|
|||
input:focus,
|
||||
textarea:focus {
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
|
||||
outline: 0;
|
||||
outline: thin dotted \9;
|
||||
/* IE6-9 */
|
||||
|
|
@ -790,7 +804,11 @@ select:focus {
|
|||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input[class*="span"] {
|
||||
.uneditable-input[class*="span"],
|
||||
.row-fluid input[class*="span"],
|
||||
.row-fluid select[class*="span"],
|
||||
.row-fluid textarea[class*="span"],
|
||||
.row-fluid .uneditable-input[class*="span"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -2017,9 +2035,9 @@ button.close {
|
|||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
cursor: pointer;
|
||||
*margin-left: .3em;
|
||||
/* Remove the border to prevent IE7's black border on input:focus */
|
||||
|
|
@ -2064,9 +2082,9 @@ button.close {
|
|||
.btn.active,
|
||||
.btn:active {
|
||||
background-image: none;
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
||||
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
||||
background-color: #e6e6e6;
|
||||
background-color: #d9d9d9 \9;
|
||||
outline: 0;
|
||||
|
|
@ -2358,7 +2376,7 @@ input[type="submit"].btn.btn-mini {
|
|||
|
||||
*zoom: 1;
|
||||
}
|
||||
.btn-group .btn {
|
||||
.btn-group > .btn {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: -1px;
|
||||
|
|
@ -2366,7 +2384,7 @@ input[type="submit"].btn.btn-mini {
|
|||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group .btn:first-child {
|
||||
.btn-group > .btn:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
|
|
@ -2375,8 +2393,8 @@ input[type="submit"].btn.btn-mini {
|
|||
-moz-border-radius-bottomleft: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.btn-group .btn:last-child,
|
||||
.btn-group .dropdown-toggle {
|
||||
.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;
|
||||
|
|
@ -2384,7 +2402,7 @@ input[type="submit"].btn.btn-mini {
|
|||
-moz-border-radius-bottomright: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.btn-group .btn.large:first-child {
|
||||
.btn-group > .btn.large:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 6px;
|
||||
-moz-border-radius-topleft: 6px;
|
||||
|
|
@ -2393,8 +2411,8 @@ input[type="submit"].btn.btn-mini {
|
|||
-moz-border-radius-bottomleft: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
.btn-group .btn.large:last-child,
|
||||
.btn-group .large.dropdown-toggle {
|
||||
.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;
|
||||
|
|
@ -2402,44 +2420,44 @@ input[type="submit"].btn.btn-mini {
|
|||
-moz-border-radius-bottomright: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
.btn-group .btn:hover,
|
||||
.btn-group .btn:focus,
|
||||
.btn-group .btn:active,
|
||||
.btn-group .btn.active {
|
||||
.btn-group > .btn:hover,
|
||||
.btn-group > .btn:focus,
|
||||
.btn-group > .btn:active,
|
||||
.btn-group > .btn.active {
|
||||
z-index: 2;
|
||||
}
|
||||
.btn-group .dropdown-toggle:active,
|
||||
.btn-group.open .dropdown-toggle {
|
||||
outline: 0;
|
||||
}
|
||||
.btn-group .dropdown-toggle {
|
||||
.btn-group > .dropdown-toggle {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
-webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
-moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
*padding-top: 3px;
|
||||
*padding-bottom: 3px;
|
||||
}
|
||||
.btn-group .btn-mini.dropdown-toggle {
|
||||
.btn-group > .btn-mini.dropdown-toggle {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
*padding-top: 1px;
|
||||
*padding-bottom: 1px;
|
||||
}
|
||||
.btn-group .btn-small.dropdown-toggle {
|
||||
.btn-group > .btn-small.dropdown-toggle {
|
||||
*padding-top: 4px;
|
||||
*padding-bottom: 4px;
|
||||
}
|
||||
.btn-group .btn-large.dropdown-toggle {
|
||||
.btn-group > .btn-large.dropdown-toggle {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.btn-group.open .dropdown-toggle {
|
||||
background-image: none;
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
||||
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
||||
}
|
||||
.btn-group.open .btn.dropdown-toggle {
|
||||
background-color: #e6e6e6;
|
||||
|
|
@ -2766,8 +2784,7 @@ input[type="submit"].btn.btn-mini {
|
|||
clear: both;
|
||||
}
|
||||
.tab-content {
|
||||
display: table;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.tabs-below .nav-tabs,
|
||||
.tabs-right .nav-tabs,
|
||||
|
|
@ -2802,10 +2819,6 @@ input[type="submit"].btn.btn-mini {
|
|||
.tabs-below .nav-tabs .active > a:hover {
|
||||
border-color: transparent #ddd #ddd #ddd;
|
||||
}
|
||||
.tabs-left .tab-content,
|
||||
.tabs-right .tab-content {
|
||||
width: auto;
|
||||
}
|
||||
.tabs-left .nav-tabs > li,
|
||||
.tabs-right .nav-tabs > li {
|
||||
float: none;
|
||||
|
|
@ -2876,9 +2889,9 @@ input[type="submit"].btn.btn-mini {
|
|||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
.navbar .container {
|
||||
width: auto;
|
||||
|
|
@ -2904,9 +2917,9 @@ input[type="submit"].btn.btn-mini {
|
|||
*background-color: #222222;
|
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
||||
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
|
||||
}
|
||||
.btn-navbar:hover,
|
||||
.btn-navbar:active,
|
||||
|
|
@ -3023,9 +3036,9 @@ input[type="submit"].btn.btn-mini {
|
|||
color: #ffffff;
|
||||
background-color: #626262;
|
||||
border: 1px solid #151515;
|
||||
-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-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-ms-transition: none;
|
||||
|
|
@ -3617,9 +3630,11 @@ input[type="submit"].btn.btn-mini {
|
|||
.thumbnails:after {
|
||||
clear: both;
|
||||
}
|
||||
.row-fluid .thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
.thumbnails > li {
|
||||
float: left;
|
||||
margin: 0 0 18px 20px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.thumbnail {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -371,7 +371,14 @@
|
|||
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
|
||||
<dt>Malesuada porta</dt>
|
||||
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
<dt>Felis euismod semper eget lacinia</dt>
|
||||
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||
</dl>
|
||||
<hr>
|
||||
<p>
|
||||
<span class="label label-info">Heads up!</span>
|
||||
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
|
||||
</p>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -493,6 +493,20 @@ $('#myModal').on('hidden', function () {
|
|||
</li>
|
||||
...
|
||||
</ul></pre>
|
||||
<p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
|
||||
Dropdown
|
||||
<b class="caret"></b>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<h3>Methods</h3>
|
||||
<h4>$().dropdown()</h4>
|
||||
<p>A programatic api for activating menus for a given navbar or tabbed navigation.</p>
|
||||
|
|
|
|||
|
|
@ -704,17 +704,17 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td><code>.size()</code></td>
|
||||
<td><code>@height: 5px, @width: 5px</code></td>
|
||||
<td><code>@height @width</code></td>
|
||||
<td>Quickly set the height and width on one line</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.square()</code></td>
|
||||
<td><code>@size: 5px</code></td>
|
||||
<td><code>@size</code></td>
|
||||
<td>Builds on <code>.size()</code> to set the width and height as same value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.opacity()</code></td>
|
||||
<td><code>@opacity: 100</code></td>
|
||||
<td><code>@opacity</code></td>
|
||||
<td>Set, in whole numbers, the opacity percentage (e.g., "50" or "75")</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -822,12 +822,12 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<td><code>.border-radius()</code></td>
|
||||
<td><code>@radius: 5px</code></td>
|
||||
<td><code>@radius</code></td>
|
||||
<td>Round the corners of an element. Can be a single value or four space-separated values</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.box-shadow()</code></td>
|
||||
<td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
|
||||
<td><code>@shadow</code></td>
|
||||
<td>Add a drop shadow to an element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -847,7 +847,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td><code>.translate()</code></td>
|
||||
<td><code>@x: 0, @y: 0</code></td>
|
||||
<td><code>@x, @y</code></td>
|
||||
<td>Move an element on the x and y planes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -882,7 +882,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td><code>.content-columns()</code></td>
|
||||
<td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
|
||||
<td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
|
||||
<td>Make the content of any element use CSS3 columns</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -969,7 +969,7 @@
|
|||
<div class="span4">
|
||||
<h3>Command line</h3>
|
||||
<p>Install the LESS command line tool via Node and run the following command:</p>
|
||||
<pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
|
||||
<pre>$ lessc ./less/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>
|
||||
</div><!-- /span4 -->
|
||||
<div class="span4">
|
||||
|
|
|
|||
7
docs/templates/pages/base-css.mustache
vendored
7
docs/templates/pages/base-css.mustache
vendored
|
|
@ -294,7 +294,14 @@
|
|||
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
|
||||
<dt>Malesuada porta</dt>
|
||||
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
<dt>Felis euismod semper eget lacinia</dt>
|
||||
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||
</dl>
|
||||
<hr>
|
||||
<p>
|
||||
<span class="label label-info">{{_i}}Heads up!{{/i}}</span>
|
||||
{{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.{{/i}}
|
||||
</p>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
|
|
|||
14
docs/templates/pages/javascript.mustache
vendored
14
docs/templates/pages/javascript.mustache
vendored
|
|
@ -416,6 +416,20 @@ $('#myModal').on('hidden', function () {
|
|||
</li>
|
||||
...
|
||||
</ul></pre>
|
||||
<p>{{_i}}To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
|
||||
{{_i}}Dropdown{{/i}}
|
||||
<b class="caret"></b>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
<h4>$().dropdown()</h4>
|
||||
<p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
|
||||
|
|
|
|||
16
docs/templates/pages/less.mustache
vendored
16
docs/templates/pages/less.mustache
vendored
|
|
@ -627,17 +627,17 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td><code>.size()</code></td>
|
||||
<td><code>@height: 5px, @width: 5px</code></td>
|
||||
<td><code>@height @width</code></td>
|
||||
<td>{{_i}}Quickly set the height and width on one line{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.square()</code></td>
|
||||
<td><code>@size: 5px</code></td>
|
||||
<td><code>@size</code></td>
|
||||
<td>{{_i}}Builds on <code>.size()</code> to set the width and height as same value{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.opacity()</code></td>
|
||||
<td><code>@opacity: 100</code></td>
|
||||
<td><code>@opacity</code></td>
|
||||
<td>{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -745,12 +745,12 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<td><code>.border-radius()</code></td>
|
||||
<td><code>@radius: 5px</code></td>
|
||||
<td><code>@radius</code></td>
|
||||
<td>{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.box-shadow()</code></td>
|
||||
<td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
|
||||
<td><code>@shadow</code></td>
|
||||
<td>{{_i}}Add a drop shadow to an element{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -770,7 +770,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td><code>.translate()</code></td>
|
||||
<td><code>@x: 0, @y: 0</code></td>
|
||||
<td><code>@x, @y</code></td>
|
||||
<td>{{_i}}Move an element on the x and y planes{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -805,7 +805,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td><code>.content-columns()</code></td>
|
||||
<td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
|
||||
<td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
|
||||
<td>{{_i}}Make the content of any element use CSS3 columns{{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -892,7 +892,7 @@
|
|||
<div class="span4">
|
||||
<h3>{{_i}}Command line{{/i}}</h3>
|
||||
<p>{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}</p>
|
||||
<pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
|
||||
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
|
||||
<p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p>
|
||||
</div><!-- /span4 -->
|
||||
<div class="span4">
|
||||
|
|
|
|||
|
|
@ -25,14 +25,14 @@
|
|||
}
|
||||
|
||||
// Float them, remove border radius, then re-add to first and last elements
|
||||
.btn-group .btn {
|
||||
.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
|
||||
.btn-group .btn:first-child {
|
||||
.btn-group > .btn:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
|
|
@ -41,8 +41,8 @@
|
|||
-moz-border-radius-bottomleft: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.btn-group .btn:last-child,
|
||||
.btn-group .dropdown-toggle {
|
||||
.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;
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
// Reset corners for large buttons
|
||||
.btn-group .btn.large:first-child {
|
||||
.btn-group > .btn.large:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 6px;
|
||||
-moz-border-radius-topleft: 6px;
|
||||
|
|
@ -60,8 +60,8 @@
|
|||
-moz-border-radius-bottomleft: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
.btn-group .btn.large:last-child,
|
||||
.btn-group .large.dropdown-toggle {
|
||||
.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;
|
||||
|
|
@ -71,10 +71,10 @@
|
|||
}
|
||||
|
||||
// On hover/focus/active, bring the proper btn to front
|
||||
.btn-group .btn:hover,
|
||||
.btn-group .btn:focus,
|
||||
.btn-group .btn:active,
|
||||
.btn-group .btn.active {
|
||||
.btn-group > .btn:hover,
|
||||
.btn-group > .btn:focus,
|
||||
.btn-group > .btn:active,
|
||||
.btn-group > .btn.active {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
|
@ -90,27 +90,24 @@
|
|||
// ----------------------
|
||||
|
||||
// Give the line between buttons some depth
|
||||
.btn-group .dropdown-toggle {
|
||||
.btn-group > .dropdown-toggle {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
@shadow: inset 1px 0 0 rgba(255,255,255,.125),
|
||||
inset 0 1px 0 rgba(255,255,255,.2),
|
||||
0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
.box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
||||
*padding-top: 3px;
|
||||
*padding-bottom: 3px;
|
||||
}
|
||||
.btn-group .btn-mini.dropdown-toggle {
|
||||
.btn-group > .btn-mini.dropdown-toggle {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
*padding-top: 1px;
|
||||
*padding-bottom: 1px;
|
||||
}
|
||||
.btn-group .btn-small.dropdown-toggle {
|
||||
.btn-group > .btn-small.dropdown-toggle {
|
||||
*padding-top: 4px;
|
||||
*padding-bottom: 4px;
|
||||
}
|
||||
.btn-group .btn-large.dropdown-toggle {
|
||||
.btn-group > .btn-large.dropdown-toggle {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
|
@ -121,9 +118,7 @@
|
|||
// Remove the gradient and set the same inset shadow as the :active state
|
||||
.dropdown-toggle {
|
||||
background-image: none;
|
||||
@shadow: inset 0 2px 4px rgba(0,0,0,.15),
|
||||
0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
|
||||
}
|
||||
|
||||
// Keep the hover's background when dropdown is open
|
||||
|
|
|
|||
|
|
@ -21,9 +21,7 @@
|
|||
border: 1px solid @btnBorder;
|
||||
border-bottom-color: darken(@btnBorder, 10%);
|
||||
.border-radius(4px);
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.2),
|
||||
0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
||||
cursor: pointer;
|
||||
|
||||
// Give IE7 some love
|
||||
|
|
@ -56,9 +54,7 @@
|
|||
.btn.active,
|
||||
.btn:active {
|
||||
background-image: none;
|
||||
@shadow: inset 0 2px 4px rgba(0,0,0,.15),
|
||||
0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
|
||||
background-color: darken(@white, 10%);
|
||||
background-color: darken(@white, 15%) e("\9");
|
||||
outline: 0;
|
||||
|
|
|
|||
|
|
@ -213,9 +213,7 @@ textarea {
|
|||
input:focus,
|
||||
textarea:focus {
|
||||
border-color: rgba(82,168,236,.8);
|
||||
@shadow: inset 0 1px 1px rgba(0,0,0,.075),
|
||||
0 0 8px rgba(82,168,236,.6);
|
||||
.box-shadow(@shadow);
|
||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
}
|
||||
|
|
@ -244,7 +242,12 @@ select:focus {
|
|||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input[class*="span"] {
|
||||
.uneditable-input[class*="span"],
|
||||
// Redeclare since the fluid row class is more specific
|
||||
.row-fluid input[class*="span"],
|
||||
.row-fluid select[class*="span"],
|
||||
.row-fluid textarea[class*="span"],
|
||||
.row-fluid .uneditable-input[class*="span"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,11 +70,11 @@
|
|||
|
||||
// Sizing shortcuts
|
||||
// -------------------------
|
||||
.size(@height: 5px, @width: 5px) {
|
||||
.size(@height, @width) {
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
.square(@size: 5px) {
|
||||
.square(@size) {
|
||||
.size(@size, @size);
|
||||
}
|
||||
|
||||
|
|
@ -192,14 +192,14 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
// Border Radius
|
||||
.border-radius(@radius: 5px) {
|
||||
.border-radius(@radius) {
|
||||
-webkit-border-radius: @radius;
|
||||
-moz-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||
.box-shadow(@shadow) {
|
||||
-webkit-box-shadow: @shadow;
|
||||
-moz-box-shadow: @shadow;
|
||||
box-shadow: @shadow;
|
||||
|
|
@ -229,21 +229,21 @@
|
|||
-o-transform: scale(@ratio);
|
||||
transform: scale(@ratio);
|
||||
}
|
||||
.translate(@x: 0, @y: 0) {
|
||||
.translate(@x, @y) {
|
||||
-webkit-transform: translate(@x, @y);
|
||||
-moz-transform: translate(@x, @y);
|
||||
-ms-transform: translate(@x, @y);
|
||||
-o-transform: translate(@x, @y);
|
||||
transform: translate(@x, @y);
|
||||
}
|
||||
.skew(@x: 0, @y: 0) {
|
||||
.skew(@x, @y) {
|
||||
-webkit-transform: skew(@x, @y);
|
||||
-moz-transform: skew(@x, @y);
|
||||
-ms-transform: skew(@x, @y);
|
||||
-o-transform: skew(@x, @y);
|
||||
transform: skew(@x, @y);
|
||||
}
|
||||
.translate3d(@x: 0, @y: 0, @z: 0) {
|
||||
.translate3d(@x, @y, @z) {
|
||||
-webkit-transform: translate(@x, @y, @z);
|
||||
-moz-transform: translate(@x, @y, @z);
|
||||
-ms-transform: translate(@x, @y, @z);
|
||||
|
|
@ -255,7 +255,7 @@
|
|||
// Prevent browsers from flickering when using CSS 3D transforms.
|
||||
// Default value is `visible`, but can be changed to `hidden
|
||||
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
|
||||
.backface-visibility(@visibility: visible){
|
||||
.backface-visibility(@visibility){
|
||||
-webkit-backface-visibility: @visibility;
|
||||
-moz-backface-visibility: @visibility;
|
||||
-ms-backface-visibility: @visibility;
|
||||
|
|
@ -297,13 +297,13 @@
|
|||
}
|
||||
|
||||
// Resize anything
|
||||
.resizable(@direction: both) {
|
||||
.resizable(@direction) {
|
||||
resize: @direction; // Options: horizontal, vertical, both
|
||||
overflow: auto; // Safari fix
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
.content-columns(@columnCount, @columnGap: @gridColumnGutter) {
|
||||
.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
|
||||
-webkit-column-count: @columnCount;
|
||||
-moz-column-count: @columnCount;
|
||||
column-count: @columnCount;
|
||||
|
|
@ -313,7 +313,7 @@
|
|||
}
|
||||
|
||||
// Opacity
|
||||
.opacity(@opacity: 100) {
|
||||
.opacity(@opacity) {
|
||||
opacity: @opacity / 100;
|
||||
filter: ~"alpha(opacity=@{opacity})";
|
||||
}
|
||||
|
|
@ -577,7 +577,7 @@
|
|||
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
|
||||
|
||||
.spanX (@index) when (@index > 0) {
|
||||
(~"> .span@{index}") { .span(@index); }
|
||||
(~".span@{index}") { .span(@index); }
|
||||
.spanX(@index - 1);
|
||||
}
|
||||
.spanX (0) {}
|
||||
|
|
@ -590,6 +590,7 @@
|
|||
width: 100%;
|
||||
.clearfix();
|
||||
[class*="span"] {
|
||||
.input-block-level();
|
||||
float: left;
|
||||
margin-left: @fluidGridGutterWidth;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
.close { margin-top: 2px; }
|
||||
}
|
||||
|
||||
// Body (where all modal content resises)
|
||||
// Body (where all modal content resides)
|
||||
.modal-body {
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
|
|
|
|||
|
|
@ -21,8 +21,7 @@
|
|||
padding-right: 20px;
|
||||
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
|
||||
.border-radius(4px);
|
||||
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
.box-shadow(@shadow);
|
||||
.box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)");
|
||||
}
|
||||
|
||||
// Set width to auto for default container
|
||||
|
|
@ -39,8 +38,7 @@
|
|||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
.buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
|
||||
.box-shadow(@shadow);
|
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
|
||||
}
|
||||
.btn-navbar .icon-bar {
|
||||
display: block;
|
||||
|
|
@ -143,8 +141,7 @@
|
|||
color: @white;
|
||||
background-color: @navbarSearchBackground;
|
||||
border: 1px solid @navbarSearchBorder;
|
||||
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
|
||||
.box-shadow(@shadow);
|
||||
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)");
|
||||
.transition(none);
|
||||
|
||||
// Placeholder text gets special styles; can't be a grouped selector
|
||||
|
|
|
|||
|
|
@ -266,8 +266,7 @@
|
|||
.clearfix();
|
||||
}
|
||||
.tab-content {
|
||||
display: table; // prevent content from running below tabs
|
||||
width: 100%;
|
||||
overflow: auto; // prevent content from running below tabs
|
||||
}
|
||||
|
||||
// Remove border on bottom, left, right
|
||||
|
|
@ -314,10 +313,6 @@
|
|||
// ------------
|
||||
|
||||
// Common styles
|
||||
.tabs-left .tab-content,
|
||||
.tabs-right .tab-content {
|
||||
width: auto;
|
||||
}
|
||||
.tabs-left .nav-tabs > li,
|
||||
.tabs-right .nav-tabs > li {
|
||||
float: none;
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
.thumbnails {
|
||||
margin-left: -30px;
|
||||
}
|
||||
.thumbnails > li {
|
||||
margin-left: 30px;
|
||||
.row-fluid .thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,6 +86,21 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
// TYPOGRAPHY
|
||||
// ----------
|
||||
// Reset horizontal dl
|
||||
.dl-horizontal {
|
||||
dt {
|
||||
float: none;
|
||||
clear: none;
|
||||
width: auto;
|
||||
text-align: left;
|
||||
}
|
||||
dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// GRID & CONTAINERS
|
||||
// -----------------
|
||||
// Remove width from containers
|
||||
|
|
@ -100,21 +115,15 @@
|
|||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
// Make all columns even
|
||||
.row > [class*="span"],
|
||||
.row-fluid > [class*="span"] {
|
||||
// Make all grid-sized elements block level again
|
||||
[class*="span"],
|
||||
.row-fluid [class*="span"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// THUMBNAILS
|
||||
// ----------
|
||||
.thumbnails [class*="span"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// FORM FIELDS
|
||||
// -----------
|
||||
// Make span* classes full width
|
||||
|
|
@ -125,8 +134,11 @@
|
|||
.input-block-level();
|
||||
}
|
||||
// But don't let it screw up prepend/append inputs
|
||||
.input-prepend input,
|
||||
.input-append input,
|
||||
.input-prepend input[class*="span"],
|
||||
.input-append input[class*="span"] {
|
||||
display: inline-block; // redeclare so they don't wrap to new lines
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -93,8 +93,7 @@
|
|||
margin: (@baseLineHeight / 2) 0;
|
||||
border-top: 1px solid @navbarBackground;
|
||||
border-bottom: 1px solid @navbarBackground;
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
.box-shadow(@shadow);
|
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
|
||||
}
|
||||
// Pull right (secondary) nav content
|
||||
.navbar .nav.pull-right {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
*/
|
||||
|
||||
|
||||
// Responsive.less
|
||||
// For phone and tablet devices
|
||||
// -------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -269,23 +269,180 @@
|
|||
<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
|
||||
<div id="fluidRowInputs">
|
||||
<div class="row-fluid">
|
||||
<div class="span4">
|
||||
<div class="span12">
|
||||
<input class="span1" placeholder="span1">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span2" placeholder="span2">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span3" placeholder="span3">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span4" placeholder="span4">
|
||||
</div><!--/span-->
|
||||
<div class="span8">
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span5" placeholder="span5">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span6" placeholder="span6">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span7" placeholder="span7">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span8" placeholder="span8">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid" id="fluidRowInputs">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span9" placeholder="span9">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span10" placeholder="span10">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span11" placeholder="span11">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span12" placeholder="span12">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</div>
|
||||
<br>
|
||||
|
||||
|
||||
<!-- Dropdowns
|
||||
================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Dropdowns</h1>
|
||||
</div>
|
||||
|
||||
<h4>Dropdown link with hash URL</h4>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="active"><a href="#">Link</a></li>
|
||||
<li><a href="#">Example link</a></li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
Dropdown <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>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>Dropdown link with custom URL and data-target</h4>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="active"><a href="#">Link</a></li>
|
||||
<li><a href="#">Example link</a></li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
|
||||
Dropdown <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>
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
|
||||
|
||||
<!-- Thumbnails
|
||||
================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Thumbnails</h1>
|
||||
</div>
|
||||
|
||||
<h4>Offset thumbnails</h4>
|
||||
<ul class="thumbnails">
|
||||
<li class="span3 offset3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="thumbnails">
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3 offset3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>Fluid thumbnails</h4>
|
||||
<div class="row-fluid">
|
||||
<div class="span8">
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span4">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span4">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,23 @@
|
|||
// THUMBNAILS
|
||||
// ----------
|
||||
|
||||
// Make wrapper ul behave like the grid
|
||||
.thumbnails {
|
||||
margin-left: -@gridGutterWidth;
|
||||
list-style: none;
|
||||
.clearfix();
|
||||
}
|
||||
.thumbnails > li {
|
||||
float: left;
|
||||
margin: 0 0 @baseLineHeight @gridGutterWidth;
|
||||
// Fluid rows have no left margin
|
||||
.row-fluid .thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Float li to make thumbnails appear in a row
|
||||
.thumbnails > li {
|
||||
margin-bottom: @baseLineHeight;
|
||||
}
|
||||
|
||||
// The actual thumbnail (can be `a` or `div`)
|
||||
.thumbnail {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
|
|
@ -23,6 +31,7 @@ a.thumbnail:hover {
|
|||
border-color: @linkColor;
|
||||
.box-shadow(0 1px 4px rgba(0,105,214,.25));
|
||||
}
|
||||
|
||||
// Images and captions
|
||||
.thumbnail > img {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -135,6 +135,7 @@ dd {
|
|||
// Horizontal layout (like forms)
|
||||
.dl-horizontal {
|
||||
dt {
|
||||
.text-overflow();
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 120px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue