Brings in style settings from frontend for consistency
This commit is contained in:
parent
ccfd229ae0
commit
c03cbbc72e
|
@ -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;
|
||||
|
|
|
@ -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: (
|
||||
|
|
|
@ -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',
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue