From c75556683c34a80df5f342d1fde6314983303ba4 Mon Sep 17 00:00:00 2001 From: Jonathan James Date: Wed, 30 Oct 2013 22:37:06 -0600 Subject: [PATCH 1/5] update global colors add lightGreen update @red to match semantic-ui asthetics --- src/global.variables | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/global.variables b/src/global.variables index 2b93a6919..adb1ad89f 100755 --- a/src/global.variables +++ b/src/global.variables @@ -41,10 +41,11 @@ @blue : #6ECFF5; @gold : #FFCB08; @green : #5BBD72; +@lightGreen : #A1CF64; @orange : #E96633; @pink : #D9499A; @purple : #564F8A; -@red : #F00000; +@red : #D95C5C; @teal : #00B5AD; @white : #FFFFFF; @yellow : #F6F3D5; From 470c22e1fcb22737c85315bc3fe4c35b18c1aea8 Mon Sep 17 00:00:00 2001 From: Jonathan James Date: Wed, 30 Oct 2013 22:38:39 -0600 Subject: [PATCH 2/5] first pass variable substitution for headers add legend swap color vars with globals remove deprecated browser prefixes on box-shadow and border-radius --- src/elements/header.less | 86 ++++++++++++++++++++++++---------------- 1 file changed, 52 insertions(+), 34 deletions(-) diff --git a/src/elements/header.less b/src/elements/header.less index cf01957a7..4c33dd464 100755 --- a/src/elements/header.less +++ b/src/elements/header.less @@ -9,6 +9,33 @@ * */ +/******************************* + Variables +*******************************/ + +@import "../global.variables"; + +/*------------------- + Globals Used +--------------------*/ + +// @white +// @blue +// @red +// @lightGreen +// @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: @lightGreen !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 @lightGreen; } .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: @lightGreen !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; } From 0a157922b6a05220265da5bf5b7ad5e2f3c0620d Mon Sep 17 00:00:00 2001 From: Jonathan James Date: Wed, 30 Oct 2013 23:16:28 -0600 Subject: [PATCH 3/5] make size variables usable --- src/global.variables | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/global.variables b/src/global.variables index adb1ad89f..faf1e094f 100755 --- a/src/global.variables +++ b/src/global.variables @@ -95,14 +95,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; /*------------------- From f444b7e3675be5e9c1f3dde8dd182fd3a152b7e3 Mon Sep 17 00:00:00 2001 From: Jon James Date: Thu, 31 Oct 2013 09:32:34 -0600 Subject: [PATCH 4/5] update global.variables. positive and negative now default to @red and @green --- src/global.variables | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/global.variables b/src/global.variables index faf1e094f..3fc9af27a 100755 --- a/src/global.variables +++ b/src/global.variables @@ -41,7 +41,6 @@ @blue : #6ECFF5; @gold : #FFCB08; @green : #5BBD72; -@lightGreen : #A1CF64; @orange : #E96633; @pink : #D9499A; @purple : #564F8A; @@ -51,8 +50,8 @@ @yellow : #F6F3D5; /*--- Emotive ---*/ -@positiveColor : #5BBD72; -@negativeColor : #D95C5C; +@positiveColor : @green; +@negativeColor : @red; @infoColor : #E6F4F9; @warningColor : #96904D; From 01858d688bcc92c66e9c84ab3c3360d8792bf2cd Mon Sep 17 00:00:00 2001 From: Jon James Date: Thu, 31 Oct 2013 09:33:28 -0600 Subject: [PATCH 5/5] update header.less to use current @green color --- src/elements/header.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/elements/header.less b/src/elements/header.less index 4c33dd464..7100a6980 100755 --- a/src/elements/header.less +++ b/src/elements/header.less @@ -22,7 +22,7 @@ // @white // @blue // @red -// @lightGreen +// @green // @purple // @teal // @midGrey @@ -200,7 +200,7 @@ h5.ui.header { color: @midGrey !important; } .ui.green.header { - color: @lightGreen !important; + color: @green !important; } .ui.red.header { color: @red !important; @@ -219,7 +219,7 @@ h5.ui.header { border-bottom: 3px solid @midGrey; } .ui.green.dividing.header { - border-bottom: 3px solid @lightGreen; + border-bottom: 3px solid @green; } .ui.red.dividing.header { border-bottom: 3px solid @red; @@ -256,7 +256,7 @@ h5.ui.header { color: @white !important; } .ui.inverted.green.header { - background-color: @lightGreen !important; + background-color: @green !important; color: @white !important; } .ui.inverted.red.header {