adding #16

public/components.html

@@ -66,7 +66,7 @@
 </code>
                 </div>
 
-                <div class="m-bottom-4">
+                <div>
                     <button class="button">
                         Default
                     </button>
@@ -84,7 +84,7 @@
                     </button>
                 </div>
 
-                <div class="m-bottom-4">
+                <div>
                     <button class="button button--danger">
                         danger
                     </button>
@@ -99,7 +99,7 @@
                     </button>
                 </div>
 
-                <div class="m-bottom-4">
+                <div>
                     <button class="button button--outline">
                         outline
                     </button>
@@ -220,7 +220,14 @@
         <div class="grid">
             <div class="col-12">
                 <h2>Loading</h2>
-                <div>
+                <div class="content m-last-child-0 m-bottom-4">
+<code>&#x3C;div class=&#x22;loading&#x22;&#x3E;
+    &#x3C;span&#x3E;&#x3C;/span&#x3E;
+    &#x3C;span&#x3E;&#x3C;/span&#x3E;
+    &#x3C;span&#x3E;&#x3C;/span&#x3E;
+&#x3C;/div&#x3E;
+</code>
+                </div>
                 <div class="loading">
                     <span></span>
                     <span></span>
@@ -228,7 +235,6 @@
                 </div>
             </div>
         </div>
-        </div>
 
         <div class="grid">
             <div class="col-12">

public/plain-ui.css

@@ -2454,6 +2454,9 @@ svg.field-choice__checked {
 .tabs--contrast .tabs__item--selected {
   border-color: var(--border-contrast);
 }
+.tabs--contrast .tabs__item--selected:hover {
+  border-color: var(--active);
+}
 
 /**
  *

src/scss/components/_tabs.scss

@@ -66,6 +66,10 @@
 
         .tabs__item--selected {
             border-color: var(--border-contrast);
+
+            &:hover {
+                border-color: var(--active);
+            }
         }
     }
 }