Skip to content

Commit

Permalink
Merge pull request #34 from FinalAngel/feature/color-variables
Browse files Browse the repository at this point in the history 
Color variables
  • Loading branch information
@vxsx
vxsx committed Jun 26, 2015
2 parents 36bc65b + a77d0c3 commit b06701a
Show file tree
Hide file tree
Showing 7 changed files with 92 additions and 56 deletions.
2 changes: 1 addition & 1 deletion cms/static/cms/css/cms.base.css
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion cms/static/cms/sass/cms.toolbar.sideframe.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,9 @@
font-weight: 200 !important;
margin-bottom: 5px !important;
padding: 5px 12px !important;

border: 1px solid adjust-hue($color-blue, 15deg) !important;
background-image: linear-gradient($gradient-blue) !important;
background-image: linear-gradient($btn-action-bggradient) !important;
box-shadow: inset lighten($color-blue, 20%) 0 1px 0;
&:hover,
&:active,
Expand Down
81 changes: 41 additions & 40 deletions cms/static/cms/sass/components/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,89 +2,90 @@
// #BUTTONS#
#cms-toolbar {
.cms-btn {
color: $color-grey;
border: 1px solid $color-grey-10;
border-radius: 3px;
background: $color-grey-10;
background: linear-gradient($gradient-light);
box-shadow: inset lighten($color-grey-10, 5%) 0 1px 0;
color: $btn-default-color;
border: 1px solid $btn-default-border;
border-radius: $btn-border-radius-base;
background-color: $btn-default-bgcolor;
background-image: linear-gradient($btn-default-bggradient);
box-shadow: inset 0 1px 0 rgba($white, 0.5);
&:hover,
&:active,
&:focus {
border: 1px solid $color-grey-10;
background: $color-grey-10;
border: 1px solid $btn-default-border;
background: $btn-default-bgcolor;
box-shadow: none;
}
&:active,
&:focus {
border: 1px solid darken($color-grey-10, 10%);
background: darken($color-grey-10, 10%);
border: 1px solid darken($btn-default-border, 10%);
background: darken($btn-default-bgcolor, 10%);
}
}

.cms-btn-disabled {
border-top: 1px solid darken($color-grey-10, 10%);
border-right: 1px solid darken($color-grey-10, 10%);
background: darken($color-grey-5, 5%);
box-shadow: inset 0 1px 0 $color-grey-10;
border-top: 1px solid darken($btn-default-border, 10%);
border-right: 1px solid darken($btn-default-border, 10%);
background: $btn-default-bgcolor;
box-shadow: inset 0 1px 0 $btn-default-border;
&:hover,
&:active,
&:focus {
background-color: $color-grey-10;
background: $btn-default-bgcolor;
}
}

.cms-btn-active {
color: white;
border: 1px solid darken($color-grey, 20%) !important;
border-bottom: none !important;
background: $color-grey;
background: linear-gradient($gradient-dark);
box-shadow: inset 0 1px 0 lighten($color-grey, 20%);
color: $btn-active-color;
border: 1px solid $btn-active-border;
border-bottom: none;
background-color: $btn-active-bgcolor;
background-image: linear-gradient($btn-active-bggradient);
box-shadow: inset 0 1px 0 rgba($white, 0.5);
&:hover,
&:active,
&:focus {
background: $color-grey-70;
box-shadow: none;
background: $btn-active-bgcolor;
border: 1px solid $btn-active-border;
border-bottom: none;
}
&:active,
&:focus {
background: darken($color-grey-70, 50%);
background: darken($btn-active-bgcolor, 10%);
}
}

