Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +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 {
@include scrollbars(.4em, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.7));
color: $content-text;
background-color: $default;
background-color: $bootstrap-panel-bg;
border: none;
border-radius: 5px;
border-radius: $bootstrap-panel-radius;
position: relative;
margin-bottom: 24px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
box-shadow: $bootstrap-panel-shadow;
&.animated {
animation-duration: 0.5s;
}
@ -68,13 +68,12 @@ $card-header-font-size: 16px;
.card-header, .card-footer {
color: $content-text;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
border-bottom: $bootstrap-panel-header-border;
height: $card-title-height;
font-size: $card-header-font-size;
$vertical-padding: ($card-title-height - $card-header-font-size) / 2;
padding: $vertical-padding 22px;
background-color: $default;
background-color: $bootstrap-panel-header-bg;
}
.card-title {

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

@ -117,7 +117,10 @@
}
@mixin gradient($color-1, $color-2, $color-3) {
background: $color-1;
background: -webkit-linear-gradient(left top, $color-1,$color-2 50%,$color-3);
background: linear-gradient(to right bottom,$color-1,$color-2 50%,$color-3);
background: $color-2; /* Old browsers */
background: -moz-radial-gradient(bottom, ellipse cover, $color-1 0%, $color-2 45%, $color-3 100%); /* FF3.6-15 */
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-text: #ffffff;
$dropdown-text: #7d7d7d;
$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);

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

@ -18,8 +18,12 @@ $input-background: #ffffff;
$sidebar: #1C2B36;
$sidebar-text: #ffffff;
$dropdown-text: #7d7d7d;
$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);

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

@ -1,35 +1,39 @@
$default: #ffffff;
$body-bg: #F0F3F4;
@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;
$content-text: #292e31;
$help-text: #292e31;
$label-text: #ffffff;
$content-text: $default-text;
$help-text: $default-text;
$label-text: $default-text;
$disabled: #dddddd;
$disabled-bg: tint($disabled, 15%);
$border: #d6d6d6;
$border: lighten(#455e9f, 70%);
$border-light: tint($border, 15%);
$input-border: shade($border, 5%);
$input-background: #ffffff;
$sidebar: rgba(255,255,255,0.1);
$sidebar: #282828;
$sidebar-text: #ffffff;
$dropdown-text: #7d7d7d;
$bootstrap-panel-text: #7d7d7d;
$bootstrap-panel-bg: #ffffff;
$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: none;
$bootstrap-panel-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
$mail-box: whitesmoke;
$auth-panel-background: #ffffff;
$progress-background: rgba(#000000, 0.07);
$progress-default: rgba(#000000, 0.15);
$primary: #4AA22B !default;
$info: #2dacd1 !default;
$success: #90b900 !default;
$warning: #dfb81c !default;
$danger: #e85656 !default;
$primary: #00abff !default;
$info: #40daf1 !default;
$success: #8bd22f !default;
$warning: #e7ba08 !default;
$danger: #f95372 !default;
$primary-light: tint($primary, 30%);
$info-light: tint($info, 30%);

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

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