From c03cbbc72e2e42bd21aa77ec5fd2deb676c87784 Mon Sep 17 00:00:00 2001 From: Aaron Louie Date: Wed, 27 May 2020 14:55:10 -0400 Subject: [PATCH] Brings in style settings from frontend for consistency --- src/_config.scss | 21 +++++++------------- src/_material.scss | 26 ++++++++++++------------- src/environments/environment.runtime.ts | 2 +- src/material-theme.scss | 10 +++++----- 4 files changed, 26 insertions(+), 33 deletions(-) diff --git a/src/_config.scss b/src/_config.scss index b27bca4..cd462d8 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -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; diff --git a/src/_material.scss b/src/_material.scss index fc6a68a..1a0c036 100644 --- a/src/_material.scss +++ b/src/_material.scss @@ -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: ( diff --git a/src/environments/environment.runtime.ts b/src/environments/environment.runtime.ts index 8a9e025..c40401d 100644 --- a/src/environments/environment.runtime.ts +++ b/src/environments/environment.runtime.ts @@ -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', }; diff --git a/src/material-theme.scss b/src/material-theme.scss index 3f23795..8b9b233 100644 --- a/src/material-theme.scss +++ b/src/material-theme.scss @@ -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; }