From 2ae5fdf9ddbff98c55e47b81d7150b8d960ad342 Mon Sep 17 00:00:00 2001 From: Bernardo Gurgel Filho Date: Sun, 23 Aug 2015 01:59:48 -0300 Subject: Convert tooltip's arrows to generated CSS content via :before --- scss/_tooltip.scss | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) (limited to 'scss') diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 941579ec9..23a18e7de 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -16,10 +16,11 @@ padding: $tooltip-arrow-width 0; margin-top: -3px; - .tooltip-arrow { + .tooltip-inner:before { bottom: 0; left: 50%; margin-left: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color; } @@ -29,10 +30,11 @@ padding: 0 $tooltip-arrow-width; margin-left: 3px; - .tooltip-arrow { + .tooltip-inner:before { top: 50%; left: 0; margin-top: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-right-color: $tooltip-arrow-color; } @@ -42,10 +44,11 @@ padding: $tooltip-arrow-width 0; margin-top: 3px; - .tooltip-arrow { + .tooltip-inner:before { top: 0; left: 50%; margin-left: -$tooltip-arrow-width; + content: ""; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color; } @@ -55,10 +58,11 @@ padding: 0 $tooltip-arrow-width; margin-left: -3px; - .tooltip-arrow { + .tooltip-inner:before { top: 50%; right: 0; margin-top: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-left-color: $tooltip-arrow-color; } @@ -73,13 +77,12 @@ text-align: center; background-color: $tooltip-bg; @include border-radius($border-radius); -} -// Arrows -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; + &:before { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } } -- cgit v1.2.3 From 8ef66df6d793afbda487c1a4505d0a6576252ec4 Mon Sep 17 00:00:00 2001 From: Bernardo Gurgel Filho Date: Sun, 23 Aug 2015 17:54:38 -0300 Subject: Convert popover's arrows to generated CSS content via :before/:after --- scss/_popover.scss | 124 ++++++++++++++++++++++++++++++++--------------------- 1 file changed, 74 insertions(+), 50 deletions(-) (limited to 'scss') diff --git a/scss/_popover.scss b/scss/_popover.scss index 674a8f31f..5ff8bd532 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -23,19 +23,22 @@ &.bs-tether-element-attached-bottom { margin-top: -$popover-arrow-width; - .popover-arrow { - bottom: -$popover-arrow-outer-width; + &::before, + &::after { left: 50%; + border-bottom-width: 0; + } + + &::before { + bottom: -$popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width; border-top-color: $popover-arrow-outer-color; - border-bottom-width: 0; - &::after { - bottom: 1px; - margin-left: -$popover-arrow-width; - content: ""; - border-top-color: $popover-arrow-color; - border-bottom-width: 0; - } + } + + &::after { + bottom: -($popover-arrow-outer-width - 1); + margin-left: -$popover-arrow-width; + border-top-color: $popover-arrow-color; } } @@ -43,19 +46,22 @@ &.bs-tether-element-attached-left { margin-left: $popover-arrow-width; - .popover-arrow { + &::before, + &::after { top: 50%; + border-left-width: 0; + } + + &::before { left: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width; border-right-color: $popover-arrow-outer-color; - border-left-width: 0; - &::after { - bottom: -$popover-arrow-width; - left: 1px; - content: ""; - border-right-color: $popover-arrow-color; - border-left-width: 0; - } + } + + &::after { + left: -($popover-arrow-outer-width - 1); + margin-top: -($popover-arrow-outer-width - 1); + border-right-color: $popover-arrow-color; } } @@ -63,19 +69,34 @@ &.bs-tether-element-attached-top { margin-top: $popover-arrow-width; - .popover-arrow { - top: -$popover-arrow-outer-width; + &::before, + &::after { left: 50%; - margin-left: -$popover-arrow-outer-width; border-top-width: 0; + } + + &::before { + top: -$popover-arrow-outer-width; + margin-left: -$popover-arrow-outer-width; border-bottom-color: $popover-arrow-outer-color; - &::after { - top: 1px; - margin-left: -$popover-arrow-width; - content: ""; - border-top-width: 0; - border-bottom-color: $popover-arrow-color; - } + } + + &::after { + top: -($popover-arrow-outer-width - 1); + margin-left: -$popover-arrow-width; + border-bottom-color: $popover-title-bg; + } + + // This will remove the popover-title's border just below the arrow + .popover-title::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: 20px; + margin-left: -10px; + content: ""; + border-bottom: 1px solid $popover-title-bg; } } @@ -83,19 +104,22 @@ &.bs-tether-element-attached-right { margin-left: -$popover-arrow-width; - .popover-arrow { + &::before, + &::after { top: 50%; + border-right-width: 0; + } + + &::before { right: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width; - border-right-width: 0; border-left-color: $popover-arrow-outer-color; - &::after { - right: 1px; - bottom: -$popover-arrow-width; - content: ""; - border-right-width: 0; - border-left-color: $popover-arrow-color; - } + } + + &::after { + right: -($popover-arrow-outer-width - 1); + margin-top: -($popover-arrow-outer-width - 1); + border-left-color: $popover-arrow-color; } } } @@ -120,21 +144,21 @@ // // .popover-arrow is outer, .popover-arrow::after is inner -.popover-arrow { - &, - &::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } +.popover::before, +.popover::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } -.popover-arrow { + +.popover::before { + content: ""; border-width: $popover-arrow-outer-width; } -.popover-arrow::after { +.popover::after { content: ""; border-width: $popover-arrow-width; } -- cgit v1.2.3 From 64251a12a4d30f1b61cbbbf17ef603a0d083e60b Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 10 May 2016 10:29:47 +0100 Subject: Make named anchor/placeholder link style reset more specific This avoids applying the reset to named anchors/placeholder links (links without an `href`) that have explicitly been made keyboard-focusable (using `tabindex`). This is not fool-proof - it's not easy/straightforward to check for the actual `tabindex` value itself, to ensure it's positive, not will this apply if a link has been "blessed" with `tabindex` via JS. However, this should catch most common uses (and gives a reasonably valid way around the issue for developers who, for whatever reason, DO want to use links without `href` - as side effect, it forces best practice of at least ensuring these links can also be focused with the keyboard) --- scss/_reboot.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/_reboot.scss b/scss/_reboot.scss index f2876d1c6..84daa09b3 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -171,12 +171,13 @@ a { } } -// And undo these styles for placeholder links/named anchors (without href). +// And undo these styles for placeholder links/named anchors (without href) +// which have not been made explicitly keyboard-focusable (without tabindex). // It would be more straightforward to just use a[href] in previous block, but that // causes specificity issues in many other styles that are too complex to fix. // See https://github.com/twbs/bootstrap/issues/19402 -a:not([href]) { +a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; -- cgit v1.2.3 From df6facf66e19566b962327899f981258b695076c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 May 2016 11:12:22 -0700 Subject: Alternate fix to #19006: Add a single variable for controlling that inner 1px padding on .popover --- scss/_popover.scss | 2 +- scss/_variables.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_popover.scss b/scss/_popover.scss index 9ea8c1475..a5de83c37 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -5,7 +5,7 @@ z-index: $zindex-popover; display: block; max-width: $popover-max-width; - padding: 1px; + padding: $popover-inner-padding; // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); diff --git a/scss/_variables.scss b/scss/_variables.scss index d50d8e281..d129f9fee 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -606,6 +606,7 @@ $tooltip-arrow-color: $tooltip-bg !default; // Popovers +$popover-inner-padding: 1px !default; $popover-bg: #fff !default; $popover-max-width: 276px !default; $popover-border-width: $border-width !default; -- cgit v1.2.3 From a6b797d17b995774de646658bfb91ad8a445ef2f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 May 2016 11:12:40 -0700 Subject: Restore hiding of the .popover-title with :empty --- scss/_popover.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'scss') diff --git a/scss/_popover.scss b/scss/_popover.scss index a5de83c37..6e6fe3c9c 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -112,6 +112,10 @@ border-bottom: $popover-border-width solid darken($popover-title-bg, 5%); $offset-border-width: ($border-width / $font-size-root); @include border-radius(($border-radius-lg - $offset-border-width) ($border-radius-lg - $offset-border-width) 0 0); + + &:empty { + display: none; + } } .popover-content { -- cgit v1.2.3 From 88f02007e05b8ad9c2c3ee6b83e2674faf8ffaaf Mon Sep 17 00:00:00 2001 From: Catalin Zalog Date: Tue, 17 May 2016 16:26:22 +0300 Subject: Update _spacing.scss --- scss/utilities/_spacing.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index b7ff044b6..6efebfc79 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -1,6 +1,7 @@ -// Width +// Width and height .w-100 { width: 100% !important; } +.h-100 { height: 100% !important; } // Margin and Padding -- cgit v1.2.3 From a90b36918f026dd291bef09f66fe8c212fe7984a Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 20 May 2016 09:04:31 -0700 Subject: Add "The Bootstrap Authors" to copyright notices (#19936) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ❤️❤️❤️ https://github.com/twbs/bootstrap/graphs/contributors --- scss/bootstrap.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index f99a722ca..7697abb18 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -1,5 +1,6 @@ /*! * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com) + * Copyright 2011-2016 The Bootstrap Authors * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -- cgit v1.2.3 From 50e2225bd5c7d7f8ce5a037848249132c54c8ffb Mon Sep 17 00:00:00 2001 From: Catalin Zalog Date: Sat, 28 May 2016 03:25:24 +0300 Subject: Update _flex.scss --- scss/utilities/_flex.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index a61135ce2..502885a81 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -8,6 +8,7 @@ @include media-breakpoint-up($breakpoint) { .flex-#{$breakpoint}-first { order: -1; } .flex-#{$breakpoint}-last { order: 1; } + .flex-#{$breakpoint}-unordered { order: 0; } } // Alignment for every item -- cgit v1.2.3 From 26731b337846db43374110dade89de4dbd4156ba Mon Sep 17 00:00:00 2001 From: Jerad Rutnam Date: Thu, 16 Jun 2016 22:44:39 +0530 Subject: Contextual background-inverse text color fix --- scss/utilities/_background.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss index b1589792f..a81dcff2c 100644 --- a/scss/utilities/_background.scss +++ b/scss/utilities/_background.scss @@ -2,10 +2,6 @@ // Contextual backgrounds // -.bg-inverse { - background-color: $brand-inverse; -} - .bg-faded { background-color: $gray-lightest; } @@ -19,3 +15,5 @@ @include bg-variant('.bg-warning', $brand-warning); @include bg-variant('.bg-danger', $brand-danger); + +@include bg-variant('.bg-inverse', $brand-inverse); -- cgit v1.2.3 From b17008c771b97e4fc55c6cc340309291c9b933cc Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 19 Jun 2016 22:23:16 -0700 Subject: Add comparability guard to _assert-ascending(); fixes #20123 (#20142) [skip sauce] [skip validator] --- scss/_variables.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index d129f9fee..8a3df44be 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -21,7 +21,11 @@ $prev-key: null; $prev-num: null; @each $key, $num in $map { - @if $prev-num != null and $prev-num >= $num { + @if $prev-num == null { + // Do nothing + } @else if not comparable($prev-num, $num) { + @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } @else if $prev-num >= $num { @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; } $prev-key: $key; -- cgit v1.2.3 From a358fc9dc1b71c4177735c4ca27c9da350d655af Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 20 Jun 2016 16:18:21 -0700 Subject: Replace grunt-postcss with postcss-cli (#20140) Refs #19990 Continues the degruntification process. Also removes mq4-hover-shim for now, since it doesn't yet implement the standard PostCSS plugin interface. --- scss/mixins/_hover.scss | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss index 3a11254e8..4a648a54d 100644 --- a/scss/mixins/_hover.scss +++ b/scss/mixins/_hover.scss @@ -1,14 +1,15 @@ @mixin hover { - @if $enable-hover-media-query { - // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover - // Currently shimmed by https://github.com/twbs/mq4-hover-shim - @media (hover: hover) { - &:hover { @content } - } - } - @else { + // TODO: re-enable along with mq4-hover-shim +// @if $enable-hover-media-query { +// // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover +// // Currently shimmed by https://github.com/twbs/mq4-hover-shim +// @media (hover: hover) { +// &:hover { @content } +// } +// } +// @else { &:hover { @content } - } +// } } @mixin hover-focus { -- cgit v1.2.3 From 1347cb0152c992f8b71e185fa7ef1794fc94d931 Mon Sep 17 00:00:00 2001 From: Geremia Taglialatela Date: Fri, 8 Jul 2016 05:38:44 +0200 Subject: Update SCSS-Lint to v0.49.0 (#20250) SCSS-Lint 0.49.0 modifies Shorthand linter to report lint if a shorthand of a length not specified in the allowed_shorthands option is used. New defaults include "4" in the list of allowed shorthands, so we are changing our configuration accordingly. Ref: https://github.com/brigade/scss-lint/commit/e283d1689699f581561fea344df3168128c46d7b --- scss/.scss-lint.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml index af837e4d0..66c63335c 100644 --- a/scss/.scss-lint.yml +++ b/scss/.scss-lint.yml @@ -457,7 +457,7 @@ linters: Shorthand: enabled: true - allowed_shorthands: [1, 2, 3] + allowed_shorthands: [1, 2, 3, 4] SingleLinePerProperty: enabled: false -- cgit v1.2.3 From 873cf751c03e5d1b7e66f1ad599b56ce8c38b3cf Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 11 Jul 2016 20:50:27 -0700 Subject: Remove forced default focus outline (#20275) As this causes non-standard dotted outline on checkboxes/radio buttons in OS X Firefox Ports #19935 to v4 Refs #19933 [skip sauce] --- scss/mixins/_tab-focus.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_tab-focus.scss b/scss/mixins/_tab-focus.scss index 7df0ae7ca..f16ed6428 100644 --- a/scss/mixins/_tab-focus.scss +++ b/scss/mixins/_tab-focus.scss @@ -1,9 +1,9 @@ // WebKit-style focus @mixin tab-focus() { - // Default - outline: thin dotted; - // WebKit + // WebKit-specific. Other browsers will keep their default outline style. + // (Initially tried to also force default via `outline: initial`, + // but that seems to erroneously remove the outline in Firefox altogether.) outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } -- cgit v1.2.3 From af6eaf54387a9eb8e81bc99899a42422babb9617 Mon Sep 17 00:00:00 2001 From: An Yang Date: Wed, 20 Jul 2016 01:01:25 +0000 Subject: Progress bar:fix border-radius to use variable progress-border-radius instead of border-radius --- scss/_progress.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'scss') diff --git a/scss/_progress.scss b/scss/_progress.scss index b2bcb3056..c2364feee 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -26,7 +26,7 @@ // Reset the default appearance appearance: none; // Set overall border radius - @include border-radius($border-radius); + @include border-radius($progress-border-radius); } // Filled-in portion of the bar @@ -37,30 +37,30 @@ } .progress[value]::-moz-progress-bar { background-color: $progress-bar-color; - @include border-left-radius($border-radius); + @include border-left-radius($progress-border-radius); } .progress[value]::-webkit-progress-value { background-color: $progress-bar-color; - @include border-left-radius($border-radius); + @include border-left-radius($progress-border-radius); } // Tweaks for full progress bar .progress[value="100"]::-moz-progress-bar { - @include border-right-radius($border-radius); + @include border-right-radius($progress-border-radius); } .progress[value="100"]::-webkit-progress-value { - @include border-right-radius($border-radius); + @include border-right-radius($progress-border-radius); } // Unfilled portion of the bar .progress[value]::-webkit-progress-bar { background-color: $progress-bg; - @include border-radius($border-radius); + @include border-radius($progress-border-radius); @include box-shadow($progress-box-shadow); } base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only .progress[value] { background-color: $progress-bg; - @include border-radius($border-radius); + @include border-radius($progress-border-radius); @include box-shadow($progress-box-shadow); } @@ -68,7 +68,7 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes @media screen and (min-width:0\0) { .progress { background-color: $progress-bg; - @include border-radius($border-radius); + @include border-radius($progress-border-radius); @include box-shadow($progress-box-shadow); } .progress-bar { @@ -76,10 +76,10 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes height: $spacer-y; text-indent: -999rem; // Simulate hiding of value as in native `` background-color: $progress-bar-color; - @include border-left-radius($border-radius); + @include border-left-radius($progress-border-radius); } .progress[width="100%"] { - @include border-right-radius($border-radius); + @include border-right-radius($progress-border-radius); } } -- cgit v1.2.3 From d125860464d2a47f957193440097b502acf95832 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 19 Jul 2016 22:10:36 +0100 Subject: change navbar-toggler to use SVG background image --- scss/_navbar.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 6c4e9efa5..574420b94 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -105,10 +105,16 @@ // Bootstrap JavaScript plugin. .navbar-toggler { + box-sizing: content-box; + width: 1em; + height: 1em; padding: .5rem .75rem; font-size: $font-size-lg; line-height: 1; - background: none; + background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Crect%20y%3D%222%22%20width%3D%2216%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%227%22%20width%3D%2216%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%2212%22%20width%3D%2216%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E) no-repeat 50% 50%; + background-clip: content-box; + background-origin: content-box; + background-size: 1em 1em; border: $border-width solid transparent; @include border-radius($btn-border-radius); -- cgit v1.2.3 From a8879c8f82ec3debb8e225844dc4561e2900beda Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 23 Jul 2016 17:12:43 -0700 Subject: Follow-up to #19099 for grid fixes - Restores two-mixin approach to generating semantic grid columns (now with 'make-col-ready' and 'make-col') - Removes need for .col-xs-12 by restoring the mass list of all grid tier classes to set position, min-height, and padding - Adds an initial 'width: 100%' to flexbox grid column prep (later overridden by the column sizing in 'flex' shorthand or 'width') to prevent flexbox columns from collapsing in lower viewports --- scss/mixins/_grid-framework.scss | 32 +++++++++++++++++++++----------- scss/mixins/_grid.scss | 13 +++++++++++-- 2 files changed, 32 insertions(+), 13 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index cb25be92a..4b69c2761 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -4,22 +4,32 @@ // any value of `$grid-columns`. @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { + + // Common properties for all breakpoints + %grid-column { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: ($gutter / 2); + padding-right: ($gutter / 2); + + @if $enable-flex { + width: 100%; + } + } + $breakpoint-counter: 0; @each $breakpoint in map-keys($breakpoints) { $breakpoint-counter: ($breakpoint-counter + 1); - @include media-breakpoint-up($breakpoint, $breakpoints) { - @if $enable-flex { - .col-#{$breakpoint} { - position: relative; - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - min-height: 1px; - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); - } + + @for $i from 1 through $columns { + .col-#{$breakpoint}-#{$i} { + @extend %grid-column; } + } + @include media-breakpoint-up($breakpoint, $breakpoints) { @for $i from 1 through $columns { .col-#{$breakpoint}-#{$i} { @include make-col($i, $columns, $gutter); diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 3ba4f43bc..87f112278 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -33,12 +33,21 @@ margin-right: ($gutter / -2); } -@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { position: relative; - min-height: 1px; + min-height: 1px; // Prevent collapsing padding-right: ($gutter / 2); padding-left: ($gutter / 2); + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + @if $enable-flex { + width: 100%; + } +} + +@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out -- cgit v1.2.3 From cdc55a46c282416f7a59ef8b08da817e21b1b57d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 23 Jul 2016 17:21:00 -0700 Subject: linting --- scss/mixins/_grid-framework.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 4b69c2761..be2ee50db 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -11,8 +11,8 @@ // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding - padding-left: ($gutter / 2); padding-right: ($gutter / 2); + padding-left: ($gutter / 2); @if $enable-flex { width: 100%; -- cgit v1.2.3 From 0a31dacf3e0c43a73b2e61e266155b9dcce35339 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jul 2016 12:34:00 -0700 Subject: Simplify system font stack to remove Linux fonts as they're too varied for our purposes --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 8a3df44be..da9f5ef5b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -158,7 +158,7 @@ $grid-gutter-width: 30px !default; // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; -- cgit v1.2.3 From adba459749bca49df0d54d2f2a85aa8bd08b3b43 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jul 2016 17:22:06 -0700 Subject: restore the .col-{bp} class for flexbox auto layout --- scss/mixins/_grid-framework.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'scss') diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index be2ee50db..efe923a1c 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -30,6 +30,19 @@ } @include media-breakpoint-up($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + @if $enable-flex { + .col-#{$breakpoint} { + position: relative; + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + min-height: 1px; + padding-right: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); + } + } + @for $i from 1 through $columns { .col-#{$breakpoint}-#{$i} { @include make-col($i, $columns, $gutter); -- cgit v1.2.3 From d506bd8e50b23118e3c380511f94e29881867721 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 26 Jul 2016 20:16:23 -0700 Subject: Update navbar-toggleable-* styles to incorporate changes from #20083 --- scss/_navbar.scss | 70 ++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 48 insertions(+), 22 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 6c4e9efa5..8d8352c73 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -117,28 +117,6 @@ } } -// scss-lint:disable ImportantRule -// Custom override for -.navbar-toggleable { - &-xs { - @include media-breakpoint-up(sm) { - display: block !important; - } - } - &-sm { - @include media-breakpoint-up(md) { - display: block !important; - } - } - &-md { - @include media-breakpoint-up(lg) { - display: block !important; - } - } -} -// scss-lint:enable ImportantRule - - // Navigation // // Custom navbar navigation built on the base `.nav` styles. @@ -230,3 +208,51 @@ background-color: rgba(255,255,255,.075); } } + + +// Navbar toggleable +// +// Custom override for collapse plugin in navbar. + +// scss-lint:disable ImportantRule +.navbar-toggleable { + &-xs { + @include clearfix; + @include media-breakpoint-down(xs) { + .navbar-nav .nav-item { + float: none; + margin-left: 0; + } + } + @include media-breakpoint-up(sm) { + display: block !important; + } + } + + &-sm { + @include clearfix; + @include media-breakpoint-down(sm) { + .navbar-nav .nav-item { + float: none; + margin-left: 0; + } + } + @include media-breakpoint-up(md) { + display: block !important; + } + } + + &-md { + @include clearfix; + @include media-breakpoint-down(md) { + .navbar-nav .nav-item { + float: none; + margin-left: 0; + } + } + @include media-breakpoint-up(lg) { + display: block !important; + } + } +} +// scss-lint:enable ImportantRule -- cgit v1.2.3 From 8e9a9a5960697cd8cd698ca6b4d8733bd7872de6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 26 Jul 2016 21:09:39 -0700 Subject: Enable flexbox grid CSS on our docs page - Creates new flexbox grid Sass file in our docs assets - Updates the Gruntfile to compile said new Sass file and minify the output - Update notice on flexbox docs page for how it works - Only enable compiled flexbox grid CSS in hosted docs site, not in dev (for easier and specific debugging of all flexbox features) --- scss/bootstrap-grid.scss | 44 ++------------------------------------------ 1 file changed, 2 insertions(+), 42 deletions(-) (limited to 'scss') diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index 5dc331eb6..40680ca96 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -8,53 +8,13 @@ // Variables // - -// Grid breakpoints -// -// Define the minimum and maximum dimensions at which your layout will change, -// adapting to different screen sizes, for use in media queries. - -$grid-breakpoints: ( - // Extra small screen / phone - xs: 0, - // Small screen / phone - sm: 544px, - // Medium screen / tablet - md: 768px, - // Large screen / desktop - lg: 992px, - // Extra large screen / wide desktop - xl: 1200px -) !default; - - -// Grid containers -// -// Define the maximum width of `.container` for different screen sizes. - -$container-max-widths: ( - sm: 576px, - md: 720px, - lg: 940px, - xl: 1140px -) !default; - - -// Grid columns -// -// Set the number of columns and specify the width of the gutters. - -$grid-columns: 12 !default; -$grid-gutter-width: 1.875rem !default; // 30px - +@import "custom"; +@import "variables"; // // Grid mixins // -@import "custom"; -@import "variables"; - @import "mixins/clearfix"; @import "mixins/breakpoints"; @import "mixins/grid-framework"; -- cgit v1.2.3 From 24e992a6ffbb3b54424eb1042d49005124b265d9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Jul 2016 09:31:24 -0700 Subject: bump versions --- scss/bootstrap.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index 7697abb18..ab1201f32 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com) + * Bootstrap v4.0.0-alpha.3 (http://getbootstrap.com) * Copyright 2011-2016 The Bootstrap Authors * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) -- cgit v1.2.3 From c52e1334a3efd24a109e2f45be341b3c11592890 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Jul 2016 21:12:44 -0700 Subject: Fixes #20291: Update variable usage for input group addon Instead of the regular border-radius var, use the input ones to match sizing with their associated controls. --- scss/_input-group.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/_input-group.scss b/scss/_input-group.scss index fff9cb560..b447a3282 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -90,18 +90,18 @@ text-align: center; background-color: $input-group-addon-bg; border: $input-btn-border-width solid $input-group-addon-border-color; - @include border-radius($border-radius); + @include border-radius($input-border-radius); // Sizing &.form-control-sm { padding: $input-padding-y-sm $input-padding-x-sm; font-size: $font-size-sm; - @include border-radius($border-radius-sm); + @include border-radius($input-border-radius-sm); } &.form-control-lg { padding: $input-padding-y-lg $input-padding-x-lg; font-size: $font-size-lg; - @include border-radius($border-radius-lg); + @include border-radius($input-border-radius-lg); } // scss-lint:disable QualifyingElement -- cgit v1.2.3 From 4f947f46cebbe69837cba6fe8201caf5d564516c Mon Sep 17 00:00:00 2001 From: Allan Chau Date: Sat, 30 Jul 2016 18:09:11 +0930 Subject: Remove unused $size parameter --- scss/mixins/_grid.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 87f112278..c24d1dbff 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -33,7 +33,7 @@ margin-right: ($gutter / -2); } -@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col-ready($columns: $grid-columns, $gutter: $grid-gutter-width) { position: relative; min-height: 1px; // Prevent collapsing padding-right: ($gutter / 2); -- cgit v1.2.3 From 935e0ccbaf1b709b3a302a4e27739c84c5133b0c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 8 Aug 2016 20:35:58 -0700 Subject: fixes #20469 and #20473 without misuing dash --- scss/_tables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_tables.scss b/scss/_tables.scss index d865884ec..342c788c9 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -101,7 +101,7 @@ // Inverse styles // -// Same table markup, but inverted color scheme—dark background and light text. +// Same table markup, but inverted color scheme: dark background and light text. .thead-inverse { th { -- cgit v1.2.3 From 1bdf6c4bd609b3dbe528b46a880f3b702b0f4b0c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 19 Aug 2016 21:00:57 -0700 Subject: Fixes #20513: Remove all default margin on .media given it's utility purpose and our margin utils --- scss/_media.scss | 8 -------- 1 file changed, 8 deletions(-) (limited to 'scss') diff --git a/scss/_media.scss b/scss/_media.scss index d970c946a..d1ebbcdeb 100644 --- a/scss/_media.scss +++ b/scss/_media.scss @@ -1,7 +1,6 @@ @if $enable-flex { .media { display: flex; - margin-bottom: $spacer; } .media-body { flex: 1; @@ -13,13 +12,6 @@ align-self: flex-end; } } @else { - .media { - margin-top: $media-margin-top; - - &:first-child { - margin-top: 0; - } - } .media, .media-body { overflow: hidden; -- cgit v1.2.3 From 910f3ec4989a22cf93a14c679556ae35e4f29244 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Sep 2016 17:41:38 -0700 Subject: fixes #20485: use rem units in alert dismiss (#20625) --- scss/_alert.scss | 6 +++--- scss/_variables.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_alert.scss b/scss/_alert.scss index 55fc101dc..433177101 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -26,13 +26,13 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($alert-padding + 20px); + padding-right: ($alert-padding * 2); // Adjust close link position .close { position: relative; - top: -2px; - right: -21px; + top: -.125rem; + right: -$alert-padding; color: inherit; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index da9f5ef5b..05c008820 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -685,7 +685,7 @@ $modal-sm: 300px !default; // // Define alert colors, border radius, and padding. -$alert-padding: 15px !default; +$alert-padding: 1rem !default; $alert-border-radius: $border-radius !default; $alert-link-font-weight: bold !default; $alert-border-width: $border-width !default; -- cgit v1.2.3 From 833028a779d95c071faee9551ea4f91348d7d92c Mon Sep 17 00:00:00 2001 From: Franco Moya Date: Sun, 4 Sep 2016 21:43:38 -0300 Subject: Remove unused $variables in grid mixins (#20597) --- scss/mixins/_grid-framework.scss | 2 +- scss/mixins/_grid.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index efe923a1c..8b17d7843 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -45,7 +45,7 @@ @for $i from 1 through $columns { .col-#{$breakpoint}-#{$i} { - @include make-col($i, $columns, $gutter); + @include make-col($i, $columns); } } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index c24d1dbff..fa9b3995b 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -33,7 +33,7 @@ margin-right: ($gutter / -2); } -@mixin make-col-ready($columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col-ready($gutter: $grid-gutter-width) { position: relative; min-height: 1px; // Prevent collapsing padding-right: ($gutter / 2); @@ -47,7 +47,7 @@ } } -@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col($size, $columns: $grid-columns) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out -- cgit v1.2.3 From 99425321dc2b2a038ffa701854ff0133a8f189c3 Mon Sep 17 00:00:00 2001 From: Bass Jobsen Date: Mon, 5 Sep 2016 02:47:18 +0200 Subject: Make .card class inside .card-columns display: block too (#20447) See: https://github.com/twbs/bootstrap/pull/18255#issuecomment-237034763 --- scss/_card.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index a419d4d08..6fa77e61e 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -314,7 +314,6 @@ column-gap: $card-columns-sm-up-column-gap; .card { - display: inline-block; width: 100%; // Don't let them exceed the column width } } -- cgit v1.2.3 From 9c720285b5b2abce4d57c802701f101f81485ca0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Sep 2016 17:55:34 -0700 Subject: Fixes #20619: Add important to the hover/focus as well (#20626) --- scss/mixins/_text-emphasis.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/mixins/_text-emphasis.scss b/scss/mixins/_text-emphasis.scss index 27a4f454e..9cd4b6a4f 100644 --- a/scss/mixins/_text-emphasis.scss +++ b/scss/mixins/_text-emphasis.scss @@ -6,7 +6,7 @@ } a#{$parent} { @include hover-focus { - color: darken($color, 10%); + color: darken($color, 10%) !important; } } } -- cgit v1.2.3 From dc5c1421c6ee793bb8b5feced401472de806c70c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Sep 2016 17:58:20 -0700 Subject: Disable important flag on Sass linter (#20627) --- scss/.scss-lint.yml | 2 +- scss/_navbar.scss | 2 -- scss/_print.scss | 2 +- scss/_reboot.scss | 2 +- scss/_tables.scss | 2 -- scss/utilities/_visibility.scss | 2 -- 6 files changed, 3 insertions(+), 9 deletions(-) (limited to 'scss') diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml index 66c63335c..65c365ddb 100644 --- a/scss/.scss-lint.yml +++ b/scss/.scss-lint.yml @@ -89,7 +89,7 @@ linters: enabled: true ImportantRule: - enabled: true + enabled: false ImportPath: enabled: true diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 8d8352c73..881af0db6 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -214,7 +214,6 @@ // // Custom override for collapse plugin in navbar. -// scss-lint:disable ImportantRule .navbar-toggleable { &-xs { @include clearfix; @@ -255,4 +254,3 @@ } } } -// scss-lint:enable ImportantRule diff --git a/scss/_print.scss b/scss/_print.scss index b2c93735c..84556602f 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -1,4 +1,4 @@ -// scss-lint:disable ImportantRule, QualifyingElement +// scss-lint:disable QualifyingElement // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 02c579d32..1a1e4728b 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -1,4 +1,4 @@ -// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty +// scss-lint:disable QualifyingElement, DuplicateProperty // Reboot // diff --git a/scss/_tables.scss b/scss/_tables.scss index 342c788c9..235ec984e 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -184,7 +184,6 @@ } } - // scss-lint:disable ImportantRule tr { float: left; @@ -194,5 +193,4 @@ border: $table-border-width solid $table-border-color; } } - // scss-lint:enable ImportantRule } diff --git a/scss/utilities/_visibility.scss b/scss/utilities/_visibility.scss index 63891677e..cdb142869 100644 --- a/scss/utilities/_visibility.scss +++ b/scss/utilities/_visibility.scss @@ -1,5 +1,3 @@ -// scss-lint:disable ImportantRule - // // Visibility utilities // -- cgit v1.2.3 From 7e18498b64a56dea2fccaa6e1cd61d6cbf700beb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Sep 2016 11:39:37 -0700 Subject: Fixes #20608 and #20578: Consistent checkbox and radio markup (#20629) - Update docs examples to use newer .form-check suite of classes - Update form validation mixin to use newer classes as well --- scss/mixins/_forms.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 026e41e23..b281dd715 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -7,14 +7,8 @@ // Color the label and help text .form-control-feedback, .form-control-label, - .radio, - .checkbox, - .radio-inline, - .checkbox-inline, - &.radio label, - &.checkbox label, - &.radio-inline label, - &.checkbox-inline label, + .form-check-label, + .form-check-inline, .custom-control { color: $color; } -- cgit v1.2.3 From 5495a4b3d383c745065a177d3adb8e5db94acd7f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Sep 2016 12:41:44 -0700 Subject: versions --- scss/bootstrap.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index ab1201f32..219eda217 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap v4.0.0-alpha.3 (http://getbootstrap.com) + * Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com) * Copyright 2011-2016 The Bootstrap Authors * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) -- cgit v1.2.3 From 5713077ba5dd47fbca00d8da05f1e19c7475f29e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 7 Sep 2016 20:38:11 -0700 Subject: Fix #20654 by reverting #20447 (#20665) Cards must be inline-block in columns, otherwise they can get split across columns --- scss/_card.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 6fa77e61e..73b3b0e82 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -314,6 +314,7 @@ column-gap: $card-columns-sm-up-column-gap; .card { + display: inline-block; // Don't let them vertically span multiple columns width: 100%; // Don't let them exceed the column width } } -- cgit v1.2.3 From 07752bab7b248d9c064b7b85dcaeccccecde8fc7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 7 Sep 2016 20:40:12 -0700 Subject: v4: Card image fixes (#20667) * Add .img-fluid to card images in columns to ensure proper resizing * change that variable from regular value to variable * use calc to figure out a tighter border for card images --- scss/_card.scss | 2 +- scss/_variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 73b3b0e82..1644ae466 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -168,7 +168,7 @@ // Card image .card-img { // margin: -1.325rem; - @include border-radius(.25rem); + @include border-radius($card-border-radius-inner); } .card-img-overlay { position: absolute; diff --git a/scss/_variables.scss b/scss/_variables.scss index 05c008820..c8cdbb104 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -581,7 +581,7 @@ $card-spacer-y: .75rem !default; $card-border-width: 1px !default; $card-border-radius: $border-radius !default; $card-border-color: rgba(0,0,0,.125) !default; -$card-border-radius-inner: $card-border-radius !default; +$card-border-radius-inner: calc($card-border-radius - 1px) !default; $card-cap-bg: #f5f5f5 !default; $card-bg: #fff !default; -- cgit v1.2.3 From ed0f097cb8f682570bf91fbd4aacf38cf54f84cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 7 Sep 2016 21:25:14 -0700 Subject: Follow up fix for #20667 (#20672) Use proper Sass variable interpolation to ensure the proper values are compiled and not the literal string of the variable name --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index c8cdbb104..db9c202ff 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -581,7 +581,7 @@ $card-spacer-y: .75rem !default; $card-border-width: 1px !default; $card-border-radius: $border-radius !default; $card-border-color: rgba(0,0,0,.125) !default; -$card-border-radius-inner: calc($card-border-radius - 1px) !default; +$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default; $card-cap-bg: #f5f5f5 !default; $card-bg: #fff !default; -- cgit v1.2.3 From 82e7abcdf301f27096ee180a53a08a1107e8da1a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 8 Sep 2016 21:26:19 -0700 Subject: v4: Custom checkbox and radio alignment (#20671) * Allow text of custom form labels to wrap like the default ones * Switch from using after to force line breaks to float/clear combo in stacked custom forms --- scss/_custom-forms.scss | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) (limited to 'scss') diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index a5f0bdfc4..fe30f9fad 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -11,7 +11,7 @@ .custom-control { position: relative; - display: inline; + display: inline-block; padding-left: $custom-control-gutter; cursor: pointer; @@ -61,7 +61,7 @@ .custom-control-indicator { position: absolute; - top: .0625rem; + top: .25rem; left: 0; display: block; width: $custom-control-indicator-size; @@ -117,13 +117,8 @@ .custom-controls-stacked { .custom-control { - display: inline; - - &::after { - display: block; - margin-bottom: $custom-control-spacer-y; - content: ""; - } + float: left; + clear: left; + .custom-control { margin-left: 0; -- cgit v1.2.3 From ae784c9521101c391ecc98e906ddf18e6aeb459b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 8 Sep 2016 22:15:34 -0700 Subject: Rename margin and padding utilities from .{property}-{side} to .{property}{side} without the extra dash --- scss/utilities/_spacing.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'scss') diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index b7ff044b6..c81a6aa88 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -4,7 +4,7 @@ // Margin and Padding -.m-x-auto { +.mx-auto { margin-right: auto !important; margin-left: auto !important; } @@ -14,18 +14,18 @@ $length-x: map-get($lengths, x); $length-y: map-get($lengths, y); - .#{$abbrev}-a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides - .#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y !important; } - .#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; } - .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; } - .#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; } + .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides + .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; } + .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; } + .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; } + .#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; } // Axes - .#{$abbrev}-x-#{$size} { + .#{$abbrev}x-#{$size} { #{$prop}-right: $length-x !important; #{$prop}-left: $length-x !important; } - .#{$abbrev}-y-#{$size} { + .#{$abbrev}y-#{$size} { #{$prop}-top: $length-y !important; #{$prop}-bottom: $length-y !important; } -- cgit v1.2.3 From a96038b50aaa201271383c95bb117c14f3bc5efb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 8 Sep 2016 22:18:40 -0700 Subject: Revamp background utilities and add new .text-white utility - Rather than mix multiple properties in our color utilities, this splits all color and all background utils into separate classes. - Adds new .text-white class to help lighten text color for darker backgrounds --- scss/mixins/_background-variant.scss | 1 - scss/utilities/_text.scss | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss index ff21ad958..54a734dcc 100644 --- a/scss/mixins/_background-variant.scss +++ b/scss/mixins/_background-variant.scss @@ -2,7 +2,6 @@ @mixin bg-variant($parent, $color) { #{$parent} { - color: #fff !important; background-color: $color !important; } a#{$parent} { diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 901f77144..a12f9a178 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -32,6 +32,10 @@ // Contextual colors +.text-white { + color: #fff !important; +} + @include text-emphasis-variant('.text-muted', $text-muted); @include text-emphasis-variant('.text-primary', $brand-primary); -- cgit v1.2.3 From 25b718e5fd7c5de7dd3c5b05e3ae35eee9bf6e08 Mon Sep 17 00:00:00 2001 From: judetucker Date: Mon, 25 Jul 2016 21:06:07 -0700 Subject: resolves #20266 --- scss/_images.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_images.scss b/scss/_images.scss index 989426999..ba82c2119 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -10,7 +10,7 @@ } // Rounded corners -.img-rounded { +.rounded { @include border-radius($border-radius-lg); } -- cgit v1.2.3 From 91992ac70a7fe9e9411580d0857132f57be59e5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 8 Sep 2016 23:21:40 -0700 Subject: Add new border utils - Move and rename .img-rounded to .rounded, .img-circle to .rounded-circle - Add new .rounded-{direction} utils - New docs pages for border utils with TBD comments for the border property - Removes most image examples for rounding from the content/images docs in favor of new docs page --- scss/_images.scss | 9 --------- scss/_utilities.scss | 1 + scss/utilities/_borders.scss | 30 ++++++++++++++++++++++++++++++ 3 files changed, 31 insertions(+), 9 deletions(-) create mode 100644 scss/utilities/_borders.scss (limited to 'scss') diff --git a/scss/_images.scss b/scss/_images.scss index ba82c2119..3ca811ecd 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -9,10 +9,6 @@ @include img-fluid(); } -// Rounded corners -.rounded { - @include border-radius($border-radius-lg); -} // Image thumbnails .img-thumbnail { @@ -27,11 +23,6 @@ @include img-fluid(inline-block); } -// Perfect circle -.img-circle { - border-radius: 50%; -} - // // Figures // diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 87b8ba6da..8d9ff7cec 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,4 +1,5 @@ @import "utilities/background"; +@import "utilities/borders"; @import "utilities/clearfix"; @import "utilities/display"; @import "utilities/flex"; diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss new file mode 100644 index 000000000..b2e70aaf5 --- /dev/null +++ b/scss/utilities/_borders.scss @@ -0,0 +1,30 @@ +// +// Border-width +// + +// TBD...? + + +// +// Border-radius +// + +.rounded { + @include border-radius($border-radius); +} +.rounded-top { + @include border-top-radius($border-radius); +} +.rounded-right { + @include border-right-radius($border-radius); +} +.rounded-bottom { + @include border-bottom-radius($border-radius); +} +.rounded-left { + @include border-left-radius($border-radius); +} + +.rounded-circle { + border-radius: 50%; +} -- cgit v1.2.3 From d62c3e3f8061fd2ed1ba397a673c9a2b9b72bc30 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Sep 2016 22:25:42 -0700 Subject: Swap for custom svg background that we can embed to set the color of the stroke via Sass variable --- scss/_navbar.scss | 20 +++++++++++++------- scss/_variables.scss | 2 ++ 2 files changed, 15 insertions(+), 7 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 353e6958e..ce4e02431 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -105,16 +105,14 @@ // Bootstrap JavaScript plugin. .navbar-toggler { - box-sizing: content-box; - width: 1em; - height: 1em; + width: 2.5em; + height: 2em; padding: .5rem .75rem; font-size: $font-size-lg; line-height: 1; - background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Crect%20y%3D%222%22%20width%3D%2216%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%227%22%20width%3D%2216%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%2212%22%20width%3D%2216%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E) no-repeat 50% 50%; - background-clip: content-box; - background-origin: content-box; - background-size: 1em 1em; + background-color: transparent; + background: transparent no-repeat center center; + background-size: 24px 24px; border: $border-width solid transparent; @include border-radius($btn-border-radius); @@ -176,6 +174,10 @@ } } + .navbar-toggler { + background-image: $navbar-light-toggler-bg; + } + .navbar-divider { background-color: rgba(0,0,0,.075); } @@ -210,6 +212,10 @@ } } + .navbar-toggler { + background-image: $navbar-dark-toggler-bg; + } + .navbar-divider { background-color: rgba(255,255,255,.075); } diff --git a/scss/_variables.scss b/scss/_variables.scss index db9c202ff..0b249f3d1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -487,11 +487,13 @@ $navbar-dark-color: rgba(255,255,255,.5) !default; $navbar-dark-hover-color: rgba(255,255,255,.75) !default; $navbar-dark-active-color: rgba(255,255,255,1) !default; $navbar-dark-disabled-color: rgba(255,255,255,.25) !default; +$navbar-dark-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default; $navbar-light-color: rgba(0,0,0,.3) !default; $navbar-light-hover-color: rgba(0,0,0,.6) !default; $navbar-light-active-color: rgba(0,0,0,.8) !default; $navbar-light-disabled-color: rgba(0,0,0,.15) !default; +$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default; // Navs -- cgit v1.2.3 From 659809db15d5ea9918874744f034457be2c37549 Mon Sep 17 00:00:00 2001 From: NicoLB Date: Mon, 12 Sep 2016 15:32:33 +1000 Subject: .form-control:focus customization (#20436) * Allow variables input-bg-focus and input-color-focus to be overridden. * More consistency and control to customize shadows on .form-control:focus --- scss/_variables.scss | 6 +++--- scss/mixins/_forms.scss | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 0b249f3d1..86a29e23c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -327,10 +327,10 @@ $input-border-radius: $border-radius !default; $input-border-radius-lg: $border-radius-lg !default; $input-border-radius-sm: $border-radius-sm !default; -$input-bg-focus: $input-bg; +$input-bg-focus: $input-bg !default; $input-border-focus: #66afe9 !default; -$input-box-shadow-focus: rgba(102,175,233,.6) !default; -$input-color-focus: $input-color; +$input-box-shadow-focus: $input-box-shadow, 0 0 8px rgba(102,175,233,.6) !default; +$input-color-focus: $input-color !default; $input-color-placeholder: #999 !default; diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index b281dd715..698e7dc12 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -54,8 +54,7 @@ background-color: $input-bg-focus; border-color: $input-border-focus; outline: none; - $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus; - @include box-shadow($shadow); + @include box-shadow($input-box-shadow-focus); } } -- cgit v1.2.3 From 8b13c51a0ee8a1c9e56e5b7cb058c2d62a1258e4 Mon Sep 17 00:00:00 2001 From: Chris Garcia Date: Mon, 12 Sep 2016 00:50:14 -0500 Subject: Removing a redundant background-color declaration. (#20698) --- scss/_navbar.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index ce4e02431..c91e830bd 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -110,7 +110,6 @@ padding: .5rem .75rem; font-size: $font-size-lg; line-height: 1; - background-color: transparent; background: transparent no-repeat center center; background-size: 24px 24px; border: $border-width solid transparent; -- cgit v1.2.3 From fe722c2453fcfd38dcb8869ee62a3ba9e12803fe Mon Sep 17 00:00:00 2001 From: Edd Yerburgh Date: Mon, 12 Sep 2016 07:03:12 +0100 Subject: added text-gray-dark class (#19847) --- scss/utilities/_text.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'scss') diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 901f77144..c1cbe1270 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -44,6 +44,10 @@ @include text-emphasis-variant('.text-danger', $brand-danger); +// Font color + +@include text-emphasis-variant('.text-gray-dark', $gray-dark); + // Misc .text-hide { -- cgit v1.2.3 From 53a20c11d21e0b561fa123b93402653196fbece3 Mon Sep 17 00:00:00 2001 From: mkroeders Date: Mon, 12 Sep 2016 08:32:51 +0200 Subject: Have same margin for as a
on .card-headers (#19048) * Have same margin for as a
on .card-headers Related #18726 When you use a `` as `.card-header` there is `margin-bottom: .5rem` added. The changes set the margin-bottom to 0 * Removed space --- scss/_card.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 1644ae466..01a5733d6 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -70,6 +70,7 @@ .card-header { @include clearfix; padding: $card-spacer-y $card-spacer-x; + margin-bottom: 0; // Removes the default margin-bottom of background-color: $card-cap-bg; border-bottom: $card-border-width solid $card-border-color; -- cgit v1.2.3 From 0ef64d89f7fbf7c4eb306569b050720e240dde6b Mon Sep 17 00:00:00 2001 From: Kovah Date: Fri, 9 Sep 2016 06:48:17 +0200 Subject: Add breakpoint-specific gutters. --- scss/_variables.scss | 12 +++++++++--- scss/mixins/_grid-framework.scss | 10 +++------- scss/mixins/_grid.scss | 36 +++++++++++++++++++++++++++++------- 3 files changed, 41 insertions(+), 17 deletions(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 86a29e23c..d8b67b322 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -150,9 +150,15 @@ $container-max-widths: ( // // Set the number of columns and specify the width of the gutters. -$grid-columns: 12 !default; -$grid-gutter-width: 30px !default; - +$grid-columns: 12 !default; +$grid-gutter-width-base: 30px !default; +$grid-gutter-widths: ( + xs: $grid-gutter-width-base, + sm: $grid-gutter-width-base, + md: $grid-gutter-width-base, + lg: $grid-gutter-width-base, + xl: $grid-gutter-width-base +) !default; // Typography // diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 8b17d7843..0e3852e24 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -3,20 +3,18 @@ // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. -@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { - +@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) { // Common properties for all breakpoints %grid-column { position: relative; // Prevent columns from collapsing when empty min-height: 1px; - // Inner gutter via padding - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); @if $enable-flex { width: 100%; } + + @include make-gutters($gutters); } $breakpoint-counter: 0; @@ -38,8 +36,6 @@ flex-grow: 1; max-width: 100%; min-height: 1px; - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); } } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index fa9b3995b..b381ba900 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -2,7 +2,7 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container($gutter: $grid-gutter-width) { +@mixin make-container($gutter: $grid-gutter-width-base) { margin-left: auto; margin-right: auto; padding-left: ($gutter / 2); @@ -22,22 +22,36 @@ } } -@mixin make-row($gutter: $grid-gutter-width) { +@mixin make-gutters($gutters: $grid-gutter-widths) { + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } + } +} + +@mixin make-row($gutters: $grid-gutter-widths) { @if $enable-flex { display: flex; flex-wrap: wrap; } @else { @include clearfix(); } - margin-left: ($gutter / -2); - margin-right: ($gutter / -2); + + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + margin-right: ($gutter / -2); + margin-left: ($gutter / -2); + } + } } -@mixin make-col-ready($gutter: $grid-gutter-width) { +@mixin make-col-ready($gutters: $grid-gutter-widths) { position: relative; min-height: 1px; // Prevent collapsing - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we use `flex` values @@ -45,6 +59,14 @@ @if $enable-flex { width: 100%; } + + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } + } } @mixin make-col($size, $columns: $grid-columns) { -- cgit v1.2.3 From 63129112bbea91f7cd62014f162f857f50084656 Mon Sep 17 00:00:00 2001 From: VarelloThemes Date: Thu, 15 Sep 2016 17:39:31 +0100 Subject: replace some profanities (#20715) --- scss/_modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_modal.scss b/scss/_modal.scss index 83a133531..e4a04e45e 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -1,7 +1,7 @@ // .modal-open - body class for killing the scroll // .modal - container to scroll within // .modal-dialog - positioning shell for the actual modal -// .modal-content - actual modal w/ bg and corners and shit +// .modal-content - actual modal w/ bg and corners and stuff // Kill the scroll on the body -- cgit v1.2.3 From f72c21bfc89854f82eba428cf80ef5bb2bc5a4fe Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 2 Aug 2016 15:17:24 +1000 Subject: Upgrade to normalize.css v4.2.0 and fix Hound exclusion. --- scss/.scss-lint.yml | 3 ++ scss/_normalize.scss | 104 +++++++++++++++++++++++++-------------------------- 2 files changed, 54 insertions(+), 53 deletions(-) (limited to 'scss') diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml index 65c365ddb..9c6ac66ab 100644 --- a/scss/.scss-lint.yml +++ b/scss/.scss-lint.yml @@ -3,6 +3,9 @@ scss_files: - "**/*.scss" - "docs/assets/scss/**/*.scss" +exclude: + - "scss/_normalize.scss" + plugin_directories: ['.scss-linters'] # List of gem names to load custom linters from (make sure they are already diff --git a/scss/_normalize.scss b/scss/_normalize.scss index 8a74836b0..827b7f31a 100644 --- a/scss/_normalize.scss +++ b/scss/_normalize.scss @@ -1,14 +1,16 @@ -/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ // // 1. Change the default font family in all browsers (opinionated). -// 2. Prevent adjustments of font size after orientation changes in IE and iOS. +// 2. Correct the line height in all browsers. +// 3. Prevent adjustments of font size after orientation changes in IE and iOS. // html { font-family: sans-serif; // 1 - -ms-text-size-adjust: 100%; // 2 - -webkit-text-size-adjust: 100%; // 2 + line-height: 1.15; // 2 + -ms-text-size-adjust: 100%; // 3 + -webkit-text-size-adjust: 100%; // 3 } // @@ -76,7 +78,7 @@ progress { // 1. Add the correct display in IE. // -template, // 2 +template, // 1 [hidden] { display: none; } @@ -85,11 +87,13 @@ template, // 2 // ========================================================================== // -// Remove the gray background on active links in IE 10. +// 1. Remove the gray background on active links in IE 10. +// 2. Remove gaps in links underline in iOS 8+ and Safari 8+. // a { - background-color: transparent; + background-color: transparent; // 1 + -webkit-text-decoration-skip: objects; // 2 } // @@ -248,14 +252,17 @@ hr { // ========================================================================== // -// Change font properties to `inherit` in all browsers (opinionated). +// 1. Change font properties to `inherit` in all browsers (opinionated). +// 2. Remove the margin in Firefox and Safari. // button, input, +optgroup, select, textarea { - font: inherit; + font: inherit; // 1 + margin: 0; // 2 } // @@ -269,30 +276,16 @@ optgroup { // // Show the overflow in IE. // 1. Show the overflow in Edge. -// 2. Show the overflow in Edge, Firefox, and IE. // button, -input, // 1 -select { // 2 +input { // 1 overflow: visible; } // -// Remove the margin in Safari. -// 1. Remove the margin in Firefox and Safari. -// - -button, -input, -select, -textarea { // 1 - margin: 0; -} - -// -// Remove the inheritence of text transform in Edge, Firefox, and IE. -// 1. Remove the inheritence of text transform in Firefox. +// Remove the inheritance of text transform in Edge, Firefox, and IE. +// 1. Remove the inheritance of text transform in Firefox. // button, @@ -300,29 +293,10 @@ select { // 1 text-transform: none; } -// -// Change the cursor in all browsers (opinionated). -// - -button, -[type="button"], -[type="reset"], -[type="submit"] { - cursor: pointer; -} - -// -// Restore the default cursor to disabled elements unset by the previous rule. -// - -[disabled] { - cursor: default; -} - // // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` // controls in Android 4. -// 2. Correct the inability to style clickable types in iOS. +// 2. Correct the inability to style clickable types in iOS and Safari. // button, @@ -337,8 +311,10 @@ html [type="button"], // 1 // button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; padding: 0; } @@ -347,7 +323,9 @@ input::-moz-focus-inner { // button:-moz-focusring, -input:-moz-focusring { +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } @@ -406,19 +384,39 @@ textarea { } // -// Correct the odd appearance of search inputs in Chrome and Safari. +// 1. Correct the odd appearance in Chrome and Safari. +// 2. Correct the outline style in Safari. // [type="search"] { - -webkit-appearance: textfield; + -webkit-appearance: textfield; // 1 + outline-offset: -2px; // 2 } // -// Remove the inner padding and cancel buttons in Chrome on OS X and -// Safari on OS X. +// Remove the inner padding and cancel buttons in Chrome and Safari on OS X. // [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } + +// +// Correct the text style of placeholders in Chrome, Edge, and Safari. +// + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +// +// 1. Correct the inability to style clickable types in iOS and Safari. +// 2. Change font properties to `inherit` in Safari. +// + +::-webkit-file-upload-button { + -webkit-appearance: button; // 1 + font: inherit; // 2 +} -- cgit v1.2.3 From 3dc4b3647ce2b27b0216fe8103253ffe9633fde9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Sep 2016 00:54:10 -0700 Subject: Rename pull-*-{left|right} classes to .float-*-left and .float-*-right --- scss/_mixins.scss | 2 +- scss/_utilities.scss | 2 +- scss/mixins/_float.scss | 6 ++++++ scss/mixins/_pulls.scss | 6 ------ scss/utilities/_float.scss | 13 +++++++++++++ scss/utilities/_pulls.scss | 13 ------------- 6 files changed, 21 insertions(+), 21 deletions(-) create mode 100644 scss/mixins/_float.scss delete mode 100644 scss/mixins/_pulls.scss create mode 100644 scss/utilities/_float.scss delete mode 100644 scss/utilities/_pulls.scss (limited to 'scss') diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 1b5bf0fae..e53ab3414 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -51,4 +51,4 @@ // @import "mixins/navbar-align"; @import "mixins/grid-framework"; @import "mixins/grid"; -@import "mixins/pulls"; +@import "mixins/float"; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 8d9ff7cec..aef99aeba 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -3,7 +3,7 @@ @import "utilities/clearfix"; @import "utilities/display"; @import "utilities/flex"; -@import "utilities/pulls"; +@import "utilities/float"; @import "utilities/screenreaders"; @import "utilities/spacing"; @import "utilities/text"; diff --git a/scss/mixins/_float.scss b/scss/mixins/_float.scss new file mode 100644 index 000000000..b30cf1468 --- /dev/null +++ b/scss/mixins/_float.scss @@ -0,0 +1,6 @@ +@mixin float-left { + float: left !important; +} +@mixin float-right { + float: right !important; +} diff --git a/scss/mixins/_pulls.scss b/scss/mixins/_pulls.scss deleted file mode 100644 index 6bdff025d..000000000 --- a/scss/mixins/_pulls.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin pull-left { - float: left !important; -} -@mixin pull-right { - float: right !important; -} diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss new file mode 100644 index 000000000..eea34bff2 --- /dev/null +++ b/scss/utilities/_float.scss @@ -0,0 +1,13 @@ +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + .float-#{$breakpoint}-left { + @include float-left(); + } + .float-#{$breakpoint}-right { + @include float-right(); + } + .float-#{$breakpoint}-none { + float: none !important; + } + } +} diff --git a/scss/utilities/_pulls.scss b/scss/utilities/_pulls.scss deleted file mode 100644 index 7fec56c9a..000000000 --- a/scss/utilities/_pulls.scss +++ /dev/null @@ -1,13 +0,0 @@ -@each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - .pull-#{$breakpoint}-left { - @include pull-left(); - } - .pull-#{$breakpoint}-right { - @include pull-right(); - } - .pull-#{$breakpoint}-none { - float: none !important; - } - } -} -- cgit v1.2.3 From 6ae42a02c6d3d108f3693faa094fd4a20d3b411e Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sun, 2 Oct 2016 16:17:59 +0100 Subject: Update print styles borrowed from h5bp most notable change: - fixes print/print preview crash in IE11 (caused by `*:first-line` selector) --- scss/_print.scss | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_print.scss b/scss/_print.scss index 84556602f..fd99d6978 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -14,7 +14,10 @@ *::before, *::after, *::first-letter, - *::first-line { + p::first-line, + div::first-line, + blockquote::first-line, + li::first-line { // Bootstrap specific; comment out `color` and `background` //color: #000 !important; // Black prints faster: // http://www.sanbeiji.com/archives/953 @@ -24,7 +27,7 @@ } a, - a:visited { + a::visited { text-decoration: underline; } @@ -44,10 +47,13 @@ // //a[href^="#"]::after, - //a[href^="javascript:"]::after { - // content: ""; + //a[href^="javascript:"]:after { + // content: ""; //} + pre { + white-space: pre-wrap !important; + } pre, blockquote { border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px -- cgit v1.2.3 From bb4af05d229e1db70f657824caed1a7a8725c8a2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 18:15:55 -0700 Subject: Fixes #20799: Apply same color change to disabled inline radios/checkboxes (#20826) --- scss/_forms.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/_forms.scss b/scss/_forms.scss index 263a8bc15..6ea5d3dbc 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -239,6 +239,7 @@ select.form-control-lg { } &.disabled { + color: $text-muted; cursor: $cursor-disabled; } } -- cgit v1.2.3 From ebc77f60bb3c8dc11417f7cdb8648a65f1fe24cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 18:22:53 -0700 Subject: Remove the margin-bottom from