fix(StoriesCarousel): adjust size of buttons, add in space for testim…

…onial name

package.json

@@ -1,6 +1,6 @@
 {
   "name": "employer-style-base",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "author": "[email protected]",
   "license": "Apache-2.0",
   "description": "A stack-agnostic Sass library providing basic components and typography intended for the Employer experience",

sass/directives/03_components/montage/_montage.scss

@@ -382,6 +382,10 @@ $_montage_tablet_bp: 1145px;
       @media only screen and (min-width: $_montage_mobile_bp) {
         display: inline;
       }
+
+      &:first-of-type {
+        margin-right: $base-spacing-smallest;
+      }
     }
   }
 
@@ -475,37 +479,18 @@ $_montage_tablet_bp: 1145px;
   .montage__carousel-dots {
     background-color: $_montage_cell_blue;
     text-align: center;
-    padding-bottom: $base-spacing-small;
-
-    li {
-      display: inline-block;
-      list-style-type: none;
-      margin-right: $base-spacing-small;
+    margin-bottom: $base-spacing-small * 2;
+    margin-top: $base-spacing-small * 2;
 
-      &:last-of-type {
-        margin-right: 0;
-      }
+    @include carousel-dots;
 
-      button {
-        font-size: 0;
-        background-color: transparent;
-        border: none;
-
-        &:before {
-          color: $grey-light;
-          font-family: FontAwesome;
-          font-weight: $font-weight-regular;
-          font-size: $font-size-smallest;
-          content: "\f111";
-        }
-      }
+    button {
+      background-color: $grey-light;
     }
 
     .slick-active {
       button {
-        &:before {
-          color: white;
-        }
+        background-color: white;
       }
     }
   }