feat(utilities): update .u-list-style-* styling (#213)

Author: jzempel

demo/utilities/list-style/index.html

@@ -29,6 +29,14 @@
       ><a class="u-fg-inherit" href="..">Utilities</a
       ><span> / List Style</span>
     </h1>
+    <ul class="c-ctl c-ctl--header">
+      <li class="c-ctl__item">
+        <fieldset class="c-chk">
+          <input class="c-chk__input js-rtl" id="nav.ctl.rtl" type="checkbox">
+          <label class="c-chk__label c-chk__label--toggle" for="nav.ctl.rtl">RTL</label>
+        </fieldset>
+      </li>
+    </ul>
   </header>
   <main class="c-main c-main--page">
     <h1 class="c-main__title">Utilities: List Style</h1>
@@ -141,5 +149,10 @@ <h2 class="u-fs-lg u-mb-sm"><code class="c-code">.u-list-style-upper-roman</code
   </main>
   <script src="//zendeskgarden.github.io/index.js"></script>
   <script src="../../forms/checkbox/index.js"></script>
+  <script>
+  $(document).ready(function() {
+    Garden.rtlClasses.push('[class^="u-list-style-"]');
+  });
+  </script>
 </body>
 </html>

packages/utilities/src/list-style.css

@@ -8,24 +8,76 @@
 @import '@zendeskgarden/css-variables';
 
 /* stylelint-disable declaration-no-important */
-.u-list-style-circle { list-style: circle inside !important; }
+.u-list-style-circle {
+  list-style: circle outside !important;
+}
 
-.u-list-style-decimal { list-style: decimal inside !important; }
+.u-list-style-decimal {
+  list-style: decimal outside !important;
+}
 
-/* stylelint-disable-next-line max-line-length */
-.u-list-style-decimal-leading-zero { list-style: decimal-leading-zero inside !important; }
+.u-list-style-decimal-leading-zero {
+  list-style: decimal-leading-zero outside !important;
+}
 
-.u-list-style-disc { list-style: disc inside !important; }
+.u-list-style-disc {
+  list-style: disc outside !important;
+}
 
-.u-list-style-lower-alpha { list-style: lower-alpha inside !important; }
+.u-list-style-lower-alpha {
+  list-style: lower-alpha outside !important;
+}
 
-.u-list-style-lower-roman { list-style: lower-roman inside !important; }
+.u-list-style-lower-roman {
+  list-style: lower-roman outside !important;
+}
 
-.u-list-style-none { list-style: none inside !important; }
+.u-list-style-none {
+  list-style: none outside !important;
+}
 
-.u-list-style-square { list-style: square inside !important; }
+.u-list-style-square {
+  list-style: square outside !important;
+}
 
-.u-list-style-upper-alpha { list-style: upper-alpha inside !important; }
+.u-list-style-upper-alpha {
+  list-style: upper-alpha outside !important;
+}
 
-.u-list-style-upper-roman { list-style: upper-roman inside !important; }
+.u-list-style-upper-roman {
+  list-style: upper-roman outside !important;
+}
 /* stylelint-enable declaration-no-important */
+
+[class^='u-list-style-'] {
+  margin-left: 24px;
+  padding: 0;
+}
+
+[class^='u-list-style-'].is-rtl {
+  direction: rtl;
+  margin-right: 24px;
+  margin-left: 0;
+}
+
+.u-list-style-decimal > li,
+.u-list-style-decimal-leading-zero > li,
+.u-list-style-lower-alpha > li,
+.u-list-style-lower-roman > li,
+.u-list-style-upper-alpha > li,
+.u-list-style-upper-roman > li {
+  margin-left: -4px;
+  padding-left: 4px;
+}
+
+.u-list-style-decimal.is-rtl > li,
+.u-list-style-decimal-leading-zero.is-rtl > li,
+.u-list-style-lower-alpha.is-rtl > li,
+.u-list-style-lower-roman.is-rtl > li,
+.u-list-style-upper-alpha.is-rtl > li,
+.u-list-style-upper-roman.is-rtl > li {
+  margin-right: -4px;
+  margin-left: 0;
+  padding-right: 4px;
+  padding-left: 0;
+}