From b1990f1f6aeb01fcdfb473cd6dc73b79fff37c8e Mon Sep 17 00:00:00 2001 From: Rickie Sherman Date: Wed, 31 May 2017 02:35:38 -0700 Subject: [PATCH 1/6] adding colors.scss --- src/styles/scss/colors.scss | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/src/styles/scss/colors.scss b/src/styles/scss/colors.scss index ac30381..fc75e7d 100644 --- a/src/styles/scss/colors.scss +++ b/src/styles/scss/colors.scss @@ -1,6 +1,6 @@ // list 39 colors -$color-array: black white gray-lighterest gray-lightest gray-lighter gray-light gray gray-dark gray-darker green green-light green-lighter green-dark green-darker green-darkest purple purple-logo purple-light purple-lighter purple-lightest purple-dark purple-darker purple-darkest orange orange-light orange-lighter orange-lightest orange-dark orange-darker orange-darkest red red-light red-lighter red-dark blue blue-light blue-lighter blue-dark; -$color-array-values: $black $white $gray-lighterest $gray-lightest $gray-lighter $gray-light $gray $gray-dark $gray-darker $green $green-light $green-lighter $green-dark $green-darker $green-darkest $purple $purple-logo $purple-light $purple-lighter $purple-lightest $purple-dark $purple-darker $purple-darkest $orange $orange-light $orange-lighter $orange-lightest $orange-dark $orange-darker $orange-darkest $red $red-light $red-lighter $red-dark $blue $blue-light $blue-lighter $blue-dark; +$color-array: black white gray-lighterest gray-lightest gray-lighter gray-light gray-logo gray gray-dark gray-darker green green-light green-lighter green-dark green-darker green-darkest purple purple-logo purple-light purple-lighter purple-lightest purple-dark purple-darker purple-darkest orange orange-light orange-lighter orange-lightest orange-dark orange-darker orange-darkest red red-light red-lighter red-dark blue blue-light blue-lighter blue-dark; +$color-array-values: $black $white $gray-lighterest $gray-lightest $gray-lighter $gray-light $gray-logo $gray $gray-dark $gray-darker $green $green-light $green-lighter $green-dark $green-darker $green-darkest $purple $purple-logo $purple-light $purple-lighter $purple-lightest $purple-dark $purple-darker $purple-darkest $orange $orange-light $orange-lighter $orange-lightest $orange-dark $orange-darker $orange-darkest $red $red-light $red-lighter $red-dark $blue $blue-light $blue-lighter $blue-dark; @mixin colors() { // 39 colors in total @@ -14,29 +14,26 @@ $color-array-values: $black $white $gray-lighterest $gray-lightest $gray-lighter @include colors(); -.figure-colors-wrapper { +.figure-color-wrapper { .figure { - background: none; border: 0; - display: block; - margin: 0; + display: flex; + justify-content: center; + margin: 6px; padding: 0; - text-align: left; - } - - .figure-color, - .figcaption { - float: left; - margin: 0; - } - .figcaption { - margin-left: 9px; + .figcaption { + font-size: 13px; + margin: 0; + padding: 0 $sm; + } } } .figure-color { - height: 90px; + align-content: center; + height: 80px; + justify-content: center; width: 150px; } From cd6f32d2ff09eaff3aedc35016299bd65d64f0ec Mon Sep 17 00:00:00 2001 From: Rickie Sherman Date: Wed, 31 May 2017 02:40:23 -0700 Subject: [PATCH 2/6] moving colors, adding to index, adding color html --- src/html/colors.html | 264 ++++++++++++++++++++++------------ src/styles/angular/index.scss | 3 + src/styles/scss/colors.scss | 39 ----- 3 files changed, 172 insertions(+), 134 deletions(-) delete mode 100644 src/styles/scss/colors.scss diff --git a/src/html/colors.html b/src/html/colors.html index 90c7be6..6f8df18 100755 --- a/src/html/colors.html +++ b/src/html/colors.html @@ -2,20 +2,107 @@

Colors

+

Logo Colors

-
+
-
-
+
+
+ $purple +
+ #71438f +
+ 526 C +
+
+ + + + + +
+
+ $white +
+ #ffffff +
+
+
+ +

