From ab67ffe167a7d2d7f8cd54ae22c48507f49ecbb8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 15:20:26 -0700 Subject: Ensure carousel works in IE10/11 - Drops the `if-supports-3d-transforms()` mixin since all our browsers do support it - Updates carousel to not rely on that mixin --- scss/_carousel.scss | 33 ++++++++++++++------------------- scss/_mixins.scss | 1 - scss/mixins/_transforms.scss | 14 -------------- 3 files changed, 14 insertions(+), 34 deletions(-) delete mode 100644 scss/mixins/_transforms.scss (limited to 'scss') diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 1b6e450ae..70c3cc64d 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -13,12 +13,9 @@ position: relative; display: none; width: 100%; - - @include if-supports-3d-transforms() { - @include transition($carousel-transition); - backface-visibility: hidden; - perspective: 1000px; - } + @include transition($carousel-transition); + backface-visibility: hidden; + perspective: 1000px; } .carousel-item.active, @@ -34,21 +31,19 @@ } // CSS3 transforms when supported by the browser -@include if-supports-3d-transforms() { - .carousel-item-next.carousel-item-left, - .carousel-item-prev.carousel-item-right { - transform: translate3d(0, 0, 0); - } +.carousel-item-next.carousel-item-left, +.carousel-item-prev.carousel-item-right { + transform: translate3d(0, 0, 0); +} - .carousel-item-next, - .active.carousel-item-right { - transform: translate3d(100%, 0, 0); - } +.carousel-item-next, +.active.carousel-item-right { + transform: translate3d(100%, 0, 0); +} - .carousel-item-prev, - .active.carousel-item-left { - transform: translate3d(-100%, 0, 0); - } +.carousel-item-prev, +.active.carousel-item-left { + transform: translate3d(-100%, 0, 0); } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 13aad2487..cc3394f0a 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -14,7 +14,6 @@ @import "mixins/text-emphasis"; @import "mixins/text-hide"; @import "mixins/text-truncate"; -@import "mixins/transforms"; @import "mixins/visibility"; // // Components diff --git a/scss/mixins/_transforms.scss b/scss/mixins/_transforms.scss deleted file mode 100644 index 4005c9d02..000000000 --- a/scss/mixins/_transforms.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Applies the given styles only when the browser support CSS3 3D transforms. -@mixin if-supports-3d-transforms() { - @media (-webkit-transform-3d) { - // Old Safari, Old Android - // http://caniuse.com/#feat=css-featurequeries - // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d - @content; - } - - @supports (transform: translate3d(0,0,0)) { - // The Proper Way: Using a CSS feature query - @content; - } -} -- cgit v1.2.3 From 73cfefd594664240144a9c33b3d92ddeabc2e9c3 Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Fri, 20 Jan 2017 16:31:42 -0500 Subject: Do not stretch images in carousel-item --- scss/_carousel.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 70c3cc64d..ef57fdcf9 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -13,6 +13,7 @@ position: relative; display: none; width: 100%; + align-items: center; @include transition($carousel-transition); backface-visibility: hidden; perspective: 1000px; -- cgit v1.2.3 From 90c18ebd19f2256b9c250a4e5b59df913a705ac2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 16:01:54 -0700 Subject: Switch to ease function to remove trailing animation movement --- 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 f517797fa..d277011b2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -904,7 +904,7 @@ $carousel-control-icon-width: 20px !default; $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-transition: transform .6s ease-in-out !default; +$carousel-transition: transform .6s ease !default; // Close -- cgit v1.2.3 From 0c59741812dbede4bb04a7a59caa47f5b3bc6f68 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 16:11:59 -0700 Subject: property order --- scss/_carousel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_carousel.scss b/scss/_carousel.scss index ef57fdcf9..41eca949f 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -12,8 +12,8 @@ .carousel-item { position: relative; display: none; - width: 100%; align-items: center; + width: 100%; @include transition($carousel-transition); backface-visibility: hidden; perspective: 1000px; -- cgit v1.2.3 From 2dfffbde89b1f8483dce560513f3ab97e6a17e86 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 16:30:18 -0700 Subject: Rename some .open to .show (#22389) * no more outline overrides * rename old .open to .show --- scss/_button-group.scss | 10 ++-------- scss/_navbar.scss | 8 ++++---- 2 files changed, 6 insertions(+), 12 deletions(-) (limited to 'scss') diff --git a/scss/_button-group.scss b/scss/_button-group.scss index af74a55f1..d4c79ab60 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -79,12 +79,6 @@ @include border-left-radius(0); } -// On active and open, don't show outline -.btn-group .dropdown-toggle:active, -.btn-group.open .dropdown-toggle { - outline: 0; -} - // Sizing // @@ -119,8 +113,8 @@ // The clickable button for toggling the menu -// Remove the gradient and set the same inset shadow as the :active state -.btn-group.open .dropdown-toggle { +// Set the same inset shadow as the :active state +.btn-group.show .dropdown-toggle { @include box-shadow($btn-active-box-shadow); // Show no shadow for `.btn-link` since it has no other button styles. diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 854e7df12..419d9263a 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -216,9 +216,9 @@ } } - .open > .nav-link, + .show > .nav-link, .active > .nav-link, - .nav-link.open, + .nav-link.show, .nav-link.active { color: $navbar-light-active-color; } @@ -261,9 +261,9 @@ } } - .open > .nav-link, + .show > .nav-link, .active > .nav-link, - .nav-link.open, + .nav-link.show, .nav-link.active { color: $navbar-inverse-active-color; } -- cgit v1.2.3 From 09f98fbd0e8348c25f2cbf85b92a09bb97197bc8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 21:03:54 -0700 Subject: Update card outline mixin Fixes #22056 by ensuring outline cards make their header/footer transparent and use the right border color. --- scss/mixins/_cards.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'scss') diff --git a/scss/mixins/_cards.scss b/scss/mixins/_cards.scss index 4b1232d8b..e535b316d 100644 --- a/scss/mixins/_cards.scss +++ b/scss/mixins/_cards.scss @@ -13,6 +13,12 @@ @mixin card-outline-variant($color) { background-color: transparent; border-color: $color; + + .card-header, + .card-footer { + background-color: transparent; + border-color: $color; + } } // -- cgit v1.2.3 From 7f075bfb2333db7f67f3b8a0fec4c66d4040576c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 20:58:33 -0700 Subject: fixes #22135 --- scss/_card.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 2c74c0c97..67d4ebf1f 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -262,15 +262,18 @@ // Columns // -@include media-breakpoint-up(sm) { - .card-columns { +.card-columns { + .card { + margin-bottom: $card-columns-margin; + } + + @include media-breakpoint-up(sm) { column-count: $card-columns-count; column-gap: $card-columns-gap; .card { display: inline-block; // Don't let them vertically span multiple columns width: 100%; // Don't let their width change - margin-bottom: $card-columns-margin; } } } -- cgit v1.2.3