mirror of https://github.com/twbs/bootstrap.git
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes
This commit is contained in:
Mark Otto
parent
cabf993bc6
commit
a017932285
|
|
@ -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
|
||||
* ------------------------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -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;}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
197
docs/less.html
197
docs/less.html
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
// 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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -273,3 +273,40 @@
|
|||
-moz-opacity: @opacity / 100;
|
||||
opacity: @opacity / 100;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
// 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
// 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;
|
||||
}
|
||||
Loading…
Reference in New Issue