diff options
Diffstat (limited to 'lib')
| -rw-r--r-- | lib/bootstrap.less | 5 | ||||
| -rw-r--r-- | lib/forms.less | 12 | ||||
| -rw-r--r-- | lib/mixins.less | 23 | ||||
| -rw-r--r-- | lib/patterns.less | 200 | ||||
| -rw-r--r-- | lib/responsive.less | 180 | ||||
| -rw-r--r-- | lib/scaffolding.less | 50 | ||||
| -rw-r--r-- | lib/type.less | 18 | ||||
| -rw-r--r-- | lib/variables.less | 21 |
8 files changed, 367 insertions, 142 deletions
diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 62f2ce916..9665306fd 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -23,4 +23,7 @@ @import "type.less"; @import "forms.less"; @import "tables.less"; -@import "patterns.less";
\ No newline at end of file +@import "patterns.less"; + +// Responsive +@import "responsive.less";
\ No newline at end of file diff --git a/lib/forms.less b/lib/forms.less index 4bdddc3a2..6edf29e53 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -37,12 +37,6 @@ label { color: @grayDark; } -// Checkboxs and radio buttons -input[type=checkbox], -input[type=radio] { - cursor: pointer; -} - // Inputs, Textareas, Selects input, textarea, @@ -69,11 +63,13 @@ input[type=radio] { *margin-top: 0; /* IE6-7 */ line-height: normal; border: none; + cursor: pointer; } // Reset the file input to browser defaults input[type=file] { background-color: @white; + background-color: initial; padding: initial; border: initial; line-height: initial; @@ -323,11 +319,11 @@ textarea[readonly] { display: block; width: auto; min-width: 16px; - height: 18px; + height: @baseLineHeight; padding: 4px 4px 4px 5px; margin-right: -1px; font-weight: normal; - line-height: 18px; + line-height: @baseLineHeight; color: @grayLight; text-align: center; text-shadow: 0 1px 0 @white; diff --git a/lib/mixins.less b/lib/mixins.less index 9c27346c2..5b05654d5 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -71,20 +71,6 @@ } } -// Font face generator -.font-face(@fontFamily, @fileName, @style, @weight) { - @font-face { - font-family: @fontFamily; - font-style: @style; - font-weight: @weight; - src: url('@{fileName}.eot'); - src: url('@{fileName}.eot?#iefix') format('embedded-opentype'), - url('@{fileName}.woff') format('woff'), - url('@{fileName}.ttf') format('truetype'), - url('@{fileName}.svg#@{fontFamily}') format('svg'); - } -} - // Grid System .fixed-container() { width: @siteWidth; @@ -92,12 +78,13 @@ margin-right: auto; .clearfix(); } -.columns(@columnSpan: 1) { - width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); +.columns(@columns: 1) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); } -.offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; +.offset(@columns: 1) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } + // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { display: inline; diff --git a/lib/patterns.less b/lib/patterns.less index 1b27b7184..f1badc46d 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -3,34 +3,41 @@ * ---------------------------------------------------------------------------- */ -// TOPBAR -// ------ +// NAVBAR (FIXED AND STATIC) +// ------------------------- -// Topbar for Branding and Nav -.topbar { - height: 40px; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 10000; - overflow: visible; +// Navbar variables +@navBarHeight: 40px; +@navBarBgStart: #333; +@navBarBgEnd: #222; - // Links get text shadow +// Common styles +.navbar { + height: @navBarHeight; + 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 { + // Links get text-shadow a { color: @grayLight; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } - // Hover and active states .brand a:hover, ul .active > a { - background-color: #333; + background-color: @navBarBgStart; background-color: rgba(255,255,255,.05); color: @white; text-decoration: none; } - // Website or project name .brand { float: left; @@ -42,7 +49,6 @@ font-weight: 200; line-height: 1; } - // Plain text in topbar p { margin: 0; @@ -52,19 +58,15 @@ color: @white; } } +} - // Search Form - form { - float: left; - margin: 5px 0 0 0; - position: relative; - .opacity(100); - } - // Todo: remove from v2.0 when ready, added for legacy - form.pull-right { - float: right; - } - input { +// Navbar search +.navbar-search { + position: relative; + margin-top: 6px; + margin-bottom: 0; + float: left; + .search-query { background-color: #444; background-color: rgba(255,255,255,.3); #font > .sans-serif(13px, normal, 1); @@ -72,8 +74,7 @@ color: @white; color: rgba(255,255,255,.75); border: 1px solid #111; - .border-radius(4px); - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); .box-shadow(@shadow); .transition(none); @@ -104,19 +105,32 @@ } } -// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present -.topbar-inner { - background-color: #222; - #gradient > .vertical(#333, #222); - @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); - .box-shadow(@shadow); + +// 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; + left: 0; + right: 0; + z-index: 10000; +} + + // NAVIGATION // ---------- -// Topbar Nav +// Nav for navbar and topbar // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity .nav { display: block; @@ -302,14 +316,14 @@ } } -// Basic Tabs +// Tabs .tabs { - float: left; - width: 100%; - border-bottom: 1px solid #ddd; + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; > li { position: relative; // For the dropdowns mostly - top: 1px; + margin-bottom: -1px; > a { padding: 0 15px; margin-right: 2px; @@ -322,61 +336,129 @@ border-color: #eee #eee #ddd; } } - &.active > a { - color: @gray; - background-color: @white; - border: 1px solid #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 + &.tabs-left .tabs { + float: left; + } + &.tabs-left .tabs > li { + float: none; + } + + // Tabs on right + &.tabs-right .tabs { + float: right; + } + &.tabs-right .tabs > li { + float: none; + } +} + + +// 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; } } -.tab-content { - clear: both; -} -// Basic pill nav +// Pills .pills { a { margin: 5px 3px 5px 0; padding: 0 15px; - text-shadow: 0 1px 1px @white; line-height: 30px; + text-shadow: 0 1px 1px @white; .border-radius(15px); &:hover { - background: @linkColorHover; color: @white; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColorHover; } } .active a { - background: @linkColor; color: @white; text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColor; } } -.tab-content > *, -.pill-content > * { - display: none; +// 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; @@ -438,11 +520,11 @@ footer { // ------------ .page-header { - margin-bottom: @baseLineHeight - 1; - border-bottom: 1px solid #ddd; + margin-bottom: @baseLineHeight * 1.5; + border-bottom: 1px solid #eee; .box-shadow(0 1px 0 rgba(255,255,255,.5)); h1 { - margin-bottom: (@baseLineHeight / 2) - 1px; + margin-bottom: @baseLineHeight * .75; } } diff --git a/lib/responsive.less b/lib/responsive.less new file mode 100644 index 000000000..a1a33164f --- /dev/null +++ b/lib/responsive.less @@ -0,0 +1,180 @@ +/* Responsive.less + * For phone and tablet devices + * ------------------------------------------------------------- */ + + +// UP TO LANDSCAPE PHONE +// --------------------- + +@media (max-width: 480px) { + // Remove width from containers + .container { + width: auto; + padding: 0 10px; + } + // Make all columns even + [class*="span"] { + float: none; + display: block; + width: auto; + margin: 0; + } + // Resize modals + .modal { + width: auto; + margin: 0; + } + + // Remove the horizontal form styles + .form-horizontal .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + // Move over all input controls and content + .form-horizontal .controls { + margin-left: 0; + } + // Move the options list down to align with labels + .form-horizontal .control-list { + padding-top: 0; // has to be padding because margin collaspes + } + // Move over buttons in .form-actions to align with .controls + .form-horizontal .form-actions { + padding-left: 0; + } + +} + + +// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET +// -------------------------------------------------- + +@media (min-width: 480px) and (max-width: 768px) { + // Remove width from containers + .container { + width: auto; + padding: 0 10px; + } + // Make all columns even + [class*="span"] { + float: none; + display: block; + width: auto; + margin: 0; + } +} + + +// PORTRAIT TABLET TO DEFAULT DESKTOP +// ---------------------------------- + +@media (min-width: 768px) and (max-width: 940px) { + + // Reset grid variables + @gridColumns: 16; + @gridColumnWidth: 44px; + @gridGutterWidth: 20px; + @siteWidth: 748px; + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + } + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; + } + + // 16cols at 30px wide with 16px gutters + .container { + width: @siteWidth; + } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + +} + +/* +// LARGE DESKTOP & UP +// ------------------ + +@media (min-width: 1210px) { + + // Reset grid variables + @gridColumns: 12; + @gridColumnWidth: 70px; + @gridGutterWidth: 30px; + @siteWidth: 1170px; + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + } + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; + } + + .container { + width: @siteWidth; + } + [class*="span"] { + margin-left: @gridGutterWidth; + } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + +} +*/
\ No newline at end of file diff --git a/lib/scaffolding.less b/lib/scaffolding.less index b6852535c..f15f6853c 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -24,20 +24,28 @@ body { } // Fluid layouts (left aligned, with sidebar, min- & max-width content) -.container-fluid { +.fluid-container { position: relative; min-width: 940px; padding-left: 20px; padding-right: 20px; .clearfix(); - > .sidebar { - float: left; - width: 220px; - } - // TODO in v2: rename this and .popover .content to be more specific - > .content { - margin-left: 240px; - } +} +// Sidebars (left and right options) +.fluid-sidebar-left, +.fluid-sidebar-right { + width: 220px; +} +.fluid-sidebar-left { float: left; } +.fluid-sidebar-right { float: right; } +// The main content area +.fluid-content { + margin-left: 240px; +} +// Reverse layout for sidebar on right +.fluid-container.reverse .fluid-content { + margin-left: 0; + margin-right: 240px; } @@ -76,10 +84,9 @@ a { // GRID SYSTEM // ----------- // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there - .row { + margin-left: -@gridGutterWidth; .clearfix(); - margin-left: -1 * @gridGutterWidth; } // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) @@ -101,20 +108,6 @@ a { .span10 { .columns(10); } .span11 { .columns(11); } .span12 { .columns(12); } -.span13 { .columns(13); } -.span14 { .columns(14); } -.span15 { .columns(15); } -.span16 { .columns(16); } - -// For optional 24-column grid -.span17 { .columns(17); } -.span18 { .columns(18); } -.span19 { .columns(19); } -.span20 { .columns(20); } -.span21 { .columns(21); } -.span22 { .columns(22); } -.span23 { .columns(23); } -.span24 { .columns(24); } // Offset column options .offset1 { .offset(1); } @@ -128,10 +121,3 @@ a { .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } -.offset12 { .offset(12); } - -// Unique column sizes for 16-column grid -.span-one-third { width: 300px; } -.span-two-thirds { width: 620px; } -.offset-one-third { margin-left: 340px; } -.offset-two-thirds { margin-left: 660px; } diff --git a/lib/type.less b/lib/type.less index 4232a24df..a490bf5fa 100644 --- a/lib/type.less +++ b/lib/type.less @@ -24,12 +24,12 @@ p { h1, h2, h3, h4, h5, h6 { font-weight: bold; color: @grayDark; + text-rendering: optimizelegibility; small { color: @grayLight; } } h1 { - margin-bottom: @baseLineHeight; font-size: 30px; line-height: @baseLineHeight * 2; small { @@ -40,11 +40,11 @@ h2 { font-size: 24px; line-height: @baseLineHeight * 2; small { - font-size: 14px; + font-size: 18px; } } h3 { - line-height: @baseLineHeight * 2; + line-height: @baseLineHeight * 1.5; font-size: 18px; small { font-size: 14px; @@ -74,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 0 0 @baseLineHeight 25px; + margin: 0 0 @baseLineHeight / 2 25px; } ul ul, ul ol, @@ -90,7 +90,7 @@ ol { } li { line-height: @baseLineHeight; - color: @gray; + color: @grayDark; } ul.unstyled { list-style: none; @@ -135,6 +135,14 @@ em { color: @grayLight; } +// Abbreviations and acronyms +abbr { + font-size: 90%; + text-transform: uppercase; + border-bottom: 1px dotted #ddd; + cursor: help; +} + // Blockquotes blockquote { margin-bottom: @baseLineHeight; diff --git a/lib/variables.less b/lib/variables.less index 864dbe8c0..92d09de70 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -38,29 +38,12 @@ // ---- // Modify the grid styles in mixins.less -@gridColumns: 16; -@gridColumnWidth: 40px; +@gridColumns: 12; +@gridColumnWidth: 60px; @gridGutterWidth: 20px; -@extraSpace: (@gridGutterWidth * 2); // For our grid calculations @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -// COLOR SCHEME -// ------------ - -// Use this to roll your own color schemes if you like (unused by Bootstrap by default) -@baseColor: @blue; // Set a base color -@complement: spin(@baseColor, 180); // Determine a complementary color -@split1: spin(@baseColor, 158); // Split complements -@split2: spin(@baseColor, -158); -@triad1: spin(@baseColor, 135); // Triads colors -@triad2: spin(@baseColor, -135); -@tetra1: spin(@baseColor, 90); // Tetra colors -@tetra2: spin(@baseColor, -90); -@analog1: spin(@baseColor, 22); // Analogs colors -@analog2: spin(@baseColor, -22); - - // THEME VARIABLES // --------------- |