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'
-

Dividing Header

-

A header can be formatted to be displayed with an icon

-

- - Step 1 -

+

Colors

+

A header can be formatted as different colors

+
+ Black +
+
+ Blue +
+
+ Red +
+
+ Green +
+
+ Purple +
+
+ Teal +
+
+

Inverted

+

A header can have its colors inverted for contrast

+
+ Black +
+
+ Blue +
+
+ Red +
+
+ Green +
+
+ Purple +
+
+ Teal +
+
+ + +

Attached

A header can be attached to other content

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