mirror of
https://github.com/google/nomulus
synced 2026-02-02 19:12:27 +00:00
1929654f8c
* Replace less compiler with scss * Replace less with scss, add homepage widgets, add registrars selector and registrars page
70 lines
2.2 KiB
SCSS
70 lines
2.2 KiB
SCSS
@use "sass:map";
|
|
@use "@angular/material" as mat;
|
|
|
|
/** Copied from docs section **/
|
|
|
|
// 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.
|
|
// Be sure that you only ever include this mixin once!
|
|
@include mat.core();
|
|
|
|
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
|
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
|
// hue. Available color palettes: https://material.io/design/color/
|
|
$theme-primary: mat.define-palette(mat.$indigo-palette);
|
|
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
|
|
|
|
// The warn palette is optional (defaults to red).
|
|
$theme-warn: mat.define-palette(mat.$red-palette);
|
|
|
|
// Create the theme object. A theme consists of configurations for individual
|
|
// theming systems such as "color" or "typography".
|
|
$theme: mat.define-light-theme(
|
|
(
|
|
color: (
|
|
primary: $theme-primary,
|
|
accent: $theme-accent,
|
|
warn: $theme-warn,
|
|
),
|
|
density: 0,
|
|
)
|
|
);
|
|
|
|
/** Application specific section **/
|
|
|
|
@mixin form-field-density($density) {
|
|
$field-typography: mat.define-typography-config(
|
|
$body-1: mat.define-typography-level(12px, 24px, 400),
|
|
);
|
|
@include mat.typography-level($field-typography, "body-1");
|
|
@include mat.form-field-density($density);
|
|
}
|
|
|
|
// Define lowest possible density class to be used in application
|
|
// In the same manner -1...-5 classes can be defined
|
|
.mat-form-field-density-5 {
|
|
@include form-field-density(-5);
|
|
}
|
|
|
|
$foreground: map.merge($theme, mat.$light-theme-foreground-palette);
|
|
|
|
// Access and define a class with secondary color exposed
|
|
.secondary-text {
|
|
color: map.get($foreground, "secondary-text");
|
|
}
|
|
|
|
:root {
|
|
--primary: #{mat.get-color-from-palette($theme-primary, 500)};
|
|
--secondary: #{map.get($foreground, "secondary-text")};
|
|
}
|
|
|
|
@include mat.all-component-themes($theme);
|
|
@import "@angular/material/theming";
|
|
|
|
// Define application specific typography settings, font-family, etc
|
|
$typography-configuration: mat-typography-config(
|
|
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
|
|
);
|
|
|
|
@include angular-material-typography($typography-configuration);
|