changed stylesheets to use refactored theming files

pull/1/head
Chris Veilleux 2019-01-28 23:09:35 -06:00
parent 221ec8cc6b
commit 1e7656308a
6 changed files with 18 additions and 18 deletions

View File

@ -1,3 +1,4 @@
@import "~@angular/material/theming";
@import "mycroft-colors"; @import "mycroft-colors";
/* Split the screen in half */ /* Split the screen in half */
@ -14,7 +15,7 @@
/* Top Half */ /* Top Half */
.top { .top {
top: 0; top: 0;
background-color: $mycroft-primary; background-color: mat-color($mycroft-primary);
} }
/* Bottom Half */ /* Bottom Half */
@ -30,7 +31,7 @@ mat-tab-group {
} }
.login-options { .login-options {
background-color: $mycroft-white; background-color: mat-contrast($mycroft-primary, 500);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 320px; width: 320px;

View File

@ -1,3 +1,4 @@
@import "~@angular/material/theming";
@import "mycroft-colors"; @import "mycroft-colors";
/* Split the screen in half */ /* Split the screen in half */
@ -15,7 +16,7 @@
#top-half { #top-half {
@include half-screen; @include half-screen;
top: 0; top: 0;
background-color: $mycroft-primary; background-color: mat-color($mycroft-primary);
} }
/* Bottom Half */ /* Bottom Half */

View File

@ -1,32 +1,27 @@
@import "~@angular/material/theming";
@import 'mycroft-colors'; @import 'mycroft-colors';
@import "components/buttons"; @import "components/buttons";
form { form {
background-color: $mycroft-white;
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
fa-icon { fa-icon {
color: $mycroft-dark-grey; color: mat-color($mycroft-accent, A700);
margin-right: 15px; margin-right: 15px;
} }
mat-checkbox { mat-checkbox {
color: $mycroft-dark-grey; color: mat-color($mycroft-accent, A700);
} }
#forgot-password { #forgot-password {
margin-left: 30px; margin-left: 30px;
} }
button { button {
@include action-button; @include action-button-primary;
margin-top: 30px; margin-top: 30px;
text-align: center; text-align: center;
&:hover {
background-color: $mycroft-tertiary-green;
color: $mycroft-secondary;
}
} }
} }

View File

@ -1,14 +1,15 @@
@import "~@angular/material/theming";
@import 'mycroft-colors'; @import 'mycroft-colors';
#login-options { #login-options {
background-color: $mycroft-white; background-color: mat-contrast($mycroft-primary, 500);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 320px; width: 320px;
} }
.mat-subheading-2 { .mat-subheading-2 {
color: $mycroft-dark-grey; color: mat-color($mycroft-accent, A700);
margin-bottom: -15px; margin-bottom: -15px;
margin-top: -15px; margin-top: -15px;
text-align: center; text-align: center;

View File

@ -1,8 +1,9 @@
@import "~@angular/material/theming";
@import 'mycroft-colors'; @import 'mycroft-colors';
@mixin login-button { @mixin login-button {
border-radius: 4px; border-radius: 4px;
color: $mycroft-white; color: mat-contrast($mycroft-primary, 500);
font-weight: normal; font-weight: normal;
text-align: left; text-align: left;
width: 280px; width: 280px;

View File

@ -1,3 +1,4 @@
@import "~@angular/material/theming";
@import "mycroft-colors"; @import "mycroft-colors";
// The angular material spinner was limiting in color choices we built our own // The angular material spinner was limiting in color choices we built our own
@ -15,7 +16,7 @@
} }
.mat-h3 { .mat-h3 {
color: $mycroft-secondary; color: mat-color($mycroft-accent);
font-size: 40px; font-size: 40px;
margin-top: 50px; margin-top: 50px;
text-align: center; text-align: center;
@ -23,6 +24,6 @@
#logout-spinner { #logout-spinner {
@include spinner-common; @include spinner-common;
border-right-color: $mycroft-secondary; border-right-color: mat-color($mycroft-accent);
border-top-color: $mycroft-secondary; border-top-color: mat-color($mycroft-accent);
} }