Merge pull request #342 from texastribune/util-classes

Add directory utility classes

assets/scss/6-components/text-input/_text-input.scss

@@ -1,6 +1,6 @@
 // Text input (c-text-input)
 //
-// Text form inputs. Can be used with type="text", type="email", etc. Add .is-valid if the value is not valid.
+// Text form inputs. Can be used with `type="text"`, `type="email"`, etc. Add `.is-valid` if the value is not valid. Use `c-text-input__input--standard` to fix [iOS focus bug](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone).
 //
 // Markup: 6-components/text-input/text-input.html
 //
@@ -16,6 +16,10 @@
     padding: $size-xxs;
     transition: box-shadow .15s ease-in-out;
 
+    &--standard {
+      font-size: 16px;
+    }
+
     // kill X button that appears on IE and edge
     // because it doesn't handle JS input event correctly
     &::-ms-clear {

assets/scss/7-layout/_position.scss

@@ -1,9 +1,12 @@
 // Position (l-pos-<setting>)
 //
-// Helper for quickly setting `position: absolute` or `position: relative`. {{isHelper}}
+// Helpers for quickly setting `position`, `z-index`, and `top`. {{isHelper}}
 //
 // .l-pos-rel - Relative position
 // .l-pos-abs - Set _`.l-pos-rel`_ on the parent to place within a defined space.
+// .l-pos-sticky - Tells an element to be fixed once a user scrolls past it
+// .l-pos-top - `top: 0`; We use this in directory, but should find more places where we can use this instead of setting it.
+// .l-pos-front - `z-index: 1`; We use this in directory, but should find more places where we can use this instead of setting it.
 //
 // Markup: 7-layout/position.html
 //
@@ -15,4 +18,17 @@
 
 .l-pos-abs {
   position: absolute;
+}
+
+.l-pos-sticky {
+  position: sticky;
+  z-index: 2;
+}
+
+.l-pos-top {
+  top: 0;
+}
+
+.l-pos-front {
+  z-index: 1;
 }

assets/scss/7-layout/position.html

@@ -7,4 +7,15 @@
   <div class="l-pos-rel" style="border: 1px solid #000; width: 300px; height: 100px;">
     <span class="{{ className }}" style="background-color: #222; color: #fff; padding: 10px; bottom: 0; right: 0; width: 60%;">position: absolute; bottom: 0; right: 0;</span>
   </div>
+{% endif %}
+{% if className == 'l-pos-sticky' %}
+  Demo TK
+{% endif %}
+{% if className == 'l-pos-top' %}
+  <div class="l-pos-rel" style="border: 1px solid #000; width: 300px; height: 100px;">
+    <span class="{{ className }} l-pos-abs" style="background-color: #222; color: #fff; padding: 10px;">position: absolute; top: 0</span>
+  </div>
+{% endif %}
+{% if className == 'l-pos-front' %}
+  Demo TK
 {% endif %}

assets/scss/utilities/_all.scss

@@ -7,6 +7,7 @@
 @import 'color-helpers';
 @import 'hidden';
 @import 'notch';
+@import 'overflow';
 @import 'rounded';
 @import 'shadows';
 @import 'spacing';

assets/scss/utilities/_overflow.scss

@@ -0,0 +1,13 @@
+// Overflow (has-overflow-x)
+//
+// Used for elements that can scroll left and right usually on mobile. Eventually we could add a variation for the white blurred edge.
+//
+//
+// Markup: <div class="{{ className }} has-bg-gray-light has-padding" style="width:600px;height:150px">Scroll right on mobile</div>
+//
+//
+// Styleguide 8.0.3
+//
+.has-overflow-x {
+  overflow-x: auto;
+}