diff options
| author | Mark Otto <[email protected]> | 2012-01-05 10:01:42 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-01-05 10:01:42 -0800 |
| commit | 20add59de3f2b69aaa9c9b325dab20b13c75eaa1 (patch) | |
| tree | 862ec093fda66cf9cbed16ee746d3766e7112539 /lib/patterns.less | |
| parent | bdc22e71c8cbeddb1dbee9708ab68b4f23abb6f4 (diff) | |
| download | bootstrap-20add59de3f2b69aaa9c9b325dab20b13c75eaa1.tar.xz bootstrap-20add59de3f2b69aaa9c9b325dab20b13c75eaa1.zip | |
breaking out patterns.less even more, removing unnecessary div from checkbox and radio lists--now just labels and inputs
Diffstat (limited to 'lib/patterns.less')
| -rw-r--r-- | lib/patterns.less | 565 |
1 files changed, 0 insertions, 565 deletions
diff --git a/lib/patterns.less b/lib/patterns.less index 7c9ee7e48..72c3e8ec5 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -3,220 +3,6 @@ // ---------------------------------------------------------------------------- -// NAVBAR (FIXED AND STATIC) -// ------------------------- - -// Navbar variables -@navBarHeight: 40px; -@navBarBgStart: #333; -@navBarBgEnd: #222; - -// Common styles -.navbar { - overflow: visible; -} -// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present -.navbar-inner { - background-color: @navBarBgEnd; - #gradient > .vertical(@navBarBgStart, @navBarBgEnd); - @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); - .box-shadow(@shadow); -} -// Text and links -.navbar { - // Hover and active states - .brand a:hover, - ul .active > a { - color: @white; - text-decoration: none; - background-color: @navBarBgStart; - background-color: rgba(255,255,255,.05); - } - // Website or project name - .brand { - float: left; - display: block; - padding: 8px 20px 12px; - margin-left: -20px; // negative indent to left-align the text down the page - font-size: 20px; - font-weight: 200; - line-height: 1; - color: @white; - } - // Plain text in topbar - p { - margin: 0; - line-height: 40px; - a:hover { - color: @white; - background-color: transparent; - } - } - // Buttons in navbar - .btn { - margin-top: 5px; // make buttons vertically centered in navbar - } -} - -// Navbar search -.navbar-search { - position: relative; - float: left; - margin-top: 6px; - margin-bottom: 0; - .search-query { - padding: 4px 9px; - #font > .sans-serif(13px, normal, 1); - color: @white; - color: rgba(255,255,255,.75); - background-color: #444; - background-color: rgba(255,255,255,.3); - border: 1px solid #111; - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); - .box-shadow(@shadow); - .transition(none); - - // Placeholder text gets special styles; can't be bundled together though for some reason - &:-moz-placeholder { - color: @grayLighter; - } - &::-webkit-input-placeholder { - color: @grayLighter; - } - // Hover states - &:hover { - color: @white; - background-color: @grayLight; - background-color: rgba(255,255,255,.5); - } - // Focus states (we use .focused since IE8 and down doesn't support :focus) - &:focus, - &.focused { - padding: 5px 10px; - color: @grayDark; - text-shadow: 0 1px 0 @white; - background-color: @white; - border: 0; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - outline: 0; - } - } -} - - -// Static navbar -.navbar-static { - margin-bottom: @baseLineHeight; -} -.navbar-static .navbar-inner { - padding-left: 20px; - padding-right: 20px; - .border-radius(4px); -} - -// Fixed navbar -.navbar-fixed { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 10000; -} - - - -// NAVIGATION -// ---------- - -// Nav for navbar and topbar -// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity -.nav { - position: relative; - left: 0; - display: block; - float: left; - margin: 0 10px 0 0; - > li { - display: block; - float: left; - } - a { - display: block; - float: none; - padding: 10px 10px 11px; - line-height: 19px; - color: @grayLight; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - &:hover { - color: @white; - text-decoration: none; - } - } - .active > a { - background-color: #222; - background-color: rgba(0,0,0,.5); - } - // Dividers (basically a vertical hr) - .divider { - height: 40px; - width: 1px; - margin: 0 5px; - overflow: hidden; - background-color: #222; - border-right: 1px solid #444; - } - - // Secondary (floated right) nav in topbar - &.secondary-nav { - float: right; - margin-left: 10px; - margin-right: 0; - .dropdown-menu { - right: 0; - border: 0; - } - } - // Dropdowns within the .nav - .dropdown-toggle:hover, - .dropdown.open .dropdown-toggle { - background: #444; - background: rgba(255,255,255,.05); - } - .dropdown-menu { - background-color: #333; - .dropdown-toggle { - color: @white; - &.open { - background: #444; - background: rgba(255,255,255,.05); - } - } - li a { - color: #999; - text-shadow: 0 1px 0 rgba(0,0,0,.5); - &:hover { - #gradient > .vertical(#292929,#191919); - color: @white; - } - } - .active a { - color: @white; - } - .divider { - background-color: #222; - border-color: #444; - } - } -} - -.topbar ul .dropdown-menu li a { - padding: 4px 15px; -} - - - - // PAGE HEADERS // ------------ @@ -255,354 +41,3 @@ footer { margin-bottom: @baseLineHeight * .75; } } - - -// BUTTON STYLES -// ------------- - -// Shared colors for buttons and alerts -.btn, -.alert-message { - // Set text color - &.danger, - &.danger:hover, - &.error, - &.error:hover, - &.success, - &.success:hover, - &.info, - &.info:hover { - color: @white - } - // Danger and error appear as red - &.danger, - &.error { - .gradientBar(#ee5f5b, #c43c35); - } - // Success appears as green - &.success { - .gradientBar(#62c462, #57a957); - } - // Info appears as a neutral blue - &.info { - .gradientBar(#5bc0de, #339bb9); - } -} - -// Base .btn styles -.btn { - // Button Base - display: inline-block; - padding: 5px 14px 6px; - font-size: @baseFontSize; - line-height: normal; - color: #333; - text-shadow: 0 1px 1px rgba(255,255,255,.75); - #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient - border: 1px solid #ccc; - border-bottom-color: #bbb; - .border-radius(4px); - @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - cursor: pointer; - - &:hover { - color: @grayDark; - text-decoration: none; - background-position: 0 -15px; - } - - // Focus state for keyboard and accessibility - &:focus { - outline: 1px dotted #666; - } - - // Primary Button Type - &.primary { - color: @white; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - .gradientBar(@blue, @blueDark) - } - - // Transitions - .transition(.1s linear all); - - // Active and Disabled states - &.active, - &:active { - @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - } - &.disabled { - cursor: default; - background-image: none; - .reset-filter(); - .opacity(65); - .box-shadow(none); - } - &[disabled] { - // disabled pseudo can't be included with .disabled - // def because IE8 and below will drop it ;_; - cursor: default; - background-image: none; - .reset-filter(); - .opacity(65); - .box-shadow(none); - } - - // Button Sizes - &.large { - padding: 9px 14px 9px; - font-size: @baseFontSize + 2px; - line-height: normal; - .border-radius(6px); - } - &.small { - padding: 7px 9px 7px; - font-size: @baseFontSize - 2px; - } -} -// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons -:root .alert-message, -:root .btn { - border-radius: 0 \0; -} - -// Help Firefox not be a jerk about adding extra padding to buttons -button.btn, -input[type=submit].btn { - &::-moz-focus-inner { - padding: 0; - border: 0; - } -} - -// Button groups -// ------------- - -// Group multiple button groups together for a toolbar -.btn-toolbar { - .clearfix(); - .btn-group { - float: left; - margin-right: 10px; - } -} - -// Clear the float -.btn-group { - .clearfix(); -} -// Float them, remove border radius, then re-add to first and last elements -.btn-group .btn { - position: relative; - float: left; - margin-left: -1px; - .border-radius(0); - // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match - &:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; - } - &:last-child { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; - } - // Reset corners for large buttons - &.large:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; - } - &.large:last-child { - -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; - -webkit-border-bottom-right-radius: 6px; - -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; - } -} -// On hover/focus/active, bring the proper btn to front -.btn-group .btn:hover, -.btn-group .btn:focus, -.btn-group .btn:active { - z-index: 2; -} - - - -// CLOSE ICONS -// ----------- -.close { - float: right; - font-size: 20px; - font-weight: bold; - line-height: @baseLineHeight * .75; - color: @black; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); - &:hover { - color: @black; - text-decoration: none; - .opacity(40); - } -} - - -// ERROR STYLES -// ------------ - -// Base alert styles -.alert-message { - position: relative; - padding: 7px 15px; - margin-bottom: @baseLineHeight; - color: @grayDark; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - .gradientBar(#fceec1, #eedc94); // warning by default - border-width: 1px; - border-style: solid; - .border-radius(4px); - .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); - - // Adjust close icon - .close { - *margin-top: 3px; /* IE7 spacing */ - } - - // Remove extra margin from content - h5 { - line-height: @baseLineHeight; - } - p { - margin-bottom: 0; - } - div { - margin-top: 5px; - margin-bottom: 2px; - line-height: 28px; - } - .btn { - // Provide actions with buttons - .box-shadow(0 1px 0 rgba(255,255,255,.25)); - } - - &.error, - &.success, - &.info { - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - } - - &.block-message { - padding: 14px; - background-image: none; - background-color: lighten(#fceec1, 5%); - .reset-filter(); // undo gradient for IE9 - border-color: #fceec1; - .box-shadow(none); - ul, p { - margin-right: 30px; - } - ul { - margin-bottom: 0; - } - li { - color: @grayDark; - } - .alert-actions { - margin-top: 5px; - } - &.error, - &.success, - &.info { - color: @grayDark; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - } - &.error { - background-color: lighten(#f56a66, 25%); - border-color: lighten(#f56a66, 20%); - } - &.success { - background-color: lighten(#62c462, 30%); - border-color: lighten(#62c462, 25%); - } - &.info { - background-color: lighten(#6bd0ee, 25%); - border-color: lighten(#6bd0ee, 20%); - } - } -} - - - - -// WELLS -// ----- - -.well { - min-height: 20px; - padding: 19px; - margin-bottom: 20px; - background-color: #f5f5f5; - border: 1px solid #eee; - border: 1px solid rgba(0,0,0,.05); - .border-radius(4px); - .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); - blockquote { - border-color: #ddd; - border-color: rgba(0,0,0,.15); - } -} - - -// PATTERN ANIMATIONS -// ------------------ - -.fade { - .transition(opacity .15s linear); - opacity: 0; - &.in { - opacity: 1; - } -} - -.collapse { - .transition(height .35s ease); - position:relative; - overflow:hidden; - height: 0; - &.in { height: auto; } -} - - -// LABELS -// ------ - -.label { - padding: 1px 3px 2px; - font-size: @baseFontSize * .75; - font-weight: bold; - color: @white; - text-transform: uppercase; - background-color: @grayLight; - .border-radius(3px); - &.important { background-color: #c43c35; } - &.warning { background-color: @orange; } - &.success { background-color: @green; } - &.notice { background-color: lighten(@blue, 25%); } -} - |
