Change to a custom theme.
This commit is contained in:
parent
161f4082cc
commit
7f3aa2c922
|
@ -28,8 +28,7 @@
|
|||
<button
|
||||
mat-button
|
||||
matStepperNext
|
||||
[disabled]="zeroFormGroup.status == 'INVALID'"
|
||||
(click)="onClick()">
|
||||
[disabled]="zeroFormGroup.status == 'INVALID'">
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -15,9 +15,9 @@ button {
|
|||
color: white;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #0366d6;
|
||||
}
|
||||
//button {
|
||||
// background-color: #0366d6;
|
||||
//}
|
||||
|
||||
::selection {
|
||||
color: white;
|
||||
|
|
|
@ -1,19 +1,49 @@
|
|||
/* Provide sufficient contrast against white background */
|
||||
|
||||
@use "@angular/material" as mat;
|
||||
@import '~bootstrap-icons/font/bootstrap-icons.css';
|
||||
@include mat.core();
|
||||
|
||||
a {
|
||||
color: #0366d6;
|
||||
}
|
||||
$my-primary: mat.define-palette(mat.$blue-palette);
|
||||
$my-accent: mat.define-palette(mat.$gray-palette);
|
||||
|
||||
code {
|
||||
color: #e01a76;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #1b6ec2;
|
||||
border-color: #1861ac;
|
||||
$my-theme: mat.define-light-theme((
|
||||
color: (
|
||||
primary: $my-primary,
|
||||
accent: $my-accent,
|
||||
),
|
||||
typography: mat.define-typography-config(),
|
||||
density: 0,
|
||||
));
|
||||
|
||||
// Emit theme-dependent styles for common features used across multiple components.
|
||||
@include mat.core-theme($my-theme);
|
||||
|
||||
// Emit styles for MatButton based on `$my-theme`. Because the configuration
|
||||
// passed to `define-light-theme` omits typography, `button-theme` will not
|
||||
// emit any typography styles.
|
||||
@include mat.all-component-colors($my-theme);
|
||||
@include mat.button-color($my-theme);
|
||||
// Include the theme mixins for other components you use here.
|
||||
//a {
|
||||
// color: #0366d6;
|
||||
//}
|
||||
//
|
||||
//code {
|
||||
// color: #e01a76;
|
||||
//}
|
||||
//
|
||||
//.btn-primary {
|
||||
// color: #fff;
|
||||
// background-color: #1b6ec2;
|
||||
// border-color: #1861ac;
|
||||
//}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
background-color: rgb(245, 126, 32);
|
||||
}
|
||||
|
||||
html,
|
||||
|
@ -21,30 +51,25 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(245, 126, 32);
|
||||
margin: 0;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
.mat-form-field-subscript-wrapper {
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
|
||||
background-color: #0366d6 !important;
|
||||
}
|
||||
mat-checkbox-checked {
|
||||
border-color: white;
|
||||
}
|
||||
mat-checkbox {
|
||||
color: white;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.mat-step-header .mat-step-icon-selected,
|
||||
.mat-step-icon-state-edit {
|
||||
background-color: #0366d6 !important;
|
||||
}
|
||||
//.mat-form-field-subscript-wrapper {
|
||||
// font-size: 95%;
|
||||
//}
|
||||
//
|
||||
//.mat-checkbox-checked.mat-accent .mat-checkbox-background {
|
||||
// background-color: #0366d6 !important;
|
||||
//}
|
||||
//mat-checkbox-checked {
|
||||
// border-color: white;
|
||||
//}
|
||||
//mat-checkbox {
|
||||
// color: white;
|
||||
// margin-bottom: 16px;
|
||||
//}
|
||||
//.mat-step-header .mat-step-icon-selected,
|
||||
//.mat-step-icon-state-edit {
|
||||
// background-color: #0366d6 !important;
|
||||
//}
|
||||
|
||||
// customize datepicker
|
||||
//.mat-datepicker-content-container {
|
||||
|
@ -98,11 +123,3 @@ mat-checkbox {
|
|||
// background-color: #1b6ec2;
|
||||
// border-color: #1861ac;
|
||||
//}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue