header: adds colors to docs

Former-commit-id: 133205cef8
Former-commit-id: 78182d8e2d

node/src/documents/elements/header.html

@@ -114,14 +114,61 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Dividing Header</h4>
-    <p>A header can be formatted to be displayed with an icon</p>
-    <h1 class="ui dividing header">
-      <i class="icon easel"></i>
-      Step 1
-    </h1>
+    <h4>Colors</h4>
+    <p>A header can be formatted as different colors</p>
+    <h5 class="ui black header">
+      Black
+    </h5>
+    <h5 class="ui blue header">
+      Blue
+    </h5>
+    <h5 class="ui red header">
+      Red
+    </h5>
+    <h5 class="ui green header">
+      Green
+    </h5>
+    <h5 class="ui purple header">
+      Purple
+    </h5>
+    <h5 class="ui teal header">
+      Teal
+    </h5>
   </div>
   
+  <div class="example">
+    <h4>Inverted</h4>
+    <p>A header can have its colors inverted for contrast</p>
+    <h5 class="ui inverted black header">
+      Black
+    </h5>
+    <h5 class="ui inverted blue header">
+      Blue
+    </h5>
+    <h5 class="ui inverted red header">
+      Red
+    </h5>
+    <h5 class="ui inverted green header">
+      Green
+    </h5>
+    <h5 class="ui inverted purple header">
+      Purple
+    </h5>
+    <h5 class="ui inverted teal header">
+      Teal
+    </h5>
+  </div>
+  
+<!--   
+<div class="example">
+  <h4>Dividing</h4>
+  <p>A header can be formatted to be displayed with a divider</p>
+  <h1 class="ui dividing header">
+    <i class="icon easel"></i>
+    Step 1
+  </h1>
+</div> -->
+  
   <div class="example">
     <h4>Attached</h4>
     <p>A header can be attached to other content</p>

node/src/files/components/semantic/src/elements/header.css

@@ -107,6 +107,17 @@ h5.ui.header {
 *******************************/
 
 
+/*-------------------
+      Inverted 
+--------------------*/
+
+.ui.inverted.header {
+  background-color: #222222;
+  padding: 0.7em 1em;
+  color: #FFFFFF;
+}
+
+
 /*-------------------
        Colors
 --------------------*/
@@ -134,12 +145,12 @@ h5.ui.header {
    Inverted Colors
 --------------------*/
 
-.ui.inverted.blue.header {
-  background-color: #6ECFF5;
+.ui.inverted.black.header {
+  background-color: #5C6166;
   color: #FFFFFF;
 }
-.ui.inverted.header {
-  background-color: #5C6166;
+.ui.inverted.blue.header {
+  background-color: #6ECFF5;
   color: #FFFFFF;
 }
 .ui.inverted.green.header {
@@ -189,24 +200,6 @@ h5.ui.header {
       Dividing
 --------------------*/
 
-.huge.ui.header {
-  min-height: 1em;
-  line-height: 1.33em;
-  font-size: 2em;
-}
-.large.ui.header {
-  line-height: 1.33em;
-  font-size: 1.5em;
-}
-.medium.ui.header {
-  margin-bottom: 0.25em;
-}
-.small.ui.header {
-  margin-bottom: 0.25em;
-}
-.tiny.ui.header {
-  margin-bottom: 0em;
-}
 
 /*-------------------
        Attached

src/elements/header.css

@@ -107,6 +107,17 @@ h5.ui.header {
 *******************************/
 
 
+/*-------------------
+      Inverted 
+--------------------*/
+
+.ui.inverted.header {
+  background-color: #222222;
+  padding: 0.7em 1em;
+  color: #FFFFFF;
+}
+
+
 /*-------------------
        Colors
 --------------------*/
@@ -134,12 +145,12 @@ h5.ui.header {
    Inverted Colors
 --------------------*/
 
-.ui.inverted.blue.header {
-  background-color: #6ECFF5;
+.ui.inverted.black.header {
+  background-color: #5C6166;
   color: #FFFFFF;
 }
-.ui.inverted.header {
-  background-color: #5C6166;
+.ui.inverted.blue.header {
+  background-color: #6ECFF5;
   color: #FFFFFF;
 }
 .ui.inverted.green.header {
@@ -189,24 +200,6 @@ h5.ui.header {
       Dividing
 --------------------*/
 
-.huge.ui.header {
-  min-height: 1em;
-  line-height: 1.33em;
-  font-size: 2em;
-}
-.large.ui.header {
-  line-height: 1.33em;
-  font-size: 1.5em;
-}
-.medium.ui.header {
-  margin-bottom: 0.25em;
-}
-.small.ui.header {
-  margin-bottom: 0.25em;
-}
-.tiny.ui.header {
-  margin-bottom: 0em;
-}
 
 /*-------------------
        Attached