Add Global Colors and Updated SCSS / Linter

Created a new global style sheet to manage colors and converted all the current SCSS to match the new color scheme.
This commit is contained in:
carljbowman 2015-09-29 11:22:48 -04:00
parent ab40dd8aa3
commit 41e4b3b990
18 changed files with 171 additions and 100 deletions

View file

@ -1,4 +1,5 @@
rules: rules:
color-literals: 2
final-newline: 2 final-newline: 2
hex-notation: 2 hex-notation: 2
indentation: indentation:

28
src/colors.scss Normal file
View file

@ -0,0 +1,28 @@
/* UI Primary Colors */
$ui-blue: hsla(200, 90, 55, 1); // #25AFF4
$ui-orange: hsla(35, 90, 55, 1); // #F49D25
$ui-gray: hsla(0, 0, 95, 1); //#F2F2F2
$ui-dark-gray: hsla(0, 0, 70, 1); //#B3B3B3
$background-color: hsla(0, 0, 99, 1); //#FDFDFD
/* UI Secondary Colors */
$ui-aqua: hsla(170, 70, 50, 1); //#26D9BB
$ui-white: #fff;
$ui-border: hsla(0, 0, 85, 1); //#D9D9D9
$box-shadow-gray: hsla(0, 0, 0, .25);
/* Overlay UI Gray Colors */
$active-gray: hsla(0, 0, 0, .1);
$active-dark-gray: hsla(0, 0, 0, .2);
/* Typography Colors */
$header-gray: hsla(0, 0, 42, 1); //#6B6B6B
$type-gray: hsla(0, 0, 42, 1); //#6B6B6B
$type-white: #fff;
$link-blue: $ui-blue;

View file

@ -1,3 +1,5 @@
@import "../../colors";
.activity { .activity {
ul { ul {
display: block; display: block;
@ -35,7 +37,7 @@
} }
.stamp { .stamp {
color: #999; color: $ui-dark-gray;
font-size: .65rem; font-size: .65rem;
} }
} }

View file

@ -1,3 +1,3 @@
.avatar { .avatar {
border: 1px solid #ccc; border: 1px solid $ui-border;
} }

View file

