Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-24 03:10:13 +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);
$body-bg: #F0F3F4;
$default-text: #ffffff;
$content-text: $default-text;
$help-text: #eeeeee;
$label-text: #ffffff;
$label-text: #ffffff;
$disabled: #dddddd;
$disabled-bg: transparent;
$border: #ffffff;
$border-light: rgba(#ffffff, 0.2);
$input-border: transparent;
$input-background: rgba(#000000, 0.15);
$dropdown-text: #7d7d7d;
$sidebar: rgba(#000000, 0.5);
$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-text: #7d7d7d;
$bootstrap-panel-bg: #ffffff;
$bootstrap-panel-header-bg: $bootstrap-panel-bg;
$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);
$mail-box: whitesmoke;
$auth-panel-background: rgba(#000000, 0.55);
$progress-background: rgba(#000000, 0.15);
$progress-default: #ffffff;
$primary: #209e91 !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;
$content-text: $default-text;
$help-text: #949494;
$label-text: #ffffff;
$label-text: #ffffff;
$disabled: #dddddd;
$disabled-bg: tint($disabled, 15%);
$border: #d6d6d6;
$border-light: tint($border, 15%);
$input-border: shade($border, 5%);
$input-background: #ffffff;
$dropdown-text: #7d7d7d;
$sidebar: #1C2B36;
$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-text: #7d7d7d;
$bootstrap-panel-bg: #ffffff;
$bootstrap-panel-header-bg: $bootstrap-panel-bg;
$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);
$mail-box: whitesmoke;
$auth-panel-background: #ffffff;
$progress-background: rgba(#000000, 0.07);
$progress-default: rgba(#000000, 0.15);
$primary: #209e91 !default;
$info: #2dacd1 !default;

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

@ -1,32 +1,38 @@
$default: #ffffff;
$body-bg: #F0F3F4;
$default: #ffffff; // default colors for layout
$body-bg: #F0F3F4; // default bg color
$default-text: #ffffff;
$content-text: $default-text;
$help-text: $default-text;
$label-text: $default-text;
$default-text: $default; // default text color layout (usually is the same as $default)
$content-text: $default-text; // content text color on card, panels, form, etc
$help-text: $default-text; // additional text color for hits
$disabled: rgba(255, 255, 255, 0.4);
$disabled-bg: tint($disabled, 15%);
$border: rgba(255, 255, 255, 0.5);
$border-light: rgba(255, 255, 255, 0.3);
$input-border: rgba(255, 255, 255, 0.6);
$input-background: rgba(255, 255, 255, 0.1);
$label-text: $default-text; // labels color
$disabled: rgba(255, 255, 255, 0.4); // color for disabled state
$disabled-bg: tint($disabled, 15%); // background color for disable state
$border: rgba(255, 255, 255, 0.5); // border color
$border-light: rgba(255, 255, 255, 0.3); // lighter version of border color (for hovers)
$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-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-text: #ffffff;
$bootstrap-panel-bg: rgba(255, 255, 255, 0.1);
$bootstrap-panel-header-bg: transparent;
$bootstrap-panel-header-border: 1px solid $border-light;
$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;
$info: #40daf1 !default;
$success: #8bd22f !default;
@ -51,9 +57,11 @@ $success-bg: tint($success, 20%);
$warning-bg: tint($warning, 20%);
$danger-bg: tint($danger, 20%);
// link colors
$activelink: #285eb8;
$hoverlink: darken($activelink, 20%);
// main background
@mixin body-bg() {
background-color: $body-bg;
@ -73,6 +81,7 @@ $hoverlink: darken($activelink, 20%);
}
}
// additional background if you want another layer
@mixin additional-bg() {
//display: block; // additional background layer, hidden by default
}