Skip to content
GitLab
Commit a0179322 authored by Mark Otto's avatar Mark Otto
Browse files

start breaking down patterns.less into more distinct files, update docs for... 

start breaking down patterns.less into more distinct files, update docs for forms to use correct classes
parent cabf993b
Hide whitespace changes
Inline Side-by-side
Showing
with 1035 additions and 831 deletions
+1035 -831
bootstrap.css
+ 302
- 302
View file @ a0179322
......@@ -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,18 +1806,308 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
background-color: #ddf4fb;
border-color: #c6edf9;
}
.pagination {
height: 36px;
margin: 18px 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);
}
.pagination ul {
float: left;
margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
.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;
}
.pagination ul {
float: left;
margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
......@@ -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
* ------------------------------------------------------------- */
......
bootstrap.min.css
+ 39
- 39
View file @ a0179322
......@@ -236,37 +236,6 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
.dropdown.open .dropdown-menu{display:block;}
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
.tabs:after,.pills:after{clear:both;}
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
.tabs{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;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
......@@ -307,13 +276,51 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
.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;}.pagination ul{float:left;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
.pagination li{display:inline;}
.pagination a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;}
.pagination a:hover,.pagination .active a{background-color:#c7eefe;}
.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;}
.pagination .next a{border:0;}
.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
.modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;}
.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
.modal{position:fixed;top:50%;left:50%;z-index:11000;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;}
......@@ -339,16 +346,9 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-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);}
.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
.label.warning{background-color:#f89406;}
.label.success{background-color:#46a546;}
.label.notice{background-color:#62cffc;}
.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
.media-grid:after{clear:both;}
.media-grid li{display:inline;}
.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
.media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-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;}
@media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@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;}}
docs/base-css.html
+ 4
- 4
View file @ a0179322
......@@ -696,22 +696,22 @@
<tbody>
<tr>
<th>Vertical (default)</th>
<td><code>.vertical-form</code> <span class="muted">(not required)</span></td>
<td><code>.form-vertical</code> <span class="muted">(not required)</span></td>
<td>Stacked, left-aligned labels over controls</td>
</tr>
<tr>
<th>Horiztonal</th>
<td><code>.horizontal-form</code></td>
<td><code>.form-horizontal</code></td>
<td>Float left, right-aligned labels on same line as controls</td>
</tr>
<tr>
<th>Inline</th>
<td><code>.inline-form</code></td>
<td><code>.form-inline</code></td>
<td>Left-aligned label and inline-block controls for compact style</td>
</tr>
<tr>
<th>Search</th>
<td><code>.search-form</code></td>
<td><code>.form-search</code></td>
<td>Extra-rounded text input for a typical search aesthetic</td>
</tr>
</tbody>
......
docs/less.html
+ 195
- 2
View file @ a0179322
......@@ -95,15 +95,208 @@
<!-- VARIABLES
================================================== -->
<div class="page-header" id="variables">
<h1>Variables</h1>
<h1>Variables <small>from variables.less</small></h1>
</div>
<div class="row">
<div class="span3">
<h3>Hyperlinks</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<thead>
<tr>
<th>Variable</th>
<th>Value</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@linkColor</code></td>
<td>#0069d6</td>
<td>Default link text color</td>
</tr>
<tr>
<td><code>@linkColorHover</code></td>
<td><code>darken(@linkColor, 15)</code></td>
<td>Default link text hover color</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span3">
<h3>Grayscale colors</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<tbody>
<tr>
<td><code>@black</code></td>
<td>#000</td>
<td>Black</td>
</tr>
<tr>
<td><code>@grayDark</code></td>
<td><code>lighten(@black, 25%)</code></td>
<td>Dark gray</td>
</tr>
<tr>
<td><code>@gray</code></td>
<td><code>lighten(@black, 50%)</code></td>
<td>Medium gray</td>
</tr>
<tr>
<td><code>@grayLight</code></td>
<td><code>lighten(@black, 75%)</code></td>
<td>Light gray</td>
</tr>
<tr>
<td><code>@grayLighter</code></td>
<td><code>lighten(@black, 90%)</code></td>
<td>Lighter gray</td>
</tr>
<tr>
<td><code>@white</code></td>
<td>#fff</td>
<td>White</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span3">
<h3>Accent colors</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<tbody>
<tr>
<td><code>@blue</code></td>
<td>#049CDB</td>
<td></td>
</tr>
<tr>
<td><code>@green</code></td>
<td>#46a546</td>
<td></td>
</tr>
<tr>
<td><code>@red</code></td>
<td>#9d261d</td>
<td></td>
</tr>
<tr>
<td><code>@yellow</code></td>
<td>#ffc40d</td>
<td></td>
</tr>
<tr>
<td><code>@orange</code></td>
<td>#f89406</td>
<td></td>
</tr>
<tr>
<td><code>@pink</code></td>
<td>#c3325f</td>
<td></td>
</tr>
<tr>
<td><code>@purple</code></td>
<td>#7a43b6</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span3">
<h3>Grid system</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<tbody>
<tr>
<td><code>@gridColumns</code></td>
<td>12</td>
<td></td>
</tr>
<tr>
<td><code>@gridColumnWidth</code></td>
<td>60px</td>
<td></td>
</tr>
<tr>
<td><code>@gridGutterWidth</code></td>
<td>20px</td>
<td></td>
</tr>
<tr>
<td><code>@siteWidth</code></td>
<td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span3">
<h3>Typography</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<tbody>
<tr>
<td><code>@baseFontSize</code></td>
<td>13px</td>
<td></td>
</tr>
<tr>
<td><code>@baseFontFamily</code></td>
<td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
<td></td>
</tr>
<tr>
<td><code>@baseLineHeight</code></td>
<td>18px</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span3">
<h3>Visuals</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<tbody>
<tr>
<td><code>@primaryButtonColor</code></td>
<td><code>@blue</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- MIXINS
================================================== -->
<div class="page-header" id="mixins">
<h1>Mixins</h1>
<h1>Mixins <small>from mixins.less</small></h1>
</div>
......
lib/bootstrap.less
+ 10
- 0
View file @ a0179322
......@@ -23,7 +23,17 @@
@import "type.less";
@import "forms.less";
@import "tables.less";
// Temp catchall for what's missing thus far
@import "patterns.less";
@import "tabs-pills.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "modals.less";
@import "twipsy.less";
@import "popovers.less";
@import "media-grids.less";
// Responsive
@import "responsive.less";
\ No newline at end of file
lib/breadcrumbs.less 0 → 100644
+ 22
- 0
View file @ a0179322
// BREADCRUMBS
// -----------
.breadcrumb {
margin: 0 0 @baseLineHeight;
padding: 7px 14px;
#gradient > .vertical(#ffffff, #f5f5f5);
border: 1px solid #ddd;
.border-radius(3px);
.box-shadow(inset 0 1px 0 @white);
li {
display: inline;
text-shadow: 0 1px 0 @white;
}
.divider {
padding: 0 5px;
color: @grayLight;
}
.active a {
color: @grayDark;
}
}
lib/media-grids.less 0 → 100644
+ 26
- 0
View file @ a0179322
// MEDIA GRIDS
// -----------
.media-grid {
margin-left: -20px;
margin-bottom: 0;
.clearfix();
li {
display: inline;
}
a {
float: left;
padding: 4px;
margin: 0 0 20px 20px;
border: 1px solid #ddd;
.border-radius(4px);
.box-shadow(0 1px 1px rgba(0,0,0,.075));
img {
display: block;
}
&:hover {
border-color: @linkColor;
.box-shadow(0 1px 4px rgba(0,105,214,.25));
}
}
}
lib/mixins.less
+ 38
- 1
View file @ a0179322
......@@ -272,4 +272,41 @@
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}
\ No newline at end of file
}
// Popover arrows
// For tipsies and popovers
#popoverArrow {
.above(@arrowWidth: 5px) {
bottom: 0;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-top: @arrowWidth solid @black;
}
.left(@arrowWidth: 5px) {
top: 50%;
right: 0;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid @black;
}
.below(@arrowWidth: 5px) {
top: 0;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid @black;
}
.right(@arrowWidth: 5px) {
top: 50%;
left: 0;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-right: @arrowWidth solid @black;
}
}
lib/modals.less 0 → 100644
+ 60
- 0
View file @ a0179322
// MODALS
// ------
.modal-backdrop {
background-color: @black;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
// Fade for backdrop
&.fade { opacity: 0; }
}
.modal-backdrop, .modal-backdrop.fade.in {
.opacity(80);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 11000;
width: 560px;
margin: -250px 0 0 -250px;
background-color: @white;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
*border: 1px solid #999; /* IE6-7 */
.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%;
}
&.fade.in { top: 50%; }
}
.modal-header {
border-bottom: 1px solid #eee;
padding: 5px 15px;
}
.modal-body {
padding: 15px;
}
.modal-footer {
background-color: #f5f5f5;
padding: 14px 15px 15px;
border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white);
.clearfix();
margin-bottom: 0;
.btn {
float: right;
margin-left: 5px;
}
}
lib/pagination.less 0 → 100644
+ 40
- 0
View file @ a0179322
// PAGINATION
// ----------
.pagination {
height: @baseLineHeight * 2;
margin: @baseLineHeight 0;
ul {
float: left;
margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
li {
display: inline;
}
a {
float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0,0,0,.15);
*border-right-color: #ddd; /* IE6-7 */
text-decoration: none;
}
a:hover,
.active a {
background-color: lighten(@blue, 45%);
}
.disabled a,
.disabled a:hover {
background-color: transparent;
color: @grayLight;
}
.next a {
border: 0;
}
}
lib/patterns.less
+ 0
- 483
View file @ a0179322
......@@ -301,251 +301,8 @@
}
// Tabs and Pills
.tabs,
.pills {
margin: 0 0 20px;
padding: 0;
list-style: none;
.clearfix();
> li {
float: left;
> a {
display: block;
}
}
}
// Tabs
.tabs {
border-color: #ddd;
border-style: solid;
border-width: 0 0 1px;
> li {
position: relative; // For the dropdowns mostly
margin-bottom: -1px;
> a {
padding: 0 15px;
margin-right: 2px;
line-height: @baseLineHeight * 2;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
text-decoration: none;
background-color: #eee;
border-color: #eee #eee #ddd;
}
}
}
// Active state, and it's :hover to override normal :hover
.active > a,
.active > a:hover {
color: @gray;
background-color: @white;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
}
.tabbable {
margin-bottom: @baseLineHeight;
// Tabs on top
.tabs {
margin-bottom: 0;
border-bottom: 0;
}
.tab-content {
padding: 19px;
border: 1px solid #ddd;
}
// Tabs on bottom
&.tabs-bottom .tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
&.tabs-bottom .tabs > li > a {
.border-radius(0 0 4px 4px);
&:hover {
border-bottom-color: transparent;
border-top-color: #ddd;
}
}
&.tabs-bottom .tabs > .active > a,
&.tabs-bottom .tabs > .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
// Tabs on left and right
&.tabs-left,
&.tabs-right {
.clearfix();
.tabs {
// Give a fixed width to avoid floating .tab-con
width: 100px;
// Unfloat them so they stack
> li {
float: none;
margin-bottom: -1px;
> a {
margin-bottom: 2px;
&:hover {
border-color: transparent;
}
}
}
}
}
// Tabs on left
&.tabs-left {
.tab-content {
margin-left: 100px;
}
.tabs {
float: left;
> li {
margin-right: -1px;
> a {
margin-right: 0;
.border-radius(4px 0 0 4px);
&:hover {
border-right-color: #ddd;
}
}
}
// Active state
.active > a,
.active > a:hover {
border-color: #ddd;
border-right-color: transparent;
}
}
}
// Tabs on right
&.tabs-right {
.tab-content {
margin-right: 100px;
}
.tabs {
float: right;
> li {
margin-left: -1px;
> a {
margin-left: 0;
.border-radius(0 4px 4px 0);
&:hover {
border-left-color: #ddd;
}
}
}
// Active state
.active > a,
.active > a:hover {
border-color: #ddd;
border-left-color: transparent;
}
}
}
}
// Dropdowns in tabs
.tabs {
// first one for backwards compatibility
.menu-dropdown,
.dropdown-menu {
top: 35px;
border-width: 1px;
.border-radius(0 6px 6px 6px);
}
// first one for backwards compatibility
a.menu:after,
.dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
// first one for backwards compatibility
li.open.menu .menu,
.open.dropdown .dropdown-toggle {
border-color: #999;
}
// first one for backwards compatibility
li.open a.menu:after,
.dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
}
// Pills
.pills {
a {
margin: 5px 3px 5px 0;
padding: 0 15px;
line-height: 30px;
text-shadow: 0 1px 1px @white;
.border-radius(15px);
&:hover {
color: @white;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
background-color: @linkColorHover;
}
}
.active a {
color: @white;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
background-color: @linkColor;
}
}
// Stacked pills
.pills-vertical > li {
float: none;
}
// Tabbable areas
.tab-content,
.pill-content {
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
// BREADCRUMBS
// -----------
.breadcrumb {
margin: 0 0 @baseLineHeight;
padding: 7px 14px;
#gradient > .vertical(#ffffff, #f5f5f5);
border: 1px solid #ddd;
.border-radius(3px);
.box-shadow(inset 0 1px 0 @white);
li {
display: inline;
text-shadow: 0 1px 0 @white;
}
.divider {
padding: 0 5px;
color: @grayLight;
}
.active a {
color: @grayDark;
}
}
// PAGE HEADERS
......@@ -852,46 +609,6 @@ input[type=submit].btn {
}
// PAGINATION
// ----------
.pagination {
height: @baseLineHeight * 2;
margin: @baseLineHeight 0;
ul {
float: left;
margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
li {
display: inline;
}
a {
float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0,0,0,.15);
*border-right-color: #ddd; /* IE6-7 */
text-decoration: none;
}
a:hover,
.active a {
background-color: lighten(@blue, 45%);
}
.disabled a,
.disabled a:hover {
background-color: transparent;
color: @grayLight;
}
.next a {
border: 0;
}
}
// WELLS
......@@ -913,186 +630,12 @@ input[type=submit].btn {
}
// MODALS
// ------
.modal-backdrop {
background-color: @black;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
// Fade for backdrop
&.fade { opacity: 0; }
}
.modal-backdrop, .modal-backdrop.fade.in {
.opacity(80);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 11000;
width: 560px;
margin: -250px 0 0 -250px;
background-color: @white;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
*border: 1px solid #999; /* IE6-7 */
.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%;
}
&.fade.in { top: 50%; }
}
.modal-header {
border-bottom: 1px solid #eee;
padding: 5px 15px;
}
.modal-body {
padding: 15px;
}
.modal-footer {
background-color: #f5f5f5;
padding: 14px 15px 15px;
border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white);
.clearfix();
margin-bottom: 0;
.btn {
float: right;
margin-left: 5px;
}
}
// POPOVER ARROWS
// --------------
#popoverArrow {
.above(@arrowWidth: 5px) {
bottom: 0;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-top: @arrowWidth solid @black;
}
.left(@arrowWidth: 5px) {
top: 50%;
right: 0;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid @black;
}
.below(@arrowWidth: 5px) {
top: 0;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid @black;
}
.right(@arrowWidth: 5px) {
top: 50%;
left: 0;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-right: @arrowWidth solid @black;
}
}
// TWIPSY
// ------
.twipsy {
display: block;
position: absolute;
visibility: visible;
padding: 5px;
font-size: 11px;
z-index: 1000;
.opacity(80);
&.fade.in {
.opacity(80);
}
&.above .twipsy-arrow { #popoverArrow > .above(); }
&.left .twipsy-arrow { #popoverArrow > .left(); }
&.below .twipsy-arrow { #popoverArrow > .below(); }
&.right .twipsy-arrow { #popoverArrow > .right(); }
}
.twipsy-inner {
padding: 3px 8px;
background-color: @black;
color: white;
text-align: center;
max-width: 200px;
text-decoration: none;
.border-radius(4px);
}
.twipsy-arrow {
position: absolute;
width: 0;
height: 0;
}
// POPOVERS
// --------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
padding: 5px;
display: none;
&.above .arrow { #popoverArrow > .above(); }
&.right .arrow { #popoverArrow > .right(); }
&.below .arrow { #popoverArrow > .below(); }
&.left .arrow { #popoverArrow > .left(); }
.arrow {
position: absolute;
width: 0;
height: 0;
}
.inner {
background-color: @black;
background-color: rgba(0,0,0,.8);
padding: 3px;
overflow: hidden;
width: 280px;
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
}
.title {
background-color: #f5f5f5;
padding: 9px 15px;
line-height: 1;
.border-radius(3px 3px 0 0);
border-bottom:1px solid #eee;
}
.content {
background-color: @white;
padding: 14px;
.border-radius(0 0 3px 3px);
.background-clip(padding-box);
p, ul, ol {
margin-bottom: 0;
}
}
}
// PATTERN ANIMATIONS
......@@ -1125,32 +668,6 @@ input[type=submit].btn {
}
// MEDIA GRIDS
// -----------
.media-grid {
margin-left: -20px;
margin-bottom: 0;
.clearfix();
li {
display: inline;
}
a {
float: left;
padding: 4px;
margin: 0 0 20px 20px;
border: 1px solid #ddd;
.border-radius(4px);
.box-shadow(0 1px 1px rgba(0,0,0,.075));
img {
display: block;
}
&:hover {
border-color: @linkColor;
.box-shadow(0 1px 4px rgba(0,105,214,.25));
}
}
}
// MISC
......
lib/popovers.less 0 → 100644
+ 45
- 0
View file @ a0179322
// POPOVERS
// --------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
padding: 5px;
display: none;
&.above .arrow { #popoverArrow > .above(); }
&.right .arrow { #popoverArrow > .right(); }
&.below .arrow { #popoverArrow > .below(); }
&.left .arrow { #popoverArrow > .left(); }
.arrow {
position: absolute;
width: 0;
height: 0;
}
.inner {
background-color: @black;
background-color: rgba(0,0,0,.8);
padding: 3px;
overflow: hidden;
width: 280px;
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
}
.title {
background-color: #f5f5f5;
padding: 9px 15px;
line-height: 1;
.border-radius(3px 3px 0 0);
border-bottom:1px solid #eee;
}
.content {
background-color: @white;
padding: 14px;
.border-radius(0 0 3px 3px);
.background-clip(padding-box);
p, ul, ol {
margin-bottom: 0;
}
}
}
\ No newline at end of file
lib/tabs-pills.less 0 → 100644
+ 221
- 0
View file @ a0179322
// Tabs and Pills
.tabs,
.pills {
margin: 0 0 20px;
padding: 0;
list-style: none;
.clearfix();
> li {
float: left;
> a {
display: block;
}
}
}
// Tabs
.tabs {
border-color: #ddd;
border-style: solid;
border-width: 0 0 1px;
> li {
position: relative; // For the dropdowns mostly
margin-bottom: -1px;
> a {
padding: 0 15px;
margin-right: 2px;
line-height: @baseLineHeight * 2;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
text-decoration: none;
background-color: #eee;
border-color: #eee #eee #ddd;
}
}
}
// Active state, and it's :hover to override normal :hover
.active > a,
.active > a:hover {
color: @gray;
background-color: @white;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
}
.tabbable {
margin-bottom: @baseLineHeight;
// Tabs on top
.tabs {
margin-bottom: 0;
border-bottom: 0;
}
.tab-content {
padding: 19px;
border: 1px solid #ddd;
}
// Tabs on bottom
&.tabs-bottom .tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
&.tabs-bottom .tabs > li > a {
.border-radius(0 0 4px 4px);
&:hover {
border-bottom-color: transparent;
border-top-color: #ddd;
}
}
&.tabs-bottom .tabs > .active > a,
&.tabs-bottom .tabs > .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
// Tabs on left and right
&.tabs-left,
&.tabs-right {
.clearfix();
.tabs {
// Give a fixed width to avoid floating .tab-con
width: 100px;
// Unfloat them so they stack
> li {
float: none;
margin-bottom: -1px;
> a {
margin-bottom: 2px;
&:hover {
border-color: transparent;
}
}
}
}
}
// Tabs on left
&.tabs-left {
.tab-content {
margin-left: 100px;
}
.tabs {
float: left;
> li {
margin-right: -1px;
> a {
margin-right: 0;
.border-radius(4px 0 0 4px);
&:hover {
border-right-color: #ddd;
}
}
}
// Active state
.active > a,
.active > a:hover {
border-color: #ddd;
border-right-color: transparent;
}
}
}
// Tabs on right
&.tabs-right {
.tab-content {
margin-right: 100px;
}
.tabs {
float: right;
> li {
margin-left: -1px;
> a {
margin-left: 0;
.border-radius(0 4px 4px 0);
&:hover {
border-left-color: #ddd;
}
}
}
// Active state
.active > a,
.active > a:hover {
border-color: #ddd;
border-left-color: transparent;
}
}
}
}
// Dropdowns in tabs
.tabs {
// first one for backwards compatibility
.menu-dropdown,
.dropdown-menu {
top: 35px;
border-width: 1px;
.border-radius(0 6px 6px 6px);
}
// first one for backwards compatibility
a.menu:after,
.dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
// first one for backwards compatibility
li.open.menu .menu,
.open.dropdown .dropdown-toggle {
border-color: #999;
}
// first one for backwards compatibility
li.open a.menu:after,
.dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
}
// Pills
.pills {
a {
margin: 5px 3px 5px 0;
padding: 0 15px;
line-height: 30px;
text-shadow: 0 1px 1px @white;
.border-radius(15px);
&:hover {
color: @white;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
background-color: @linkColorHover;
}
}
.active a {
color: @white;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
background-color: @linkColor;
}
}
// Stacked pills
.pills-vertical > li {
float: none;
}
// Tabbable areas
.tab-content,
.pill-content {
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
lib/twipsy.less 0 → 100644
+ 33
- 0
View file @ a0179322
// TWIPSY
// ------
.twipsy {
display: block;
position: absolute;
visibility: visible;
padding: 5px;
font-size: 11px;
z-index: 1000;
.opacity(80);
&.fade.in {
.opacity(80);
}
&.above .twipsy-arrow { #popoverArrow > .above(); }
&.left .twipsy-arrow { #popoverArrow > .left(); }
&.below .twipsy-arrow { #popoverArrow > .below(); }
&.right .twipsy-arrow { #popoverArrow > .right(); }
}
.twipsy-inner {
padding: 3px 8px;
background-color: @black;
color: white;
text-align: center;
max-width: 200px;
text-decoration: none;
.border-radius(4px);
}
.twipsy-arrow {
position: absolute;
width: 0;
height: 0;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment