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

Removes gray hue from text on buttons

This commit is contained in:
apapachristou 2019-11-04 18:21:07 +02:00
parent 8adfc1d46d
commit f1df43ca4a
1 changed files with 111 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
dmp-frontend/src/assets/scss/blue-theme.scss
View File

@ -1,84 +1,70 @@
@import 'app/ui/misc/navigation/navigation.component.scss'; @import "app/ui/misc/navigation/navigation.component.scss";
@import '~@angular/material/theming'; // @import '../../../node_modules/@angular/material/theming'; @import "~@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
$app-blue-theme-primary-palette: ( $app-blue-theme-primary-palette: (
50: #e2eef1, 50: #e2eef1,
100: #b6d5dc, 100: #b6d5dc,
200: #86bac4, 200: #86bac4,
300: #559eac, 300: #559eac,
400: #30899b, 400: #30899b,
500: #0c7489, 500: #0c7489,
600: #0a6c81, 600: #0a6c81,
700: #086176, 700: #086176,
800: #06576c, 800: #06576c,
900: #034459, 900: #034459,
A100: #8bddff, A100: #8bddff,
A200: #58cfff, A200: #58cfff,
A400: #25c0ff, A400: #25c0ff,
A700: #0bb9ff, A700: #0bb9ff,
contrast: ( contrast: (
50: $black-87-opacity, 50: #000000,
100: $black-87-opacity, 100: #000000,
200: $black-87-opacity, 200: #000000,
300: white, 300: #000000,
400: white, 400: #ffffff,
500: $white-87-opacity, 500: #ffffff,
600: $white-87-opacity, 600: #ffffff,
700: $white-87-opacity, 700: #ffffff,
800: $white-87-opacity, 800: #ffffff,
900: $white-87-opacity, 900: #ffffff,
A100: $black-87-opacity, A100: #000000,
A200: white, A200: #000000,
A400: white, A400: #ffffff,
A700: $white-87-opacity, A700: #ffffff
), )
); );
$app-blue-theme-accent-palette: ( $app-blue-theme-accent-palette: (
50 : #e0f6f3, 50: #e0f6f3,
100 : #b3e8e2, 100: #b3e8e2,
200 : #80d9cf, 200: #80d9cf,
300 : #4dc9bc, 300: #4dc9bc,
400 : #26bead, 400: #26bead,
500 : #00b29f, 500: #00b29f,
600 : #00ab97, 600: #00ab97,
700 : #00a28d, 700: #00a28d,
800 : #009983, 800: #009983,
900 : #008a72, 900: #008a72,
A100 : #b6fff0, A100: #b6fff0,
A200 : #83ffe6, A200: #83ffe6,
A400 : #50ffdc, A400: #50ffdc,
A700 : #36ffd7, A700: #36ffd7,
// 50: #fce4ec, contrast: (
// 100: #f8bbd0, 50: #000000,
// 200: #f48fb1, 100: #000000,
// 300: #f06292, 200: #000000,
// 400: #ec407a, 300: #000000,
// 500: #e91e63, 400: #000000,
// 600: #d81b60, 500: #ffffff,
// 700: #c2185b, 600: #ffffff,
// 800: #ad1457, 700: #000000,
// 900: #880e4f, 800: #000000,
// A100: #ff80ab, 900: #000000,
// A200: #ff4081, A100: #000000,
// A400: #f50057, A200: #ffffff,
// A700: #c51162, A400: #ffffff,
contrast: ( A700: #ffffff
50: $black-87-opacity, )
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: $white-87-opacity,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: white,
A400: white,
A700: white,
)
); );
$app-blue-theme-primary: mat-palette($app-blue-theme-primary-palette); $app-blue-theme-primary: mat-palette($app-blue-theme-primary-palette);
@ -86,71 +72,70 @@ $app-blue-theme-accent: mat-palette($app-blue-theme-accent-palette, A200, A100,
$app-blue-theme-warn: mat-palette($mat-red); $app-blue-theme-warn: mat-palette($mat-red);
$app-blue-theme-background: ( $app-blue-theme-background: (
status-bar: map_get($mat-grey, 300), status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100), app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50), background: map_get($mat-grey, 50),
hover: rgba(black, 0.04), hover: rgba(black, 0.04),
card: white, card: white,
dialog: white, dialog: white,
disabled-button: rgba(black, 0.12), disabled-button: rgba(black, 0.12),
raised-button: white, raised-button: white,
focused-button: $dark-focused, focused-button: $dark-focused,
selected-button: map_get($mat-grey, 300), selected-button: map_get($mat-grey, 300),
selected-disabled-button: map_get($mat-grey, 400), selected-disabled-button: map_get($mat-grey, 400),
disabled-button-toggle: map_get($mat-grey, 200), disabled-button-toggle: map_get($mat-grey, 200),
unselected-chip: map_get($mat-grey, 300), unselected-chip: map_get($mat-grey, 300),
disabled-list-option: map_get($mat-grey, 200), disabled-list-option: map_get($mat-grey, 200)
); );
$app-blue-theme-foreground: ( $app-blue-theme-foreground: (
base: black, base: black,
divider: $dark-dividers, divider: $dark-dividers,
dividers: $dark-dividers, dividers: $dark-dividers,
disabled: $dark-disabled-text, disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26), disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text, disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text, hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text, secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54), icon: rgba(black, 0.54),
icons: rgba(black, 0.54), icons: rgba(black, 0.54),
text: rgba(black, 0.87), text: rgba(black, 0.87),
slider-min: rgba(black, 0.87), slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26), slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38), slider-off-active: rgba(black, 0.38)
); );
$custom-theme: ( $custom-theme: (
primary: $app-blue-theme-primary, primary: $app-blue-theme-primary,
accent: $app-blue-theme-accent, accent: $app-blue-theme-accent,
warn: $app-blue-theme-warn, warn: $app-blue-theme-warn,
is-dark: false, is-dark: false,
foreground: $app-blue-theme-foreground, foreground: $app-blue-theme-foreground,
background: $app-blue-theme-background, background: $app-blue-theme-background
); );
$custom-typography: mat-typography-config( $custom-typography: mat-typography-config(
$font-family: 'Lato, regular', $font-family: "Lato, regular",
$headline: mat-typography-level(32px, 48px, 700), $headline: mat-typography-level(32px, 48px, 700),
$body-1: mat-typography-level(16px, 24px, 500) $body-1: mat-typography-level(16px, 24px, 500)
); );
.blue-theme { .blue-theme {
@include mat-core(); @include mat-core();
@include angular-material-theme($custom-theme); @include angular-material-theme($custom-theme);
@include navigation-component-theme($custom-theme); @include navigation-component-theme($custom-theme);
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.). // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-typography); @include mat-base-typography($custom-typography);
// Override typography for a specific Angular Material components. // Override typography for a specific Angular Material components.
@include mat-checkbox-typography($custom-typography); @include mat-checkbox-typography($custom-typography);
// Override typography for all Angular Material, including mat-base-typography and all components. // Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography); @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: //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);
// Override the typography in the core CSS.
@include mat-core($custom-typography);
} }