@ -1,18 +1,21 @@
@import "../../colors";
$base-bg: $ui-white;
.box { .box {
display: inline-block; display: inline-block;
border: 1px solid #e0e0e0; border: 1px solid $ui-border;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
box-shadow: 0 2px 3px rgba(34, 25, 25, .3);
width: 100%; width: 100%;
.box-header { .box-header {
display: block; display: block;
clear: both; clear: both;
margin: 0; margin: 0;
border-top: 1px solid white; border-top: 1px solid $ui-white;
border-bottom: 1px solid #ccc; border-bottom: 1px solid $ui-border;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
background-color: #efefef; background-color: $ui-gray;
padding: 8px 20px; padding: 8px 20px;
height: 20px; height: 20px;
@ -38,7 +41,7 @@
.box-content { .box-content {
display: block; display: block;
clear: both; clear: both;
background-color: white; background-color: $base-bg;
padding: 8px 20px; padding: 8px 20px;
} }
} }

View file

@ -1,3 +1,5 @@
@import "../../colors";
.carousel { .carousel {
$icon-size: 40px; $icon-size: 40px;
$button-offset: $icon-size + 5px; $button-offset: $icon-size + 5px;
@ -16,7 +18,7 @@
height: $icon-size; height: $icon-size;
&:before { &:before {
color: #ddd; color: $ui-dark-gray;
font-size: $icon-size; font-size: $icon-size;
} }

View file

@ -1,8 +1,10 @@
@import "../../colors";
#footer { #footer {
display: block; display: block;
background-color: #ececec; background-color: $ui-gray;
padding: 10px 0; padding: 10px 0;
color: #666; color: $type-gray;
.lists { .lists {
display: flex; display: flex;

View file

@ -1,31 +1,35 @@
@import "../../colors";
$base-bg: $ui-white;
.button { .button {
display: inline-block; display: inline-block;
margin: .5em 0; margin: .5em 0;
border: 0; border: 0;
border-radius: 5px; border-radius: 5px;
box-shadow: px 1px 1px rgba(0, 0, 0, .25); box-shadow: 0 1px 1px $box-shadow-gray;
background-color: #24a3ec; background-color: $ui-blue;
cursor: pointer; cursor: pointer;
padding: .75em 1em; padding: .75em 1em;
color: white; color: $type-white;
font-size: .8rem; font-size: .8rem;
font-weight: bold; font-weight: bold;
&.white { &.white {
border-top: 1px inset rgba(0, 0, 0, .1); border-top: 1px inset $active-gray;
background-color: white; background-color: $base-bg;
color: #24a3ec; color: $ui-blue;
} }
&:hover { &:hover {
box-shadow: 0 2px 2px rgba(0, 0, 0, .25); box-shadow: 0 2px 2px $box-shadow-gray;
} }
&:active { &:active {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); box-shadow: inset 0 1px 2px $box-shadow-gray;
} }
&:focus{ &:focus {
outline: none; outline: none;
} }
} }

View file

@ -1,27 +1,34 @@
@import "../../colors";
$base-bg: $ui-white;
$focus-bg: lighten($ui-blue, 35%);
$fail-bg: lighten($ui-orange, 35%);
$pass-bg: lighten($ui-aqua, 35%);
.input { .input {
transition: all 1s ease; transition: all 1s ease;
margin: .5em 0; margin: .5em 0;
border: 1px solid rgba(0, 0, 0, .1); border: 1px solid $active-gray;
border-radius: 5px; border-radius: 5px;
background-color: #f7f7f7; background-color: $base-bg;
padding: .75em 1em; padding: .75em 1em;
color: black; color: $type-gray;
font-size: .8rem; font-size: .8rem;
&:focus { &:focus {
transition: all 1s ease; transition: all 1s ease;
outline: none; outline: none;
border: 1px solid rgba(0, 0, 0, .1); border: 1px solid $active-dark-gray;
background-color: #d3eaf8; background-color: $focus-bg;
} }
&.fail { &.fail {
border: 1px solid #eab012; border: 1px solid $active-dark-gray;
background-color: #fff7df; background-color: $fail-bg;
} }
&.pass { &.pass {
border: 1px solid #55db58; border: 1px solid $active-dark-gray;
background-color: #eafdea; background-color: $pass-bg;
} }
} }

View file

@ -1,3 +1,5 @@
@import "../../colors";
.intro { .intro {
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
@ -12,7 +14,7 @@
width: calc(66% - 20px); width: calc(66% - 20px);
h1 { h1 {
color: #f9a739; color: $ui-orange;
font-weight: 400; font-weight: 400;
} }
} }
@ -67,7 +69,7 @@
left: 43px; left: 43px;
z-index: 0; z-index: 0;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 5px #fff; box-shadow: 0 0 5px $ui-white;
width: 112px; width: 112px;
height: 112px; height: 112px;
} }
@ -142,7 +144,7 @@
&.sprite-3 .subtext { &.sprite-3 .subtext {
top: 63px; top: 63px;
left: 60px; left: 60px;
color: #fff; color: $ui-white;
} }
} }
@ -152,7 +154,8 @@
} }
.project-count { .project-count {
color: hsl(318, 50%, 52%); $project-count-color: hsl(318, 50%, 52%);
color: $project-count-color;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
} }
@ -162,7 +165,7 @@
font-size: 12px; font-size: 12px;
a { a {
border-right: 1px solid #000; border-right: 1px solid $type-gray;
padding: 0 5px; padding: 0 5px;
&:last-child { border-right: 0; } &:last-child { border-right: 0; }
@ -174,10 +177,10 @@
.video { .video {
display: inline-block; display: inline-block;
position: relative; position: relative;
border: 1px solid #eee; border: 1px solid $ui-border;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 2px 3px; box-shadow: 0 2px 3px;
background-color: #f7f7f7; background-color: $ui-gray;
padding: 10px; padding: 10px;
width: 34%; width: 34%;
height: 208px; height: 208px;
@ -189,9 +192,9 @@
top: calc(50% - 25px); top: calc(50% - 25px);
left: calc(50% - 35px); left: calc(50% - 35px);
opacity: .8; opacity: .8;
border: 5px solid #ccc; border: 5px solid $ui-border;
border-radius: 20px; border-radius: 20px;
background-color: #666; background-color: $type-gray;
width: 70px; width: 70px;
height: 50px; height: 50px;
@ -204,13 +207,14 @@
} }
&:after { &:after {
$play-arrow: rgba(255, 255, 255, 0);
top: 37px; top: 37px;
left: 28px; left: 28px;
margin-top: -30px; margin-top: -30px;
border: solid transparent; border: solid transparent;
border-width: 18px; border-width: 18px;
border-color: rgba(255, 255, 255, 0); border-color: $play-arrow;
border-left-color: #fff; border-left-color: $ui-white;
width: 0; width: 0;
height: 0; height: 0;
content: " "; content: " ";

View file

@ -1,8 +1,12 @@
@import "../../colors";
$base-bg: $ui-white;
/* Copied from the un-styleable react-modal */ /* Copied from the un-styleable react-modal */
.ReactModal__Overlay { .ReactModal__Overlay {
z-index: 100; z-index: 100;
background-color: rgba(0, 0, 0, .75); background-color: $overlay-gray;
} }
.ReactModal__Content { .ReactModal__Content {
@ -13,7 +17,7 @@
left: 40px; left: 40px;
outline: none; outline: none;
border-radius: 6px; border-radius: 6px;
background: #fff; background: $base-bg;
padding: 20px; padding: 20px;
overflow: visible; overflow: visible;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -36,15 +40,15 @@
right: 0; right: 0;
margin-top: -$modal-close-size/2; margin-top: -$modal-close-size/2;
margin-right: -$modal-close-size/2; margin-right: -$modal-close-size/2;
border: 2px solid #ddd; border: 2px solid $ui-border;
border-radius: $modal-close-size/2; border-radius: $modal-close-size/2;
background-color: #666; background-color: $active-dark-gray;
cursor: pointer; cursor: pointer;
width: $modal-close-size; width: $modal-close-size;
height: $modal-close-size; height: $modal-close-size;
text-align: center; text-align: center;
line-height: $modal-close-size; line-height: $modal-close-size;
color: #fff; color: $type-white;
font-size: $modal-close-size; font-size: $modal-close-size;
&:before { &:before {

View file

@ -1,3 +0,0 @@
$base-background-color: #2aa3ef;
$active-background-color: rgba(0, 0, 0, .1);
$border-color: rgb(20, 154, 203);

View file

@ -1,17 +1,17 @@
@import "colors"; @import "../../colors";
.dropdown { .dropdown {
display: none; display: none;
position: absolute; position: absolute;
right: 0; right: 0;
border: 1px solid $active-background-color; border: 1px solid $active-gray;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
background-color: $base-background-color; background-color: $ui-blue;
padding: 10px; padding: 10px;
min-width: 160px; min-width: 160px;
max-width: 260px; max-width: 260px;
overflow: visible; overflow: visible;
color: white; color: $type-white;
font-size: .8125rem; font-size: .8125rem;
font-weight: normal; font-weight: normal;
@ -21,7 +21,7 @@
a { a {
background-color: transparent; background-color: transparent;
color: white; color: $type-white;
} }
input { input {
@ -41,7 +41,7 @@
&.divider { &.divider {
margin-top: 10px; margin-top: 10px;
border-top: 1px solid #149acb; border-top: 1px solid $active-gray;
} }
a { a {
@ -49,7 +49,7 @@
padding: 0 10px; padding: 0 10px;
&:hover { &:hover {
background-color: $active-background-color; background-color: $active-gray;
text-decoration: none; text-decoration: none;
} }
} }
@ -69,11 +69,11 @@
transform: rotate(45deg); transform: rotate(45deg);
border-top: 1px solid $active-background-color; border-top: 1px solid $active-gray;
border-left: 1px solid $active-background-color; border-left: 1px solid $active-gray;
border-radius: 5px; border-radius: 5px;
background-color: $base-background-color; background-color: $ui-blue;
width: $arrow-border-width; width: $arrow-border-width;
height: $arrow-border-width; height: $arrow-border-width;

View file

@ -1,4 +1,4 @@
@import "colors"; @import "../../colors";
#navigation { #navigation {
display: block; display: block;
@ -6,9 +6,11 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
border-bottom: 1px solid $active-gray;
box-shadow: 0 0 3px $box-shadow-gray;
background-color: $ui-blue;
box-shadow: 0 1px 2px rgba(0,0,0, .4);
background-color: $base-background-color;
width: 100%; width: 100%;
/* NOTE: Height should match offset settings in main.scss file */ /* NOTE: Height should match offset settings in main.scss file */
@ -65,20 +67,20 @@
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
color: white; color: $type-white;
font-size: .85rem; font-size: .85rem;
font-weight: bold; font-weight: bold;
} }
> a:hover { > a:hover {
background-color: $active-background-color; background-color: $active-gray;
} }
} }
.search { .search {
margin: 0 20px; margin: 0 20px;
border-right: 0; border-right: 0;
color: white; color: $type-white;
flex-grow: 3; flex-grow: 3;
form { form {
@ -90,7 +92,7 @@
margin-top: 5px; margin-top: 5px;
outline: none; outline: none;
border: 0; border: 0;
background-color: $active-background-color; background-color: $active-gray;
height: 14px; height: 14px;
} }
@ -114,16 +116,17 @@
padding-left: 40px; padding-left: 40px;
width: calc(100% - 50px); width: calc(100% - 50px);
height: 40px; height: 40px;
color: white; color: $type-white;
font-size: .85em; font-size: .85em;
&::placeholder { &::placeholder {
color: rgba(255, 255, 255, .75); $placeholder-transparent: rgba(255, 255, 255, .75);
color: $placeholder-transparent;
} }
&:focus { &:focus {
transition: .15s ease background-color; transition: .15s ease background-color;
background-color: rgba(0, 0, 0, .2); background-color: $active-dark-gray;
} }
} }
@ -138,7 +141,7 @@
align-self: flex-end; align-self: flex-end;
a:hover { a:hover {
background-color: $active-background-color; background-color: $active-gray;
} }
} }
@ -179,8 +182,8 @@
.account-nav { .account-nav {
.userInfo { .userInfo {
padding-top: 11px; padding-top: 14px;
padding-bottom: 6px; padding-bottom: 3px;
} }
> a { > a {
@ -188,7 +191,7 @@
font-weight: normal; font-weight: normal;
.avatar { .avatar {
margin-right: 5px; margin-right: 10px;
border-radius: 3px; border-radius: 3px;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -197,7 +200,7 @@
&:after { &:after {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 8px;
background-image: url("/images/dropdown.png"); background-image: url("/images/dropdown.png");
background-repeat: no-repeat; background-repeat: no-repeat;

View file

@ -1,3 +1,5 @@
@import "../../colors";
.news { .news {
ul { ul {
display: block; display: block;
@ -32,7 +34,7 @@
h4 { h4 {
display: block; display: block;
color: #1aa0d8; color: $link-blue;
font-size: .85rem; font-size: .85rem;
} }
@ -41,13 +43,13 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #322f31; color: $type-gray;
font-size: .85rem; font-size: .85rem;
} }
} }
li:nth-child(even) { li:nth-child(even) {
border-top: 1px solid #ccc; border-top: 1px solid $ui-border;
border-bottom: 1px solid #ccc; border-bottom: 1px solid $ui-border;
} }
} }

View file

@ -1,3 +1,5 @@
@import "../../colors";
.thumbnail { .thumbnail {
.thumbnail-image, .thumbnail-image,
.thumbnail-title, .thumbnail-title,
@ -7,7 +9,7 @@
.thumbnail-image img { .thumbnail-image img {
margin-bottom: 2px; margin-bottom: 2px;
border: 1px solid #ddd; border: 1px solid $ui-border;
} }
.thumbnail-title, .thumbnail-title,
@ -26,7 +28,7 @@
} }
.thumbnail-extra { .thumbnail-extra {
color: #666; color: $type-gray;
font-size: .8462em; font-size: .8462em;
} }

View file

@ -1,11 +1,13 @@
@import "colors";
/* Tags */ /* Tags */
html, html,
body { body {
display: block; display: block;
margin: 0; margin: 0;
background-color: #fdfdfd; background-color: $background-color;
padding: 0; padding: 0;
color: #322f31; color: $type-gray;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
} }
@ -18,7 +20,7 @@ h4 {
border: 0; border: 0;
padding: 0; padding: 0;
color: #554747; color: $header-gray;
font-weight: 700; font-weight: 700;
} }
@ -37,13 +39,20 @@ a:link,
a:visited, a:visited,
a:active { a:active {
text-decoration: none; text-decoration: none;
color: #1aa0d8; color: $link-blue;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Adds Red outline to Links with no href */
a[href=""] {
$fail-red: #ff0000;
outline: 1px solid $fail-red;
}
/* Classes */ /* Classes */
.inner { .inner {
margin: 0 auto; margin: 0 auto;

View file

@ -1,8 +1,10 @@
@import "../../colors";
$base-bg: $ui-white;
#view { #view {
padding: 0; padding: 0;
a[href=""] { outline: 1px solid red; }
// To be integrated into the Global Typography standards // To be integrated into the Global Typography standards
p { p {
line-height: 2em; line-height: 2em;
@ -23,7 +25,7 @@
margin-top: 10px; margin-top: 10px;
margin-bottom: 40px; margin-bottom: 40px;
background-color: #27d2b0; background-color: $ui-aqua;
padding: 10px 0; padding: 10px 0;
@ -38,7 +40,7 @@
max-width: 500px; max-width: 500px;
text-align: center; text-align: center;
color: white; color: $type-white;
} }
.card-deck, .card-deck,
@ -59,7 +61,7 @@
display: inline-block; display: inline-block;
margin: 10px; margin: 10px;
border-radius: 7px; border-radius: 7px;
background-color: rgba(0, 0, 0, .15); background-color: $active-gray;
padding: 2px; padding: 2px;
width: 30%; width: 30%;
@ -69,7 +71,7 @@
.card-info { .card-info {
border-radius: 5px; border-radius: 5px;
background-color: white; background-color: $base-bg;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -93,7 +95,7 @@
} }
.sub-nav { .sub-nav {
color: white; color: $type-white;
font-size: .8em; font-size: .8em;
font-weight: bold; font-weight: bold;
@ -110,24 +112,24 @@
a .link { a .link {
border: 2px solid rgba(0, 0, 0, .15); border: 2px solid $active-gray;
border-radius: 50px; border-radius: 50px;
text-decoration: none; text-decoration: none;
color: white; color: $type-white;
&:hover { &:hover {
transition: background-color .25s ease; transition: background-color .25s ease;
border-color: transparent; border-color: transparent;
background-color: rgba(0, 0, 0, .15); background-color: $active-gray;
} }
&:active { &:active {
border: 0 solid transparent; border: 0 solid transparent;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .25); box-shadow: inset 0 0 5px $box-shadow-gray;
background-color: rgba(0, 0, 0, .20); background-color: $active-dark-gray;
padding: calc(.75em + 2px) calc(1em + 2px); padding: calc(.75em + 2px) calc(1em + 2px);
} }
} }
@ -137,7 +139,7 @@
.box section { .box section {
display: flex; display: flex;
margin: 0 auto; margin: 0 auto;
border-bottom: 1px solid rgba(0, 0, 0, .15); border-bottom: 1px solid $ui-border;
padding: 30px 0; padding: 30px 0;
width: 95%; width: 95%;
@ -145,8 +147,8 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
h3, p { h3,
color: #6b6b6b; p {
font-weight: 300; font-weight: 300;
} }
@ -159,7 +161,7 @@
} }
} }
&.two-up{ &.two-up {
.column { .column {
margin: 10px; margin: 10px;
@ -168,7 +170,6 @@
max-width: 40%; max-width: 40%;
img { img {
border: 2px solid #2aa3ef;
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;