2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00

start breaking down patterns.less into more distinct files, update docs for forms to use correct classes

This commit is contained in:
Mark Otto
2011-11-16 23:58:36 -08:00
parent cabf993bc6
commit a017932285
14 changed files with 1025 additions and 821 deletions
+291 -291
View File
@@ -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: Mon Nov 7 21:14:04 PST 2011
* Date: Wed Nov 16 23:58:14 PST 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -1440,238 +1440,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
.dropdown.open .dropdown-menu {
display: block;
}
.tabs, .pills {
margin: 0 0 20px;
padding: 0;
list-style: none;
zoom: 1;
}
.tabs:before,
.pills:before,
.tabs:after,
.pills:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.tabs:after, .pills:after {
clear: both;
}
.tabs > li, .pills > li {
float: left;
}
.tabs > li > a, .pills > li > a {
display: block;
}
.tabs {
border-color: #ddd;
border-style: solid;
border-width: 0 0 1px;
}
.tabs > li {
position: relative;
margin-bottom: -1px;
}
.tabs > li > a {
padding: 0 15px;
margin-right: 2px;
line-height: 36px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.tabs > li > a:hover {
text-decoration: none;
background-color: #eee;
border-color: #eee #eee #ddd;
}
.tabs .active > a, .tabs .active > a:hover {
color: #808080;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
.tabbable {
margin-bottom: 18px;
}
.tabbable .tabs {
margin-bottom: 0;
border-bottom: 0;
}
.tabbable .tab-content {
padding: 19px;
border: 1px solid #ddd;
}
.tabbable.tabs-bottom .tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabbable.tabs-bottom .tabs > li > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.tabbable.tabs-bottom .tabs > li > a:hover {
border-bottom-color: transparent;
border-top-color: #ddd;
}
.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
.tabbable.tabs-left, .tabbable.tabs-right {
zoom: 1;
}
.tabbable.tabs-left:before,
.tabbable.tabs-right:before,
.tabbable.tabs-left:after,
.tabbable.tabs-right:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.tabbable.tabs-left:after, .tabbable.tabs-right:after {
clear: both;
}
.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs {
width: 100px;
}
.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li {
float: none;
margin-bottom: -1px;
}
.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a {
margin-bottom: 2px;
}
.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover {
border-color: transparent;
}
.tabbable.tabs-left .tab-content {
margin-left: 100px;
}
.tabbable.tabs-left .tabs {
float: left;
}
.tabbable.tabs-left .tabs > li {
margin-right: -1px;
}
.tabbable.tabs-left .tabs > li > a {
margin-right: 0;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.tabbable.tabs-left .tabs > li > a:hover {
border-right-color: #ddd;
}
.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover {
border-color: #ddd;
border-right-color: transparent;
}
.tabbable.tabs-right .tab-content {
margin-right: 100px;
}
.tabbable.tabs-right .tabs {
float: right;
}
.tabbable.tabs-right .tabs > li {
margin-left: -1px;
}
.tabbable.tabs-right .tabs > li > a {
margin-left: 0;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.tabbable.tabs-right .tabs > li > a:hover {
border-left-color: #ddd;
}
.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover {
border-color: #ddd;
border-left-color: transparent;
}
.tabs .menu-dropdown, .tabs .dropdown-menu {
top: 35px;
border-width: 1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.tabs a.menu:after, .tabs .dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
border-color: #999;
}
.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
.pills a {
margin: 5px 3px 5px 0;
padding: 0 15px;
line-height: 30px;
text-shadow: 0 1px 1px #ffffff;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.pills a:hover {
color: #ffffff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
background-color: #00438a;
}
.pills .active a {
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
background-color: #0069d6;
}
.pills-vertical > li {
float: none;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none;
}
.tab-content > .active, .pill-content > .active {
display: block;
}
.breadcrumb {
margin: 0 0 18px;
padding: 7px 14px;
background-color: #f5f5f5;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(top, #ffffff, #f5f5f5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}
.breadcrumb li {
display: inline;
text-shadow: 0 1px 0 #ffffff;
}
.breadcrumb .divider {
padding: 0 5px;
color: #bfbfbf;
}
.breadcrumb .active a {
color: #404040;
}
.hero-unit {
background-color: #f5f5f5;
margin-bottom: 30px;
@@ -2038,6 +1806,296 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
background-color: #ddf4fb;
border-color: #c6edf9;
}
.well {
background-color: #f5f5f5;
margin-bottom: 20px;
padding: 19px;
min-height: 20px;
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.fade {
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-ms-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
opacity: 0;
}
.fade.in {
opacity: 1;
}
.label {
padding: 1px 3px 2px;
background-color: #bfbfbf;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.label.important {
background-color: #c43c35;
}
.label.warning {
background-color: #f89406;
}
.label.success {
background-color: #46a546;
}
.label.notice {
background-color: #62cffc;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.tabs, .pills {
margin: 0 0 20px;
padding: 0;
list-style: none;
zoom: 1;
}
.tabs:before,
.pills:before,
.tabs:after,
.pills:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.tabs:after, .pills:after {
clear: both;
}
.tabs > li, .pills > li {
float: left;
}
.tabs > li > a, .pills > li > a {
display: block;
}
.tabs {
border-color: #ddd;
border-style: solid;
border-width: 0 0 1px;
}
.tabs > li {
position: relative;
margin-bottom: -1px;
}
.tabs > li > a {
padding: 0 15px;
margin-right: 2px;
line-height: 36px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.tabs > li > a:hover {
text-decoration: none;
background-color: #eee;
border-color: #eee #eee #ddd;
}
.tabs .active > a, .tabs .active > a:hover {
color: #808080;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
.tabbable {
margin-bottom: 18px;
}
.tabbable .tabs {
margin-bottom: 0;
border-bottom: 0;
}
.tabbable .tab-content {
padding: 19px;
border: 1px solid #ddd;
}
.tabbable.tabs-bottom .tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabbable.tabs-bottom .tabs > li > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.tabbable.tabs-bottom .tabs > li > a:hover {
border-bottom-color: transparent;
border-top-color: #ddd;
}
.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
.tabbable.tabs-left, .tabbable.tabs-right {
zoom: 1;
}
.tabbable.tabs-left:before,
.tabbable.tabs-right:before,
.tabbable.tabs-left:after,
.tabbable.tabs-right:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.tabbable.tabs-left:after, .tabbable.tabs-right:after {
clear: both;
}
.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs {
width: 100px;
}
.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li {
float: none;
margin-bottom: -1px;
}
.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a {
margin-bottom: 2px;
}
.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover {
border-color: transparent;
}
.tabbable.tabs-left .tab-content {
margin-left: 100px;
}
.tabbable.tabs-left .tabs {
float: left;
}
.tabbable.tabs-left .tabs > li {
margin-right: -1px;
}
.tabbable.tabs-left .tabs > li > a {
margin-right: 0;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.tabbable.tabs-left .tabs > li > a:hover {
border-right-color: #ddd;
}
.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover {
border-color: #ddd;
border-right-color: transparent;
}
.tabbable.tabs-right .tab-content {
margin-right: 100px;
}
.tabbable.tabs-right .tabs {
float: right;
}
.tabbable.tabs-right .tabs > li {
margin-left: -1px;
}
.tabbable.tabs-right .tabs > li > a {
margin-left: 0;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.tabbable.tabs-right .tabs > li > a:hover {
border-left-color: #ddd;
}
.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover {
border-color: #ddd;
border-left-color: transparent;
}
.tabs .menu-dropdown, .tabs .dropdown-menu {
top: 35px;
border-width: 1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.tabs a.menu:after, .tabs .dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
border-color: #999;
}
.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
.pills a {
margin: 5px 3px 5px 0;
padding: 0 15px;
line-height: 30px;
text-shadow: 0 1px 1px #ffffff;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.pills a:hover {
color: #ffffff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
background-color: #00438a;
}
.pills .active a {
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
background-color: #0069d6;
}
.pills-vertical > li {
float: none;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none;
}
.tab-content > .active, .pill-content > .active {
display: block;
}
.breadcrumb {
margin: 0 0 18px;
padding: 7px 14px;
background-color: #f5f5f5;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(top, #ffffff, #f5f5f5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}
.breadcrumb li {
display: inline;
text-shadow: 0 1px 0 #ffffff;
}
.breadcrumb .divider {
padding: 0 5px;
color: #bfbfbf;
}
.breadcrumb .active a {
color: #404040;
}
.pagination {
height: 36px;
margin: 18px 0;
@@ -2079,24 +2137,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.pagination .next a {
border: 0;
}
.well {
background-color: #f5f5f5;
margin-bottom: 20px;
padding: 19px;
min-height: 20px;
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.modal-backdrop {
background-color: #000000;
position: fixed;
@@ -2331,40 +2371,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.popover .content p, .popover .content ul, .popover .content ol {
margin-bottom: 0;
}
.fade {
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-ms-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
opacity: 0;
}
.fade.in {
opacity: 1;
}
.label {
padding: 1px 3px 2px;
background-color: #bfbfbf;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.label.important {
background-color: #c43c35;
}
.label.warning {
background-color: #f89406;
}
.label.success {
background-color: #46a546;
}
.label.notice {
background-color: #62cffc;
}
.media-grid {
margin-left: -20px;
margin-bottom: 0;
@@ -2403,12 +2409,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
/* Responsive.less
* For phone and tablet devices
* ------------------------------------------------------------- */