mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes
This commit is contained in:
Mark Otto
+1
-484
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user