purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-08 03:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Second step of upgrading to Angular Material v15 (MDC). Almost re-wrote the entire override styles to make sure MDC components will look correct.

Browse Source
This commit is contained in:
Sercan Yemen 2022-11-11 13:21:04 +03:00
parent 872dffe42b
commit b7b849ee60
3 changed files with 544 additions and 650 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1155
src/@fuse/styles/overrides/angular-material.scss
View File

File diff suppressed because it is too large Load Diff

7
src/@fuse/styles/tailwind.scss
View File

@ -63,11 +63,15 @@
-webkit-text-fill-color: currentColor; -webkit-text-fill-color: currentColor;
} }
/* Set the background and foreground colors */
body, .dark, .light { body, .dark, .light {
@apply text-default bg-default #{'!important'}; @apply text-default bg-default #{'!important'};
} }
*, *::before, *::after { /* Set the border color */
*,
::before,
::after {
--tw-border-opacity: 1 !important; --tw-border-opacity: 1 !important;
border-color: rgba(var(--fuse-border-rgb), var(--tw-border-opacity)); border-color: rgba(var(--fuse-border-rgb), var(--tw-border-opacity));
@ -116,6 +120,7 @@
} }
} }
/* Set the foreground color for disabled elements */
[disabled] * { [disabled] * {
@apply text-disabled #{'!important'}; @apply text-disabled #{'!important'};
} }

32
src/@fuse/styles/themes.scss
View File

@ -89,10 +89,19 @@ $dark-base: (
density: 0, density: 0,
typography: mat.define-typography-config( typography: mat.define-typography-config(
$font-family: theme('fontFamily.sans'), $font-family: theme('fontFamily.sans'),
/* $title: mat.define-typography-level(1.25rem, 2rem, 600), */ $headline-1: mat.define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
$body-2: mat.define-typography-level(0.875rem, 1.5rem, 600), $headline-2: mat.define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
$button: mat.define-typography-level(0.875rem, 0.875rem, 500), $headline-3: mat.define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
$subtitle-1: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */ $headline-4: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
$headline-5: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
$headline-6: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
$subtitle-1: mat.define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
$subtitle-2: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
$body-1: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
$body-2: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
$caption: mat.define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
$button: mat.define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
$overline: mat.define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
) )
)); ));
@ -114,7 +123,7 @@ $dark-base: (
text: map.get(map.get($theme, $name), DEFAULT), text: map.get(map.get($theme, $name), DEFAULT),
default-contrast: map.get(map.get(map.get($theme, $name), contrast), DEFAULT), default-contrast: map.get(map.get(map.get($theme, $name), contrast), DEFAULT),
lighter-contrast: map.get(map.get(map.get($theme, $name), contrast), 100), lighter-contrast: map.get(map.get(map.get($theme, $name), contrast), 100),
darker-contrast: map.get(map.get(map.get($theme, $name), contrast), 700), darker-contrast: map.get(map.get(map.get($theme, $name), contrast), 700)
)); ));
$palettes: map.merge($palettes, (#{$name}: $palette)); $palettes: map.merge($palettes, (#{$name}: $palette));
@ -130,8 +139,17 @@ $dark-base: (
)); ));
/* Merge the custom base colors with the generated themes */ /* Merge the custom base colors with the generated themes */
$light-theme: map.merge($light-theme, $light-base); $light-theme-colors: map.merge(map.get($light-theme, color), $light-base);
$dark-theme: map.merge($dark-theme, $dark-base); $light-theme: map.merge(
(color: $light-theme-colors),
$light-theme-colors
);
$dark-theme-colors: map.merge(map.get($dark-theme, color), $dark-base);
$dark-theme: map.merge(
(color: $dark-theme-colors),
$dark-theme-colors
);
/* Generate and encapsulate Angular Material themes */ /* Generate and encapsulate Angular Material themes */
#{map.get($theme, selector)} .light, #{map.get($theme, selector)} .light,