redesign indicators

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 12c7f38dfd4f629e306a5b532a12900bf67afae6..532f8d3a86579ba6a22382378c732c549fca6ca6 100644 (file)
--- 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 01df8b63ace5cf750ebcb99479664a883de1ae57..849b42858a5be0ac0e5d38a702f18e9b05ea4235 100644 (file)
--- 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;