Brings in style settings from frontend for consistency

This commit is contained in:
Aaron Louie 2020-05-27 14:55:10 -04:00
parent ccfd229ae0
commit c03cbbc72e
4 changed files with 26 additions and 33 deletions

View File

@ -1,6 +1,6 @@
// GLOBAL SCSS VARIABLES
$body-font-family: '"franklin-gothic-urw", sans-serif';
$heading-font-family: '"franklin-gothic-urw-cond", sans-serif';
$body-font-family: 'franklin-gothic-urw', sans-serif;
$heading-font-family: 'franklin-gothic-urw-cond', sans-serif;
// COLOR PALETTE
@ -11,6 +11,11 @@ $brand-gray-tint-2: #DADADA;
$brand-gray-tint-3: #F1F1EF;
$brand-gray-tint-4: scale-color($brand-gray, $lightness: 90%);
$body-color: $brand-gray;
$brand-gray-shade-1: scale-color($brand-gray, $lightness: -20%);
$brand-gray-shade-2: scale-color($brand-gray, $lightness: -40%);
$brand-gray-shade-3: scale-color($brand-gray, $lightness: -60%);
$brand-gray-shade-4: scale-color($brand-gray, $lightness: -80%);
$brand-gray-shade-5: scale-color($brand-gray, $lightness: -100%);
$body-color-muted: $brand-gray-tint-1;
$body-color-light: $brand-gray-tint-4;
$brand-gray-muted: $brand-gray-tint-1;
@ -48,18 +53,6 @@ $brand-accent-light: $brand-accent-tint-4;
$brand-warning: #DF1E43;
$brand-warning-muted: desaturate(scale-color($brand-warning, $lightness: 30%), 20%);
$brand-warning-light: scale-color($brand-warning, $lightness: 90%);
$easeDuration: 300ms;
$animationDuration: 500ms;
$tile-height-1x: 226px;
$tile-height-2x: 288px;
$uva-header-height: 40px;
$site-header-height: 64px;
$search-bar-height-sm: 64px;
$search-bar-height-md: 128px;
$search-bar-height-lg: 64px;
$header-height-sm: ($uva-header-height + $site-header-height + $search-bar-height-sm);
$header-height-md: ($uva-header-height + $site-header-height + $search-bar-height-md);
$header-height-lg: ($uva-header-height + $site-header-height + $search-bar-height-lg);
// Green
$brand-green: #64B343;

View File

@ -4,19 +4,19 @@
// Define a custom typography config that overrides the font-family
$custom-typography: mat-typography-config(
$font-family: $body-font-family,
$display-4: mat-typography-level(2.500rem, 1.0, 700, $heading-font-family),
$display-3: mat-typography-level(2.250rem, 1.0, 700, $heading-font-family),
$display-2: mat-typography-level(2.000rem, 1.0, 700, $heading-font-family),
$display-1: mat-typography-level(1.750rem, 1.0, 700, $heading-font-family),
$headline: mat-typography-level(48px, 1.0, 700, $heading-font-family),
$title: mat-typography-level(1.500rem, 1.0, 700, $body-font-family),
$subheading-2: mat-typography-level(1.375rem, 1.0, 500, $body-font-family),
$subheading-1: mat-typography-level(1.250rem, 1.0, 500, $body-font-family),
$body-2: mat-typography-level(1.000rem, 1.5, 500, $body-font-family),
$body-1: mat-typography-level(1.000rem, 1.5, 500, $body-font-family),
$caption: mat-typography-level(1.000rem, 1.5, 500, $body-font-family),
$button: mat-typography-level(1.000rem, 1.5, 500, $body-font-family),
$input: mat-typography-level(1.000rem, 1.5, 500, $body-font-family)
$display-4: mat-typography-level(3.75rem, 1.0925, 700, $body-font-family),
$display-3: mat-typography-level(2.4917rem, 1.1037, 700, $body-font-family),
$display-2: mat-typography-level(2.2148rem, 1.1287, 700, $body-font-family),
$display-1: mat-typography-level(1.9688rem, 1.1429, 700, $body-font-family),
$headline: mat-typography-level(1.7500rem, 1.1429, 700, $body-font-family), // h1
$title: mat-typography-level(1.5625rem, 1.1200, 500, $body-font-family), // h2
$subheading-2: mat-typography-level(1.3750rem, 1.0000, 700, $heading-font-family), // h3
$subheading-1: mat-typography-level(1.2500rem, 1.1000, 700, $body-font-family), // h4
$body-2: mat-typography-level(1.1250rem, 1.1111, 500, $body-font-family), // h5
$body-1: mat-typography-level(1.0000rem, 1.1250, 500, $body-font-family), // p
$caption: mat-typography-level(0.8750rem, 0.7143, 500, $body-font-family), // small
$button: mat-typography-level(1.0000rem, 1.1250, 500, $body-font-family),
$input: mat-typography-level(1.0000rem, 1.1250, 500, $body-font-family)
);
$mat-blue: (

View File

@ -9,5 +9,5 @@ export const environment: AppEnvironment = {
production: _has(ENV, 'production', '$PRODUCTION') ? (ENV.production === 'true') : false,
api: _has(ENV, 'api', '$API_URL') ? ENV.api : 'http://localhost:5000/v1.0',
irbUrl: _has(ENV, 'irbUrl', '$IRB_URL') ? ENV.irbUrl : 'http://localhost:5001',
title: _has(ENV, 'title', '$TITLE') ? ENV.title : 'Research Ramp-Up Toolkit',
title: _has(ENV, 'title', '$TITLE') ? ENV.title : 'Research Ramp-Up Toolkit Configurator',
};

View File

@ -7,11 +7,6 @@
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
h1 {
text-transform: uppercase;
color: $brand-accent;
}
html, body {
height: 100%;
margin: 0;
@ -24,6 +19,11 @@
padding-top: $header-height;
}
.mat-display-4 {
color: $brand-primary;
border-bottom: 1px solid $brand-gray-light;
}
mat-radio-button, .mat-checkbox {
padding-right: 16px;
}