Reduce steps size.

dev-onenetworkecommerce · Nov 10, 2015 · 2a5660f · 2a5660f
1 parent 5f954e3
commit 2a5660f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 34 deletions.
diff --git a/docs/dist/style.css b/docs/dist/style.css
diff --git a/styles/components/_steps.scss b/styles/components/_steps.scss
@@ -8,14 +8,12 @@
     position: relative;
     display: inline-block;
     margin: 0 25px;
-    width: 50px;
-    height: 50px;
-    padding: 2px 10px;
+    width: 40px;
+    height: 40px;
     text-align: center;
     background: $brand-gray-lt;
     border-radius: 50%;
     border: 3px solid $brand-gray;
-    font-size: $small;
   }
 
   li > a {
@@ -28,30 +26,44 @@
     padding: 8px 0;
   }
 
-  li::before {
+  li::after {
     content: '';
     position: absolute;
-    top: 20px;
-    right: 5px;
+    top: 15px;
+    left: 40px;
     width: 100px;
-    height: 5px;
+    height: 3px;
     background: $brand-gray;
     z-index: -1;
   }
 
-  li:first-child { margin-left: 0; }
-  li:last-child { margin-right: 0; }
-  li:first-child::before { display: none; }
+  li:first-child {
+    margin-left: 0;
+  }
 
-  .active > a { color: $brand-white; }
-  .active::before,
-  .active {
-    background: $brand-sky-dk;
+  li:last-child {
+    margin-right: 0;
+  }
+
+  li:last-child::after {
+    display: none;
   }
 
-  .complete > a { color: $brand-white; }
   .complete,
-  .complete:before {
+  .complete::after {
     background: $brand-emerald;
   }
+
+  .complete > a {
+    color: $brand-white;
+  }
+
+  .active,
+  .active::after {
+    background: $brand-sky-dk;
+  }
+
+  .active > a {
+    color: $brand-white;
+  }
 }