Archives
/
RTL
mirror of https://github.com/Ride-The-Lightning/RTL
2
0
Fork 0
Code Issues Releases Wiki Activity

ng material v15 update

Browse Source
pull/1149/head
ShahanaFarooqui 1 year ago
parent be0d1775d0
commit be34d70670
4 changed files with 1753 additions and 46 deletions
Show Stats Download Patch File Download Diff File

1750
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
Unescape Escape View File

@ -52,7 +52,7 @@
"@angular-eslint/schematics": "13.0.1",
"@angular-eslint/template-parser": "13.0.1",
"@angular/animations": "^15.0.1",
"@angular/cdk": "^14.2.7",
"@angular/cdk": "^15.0.0",
"@angular/cli": "^15.0.1",
"@angular/common": "^15.0.1",
"@angular/compiler": "^15.0.1",
@ -60,7 +60,7 @@
"@angular/core": "^15.0.1",
"@angular/flex-layout": "^13.0.0-beta.38",
"@angular/forms": "^15.0.1",
"@angular/material": "^14.2.7",
"@angular/material": "^15.0.0",
"@angular/platform-browser": "^15.0.1",
"@angular/platform-browser-dynamic": "^15.0.1",
"@angular/router": "^15.0.1",

39
src/app/shared/theme/styles/theme.scss
Unescape Escape View File

@ -7,19 +7,28 @@
@import 'typography';
.rtl-container{
@include mat.core(); //CHECK IF MATERIAL STYLES BEHAVE STRANGELY
// 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-legacy-typography-config());`
@include mat.all-legacy-component-typographies();
@include mat.legacy-core(); //CHECK IF MATERIAL STYLES BEHAVE STRANGELY
&.purple {
@import "../skins/purple";
&.small {@include theme-font($small-typography);}
&.medium {@include theme-font($medium-typography);}
&.large {@include theme-font($large-typography);}
&.day {
@include mat.all-component-themes($purple-day-theme);
@include mat.all-legacy-component-themes($purple-day-theme);
@include theme-mode-light($purple-day-theme);
@include theme-color($purple-day-theme);
}
&.night {
@include mat.all-component-themes($purple-night-theme);
@include mat.all-legacy-component-themes($purple-night-theme);
@include theme-mode-dark($purple-night-theme);
@include theme-color($purple-night-theme);
}
@ -30,12 +39,12 @@
&.medium {@include theme-font($medium-typography);}
&.large {@include theme-font($large-typography);}
&.day {
@include mat.all-component-themes($blue-day-theme);
@include mat.all-legacy-component-themes($blue-day-theme);
@include theme-mode-light($blue-day-theme);
@include theme-color($blue-day-theme);
}
&.night {
@include mat.all-component-themes($blue-night-theme);
@include mat.all-legacy-component-themes($blue-night-theme);
@include theme-mode-dark($blue-night-theme);
@include theme-color($blue-night-theme);
}
@ -46,12 +55,12 @@
&.medium {@include theme-font($medium-typography);}
&.large {@include theme-font($large-typography);}
&.day {
@include mat.all-component-themes($indigo-day-theme);
@include mat.all-legacy-component-themes($indigo-day-theme);
@include theme-mode-light($indigo-day-theme);
@include theme-color($indigo-day-theme);
}
&.night {
@include mat.all-component-themes($indigo-night-theme);
@include mat.all-legacy-component-themes($indigo-night-theme);
@include theme-mode-dark($indigo-night-theme);
@include theme-color($indigo-night-theme);
}
@ -62,12 +71,12 @@
&.medium {@include theme-font($medium-typography);}
&.large {@include theme-font($large-typography);}
&.day {
@include mat.all-component-themes($green-day-theme);
@include mat.all-legacy-component-themes($green-day-theme);
@include theme-mode-light($green-day-theme);
@include theme-color($green-day-theme);
}
&.night {
@include mat.all-component-themes($green-night-theme);
@include mat.all-legacy-component-themes($green-night-theme);
@include theme-mode-dark($green-night-theme);
@include theme-color($green-night-theme);
}
@ -78,12 +87,12 @@
&.medium {@include theme-font($medium-typography);}
&.large {@include theme-font($large-typography);}
&.day {
@include mat.all-component-themes($teal-day-theme);
@include mat.all-legacy-component-themes($teal-day-theme);
@include theme-mode-light($teal-day-theme);
@include theme-color($teal-day-theme);
}
&.night {
@include mat.all-component-themes($teal-night-theme);
@include mat.all-legacy-component-themes($teal-night-theme);
@include theme-mode-dark($teal-night-theme);
@include theme-color($teal-night-theme);
}
@ -94,12 +103,12 @@
&.medium {@include theme-font($medium-typography);}
&.large {@include theme-font($large-typography);}
&.day {
@include mat.all-component-themes($pink-day-theme);
@include mat.all-legacy-component-themes($pink-day-theme);
@include theme-mode-light($pink-day-theme);
@include theme-color($pink-day-theme);
}
&.night {
@include mat.all-component-themes($pink-night-theme);
@include mat.all-legacy-component-themes($pink-night-theme);
@include theme-mode-dark($pink-night-theme);
@include theme-color($pink-night-theme);
}
@ -110,12 +119,12 @@
&.medium {@include theme-font($medium-typography);}
&.large {@include theme-font($large-typography);}
&.day {
@include mat.all-component-themes($yellow-day-theme);
@include mat.all-legacy-component-themes($yellow-day-theme);
@include theme-mode-light($yellow-day-theme);
@include theme-color($yellow-day-theme);
}
&.night {
@include mat.all-component-themes($yellow-night-theme);
@include mat.all-legacy-component-themes($yellow-night-theme);
@include theme-mode-dark($yellow-night-theme);
@include theme-color($yellow-night-theme);
}

6
src/app/shared/theme/styles/typography.scss
Unescape Escape View File

@ -1,5 +1,5 @@
@use '@angular/material' as mat;
$small-typography: mat.define-typography-config(
$small-typography: mat.define-legacy-typography-config(
$display-4: (font-size: 100px, line-height: 105px, font-weight: 300),
$display-3: (font-size: 50px, line-height: 54px, font-weight: 400),
$display-2: (font-size: 40px, line-height: 45px, font-weight: 400),
@ -15,7 +15,7 @@ $small-typography: mat.define-typography-config(
$input: (font-size: inherit, line-height: 1.125, font-weight: 400)
);
$medium-typography: mat.define-typography-config(
$medium-typography: mat.define-legacy-typography-config(
$display-4: (font-size: 112px, line-height: 112px, font-weight: 300),
$display-3: (font-size: 56px, line-height: 56px, font-weight: 400),
$display-2: (font-size: 45px, line-height: 48px, font-weight: 400),
@ -31,7 +31,7 @@ $medium-typography: mat.define-typography-config(
$input: (font-size: inherit, line-height: 1.125, font-weight: 400)
);
$large-typography: mat.define-typography-config(
$large-typography: mat.define-legacy-typography-config(
$display-4: (font-size: 124px, line-height: 124px, font-weight: 300),
$display-3: (font-size: 62px, line-height: 62px, font-weight: 400),
$display-2: (font-size: 54px, line-height: 60px, font-weight: 400),

Write Preview
Loading…
Cancel
Save