Brand Colors

+ +
+ +
+ $green +
+ #3ccb5a +
+
+ +
+
+ $purple +
+ #71438f +
+
+ +
+
+ $orange +
+ #f5a11b +
+
+ +
+
+ $red +
+ #f25058 +
+
+ +
+
+ $blue +
+ #0ca6f2 +
+
+
+ +

Monochrome

+ +
+ +
+
$black
#000
-
-
+
$white
@@ -23,8 +110,7 @@

Colors

-
-
+
$gray-lighterest
@@ -32,8 +118,7 @@

Colors

-
-
+
$gray-lightest
@@ -41,8 +126,7 @@

Colors

-
-
+
$gray-lighter
@@ -50,8 +134,7 @@

Colors

-
-
+
$gray-light
@@ -59,35 +142,35 @@

Colors

-
-
-
+
+
$gray
#888
-
-
-
+
+
$gray-dark
#555
-
-
-
+
+
$gray-darker
#333
+
+ +

Green

-
-
+
+
$green-lighter
@@ -95,17 +178,15 @@

Colors

-
-
-
+
+
$green-light
#2bd94f
-
-
+
$green
@@ -113,35 +194,36 @@

Colors

-
-
-
+
+
$green-dark
#31b74d
-
-
-
+
+
$green-darker
#2a9f43
-
-
-
+
+
$green-darkest
#09200e
+
+ +

Purple

-
-
+
+ +
$purple-lightest
@@ -149,62 +231,60 @@

Colors

-
-
-
+
+
$purple-lighter
#b6a6bd
-
-
-
+
+
$purple-light
#834fab
-
-
-
+
+
$purple
#5b3777
-
-
-
+
+
$purple-dark
#402754
-
-
-
+
+
$purple-darker
#261731
-
-
-
+
+
$purple-darkest
#1b0f24
+
+ +

Orange

-
-
+
+ +
$orange-lightest
@@ -212,8 +292,7 @@

Colors

-
-
+
$orange-lighter
@@ -221,8 +300,7 @@

Colors

-
-
+
$orange-light
@@ -230,44 +308,44 @@

Colors

-
-
+
$orange
- #f2ae24 + #f5a11b
-
-
-
+
+
$orange-dark
#db970d
-
-
-
+
+
$orange-darker
#cd8d0c
-
-
-
+
+
$orange-darkest
#3d2b05
+
-
-
+

Red

+ +
+ +
$red-lighter
@@ -275,8 +353,7 @@

Colors

-
-
+
$red-light
@@ -284,17 +361,18 @@

Colors

-
-
-
+
+
$red
#f25058
+
-
-
+
+ +
$blue-lighter
@@ -302,8 +380,7 @@

Colors

-
-
+
$blue-light
@@ -311,23 +388,20 @@

Colors

