154 lines
5.7 KiB
SCSS
154 lines
5.7 KiB
SCSS
// -----------------------------------------------------------------------------------------------------
|
|
// @ Typography
|
|
// -----------------------------------------------------------------------------------------------------
|
|
|
|
// Angular Material typography
|
|
// $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
|
|
$typography: mat-typography-config(
|
|
$font-family:
|
|
'나눔고딕, Malgun Gothic, 맑은고딕, Arial, Muli, Helvetica Neue, Arial, sans-serif',
|
|
$title: mat-typography-level(20px, 32px, 600),
|
|
$body-2: mat-typography-level(14px, 24px, 600),
|
|
$button: mat-typography-level(14px, 14px, 600),
|
|
$input: mat-typography-level(16px, 1.125, 400)
|
|
);
|
|
|
|
// Setup the typography
|
|
@include angular-material-typography($typography);
|
|
|
|
@mixin components-theme($theme) {
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
// @ Define the default theme
|
|
// -----------------------------------------------------------------------------------------------------
|
|
|
|
// Define the primary, accent and warn palettes
|
|
$default-primary-palette: mat-palette($mat-indigo);
|
|
$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
|
|
$default-warn-palette: mat-palette($mat-red);
|
|
|
|
// Create the Material theme object
|
|
$theme: mat-light-theme(
|
|
$default-primary-palette,
|
|
$default-accent-palette,
|
|
$default-warn-palette
|
|
);
|
|
|
|
// Add ".theme-default" class to the body to activate this theme.
|
|
// Class name must start with "theme-" !!!
|
|
/*body.theme-default {
|
|
// Create an Angular Material theme from the $theme map
|
|
@include angular-material-theme($theme);
|
|
|
|
// Apply the theme to the user components
|
|
@include components-theme($theme);
|
|
@include ucap-material-theme($theme);
|
|
}*/
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
// @ Define a blue-gray dark theme
|
|
// -----------------------------------------------------------------------------------------------------
|
|
|
|
// Define the primary, accent and warn palettes
|
|
$blue-gray-dark-theme-primary-palette: mat-palette($mat-blue);
|
|
$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
|
|
$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);
|
|
|
|
// Create the Material theme object
|
|
$blue-gray-dark-theme: mat-dark-theme(
|
|
$blue-gray-dark-theme-primary-palette,
|
|
$blue-gray-dark-theme-accent-palette,
|
|
$blue-gray-dark-theme-warn-palette
|
|
);
|
|
|
|
// Add ".theme-blue-gray-dark" class to the body to activate this theme.
|
|
// Class name must start with "theme-" !!!
|
|
body.theme-blue-gray-dark {
|
|
// Generate the Angular Material theme
|
|
@include angular-material-theme($blue-gray-dark-theme);
|
|
|
|
// Apply the theme to the user components
|
|
@include components-theme($blue-gray-dark-theme);
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
// @ Define a pink dark theme
|
|
// -----------------------------------------------------------------------------------------------------
|
|
|
|
// Define the primary, accent and warn palettes
|
|
$pink-dark-theme-primary-palette: mat-palette($mat-pink);
|
|
$pink-dark-theme-accent-palette: mat-palette($mat-pink);
|
|
$pink-dark-theme-warn-palette: mat-palette($mat-red);
|
|
|
|
// Create the Material theme object
|
|
$pink-dark-theme: mat-dark-theme(
|
|
$pink-dark-theme-primary-palette,
|
|
$pink-dark-theme-accent-palette,
|
|
$pink-dark-theme-warn-palette
|
|
);
|
|
|
|
// Add ".theme-pink-dark" class to the body to activate this theme.
|
|
// Class name must start with "theme-" !!!
|
|
body.theme-pink-dark {
|
|
// Generate the Angular Material theme
|
|
@include angular-material-theme($pink-dark-theme);
|
|
|
|
// Apply the theme to the user components
|
|
@include components-theme($pink-dark-theme);
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
// @ Define a pink light theme --LG RED 변경 예정(샘플링)
|
|
// -----------------------------------------------------------------------------------------------------
|
|
|
|
// Define the primary, accent and warn palettes
|
|
$lgRed-light-theme-primary-palette: mat-palette($mat-grey,800);
|
|
$lgRed-light-theme-accent-palette: mat-palette($lg-red, 400);
|
|
$lgRed-light-theme-warn-palette: mat-palette($mat-cyan);
|
|
|
|
|
|
// Create the Material theme object
|
|
$lgRed-light-theme: mat-light-theme(
|
|
$lgRed-light-theme-primary-palette,
|
|
$lgRed-light-theme-accent-palette,
|
|
$lgRed-light-theme-warn-palette
|
|
);
|
|
|
|
// Add ".theme-pink-dark" class to the body to activate this theme.
|
|
// Class name must start with "theme-" !!!
|
|
body.theme-lgRed{
|
|
// Generate the Angular Material theme
|
|
@include angular-material-theme($lgRed-light-theme);
|
|
|
|
// Apply the theme to the user components
|
|
@include components-theme($lgRed-light-theme);
|
|
@include ucap-material-theme($lgRed-light-theme);
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
//aqua-blue-daesang
|
|
// -----------------------------------------------------------------------------------------------------
|
|
|
|
$aquaBlue-light-theme-primary-palette: mat-palette($daesang-grey, 900);
|
|
$aquaBlue-theme-accent-palette: mat-palette($aquaBlue-daesang);
|
|
$aquaBlue-theme-warn-palette: mat-palette($mat-orange);
|
|
|
|
// Create the Material theme object
|
|
$aquaBlue-light-theme: mat-light-theme(
|
|
$aquaBlue-light-theme-primary-palette,
|
|
$aquaBlue-theme-accent-palette,
|
|
$aquaBlue-theme-warn-palette
|
|
);
|
|
|
|
// Add ".theme-pink-dark" class to the body to activate this theme.
|
|
// Class name must start with "theme-" !!!
|
|
body.theme-default {
|
|
// Generate the Angular Material theme
|
|
@include angular-material-theme($aquaBlue-light-theme);
|
|
|
|
// Apply the theme to the user components
|
|
@include components-theme($aquaBlue-light-theme);
|
|
@include ucap-material-theme($aquaBlue-light-theme);
|
|
}
|