From 133205cef8ed1335c70951e271791e0453dbbf7b Mon Sep 17 00:00:00 2001
From: Jack Lukic <jack@quirky.com>
Date: Tue, 14 May 2013 20:08:41 -0400
Subject: [PATCH] header: adds colors to docs

---
 node/src/documents/elements/header.html       | 59 +++++++++++++++++--
 .../semantic/src/elements/header.css          | 37 +++++-------
 src/elements/header.css                       | 37 +++++-------
 3 files changed, 83 insertions(+), 50 deletions(-)

diff --git a/node/src/documents/elements/header.html b/node/src/documents/elements/header.html
index 02dc2d17e..fac5975ee 100755
--- a/node/src/documents/elements/header.html
+++ b/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>
diff --git a/node/src/files/components/semantic/src/elements/header.css b/node/src/files/components/semantic/src/elements/header.css
index f615c7ea2..37a79f8f6 100644
--- a/node/src/files/components/semantic/src/elements/header.css
+++ b/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
diff --git a/src/elements/header.css b/src/elements/header.css
index f615c7ea2..37a79f8f6 100755
--- a/src/elements/header.css
+++ b/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