diff options
| author | fat <[email protected]> | 2013-05-16 11:08:46 -0700 |
|---|---|---|
| committer | fat <[email protected]> | 2013-05-16 11:08:46 -0700 |
| commit | a4c16155a21c7bcad9b1d52e2141425cdb7df494 (patch) | |
| tree | 490759c71a56d0b54fb46d5ae56851074a31a992 /less | |
| parent | 14651035deda4d02a1ca02c6088c34f770f897f6 (diff) | |
| parent | f3d857773455a940fca0c8d2ef1ca26982700031 (diff) | |
| download | bootstrap-a4c16155a21c7bcad9b1d52e2141425cdb7df494.tar.xz bootstrap-a4c16155a21c7bcad9b1d52e2141425cdb7df494.zip | |
Merge branch '3.0.0-wip' of github.com:twitter/bootstrap into 3.0.0-wip
Conflicts:
Makefile
docs/_site/assets/js/bootstrap-typeahead.js
docs/assets/js/bootstrap.min.js
docs/customize.html
docs/docs.html
Diffstat (limited to 'less')
| -rw-r--r-- | less/accordion.less | 2 | ||||
| -rw-r--r-- | less/alerts.less | 8 | ||||
| -rw-r--r-- | less/breadcrumbs.less | 2 | ||||
| -rw-r--r-- | less/button-groups.less | 67 | ||||
| -rw-r--r-- | less/buttons.less | 12 | ||||
| -rw-r--r-- | less/code.less | 6 | ||||
| -rw-r--r-- | less/dropdowns.less | 27 | ||||
| -rw-r--r-- | less/forms.less | 228 | ||||
| -rw-r--r-- | less/glyphicons.less | 1 | ||||
| -rw-r--r-- | less/mixins.less | 5 | ||||
| -rw-r--r-- | less/navbar.less | 54 | ||||
| -rw-r--r-- | less/navs.less | 96 | ||||
| -rw-r--r-- | less/pager.less | 2 | ||||
| -rw-r--r-- | less/pagination.less | 29 | ||||
| -rw-r--r-- | less/panels.less | 10 | ||||
| -rw-r--r-- | less/print.less | 4 | ||||
| -rw-r--r-- | less/progress-bars.less | 5 | ||||
| -rw-r--r-- | less/responsive-utilities.less | 40 | ||||
| -rw-r--r-- | less/scaffolding.less | 8 | ||||
| -rw-r--r-- | less/tables.less | 2 | ||||
| -rw-r--r-- | less/type.less | 53 | ||||
| -rw-r--r-- | less/variables.less | 39 |
22 files changed, 264 insertions, 436 deletions
diff --git a/less/accordion.less b/less/accordion.less index 064377d05..59765f154 100644 --- a/less/accordion.less +++ b/less/accordion.less @@ -5,7 +5,7 @@ // Parent container .accordion { - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; } // Group == heading + body diff --git a/less/alerts.less b/less/alerts.less index 882b25bef..bb7846249 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -7,8 +7,8 @@ // ------------------------- .alert { - padding: 8px 35px 8px 14px; - margin-bottom: @line-height-base; + padding: 10px 35px 10px 15px; + margin-bottom: @line-height-computed; color: @alert-text; background-color: @alert-bg; border: 1px solid @alert-border; @@ -84,8 +84,8 @@ // ------------------------- .alert-block { - padding-top: 14px; - padding-bottom: 14px; + padding-top: 15px; + padding-bottom: 15px; } .alert-block > p, .alert-block > ul { diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less index 87a6f0e37..2fe8217a3 100644 --- a/less/breadcrumbs.less +++ b/less/breadcrumbs.less @@ -5,7 +5,7 @@ .breadcrumb { padding: 8px 15px; - margin: 0 0 @line-height-base; + margin: 0 0 @line-height-computed; list-style: none; background-color: #f5f5f5; border-radius: @border-radius-base; diff --git a/less/button-groups.less b/less/button-groups.less index 6f9a52acd..f7934a328 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -11,17 +11,14 @@ } // Make the div behave like a button -.btn-group { +.btn-group, +.btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; // match .btn alignment given font-size hack above > .btn { position: relative; float: left; - // Prevent double borders when buttons are next to each other - + btn { - margin-left: -1px; - } // Bring the "active" button to the front &:hover, &:active { @@ -30,6 +27,11 @@ } } +// Prevent double borders when buttons are next to each other +.btn-group .btn + .btn { + margin-left: -1px; +} + // Optional: Group multiple button groups together for a toolbar .btn-toolbar { .clearfix(); @@ -46,46 +48,36 @@ } } -// Float them, remove border radius, then re-add to first and last elements -.btn-group > .btn { - position: relative; +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { 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 .btn-group > .btn:first-child { margin-left: 0; - .border-left-radius(@border-radius-base); + &:not(:last-child):not(.dropdown-toggle) { + .border-right-radius(0); + } } // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it -.btn-group > .btn:last-child, -.btn-group > .dropdown-toggle { - .border-right-radius(@border-radius-base); -} -// Reset corners for large buttons -.btn-group > .btn.large:first-child { - margin-left: 0; - .border-left-radius(@border-radius-large); -} -.btn-group > .btn.large:last-child, -.btn-group > .large.dropdown-toggle { - .border-right-radius(@border-radius-large); +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + .border-left-radius(0); } // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) .btn-group > .btn-group { float: left; } -.btn-group > .btn-group > .btn { +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } -.btn-group > .btn-group:last-child > .btn { - .border-right-radius(@border-radius-base); +.btn-group > .btn-group:first-child > .btn:last-child, +.btn-group > .btn-group:first-child > .dropdown-toggle { + .border-right-radius(0); } -.btn-group > .btn-group:first-child > .btn { - margin-left: 0; - .border-left-radius(@border-radius-base); +.btn-group > .btn-group:last-child > .btn:first-child { + .border-left-radius(0); } // On active and open, don't show outline @@ -122,7 +114,6 @@ // Reposition the caret .btn .caret { - margin-top: 8px; margin-left: 0; } // Carets in other button sizes @@ -143,20 +134,18 @@ float: none; width: 100%; max-width: 100%; + + .btn { + margin-top: -1px; + } +} +.btn-group-vertical .btn:not(:first-child):not(:last-child) { + border-radius: 0; } .btn-group-vertical .btn:first-child { - border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again - .border-top-radius(@border-radius-base); + .border-bottom-radius(0); } .btn-group-vertical .btn:last-child { - border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again - .border-bottom-radius(@border-radius-base); -} -.btn-group-vertical .btn-large:first-child { - .border-top-radius(@border-radius-large); -} -.btn-group-vertical .btn-large:last-child { - .border-bottom-radius(@border-radius-large); + .border-top-radius(0); } diff --git a/less/buttons.less b/less/buttons.less index 128971a4c..6280d3448 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -9,7 +9,7 @@ // Core styles .btn { display: inline-block; - padding: 6px 12px; + padding: @padding-base-vertical @padding-base-horizontal; margin-bottom: 0; // For input.btn font-size: @font-size-base; font-weight: 500; @@ -123,18 +123,14 @@ fieldset[disabled] .btn-link { // -------------------------------------------------- .btn-large { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; } .btn-small { - padding: @padding-small; + padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; - border-radius: @border-radius-small; -} -.btn-mini { - padding: @padding-mini; - font-size: @font-size-mini; + line-height: 1.5; // ensure proper height of button next to small input border-radius: @border-radius-small; } diff --git a/less/code.less b/less/code.less index d9ddbc3a4..f1bc0a0cd 100644 --- a/less/code.less +++ b/less/code.less @@ -25,8 +25,8 @@ code { // Blocks of code pre { display: block; - padding: ((@line-height-base - 1) / 2); - margin: 0 0 (@line-height-base / 2); + padding: ((@line-height-computed - 1) / 2); + margin: 0 0 (@line-height-computed / 2); font-size: (@font-size-base - 1); // 14px to 13px line-height: @line-height-base; word-break: break-all; @@ -40,7 +40,7 @@ pre { // Make prettyprint styles more spaced out for readability &.prettyprint { - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; } // Account for some code outputs that place code tags in pre tags diff --git a/less/dropdowns.less b/less/dropdowns.less index c4fd8598b..1b9165b4e 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -3,35 +3,20 @@ // -------------------------------------------------- -// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns -.dropup, -.dropdown { - position: relative; -} -.dropdown-toggle:active, -.open .dropdown-toggle { - outline: 0; -} - // Dropdown arrow/caret // -------------------- .caret { display: inline-block; width: 0; height: 0; - vertical-align: top; + margin-left: 2px; + vertical-align: middle; border-top: 4px solid #000; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } -// Place the caret -.dropdown .caret { - margin-top: 8px; - margin-left: 2px; -} - // The dropdown menu (ul) // ---------------------- .dropdown-menu { @@ -118,9 +103,15 @@ // Open state for the dropdown // --------------------------- .open { - & > .dropdown-menu { + // Show the menu + > .dropdown-menu { display: block; } + + // Remove the outline when :focus is triggered + > a { + outline: 0; + } } // Right aligned dropdowns diff --git a/less/forms.less b/less/forms.less index 6162cd4f1..2c696945d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -20,9 +20,9 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; font-size: (@font-size-base * 1.5); - line-height: (@line-height-base * 2); + line-height: inherit; color: @gray-dark; border: 0; border-bottom: 1px solid #e5e5e5; @@ -56,8 +56,7 @@ input[type="tel"], input[type="color"] { display: block; min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) - padding: 6px 9px; - margin-bottom: 10px; + padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-base; line-height: @line-height-base; color: @gray; @@ -66,7 +65,13 @@ input[type="color"] { border: 1px solid @input-border; border-radius: @input-border-radius; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border-color linear .2s, box-shadow linear .2s"); + .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); + + &:focus { + border-color: rgba(82,168,236,.8); + outline: 0; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); + } } // Reset appearance properties for textual inputs and textarea @@ -98,32 +103,6 @@ textarea { height: auto; } -// Everything else -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"] { - // Focus state - &:focus { - border-color: rgba(82,168,236,.8); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ - //.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - .box-shadow(0 0 8px rgba(82,168,236,.6)); - } -} - // Position radios and checkboxes better input[type="radio"], input[type="checkbox"] { @@ -146,7 +125,6 @@ select[size] { } // Focus for select, file, radio, and checkbox -select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { @@ -171,8 +149,9 @@ textarea { .radio, .checkbox { display: block; - min-height: @line-height-base; // clear the floating input if there is no label text - margin-bottom: (@line-height-base / 2); + min-height: @line-height-computed; // clear the floating input if there is no label text + margin-top: 10px; + margin-bottom: 10px; padding-left: 20px; vertical-align: middle; label { @@ -182,7 +161,6 @@ textarea { cursor: pointer; } } - .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], @@ -192,7 +170,7 @@ textarea { } .radio + .radio, .checkbox + .checkbox { - margin-top: ((@line-height-base / 4) * -1); + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing } /* @@ -242,46 +220,19 @@ input[type="search"], input[type="tel"], input[type="color"] { &.input-large { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; } &.input-small { min-height: @input-height-small; - padding: @padding-small; + padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; border-radius: @border-radius-small; } } - -// GRID SIZING FOR INPUTS -// ---------------------- - -// Grid style input sizes -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - float: none; - margin-left: 0; - margin-right: 0; -} - -// Ensure input-prepend/append never wraps -.input-append input[class*="span"], -.input-prepend input[class*="span"] { - display: inline-block; -} - -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - height: @input-height-base; -} - - - // DISABLED STATE // -------------- @@ -348,9 +299,9 @@ select:focus:invalid { // ------------ .form-actions { - padding: (@line-height-base - 1) 20px @line-height-base; - margin-top: @line-height-base; - margin-bottom: @line-height-base; + padding: @line-height-computed 20px; + margin-top: @line-height-computed; + margin-bottom: @line-height-computed; background-color: @form-actions-bg; border-top: 1px solid #e5e5e5; .clearfix(); // Adding clearfix to allow for .pull-right button containers @@ -361,20 +312,11 @@ select:focus:invalid { // HELP TEXT // --------- -.help-block, -.help-inline { - color: lighten(@text-color, 25%); // lighten the text some for contrast -} - .help-block { display: block; // account for any element using help-block - margin-bottom: (@line-height-base / 2); -} - -.help-inline { - display: inline-block; - vertical-align: middle; - padding-left: 5px; + margin-top: 5px; + margin-bottom: 10px; + color: lighten(@text-color, 25%); // lighten the text some for contrast } @@ -407,12 +349,8 @@ select:focus:invalid { .input-group-btn, .input-group input { display: table-cell; - /*margin: 0;*/ - border-radius: 0; - &.input-small { - border-radius: 0; - } - &.input-large { + + &:not(:first-child):not(:last-child) { border-radius: 0; } } @@ -435,40 +373,37 @@ select:focus:invalid { text-shadow: 0 1px 0 #fff; background-color: @gray-lighter; border: 1px solid #ccc; + border-radius: @border-radius-base; - &.input-small { - padding: @padding-small; - font-size: @font-size-small; + &.input-small { + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + border-radius: @border-radius-small; + } + &.input-large { + padding: @padding-large-vertical @padding-large-horizontal; + font-size: @font-size-large; + border-radius: @border-radius-large; } - &.input-large { - padding: @padding-large; - font-size: @font-size-large; - } } // Reset rounded corners .input-group input:first-child, -.input-group-addon:first-child { - .border-left-radius(@border-radius-base); - &.input-small { - .border-left-radius(@border-radius-small); - } - &.input-large { - .border-left-radius(@border-radius-large); - } +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { + .border-right-radius(0); } .input-group-addon:first-child { border-right: 0; } .input-group input:last-child, -.input-group-addon:last-child { - .border-right-radius(@border-radius-base); - &.input-small { - .border-right-radius(@border-radius-small); - } - &.input-large { - .border-right-radius(@border-radius-large); - } +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child) { + .border-left-radius(0); } .input-group-addon:last-child { border-left: 0; @@ -483,7 +418,6 @@ select:focus:invalid { .input-group-btn > .btn { position: relative; float: left; // Collapse white-space - border-radius: 0; + .btn { margin-left: -1px; } @@ -494,29 +428,6 @@ select:focus:invalid { } } -// Prepended buttons -.input-group-btn:first-child { - // Round the left corners only - > .btn:first-child, - > .dropdown-toggle:first-child { - .border-left-radius(@border-radius-base); - &.btn-large { .border-left-radius(@border-radius-large); } - &.btn-small { .border-left-radius(@border-radius-small); } - } -} - -// Appended buttons -.input-group-btn:last-child { - // Round the right corners only - > .btn:last-child, - > .dropdown-toggle { - .border-right-radius(@border-radius-base); - &.btn-large { .border-right-radius(@border-radius-large); } - &.btn-small { .border-right-radius(@border-radius-small); } - } -} - - // Inline forms // -------------------------------------------------- @@ -528,6 +439,10 @@ select:focus:invalid { .radio, .checkbox { display: inline-block; + } + .radio, + .checkbox { + margin-top: 0; margin-bottom: 0; } } @@ -535,41 +450,20 @@ select:focus:invalid { // Horizontal forms // -------------------------------------------------- +// Horizontal forms are built on grid classes. -@media screen and (min-width: @screen-tablet) { - - .form-horizontal { - - // Increase spacing between groups - .control-group { - position: relative; - margin-bottom: @line-height-base; - .clearfix(); - - input, - select, - textarea { - margin-bottom: 0; - } - } - - // Float the labels left - .control-group > .control-label { - float: left; - width: (@component-offset-horizontal - 20); - padding-top: 6px; - text-align: right; - } - - // Move over all input controls and content over - .control-group > .controls { - margin-left: @component-offset-horizontal; - } - - // Make sure form actions buttons are aligned with controls - .form-actions { - padding-left: @component-offset-horizontal; - } +.form-horizontal { + .row + .row { + margin-top: 15px; + } + .row-label { + padding-top: 6px; + } +} +// Only right aline form labels here when the columns stop stacking +@media (min-width: 768px) { + .form-horizontal .row-label { + text-align: right; } } diff --git a/less/glyphicons.less b/less/glyphicons.less index e8a96c05f..0d935ea19 100644 --- a/less/glyphicons.less +++ b/less/glyphicons.less @@ -34,6 +34,7 @@ font-style: normal; font-weight: normal; line-height: 1; + -webkit-font-smoothing: antialiased; } // Individual icons diff --git a/less/mixins.less b/less/mixins.less index 48e2073c5..dcba39f85 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -340,7 +340,7 @@ // Dividers (basically an hr) within dropdowns and nav lists .nav-divider(@top: #e5e5e5, @bottom: #fff) { height: 2px; // 1px for background, one for border - margin: ((@line-height-base / 2) - 1) 0; + margin: ((@line-height-computed / 2) - 1) 0; overflow: hidden; background-color: @top; border-bottom: 1px solid @bottom; @@ -444,9 +444,6 @@ } } - - - // Small grid columns .generate-grid-columns(@grid-columns) { diff --git a/less/navbar.less b/less/navbar.less index 494f43b6f..13a36781e 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -21,13 +21,15 @@ .navbar-nav { // Space out from .navbar .brand and .btn-navbar when stacked in mobile views // and outdent nav links so text lines up with logo. - margin: 10px -15px 0; + margin-top: 10px; + margin-bottom: 15px; > li > a { - padding-top: ((@navbar-height - @line-height-base) / 2); - padding-bottom: ((@navbar-height - @line-height-base) / 2); + padding-top: ((@navbar-height - @line-height-computed) / 2); + padding-bottom: ((@navbar-height - @line-height-computed) / 2); color: @navbar-link-color; line-height: 20px; + border-radius: @border-radius-base; } > li > a:hover, > li > a:focus { @@ -91,7 +93,7 @@ padding: 15px; font-size: @font-size-large; font-weight: 500; - line-height: @line-height-base; + line-height: @line-height-computed; color: @navbar-brand-color; text-align: center; &:hover, @@ -132,6 +134,7 @@ // Navbar form .navbar-form { + .form-inline(); .navbar-vertical-align(34px); // Vertically center in navbar } @@ -152,26 +155,26 @@ // Dropdown menu items and carets .navbar-nav { // Caret should match text color on hover - li.dropdown > a:hover .caret, - li.dropdown > a:focus .caret { + > .dropdown > a:hover .caret, + > .dropdown > a:focus .caret { border-top-color: @navbar-link-hover-color; border-bottom-color: @navbar-link-hover-color; } // Remove background color from open dropdown - li.dropdown.open > .dropdown-toggle, - li.dropdown.active > .dropdown-toggle, - li.dropdown.open.active > .dropdown-toggle { + > .open > a, + > .open > a:hover, + > .open > a:focus { background-color: @navbar-link-active-bg; color: @navbar-link-active-color; } - li.dropdown > .dropdown-toggle .caret { + > .dropdown > a .caret { border-top-color: @navbar-link-color; border-bottom-color: @navbar-link-color; } - li.dropdown.open > .dropdown-toggle .caret, - li.dropdown.active > .dropdown-toggle .caret, - li.dropdown.open.active > .dropdown-toggle .caret { + > .open > a .caret, + > .open > a:hover .caret, + > .open > a:focus .caret { border-top-color: @navbar-link-active-color; border-bottom-color: @navbar-link-active-color; } @@ -242,23 +245,23 @@ // Dropdowns .navbar-nav { - li.dropdown.open > .dropdown-toggle, - li.dropdown.active > .dropdown-toggle, - li.dropdown.open.active > .dropdown-toggle { + > .open > a, + > .open > a:hover, + > .open > a:focus { background-color: @navbar-inverse-link-active-bg; color: @navbar-inverse-link-active-color; } - li.dropdown > a:hover .caret { + > .dropdown > a:hover .caret { border-top-color: @navbar-inverse-link-hover-color; border-bottom-color: @navbar-inverse-link-hover-color; } - li.dropdown > .dropdown-toggle .caret { + > .dropdown > a .caret { border-top-color: @navbar-inverse-link-color; border-bottom-color: @navbar-inverse-link-color; } - li.dropdown.open > .dropdown-toggle .caret, - li.dropdown.active > .dropdown-toggle .caret, - li.dropdown.open.active > .dropdown-toggle .caret { + > .open > a .caret, + > .open > a:hover .caret, + > .open > a:focus .caret { border-top-color: @navbar-inverse-link-active-color; border-bottom-color: @navbar-inverse-link-active-color; } @@ -280,10 +283,15 @@ } .navbar .nav { float: left; - margin-top: 0; // undo top margin to make nav extend full height of navbar + // undo margin to make nav extend full height of navbar + margin-top: 0; + margin-bottom: 0; > li { float: left; + > a { + border-radius: 0; + } } &.pull-right { @@ -322,7 +330,7 @@ // Add a class to make any element properly align itself vertically within the navbars. .navbar-text { - + .navbar-vertical-align(@line-height-computed); } diff --git a/less/navs.less b/less/navs.less index 8daeb6fd9..e5925bf63 100644 --- a/less/navs.less +++ b/less/navs.less @@ -12,8 +12,11 @@ padding-left: 0; // Override default ul/ol list-style: none; .clearfix(); + > li { + position: relative; display: block; + > a { position: relative; display: block; @@ -25,17 +28,10 @@ } } - // Nav states and addons - // -------------------------------------------------- - - // Disabled state - // ------------------------- - - // Gray out text + // Disabled state sets text to gray and nukes hover/tab effects &.disabled > a { color: @gray-light; } - // Nuke hover effects &.disabled > a:hover, &.disabled > a:focus { color: @gray-light; @@ -43,12 +39,26 @@ background-color: transparent; cursor: default; } + // Space the headers out when they follow another list item (link) - &+ .nav-header { + + .nav-header { margin-top: 9px; } } + // Open dropdowns + &.open > a, + &.open > a:hover, + &.open > a:focus { + color: #fff; + background-color: @link-color; + border-color: @link-color; + .caret { + border-top-color: #fff; + border-bottom-color: #fff; + } + } + // Redeclare pull classes because of specifity // Todo: consider making these utilities !important to avoid this bullshit > .pull-right { @@ -56,7 +66,7 @@ } // Dividers (basically an hr) within the dropdown - .divider { + .nav-divider { .nav-divider(); } } @@ -215,71 +225,23 @@ -/* -// Prevent IE8 from misplacing imgs -// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 -.nav > li > a > img { - max-width: none; -} - // Dropdowns // ------------------------- -.nav-tabs .dropdown-menu { - // Remove the top rounded corners here since there is a hard edge above the menu - .border-top-radius(0); -} - -// Default dropdown links -// ------------------------- -// Make carets use linkColor to start -.nav .dropdown-toggle .caret { +// Make dropdown carets use link color in navs +.nav .caret { border-top-color: @link-color; border-bottom-color: @link-color; - margin-top: 8px; } -.nav .dropdown-toggle:hover .caret { +.nav a:hover .caret { border-top-color: @link-hover-color; border-bottom-color: @link-hover-color; } -// Active dropdown links -// ------------------------- -.nav .active .dropdown-toggle .caret { - border-top-color: #fff; - border-bottom-color: #fff; -} -.nav-tabs .active .dropdown-toggle .caret { - border-top-color: @gray; - border-bottom-color: @gray; -} - -// Active:hover dropdown links -// ------------------------- -.nav > .dropdown.active > a:hover { - cursor: pointer; -} - -// Open dropdowns -// ------------------------- -.nav-tabs .open .dropdown-toggle, -.nav-pills .open .dropdown-toggle, -.nav > li.dropdown.open.active > a:hover { - color: #fff; - background-color: @gray-light; - border-color: @gray-light; -} -.nav li.dropdown.open .caret, -.nav li.dropdown.open.active .caret, -.nav li.dropdown.open a:hover .caret { - border-top-color: #fff; - border-bottom-color: #fff; - .opacity(1); -} - -// Dropdowns in stacked tabs -.tabs-stacked .open > a:hover { - border-color: @gray-light; +// Specific dropdowns +.nav-tabs .dropdown-menu { + // make dropdown border overlap tab border + margin-top: -1px; + // Remove the top rounded corners here since there is a hard edge above the menu + .border-top-radius(0); } - -*/ diff --git a/less/pager.less b/less/pager.less index cc1947a91..0b2fcf7cb 100644 --- a/less/pager.less +++ b/less/pager.less @@ -4,7 +4,7 @@ .pager { - margin: @line-height-base 0; + margin: @line-height-computed 0; list-style: none; text-align: center; .clearfix(); diff --git a/less/pagination.less b/less/pagination.less index bb44fa8cf..73c063be0 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -3,7 +3,7 @@ // -------------------------------------------------- .pagination { display: inline-block; - margin: @line-height-base 0; + margin: @line-height-computed 0; border-radius: @border-radius-base; } .pagination > li { @@ -56,7 +56,7 @@ .pagination-large { > li > a, > li > span { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; } > li:first-child > a, @@ -69,9 +69,13 @@ } } -// Small and mini -.pagination-mini, +// Small .pagination-small { + > li > a, + > li > span { + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + } > li:first-child > a, > li:first-child > span { .border-left-radius(@border-radius-small); @@ -81,20 +85,3 @@ .border-right-radius(@border-radius-small); } } - -// Small -.pagination-small { - > li > a, - > li > span { - padding: @padding-small; - font-size: @font-size-small; - } -} -// Mini -.pagination-mini { - > li > a, - > li > span { - padding: @padding-mini; - font-size: @font-size-mini; - } -} diff --git a/less/panels.less b/less/panels.less index 0d5a07ad4..a08febef3 100644 --- a/less/panels.less +++ b/less/panels.less @@ -25,6 +25,16 @@ border-top-right-radius: (@panel-border-radius - 1); } +// Optional footer (stays gray in every modifier class) +.panel-footer { + margin: 15px -15px -15px; + padding: 10px 15px; + background-color: @panel-footer-bg; + border-top: 1px solid @panel-border; + border-bottom-left-radius: (@panel-border-radius - 1); + border-bottom-right-radius: (@panel-border-radius - 1); +} + // Contextual variations .panel-primary { border-color: @panel-primary-border; diff --git a/less/print.less b/less/print.less index db2749206..ec71acbbd 100644 --- a/less/print.less +++ b/less/print.less @@ -52,7 +52,7 @@ } @page { - margin: 0.5cm; + margin: 2cm .5cm; } p, @@ -68,7 +68,7 @@ } // Bootstrap components - .navbar-toggle { + .navbar { display: none; } } diff --git a/less/progress-bars.less b/less/progress-bars.less index e5e6b65a5..e963fa968 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -44,8 +44,8 @@ // Outer container .progress { overflow: hidden; - height: @line-height-base; - margin-bottom: @line-height-base; + height: @line-height-computed; + margin-bottom: @line-height-computed; background-color: @progress-bg; border-radius: @border-radius-base; .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); @@ -63,7 +63,6 @@ background-color: @progress-bar-bg; .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .transition(width .6s ease); - .backface-visibility(hidden); } // Striped bars diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index c69851bb9..09a0955f8 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -36,40 +36,40 @@ // Visibility utilities // For Phones -.visible-phone { display: inherit !important; } -.visible-tablet { display: none !important; } -.visible-desktop { display: none !important; } +.visible-sm { display: inherit !important; } +.visible-md { display: none !important; } +.visible-lg { display: none !important; } -.hidden-phone { display: none !important; } -.hidden-tablet { display: inherit !important; } -.hidden-desktop { display: inherit !important; } +.hidden-sm { display: none !important; } +.hidden-md { display: inherit !important; } +.hidden-lg { display: inherit !important; } // Tablets & small desktops only @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { - .visible-phone { display: none !important; } - .visible-tablet { display: inherit !important; } - .visible-desktop { display: none !important; } + .visible-sm { display: none !important; } + .visible-md { display: inherit !important; } + .visible-lg { display: none !important; } - .hidden-phone { display: inherit !important; } - .hidden-tablet { display: none !important; } - .hidden-desktop { display: inherit !important; } + .hidden-sm { display: inherit !important; } + .hidden-md { display: none !important; } + .hidden-lg { display: inherit !important; } } // For desktops @media (min-width: @screen-desktop) { - .visible-phone { display: none !important; } - .visible-tablet { display: none !important; } - .visible-desktop { display: inherit !important; } + .visible-sm { display: none !important; } + .visible-md { display: none !important; } + .visible-lg { display: inherit !important; } - .hidden-phone { display: inherit !important; } - .hidden-tablet { display: inherit !important; } - .hidden-desktop { display: none !important; } + .hidden-sm { display: inherit !important; } + .hidden-md { display: inherit !important; } + .hidden-lg { display: none !important; } } // Print utilities -.visible-print { display: none !important; } -.hidden-print { } +.visible-print { display: none !important; } +.hidden-print { } @media print { .visible-print { display: inherit !important; } diff --git a/less/scaffolding.less b/less/scaffolding.less index 6781a9582..8c6a5af6c 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -21,14 +21,6 @@ html { -webkit-tap-highlight-color: rgba(0,0,0,0); } -// Disable iOS/WinMobile font size changes -@media screen and (max-device-width: @screen-phone) { - html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - } -} - body { font-family: @font-family-base; font-size: @font-size-base; diff --git a/less/tables.less b/less/tables.less index 5c8fe82ad..fa5fd554b 100644 --- a/less/tables.less +++ b/less/tables.less @@ -17,7 +17,7 @@ th { .table { width: 100%; - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; // Cells thead > tr > th, tbody > tr > th, diff --git a/less/type.less b/less/type.less index f6b5eecd5..a95e5bff7 100644 --- a/less/type.less +++ b/less/type.less @@ -7,10 +7,10 @@ // ------------------------- p { - margin: 0 0 (@line-height-base / 2); + margin: 0 0 (@line-height-computed / 2); } .lead { - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; font-size: (@font-size-base * 1.5); font-weight: 200; line-height: 1.4; @@ -54,9 +54,8 @@ a.text-success:focus { color: darken(@state-success-text, 10%); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - font-family: @headings-font-family; font-weight: @headings-font-weight; - line-height: @line-height-base; + line-height: @headings-line-height; small { font-weight: normal; line-height: 1; @@ -67,30 +66,26 @@ h1, h2, h3, h4, h5, h6, h1, h2, h3 { - margin-top: @line-height-base; - margin-bottom: (@line-height-base / 2); - line-height: (@line-height-base * 2); -} -h3 { - line-height: (@line-height-base * 1.5); + margin-top: @line-height-computed; + margin-bottom: (@line-height-computed / 2); } h4, h5, h6 { - margin-top: (@line-height-base / 2); - margin-bottom: (@line-height-base / 2); + margin-top: (@line-height-computed / 2); + margin-bottom: (@line-height-computed / 2); } -h1, .h1 { font-size: (@font-size-base * 2.75); } // ~38px -h2, .h2 { font-size: (@font-size-base * 2.25); } // ~32px -h3, .h3 { font-size: (@font-size-base * 1.75); } // ~24px -h4, .h4 { font-size: (@font-size-base * 1.25); } // ~18px +h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px +h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px +h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px +h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px h5, .h5 { font-size: @font-size-base; } -h6, .h6 { font-size: (@font-size-base * 0.85); } // ~12px +h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px -h1 small, .h1 small { font-size: (@font-size-base * 1.75); } // ~24px -h2 small, .h2 small { font-size: (@font-size-base * 1.25); } // ~18px -h3 small, .h3 small { font-size: @font-size-base; } +h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px +h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px +h3 small, .h3 small, h4 small, .h4 small { font-size: @font-size-base; } @@ -98,8 +93,8 @@ h4 small, .h4 small { font-size: @font-size-base; } // ------------------------- .page-header { - padding-bottom: ((@line-height-base / 2) - 1); - margin: (@line-height-base * 2) 0 @line-height-base; + padding-bottom: ((@line-height-computed / 2) - 1); + margin: (@line-height-computed * 2) 0 @line-height-computed; border-bottom: 1px solid @gray-lighter; } @@ -112,7 +107,7 @@ h4 small, .h4 small { font-size: @font-size-base; } ul, ol { padding: 0; - margin: 0 0 (@line-height-base / 2) 25px; + margin: 0 0 (@line-height-computed / 2) 25px; } ul ul, ul ol, @@ -143,7 +138,7 @@ li { // Description Lists dl { - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; } dt, dd { @@ -153,7 +148,7 @@ dt { font-weight: bold; } dd { - margin-left: (@line-height-base / 2); + margin-left: (@line-height-computed / 2); } // Horizontal layout (like forms) .dl-horizontal { @@ -175,7 +170,7 @@ dd { // Horizontal rules hr { - margin: @line-height-base 0; + margin: @line-height-computed 0; border: 0; border-top: 1px solid @hr-border; border-bottom: 1px solid #fff; @@ -196,8 +191,8 @@ abbr.initialism { // Blockquotes blockquote { - padding: (@line-height-base/2) @line-height-base; - margin: 0 0 @line-height-base; + padding: (@line-height-computed / 2) @line-height-computed; + margin: 0 0 @line-height-computed; border-left: 5px solid @gray-lighter; p { font-size: (@font-size-base * 1.25); @@ -249,7 +244,7 @@ blockquote:after { // Addresses address { display: block; - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; font-style: normal; line-height: @line-height-base; } diff --git a/less/variables.less b/less/variables.less index fd69c2438..9cd8f830b 100644 --- a/less/variables.less +++ b/less/variables.less @@ -46,27 +46,33 @@ @font-family-base: @font-family-sans-serif; @font-size-base: 14px; -@font-size-large: (@font-size-base * 1.25); // ~18px -@font-size-small: (@font-size-base * 0.85); // ~12px -@font-size-mini: (@font-size-base * 0.75); // ~11px +@font-size-large: ceil(@font-size-base * 1.25); // ~18px +@font-size-small: ceil(@font-size-base * 0.85); // ~12px +@font-size-mini: ceil(@font-size-base * 0.75); // ~11px -@line-height-base: 20px; +@line-height-base: 1.428571429; // 20/14 +@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px -@headings-font-family: inherit; // empty to use BS default, @font-family-base @headings-font-weight: 500; +@headings-line-height: 1.1; // Components // ------------------------- -// Based on 14px font-size and 1.5 line-height +// Based on 14px font-size and 1.428 line-height (~20px to start) -@padding-large: 11px 14px; // 44px -@padding-small: 2px 10px; // 26px -@padding-mini: 0 6px; // 22px +@padding-base-vertical: 8px; +@padding-base-horizontal: 12px; -@border-radius-base: 4px; -@border-radius-large: 6px; -@border-radius-small: 3px; +@padding-large-vertical: 14px; +@padding-large-horizontal: 16px; + +@padding-small-vertical: 5px; +@padding-small-horizontal: 10px; + +@border-radius-base: 4px; +@border-radius-large: 6px; +@border-radius-small: 3px; @component-active-bg: @brand-primary; @@ -121,11 +127,11 @@ @input-color-placeholder: @gray-light; -@input-height-base: (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border -@input-height-large: (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border -@input-height-small: (@line-height-base + 6px); // base line-height + 4px vertical padding + 2px top/bottom border +@input-height-base: (@line-height-computed + (@padding-base-vertical * 2)); +@input-height-large: (@line-height-computed + (@padding-large-vertical * 2)); +@input-height-small: (@line-height-computed + (@padding-small-vertical * 2)); -@form-actions-bg: #f5f5f5; +@form-actions-bg: #f5f5f5; // Dropdowns @@ -329,6 +335,7 @@ @panel-border: #ddd; @panel-border-radius: @border-radius-base; @panel-heading-bg: #f5f5f5; +@panel-footer-bg: #f5f5f5; @panel-primary-text: #fff; @panel-primary-border: @brand-primary; |
