feat(hr): add support for hr ui #70

Changes to be committed: modified: demo/demo.md modified: src/style-base.scss
AlaskaAirlines · Jan 22, 2022 · c7f89da · c7f89da
1 parent 020186a
commit c7f89da
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/demo/demo.md b/demo/demo.md
@@ -12,6 +12,7 @@ The `auro-menu` element should be used in situations where users will select one
       <auro-menuoption data-value="Stops">Stops</auro-menuoption>
       <auro-menuoption data-value="Price" selected>Price</auro-menuoption>
       <auro-menuoption data-value="Duration">Duration</auro-menuoption>
+      <hr>
       <auro-menuoption data-value="Departure">Departure</auro-menuoption>
       <auro-menuoption data-value="Arrival">Arrival</auro-menuoption>
     </auro-menu>

diff --git a/src/style-base.scss b/src/style-base.scss
@@ -23,6 +23,18 @@
   ::slotted([selected]) {
     padding-left: 0;
   }
+
+  // Styles are set to `important` to ensure they over-ride any styles
+  // set in the user's global scope.
+  /* stylelint-disable declaration-no-important */
+  ::slotted(hr) {
+    overflow: visible !important;
+    height: 0 !important;
+    box-sizing: content-box !important;
+    border-width: 0 !important;
+    border-top: 1px solid var(--auro-color-border-primary-on-light) !important;
+    margin: var(--auro-size-xs) 0 !important;
+  }
 }
 
 ul {