aboutsummaryrefslogtreecommitdiff
path: root/lib/patterns.less
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2011-11-16 23:58:36 -0800
committerMark Otto <[email protected]>2011-11-16 23:58:36 -0800
commita0179322854a9d1e2b9363447c9884e40733d04f (patch)
tree4d4328f818a56ec7d17cf604f2f1fb3543fbe3d7 /lib/patterns.less
parentcabf993bc6f2f984474503f636b4c4ba6d62912e (diff)
downloadbootstrap-a0179322854a9d1e2b9363447c9884e40733d04f.tar.xz
bootstrap-a0179322854a9d1e2b9363447c9884e40733d04f.zip
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes
Diffstat (limited to 'lib/patterns.less')
-rw-r--r--lib/patterns.less483
1 files changed, 0 insertions, 483 deletions
diff --git a/lib/patterns.less b/lib/patterns.less
index 618b90840..bc1229bd9 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -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