diff options
| author | Mark Otto <[email protected]> | 2014-03-07 01:30:28 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-03-07 01:30:28 -0800 |
| commit | 0143e38a672335b7ca2d73d0de5b2a2b4618f9e9 (patch) | |
| tree | 7188809b7c2194fc0aca9a65b7d07725ee4206d5 /less | |
| parent | 642fd5100293755a6003448d4a481f3b314edf15 (diff) | |
| parent | 1f148427de6d35a06e225deeee0b162b11955232 (diff) | |
| download | bootstrap-0143e38a672335b7ca2d73d0de5b2a2b4618f9e9.tar.xz bootstrap-0143e38a672335b7ca2d73d0de5b2a2b4618f9e9.zip | |
Merge branch 'master' into document_popover_focus
Conflicts:
docs/assets/js/docs.min.js
Diffstat (limited to 'less')
| -rw-r--r-- | less/.csscomb.json | 4 | ||||
| -rw-r--r-- | less/bootstrap.less | 5 | ||||
| -rw-r--r-- | less/button-groups.less | 12 | ||||
| -rw-r--r-- | less/code.less | 1 | ||||
| -rw-r--r-- | less/component-animations.less | 10 | ||||
| -rw-r--r-- | less/forms.less | 36 | ||||
| -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 | 19 | ||||
| -rw-r--r-- | less/mixins.less | 175 | ||||
| -rw-r--r-- | less/modals.less | 3 | ||||
| -rw-r--r-- | less/navbar.less | 28 | ||||
| -rw-r--r-- | less/panels.less | 5 | ||||
| -rw-r--r-- | less/popovers.less | 2 | ||||
| -rw-r--r-- | less/progress-bars.less | 23 | ||||
| -rw-r--r-- | less/responsive-embed.less | 34 | ||||
| -rw-r--r-- | less/tables.less | 4 | ||||
| -rw-r--r-- | less/type.less | 22 | ||||
| -rw-r--r-- | less/variables.less | 21 |
20 files changed, 334 insertions, 103 deletions
diff --git a/less/.csscomb.json b/less/.csscomb.json index c3d0c088b..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, diff --git a/less/bootstrap.less b/less/bootstrap.less index b368b8710..61b77474f 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"; @@ -35,6 +35,7 @@ @import "media.less"; @import "list-group.less"; @import "panels.less"; +@import "responsive-embed.less"; @import "wells.less"; @import "close.less"; diff --git a/less/button-groups.less b/less/button-groups.less index 27eb796b8..ff95b0474 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -220,7 +220,17 @@ // Checkbox and radio options +// +// In order to support the browser's form validation feedback, powered by the +// `required` attribute, we have to "hide" the inputs via `opacity`. We cannot +// use `display: none;` or `visibility: hidden;` as that also hides the popover. +// This way, we ensure a DOM element is visible to position the popover from. +// +// See https://github.com/twbs/bootstrap/pull/12794 for more. + [data-toggle="buttons"] > .btn > input[type="radio"], [data-toggle="buttons"] > .btn > input[type="checkbox"] { - display: none; + position: absolute; + z-index: -1; + opacity: 0; } 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/forms.less b/less/forms.less index f607b8509..273e36608 100644 --- a/less/forms.less +++ b/less/forms.less @@ -51,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; } @@ -271,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 @@ -418,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..2514389b1 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -62,8 +62,27 @@ a.list-group-item { &:hover, &:focus { text-decoration: none; + color: @list-group-link-hover-color; 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 9643d92a3..eee5865ca 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -124,22 +124,39 @@ } // Transitions +// +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transition(@transition) { -webkit-transition: @transition; + -o-transition: @transition; transition: @transition; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transition-property(@transition-property) { -webkit-transition-property: @transition-property; transition-property: @transition-property; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transition-delay(@transition-delay) { -webkit-transition-delay: @transition-delay; transition-delay: @transition-delay; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transition-duration(@transition-duration) { -webkit-transition-duration: @transition-duration; transition-duration: @transition-duration; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) +.transition-timing-function(@timing-function) { + -webkit-transition-timing-function: @timing-function; + transition-timing-function: @timing-function; +} + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transition-transform(@transition) { -webkit-transition: -webkit-transform @transition; -moz-transition: -moz-transform @transition; @@ -148,51 +165,100 @@ } // Transformations -.rotate(@degrees) { - -webkit-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); // IE9 only - transform: rotate(@degrees); +// +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) +.scale(@ratio) { + -webkit-transform: scale(@ratio); + -ms-transform: scale(@ratio); // IE9 only + -o-transform: scale(@ratio); + transform: scale(@ratio); } -.scale(@ratio; @ratio-y...) { - -webkit-transform: scale(@ratio, @ratio-y); - -ms-transform: scale(@ratio, @ratio-y); // IE9 only - transform: scale(@ratio, @ratio-y); + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) +.scale(@ratioX; @ratioY) { + -webkit-transform: scale(@ratioX, @ratioY); + -ms-transform: scale(@ratioX, @ratioY); // IE9 only + -o-transform: scale(@ratioX, @ratioY); + transform: scale(@ratioX, @ratioY); } -.translate(@x; @y) { - -webkit-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); // IE9 only - transform: translate(@x, @y); + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) +.scaleX(@ratio) { + -webkit-transform: scaleX(@ratio); + -ms-transform: scaleX(@ratio); // IE9 only + -o-transform: scaleX(@ratio); + transform: scaleX(@ratio); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) +.scaleY(@ratio) { + -webkit-transform: scaleY(@ratio); + -ms-transform: scaleY(@ratio); // IE9 only + -o-transform: scaleY(@ratio); + transform: scaleY(@ratio); +} + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .skew(@x; @y) { -webkit-transform: skew(@x, @y); -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ + -o-transform: skew(@x, @y); transform: skew(@x, @y); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) +.translate(@x; @y) { + -webkit-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); // IE9 only + -o-transform: translate(@x, @y); + transform: translate(@x, @y); +} + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .translate3d(@x; @y; @z) { -webkit-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); } +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) +.rotate(@degrees) { + -webkit-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); // IE9 only + -o-transform: rotate(@degrees); + transform: rotate(@degrees); +} + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .rotateX(@degrees) { -webkit-transform: rotateX(@degrees); -ms-transform: rotateX(@degrees); // IE9 only + -o-transform: rotateX(@degrees); transform: rotateX(@degrees); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .rotateY(@degrees) { -webkit-transform: rotateY(@degrees); -ms-transform: rotateY(@degrees); // IE9 only + -o-transform: rotateY(@degrees); transform: rotateY(@degrees); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .perspective(@perspective) { -webkit-perspective: @perspective; -moz-perspective: @perspective; perspective: @perspective; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .perspective-origin(@perspective) { -webkit-perspective-origin: @perspective; -moz-perspective-origin: @perspective; perspective-origin: @perspective; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transform-origin(@origin) { -webkit-transform-origin: @origin; -moz-transform-origin: @origin; @@ -201,38 +267,58 @@ } // Animations +// +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation(@animation) { -webkit-animation: @animation; + -o-animation: @animation; animation: @animation; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-name(@name) { -webkit-animation-name: @name; animation-name: @name; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-duration(@duration) { -webkit-animation-duration: @duration; animation-duration: @duration; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-timing-function(@timing-function) { -webkit-animation-timing-function: @timing-function; animation-timing-function: @timing-function; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-delay(@delay) { -webkit-animation-delay: @delay; animation-delay: @delay; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-iteration-count(@iteration-count) { -webkit-animation-iteration-count: @iteration-count; animation-iteration-count: @iteration-count; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-direction(@direction) { -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. // Default value is `visible`, but can be changed to `hidden` +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .backface-visibility(@visibility){ -webkit-backface-visibility: @visibility; -moz-backface-visibility: @visibility; @@ -240,6 +326,7 @@ } // Box sizing +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .box-sizing(@boxmodel) { -webkit-box-sizing: @boxmodel; -moz-box-sizing: @boxmodel; @@ -248,6 +335,7 @@ // User select // For selecting text on the page +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .user-select(@select) { -webkit-user-select: @select; -moz-user-select: @select; @@ -302,7 +390,8 @@ // Color stops are not available in IE9 and below. .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+ - background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12 + background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down } @@ -313,6 +402,7 @@ // Color stops are not available in IE9 and below. .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12 background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down @@ -321,16 +411,19 @@ .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-6, Chrome 10+ + background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12 background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ } .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); 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-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color); background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); 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 @@ -342,6 +435,7 @@ } .striped(@color: rgba(255,255,255,.15); @angle: 45deg) { background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); } } @@ -358,7 +452,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}"); @@ -410,12 +505,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; } } @@ -507,7 +602,7 @@ &.active, .open .dropdown-toggle& { color: @color; - background-color: darken(@background, 8%); + background-color: darken(@background, 10%); border-color: darken(@border, 12%); } &:active, @@ -660,19 +755,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)); } @@ -791,7 +880,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); @@ -808,34 +897,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 // diff --git a/less/modals.less b/less/modals.less index 21cdee0f4..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 diff --git a/less/navbar.less b/less/navbar.less index 8c4c210b2..34897e225 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -492,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 @@ -613,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/panels.less b/less/panels.less index 20dd14938..9afa4cbfd 100644 --- a/less/panels.less +++ b/less/panels.less @@ -20,7 +20,7 @@ // Optional heading .panel-heading { - padding: 10px 15px; + padding: @panel-heading-padding; border-bottom: 1px solid transparent; .border-top-radius((@panel-border-radius - 1)); @@ -43,7 +43,7 @@ // Optional footer (stays gray in every modifier class) .panel-footer { - padding: 10px 15px; + padding: @panel-footer-padding; background-color: @panel-footer-bg; border-top: 1px solid @panel-inner-border; .border-bottom-radius((@panel-border-radius - 1)); @@ -199,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 696d74c7d..bf6af40a0 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -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 { diff --git a/less/progress-bars.less b/less/progress-bars.less index 76c87be17..74b702843 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -6,13 +6,6 @@ // Bar animations // ------------------------- -// WebKit -@-webkit-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - -// Spec and IE10+ @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } @@ -58,6 +51,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-embed.less b/less/responsive-embed.less new file mode 100644 index 000000000..a884d49fe --- /dev/null +++ b/less/responsive-embed.less @@ -0,0 +1,34 @@ +// Embeds responsive +// +// Credit: Nicolas Gallagher and SUIT CSS. + +.embed-responsive { + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; + + .embed-responsive-item, + iframe, + embed, + object { + position: absolute; + top: 0; + left: 0; + bottom: 0; + height: 100%; + width: 100%; + border: 0; + } + + // Modifier class for 16:9 aspect ratio + &.embed-responsive-16by9 { + padding-bottom: 56.25%; + } + + // Modifier class for 4:3 aspect ratio + &.embed-responsive-4by3 { + padding-bottom: 75%; + } +} 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/type.less b/less/type.less index 5e2a21905..91298f1c0 100644 --- a/less/type.less +++ b/less/type.less @@ -81,6 +81,12 @@ small, // Undo browser default styling cite { font-style: normal; } +mark, +.mark { + background-color: @state-warning-bg; + padding: .2em; +} + // Alignment .text-left { text-align: left; } .text-right { text-align: right; } @@ -141,7 +147,7 @@ cite { font-style: normal; } // Lists -// -------------------------------------------------- +// ------------------------- // Unordered and Ordered lists ul, @@ -195,8 +201,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); @@ -206,13 +216,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], diff --git a/less/variables.less b/less/variables.less index 3846adc59..43d4efd00 100644 --- a/less/variables.less +++ b/less/variables.less @@ -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; @@ -558,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; @@ -643,17 +643,26 @@ //** 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-hover-color: @list-group-link-color; @list-group-link-heading-color: #333; @@ -663,6 +672,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 |
