diff options
| author | Mark Otto <[email protected]> | 2014-03-06 21:32:52 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-03-06 21:32:52 -0800 |
| commit | c8614c0f15f0ce78426c6403e57aff22c3ce2beb (patch) | |
| tree | 673d1a347374a8bf53a127c050dbc57762af3782 /less | |
| parent | d1a7271ea1272e0f9775d49e6a84ee49819e0094 (diff) | |
| parent | fab10b643eb1a2038fb31305f0b038b7a9a8554d (diff) | |
| download | bootstrap-c8614c0f15f0ce78426c6403e57aff22c3ce2beb.tar.xz bootstrap-c8614c0f15f0ce78426c6403e57aff22c3ce2beb.zip | |
Merge branch 'master' into pr/12490
Conflicts:
less/list-group.less
Diffstat (limited to 'less')
| -rw-r--r-- | less/.csscomb.json | 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/forms.less | 61 | ||||
| -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 | 6 | ||||
| -rw-r--r-- | less/mixins.less | 112 | ||||
| -rw-r--r-- | less/modals.less | 8 | ||||
| -rw-r--r-- | less/navbar.less | 30 | ||||
| -rw-r--r-- | less/panels.less | 97 | ||||
| -rw-r--r-- | less/popovers.less | 22 | ||||
| -rw-r--r-- | less/progress-bars.less | 16 | ||||
| -rw-r--r-- | less/responsive-utilities.less | 13 | ||||
| -rw-r--r-- | less/tables.less | 4 | ||||
| -rw-r--r-- | less/thumbnails.less | 2 | ||||
| -rw-r--r-- | less/type.less | 23 | ||||
| -rw-r--r-- | less/variables.less | 58 |
23 files changed, 321 insertions, 203 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..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/forms.less b/less/forms.less index d0189d0cc..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; } @@ -133,9 +133,10 @@ output { .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] & { @@ -150,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; } @@ -256,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 @@ -334,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; @@ -399,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 4990002c4..b2f252488 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -64,7 +64,9 @@ a.list-group-item { text-decoration: none; background-color: @list-group-hover-bg; } - +} + +.list-group-item { // Disabled state &.disabled, &.disabled:hover, @@ -72,7 +74,7 @@ a.list-group-item { background-color: @list-group-disabled-bg; color: @list-group-disabled-color; border-color: @list-group-disabled-border; - + // Force color to inherit for custom content .list-group-item-heading { color: inherit; diff --git a/less/mixins.less b/less/mixins.less index ae746d83a..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 @@ -141,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; @@ -149,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 @@ -230,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. @@ -253,7 +274,6 @@ -webkit-user-select: @select; -moz-user-select: @select; -ms-user-select: @select; // IE10+ - -o-user-select: @select; user-select: @select; } @@ -360,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}"); @@ -412,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; } } @@ -629,10 +650,7 @@ } .responsive-invisibility() { - &, - tr&, - th&, - td& { display: none !important; } + display: none !important; } @@ -665,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)); } @@ -796,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); @@ -813,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 // diff --git a/less/modals.less b/less/modals.less index e7f3d726e..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,7 +120,6 @@ // Scale up the modal @media (min-width: @screen-sm-min) { - // Automatically set modal's width for larger viewports .modal-dialog { width: @modal-md; @@ -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 ddb67b9f7..34897e225 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -155,7 +155,7 @@ padding: @navbar-padding-vertical @navbar-padding-horizontal; font-size: @font-size-large; line-height: @line-height-computed; - height: @line-height-computed; + height: @navbar-height; &:hover, &:focus { @@ -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 e677d2b29..bb3593c87 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 // @@ -27,25 +58,23 @@ .panel { > .list-group { margin-bottom: 0; + .list-group-item { border-width: 1px 0; border-radius: 0; - &:first-child { - border-top: 0; - } - &:last-child { - border-bottom: 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)); } } // Add border bottom radius for last one &:last-child { .list-group-item:last-child { + border-bottom: 0; .border-bottom-radius((@panel-border-radius - 1)); } } @@ -72,6 +101,8 @@ // 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 { @@ -89,6 +120,8 @@ // 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 { > tr:last-child { @@ -126,12 +159,22 @@ > td:last-child { border-right: 0; } - &:first-child > th, - &:first-child > td { - border-top: 0; + } + } + > thead, + > tbody { + > tr:first-child { + > td, + > th { + border-bottom: 0; } - &:last-child > th, - &:last-child > td { + } + } + > tbody, + > tfoot { + > tr:last-child { + > td, + > th { border-bottom: 0; } } @@ -144,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 diff --git a/less/popovers.less b/less/popovers.less index 345bb1a31..696d74c7d 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 { @@ -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/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/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 a55730dfe..c63e5d9f2 100644 --- a/less/type.less +++ b/less/type.less @@ -141,7 +141,7 @@ cite { font-style: normal; } // Lists -// -------------------------------------------------- +// ------------------------- // Unordered and Ordered lists ul, @@ -165,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; - } } } @@ -198,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); @@ -209,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], @@ -233,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, diff --git a/less/variables.less b/less/variables.less index 814f45351..823ef859c 100644 --- a/less/variables.less +++ b/less/variables.less @@ -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 // @@ -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 // //## @@ -505,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 @@ -538,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; @@ -634,9 +654,9 @@ @list-group-active-text-color: lighten(@list-group-active-bg, 40%); //** Text color of disabled list elements -@list-group-disabled-color: @grey-light; // Or something else you want +@list-group-disabled-color: @gray-light; //** Background color of disabled list elements -@list-group-disabled-bg: @grey-ligher; // Or something else you want +@list-group-disabled-bg: @gray-lighter; //** Border color of disabled list elements @list-group-disabled-border: #eee; // Or something else you want @list-group-disabled-text-color: lighten(@list-group-disabled-bg, 40%); // Or something else you want @@ -651,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 @@ -798,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 @@ -813,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; |
