diff options
| author | Mark Otto <[email protected]> | 2011-11-16 23:58:36 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2011-11-16 23:58:36 -0800 |
| commit | a0179322854a9d1e2b9363447c9884e40733d04f (patch) | |
| tree | 4d4328f818a56ec7d17cf604f2f1fb3543fbe3d7 /lib/patterns.less | |
| parent | cabf993bc6f2f984474503f636b4c4ba6d62912e (diff) | |
| download | bootstrap-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.less | 483 |
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 |
