Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 08:20:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

playing with colors

Browse source
This commit is contained in:
nixa 2016-05-18 19:12:16 +03:00
parent 8700268b7b
commit 77a33d880b
6 changed files with 47 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/theme/sass/bootstrap-overrides/_card.scss
View file

@ -4,12 +4,12 @@ $card-header-font-size: 16px;
.card { .card {
@include scrollbars(.4em, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.7)); @include scrollbars(.4em, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.7));
color: $content-text; color: $content-text;
background-color: $default; background-color: $bootstrap-panel-bg;
border: none; border: none;
border-radius: 5px; border-radius: $bootstrap-panel-radius;
position: relative; position: relative;
margin-bottom: 24px; margin-bottom: 24px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25); box-shadow: $bootstrap-panel-shadow;
&.animated { &.animated {
animation-duration: 0.5s; animation-duration: 0.5s;
} }
@ -68,13 +68,12 @@ $card-header-font-size: 16px;
.card-header, .card-footer { .card-header, .card-footer {
color: $content-text; color: $content-text;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: $bootstrap-panel-header-border;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
height: $card-title-height; height: $card-title-height;
font-size: $card-header-font-size; font-size: $card-header-font-size;
$vertical-padding: ($card-title-height - $card-header-font-size) / 2; $vertical-padding: ($card-title-height - $card-header-font-size) / 2;
padding: $vertical-padding 22px; padding: $vertical-padding 22px;
background-color: $default; background-color: $bootstrap-panel-header-bg;
} }
.card-title { .card-title {

9
src/app/theme/sass/conf/_mixins.scss
View file

@ -117,7 +117,10 @@
} }
@mixin gradient($color-1, $color-2, $color-3) { @mixin gradient($color-1, $color-2, $color-3) {
background: $color-1; background: $color-2; /* Old browsers */
background: -webkit-linear-gradient(left top, $color-1,$color-2 50%,$color-3); background: -moz-radial-gradient(bottom, ellipse cover, $color-1 0%, $color-2 45%, $color-3 100%); /* FF3.6-15 */
background: linear-gradient(to right bottom,$color-1,$color-2 50%,$color-3); background: -webkit-radial-gradient(bottom, ellipse cover, $color-1 0%,$color-2 45%,$color-3 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at bottom, $color-1 0%,$color-2 45%,$color-3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-1', endColorstr='$color-3',GradientType=1); /* IE6-9 fallback on horizontal gradient */
} }

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

@ -18,8 +18,12 @@ $input-background: rgba(#000000, 0.15);
$sidebar: rgba(#000000, 0.5); $sidebar: rgba(#000000, 0.5);
$sidebar-text: #ffffff; $sidebar-text: #ffffff;
$dropdown-text: #7d7d7d; $dropdown-text: #7d7d7d;
$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-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; $mail-box: whitesmoke;
$auth-panel-background: rgba(#000000, 0.55); $auth-panel-background: rgba(#000000, 0.55);
$progress-background: rgba(#000000, 0.15); $progress-background: rgba(#000000, 0.15);

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

@ -18,8 +18,12 @@ $input-background: #ffffff;
$sidebar: #1C2B36; $sidebar: #1C2B36;
$sidebar-text: #ffffff; $sidebar-text: #ffffff;
$dropdown-text: #7d7d7d; $dropdown-text: #7d7d7d;
$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-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; $mail-box: whitesmoke;
$auth-panel-background: #ffffff; $auth-panel-background: #ffffff;
$progress-background: rgba(#000000, 0.07); $progress-background: rgba(#000000, 0.07);

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

@ -1,35 +1,39 @@
$default: #ffffff; $default: #ffffff;
$body-bg: #F0F3F4; $body-bg: #F0F3F4;
@mixin body-bg() { @mixin body-bg() {
@include gradient(rgba(58, 11, 68, 0.97),rgba(82,65,143,.97),rgba(114,183,227,.97)); @include gradient(#73c5d9, #4691d1, #455e9f);
} }
$default-text: #ffffff; $default-text: #ffffff;
$content-text: #292e31; $content-text: $default-text;
$help-text: #292e31; $help-text: $default-text;
$label-text: #ffffff; $label-text: $default-text;
$disabled: #dddddd; $disabled: #dddddd;
$disabled-bg: tint($disabled, 15%); $disabled-bg: tint($disabled, 15%);
$border: #d6d6d6; $border: lighten(#455e9f, 70%);
$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;
$sidebar: rgba(255,255,255,0.1); $sidebar: #282828;
$sidebar-text: #ffffff; $sidebar-text: #ffffff;
$dropdown-text: #7d7d7d; $dropdown-text: #7d7d7d;
$bootstrap-panel-text: #7d7d7d; $bootstrap-panel-radius: 7px;
$bootstrap-panel-bg: #ffffff; $bootstrap-panel-text: #ffffff;
$bootstrap-panel-bg: rgba(255,255,255,0.1);
$bootstrap-panel-header-bg: transparent;
$bootstrap-panel-header-border: none;
$bootstrap-panel-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
$mail-box: whitesmoke; $mail-box: whitesmoke;
$auth-panel-background: #ffffff; $auth-panel-background: #ffffff;
$progress-background: rgba(#000000, 0.07); $progress-background: rgba(#000000, 0.07);
$progress-default: rgba(#000000, 0.15); $progress-default: rgba(#000000, 0.15);
$primary: #4AA22B !default; $primary: #00abff !default;
$info: #2dacd1 !default; $info: #40daf1 !default;
$success: #90b900 !default; $success: #8bd22f !default;
$warning: #dfb81c !default; $warning: #e7ba08 !default;
$danger: #e85656 !default; $danger: #f95372 !default;
$primary-light: tint($primary, 30%); $primary-light: tint($primary, 30%);
$info-light: tint($info, 30%); $info-light: tint($info, 30%);

22
src/app/theme/theme.configProvider.ts
View file

@ -6,27 +6,27 @@ export class BaThemeConfigProvider {
basic = { basic = {
default: '#ffffff', default: '#ffffff',
defaultText: '#666666', defaultText: '#ffffff',
border: '#dddddd', border: '#dddddd',
borderDark: '#aaaaaa', borderDark: '#aaaaaa',
}; };
// main functional color scheme // main functional color scheme
colorScheme = { colorScheme = {
primary: '#209e91', primary: '#00abff',
info: '#2dacd1', info: '#40daf1',
success: '#90b900', success: '#8bd22f',
warning: '#dfb81c', warning: '#e7ba08',
danger: '#e85656', danger: '#f95372',
}; };
// dashboard colors for charts // dashboard colors for charts
dashboardColors = { dashboardColors = {
blueStone: '#005562', blueStone: '#40daf1',
surfieGreen: '#0e8174', surfieGreen: '#00abff',
silverTree: '#6eba8c', silverTree: '#1b70ef',
gossip: '#b9f2a1', gossip: '#3c4eb9',
white: '#10c4b5', white: '#ffffff',
}; };
conf = { conf = {