-
-
-
+
+
$blue
#0ca6f2
-
-
-
+
+
$blue-dark
#1e7daf
-
-
\ No newline at end of file + diff --git a/src/styles/angular/index.scss b/src/styles/angular/index.scss index d196c03..9f4608b 100755 --- a/src/styles/angular/index.scss +++ b/src/styles/angular/index.scss @@ -45,6 +45,9 @@ // global layout @import "layout/layout"; +// colors +@import "components/colors" + // sidebar @import "sidebar/sidebar"; diff --git a/src/styles/scss/colors.scss b/src/styles/scss/colors.scss deleted file mode 100644 index fc75e7d..0000000 --- a/src/styles/scss/colors.scss +++ /dev/null @@ -1,39 +0,0 @@ -// list 39 colors -$color-array: black white gray-lighterest gray-lightest gray-lighter gray-light gray-logo gray gray-dark gray-darker green green-light green-lighter green-dark green-darker green-darkest purple purple-logo purple-light purple-lighter purple-lightest purple-dark purple-darker purple-darkest orange orange-light orange-lighter orange-lightest orange-dark orange-darker orange-darkest red red-light red-lighter red-dark blue blue-light blue-lighter blue-dark; -$color-array-values: $black $white $gray-lighterest $gray-lightest $gray-lighter $gray-light $gray-logo $gray $gray-dark $gray-darker $green $green-light $green-lighter $green-dark $green-darker $green-darkest $purple $purple-logo $purple-light $purple-lighter $purple-lightest $purple-dark $purple-darker $purple-darkest $orange $orange-light $orange-lighter $orange-lightest $orange-dark $orange-darker $orange-darkest $red $red-light $red-lighter $red-dark $blue $blue-light $blue-lighter $blue-dark; - -@mixin colors() { - // 39 colors in total - @for $i from 1 to 39 { - // background - .color-#{nth($color-array,$i)} { - background: nth($color-array-values,$i); - } - } -} - -@include colors(); - -.figure-color-wrapper { - - .figure { - border: 0; - display: flex; - justify-content: center; - margin: 6px; - padding: 0; - - .figcaption { - font-size: 13px; - margin: 0; - padding: 0 $sm; - } - } -} - -.figure-color { - align-content: center; - height: 80px; - justify-content: center; - width: 150px; -} From 1a8d2d5330f1dcd36c0f0f83b242517305af49d0 Mon Sep 17 00:00:00 2001 From: Rickie Sherman Date: Wed, 31 May 2017 03:08:16 -0700 Subject: [PATCH 3/6] filling out rules, removing borders, etc --- src/html/colors.html | 53 ++--------------------------- src/styles/angular/globals/var.scss | 3 +- src/styles/angular/index.scss | 3 -- src/styles/scss/figures.scss | 1 - 4 files changed, 4 insertions(+), 56 deletions(-) diff --git a/src/html/colors.html b/src/html/colors.html index 6f8df18..abfdf38 100755 --- a/src/html/colors.html +++ b/src/html/colors.html @@ -2,49 +2,6 @@

Colors

-

Logo Colors

- -
- -
-
- $purple -
- #71438f -
- 526 C -
-
- - - - - -
-
- $white -
- #ffffff -
-
-
-

Brand Colors

@@ -370,16 +327,10 @@

Red

+

Blue

+
-
-
- $blue-lighter -
- #f5fcff -
-
-
$blue-light diff --git a/src/styles/angular/globals/var.scss b/src/styles/angular/globals/var.scss index eae8936..4408200 100755 --- a/src/styles/angular/globals/var.scss +++ b/src/styles/angular/globals/var.scss @@ -21,6 +21,7 @@ $gray-light: #bbb; $gray: #888; $gray-dark: #555; $gray-darker: #222; +$gray-logo: #ccc; $green: #3ccb5a; // #1DD156 $green-light: #2bd94f; @@ -64,7 +65,7 @@ $red-darker: darken($red-dark,10%); $blue: #0ca6f2; // previously #2ab0f6; $blue-light: #8bd5f9; // previously #86cff6; $blue-lighter: #f5fcff; // previously #f1faff; -$blue-dark: #0a9be2; +$blue-dark: #1e7daf; // ********** // log themes diff --git a/src/styles/angular/index.scss b/src/styles/angular/index.scss index 9f4608b..d196c03 100755 --- a/src/styles/angular/index.scss +++ b/src/styles/angular/index.scss @@ -45,9 +45,6 @@ // global layout @import "layout/layout"; -// colors -@import "components/colors" - // sidebar @import "sidebar/sidebar"; diff --git a/src/styles/scss/figures.scss b/src/styles/scss/figures.scss index 303845c..dfba6be 100644 --- a/src/styles/scss/figures.scss +++ b/src/styles/scss/figures.scss @@ -72,7 +72,6 @@ } .figcaption { - color: $gray-dark; font-weight: bold; margin-top: 15px; margin-bottom: 10px; From f2dab52e09aafd584dc64aca56f5dbf2b47be8e2 Mon Sep 17 00:00:00 2001 From: Rickie Sherman Date: Wed, 31 May 2017 03:09:59 -0700 Subject: [PATCH 4/6] adding logo colors --- src/html/colors.html | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/src/html/colors.html b/src/html/colors.html index abfdf38..fa1766a 100755 --- a/src/html/colors.html +++ b/src/html/colors.html @@ -2,6 +2,49 @@

