CaffGeek/MBACNationals

View on GitHub
Website/src/theme.scss

Summary

Maintainability
Test Coverage
@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.

// Custom Palette's, generate with https://angular-md-color.com/#/ (syntax is off a bit, but it's pretty close)
$custom-mat-maroon: (
  50: #ff1a1a,
  100: #ff0000,
  200: #e50000,
  300: #cc0000,
  400: #b30000,
  500: #990000,
  600: #800000,
  700: #660000,
  800: #4d0000,
  900: #330000,
  A100: #ff3333,
  A200: #ff4c4c,
  A400: #ff6666,
  A700: #190000,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);

// Alias palette's from Angular (see: node_modules/@angular/material/_theming.scss)
$palette-red: mat-palette($mat-red);
$palette-pink: mat-palette($mat-pink);
$palette-purple: mat-palette($mat-purple);
$palette-deep-purple: mat-palette($mat-deep-purple);
$palette-indigo: mat-palette($mat-indigo);
$palette-blue: mat-palette($mat-blue);
$palette-light-blue: mat-palette($mat-light-blue);
$palette-cyan: mat-palette($mat-cyan);
$palette-teal: mat-palette($mat-teal);
$palette-green: mat-palette($mat-green);
$palette-light-green: mat-palette($mat-light-green);
$palette-lime: mat-palette($mat-lime);
$palette-yellow: mat-palette($mat-yellow);
$palette-amber: mat-palette($mat-amber);
$palette-orange: mat-palette($mat-orange);
$palette-deep-orange: mat-palette($mat-deep-orange);
$palette-brown: mat-palette($mat-brown);
$palette-grey: mat-palette($mat-grey);
$palette-blue-grey: mat-palette($mat-blue-grey);
$palette-maroon: mat-palette($custom-mat-maroon);

$palette-warning: $palette-amber;

$default: mat-light-theme($palette-pink, $palette-blue-grey, $palette-warning);

// Specific component overrides, pieces that are not in line with the general theming

// Handle buttons appropriately, with respect to line-height
.mat-raised-button, .mat-stroked-button, .mat-flat-button {
  padding: 0 1.15em;
  margin: 0 .65em;
  min-width: 3em;
  line-height: 36.4px
}

.mat-standard-chip {
  padding: .5em .85em;
  min-height: 2.5em;
}