Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-27 10:24:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(color scheme): colors docs

Browse source
This commit is contained in:
nixa 2016-05-24 17:43:28 +03:00
parent 6464be1340
commit a820faae1a
3 changed files with 42 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/app/theme/sass/conf/colorSchemes/_blur.scss
View file

@ -1,32 +1,33 @@
$default: rgba(#000000, 0.2); $default: rgba(#000000, 0.2);
$body-bg: #F0F3F4; $body-bg: #F0F3F4;
$default-text: #ffffff; $default-text: #ffffff;
$content-text: $default-text; $content-text: $default-text;
$help-text: #eeeeee; $help-text: #eeeeee;
$label-text: #ffffff;
$label-text: #ffffff;
$disabled: #dddddd; $disabled: #dddddd;
$disabled-bg: transparent; $disabled-bg: transparent;
$border: #ffffff; $border: #ffffff;
$border-light: rgba(#ffffff, 0.2); $border-light: rgba(#ffffff, 0.2);
$input-border: transparent; $input-border: transparent;
$input-background: rgba(#000000, 0.15); $input-background: rgba(#000000, 0.15);
$dropdown-text: #7d7d7d;
$sidebar: rgba(#000000, 0.5); $sidebar: rgba(#000000, 0.5);
$sidebar-text: #ffffff; $sidebar-text: #ffffff;
$dropdown-text: #7d7d7d;
$mail-box: whitesmoke;
$auth-panel-background: rgba(#000000, 0.55);
$progress-background: rgba(#000000, 0.15);
$progress-default: #ffffff;
$bootstrap-panel-radius: 5px; $bootstrap-panel-radius: 5px;
$bootstrap-panel-text: #7d7d7d; $bootstrap-panel-text: #7d7d7d;
$bootstrap-panel-bg: #ffffff; $bootstrap-panel-bg: #ffffff;
$bootstrap-panel-header-bg: $bootstrap-panel-bg; $bootstrap-panel-header-bg: $bootstrap-panel-bg;
$bootstrap-panel-header-border: 1px solid rgba(0, 0, 0, 0.12); $bootstrap-panel-header-border: 1px solid rgba(0, 0, 0, 0.12);
$bootstrap-panel-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25); $bootstrap-panel-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
$mail-box: whitesmoke;
$auth-panel-background: rgba(#000000, 0.55);
$progress-background: rgba(#000000, 0.15);
$progress-default: #ffffff;
$primary: #209e91 !default; $primary: #209e91 !default;
$info: #2dacd1 !default; $info: #2dacd1 !default;

14
src/app/theme/sass/conf/colorSchemes/_mint.scss
View file

@ -4,28 +4,30 @@ $body-bg: #F0F3F4;
$default-text: #666666; $default-text: #666666;
$content-text: $default-text; $content-text: $default-text;
$help-text: #949494; $help-text: #949494;
$label-text: #ffffff;
$label-text: #ffffff;
$disabled: #dddddd; $disabled: #dddddd;
$disabled-bg: tint($disabled, 15%); $disabled-bg: tint($disabled, 15%);
$border: #d6d6d6; $border: #d6d6d6;
$border-light: tint($border, 15%); $border-light: tint($border, 15%);
$input-border: shade($border, 5%); $input-border: shade($border, 5%);
$input-background: #ffffff; $input-background: #ffffff;
$dropdown-text: #7d7d7d;
$sidebar: #1C2B36; $sidebar: #1C2B36;
$sidebar-text: #ffffff; $sidebar-text: #ffffff;
$dropdown-text: #7d7d7d;
$mail-box: whitesmoke;
$auth-panel-background: #ffffff;
$progress-background: rgba(#000000, 0.07);
$progress-default: rgba(#000000, 0.15);
$bootstrap-panel-radius: 5px; $bootstrap-panel-radius: 5px;
$bootstrap-panel-text: #7d7d7d; $bootstrap-panel-text: #7d7d7d;
$bootstrap-panel-bg: #ffffff; $bootstrap-panel-bg: #ffffff;
$bootstrap-panel-header-bg: $bootstrap-panel-bg; $bootstrap-panel-header-bg: $bootstrap-panel-bg;
$bootstrap-panel-header-border: 1px solid rgba(0, 0, 0, 0.12); $bootstrap-panel-header-border: 1px solid rgba(0, 0, 0, 0.12);
$bootstrap-panel-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25); $bootstrap-panel-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
$mail-box: whitesmoke;
$auth-panel-background: #ffffff;
$progress-background: rgba(#000000, 0.07);
$progress-default: rgba(#000000, 0.15);
$primary: #209e91 !default; $primary: #209e91 !default;
$info: #2dacd1 !default; $info: #2dacd1 !default;

43
src/app/theme/sass/conf/colorSchemes/_ng2.scss
View file

@ -1,32 +1,38 @@
$default: #ffffff; $default: #ffffff; // default colors for layout
$body-bg: #F0F3F4; $body-bg: #F0F3F4; // default bg color
$default-text: #ffffff; $default-text: $default; // default text color layout (usually is the same as $default)
$content-text: $default-text; $content-text: $default-text; // content text color on card, panels, form, etc
$help-text: $default-text; $help-text: $default-text; // additional text color for hits
$label-text: $default-text;
$disabled: rgba(255, 255, 255, 0.4); $label-text: $default-text; // labels color
$disabled-bg: tint($disabled, 15%); $disabled: rgba(255, 255, 255, 0.4); // color for disabled state
$border: rgba(255, 255, 255, 0.5); $disabled-bg: tint($disabled, 15%); // background color for disable state
$border-light: rgba(255, 255, 255, 0.3); $border: rgba(255, 255, 255, 0.5); // border color
$input-border: rgba(255, 255, 255, 0.6); $border-light: rgba(255, 255, 255, 0.3); // lighter version of border color (for hovers)
$input-background: rgba(255, 255, 255, 0.1); $input-border: rgba(255, 255, 255, 0.6); // input border color
$input-background: rgba(255, 255, 255, 0.1); // input border color for hover
$dropdown-text: #7d7d7d; // dropdown text color
// sidebar colors
$sidebar: #282828; $sidebar: #282828;
$sidebar-text: #ffffff; $sidebar-text: #ffffff;
$dropdown-text: #7d7d7d;
// specific components colors
$mail-box: whitesmoke;
$auth-panel-background: #ffffff;
$progress-background: rgba(0, 0, 0, 0.15);
$progress-default: rgba($default-text, 0.95);
// bootstrap card panel styles
$bootstrap-panel-radius: 7px; $bootstrap-panel-radius: 7px;
$bootstrap-panel-text: #ffffff; $bootstrap-panel-text: #ffffff;
$bootstrap-panel-bg: rgba(255, 255, 255, 0.1); $bootstrap-panel-bg: rgba(255, 255, 255, 0.1);
$bootstrap-panel-header-bg: transparent; $bootstrap-panel-header-bg: transparent;
$bootstrap-panel-header-border: 1px solid $border-light; $bootstrap-panel-header-border: 1px solid $border-light;
$bootstrap-panel-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15); $bootstrap-panel-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
$mail-box: whitesmoke;
$auth-panel-background: #ffffff;
$progress-background: rgba(0, 0, 0, 0.15);
$progress-default: rgba($default-text, 0.95);
// color scheme
$primary: #00abff !default; $primary: #00abff !default;
$info: #40daf1 !default; $info: #40daf1 !default;
$success: #8bd22f !default; $success: #8bd22f !default;
@ -51,9 +57,11 @@ $success-bg: tint($success, 20%);
$warning-bg: tint($warning, 20%); $warning-bg: tint($warning, 20%);
$danger-bg: tint($danger, 20%); $danger-bg: tint($danger, 20%);
// link colors
$activelink: #285eb8; $activelink: #285eb8;
$hoverlink: darken($activelink, 20%); $hoverlink: darken($activelink, 20%);
// main background
@mixin body-bg() { @mixin body-bg() {
background-color: $body-bg; background-color: $body-bg;
@ -73,6 +81,7 @@ $hoverlink: darken($activelink, 20%);
} }
} }
// additional background if you want another layer
@mixin additional-bg() { @mixin additional-bg() {
//display: block; // additional background layer, hidden by default //display: block; // additional background layer, hidden by default
} }