diff --git a/src/elements/header.less b/src/elements/header.less index cf01957a7..7100a6980 100755 --- a/src/elements/header.less +++ b/src/elements/header.less @@ -9,6 +9,33 @@ * */ +/******************************* + Variables +*******************************/ + +@import "../global.variables"; + +/*------------------- + Globals Used +--------------------*/ + +// @white +// @blue +// @red +// @green +// @purple +// @teal +// @midGrey + +/*------------------- + Modified Globals +--------------------*/ + +/*------------------- + Header Variables +--------------------*/ + + /******************************* Header *******************************/ @@ -167,41 +194,41 @@ h5.ui.header { --------------------*/ .ui.blue.header { - color: #6ECFF5 !important; + color: @blue !important; } .ui.black.header { - color: #5C6166 !important; + color: @midGrey !important; } .ui.green.header { - color: #A1CF64 !important; + color: @green !important; } .ui.red.header { - color: #D95C5C !important; + color: @red !important; } .ui.purple.header { - color: #564F8A !important; + color: @purple !important; } .ui.teal.header { - color: #00B5AD !important; + color: @teal !important; } .ui.blue.dividing.header { - border-bottom: 3px solid #6ECFF5; + border-bottom: 3px solid @blue; } .ui.black.dividing.header { - border-bottom: 3px solid #5C6166; + border-bottom: 3px solid @midGrey; } .ui.green.dividing.header { - border-bottom: 3px solid #A1CF64; + border-bottom: 3px solid @green; } .ui.red.dividing.header { - border-bottom: 3px solid #D95C5C; + border-bottom: 3px solid @red; } .ui.purple.dividing.header { - border-bottom: 3px solid #564F8A; + border-bottom: 3px solid @purple; } .ui.teal.dividing.header { - border-bottom: 3px solid #00B5AD; + border-bottom: 3px solid @teal; } /*------------------- @@ -209,7 +236,7 @@ h5.ui.header { --------------------*/ .ui.inverted.header { - color: #FFFFFF; + color: @white; } .ui.inverted.header .sub.header { color: rgba(255, 255, 255, 0.85); @@ -221,28 +248,28 @@ h5.ui.header { --------------------*/ .ui.inverted.black.header { - background-color: #5C6166 !important; - color: #FFFFFF !important; + background-color: @midGrey !important; + color: @white !important; } .ui.inverted.blue.header { - background-color: #6ECFF5 !important; - color: #FFFFFF !important; + background-color: @blue !important; + color: @white !important; } .ui.inverted.green.header { - background-color: #A1CF64 !important; - color: #FFFFFF !important; + background-color: @green !important; + color: @white !important; } .ui.inverted.red.header { - background-color: #D95C5C !important; - color: #FFFFFF !important; + background-color: @red !important; + color: @white !important; } .ui.inverted.purple.header { - background-color: #564F8A !important; - color: #FFFFFF !important; + background-color: @purple !important; + color: @white !important; } .ui.inverted.teal.header { - background-color: #00B5AD !important; - color: #FFFFFF !important; + background-color: @teal !important; + color: @white !important; } .ui.inverted.block.header { @@ -320,23 +347,14 @@ h5.ui.header { .ui.attached.header { background-color: #E0E0E0; padding: 0.5em 1rem; - - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); } .ui.top.attached.header { margin-bottom: 0em; - - -webkit-border-radius: 0.3125em 0.3125em 0em 0em; - -moz-border-radius: 0.3125em 0.3125em 0em 0em; border-radius: 0.3125em 0.3125em 0em 0em; } .ui.bottom.attached.header { margin-top: 0em; - - -webkit-border-radius: 0em 0em 0.3125em 0.3125em; - -moz-border-radius: 0em 0em 0.3125em 0.3125em; border-radius: 0em 0em 0.3125em 0.3125em; } diff --git a/src/global.variables b/src/global.variables index 2b93a6919..3fc9af27a 100755 --- a/src/global.variables +++ b/src/global.variables @@ -44,14 +44,14 @@ @orange : #E96633; @pink : #D9499A; @purple : #564F8A; -@red : #F00000; +@red : #D95C5C; @teal : #00B5AD; @white : #FFFFFF; @yellow : #F6F3D5; /*--- Emotive ---*/ -@positiveColor : #5BBD72; -@negativeColor : #D95C5C; +@positiveColor : @green; +@negativeColor : @red; @infoColor : #E6F4F9; @warningColor : #96904D; @@ -94,14 +94,23 @@ Sizes --------------------*/ -@mini : 0.7; -@tiny : 0.8; -@small : 0.875; -@medium : 1; -@large : 1.125; -@big : 1.25; -@huge : 1.375; -@massive : 1.5; +@mini : 0.7em; +@tiny : 0.8em; +@small : 0.875em; +@medium : 1em; +@large : 1.125em; +@big : 1.25em; +@huge : 1.375em; +@massive : 1.5em; + +@rootMini : 0.7rem; +@rootTiny : 0.8rem; +@rootSmall : 0.875rem; +@rootMedium : 1rem; +@rootLarge : 1.125rem; +@rootBig : 1.25rem; +@rootHuge : 1.375rem; +@rootMassive : 1.5em; /*-------------------