refactor(hx-alert): simplify Shadow CSS

docs/components/box/index.html

@@ -153,7 +153,7 @@ <h2 id="spacing">Spacing</h2>
 
   <section>
     <h2 id="scrolling-containers">Scrolling Containers</h2>
-    <hx-alert static type="warning">
+    <hx-alert type="warning" persist>
       Scrolling containers must be implemented using the
       <code>&lt;hx-div&gt;</code> element in order to reliably calculate
       coordinates of absolutely positioned elements.

docs/components/breadcrumbs/index.html

@@ -4,7 +4,7 @@
 ---
 {% extends 'component.njk' %}
 {% block content %}
-  <hx-alert type="warning" status="WARNING" static>
+  <hx-alert type="warning" status="WARNING" persist>
     The last breadcrumb hyperlink is styled to prevent mouse clicks, but it will not prevent keyboard activation.
   </hx-alert>
 

docs/components/grid/index.html

@@ -8,7 +8,7 @@
 {% extends 'component.njk' %}
 {% block content %}
 <section>
-  <hx-alert type="warning" status="warning" static>
+  <hx-alert type="warning" status="warning" persist>
     HelixUI grid classes are not compatible with Bootstrap grid styles.
   </hx-alert>
 
@@ -246,7 +246,7 @@ <h2 id="column-offset">Column Offset</h2>
 
 <section><!-- column ordering -->
   <h2 id="column-ordering">Column Ordering</h2>
-  <hx-alert type="info" status="fyi" static>
+  <hx-alert type="info" status="fyi" persist>
     Reordering columns does not change tab order.<br />
     Tab order is based on the DOM order, not visual appearance.
   </hx-alert>
@@ -390,7 +390,7 @@ <h2 id="responsive-options">Responsive Options</h2>
 
 <section><!-- column wrapping -->
   <h2 id="column-wrapping">Column Wrapping</h2>
-  <hx-alert type="info" status="note" static>
+  <hx-alert type="info" status="note" persist>
     Columns wrap if the total column width count within the row exceeds 12.
   </hx-alert>
   <p>
@@ -440,7 +440,7 @@ <h2 id="column-wrapping">Column Wrapping</h2>
 
 <section><!-- nesting containers -->
   <h2 id="nesting-containers">Nesting Containers</h2>
-  <hx-alert type="warning" status="warning" static>
+  <hx-alert type="warning" status="warning" persist>
     Do not apply row and column container classes to the same element.
   </hx-alert>
   <p>You can nest rows and columns as deep as necessary.</p>
@@ -497,7 +497,7 @@ <h2 id="nesting-containers">Nesting Containers</h2>
 
 <section><!-- styling containers -->
   <h2 id="styling-containers">Styling Containers</h2>
-  <hx-alert type="warning" status="warning" static>
+  <hx-alert type="warning" status="warning" persist>
     Do not attempt to style rows or columns directly.
   </hx-alert>
   <ul class="hxList">

docs/components/stepper/index.html

@@ -7,7 +7,7 @@
 ---
 {% extends 'component.njk' %}
 {% block content %}
-  <hx-alert type="warning" status="BETA" static>
+  <hx-alert type="warning" status="BETA" persist>
     This component is not recommended for production use.
   </hx-alert>
   <section>

docs/components/toasts/index.html

@@ -7,7 +7,7 @@
 {% extends 'component.njk' %}
 {% block content %}
   <section>
-    <hx-alert type="info" status="note" static>
+    <hx-alert type="info" status="note" persist>
       Currently, only CTA and dismiss functionality of the toast itself has been
       implemented. Positioning, stacking, animation, etc. functionality will be coming soon.
     </hx-alert>

docs/components/typography/index.html

@@ -196,10 +196,10 @@ <h2 id="links">Links</h2>
     <p>
       Links should be used to refer a user to a resource or location.
     </p>
-    <hx-alert static type="info" status="note">
+    <hx-alert type="info" status="note" persist>
       Buttons are better suited to initiate in-page actions.
     </hx-alert>
-    <hx-alert static type="warning" status="warning">
+    <hx-alert type="warning" status="warning" persist>
       Adding the <code>disabled</code> attribute to a link <b>will not</b>
       prevent user interaction. Consider using a <code>&lt;button&gt;</code>
       instead.

src/helix-ui/elements/HXAlertElement.less

@@ -2,68 +2,66 @@
 
 #hxAlert {
   display: flex;
+}
 
-  button {
-    align-self: flex-start;
-    background-color: transparent;
-    border: 0;
-    cursor: pointer;
-  }
+button {
+  align-self: flex-start;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+}
 
-  #hxIconWrapper {
-    flex-shrink: 0;
-    padding: 1rem;
-  }
+#hxIconWrapper {
+  flex-shrink: 0;
+  padding: 1rem;
+}
 
-  #hxContent {
-    flex-grow: 1;
-    margin-right: 1rem;
-    padding: 1rem 0;
-  }
+#hxContent {
+  flex-grow: 1;
+  margin-right: 1rem;
+  padding: 1rem 0;
+}
 
-  #hxStatus {
-    float: left;
-    font-weight: 500;
-    margin-right: 0.25rem;
-    text-transform: uppercase;
+#hxStatus {
+  float: left;
+  font-weight: 500;
+  margin-right: 0.25rem;
+  text-transform: uppercase;
 
-    &:after {
-      content: ":";
-    }
+  &:after {
+    content: ":";
+  }
 
-    &:empty {
-      display: none;
-    }
+  &:empty {
+    display: none;
   }
+}
 
-  #hxCta {
-    flex-shrink: 0;
-    font-weight: 500;
-    padding: 1rem 0;
-    text-transform: uppercase;
-    white-space: nowrap;
+#hxCta {
+  flex-shrink: 0;
+  font-weight: 500;
+  padding: 1rem 0;
+  text-transform: uppercase;
+  white-space: nowrap;
 
-    &:empty {
-      display: none;
-    }
+  &:empty {
+    display: none;
   }
+}
 
-  #hxDismiss {
-    flex-shrink: 0;
-    height: 3rem;
-    padding: 1rem;
-    width: 3rem;
-  }
+#hxDismiss {
+  flex-shrink: 0;
+  height: 3rem;
+  padding: 1rem;
+  width: 3rem;
 }
 
 :host([persist]) {
-  #hxAlert {
-    #hxDismiss {
-      display: none;
-    }
+  #hxDismiss {
+    display: none;
+  }
 
-    #hxCta {
-      margin-right: 1rem;
-    }
+  #hxCta {
+    margin-right: 1rem;
   }
 }