.cms-btn-action {
color: white;
border: 1px solid adjust-hue($color-blue, 15deg) !important;
background: $color-blue;
background: linear-gradient($gradient-blue);
box-shadow: inset lighten($color-blue, 10%) 0 1px 0;
color: $btn-action-color;
border: 1px solid $btn-action-border;
background-color: $btn-action-bgcolor;
background-image: linear-gradient($btn-action-bggradient);
box-shadow: inset 0 1px 0 rgba($white, 0.5);
&:hover,
&:active,
&:focus {
background: adjust-hue($color-blue, 15deg);
box-shadow: none;
border: 1px solid $btn-action-border;
background: $btn-action-bgcolor;
}
&:active,
&:focus {
background: darken(adjust-hue($color-blue, 15deg), 10%);
background: darken($btn-action-bgcolor, 10%);
}
}
.cms-btn-caution {
color: white;
border: 1px solid adjust-hue($color-red, 15deg) !important;
background: $color-red;
background: linear-gradient($gradient-red);
box-shadow: inset lighten($color-red, 20%) 0 1px 0;
color: $btn-caution-color;
border: 1px solid $btn-caution-border;
background-color: $btn-caution-bgcolor;
background-image: linear-gradient($btn-caution-bggradient);
box-shadow: inset 0 1px 0 rgba($white, 0.5);
&:hover,
&:active,
&:focus {
background: adjust-hue($color-red, 15deg);
box-shadow: none;
border: 1px solid $btn-caution-border;
background: $btn-caution-bgcolor
}
&:active,
&:focus {
background: darken(adjust-hue($color-red, 15deg), 10%);
background: darken($btn-caution-bgcolor, 10%);
}
}
.cms-btn-publish {
Expand Down
1 change: 1 addition & 0 deletions cms/static/cms/sass/components/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@
padding: 0 20px 0 10px;
border-radius: 0 0 5px 0;
background: $color-window;
user-select: none;
div {
float: right;
font-size: 12px;
Expand Down
2 changes: 1 addition & 1 deletion cms/static/cms/sass/components/_subnav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
&:focus {
color: white;
background: adjust-hue($color-blue, 15deg);
background: linear-gradient($gradient-blue);
background: linear-gradient($btn-action-bggradient);
}
&:first-child {
border-top: none;
Expand Down
4 changes: 2 additions & 2 deletions cms/static/cms/sass/components/_toolbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@
> a {
color: white !important;
background: adjust-hue($color-blue, 15deg);
background: linear-gradient($gradient-blue);
background: linear-gradient($btn-action-bggradient);
}

// add active style
Expand Down Expand Up @@ -353,7 +353,7 @@
border: 1px solid darken($color-grey, 20%);
border-radius: 3px;
cursor: pointer;
background: linear-gradient($gradient-dark);
background: linear-gradient($btn-active-bggradient);
background-color: $color-grey;
box-shadow: inset 0 1px 0 lighten($color-grey, 20%);

Expand Down
55 changes: 44 additions & 11 deletions cms/static/cms/sass/settings/_all.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,49 @@ $color-window: #fcfcfc;
$speed-base: 200ms;

// #COLORS/auto#
$color-grey-5: lighten($color-grey, 58%); // fafafa
$color-grey-10: lighten($color-grey, 50%); // e5e5e5
$color-grey-20: lighten($color-grey, 25%); // 454545
$color-grey-70: darken($color-grey, 13%); // 454545
$color-grey-90: darken($color-grey, 20%); // 333333
// These are kept only while refactoring is in progress
$color-grey-5: lighten($color-grey, 58%); // fafafa
$color-grey-10: lighten($color-grey, 50%); // e5e5e5
$color-grey-20: lighten($color-grey, 25%); // a6a6a6
$color-grey-70: darken($color-grey, 13%); // 454545
$color-grey-90: darken($color-grey, 20%); // 333333

$gradient-toolbar: to bottom, rgba(lighten($color-grey, 58%), 0.97) 0%, rgba(lighten($color-grey, 59%), 0.97) 50%, rgba(lighten($color-grey, 58%), 0.95) 100%;
$gradient-dark: to bottom, $color-grey, darken($color-grey, 20%);
$gradient-blue: to bottom, adjust-hue($color-blue, 5deg), adjust-hue($color-blue, 15deg);
$gradient-green: to bottom, lighten($color-green, 10%) 0%, saturate($color-green, 20%) 50%, saturate($color-green, 30%) 100%;
$gradient-orange: to bottom, lighten($color-orange, 5%), $color-orange;
$gradient-red: to bottom, adjust-hue($color-red, 5deg), adjust-hue($color-red, 15deg);
$gradient-light: to bottom, lighten($color-grey-10, 5%), $color-grey-10;

//##############################################################################
// #COLORS new
$white: #fff;
$black: #000;

// #COLORS gray
$gray: #666;
$gray-lightest: lighten($gray, 58%); // #fafafa
$gray-lighter: lighten($gray, 50%); // #e5e5e5
$gray-light: lighten($gray, 25%); // #a6a6a6
$gray-darker: darken($gray, 13%); // #454545
$gray-darkest: darken($gray, 20%); // #333


//##############################################################################
// #BUTTONS
$btn-border-radius-base: 3px;

$btn-default-color: $gray;
$btn-default-bgcolor: $gray-lighter;
$btn-default-bggradient: to bottom, $gray-lightest, $gray-lighter;
$btn-default-border: $gray-lighter;

$btn-action-color: $white;
$btn-action-bgcolor: adjust-hue($color-blue, 15deg);
$btn-action-bggradient: to bottom, adjust-hue($color-blue, 5deg), adjust-hue($color-blue, 15deg);
$btn-action-border: adjust-hue($color-blue, 15deg);

$btn-caution-color: $white;
$btn-caution-bgcolor: adjust-hue($color-red, 15deg);
$btn-caution-bggradient: to bottom, adjust-hue($color-red, 5deg), adjust-hue($color-red, 15deg);
$btn-caution-border: adjust-hue($color-red, 15deg);

$btn-active-color: $white;
$btn-active-bgcolor: $gray-darker;
$btn-active-bggradient: to bottom, $gray, $gray-darkest;
$btn-active-border: $gray-darkest

0 comments on commit b06701a

Please sign in to comment.