diff options
| author | Mark Otto <[email protected]> | 2014-03-06 22:40:25 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-03-06 22:40:25 -0800 |
| commit | 12c619f5b9149a4d3f4d24efe106504b6a8a5004 (patch) | |
| tree | dacdd064110d04b8195151c08ef4e5713ba3ea24 /less | |
| parent | f4dd6221d4e7a8eaa9cd8ebe0457ad016f5058cc (diff) | |
| parent | 7e299c6a49bced5d2c2581a5504ddf7dbcaf041f (diff) | |
| download | bootstrap-12c619f5b9149a4d3f4d24efe106504b6a8a5004.tar.xz bootstrap-12c619f5b9149a4d3f4d24efe106504b6a8a5004.zip | |
Merge branch 'master' into boulox-responsive-embed
Conflicts:
dist/css/bootstrap.css.map
dist/css/bootstrap.min.css
docs/assets/js/customize.min.js
docs/assets/js/docs.min.js
docs/css.html
docs/dist/css/bootstrap.css.map
docs/dist/css/bootstrap.min.css
Diffstat (limited to 'less')
| -rw-r--r-- | less/.csscomb.json | 6 | ||||
| -rw-r--r-- | less/badges.less | 4 | ||||
| -rw-r--r-- | less/bootstrap.less | 4 | ||||
| -rw-r--r-- | less/button-groups.less | 6 | ||||
| -rw-r--r-- | less/buttons.less | 8 | ||||
| -rw-r--r-- | less/carousel.less | 6 | ||||
| -rw-r--r-- | less/code.less | 1 | ||||
| -rw-r--r-- | less/component-animations.less | 10 | ||||
| -rw-r--r-- | less/dropdowns.less | 2 | ||||
| -rw-r--r-- | less/forms.less | 90 | ||||
| -rw-r--r-- | less/grid.less | 24 | ||||
| -rw-r--r-- | less/input-groups.less | 5 | ||||
| -rw-r--r-- | less/jumbotron.less | 4 | ||||
| -rw-r--r-- | less/list-group.less | 18 | ||||
| -rw-r--r-- | less/mixins.less | 137 | ||||
| -rw-r--r-- | less/modals.less | 10 | ||||
| -rw-r--r-- | less/navbar.less | 38 | ||||
| -rw-r--r-- | less/normalize.less | 261 | ||||
| -rw-r--r-- | less/panels.less | 128 | ||||
| -rw-r--r-- | less/popovers.less | 24 | ||||
| -rw-r--r-- | less/print.less | 4 | ||||
| -rw-r--r-- | less/progress-bars.less | 16 | ||||
| -rw-r--r-- | less/responsive-utilities.less | 13 | ||||
| -rw-r--r-- | less/scaffolding.less | 19 | ||||
| -rw-r--r-- | less/tables.less | 4 | ||||
| -rw-r--r-- | less/thumbnails.less | 2 | ||||
| -rw-r--r-- | less/type.less | 77 | ||||
| -rw-r--r-- | less/variables.less | 76 |
28 files changed, 591 insertions, 406 deletions
diff --git a/less/.csscomb.json b/less/.csscomb.json index 53ea6eff3..8456e41df 100644 --- a/less/.csscomb.json +++ b/less/.csscomb.json @@ -1,7 +1,7 @@ { "always-semicolon": true, "block-indent": 2, - "colon-space": true, + "colon-space": [0, 1], "color-case": "lower", "color-shorthand": true, "combinator-space": true, @@ -10,7 +10,7 @@ "leading-zero": false, "remove-empty-rulesets": true, "rule-indent": 2, - "stick-brace": true, + "stick-brace": " ", "strip-spaces": true, "unitless-zero": true, "vendor-prefix-align": true, @@ -91,6 +91,8 @@ "text-shadow", "text-transform", "text-wrap", + "-webkit-text-size-adjust", + "-ms-text-size-adjust", "letter-spacing", "-ms-word-break", "word-break", diff --git a/less/badges.less b/less/badges.less index 166b2be5e..56828cab7 100644 --- a/less/badges.less +++ b/less/badges.less @@ -28,6 +28,10 @@ position: relative; top: -1px; } + .btn-xs & { + top: 0; + padding: 1px 5px; + } } // Hover state, but only for links diff --git a/less/bootstrap.less b/less/bootstrap.less index b368b8710..4f85a0dd3 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -2,9 +2,10 @@ @import "variables.less"; @import "mixins.less"; -// Reset +// Reset and dependencies @import "normalize.less"; @import "print.less"; +@import "glyphicons.less"; // Core CSS @import "scaffolding.less"; @@ -17,7 +18,6 @@ // Components @import "component-animations.less"; -@import "glyphicons.less"; @import "dropdowns.less"; @import "button-groups.less"; @import "input-groups.less"; diff --git a/less/button-groups.less b/less/button-groups.less index 58fd90675..27eb796b8 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -96,9 +96,9 @@ // // Remix the default button sizing classes into new ones for easier manipulation. -.btn-group-xs > .btn { .btn-xs(); } -.btn-group-sm > .btn { .btn-sm(); } -.btn-group-lg > .btn { .btn-lg(); } +.btn-group-xs > .btn { &:extend(.btn-xs); } +.btn-group-sm > .btn { &:extend(.btn-sm); } +.btn-group-lg > .btn { &:extend(.btn-lg); } // Split button dropdowns diff --git a/less/buttons.less b/less/buttons.less index 4858a8aea..d4fc156be 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -19,8 +19,12 @@ .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base); .user-select(none); - &:focus { - .tab-focus(); + &, + &:active, + &.active { + &:focus { + .tab-focus(); + } } &:hover, diff --git a/less/carousel.less b/less/carousel.less index e53365df4..e3fb8a2cf 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -21,7 +21,7 @@ // Account for jankitude on images > img, > a > img { - .img-responsive(); + &:extend(.img-responsive); line-height: 1; } } @@ -206,8 +206,8 @@ // Scale up the controls a smidge .carousel-control { - .glyphicons-chevron-left, - .glyphicons-chevron-right, + .glyphicon-chevron-left, + .glyphicon-chevron-right, .icon-prev, .icon-next { width: 30px; diff --git a/less/code.less b/less/code.less index 3eed26c05..4d0eadc6d 100644 --- a/less/code.less +++ b/less/code.less @@ -17,7 +17,6 @@ code { font-size: 90%; color: @code-color; background-color: @code-bg; - white-space: nowrap; border-radius: @border-radius-base; } diff --git a/less/component-animations.less b/less/component-animations.less index 1efe45e2c..9400a0d32 100644 --- a/less/component-animations.less +++ b/less/component-animations.less @@ -5,7 +5,7 @@ // Heads up! // // We don't use the `.opacity()` mixin here since it causes a bug with text -// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552. +// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. .fade { opacity: 0; @@ -17,10 +17,12 @@ .collapse { display: none; - &.in { - display: block; - } + + &.in { display: block; } + tr&.in { display: table-row; } + tbody&.in { display: table-row-group; } } + .collapsing { position: relative; height: 0; diff --git a/less/dropdowns.less b/less/dropdowns.less index dde2038e3..f165165e7 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -47,7 +47,7 @@ // Aligns the dropdown menu to right // - // Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]` + // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` &.pull-right { right: 0; left: auto; diff --git a/less/forms.less b/less/forms.less index 6b475ae13..273e36608 100644 --- a/less/forms.less +++ b/less/forms.less @@ -11,6 +11,10 @@ fieldset { padding: 0; margin: 0; border: 0; + // Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets, + // so we reset that to ensure it behaves more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359. + min-width: 0; } legend { @@ -33,6 +37,10 @@ label { // Normalize form controls +// +// While most of our form styles require extra classes, some basic normalization +// is required to ensure optimum display with or without those classes to better +// address browser inconsistencies. // Override content-box in Normalize (* isn't specific enough) input[type="search"] { @@ -43,7 +51,7 @@ input[type="search"] { input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; - margin-top: 1px \9; /* IE8-9 */ + margin-top: 1px \9; // IE8-9 line-height: normal; } @@ -64,13 +72,6 @@ select[size] { height: auto; } -// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611 -select optgroup { - font-size: inherit; - font-style: inherit; - font-family: inherit; -} - // Focus for file, radio, and checkbox input[type="file"]:focus, input[type="radio"]:focus, @@ -78,16 +79,6 @@ input[type="checkbox"]:focus { .tab-focus(); } -// Fix for Chrome number input -// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button. -// See https://github.com/twbs/bootstrap/issues/8350 for more. -input[type="number"] { - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - height: auto; - } -} - // Adjust output element output { display: block; @@ -139,20 +130,19 @@ output { .form-control-focus(); // Placeholder - // - // Placeholder text gets special styles because when browsers invalidate entire - // lines if it doesn't understand a selector/ .placeholder(); // Disabled and read-only inputs - // Note: HTML5 says that controls under a fieldset > legend:first-child won't - // be disabled if the fieldset is disabled. Due to implementation difficulty, - // we don't honor that edge case; we style them as disabled anyway. + // + // HTML5 says that controls under a fieldset > legend:first-child won't be + // disabled if the fieldset is disabled. Due to implementation difficulty, we + // don't honor that edge case; we style them as disabled anyway. &[disabled], &[readonly], fieldset[disabled] & { cursor: not-allowed; background-color: @input-bg-disabled; + opacity: 1; // iOS fix for unreadable disabled content } // Reset height for `textarea`s @@ -161,10 +151,24 @@ output { } } + +// Search inputs in iOS +// +// This overrides the extra rounded corners on search inputs in iOS so that our +// `.form-control` class can properly style them. Note that this cannot simply +// be added to `.form-control` as it's not specific enough. For details, see +// https://github.com/twbs/bootstrap/issues/11586. + +input[type="search"] { + -webkit-appearance: none; +} + + // Special styles for iOS date input // // In Mobile Safari, date inputs require a pixel line-height that matches the // given height of the input. + input[type="date"] { line-height: @input-height-base; } @@ -267,18 +271,27 @@ input[type="checkbox"], .form-control { padding-right: (@input-height-base * 1.25); } - - // Feedback icon (requires .glyphicon classes) - .form-control-feedback { - position: absolute; - top: (@line-height-computed + 5); // Height of the `label` and its margin - right: 0; - display: block; - width: @input-height-base; - height: @input-height-base; - line-height: @input-height-base; - text-align: center; - } +} +// Feedback icon (requires .glyphicon classes) +.form-control-feedback { + position: absolute; + top: (@line-height-computed + 5); // Height of the `label` and its margin + right: 0; + display: block; + width: @input-height-base; + height: @input-height-base; + line-height: @input-height-base; + text-align: center; +} +.input-lg + .form-control-feedback { + width: @input-height-large; + height: @input-height-large; + line-height: @input-height-large; +} +.input-sm + .form-control-feedback { + width: @input-height-small; + height: @input-height-small; + line-height: @input-height-small; } // Feedback states @@ -345,6 +358,10 @@ input[type="checkbox"], width: auto; // Prevent labels from stacking above inputs in `.form-group` vertical-align: middle; } + // Input groups need that 100% width though + .input-group > .form-control { + width: 100%; + } .control-label { margin-bottom: 0; @@ -410,6 +427,7 @@ input[type="checkbox"], .form-control-static { padding-top: (@padding-base-vertical + 1); + padding-bottom: (@padding-base-vertical + 1); } // Only right align form labels here when the columns stop stacking diff --git a/less/grid.less b/less/grid.less index 88957f42a..e100655b7 100644 --- a/less/grid.less +++ b/less/grid.less @@ -53,11 +53,7 @@ // Columns, offsets, pushes, and pulls for extra small devices like // smartphones. -.make-grid-columns-float(xs); -.make-grid(@grid-columns, xs, width); -.make-grid(@grid-columns, xs, pull); -.make-grid(@grid-columns, xs, push); -.make-grid(@grid-columns, xs, offset); +.make-grid(xs); // Small grid @@ -66,11 +62,7 @@ // to tablets. @media (min-width: @screen-sm-min) { - .make-grid-columns-float(sm); - .make-grid(@grid-columns, sm, width); - .make-grid(@grid-columns, sm, pull); - .make-grid(@grid-columns, sm, push); - .make-grid(@grid-columns, sm, offset); + .make-grid(sm); } @@ -79,11 +71,7 @@ // Columns, offsets, pushes, and pulls for the desktop device range. @media (min-width: @screen-md-min) { - .make-grid-columns-float(md); - .make-grid(@grid-columns, md, width); - .make-grid(@grid-columns, md, pull); - .make-grid(@grid-columns, md, push); - .make-grid(@grid-columns, md, offset); + .make-grid(md); } @@ -92,9 +80,5 @@ // Columns, offsets, pushes, and pulls for the large desktop device range. @media (min-width: @screen-lg-min) { - .make-grid-columns-float(lg); - .make-grid(@grid-columns, lg, width); - .make-grid(@grid-columns, lg, pull); - .make-grid(@grid-columns, lg, push); - .make-grid(@grid-columns, lg, offset); + .make-grid(lg); } diff --git a/less/input-groups.less b/less/input-groups.less index b486cf4d2..a11147463 100644 --- a/less/input-groups.less +++ b/less/input-groups.less @@ -17,6 +17,11 @@ } .form-control { + // Ensure that the input is always above the *appended* addon button for + // proper border colors. + position: relative; + z-index: 2; + // IE9 fubars the placeholder attribute in text inputs and the arrows on // select elements in input groups. To fix it, we float the input. Details: // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 diff --git a/less/jumbotron.less b/less/jumbotron.less index a15e16971..27cd8b81d 100644 --- a/less/jumbotron.less +++ b/less/jumbotron.less @@ -19,6 +19,10 @@ font-weight: 200; } + > hr { + border-top-color: darken(@jumbotron-bg, 10%); + } + .container & { border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container } diff --git a/less/list-group.less b/less/list-group.less index 3343f8e5e..9e3b1ef8e 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -64,6 +64,24 @@ a.list-group-item { text-decoration: none; background-color: @list-group-hover-bg; } +} + +.list-group-item { + // Disabled state + &.disabled, + &.disabled:hover, + &.disabled:focus { + background-color: @list-group-disabled-bg; + color: @list-group-disabled-color; + + // Force color to inherit for custom content + .list-group-item-heading { + color: inherit; + } + .list-group-item-text { + color: @list-group-disabled-text-color; + } + } // Active class on item itself, not parent &.active, diff --git a/less/mixins.less b/less/mixins.less index 3af3c8208..9a3fdd3ac 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -54,8 +54,7 @@ // Placeholder text .placeholder(@color: @input-color-placeholder) { - &:-moz-placeholder { color: @color; } // Firefox 4-18 - &::-moz-placeholder { color: @color; // Firefox 19+ + &::-moz-placeholder { color: @color; // Firefox opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526 &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome @@ -115,6 +114,10 @@ } // Drop shadows +// +// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's +// supported browsers that have box shadow capabilities now support the +// standard `box-shadow` property. .box-shadow(@shadow) { -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow; @@ -137,6 +140,10 @@ -webkit-transition-duration: @transition-duration; transition-duration: @transition-duration; } +.transition-timing-function(@timing-function) { + -webkit-animation-timing-function: @timing-function; + animation-timing-function: @timing-function; +} .transition-transform(@transition) { -webkit-transition: -webkit-transform @transition; -moz-transition: -moz-transform @transition; @@ -145,31 +152,45 @@ } // Transformations -.rotate(@degrees) { - -webkit-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); // IE9 only - transform: rotate(@degrees); +.scale(@ratio) { + -webkit-transform: scale(@ratio); + -ms-transform: scale(@ratio); // IE9 only + transform: scale(@ratio); +} +.scale(@ratioX; @ratioY) { + -webkit-transform: scale(@ratioX, @ratioY); + -ms-transform: scale(@ratioX, @ratioY); // IE9 only + transform: scale(@ratioX, @ratioY); +} +.scaleX(@ratio) { + -webkit-transform: scaleX(@ratio); + -ms-transform: scaleX(@ratio); // IE9 only + transform: scaleX(@ratio); +} +.scaleY(@ratio) { + -webkit-transform: scaleY(@ratio); + -ms-transform: scaleY(@ratio); // IE9 only + transform: scaleY(@ratio); } -.scale(@ratio; @ratio-y...) { - -webkit-transform: scale(@ratio, @ratio-y); - -ms-transform: scale(@ratio, @ratio-y); // IE9 only - transform: scale(@ratio, @ratio-y); +.skew(@x; @y) { + -webkit-transform: skew(@x, @y); + -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ + transform: skew(@x, @y); } .translate(@x; @y) { -webkit-transform: translate(@x, @y); -ms-transform: translate(@x, @y); // IE9 only transform: translate(@x, @y); } -.skew(@x; @y) { - -webkit-transform: skew(@x, @y); - -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ - transform: skew(@x, @y); -} .translate3d(@x; @y; @z) { -webkit-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); } - +.rotate(@degrees) { + -webkit-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); // IE9 only + transform: rotate(@degrees); +} .rotateX(@degrees) { -webkit-transform: rotateX(@degrees); -ms-transform: rotateX(@degrees); // IE9 only @@ -226,6 +247,10 @@ -webkit-animation-direction: @direction; animation-direction: @direction; } +.animation-fill-mode(@fill-mode) { + -webkit-animation-fill-mode: @fill-mode; + animation-fill-mode: @fill-mode; +} // Backface visibility // Prevent browsers from flickering when using CSS 3D transforms. @@ -249,7 +274,6 @@ -webkit-user-select: @select; -moz-user-select: @select; -ms-user-select: @select; // IE10+ - -o-user-select: @select; user-select: @select; } @@ -356,7 +380,8 @@ // Retina images // -// Short retina mixin for setting background-image and -size +// Short retina mixin for setting background-image and -size. Note that the +// spelling of `min--moz-device-pixel-ratio` is intentional. .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { background-image: url("@{file-1x}"); @@ -408,12 +433,12 @@ background-color: @heading-bg-color; border-color: @heading-border; - + .panel-collapse .panel-body { + + .panel-collapse > .panel-body { border-top-color: @border; } } & > .panel-footer { - + .panel-collapse .panel-body { + + .panel-collapse > .panel-body { border-bottom-color: @border; } } @@ -577,6 +602,24 @@ } } +// Contextual backgrounds +// ------------------------- +.bg-variant(@color) { + background-color: @color; + a&:hover { + background-color: darken(@color, 10%); + } +} + +// Typography +// ------------------------- +.text-emphasis-variant(@color) { + color: @color; + a&:hover { + color: darken(@color, 10%); + } +} + // Navbar vertical align // ------------------------- // Vertically center elements in the navbar. @@ -607,10 +650,7 @@ } .responsive-invisibility() { - &, - tr&, - th&, - td& { display: none !important; } + display: none !important; } @@ -643,19 +683,13 @@ padding-right: (@gutter / 2); } .make-xs-column-offset(@columns) { - @media (min-width: @screen-xs-min) { - margin-left: percentage((@columns / @grid-columns)); - } + margin-left: percentage((@columns / @grid-columns)); } .make-xs-column-push(@columns) { - @media (min-width: @screen-xs-min) { - left: percentage((@columns / @grid-columns)); - } + left: percentage((@columns / @grid-columns)); } .make-xs-column-pull(@columns) { - @media (min-width: @screen-xs-min) { - right: percentage((@columns / @grid-columns)); - } + right: percentage((@columns / @grid-columns)); } @@ -774,7 +808,7 @@ .col(1); // kickstart it } -.make-grid-columns-float(@class) { +.float-grid-columns(@class) { .col(@index) when (@index = 1) { // initial @item: ~".col-@{class}-@{index}"; .col((@index + 1), @item); @@ -791,34 +825,52 @@ .col(1); // kickstart it } -.calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) { +.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { .col-@{class}-@{index} { width: percentage((@index / @grid-columns)); } } -.calc-grid(@index, @class, @type) when (@type = push) { +.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { .col-@{class}-push-@{index} { left: percentage((@index / @grid-columns)); } } -.calc-grid(@index, @class, @type) when (@type = pull) { +.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { + .col-@{class}-push-0 { + left: auto; + } +} +.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { .col-@{class}-pull-@{index} { right: percentage((@index / @grid-columns)); } } -.calc-grid(@index, @class, @type) when (@type = offset) { +.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { + .col-@{class}-pull-0 { + right: auto; + } +} +.calc-grid-column(@index, @class, @type) when (@type = offset) { .col-@{class}-offset-@{index} { margin-left: percentage((@index / @grid-columns)); } } // Basic looping in LESS -.make-grid(@index, @class, @type) when (@index >= 0) { - .calc-grid(@index, @class, @type); +.loop-grid-columns(@index, @class, @type) when (@index >= 0) { + .calc-grid-column(@index, @class, @type); // next iteration - .make-grid((@index - 1), @class, @type); + .loop-grid-columns((@index - 1), @class, @type); } +// Create grid for specific class +.make-grid(@class) { + .float-grid-columns(@class); + .loop-grid-columns(@grid-columns, @class, width); + .loop-grid-columns(@grid-columns, @class, pull); + .loop-grid-columns(@grid-columns, @class, push); + .loop-grid-columns(@grid-columns, @class, offset); +} // Form validation states // @@ -897,7 +949,8 @@ line-height: @input-height; } - textarea& { + textarea&, + select[multiple]& { height: auto; } } diff --git a/less/modals.less b/less/modals.less index f6ab34769..0ba977e6d 100644 --- a/less/modals.less +++ b/less/modals.less @@ -98,8 +98,7 @@ // Footer (for actions) .modal-footer { - margin-top: 15px; - padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding; + padding: @modal-inner-padding; text-align: right; // right align buttons border-top: 1px solid @modal-footer-border-color; &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons @@ -121,10 +120,9 @@ // Scale up the modal @media (min-width: @screen-sm-min) { - // Automatically set modal's width for larger viewports .modal-dialog { - width: 600px; + width: @modal-md; margin: 30px auto; } .modal-content { @@ -133,6 +131,8 @@ // Modal sizes .modal-sm { width: @modal-sm; } - .modal-lg { width: @modal-lg; } +} +@media (min-width: @screen-md-min) { + .modal-lg { width: @modal-lg; } } diff --git a/less/navbar.less b/less/navbar.less index ac7a6a79f..34897e225 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -48,7 +48,7 @@ // content for the user's viewport. .navbar-collapse { - max-height: 340px; + max-height: @navbar-collapse-max-height; overflow-x: visible; padding-right: @navbar-padding-horizontal; padding-left: @navbar-padding-horizontal; @@ -155,19 +155,13 @@ padding: @navbar-padding-vertical @navbar-padding-horizontal; font-size: @font-size-large; line-height: @line-height-computed; + height: @navbar-height; &:hover, &:focus { text-decoration: none; } - // Prevent Glyphicons from increasing height of navbar - > .glyphicon { - float: left; - margin-top: -2px; - margin-right: 5px; - } - @media (min-width: @grid-float-breakpoint) { .navbar > .container &, .navbar > .container-fluid & { @@ -498,6 +492,20 @@ } } + .btn-link { + color: @navbar-default-link-color; + &:hover, + &:focus { + color: @navbar-default-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: @navbar-default-link-disabled-color; + } + } + } } // Inverse navbar @@ -619,4 +627,18 @@ } } + .btn-link { + color: @navbar-inverse-link-color; + &:hover, + &:focus { + color: @navbar-inverse-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: @navbar-inverse-link-disabled-color; + } + } + } } diff --git a/less/normalize.less b/less/normalize.less index 42a393fc0..024e257c1 100644 --- a/less/normalize.less +++ b/less/normalize.less @@ -1,6 +1,25 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ +/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ + +// +// 1. Set default font family to sans-serif. +// 2. Prevent iOS text size adjust after orientation change, without disabling +// user zoom. +// + +html { + font-family: sans-serif; // 1 + -ms-text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 +} + +// +// Remove default margin. +// + +body { + margin: 0; +} -// ========================================================================== // HTML5 display definitions // ========================================================================== @@ -24,13 +43,16 @@ summary { } // -// Correct `inline-block` display not defined in IE 8/9. +// 1. Correct `inline-block` display not defined in IE 8/9. +// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. // audio, canvas, +progress, video { - display: inline-block; + display: inline-block; // 1 + vertical-align: baseline; // 2 } // @@ -53,31 +75,6 @@ template { display: none; } -// ========================================================================== -// Base -// ========================================================================== - -// -// 1. Set default font family to sans-serif. -// 2. Prevent iOS text size adjust after orientation change, without disabling -// user zoom. -// - -html { - font-family: sans-serif; // 1 - -ms-text-size-adjust: 100%; // 2 - -webkit-text-size-adjust: 100%; // 2 -} - -// -// Remove default margin. -// - -body { - margin: 0; -} - -// ========================================================================== // Links // ========================================================================== @@ -90,14 +87,6 @@ a { } // -// Address `outline` inconsistency between Chrome and other browsers. -// - -a:focus { - outline: thin dotted; -} - -// // Improve readability when focused and also mouse hovered in all browsers. // @@ -106,19 +95,8 @@ a:hover { outline: 0; } +// Text-level semantics // ========================================================================== -// Typography -// ========================================================================== - -// -// Address variable `h1` font-size and margin within `section` and `article` -// contexts in Firefox 4+, Safari 5, and Chrome. -// - -h1 { - font-size: 2em; - margin: 0.67em 0; -} // // Address styling not present in IE 8/9, Safari 5, and Chrome. @@ -146,13 +124,13 @@ dfn { } // -// Address differences between Firefox and other browsers. +// Address variable `h1` font-size and margin within `section` and `article` +// contexts in Firefox 4+, Safari 5, and Chrome. // -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; +h1 { + font-size: 2em; + margin: 0.67em 0; } // @@ -165,34 +143,6 @@ mark { } // -// Correct font family set oddly in Safari 5 and Chrome. -// - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -// -// Improve readability of pre-formatted text in all browsers. -// - -pre { - white-space: pre-wrap; -} - -// -// Set consistent quote types. -// - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - -// // Address inconsistent and variable font size in all browsers. // @@ -220,7 +170,6 @@ sub { bottom: -0.25em; } -// ========================================================================== // Embedded content // ========================================================================== @@ -240,8 +189,7 @@ svg:not(:root) { overflow: hidden; } -// ========================================================================== -// Figures +// Grouping content // ========================================================================== // @@ -249,63 +197,77 @@ svg:not(:root) { // figure { - margin: 0; + margin: 1em 40px; } -// ========================================================================== -// Forms -// ========================================================================== +// +// Address differences between Firefox and other browsers. +// + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} // -// Define consistent border, margin, and padding. +// Contain overflow in all browsers. // -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; +pre { + overflow: auto; } // -// 1. Correct `color` not being inherited in IE 8/9. -// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// Address odd `em`-unit font size rendering in all browsers. // -legend { - border: 0; // 1 - padding: 0; // 2 +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } +// Forms +// ========================================================================== + +// +// Known limitation: by default, Chrome and Safari on OS X allow very limited +// styling of `select`, unless a `border` property is set. +// + // -// 1. Correct font family not being inherited in all browsers. -// 2. Correct font size not being inherited in all browsers. +// 1. Correct color not being inherited. +// Known issue: affects color of disabled elements. +// 2. Correct font properties not being inherited. // 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. // button, input, +optgroup, select, textarea { - font-family: inherit; // 1 - font-size: 100%; // 2 + color: inherit; // 1 + font: inherit; // 2 margin: 0; // 3 } // -// Address Firefox 4+ setting `line-height` on `input` using `!important` in -// the UA stylesheet. +// Address `overflow` set to `hidden` in IE 8/9/10. // -button, -input { - line-height: normal; +button { + overflow: visible; } // // Address inconsistent `text-transform` inheritance for `button` and `select`. // All other form control elements do not inherit `text-transform` values. -// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. -// Correct `select` style inheritance in Firefox 4+ and Opera. +// Correct `button` style inheritance in Firefox, IE 8+, and Opera +// Correct `select` style inheritance in Firefox. // button, @@ -339,6 +301,28 @@ html input[disabled] { } // +// Remove inner padding and border in Firefox 4+. +// + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +// +// Address Firefox 4+ setting `line-height` on `input` using `!important` in +// the UA stylesheet. +// + +input { + line-height: normal; +} + +// +// It's recommended that you don't attempt to style these elements. +// Firefox's implementation doesn't respect box-sizing, padding, or width. +// // 1. Address box sizing set to `content-box` in IE 8/9/10. // 2. Remove excess padding in IE 8/9/10. // @@ -350,6 +334,17 @@ input[type="radio"] { } // +// Fix the cursor style for Chrome's increment/decrement buttons. For certain +// `font-size` values of the `input`, it causes the cursor style of the +// decrement button to change from `default` to `text`. +// + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +// // 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. // 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome // (include `-moz` to future-proof). @@ -363,8 +358,9 @@ input[type="search"] { } // -// Remove inner padding and search cancel button in Safari 5 and Chrome -// on OS X. +// Remove inner padding and search cancel button in Safari and Chrome on OS X. +// Safari (but not Chrome) clips the cancel button when the search input has +// padding (and `textfield` appearance). // input[type="search"]::-webkit-search-cancel-button, @@ -373,26 +369,42 @@ input[type="search"]::-webkit-search-decoration { } // -// Remove inner padding and border in Firefox 4+. +// Define consistent border, margin, and padding. // -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } // -// 1. Remove default vertical scrollbar in IE 8/9. -// 2. Improve readability and alignment in all browsers. +// 1. Correct `color` not being inherited in IE 8/9. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// + +legend { + border: 0; // 1 + padding: 0; // 2 +} + +// +// Remove default vertical scrollbar in IE 8/9. // textarea { - overflow: auto; // 1 - vertical-align: top; // 2 + overflow: auto; +} + +// +// Don't inherit the `font-weight` (applied by a rule above). +// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. +// + +optgroup { + font-weight: bold; } -// ========================================================================== // Tables // ========================================================================== @@ -404,3 +416,8 @@ table { border-collapse: collapse; border-spacing: 0; } + +td, +th { + padding: 0; +}
\ No newline at end of file diff --git a/less/panels.less b/less/panels.less index a19fa3788..9afa4cbfd 100644 --- a/less/panels.less +++ b/less/panels.less @@ -18,6 +18,37 @@ &:extend(.clearfix all); } +// Optional heading +.panel-heading { + padding: @panel-heading-padding; + border-bottom: 1px solid transparent; + .border-top-radius((@panel-border-radius - 1)); + + > .dropdown .dropdown-toggle { + color: inherit; + } +} + +// Within heading, strip any `h*` tag of its default margins for spacing. +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: ceil((@font-size-base * 1.125)); + color: inherit; + + > a { + color: inherit; + } +} + +// Optional footer (stays gray in every modifier class) +.panel-footer { + padding: @panel-footer-padding; + background-color: @panel-footer-bg; + border-top: 1px solid @panel-inner-border; + .border-bottom-radius((@panel-border-radius - 1)); +} + // List groups in panels // @@ -30,14 +61,21 @@ .list-group-item { border-width: 1px 0; + border-radius: 0; + } - // Remove border radius for top one - &:first-child { - .border-top-radius(0); + // Add border top radius for first one + &:first-child { + .list-group-item:first-child { + border-top: 0; + .border-top-radius((@panel-border-radius - 1)); } - // But keep it for the last one - &:last-child { + } + // Add border bottom radius for last one + &:last-child { + .list-group-item:last-child { border-bottom: 0; + .border-bottom-radius((@panel-border-radius - 1)); } } } @@ -59,6 +97,30 @@ > .table, > .table-responsive > .table { margin-bottom: 0; + } + // Add border top radius for first one + > .table:first-child, + > .table-responsive:first-child > .table:first-child { + .border-top-radius((@panel-border-radius - 1)); + + > thead:first-child, + > tbody:first-child { + > tr:first-child { + td:first-child, + th:first-child { + border-top-left-radius: (@panel-border-radius - 1); + } + td:last-child, + th:last-child { + border-top-right-radius: (@panel-border-radius - 1); + } + } + } + } + // Add border bottom radius for last one + > .table:last-child, + > .table-responsive:last-child > .table:last-child { + .border-bottom-radius((@panel-border-radius - 1)); > tbody:last-child, > tfoot:last-child { @@ -78,8 +140,8 @@ > .panel-body + .table-responsive { border-top: 1px solid @table-border-color; } - > .table > tbody:first-child th, - > .table > tbody:first-child td { + > .table > tbody:first-child > tr:first-child th, + > .table > tbody:first-child > tr:first-child td { border-top: 0; } > .table-bordered, @@ -97,9 +159,22 @@ > td:last-child { border-right: 0; } - - &:last-child > th, - &:last-child > td { + } + } + > thead, + > tbody { + > tr:first-child { + > td, + > th { + border-bottom: 0; + } + } + } + > tbody, + > tfoot { + > tr:last-child { + > td, + > th { border-bottom: 0; } } @@ -112,38 +187,6 @@ } -// Optional heading -.panel-heading { - padding: 10px 15px; - border-bottom: 1px solid transparent; - .border-top-radius((@panel-border-radius - 1)); - - > .dropdown .dropdown-toggle { - color: inherit; - } -} - -// Within heading, strip any `h*` tag of its default margins for spacing. -.panel-title { - margin-top: 0; - margin-bottom: 0; - font-size: ceil((@font-size-base * 1.125)); - color: inherit; - - > a { - color: inherit; - } -} - -// Optional footer (stays gray in every modifier class) -.panel-footer { - padding: 10px 15px; - background-color: @panel-footer-bg; - border-top: 1px solid @panel-inner-border; - .border-bottom-radius((@panel-border-radius - 1)); -} - - // Collapsable panels (aka, accordion) // // Wrap a series of panels in `.panel-group` to turn them into an accordion with @@ -156,7 +199,6 @@ .panel { margin-bottom: 0; border-radius: @panel-border-radius; - overflow: hidden; // crop contents when collapsed + .panel { margin-top: 5px; } diff --git a/less/popovers.less b/less/popovers.less index 345bb1a31..bf6af40a0 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -23,10 +23,10 @@ white-space: normal; // Offset the popover to account for the popover arrow - &.top { margin-top: -10px; } - &.right { margin-left: 10px; } - &.bottom { margin-top: 10px; } - &.left { margin-left: -10px; } + &.top { margin-top: -@popover-arrow-width; } + &.right { margin-left: @popover-arrow-width; } + &.bottom { margin-top: @popover-arrow-width; } + &.left { margin-left: -@popover-arrow-width; } } .popover-title { @@ -37,7 +37,7 @@ line-height: 18px; background-color: @popover-title-bg; border-bottom: 1px solid darken(@popover-title-bg, 5%); - border-radius: 5px 5px 0 0; + border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0; } .popover-content { @@ -48,7 +48,7 @@ // // .arrow is outer, .arrow:after is inner -.popover .arrow { +.popover > .arrow { &, &:after { position: absolute; @@ -59,16 +59,16 @@ border-style: solid; } } -.popover .arrow { +.popover > .arrow { border-width: @popover-arrow-outer-width; } -.popover .arrow:after { +.popover > .arrow:after { border-width: @popover-arrow-width; content: ""; } .popover { - &.top .arrow { + &.top > .arrow { left: 50%; margin-left: -@popover-arrow-outer-width; border-bottom-width: 0; @@ -83,7 +83,7 @@ border-top-color: @popover-arrow-color; } } - &.right .arrow { + &.right > .arrow { top: 50%; left: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width; @@ -98,7 +98,7 @@ border-right-color: @popover-arrow-color; } } - &.bottom .arrow { + &.bottom > .arrow { left: 50%; margin-left: -@popover-arrow-outer-width; border-top-width: 0; @@ -114,7 +114,7 @@ } } - &.left .arrow { + &.left > .arrow { top: 50%; right: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width; diff --git a/less/print.less b/less/print.less index 07277a3ca..3655d0395 100644 --- a/less/print.less +++ b/less/print.less @@ -50,10 +50,6 @@ max-width: 100% !important; } - @page { - margin: 2cm .5cm; - } - p, h2, h3 { diff --git a/less/progress-bars.less b/less/progress-bars.less index 76c87be17..659821852 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -58,6 +58,22 @@ .animation(progress-bar-stripes 2s linear infinite); } +// Account for lower percentages +.progress-bar { + &[aria-valuenow="1"], + &[aria-valuenow="2"] { + min-width: 30px; + } + + &[aria-valuenow="0"] { + color: @gray-light; + min-width: 30px; + background-color: transparent; + background-image: none; + box-shadow: none; + } +} + // Variations diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 5a31816af..027a26410 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -23,30 +23,29 @@ // Visibility utilities -.visible-xs { +.visible-xs, +.visible-sm, +.visible-md, +.visible-lg { .responsive-invisibility(); +} +.visible-xs { @media (max-width: @screen-xs-max) { .responsive-visibility(); } } .visible-sm { - .responsive-invisibility(); - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .responsive-visibility(); } } .visible-md { - .responsive-invisibility(); - @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .responsive-visibility(); } } .visible-lg { - .responsive-invisibility(); - @media (min-width: @screen-lg-min) { .responsive-visibility(); } diff --git a/less/scaffolding.less b/less/scaffolding.less index 976b4e3c2..fe29f2d62 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -4,8 +4,13 @@ // Reset the box-sizing - -*, +// +// Heads up! This reset may cause conflicts with some third-party widgets. +// For recommendations on resolving such conflicts, see +// http://getbootstrap.com/getting-started/#third-box-sizing +* { + .box-sizing(border-box); +} *:before, *:after { .box-sizing(border-box); @@ -56,6 +61,16 @@ a { } +// Figures +// +// We reset this here because previously Normalize had no `figure` margins. This +// ensures we don't break anyone's use of the element. + +figure { + margin: 0; +} + + // Images img { diff --git a/less/tables.less b/less/tables.less index c41989c04..555d7924c 100644 --- a/less/tables.less +++ b/less/tables.less @@ -168,8 +168,8 @@ table { // by enabling horizontal scrolling. Only applies <768px. Everything above that // will display normally. -@media (max-width: @screen-xs-max) { - .table-responsive { +.table-responsive { + @media screen and (max-width: @screen-xs-max) { width: 100%; margin-bottom: (@line-height-computed * 0.75); overflow-y: hidden; diff --git a/less/thumbnails.less b/less/thumbnails.less index 11aa283a0..c428920bc 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -16,7 +16,7 @@ > img, a > img { - .img-responsive(); + &:extend(.img-responsive); margin-left: auto; margin-right: auto; } diff --git a/less/type.less b/less/type.less index 91496dc8c..c63e5d9f2 100644 --- a/less/type.less +++ b/less/type.less @@ -92,34 +92,19 @@ cite { font-style: normal; } color: @text-muted; } .text-primary { - color: @brand-primary; - &:hover { - color: darken(@brand-primary, 10%); - } + .text-emphasis-variant(@brand-primary); } .text-success { - color: @state-success-text; - &:hover { - color: darken(@state-success-text, 10%); - } + .text-emphasis-variant(@state-success-text); } .text-info { - color: @state-info-text; - &:hover { - color: darken(@state-info-text, 10%); - } + .text-emphasis-variant(@state-info-text); } .text-warning { - color: @state-warning-text; - &:hover { - color: darken(@state-warning-text, 10%); - } + .text-emphasis-variant(@state-warning-text); } .text-danger { - color: @state-danger-text; - &:hover { - color: darken(@state-danger-text, 10%); - } + .text-emphasis-variant(@state-danger-text); } // Contextual backgrounds @@ -129,34 +114,19 @@ cite { font-style: normal; } // Given the contrast here, this is the only class to have its color inverted // automatically. color: #fff; - background-color: @brand-primary; - a&:hover { - background-color: darken(@brand-primary, 10%); - } + .bg-variant(@brand-primary); } .bg-success { - background-color: @state-success-bg; - a&:hover { - background-color: darken(@state-success-bg, 10%); - } + .bg-variant(@state-success-bg); } .bg-info { - background-color: @state-info-bg; - a&:hover { - background-color: darken(@state-info-bg, 10%); - } + .bg-variant(@state-info-bg); } .bg-warning { - background-color: @state-warning-bg; - a&:hover { - background-color: darken(@state-warning-bg, 10%); - } + .bg-variant(@state-warning-bg); } .bg-danger { - background-color: @state-danger-bg; - a&:hover { - background-color: darken(@state-danger-bg, 10%); - } + .bg-variant(@state-danger-bg); } @@ -171,7 +141,7 @@ cite { font-style: normal; } // Lists -// -------------------------------------------------- +// ------------------------- // Unordered and Ordered lists ul, @@ -195,15 +165,12 @@ ol { // Inline turns list items into inline-block .list-inline { .list-unstyled(); + margin-left: -5px; > li { display: inline-block; padding-left: 5px; padding-right: 5px; - - &:first-child { - padding-left: 0; - } } } @@ -228,8 +195,12 @@ dd { // 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 { +.dl-horizontal { + dd { + &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present + } + + @media (min-width: @grid-float-breakpoint) { dt { float: left; width: (@component-offset-horizontal - 20); @@ -239,13 +210,13 @@ dd { } dd { margin-left: @component-offset-horizontal; - &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present } } } -// MISC -// ---- + +// Misc +// ------------------------- // Abbreviations and acronyms abbr[title], @@ -263,7 +234,7 @@ abbr[data-original-title] { blockquote { padding: (@line-height-computed / 2) @line-height-computed; margin: 0 0 @line-height-computed; - font-size: (@font-size-base * 1.25); + font-size: @blockquote-font-size; border-left: 5px solid @blockquote-border-color; p, @@ -274,7 +245,7 @@ blockquote { } } - // Deprecating small and .small for v3.1 + // Note: Deprecated small and .small as of v3.1.0 // Context: https://github.com/twbs/bootstrap/issues/11660 footer, small, @@ -292,7 +263,7 @@ blockquote { // Opposite alignment of blockquote // -// Heads up: `blockquote.pull-right` has been deprecated as of v3.1. +// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0. .blockquote-reverse, blockquote.pull-right { padding-right: 15px; diff --git a/less/variables.less b/less/variables.less index 106a73457..bdc719cb3 100644 --- a/less/variables.less +++ b/less/variables.less @@ -58,7 +58,7 @@ //** Unit-less `line-height` for use in components like buttons. @line-height-base: 1.428571429; // 20/14 -//** Computed "line-height" (`font-size` × `line-height`) for use with `margin`, `padding`, etc. +//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px //** By default, this inherits from the `<body>`. @@ -74,7 +74,7 @@ @icon-font-path: "../fonts/"; @icon-font-name: "glyphicons-halflings-regular"; -@icon-font-svg-id: "glyphicons_halflingsregular"; +@icon-font-svg-id: "glyphicons_halflingsregular"; //== Components // @@ -232,7 +232,7 @@ //** Text color for headers within dropdown menus. @dropdown-header-color: @gray-light; -// Note: Deprecated @dropdown-caret-color as of v3.1 +// Note: Deprecated @dropdown-caret-color as of v3.1.0 @dropdown-caret-color: #000; @@ -257,7 +257,7 @@ //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra small screen / phone -// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 +// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1, and @screen-xs-min as of v3.2.0 @screen-xs: 480px; @screen-xs-min: @screen-xs; @screen-phone: @screen-xs-min; @@ -301,6 +301,26 @@ @grid-float-breakpoint-max: (@grid-float-breakpoint - 1); +//== Container sizes +// +//## Define the maximum width of `.container` for different screen sizes. + +// Small screen / tablet +@container-tablet: ((720px + @grid-gutter-width)); +//** For `@screen-sm-min` and up. +@container-sm: @container-tablet; + +// Medium screen / desktop +@container-desktop: ((940px + @grid-gutter-width)); +//** For `@screen-md-min` and up. +@container-md: @container-desktop; + +// Large screen / wide desktop +@container-large-desktop: ((1140px + @grid-gutter-width)); +//** For `@screen-lg-min` and up. +@container-lg: @container-large-desktop; + + //== Navbar // //## @@ -311,6 +331,7 @@ @navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor((@grid-gutter-width / 2)); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); +@navbar-collapse-max-height: 340px; @navbar-default-color: #777; @navbar-default-bg: #f8f8f8; @@ -504,9 +525,9 @@ //** Popover outer arrow width @popover-arrow-outer-width: (@popover-arrow-width + 1); //** Popover outer arrow color -@popover-arrow-outer-color: rgba(0,0,0,.25); +@popover-arrow-outer-color: fadein(@popover-border-color, 5%); //** Popover outer arrow fallback color -@popover-arrow-outer-fallback-color: #999; +@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); //== Labels @@ -537,7 +558,7 @@ //## //** Padding applied to the modal body -@modal-inner-padding: 20px; +@modal-inner-padding: 15px; //** Padding applied to the modal title @modal-title-padding: 15px; @@ -548,7 +569,7 @@ @modal-content-bg: #fff; //** Modal content border color @modal-content-border-color: rgba(0,0,0,.2); -//** Modal content border color <strong>for IE8</strong> +//** Modal content border color **for IE8** @modal-content-fallback-border-color: #999; //** Modal backdrop background color @@ -561,6 +582,7 @@ @modal-footer-border-color: @modal-header-border-color; @modal-lg: 900px; +@modal-md: 600px; @modal-sm: 300px; @@ -621,16 +643,24 @@ //** List group border radius @list-group-border-radius: @border-radius-base; -//** Background color of single list elements on hover +//** Background color of single list items on hover @list-group-hover-bg: #f5f5f5; -//** Text color of active list elements +//** Text color of active list items @list-group-active-color: @component-active-color; -//** Background color of active list elements +//** Background color of active list items @list-group-active-bg: @component-active-bg; //** Border color of active list elements @list-group-active-border: @list-group-active-bg; +//** Text color for content within active list items @list-group-active-text-color: lighten(@list-group-active-bg, 40%); +//** Text color of disabled list items +@list-group-disabled-color: @gray-light; +//** Background color of disabled list items +@list-group-disabled-bg: @gray-lighter; +//** Text color for content within disabled list items +@list-group-disabled-text-color: @list-group-disabled-color; + @list-group-link-color: #555; @list-group-link-heading-color: #333; @@ -641,6 +671,8 @@ @panel-bg: #fff; @panel-body-padding: 15px; +@panel-heading-padding: 10px 15px; +@panel-footer-padding: @panel-heading-padding; @panel-border-radius: @border-radius-base; //** Border color for elements within panels @@ -788,6 +820,8 @@ @headings-small-color: @gray-light; //** Blockquote small color @blockquote-small-color: @gray-light; +//** Blockquote font size +@blockquote-font-size: (@font-size-base * 1.25); //** Blockquote border color @blockquote-border-color: @gray-lighter; //** Page header border color @@ -803,23 +837,3 @@ //** Horizontal offset for forms and lists. @component-offset-horizontal: 180px; - - -//== Container sizes -// -//## Define the maximum width of `.container` for different screen sizes. - -// Small screen / tablet -@container-tablet: ((720px + @grid-gutter-width)); -//** For `@screen-sm-min` and up. -@container-sm: @container-tablet; - -// Medium screen / desktop -@container-desktop: ((940px + @grid-gutter-width)); -//** For `@screen-md-min` and up. -@container-md: @container-desktop; - -// Large screen / wide desktop -@container-large-desktop: ((1140px + @grid-gutter-width)); -//** For `@screen-lg-min` and up. -@container-lg: @container-large-desktop; |
