tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki 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 { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; 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 { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog'; 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 // 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. // have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once! // 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(); @include mat.all-component-typographies();
/* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/
@include mat.legacy-core();
@include mat.core(); @include mat.core();
// import your custom themes // import your custom themes
@ -27,18 +15,12 @@
@import 'theme-contrast.scss'; @import 'theme-contrast.scss';
.theme-light { .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); @include mat.all-component-themes($theme-light);
} }
.theme-dark { .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); @include mat.all-component-themes($theme-dark);
} }
.theme-contrast { .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); @include mat.all-component-themes($theme-contrast);
} }

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

@ -70,13 +70,13 @@ textarea {
} }
// radio input structure // radio input structure
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/ // /* 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-label,
.mat-checkbox-layout .mat-checkbox-label { // .mat-checkbox-layout .mat-checkbox-label {
max-width: 90vw; // max-width: 90vw;
overflow-x: auto; // overflow-x: auto;
@extend .clickable; // @extend .clickable;
} // }
button, button,
.button { .button {
font-family: 'Helvetica'; 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. // Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component // Alternatively, you can import and @include the theme mixins for each component
// that you are using. // 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); @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. // Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component // Alternatively, you can import and @include the theme mixins for each component
// that you are using. // 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); @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. // Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component // Alternatively, you can import and @include the theme mixins for each component
// that you are using. // 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); @include mat.all-component-themes($theme-light);