-
Chris Hines authoredChris Hines authored
styles.scss 9.63 KiB
@use '@angular/material' as mat;
@import 'health-warn.scss';
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700|Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Nunito:400&text=0123456789');
// Plus imports for other components in your app.
// 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();
// Colour palette generated using #1a50a5 as primary:
// http://mcg.mbitson.com/#!?strudel=%231a50a5
$md-monashpalette: (
50 : #e4eaf4,
100 : #bacbe4,
200 : #8da8d2,
300 : #5f85c0,
400 : #3c6ab3,
500 : #1a50a5,
600 : #17499d,
700 : #134093,
800 : #0f378a,
900 : #082779,
A100 : #a8bbff,
A200 : #7594ff,
A400 : #426cff,
A700 : #2958ff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #ffffff,
A700 : #ffffff,
)
);
$strudel-app-primary: mat.define-palette($md-monashpalette);
$strudel-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$strudel-app-theme: mat.define-light-theme($strudel-app-primary, $strudel-app-accent);
@include mat.all-component-themes($strudel-app-theme);
@include health-warning-theme($strudel-app-theme);
$custom-typography: mat.define-typography-config(
$font-family: 'Nunito, Raleway, Roboto',
$display-4: mat.define-typography-level(22px, 48px, 500, 'Nunito, Raleway, Roboto', 15px), //Used for the title in the toolbar
$headline: mat.define-typography-level(34px, 48px, 500, 'Nunito, Raleway, Roboto'), //Used for the titles on components like Contact Us Our Service etc
$title: mat.define-typography-level(18px, 18px, 400), // LAUNCH COMPLETED RUNNING expansion headers for the launcher
$subheading-1: mat.define-typography-level(18px, 18px, 400), // expansion panel headers use size subheading 1
$subheading-2: mat.define-typography-level(12px, 22px, 400), // Used for lists
$body-1: mat.define-typography-level(14px,22px,400), // Table cells, eg the hostname in the table of running jobs
$caption: mat.define-typography-level(12px,12px,500), // Table header cells
$body-2: mat.define-typography-level(12px,22px,500),
$button: mat.define-typography-level(14px,36px,500)
);
//@include mat-base-typography($custom-typography);
@include mat.all-component-typographies($custom-typography);
//@include mat-core($custom-typography);
.strudel-light-theme {
$strudel-app-primary: mat.define-palette($md-monashpalette);
$strudel-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$strudel-app-warn: mat.define-palette(mat.$orange-palette);
$strudel-app-theme: mat.define-light-theme($strudel-app-primary, $strudel-app-accent, $strudel-app-warn);
// @include mat-base-typography($custom-typography);
@include mat.all-component-typographies($custom-typography);
// @include mat-core($custom-typography);
@include mat.all-component-themes($strudel-app-theme);
@include health-warning-theme($strudel-app-theme);
--header-text-color: #11356e;
--header-background-color: #f0f0f0;
--table-background-color: #fafafa;
--button-hover-color: #7191c3;
--footer-background-color: #303030;
--footer-text-color: #f0f0f0;
--panel-border-color: #a2bae1;
--panel-header-color: #1a50a5;
--form-background-color: #ffffff;
--link-active-color: var(--panel-header-color);
/* --panel-header-font-size: 18px;
--label-font-size: 16px;
--table-header-font-size: 16px;
--table-item-font-size: 12px;
--input-font-size: 12px;*/
.strudel-service-typography {
// These fonts/sizes are used in the left hand menu of compute sites and their applications
$small-headers-typography: mat.define-typography-config(
$font-family: 'Nunito, Raleway, Roboto',
$subheading-1: mat.define-typography-level(15px, 18px, 400), // expansion panel headers use size subheading 1
$body-1: mat.define-typography-level(15px, 22px, 400), // expansions use size body 1
);
@include mat.expansion-typography($small-headers-typography);
}
.strudel-job-typography{
// These fonts are used to render information about the job.
// The font on the buttons must by a bit smaller to match other fields
$small-button-typography: mat.define-typography-config(
$font-family: 'Nunito, Raleway, Roboto',
$button: mat.define-typography-level(12px,36px,500),
$body-1: mat.define-typography-level(12px,22px,400)
);
@include mat.all-component-typographies($small-button-typography);
}
.strudel-accountinfo-typography { // account info gets some different typography to make the tables of disk quotas smaller
$small-table-typography: mat.define-typography-config(
$font-family: 'Nunito, Raleway, Roboto',
$body-1: mat.define-typography-level(12px,22px,400),
$subheading-1: mat.define-typography-level(18px, 22px, 400), // expansion panel headers use size subheading 1
);
@include mat.all-component-typographies($small-table-typography);
}
.other-component { //about us our services, contact us have these styles appliec
.heading {
h1 {
color: var(--panel-header-color);
margin: 30px 0px;
display: inline-block;
text-transform: uppercase;
}
h2 {
color: var(--header-text-color);
margin: 16px 0px 16px 0px;
text-transform: uppercase;
}
} .mat-divider {
border-top-color: var(--panel-border-color);
}
.content {
max-width: 800px;
width: 100%;
}
.big-button {
width: 180px;
}
p {
color: var(--header-text-color);
}
.vertical-line {
border-left: 1px solid var(--panel-header-color);
height: 80px;
left: 50%;
margin-left: -3px;
margin-top: 40%;
display: inline-block;
}
}
}
.strudel-dark-theme {
// Define an alternate dark theme.
//$dark-primary: mat-palette($mat-blue-grey);
$dark-primary: mat.define-palette($md-monashpalette,800);
$dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
$dark-warn: mat.define-palette(mat.$orange-palette);
$dark-theme: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn);
// @include mat-base-typography($custom-typography);
@include mat.all-component-typographies($custom-typography);
// @include mat-core($custom-typography);
@include mat.all-component-themes($dark-theme);
@include health-warning-theme($dark-theme);
.other-component { //about us our services, contact us have these styles appliec
.heading {
h1 {
color: var(--panel-header-color);
margin: 30px 0px;
display: inline-block;
text-transform: uppercase;
}
h2 {
color: var(--header-text-color);
margin: 16px 0px 16px 0px;
text-transform: uppercase;
}
}
.mat-divider {
border-top-color: var(--panel-border-color);
}
.content {
max-width: 800px;
width: 100%;
}
.big-button {
width: 180px;
}
p {
color: var(--header-text-color);
}
.vertical-line {
border-left: 1px solid var(--panel-header-color);
height: 80px;
left: 50%;
margin-left: -3px;
margin-top: 40%; display: inline-block;
}
}
}
.strudel-mlerp-theme {
// Define an alternate mlerp theme.
//$mlerp-primary: mat-palette($mat-blue-grey);
$mlerp-primary: mat.define-palette(mat.$pink-palette);
$mlerp-accent: mat.define-palette(mat.$deep-purple-palette, A200, A100, A400);
$mlerp-warn: mat.define-palette(mat.$lime-palette);
$mlerp-theme: mat.define-light-theme($mlerp-primary, $mlerp-accent, $mlerp-warn);
// @include mat-base-typography($custom-typography);
@include mat.all-component-typographies($custom-typography);
// @include mat-core($custom-typography);
@include mat.all-component-themes($mlerp-theme);
@include health-warning-theme($mlerp-theme);
.other-component { //about us our services, contact us have these styles appliec
.heading {
h1 {
//color: var(--panel-header-color);
margin: 30px 0px;
display: inline-block;
text-transform: uppercase;
}
h2 {
//color: var(--header-text-color);
margin: 16px 0px 16px 0px;
text-transform: uppercase;
}
}
.mat-divider {
//border-top-color: var(--panel-border-color);
}
.content {
max-width: 800px;
width: 100%;
}
.big-button {
width: 180px;
}
p {
//color: var(--header-text-color);
}
.vertical-line {
border-left: 1px solid; //var(--panel-header-color);
height: 80px;
left: 50%;
margin-left: -3px;
margin-top: 40%;
display: inline-block;
}
}
}