diff options
| author | Mark Otto <[email protected]> | 2013-08-06 18:29:54 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-06 18:29:54 -0700 |
| commit | 402dbfb6171e18aa44e19429e796169f02b0adf7 (patch) | |
| tree | aeb0cef7cc1b04988307a0ef79b07fbe2d7d197c /less | |
| parent | 7e19b6b02ccd5417a6c2d3d418c08219773f1112 (diff) | |
| parent | 41bdd1a4823feb8b46b2fccfeec3e9c5057a0665 (diff) | |
| download | bootstrap-402dbfb6171e18aa44e19429e796169f02b0adf7.tar.xz bootstrap-402dbfb6171e18aa44e19429e796169f02b0adf7.zip | |
Merge branch '3.0.0-wip' into bs3_theme
Conflicts:
dist/css/bootstrap.min.css
Diffstat (limited to 'less')
| -rw-r--r-- | less/alerts.less | 35 | ||||
| -rw-r--r-- | less/badges.less | 6 | ||||
| -rw-r--r-- | less/button-groups.less | 51 | ||||
| -rw-r--r-- | less/buttons.less | 29 | ||||
| -rw-r--r-- | less/carousel.less | 17 | ||||
| -rw-r--r-- | less/close.less | 2 | ||||
| -rw-r--r-- | less/dropdowns.less | 14 | ||||
| -rw-r--r-- | less/forms.less | 92 | ||||
| -rw-r--r-- | less/grid.less | 110 | ||||
| -rw-r--r-- | less/input-groups.less | 47 | ||||
| -rw-r--r-- | less/labels.less | 7 | ||||
| -rw-r--r-- | less/list-group.less | 3 | ||||
| -rw-r--r-- | less/mixins.less | 88 | ||||
| -rw-r--r-- | less/modals.less | 4 | ||||
| -rw-r--r-- | less/navbar.less | 54 | ||||
| -rw-r--r-- | less/navs.less | 73 | ||||
| -rw-r--r-- | less/pagination.less | 6 | ||||
| -rw-r--r-- | less/panels.less | 39 | ||||
| -rw-r--r-- | less/progress-bars.less | 8 | ||||
| -rw-r--r-- | less/tables.less | 2 | ||||
| -rw-r--r-- | less/tooltip.less | 2 | ||||
| -rw-r--r-- | less/type.less | 32 | ||||
| -rw-r--r-- | less/utilities.less | 4 | ||||
| -rw-r--r-- | less/variables.less | 83 | ||||
| -rw-r--r-- | less/wells.less | 4 |
25 files changed, 490 insertions, 322 deletions
diff --git a/less/alerts.less b/less/alerts.less index 66aa6cf24..d40519c73 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -7,7 +7,7 @@ // ------------------------- .alert { - padding: 10px 35px 10px 15px; + padding: @alert-padding (@alert-padding + 20) @alert-padding @alert-padding; margin-bottom: @line-height-computed; color: @alert-text; background-color: @alert-bg; @@ -26,7 +26,7 @@ } // Provide class for links that match alerts .alert-link { - font-weight: 500; + font-weight: @alert-link-font-weight; color: darken(@alert-text, 10%); } @@ -37,33 +37,26 @@ right: -21px; color: inherit; } + + // Improve alignment and spacing of inner content + > p, + > ul { + margin-bottom: 0; + } + > p + p { + margin-top: 5px; + } } // Alternate styles // ------------------------- .alert-success { - .alert-variant(@alert-success-bg, @alert-success-border, @alert-success-text); + .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); } .alert-danger { - .alert-variant(@alert-danger-bg, @alert-danger-border, @alert-danger-text); + .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); } .alert-info { - .alert-variant(@alert-info-bg, @alert-info-border, @alert-info-text); -} - -// Block alerts -// ------------------------- - -.alert-block { - padding-top: 15px; - padding-bottom: 15px; - - > p, - > ul { - margin-bottom: 0; - } - p + p { - margin-top: 5px; - } + .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); } diff --git a/less/badges.less b/less/badges.less index 06f402925..a87e556cb 100644 --- a/less/badges.less +++ b/less/badges.less @@ -9,14 +9,14 @@ min-width: 10px; padding: 3px 7px; font-size: @font-size-small; - font-weight: bold; + font-weight: @badge-font-weight; color: @badge-color; - line-height: 1; + line-height: @badge-line-height; vertical-align: baseline; white-space: nowrap; text-align: center; background-color: @badge-bg; - border-radius: 10px; + border-radius: @badge-border-radius; // Empty labels/badges collapse &:empty { diff --git a/less/button-groups.less b/less/button-groups.less index d78815c93..3ae18e92f 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -3,11 +3,32 @@ // -------------------------------------------------- // Button carets -.btn .caret { - border-top-color: @btn-default-color; +// +// Match the button text color to the arrow/caret for indicating dropdown-ness. + +.caret { + .btn-default & { + border-top-color: @btn-default-color; + } + .btn-primary &, + .btn-success &, + .btn-warning &, + .btn-danger &, + .btn-info & { + border-top-color: #fff; + } } -.dropup .btn .caret { - border-bottom-color: @btn-default-color; +.dropup .caret { + .btn-default & { + border-bottom-color: @btn-default-color; + } + .btn-primary &, + .btn-success &, + .btn-warning &, + .btn-danger &, + .btn-info & { + border-bottom-color: #fff; + } } // Make the div behave like a button @@ -22,9 +43,14 @@ // Bring the "active" button to the front &:hover, &:focus, - &:active { + &:active, + &.active { z-index: 2; } + &:focus { + // Remove focus outline when dropdown JS adds it after closing the menu + outline: none; + } } } @@ -100,7 +126,7 @@ padding-left: 8px; padding-right: 8px; } -.btn-group > .btn-large + .dropdown-toggle { +.btn-group > .btn-lg + .dropdown-toggle { padding-left: 12px; padding-right: 12px; } @@ -117,12 +143,12 @@ margin-left: 0; } // Carets in other button sizes -.btn-large .caret { - border-width: 5px; +.btn-lg .caret { + border-width: @caret-width-large; } // Upside down carets for .dropup -.dropup .btn-large .caret { - border-bottom-width: 5px; +.dropup .btn-lg .caret { + border-bottom-width: @caret-width-large; } @@ -142,10 +168,10 @@ &:not(:first-child):not(:last-child) { border-radius: 0; } - &:first-child { + &:first-child:not(:last-child) { .border-bottom-radius(0); } - &:last-child { + &:last-child:not(:first-child) { .border-top-radius(0); } } @@ -157,6 +183,7 @@ .btn-group-justified { display: table; width: 100%; + table-layout: fixed; .btn { float: none; display: table-cell; diff --git a/less/buttons.less b/less/buttons.less index 24ff6549e..8dc05e824 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -12,7 +12,7 @@ padding: @padding-base-vertical @padding-base-horizontal; margin-bottom: 0; // For input.btn font-size: @font-size-base; - font-weight: 500; + font-weight: @btn-font-weight; line-height: @line-height-base; text-align: center; vertical-align: middle; @@ -28,7 +28,7 @@ &:hover, &:focus { - color: @btn-hover-color; + color: @btn-default-color; text-decoration: none; } @@ -54,26 +54,26 @@ // -------------------------------------------------- .btn-default { - .btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border); + .btn-pseudo-states(@btn-default-color; @btn-default-bg; @btn-default-border); } .btn-primary { - .btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border); + .btn-pseudo-states(@btn-primary-color; @btn-primary-bg; @btn-primary-border); } // Warning appears as orange .btn-warning { - .btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border); + .btn-pseudo-states(@btn-warning-color; @btn-warning-bg; @btn-warning-border); } // Danger and error appear as red .btn-danger { - .btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border); + .btn-pseudo-states(@btn-danger-color; @btn-danger-bg; @btn-danger-border); } // Success appears as green .btn-success { - .btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border); + .btn-pseudo-states(@btn-success-color; @btn-success-bg; @btn-success-border); } // Info appears as blue-green .btn-info { - .btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border); + .btn-pseudo-states(@btn-info-color; @btn-info-bg; @btn-info-border); } @@ -110,7 +110,7 @@ fieldset[disabled] & { &:hover, &:focus { - color: @gray-dark; + color: @btn-link-disabled-color; text-decoration: none; } } @@ -120,19 +120,20 @@ // Button Sizes // -------------------------------------------------- -.btn-large { +.btn-lg { padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; + line-height: @line-height-large; // ensure even-numbered height of button next to large input border-radius: @border-radius-large; } -.btn-small, -.btn-mini { +.btn-sm, +.btn-xs { padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; - line-height: 1.5; // ensure proper height of button next to small input + line-height: @line-height-small; // ensure proper height of button next to small input border-radius: @border-radius-small; } -.btn-mini { +.btn-xs { padding: 3px 5px; } diff --git a/less/carousel.less b/less/carousel.less index 3526089c2..fbb479904 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -69,9 +69,9 @@ top: 0; left: 0; bottom: 0; - width: 15%; - .opacity(.5); - font-size: 20px; + width: @carousel-control-width; + .opacity(@carousel-control-opacity); + font-size: @carousel-control-font-size; color: @carousel-control-color; text-align: center; text-shadow: @carousel-text-shadow; @@ -81,13 +81,11 @@ // Set gradients for backgrounds &.left { #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); - background-color: transparent; } &.right { left: auto; right: 0; #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); - background-color: transparent; } // Hover/focus state @@ -127,14 +125,17 @@ } // Optional indicator pips -// ----------------------------- +// +// Add an unordered list with the following class and add a list item for each +// slide your carousel holds. + .carousel-indicators { position: absolute; bottom: 10px; left: 50%; z-index: 15; - width: 120px; - margin-left: -60px; + width: 60%; + margin-left: -30%; padding-left: 0; list-style: none; text-align: center; diff --git a/less/close.less b/less/close.less index f915667e5..9b4e74f2b 100644 --- a/less/close.less +++ b/less/close.less @@ -6,7 +6,7 @@ .close { float: right; font-size: (@font-size-base * 1.5); - font-weight: bold; + font-weight: @close-font-weight; line-height: 1; color: @close-color; text-shadow: @close-text-shadow; diff --git a/less/dropdowns.less b/less/dropdowns.less index 938e682f5..0dda5c9ce 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -11,12 +11,18 @@ height: 0; margin-left: 2px; vertical-align: middle; - border-top: 4px solid @dropdown-caret-color; - border-right: 4px solid transparent; - border-left: 4px solid transparent; + border-top: @caret-width-base solid @dropdown-caret-color; + border-right: @caret-width-base solid transparent; + border-left: @caret-width-base solid transparent; content: ""; } +// The dropdown wrapper (div) +// -------------------------- +.dropdown { + position: relative; +} + // The dropdown menu (ul) // ---------------------- .dropdown-menu { @@ -68,6 +74,7 @@ text-decoration: none; color: @dropdown-link-hover-color; #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); + background-color: darken(@dropdown-link-hover-bg, 5%); } } @@ -81,6 +88,7 @@ text-decoration: none; outline: 0; #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); + background-color: darken(@dropdown-link-active-bg, 5%); } } diff --git a/less/forms.less b/less/forms.less index f4e8c996d..d0211eb14 100644 --- a/less/forms.less +++ b/less/forms.less @@ -129,11 +129,8 @@ input[type="number"] { .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .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)"); - } + // Customize the `:focus` state to imitate native WebKit styles. + .form-control-focus(); // Disabled and read-only inputs // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be @@ -218,32 +215,34 @@ input[type="number"] { // horizontal sizing, wrap controls in the predefined grid classes. `<select>` // element gets special love because it's special, and that's a fact! -.input-large { +.input-lg { height: @input-height-large; padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; + line-height: @line-height-large; border-radius: @border-radius-large; } -.input-small { +.input-sm { height: @input-height-small; padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; + line-height: @line-height-small; border-radius: @border-radius-small; } select { - &.input-large { + &.input-lg { height: @input-height-large; line-height: @input-height-large; } - &.input-small { + &.input-sm { height: @input-height-small; line-height: @input-height-small; } } textarea { - &.input-large, - &.input-small { + &.input-lg, + &.input-sm { height: auto; } } @@ -255,15 +254,26 @@ textarea { // Warning .has-warning { - .form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg); + .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); } // Error .has-error { - .form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg); + .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); } // Success .has-success { - .form-control-validation(@state-success-text, @state-success-text, @state-success-bg); + .form-control-validation(@state-success-text; @state-success-text; @state-success-bg); +} + + +// Static form control text +// +// Apply class to a `p` element to make any string of text align with labels in +// a horizontal form layout. + +.form-control-static { + margin-bottom: 0; // Remove default margin from `p` + padding-top: @padding-base-vertical; } @@ -278,3 +288,57 @@ textarea { margin-bottom: 10px; color: lighten(@text-color, 25%); // lighten the text some for contrast } + + + +// Inline forms +// +// Make forms appear inline(-block). + +.form-inline { + .form-control, + .radio, + .checkbox { + display: inline-block; + } + + // Remove default margin on radios/checkboxes that were used for stacking, and + // then undo the floating of radios and checkboxes to match (which also avoids + // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). + .radio, + .checkbox { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; + } + .radio input[type="radio"], + .checkbox input[type="checkbox"] { + float: none; + margin-left: 0; + } +} + + +// Horizontal forms +// +// Horizontal forms are built on grid classes and allow you to create forms with +// labels on the left and inputs on the right. + +.form-horizontal .control-label, +.form-horizontal .radio-inline, +.form-horizontal .checkbox-inline { + padding-top: @padding-base-vertical; +} + +.form-horizontal { + .form-group { + .make-row(); + } +} + +// Only right align form labels here when the columns stop stacking +@media (min-width: @screen-tablet) { + .form-horizontal .control-label { + text-align: right; + } +} diff --git a/less/grid.less b/less/grid.less index 12803f39a..5142feb65 100644 --- a/less/grid.less +++ b/less/grid.less @@ -63,7 +63,7 @@ // Container and grid column sizing // -// Tiny device columns (smartphones) +// Extra small device columns (smartphones) .col-1, .col-2, .col-3, @@ -92,7 +92,7 @@ .col-12 { width: 100%; } // Small device columns (phones to tablets) -@media (min-width: @screen-tablet) { +@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .container { max-width: @container-tablet; } @@ -125,29 +125,42 @@ .col-sm-12 { width: 100%; } // Push and pull columns for source order changes - .col-push-1 { left: percentage((1 / @grid-columns)); } - .col-push-2 { left: percentage((2 / @grid-columns)); } - .col-push-3 { left: percentage((3 / @grid-columns)); } - .col-push-4 { left: percentage((4 / @grid-columns)); } - .col-push-5 { left: percentage((5 / @grid-columns)); } - .col-push-6 { left: percentage((6 / @grid-columns)); } - .col-push-7 { left: percentage((7 / @grid-columns)); } - .col-push-8 { left: percentage((8 / @grid-columns)); } - .col-push-9 { left: percentage((9 / @grid-columns)); } - .col-push-10 { left: percentage((10/ @grid-columns)); } - .col-push-11 { left: percentage((11/ @grid-columns)); } - - .col-pull-1 { right: percentage((1 / @grid-columns)); } - .col-pull-2 { right: percentage((2 / @grid-columns)); } - .col-pull-3 { right: percentage((3 / @grid-columns)); } - .col-pull-4 { right: percentage((4 / @grid-columns)); } - .col-pull-5 { right: percentage((5 / @grid-columns)); } - .col-pull-6 { right: percentage((6 / @grid-columns)); } - .col-pull-7 { right: percentage((7 / @grid-columns)); } - .col-pull-8 { right: percentage((8 / @grid-columns)); } - .col-pull-9 { right: percentage((9 / @grid-columns)); } - .col-pull-10 { right: percentage((10/ @grid-columns)); } - .col-pull-11 { right: percentage((11/ @grid-columns)); } + .col-sm-push-1 { left: percentage((1 / @grid-columns)); } + .col-sm-push-2 { left: percentage((2 / @grid-columns)); } + .col-sm-push-3 { left: percentage((3 / @grid-columns)); } + .col-sm-push-4 { left: percentage((4 / @grid-columns)); } + .col-sm-push-5 { left: percentage((5 / @grid-columns)); } + .col-sm-push-6 { left: percentage((6 / @grid-columns)); } + .col-sm-push-7 { left: percentage((7 / @grid-columns)); } + .col-sm-push-8 { left: percentage((8 / @grid-columns)); } + .col-sm-push-9 { left: percentage((9 / @grid-columns)); } + .col-sm-push-10 { left: percentage((10/ @grid-columns)); } + .col-sm-push-11 { left: percentage((11/ @grid-columns)); } + + .col-sm-pull-1 { right: percentage((1 / @grid-columns)); } + .col-sm-pull-2 { right: percentage((2 / @grid-columns)); } + .col-sm-pull-3 { right: percentage((3 / @grid-columns)); } + .col-sm-pull-4 { right: percentage((4 / @grid-columns)); } + .col-sm-pull-5 { right: percentage((5 / @grid-columns)); } + .col-sm-pull-6 { right: percentage((6 / @grid-columns)); } + .col-sm-pull-7 { right: percentage((7 / @grid-columns)); } + .col-sm-pull-8 { right: percentage((8 / @grid-columns)); } + .col-sm-pull-9 { right: percentage((9 / @grid-columns)); } + .col-sm-pull-10 { right: percentage((10/ @grid-columns)); } + .col-sm-pull-11 { right: percentage((11/ @grid-columns)); } + + // Offsets + .col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); } } // Medium and large device columns (desktop and up) @@ -182,18 +195,43 @@ .col-lg-11 { width: percentage((11/ @grid-columns)); } .col-lg-12 { width: 100%; } + // Push and pull columns for source order changes + .col-lg-push-1 { left: percentage((1 / @grid-columns)); } + .col-lg-push-2 { left: percentage((2 / @grid-columns)); } + .col-lg-push-3 { left: percentage((3 / @grid-columns)); } + .col-lg-push-4 { left: percentage((4 / @grid-columns)); } + .col-lg-push-5 { left: percentage((5 / @grid-columns)); } + .col-lg-push-6 { left: percentage((6 / @grid-columns)); } + .col-lg-push-7 { left: percentage((7 / @grid-columns)); } + .col-lg-push-8 { left: percentage((8 / @grid-columns)); } + .col-lg-push-9 { left: percentage((9 / @grid-columns)); } + .col-lg-push-10 { left: percentage((10/ @grid-columns)); } + .col-lg-push-11 { left: percentage((11/ @grid-columns)); } + + .col-lg-pull-1 { right: percentage((1 / @grid-columns)); } + .col-lg-pull-2 { right: percentage((2 / @grid-columns)); } + .col-lg-pull-3 { right: percentage((3 / @grid-columns)); } + .col-lg-pull-4 { right: percentage((4 / @grid-columns)); } + .col-lg-pull-5 { right: percentage((5 / @grid-columns)); } + .col-lg-pull-6 { right: percentage((6 / @grid-columns)); } + .col-lg-pull-7 { right: percentage((7 / @grid-columns)); } + .col-lg-pull-8 { right: percentage((8 / @grid-columns)); } + .col-lg-pull-9 { right: percentage((9 / @grid-columns)); } + .col-lg-pull-10 { right: percentage((10/ @grid-columns)); } + .col-lg-pull-11 { right: percentage((11/ @grid-columns)); } + // Offsets - .col-offset-1 { margin-left: percentage((1 / @grid-columns)); } - .col-offset-2 { margin-left: percentage((2 / @grid-columns)); } - .col-offset-3 { margin-left: percentage((3 / @grid-columns)); } - .col-offset-4 { margin-left: percentage((4 / @grid-columns)); } - .col-offset-5 { margin-left: percentage((5 / @grid-columns)); } - .col-offset-6 { margin-left: percentage((6 / @grid-columns)); } - .col-offset-7 { margin-left: percentage((7 / @grid-columns)); } - .col-offset-8 { margin-left: percentage((8 / @grid-columns)); } - .col-offset-9 { margin-left: percentage((9 / @grid-columns)); } - .col-offset-10 { margin-left: percentage((10/ @grid-columns)); } - .col-offset-11 { margin-left: percentage((11/ @grid-columns)); } + .col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); } } // Large desktops and up diff --git a/less/input-groups.less b/less/input-groups.less index fed7d5645..56c6cb62c 100644 --- a/less/input-groups.less +++ b/less/input-groups.less @@ -5,6 +5,7 @@ // Base styles // ------------------------- .input-group { + position: relative; // For dropdowns display: table; border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table @@ -43,23 +44,22 @@ // Text input groups // ------------------------- .input-group-addon { - .box-sizing(border-box); padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-base; font-weight: normal; - line-height: @line-height-base; + line-height: 1; text-align: center; background-color: @gray-lighter; border: 1px solid @input-group-addon-border-color; border-radius: @border-radius-base; // Sizing - &.input-small { + &.input-sm { padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; border-radius: @border-radius-small; } - &.input-large { + &.input-lg { padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; @@ -112,42 +112,3 @@ z-index: 2; } } - - -// Inline forms -// -------------------------------------------------- - -.form-inline { - .form-control, - .radio, - .checkbox { - display: inline-block; - } - .radio, - .checkbox { - margin-top: 0; - margin-bottom: 0; - } -} - - -// Horizontal forms -// -------------------------------------------------- -// Horizontal forms are built on grid classes. - -.form-horizontal .control-label { - padding-top: 9px; -} - -.form-horizontal { - .form-group { - .make-row(); - } -} - -// Only right align form labels here when the columns stop stacking -@media (min-width: @screen-tablet) { - .form-horizontal .control-label { - text-align: right; - } -} diff --git a/less/labels.less b/less/labels.less index 7e7ea169f..eee76d297 100644 --- a/less/labels.less +++ b/less/labels.less @@ -12,7 +12,6 @@ text-align: center; white-space: nowrap; vertical-align: baseline; - background-color: @gray-light; border-radius: .25em; // Add hover effects, but only for links @@ -22,13 +21,17 @@ color: @label-link-hover-color; text-decoration: none; cursor: pointer; - background-color: darken(@gray-light, 10%); } } } // Colors // Contextual variations (linked labels get darker on :hover) + +.label-default { + .label-variant(@label-default-bg); +} + .label-danger { .label-variant(@label-danger-bg); } diff --git a/less/list-group.less b/less/list-group.less index c0eb5f75a..306d4878d 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -37,6 +37,9 @@ float: right; margin-right: -15px; } + > .badge + .badge { + margin-right: 0; + } } // Custom content options diff --git a/less/mixins.less b/less/mixins.less index d359ce70f..92426cdfa 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -44,12 +44,12 @@ } // Sizing shortcuts -.size(@width, @height) { +.size(@width; @height) { width: @width; height: @height; } .square(@size) { - .size(@size, @size); + .size(@size; @size); } // Placeholder text @@ -130,25 +130,25 @@ // Transformations .rotate(@degrees) { -webkit-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); // IE9+ transform: rotate(@degrees); } .scale(@ratio) { -webkit-transform: scale(@ratio); - -ms-transform: scale(@ratio); + -ms-transform: scale(@ratio); // IE9+ transform: scale(@ratio); } -.translate(@x, @y) { +.translate(@x; @y) { -webkit-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); // IE9+ transform: translate(@x, @y); } -.skew(@x, @y) { +.skew(@x; @y) { -webkit-transform: skew(@x, @y); - -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885 + -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ transform: skew(@x, @y); } -.translate3d(@x, @y, @z) { +.translate3d(@x; @y; @z) { -webkit-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); } @@ -165,12 +165,12 @@ // Background clipping .background-clip(@clip) { - background-clip: @clip; + background-clip: @clip; } // Background sizing .background-size(@size) { - background-size: @size; + background-size: @size; } // Box sizing @@ -185,7 +185,7 @@ .user-select(@select) { -webkit-user-select: @select; -moz-user-select: @select; - -ms-user-select: @select; + -ms-user-select: @select; // IE10+ -o-user-select: @select; user-select: @select; } @@ -197,7 +197,7 @@ } // CSS3 Content Columns -.content-columns(@column-count, @column-gap: @grid-gutter-width) { +.content-columns(@column-count; @column-gap: @grid-gutter-width) { -webkit-column-count: @column-count; -moz-column-count: @column-count; column-count: @column-count; @@ -211,7 +211,7 @@ word-wrap: break-word; -webkit-hyphens: @mode; -moz-hyphens: @mode; - -ms-hyphens: @mode; + -ms-hyphens: @mode; // IE10+ -o-hyphens: @mode; hyphens: @mode; } @@ -235,8 +235,7 @@ // // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9 and below. - .horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) { - background-color: @end-color; + .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+ background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ @@ -249,8 +248,7 @@ // // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9 and below. - .vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) { - background-color: @end-color; + .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+ background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ @@ -259,15 +257,13 @@ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down } - .directional(@start-color: #555, @end-color: #333, @deg: 45deg) { - background-color: @end-color; + .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { background-repeat: repeat-x; background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+ background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+ background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10 } - .horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) { - background-color: mix(@mid-color, @end-color, 80%); + .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); @@ -275,9 +271,7 @@ background-repeat: no-repeat; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback } - - .vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) { - background-color: mix(@mid-color, @end-color, 80%); + .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color); @@ -285,16 +279,14 @@ background-repeat: no-repeat; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback } - .radial(@inner-color: #555, @outer-color: #333) { - background-color: @outer-color; + .radial(@inner-color: #555; @outer-color: #333) { background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color)); background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); background-image: -moz-radial-gradient(circle, @inner-color, @outer-color); background-image: radial-gradient(circle, @inner-color, @outer-color); background-repeat: no-repeat; } - .striped(@color: #555, @angle: 45deg) { - background-color: @color; + .striped(@color: #555; @angle: 45deg) { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); @@ -316,7 +308,7 @@ // -------------------------------------------------- // Short retina mixin for setting background-image and -size -.img-retina(@file-1x, @file-2x, @width-1x, @height-1x) { +.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { background-image: url("@{file-1x}"); @media @@ -347,7 +339,7 @@ // Alerts // ------------------------- -.alert-variant(@background, @border, @text-color) { +.alert-variant(@background; @border; @text-color) { background-color: @background; border-color: @border; color: @text-color; @@ -363,7 +355,7 @@ // ------------------------- // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons -.btn-pseudo-states(@color, @background, @border) { +.btn-pseudo-states(@color; @background; @border) { color: @color; background-color: @background; border-color: @border; @@ -372,8 +364,9 @@ &:focus, &:active, &.active { - background-color: darken(@background, 5%); - border-color: darken(@border, 10%); + color: @color; + background-color: darken(@background, 8%); + border-color: darken(@border, 12%); } &.disabled, @@ -405,7 +398,7 @@ // Navbar vertical align // ------------------------- // Vertically center elements in the navbar. -// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin. +// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. .navbar-vertical-align(@element-height) { margin-top: ((@navbar-height - @element-height) / 2); margin-bottom: ((@navbar-height - @element-height) / 2); @@ -520,7 +513,7 @@ // Used in forms.less to generate the form validation CSS for warnings, errors, // and successes. -.form-control-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { +.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { // Color the label and help text .help-block, .control-label { @@ -528,7 +521,6 @@ } // Set the border and box shadow on specific inputs to match .form-control { - padding-right: 32px; // to account for the feedback icon border-color: @border-color; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work &:focus { @@ -544,3 +536,25 @@ background-color: @background-color; } } + +// Form control focus state +// +// Generate a customized focus state and for any input with the specified color, +// which defaults to the `@input-focus-border` variable. +// +// We highly encourage you to not customize the default value, but instead use +// this to tweak colors on an as-needed basis. This aesthetic change is based on +// WebKit's default styles, but applicable to a wider range of browsers. Its +// usability and accessibility should be taken into account with any change. +// +// Example usage: change the default blue border and shadow to white for better +// contrast against a dark gray background. + +.form-control-focus(@color: @input-border-focus) { + @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); + &:focus { + border-color: @color; + outline: 0; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); + } +} diff --git a/less/modals.less b/less/modals.less index 996db6c7f..2e574535e 100644 --- a/less/modals.less +++ b/less/modals.less @@ -29,7 +29,7 @@ .translate(0, -25%); .transition-transform(~"0.3s ease-out"); } - &.fade.in .modal-dialog { .translate(0, 0)} + &.in .modal-dialog { .translate(0, 0)} } // Shell div to position the modal with bottom padding @@ -65,7 +65,7 @@ background-color: @modal-backdrop-bg; // Fade for backdrop &.fade { .opacity(0); } - &.fade.in { .opacity(.5); } + &.in { .opacity(.5); } } // Modal header diff --git a/less/navbar.less b/less/navbar.less index 653a8d6d9..c2872e64a 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -10,7 +10,7 @@ padding-left: @navbar-padding-horizontal; padding-right: @navbar-padding-horizontal; background-color: @navbar-bg; - border-radius: @border-radius-base; + border-radius: @navbar-border-radius; // Prevent floats from breaking the navbar .clearfix(); @@ -20,15 +20,13 @@ // ------------------------- .navbar-nav { - // Space out from .navbar .brand and .btn-navbar when stacked in mobile views - margin-top: 10px; margin-bottom: 15px; > li > a { padding-top: ((@navbar-height - @line-height-computed) / 2); padding-bottom: ((@navbar-height - @line-height-computed) / 2); color: @navbar-link-color; - line-height: 20px; + line-height: @line-height-computed; border-radius: @border-radius-base; &:hover, &:focus { @@ -88,6 +86,39 @@ margin-bottom: 0; // override .navbar defaults } +.nav-collapse { + // Space out collapsed contents within the mobile navbar + padding-bottom: @navbar-padding-vertical; + // Clear floated elements and prevent collapsing of padding + .clearfix(); + + // When there is no `.navbar-brand` present (which normally sits between the + // navbar brand and toggle), prevent the nav from overlapping the toggle. + .navbar-toggle + & { + width: 100%; + margin-top: @navbar-height; + } +} + + +// Scrollable navbar navigation +// +// Sometimes you might have too many links in your fixed navbar and you need to +// maintain access to all that content. To help, add `.nav-collapse-scrollable` +// to your `.nav-collapse` to prevent the the content from flowing past the max- +// height of your browser. +// +// This is not automatically added to the `.navbar-fixed-top` because it causes +// z-index bugs in iOS7 (possibly earlier). + +@media (max-width: @screen-small) { + .nav-collapse-scrollable { + margin-bottom: @navbar-padding-vertical; + max-height: 360px; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + } +} // @@ -116,12 +147,12 @@ // Collapsible navbar toggle .navbar-toggle { - position: absolute; - top: floor((@navbar-height - 32) / 2); - right: 10px; + position: relative; + float: right; + height: 34px; width: 48px; - height: 32px; - padding: 8px 12px; + .navbar-vertical-align(34px); + padding: @padding-base-vertical @padding-base-horizontal; background-color: transparent; border: 1px solid @navbar-toggle-border-color; border-radius: @border-radius-base; @@ -302,6 +333,7 @@ float: left; margin-left: -(@navbar-padding-horizontal); margin-right: 5px; + max-width: none; // Disables the default mobile setting } .navbar-nav { float: left; @@ -317,7 +349,6 @@ } &.pull-right { - float: right; width: auto; } } @@ -332,6 +363,7 @@ .nav-collapse.collapse { display: block !important; height: auto !important; + padding-bottom: 0; // Override default setting overflow: visible !important; } @@ -354,6 +386,8 @@ // Add a class to make any element properly align itself vertically within the navbars. .navbar-text { + float: left; + padding: 0 @navbar-padding-horizontal; .navbar-vertical-align(@line-height-computed); } diff --git a/less/navs.less b/less/navs.less index 340b63970..a19e5cdfd 100644 --- a/less/navs.less +++ b/less/navs.less @@ -56,12 +56,6 @@ } } - // Redeclare pull classes because of specificity - // Todo: consider making these utilities !important to avoid this bullshit - > .pull-right { - float: right; - } - // Dividers (basically an hr) within the dropdown .nav-divider { .nav-divider(); @@ -69,40 +63,6 @@ } - -// Nav variations -// -------------------------------------------------- - -// Justified nav links -// ------------------------- - -.nav-justified { - width: 100%; - > li { - float: none; - display: table-cell; - width: 1%; - > a { - text-align: center; - } - } -} - -// Move borders to anchors instead of bottom of list -.nav-tabs-justified { - border-bottom: 0; - > li > a { - border-bottom: 1px solid @nav-tabs-justified-link-border-color; - - // Override margin from .nav-tabs - margin-right: 0; - } - > .active > a { - border-bottom-color: @nav-tabs-justified-active-link-border-color; - } - -} - // Tabs // ------------------------- @@ -185,6 +145,39 @@ } +// Nav variations +// -------------------------------------------------- + +// Justified nav links +// ------------------------- + +.nav-justified { + width: 100%; + > li { + float: none; + display: table-cell; + width: 1%; + > a { + text-align: center; + } + } +} + +// Move borders to anchors instead of bottom of list +.nav-tabs-justified { + border-bottom: 0; + > li > a { + border-bottom: 1px solid @nav-tabs-justified-link-border-color; + + // Override margin from .nav-tabs + margin-right: 0; + } + > .active > a { + border-bottom-color: @nav-tabs-justified-active-link-border-color; + } +} + + // Tabbable tabs // ------------------------- diff --git a/less/pagination.less b/less/pagination.less index 6720c6898..65679beff 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -12,7 +12,7 @@ > a, > span { float: left; // Collapse white-space - padding: 4px 12px; + padding: @padding-base-vertical @padding-base-horizontal; line-height: @line-height-base; text-decoration: none; background-color: @pagination-bg; @@ -62,7 +62,7 @@ // -------------------------------------------------- // Large -.pagination-large { +.pagination-lg { > li { > a, > span { @@ -85,7 +85,7 @@ } // Small -.pagination-small { +.pagination-sm { > li { > a, > span { diff --git a/less/panels.less b/less/panels.less index 691a15545..87a786524 100644 --- a/less/panels.less +++ b/less/panels.less @@ -11,6 +11,24 @@ border: 1px solid @panel-border; border-radius: @panel-border-radius; .box-shadow(0 1px 1px rgba(0,0,0,.05)); + + // List groups in panels + .list-group { + margin: 15px -15px -15px; + + .list-group-item { + border-width: 1px 0; + + // Remove border radius for top one + &:first-child { + .border-top-radius(0); + } + // But keep it for the last one + &:last-child { + border-bottom: 0; + } + } + } } // Optional heading @@ -29,6 +47,9 @@ margin-bottom: 0; font-size: (@font-size-base * 1.25); font-weight: 500; + > a { + color: inherit; + } } // Optional footer (stays gray in every modifier class) @@ -82,21 +103,3 @@ border-color: @panel-info-border; } } - -// List groups in panels -.list-group-flush { - margin: 15px -15px -15px; - - .list-group-item { - border-width: 1px 0; - - // Remove border radius for top one - &:first-child { - .border-top-radius(0); - } - // But keep it for the last one - &:last-child { - border-bottom: 0; - } - } -} diff --git a/less/progress-bars.less b/less/progress-bars.less index fe399abf7..ab9832315 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -18,19 +18,13 @@ to { background-position: 0 0; } } -// IE9 -@-ms-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - // Opera @-o-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } -// Spec +// Spec and IE10+ @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } diff --git a/less/tables.less b/less/tables.less index 68e33dccd..b3c921dbb 100644 --- a/less/tables.less +++ b/less/tables.less @@ -162,7 +162,7 @@ table { > th.active, &.active > td, &.active > th { - background-color: @table-bg-hover; + background-color: @table-bg-active; } > td.success, > th.success, diff --git a/less/tooltip.less b/less/tooltip.less index 819b9dffd..5a95b8462 100644 --- a/less/tooltip.less +++ b/less/tooltip.less @@ -13,7 +13,7 @@ line-height: 1.4; .opacity(0); - &.in { .opacity(1); } + &.in { .opacity(.9); } &.top { margin-top: -3px; padding: 5px 0; } &.right { margin-left: 3px; padding: 0 5px; } &.bottom { margin-top: 3px; padding: 5px 0; } diff --git a/less/type.less b/less/type.less index 0acb7f35d..3fa558f7a 100644 --- a/less/type.less +++ b/less/type.less @@ -141,18 +141,25 @@ dt { dd { margin-left: 0; // Undo browser default } -// Horizontal layout (like forms) -.dl-horizontal { - dt { - float: left; - width: (@component-offset-horizontal - 20); - clear: left; - text-align: right; - .text-overflow(); - } - dd { - .clearfix(); // Clear the floated `dt` if an empty `dd` is present - margin-left: @component-offset-horizontal; + +// Horizontal description lists +// +// Defaults to being stacked without any of the below styles applied, until the +// grid breakpoint is reached (default of ~768px). + +@media (min-width: @grid-float-breakpoint) { + .dl-horizontal { + dt { + float: left; + width: (@component-offset-horizontal - 20); + clear: left; + text-align: right; + .text-overflow(); + } + dd { + margin-left: @component-offset-horizontal; + .clearfix(); // Clear the floated `dt` if an empty `dd` is present + } } } @@ -195,7 +202,6 @@ blockquote { // Float right with text-align: right &.pull-right { - float: right; padding-right: 15px; padding-left: 0; border-right: 5px solid @blockquote-border-color; diff --git a/less/utilities.less b/less/utilities.less index d296b32c2..3d310e651 100644 --- a/less/utilities.less +++ b/less/utilities.less @@ -10,10 +10,10 @@ .clearfix(); } .pull-right { - float: right; + float: right !important; } .pull-left { - float: left; + float: left !important; } diff --git a/less/variables.less b/less/variables.less index 71e813d32..3a9430e2e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -60,21 +60,26 @@ // ------------------------- // Based on 14px font-size and 1.428 line-height (~20px to start) -@padding-base-vertical: 8px; +@padding-base-vertical: 6px; @padding-base-horizontal: 12px; -@padding-large-vertical: 14px; +@padding-large-vertical: 10px; @padding-large-horizontal: 16px; @padding-small-vertical: 5px; @padding-small-horizontal: 10px; +@line-height-large: 1.33; +@line-height-small: 1.5; + @border-radius-base: 4px; @border-radius-large: 6px; @border-radius-small: 3px; @component-active-bg: @brand-primary; +@caret-width-base: 4px; +@caret-width-large: 5px; // Tables // ------------------------- @@ -93,31 +98,33 @@ // Buttons // ------------------------- -@btn-default-color: #fff; -@btn-default-bg: #474949; -@btn-default-border: @btn-default-bg; +@btn-font-weight: bold; + +@btn-default-color: #333; +@btn-default-bg: #fff; +@btn-default-border: #ccc; -@btn-primary-color: @btn-default-color; +@btn-primary-color: #fff; @btn-primary-bg: @brand-primary; -@btn-primary-border: @btn-primary-bg; +@btn-primary-border: darken(@btn-primary-bg, 5%); -@btn-success-color: @btn-default-color; +@btn-success-color: #fff; @btn-success-bg: @brand-success; -@btn-success-border: @btn-success-bg; +@btn-success-border: darken(@btn-success-bg, 5%); -@btn-warning-color: @btn-default-color; +@btn-warning-color: #fff; @btn-warning-bg: @brand-warning; -@btn-warning-border: @btn-warning-bg; +@btn-warning-border: darken(@btn-warning-bg, 5%); -@btn-danger-color: @btn-default-color; +@btn-danger-color: #fff; @btn-danger-bg: @brand-danger; -@btn-danger-border: @btn-danger-bg; +@btn-danger-border: darken(@btn-danger-bg, 5%); -@btn-info-color: @btn-default-color; +@btn-info-color: #fff; @btn-info-bg: @brand-info; -@btn-info-border: @btn-info-bg; +@btn-info-border: darken(@btn-info-bg, 5%); -@btn-hover-color: @btn-default-color; +@btn-link-disabled-color: @gray-light; // Forms @@ -128,12 +135,13 @@ @input-border: #ccc; @input-border-radius: @border-radius-base; +@input-border-focus: #66afe9; @input-color-placeholder: @gray-light; @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); -@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2); -@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2); +@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); +@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); @legend-border-color: #e5e5e5; @@ -177,9 +185,9 @@ // Media queries breakpoints // -------------------------------------------------- -// Tiny screen / phone -@screen-tiny: 480px; -@screen-phone: @screen-tiny; +// Extra small screen / phone +@screen-xsmall: 480px; +@screen-phone: @screen-xsmall; // Small screen / tablet @screen-small: 768px; @@ -189,14 +197,16 @@ @screen-medium: 992px; @screen-desktop: @screen-medium; -// So media queries don't overlap when required, provide a maximum -@screen-small-max: (@screen-medium - 1); -@screen-tablet-max: @screen-small-max; - // Large screen / wide desktop @screen-large: 1200px; @screen-large-desktop: @screen-large; +// So media queries don't overlap when required, provide a maximum +@screen-small-max: (@screen-medium - 1); +@screen-tablet-max: (@screen-desktop - 1); +@screen-desktop-max: (@screen-large-desktop - 1); + + // Grid system // -------------------------------------------------- @@ -215,6 +225,7 @@ @navbar-height: 50px; @navbar-color: #777; @navbar-bg: #eee; +@navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @@ -347,7 +358,7 @@ // ------------------------- @tooltip-max-width: 200px; @tooltip-color: #fff; -@tooltip-bg: rgba(0,0,0,.9); +@tooltip-bg: #000; @tooltip-arrow-width: 5px; @tooltip-arrow-color: @tooltip-bg; @@ -372,6 +383,8 @@ // Labels // ------------------------- + +@label-default-bg: @gray-light; @label-success-bg: @brand-success; @label-info-bg: @brand-info; @label-warning-bg: @brand-warning; @@ -399,10 +412,13 @@ // Alerts // ------------------------- +@alert-padding: 15px; +@alert-border-radius: @border-radius-base; +@alert-link-font-weight: bold; + @alert-bg: @state-warning-bg; @alert-text: @state-warning-text; @alert-border: @state-warning-border; -@alert-border-radius: @border-radius-base; @alert-success-bg: @state-success-bg; @alert-success-text: @state-success-text; @@ -495,11 +511,15 @@ // ------------------------- @badge-color: #fff; @badge-link-hover-color: #fff; - @badge-bg: @gray-light; + @badge-active-color: @link-color; @badge-active-bg: #fff; +@badge-font-weight: bold; +@badge-line-height: 1; +@badge-border-radius: 10px; + // Breadcrumbs // ------------------------- @@ -510,12 +530,16 @@ // Carousel // ------------------------ + @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); @carousel-control-color: #fff; +@carousel-control-width: 15%; +@carousel-control-opacity: .5; +@carousel-control-font-size: 20px; -@carousel-indicator-border-color: #fff; @carousel-indicator-active-bg: #fff; +@carousel-indicator-border-color: #fff; @carousel-caption-color: #fff; @@ -523,6 +547,7 @@ // Close // ------------------------ @close-color: #000; +@close-font-weight: bold; @close-text-shadow: 0 1px 0 #fff; diff --git a/less/wells.less b/less/wells.less index 6a909f44b..865abc2eb 100644 --- a/less/wells.less +++ b/less/wells.less @@ -19,11 +19,11 @@ } // Sizes -.well-large { +.well-lg { padding: 24px; border-radius: @border-radius-large; } -.well-small { +.well-sm { padding: 9px; border-radius: @border-radius-small; } |
