MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Adds green theme css but dont apply it yet

This commit is contained in:
apapachristou 2020-07-29 17:19:57 +03:00
parent dc83a3a09c
commit 721ae786b9
3 changed files with 150 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
View File

@ -13,6 +13,7 @@
width: 2.5em;
height: 2.5em;
background-color: #129d99;
color: white;
}
.mat-mini-fab-icon,
@ -306,7 +307,7 @@
margin-bottom: 0.2rem;
}
::ng-deep mat-select .mat-select-arrow-wrapper {
::ng-deep mat-select .mat-select-arrow-wrapper {
vertical-align: bottom;
}

141
dmp-frontend/src/assets/scss/green-theme.scss Normal file
View File

@ -0,0 +1,141 @@
@import "app/ui/misc/navigation/navigation.component.scss";
@import "~@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
$app-green-theme-primary-palette: (
50: #e3f3f3,
100: #b8e2e0,
200: #89cecc,
300: #59bab8,
400: #36aca8,
500: #129d99,
600: #109591,
700: #0d8b86,
800: #0a817c,
900: #056f6b,
A100: #9ffffa,
A200: #6cfff7,
A400: #39fff5,
A700: #20fff3,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);
$app-green-theme-accent-palette: (
50: #fefbee,
100: #fdf5d5,
200: #fbeeb9,
300: #f9e79c,
400: #f8e287,
500: #f7dd72,
600: #f6d96a,
700: #f5d45f,
800: #f3cf55,
900: #f1c742,
A100: #ffffff,
A200: #ffffff,
A400: #fff6dc,
A700: #fff0c3,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #000000,
700: #000000,
800: #000000,
900: #000000,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);
$app-green-theme-primary: mat-palette($app-green-theme-primary-palette);
$app-green-theme-accent: mat-palette($app-green-theme-accent-palette, A200, A100, A400);
$app-green-theme-warn: mat-palette($mat-red);
$app-green-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50),
hover: rgba(black, 0.04),
card: white,
dialog: white,
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $dark-focused,
selected-button: map_get($mat-grey, 300),
selected-disabled-button: map_get($mat-grey, 400),
disabled-button-toggle: map_get($mat-grey, 200),
unselected-chip: map_get($mat-grey, 300),
disabled-list-option: map_get($mat-grey, 200)
);
$app-green-theme-foreground: (
base: white,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(white, 0.54),
icons: rgba(white, 0.54),
text: rgba(white, 0.87),
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38)
);
$custom-theme: (
primary: $app-green-theme-primary,
accent: $app-green-theme-accent,
warn: $app-green-theme-warn,
is-dark: false,
foreground: $app-green-theme-foreground,
background: $app-green-theme-background
);
$custom-typography: mat-typography-config(
$font-family: "Lato, regular",
$headline: mat-typography-level(32px, 48px, 700),
$body-1: mat-typography-level(16px, 24px, 500)
);
.green-theme {
@include mat-core();
@include angular-material-theme($custom-theme);
@include navigation-component-theme($custom-theme);
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-typography);
// Override typography for a specific Angular Material components.
@include mat-checkbox-typography($custom-typography);
// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography);
//If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:
// Override the typography in the core CSS.
@include mat-core($custom-typography);
}

8
dmp-frontend/src/assets/scss/material-dashboard.scss
View File

@ -17,12 +17,18 @@
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
@import "./blue-theme.scss";
// @import "./green-theme.scss";
@include mat-core();
// Define a theme.
// // Define a blue theme.
$custom-theme-primary: mat-palette($app-blue-theme-primary-palette, 900);
$custom-theme-accent: mat-palette($app-blue-theme-accent-palette);
// Define a green theme.
// $custom-theme-primary: mat-palette($app-green-theme-primary-palette, 500);
// $custom-theme-accent: mat-palette($app-green-theme-accent-palette);
// $custom-theme-accent: mat-palette($mat-pink, A200, A100, A400);
$custom-theme-warn: mat-palette($mat-red);
$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);