Hiding titles on small screens

elastic · Feb 8, 2018 · a373773 · a373773
1 parent 0b6af09
commit a373773
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
@@ -119,10 +119,28 @@
   }
 }
 
+// RESPONSIVE
+@include screenXSmall {
+  .euiStepHorizontal {
+    // reduce top padding and shift lines
+    padding-top: $euiSize;
+
+    &:before,
+    &:after {
+      top: $euiSize + $euiStepNumberSize/2;
+    }
+  }
+
+  // hide titles
+  .euiStepHorizontal__title {
+    display: none;
+  }
+}
+
 @keyframes focusRingAnimate {
   0% {
     box-shadow: 0 0 0 10px rgba($euiColorPrimary, 0);
-  },
+  }
   100% {
     box-shadow: 0 0 0 2px rgba($euiColorPrimary, .2);
   }