From 6d28f07582f403d4214ef15781bb88668bfabc52 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 4 Dec 2016 20:14:33 -0800
Subject: [PATCH] redesign indicators

---
 scss/_carousel.scss  | 38 ++++++++++++++++++++++++--------------
 scss/_variables.scss |  5 ++---
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 12c7f38dfd..532f8d3a86 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -142,26 +142,36 @@
   list-style: none;
 
   li {
+    position: relative;
     display: inline-block;
-    width: $carousel-indicator-size;
-    height: $carousel-indicator-size;
-    margin: 1px;
+    width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
     text-indent: -999px;
     cursor: pointer;
-    // IE9 hack for event handling
-    //
-    // Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`,
-    // so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent.
-    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
-    background-color: rgba(0,0,0,0); // IE9
-    border: 1px solid $carousel-indicator-border-color;
-    border-radius: $carousel-indicator-size;
+    background-color: rgba($carousel-indicator-active-bg, .5);
+
+    &::before {
+      position: absolute;
+      top: -10px;
+      left: 0;
+      display: inline-block;
+      content: "";
+      width: 100%;
+      height: 10px;
+    }
+
+    &::after {
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      display: inline-block;
+      content: "";
+      width: 100%;
+      height: 10px;
+    }
   }
 
   .active {
-    width: $carousel-indicator-active-size;
-    height: $carousel-indicator-active-size;
-    margin: 0;
     background-color: $carousel-indicator-active-bg;
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 01df8b63ac..849b42858a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -891,10 +891,9 @@ $carousel-control-font-size:                  20px !default;
 
 $carousel-indicators-width:                   60% !default;
 
-$carousel-indicator-size:                     10px !default;
-$carousel-indicator-active-size:              12px !default;
+$carousel-indicator-width:                    30px !default;
+$carousel-indicator-height:                   3px !default;
 $carousel-indicator-active-bg:                #fff !default;
-$carousel-indicator-border-color:             #fff !default;
 
 $carousel-caption-width:                      70% !default;
 $carousel-caption-sm-up-width:                60% !default;
-- 
2.47.3