@mixin cory-mat-theme-link($color, $hover) {
mat-card {
a {
color: $color;
text-decoration: none;
}
a:hover {
color: $hover;
text-decoration: underline;
}
}
}
@mixin cory-mat-theme-container($color) {
.cory-mat-header {
.mat-toolbar.mat-primary {
background: none;
}
background: linear-gradient(to left, $color, darken($color, 5%));
// background-color: black;
}
.cory-mat-footer {
.mat-toolbar.mat-primary {
background: none;
}
background: linear-gradient(to right, $color, darken($color, 5%));
// background-color: $color;
}
}
@function cory-mat-color-paletta($type, $color) {
$cory-mat-color-paletta-obj: '';
@if ($type == 'light') {
$cory-mat-color-paletta-obj: (
50: lighten($color, 50%),
100: lighten($color, 40%),
200: lighten($color, 30%),
300: lighten($color, 20%),
400: lighten($color, 10%),
500: $color,
600: darken($color, 10%),
700: darken($color, 20%),
800: darken($color, 30%),
900: darken($color, 40%),
A100: lighten($color, 40%),
A200: lighten($color, 30%),
A400: lighten($color, 10%),
A700: darken($color, 30%),
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: white,
500: white,
600: $white-87-opacity,
700: $white-87-opacity,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: white,
A700: $white-87-opacity,
)
);
} @else {
$cory-mat-color-paletta-obj: (
50: lighten($color, 50%),
100: lighten($color, 40%),
200: lighten($color, 30%),
300: lighten($color, 20%),
400: lighten($color, 10%),
500: $color,
600: darken($color, 10%),
700: darken($color, 20%),
800: darken($color, 30%),
900: darken($color, 40%),
A100: lighten($color, 40%),
A200: lighten($color, 30%),
A400: lighten($color, 10%),
A700: darken($color, 30%),
contrast: (
0: $black-87-opacity,
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: $black-87-opacity,
600: $white-87-opacity,
700: $white-87-opacity,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: $white-87-opacity,
)
);
}
@return mat-palette($cory-mat-color-paletta-obj);
}
;
@mixin cory-mat-theme-button($type, $theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
@include mat-button-theme($theme);
@if ($type == 'light') {
/*
// disabled
[mat-raised-button].mat-default:hover {
background-color: rgba(black, 0.05);
color: black;
}
*/
[mat-raised-button].mat-primary:not([disabled]):hover {
background-color: mat-color($primary, 800);
}
[mat-raised-button].mat-accent:not([disabled]):hover {
background-color: mat-color($accent, 800);
}
[mat-raised-button].mat-warn:not([disabled]):hover {
background-color: mat-color($warn, 800);
}
} @else {
/*
// disabled
[mat-raised-button]:hover {
background-color: mat-color($primary);
color: black;
}
*/
[mat-raised-button].mat-primary:not([disabled]):hover {
background-color: mat-color($primary, 400);
}
[mat-raised-button].mat-accent:not([disabled]):hover {
background-color: mat-color($accent, 400);
}
[mat-raised-button].mat-warn:not([disabled]):hover {
background-color: mat-color($warn, 400);
}
}
}
@mixin cory-mat-theme-toolbar($type, $theme) {
@include mat-toolbar-theme($theme);
$primary: mat-color(map-get($theme, primary));
$accent: mat-color(map-get($theme, accent));
$warn: mat-color(map-get($theme, warn));
.mat-toolbar.mat-primary {
background: linear-gradient(to right, $primary, darken($primary, 5%));
}
}
@mixin cory-mat-autofill() {
// fix webkit-autofill
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input.webkit-autofill,
input.webkit-autofill:focus,
input.webkit-autofill:active,
input.webkit-autofill:hover {
transition: all 5000s ease-in-out 0s;
transition-property: background-color, color;
// background-color: mat-color($mat-yellow, 500);
}
}
@mixin cory-mat-theme($type, $primary, $accent) {
$theme: '';
$darker-primary: cory-mat-color-paletta($type, mat-color($primary, 700));
$darker-accent: cory-mat-color-paletta($type, mat-color($accent, 700));
$darker-theme: '';
$reverse-primary: $accent;
$reverse-accent: $primary;
$reverse-theme: '';
$reverse-darker-primary: cory-mat-color-paletta($type, mat-color($accent, 700));
$reverse-darker-accent: cory-mat-color-paletta($type, mat-color($primary, 700));
$reverse-darker-theme: '';
@if $type == "light" {
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);
$reverse-theme: mat-light-theme($reverse-primary, $reverse-accent, $warn);
$darker-theme: mat-light-theme($darker-primary, $darker-accent, $warn);
$reverse-darker-theme: mat-light-theme($reverse-darker-primary, $reverse-darker-accent, $warn);
background-color: mat-color($primary, A100);
background: radial-gradient(circle, mat-color($primary, A100, 0.5), mat-color($primary, A400, 0.5));
$link: mat-palette($accent, 500);
$link-hover: mat-palette($accent, A700);
@include cory-mat-theme-link(mat-color($link), mat-color($link-hover));
//fixme this is something weird, to snackbar need black, but still it is not black :)
.cory-mat-bg {
background-color: map_get($mat-grey, 900);
// background: radial-gradient(circle, mat-color($mat-grey, 1000), mat-color($mat-grey, 900));
background: radial-gradient(circle, #000000, #212121);
}
} @else {
$warn: mat-palette($mat-red);
$theme: mat-dark-theme($primary, $accent, $warn);
$reverse-theme: mat-dark-theme($reverse-primary, $reverse-accent, $warn);
$darker-theme: mat-dark-theme($darker-primary, $darker-accent, $warn);
$reverse-darker-theme: mat-dark-theme($reverse-darker-primary, $reverse-darker-accent, $warn);
background-color: map_get($mat-grey, 900);
// background: radial-gradient(circle, mat-color($mat-grey, 1000), mat-color($mat-grey, 900));
background: radial-gradient(circle, #000000, #212121);
$link: mat-palette($accent, A400);
$link-hover: mat-palette($accent, A200);
@include cory-mat-theme-link(mat-color($link), mat-color($link-hover));
}
// @include angular-material-theme($theme);
@include mat-core-theme($theme);
@include mat-autocomplete-theme($theme);
// card
@include mat-card-theme($theme);
@include mat-datepicker-theme($theme);
@include mat-table-theme($theme);
@include mat-checkbox-theme($theme);
@include mat-chips-theme($theme);
@include mat-dialog-theme($theme);
@include mat-grid-list-theme($theme);
@include mat-icon-theme($theme);
@include mat-list-theme($theme);
@include mat-menu-theme($theme);
@include mat-radio-theme($theme);
@include mat-select-theme($theme);
@include mat-sidenav-theme($reverse-theme);
@include mat-slider-theme($theme);
@include mat-tabs-theme($theme);
@include mat-tooltip-theme($theme);
@include mat-expansion-panel-theme($theme);
@include mat-form-field-theme($theme);
@include mat-paginator-theme($theme);
@include mat-stepper-theme($theme);
@include mat-snack-bar-theme($theme);
// background: linear-gradient(darken($color, 10%), $color);
@include cory-mat-theme-toolbar($type, $theme);
@include cory-mat-theme-button($type, $reverse-theme);
@include mat-button-toggle-theme($reverse-theme);
@include mat-input-theme($reverse-theme);
@include mat-slide-toggle-theme($reverse-theme);
@include mat-progress-bar-theme($reverse-darker-theme);
@include mat-progress-spinner-theme($reverse-darker-theme);
@include cory-mat-theme-container(mat-color($primary));
@include cory-mat-autofill();
}