Colors

+

Logo Colors

+ +
+ +
+
+ $purple +
+ #71438f +
+ 526 C +
+
+ + + + + +
+
+ $white +
+ #ffffff +
+
+
+

Brand Colors

From d8f36d9608b77e1d221bc267f7e329ae7f5597b8 Mon Sep 17 00:00:00 2001 From: Rickie Sherman Date: Mon, 5 Jun 2017 10:33:03 -0700 Subject: [PATCH 5/6] adding CMYK values and switching around colors --- src/html/colors.html | 36 ++++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/src/html/colors.html b/src/html/colors.html index fa1766a..d3452a5 100755 --- a/src/html/colors.html +++ b/src/html/colors.html @@ -6,41 +6,49 @@

Logo Colors

-
+
- $purple + $purple-light
- #71438f + #834fab +
+ 23.4, 53.8, 0, 33
526 C
-
From fcb3b70a079b0be218271785a4599a700e12ab82 Mon Sep 17 00:00:00 2001 From: Rickie Sherman Date: Tue, 6 Jun 2017 18:26:53 -0700 Subject: [PATCH 6/6] removing extra colors --- src/html/colors.html | 354 ------------------------------------------- 1 file changed, 354 deletions(-) diff --git a/src/html/colors.html b/src/html/colors.html index d3452a5..7dbb9a1 100755 --- a/src/html/colors.html +++ b/src/html/colors.html @@ -52,358 +52,4 @@

Logo Colors

- -

Brand Colors

- -
- -
-
- $green -
- #3ccb5a -
-
- -
-
- $purple -
- #71438f -
-
- -
-
- $orange -
- #f5a11b -
-
- -
-
- $red -
- #f25058 -
-
- -
-
- $blue -
- #0ca6f2 -
-
-
- -

Monochrome

- -
- -
-
- $black -
- #000 -
-
- -
-
- $white -
- #fff -
-
- -
-
- $gray-lighterest -
- #f7f7f7 -
-
- -
-
- $gray-lightest -
- #f0f0f0 -
-
- -
-
- $gray-lighter -
- #dbdbdb -
-
- -
-
- $gray-light -
- #bbb -
-
- -
-
- $gray -
- #888 -
-
- -
-
- $gray-dark -
- #555 -
-
- -
-
- $gray-darker -
- #333 -
-
-
- -

Green

- -
-
-
- $green-lighter -
- #e8ffed -
-
- -
-
- $green-light -
- #2bd94f -
-
- -
-
- $green -
- #3ccb5a -
-
- -
-
- $green-dark -
- #31b74d -
-
- -
-
- $green-darker -
- #2a9f43 -
-
- -
-
- $green-darkest -
- #09200e -
-
-
- -

Purple

- -
- -
-
- $purple-lightest -
- #eee1f7 -
-
- -
-
- $purple-lighter -
- #b6a6bd -
-
- -
-
- $purple-light -
- #834fab -
-
- -
-
- $purple -
- #5b3777 -
-
- -
-
- $purple-dark -
- #402754 -
-
- -
-
- $purple-darker -
- #261731 -
-
- -
-
- $purple-darkest -
- #1b0f24 -
-
-
- -

Orange

- -
- -
-
- $orange-lightest -
- #fffbf5 -
-
- -
-
- $orange-lighter -
- #f7c457 -
-
- -
-
- $orange-light -
- #f9b548 -
-
- -
-
- $orange -
- #f5a11b -
-
- -
-
- $orange-dark -
- #db970d -
-
- -
-
- $orange-darker -
- #cd8d0c -
-
- -
-
- $orange-darkest -
- #3d2b05 -
-
-
- -

Red

- -
- -
-
- $red-lighter -
- #fde6e9 -
-
- -
-
- $red-light -
- #ef737f -
-
- -
-
- $red -
- #f25058 -
-
-
- -

Blue

- -
- -
-
- $blue-light -
- #8bd5f9 -
-
- -
-
- $blue -
- #0ca6f2 -
-
- -
-
- $blue-dark -
- #1e7daf -
-
-