Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

angular upgrade: migrate ng material style

Browse Source
This commit is contained in:
bmartins 2023-03-17 23:16:44 +01:00
parent ea09c4e854
commit 95bbd2a48a
6 changed files with 8 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/shared/shared.module.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';

18
src/styles.scss
View File

@ -6,19 +6,7 @@
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
// The following line adds:
// 1. Default typography styles for all components
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
// If you specify typography styles for the components you use elsewhere, you should delete this line.
// If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
/* TODO(mdc-migration): Remove all-legacy-component-typographies once all legacy components are migrated*/
@include mat.all-legacy-component-typographies();
@include mat.all-component-typographies();
/* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/
@include mat.legacy-core();
@include mat.core();
// import your custom themes
@ -27,18 +15,12 @@
@import 'theme-contrast.scss';
.theme-light {
/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
@include mat.all-legacy-component-themes($theme-light);
@include mat.all-component-themes($theme-light);
}
.theme-dark {
/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
@include mat.all-legacy-component-themes($theme-dark);
@include mat.all-component-themes($theme-dark);
}
.theme-contrast {
/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
@include mat.all-legacy-component-themes($theme-contrast);
@include mat.all-component-themes($theme-contrast);
}

14
src/styles/partials/_forms.scss
View File

@ -70,13 +70,13 @@ textarea {
}
// radio input structure
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
.mat-checkbox-label,
.mat-checkbox-layout .mat-checkbox-label {
max-width: 90vw;
overflow-x: auto;
@extend .clickable;
}
// /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
// .mat-checkbox-label,
// .mat-checkbox-layout .mat-checkbox-label {
// max-width: 90vw;
// overflow-x: auto;
// @extend .clickable;
// }
button,
.button {
font-family: 'Helvetica';

2
src/theme-contrast.scss
View File

@ -14,6 +14,4 @@ $theme-contrast: mat.define-light-theme($theme-contrast-primary, $theme-contrast
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
@include mat.all-legacy-component-themes($theme-contrast);
@include mat.all-component-themes($theme-contrast);

2
src/theme-dark.scss
View File

@ -14,6 +14,4 @@ $theme-dark: mat.define-dark-theme($theme-dark-primary, $theme-dark-accent, $the
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
@include mat.all-legacy-component-themes($theme-dark);
@include mat.all-component-themes($theme-dark);

2
src/theme-light.scss
View File

@ -14,6 +14,4 @@ $theme-light: mat.define-light-theme($theme-light-primary, $theme-light-accent,
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
@include mat.all-legacy-component-themes($theme-light);
@include mat.all-component-themes($theme-light);