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'
A header can be formatted to be displayed with an icon
-A header can be formatted as different colors
+A header can have its colors inverted for contrast
+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