sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Mise à jour d'Angular

Browse Source 
+ Correction sur lageur de colonnes
This commit is contained in:
Sébastien André
2021-05-30 09:52:23 +02:00
parent 01e5417cc5
commit 798c42e54b
10 changed files with 3300 additions and 5500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
Front/skydivelogs-app/src/assets/css/custom-theme-dark.scss
View File

@@ -3,6 +3,7 @@
* https://materialtheme.arcsine.dev
*/
@use '~@angular/material' as mat;
@import '~@angular/material/theming';
// 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.
@@ -14,19 +15,19 @@
// @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
$fontConfig: (
display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
headline: mat.define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
title: mat.define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
button: mat.define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
);
// Foreground Elements
@@ -39,7 +40,7 @@ $dark-disabled-text: rgba($dark-primary-text, 0.38);
$dark-dividers: rgba($dark-primary-text, 0.12);
$dark-focused: rgba($dark-primary-text, 0.12);
$mat-light-theme-foreground: (
mat.$light-theme-foreground-palette: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
@@ -66,7 +67,7 @@ $light-disabled-text: rgba($light-primary-text, 0.5);
$light-dividers: rgba($light-primary-text, 0.12);
$light-focused: rgba($light-primary-text, 0.12);
$mat-dark-theme-foreground: (
mat.$dark-theme-foreground-palette: (
base: $light-text,
divider: $light-dividers,
dividers: $light-dividers,
@@ -97,7 +98,7 @@ $dark-bg-tooltip: lighten(#2c2c2c, 20%);
$dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12);
$mat-light-theme-background: (
mat.$light-theme-background-palette: (
background: $light-background,
status-bar: $light-bg-darker-20,
app-bar: $light-bg-darker-5,
@@ -125,7 +126,7 @@ $light-bg-alpha-4: rgba(#fafafa, 0.04);
$light-bg-alpha-12: rgba(#fafafa, 0.12);
// Background palette for dark themes.
$mat-dark-theme-background: (
mat.$dark-theme-background-palette: (
background: $dark-background,
status-bar: $dark-bg-lighter-20,
app-bar: $dark-bg-lighter-5,
@@ -144,7 +145,7 @@ $mat-dark-theme-background: (
);
// Compute font config
@include mat-core($fontConfig);
@include mat.core($fontConfig);
// Theme Config
@@ -168,7 +169,7 @@ $mat-primary: (
darker: $light-primary-text,
)
);
$theme-primary: mat-palette($mat-primary, main, lighter, darker);
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
body {
--accent-color: #797979;
@@ -190,7 +191,7 @@ $mat-accent: (
darker: $light-primary-text,
)
);
$theme-accent: mat-palette($mat-accent, main, lighter, darker);
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
body {
--warn-color: #ff0000;
@@ -212,16 +213,16 @@ $mat-warn: (
darker: $light-primary-text,
)
);
$theme-warn: mat-palette($mat-warn, main, lighter, darker);;
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);;
$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
$altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
$theme: mat.define-dark-theme($theme-primary, $theme-accent, $theme-warn);
$altTheme: mat.define-light-theme($theme-primary, $theme-accent, $theme-warn);
// Theme Init
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
.theme-alternate {
@include angular-material-theme($altTheme);
@include mat.all-component-themes($altTheme);
}
// Specific component overrides, pieces that are not in line with the general theming

51
Front/skydivelogs-app/src/assets/css/custom-theme-light.scss
View File

@@ -3,6 +3,7 @@
* https://materialtheme.arcsine.dev
*/
@use '~@angular/material' as mat;
@import '~@angular/material/theming';
// 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.
@@ -12,19 +13,19 @@
@import "Roboto";
// @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
$fontConfig: (display-4: mat-typography-level(112px, 112px, 300, 'Roboto,Helvetica Neue,sans-serif', -0.0134em),
display-3: mat-typography-level(56px, 56px, 400, 'Roboto,Helvetica Neue,sans-serif', -0.0089em),
display-2: mat-typography-level(45px, 48px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
display-1: mat-typography-level(34px, 40px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0074em),
headline: mat-typography-level(24px, 32px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
title: mat-typography-level(20px, 32px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0075em),
subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0094em),
subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0067em),
body-2: mat-typography-level(14px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
body-1: mat-typography-level(14px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
button: mat-typography-level(14px, 14px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0893em),
caption: mat-typography-level(12px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0333em),
input: mat-typography-level(inherit, 1.125, 400, 'Roboto,Helvetica Neue,sans-serif', 1.5px));
$fontConfig: (display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto,Helvetica Neue,sans-serif', -0.0134em),
display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto,Helvetica Neue,sans-serif', -0.0089em),
display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0074em),
headline: mat.define-typography-level(24px, 32px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
title: mat.define-typography-level(20px, 32px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0075em),
subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0094em),
subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0067em),
body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
button: mat.define-typography-level(14px, 14px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0893em),
caption: mat.define-typography-level(12px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0333em),
input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto,Helvetica Neue,sans-serif', 1.5px));
// Foreground Elements
@@ -36,7 +37,7 @@ $dark-disabled-text: rgba($dark-primary-text, 0.38);
$dark-dividers: rgba($dark-primary-text, 0.12);
$dark-focused: rgba($dark-primary-text, 0.12);
$mat-light-theme-foreground: (base: black,
mat.$light-theme-foreground-palette: (base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
@@ -62,7 +63,7 @@ $light-disabled-text: rgba($light-primary-text, 0.5);
$light-dividers: rgba($light-primary-text, 0.12);
$light-focused: rgba($light-primary-text, 0.12);
$mat-dark-theme-foreground: (base: $light-text,
mat.$dark-theme-foreground-palette: (base: $light-text,
divider: $light-dividers,
dividers: $light-dividers,
disabled: $light-disabled-text,
@@ -92,7 +93,7 @@ $dark-bg-tooltip: lighten(#2c2c2c, 20%);
$dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12);
$mat-light-theme-background: (background: $light-background,
mat.$light-theme-background-palette: (background: $light-background,
status-bar: $light-bg-darker-20,
app-bar: $light-bg-darker-5,
hover: $dark-bg-alpha-4,
@@ -119,7 +120,7 @@ $light-bg-alpha-4: rgba(#fafafa, 0.04);
$light-bg-alpha-12: rgba(#fafafa, 0.12);
// Background palette for dark themes.
$mat-dark-theme-background: (background: $dark-background,
mat.$dark-theme-background-palette: (background: $dark-background,
status-bar: $dark-bg-lighter-20,
app-bar: $dark-bg-lighter-5,
hover: $light-bg-alpha-4,
@@ -137,7 +138,7 @@ $mat-dark-theme-background: (background: $dark-background,
);
// Compute font config
@include mat-core($fontConfig);
@include mat.core($fontConfig);
// Theme Config
@@ -158,7 +159,7 @@ $mat-primary: (main: #cc33ca,
lighter: $dark-primary-text,
darker: $light-primary-text,
));
$theme-primary: mat-palette($mat-primary, main, lighter, darker);
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
body {
--accent-color: #797979;
@@ -177,7 +178,7 @@ $mat-accent: (main: #797979,
lighter: $dark-primary-text,
darker: $light-primary-text,
));
$theme-accent: mat-palette($mat-accent, main, lighter, darker);
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
body {
--warn-color: #ff0000;
@@ -196,17 +197,17 @@ $mat-warn: (main: #ff0000,
lighter: $dark-primary-text,
darker: $light-primary-text,
));
$theme-warn: mat-palette($mat-warn, main, lighter, darker);
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);
;
$theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
$altTheme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
$theme: mat.define-light-theme($theme-primary, $theme-accent, $theme-warn);
$altTheme: mat.define-dark-theme($theme-primary, $theme-accent, $theme-warn);
// Theme Init
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
.theme-alternate {
@include angular-material-theme($altTheme);
@include mat.all-component-themes($altTheme);
}
// Specific component overrides, pieces that are not in line with the general theming