From d1eeddc00aa7de83fa6d65507cfdfd18bafba035 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Tue, 17 Jul 2018 10:22:59 +0200 Subject: [PATCH 1/2] Carousel indicators transition --- scss/_carousel.scss | 6 ++++-- scss/_variables.scss | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 91c23e5fc3c1..531f4e6891f6 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -190,7 +190,9 @@ margin-left: $carousel-indicator-spacer; text-indent: -999px; cursor: pointer; - background-color: rgba($carousel-indicator-active-bg, .5); + background-color: $carousel-indicator-active-bg; + opacity: .5; + transition: $carousel-indicator-transition; // Use pseudo classes to increase the hit area by 10px on top and bottom. &::before { @@ -214,7 +216,7 @@ } .active { - background-color: $carousel-indicator-active-bg; + opacity: 1; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 94ea935780dd..fb695a8ce26a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -913,6 +913,7 @@ $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default; $carousel-indicator-active-bg: $white !default; +$carousel-indicator-transition: opacity .6s ease !default; $carousel-caption-width: 70% !default; $carousel-caption-color: $white !default; From 787f3c4285b627da5b9b158076dd437ea9d4449f Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Tue, 17 Jul 2018 10:30:12 +0200 Subject: [PATCH 2/2] Carousel indicators transition: use transition mixin --- scss/_carousel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 531f4e6891f6..b7114e96374c 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -192,7 +192,7 @@ cursor: pointer; background-color: $carousel-indicator-active-bg; opacity: .5; - transition: $carousel-indicator-transition; + @include transition($carousel-indicator-transition); // Use pseudo classes to increase the hit area by 10px on top and bottom. &::before {