ui: Misc CSS amends, mainly changes to empty-state (#7743)

1. empty-state amends to bring it closer to what is in Structure and
optionally support icons.
2. You may have a button that semantically should be a button (it
performs and action not a link), but you want it to look like an anchor,
this means it shouldn't have an outline when :active.
3. Adds `label.type-password` as a `%form-element`
4. Adds an error state to our `%notice` CSS component

ui-v2/app/styles/base/components/anchors/index.scss

@@ -19,6 +19,8 @@
 }
 %anchor {
   @extend %anchor-decoration;
+  cursor: pointer;
+  background-color: $transparent;
 }
 %anchor:hover,
 %anchor:focus {
@@ -26,4 +28,5 @@
 }
 %anchor:active {
   @extend %anchor-active;
+  outline: 0;
 }

ui-v2/app/styles/components/empty-state/index.scss

@@ -1,11 +1,14 @@
-@import './skin';
 @import './layout';
+@import './skin';
 %empty-state header :first-child {
   @extend %empty-state-header;
 }
 %empty-state header :nth-child(2) {
   @extend %empty-state-subheader;
 }
+%empty-state-anchor {
+  @extend %anchor;
+}
 %empty-state > ul > li > *,
 %empty-state > ul > li > label > button {
   @extend %empty-state-anchor;

ui-v2/app/styles/components/empty-state/layout.scss

@@ -17,5 +17,13 @@
   justify-content: space-between;
 
   margin-top: 1.5em;
-  padding-top: 0.5em;
+  padding-top: 0.6em;
+  border-top: 1px solid;
+}
+%empty-state-anchor {
+  display: inline-flex;
+  align-items: center;
+}
+%empty-state-anchor::before {
+  margin-top: -1px;
 }

ui-v2/app/styles/components/empty-state/skin.scss

@@ -1,31 +1,42 @@
+%empty-state {
+  color: $gray-500;
+}
+%empty-state > ul {
+  border-color: $gray-300;
+}
 %empty-state-header {
   border-bottom: none;
 }
-%empty-state header {
+/* Icons */
-  color: $gray-500;
-}
 %empty-state header::before {
-  background-color: $gray-500;
   font-size: 2.6em;
   position: relative;
   top: -3px;
   float: left;
   margin-right: 10px;
 }
-%empty-state-anchor {
-  @extend %anchor;
-}
 %empty-state-anchor::before {
   margin-right: 0.5em;
-  background-color: $blue-500;
   font-size: 0.9em;
 }
-%empty-state.unauthorized header::before {
+%empty-state[class*='status-'] header::before {
-  @extend %with-alert-circle-outline-mask, %as-pseudo;
+  @extend %as-pseudo;
+}
+%empty-state.status- header::before {
+  @extend %with-alert-circle-outline-mask;
+}
+%empty-state.status-404 header::before {
+  @extend %with-help-circle-outline-mask;
+}
+%empty-state.status-403 header::before {
+  @extend %with-disabled-mask;
 }
 %empty-state .docs-link > *::before {
   @extend %with-docs-mask, %as-pseudo;
 }
+%empty-state .back-link > *::before {
+  @extend %with-chevron-left-mask, %as-pseudo;
+}
 %empty-state .learn-link > *::before {
   @extend %with-learn-mask, %as-pseudo;
 }

ui-v2/app/styles/components/form-elements.scss

@@ -11,8 +11,8 @@ label span {
 .has-error {
   @extend %form-element-error;
 }
-%modal-dialog .type-text,
+%main-content .type-password,
-%app-view-content .type-text {
+%main-content .type-text {
   @extend %form-element;
 }
 .type-toggle {

ui-v2/app/styles/components/notice.scss

@@ -21,6 +21,9 @@
 .notice.warning {
   @extend %notice-warning;
 }
+.notice.error {
+  @extend %notice-error;
+}
 .notice.info {
   @extend %notice-info;
 }