Change to a custom theme.
This commit is contained in:
parent
161f4082cc
commit
7f3aa2c922
|
@ -28,8 +28,7 @@
|
||||||
<button
|
<button
|
||||||
mat-button
|
mat-button
|
||||||
matStepperNext
|
matStepperNext
|
||||||
[disabled]="zeroFormGroup.status == 'INVALID'"
|
[disabled]="zeroFormGroup.status == 'INVALID'">
|
||||||
(click)="onClick()">
|
|
||||||
Next
|
Next
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,9 +15,9 @@ button {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
//button {
|
||||||
background-color: #0366d6;
|
// background-color: #0366d6;
|
||||||
}
|
//}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: white;
|
color: white;
|
||||||
|
|
|
@ -1,19 +1,49 @@
|
||||||
/* Provide sufficient contrast against white background */
|
/* Provide sufficient contrast against white background */
|
||||||
|
|
||||||
|
@use "@angular/material" as mat;
|
||||||
@import '~bootstrap-icons/font/bootstrap-icons.css';
|
@import '~bootstrap-icons/font/bootstrap-icons.css';
|
||||||
|
@include mat.core();
|
||||||
|
|
||||||
a {
|
$my-primary: mat.define-palette(mat.$blue-palette);
|
||||||
color: #0366d6;
|
$my-accent: mat.define-palette(mat.$gray-palette);
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
color: #e01a76;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
$my-theme: mat.define-light-theme((
|
||||||
color: #fff;
|
color: (
|
||||||
background-color: #1b6ec2;
|
primary: $my-primary,
|
||||||
border-color: #1861ac;
|
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,
|
html,
|
||||||
|
@ -21,30 +51,25 @@ body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: rgb(245, 126, 32);
|
|
||||||
margin: 0;
|
|
||||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-form-field-subscript-wrapper {
|
//.mat-form-field-subscript-wrapper {
|
||||||
font-size: 95%;
|
// font-size: 95%;
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
|
//.mat-checkbox-checked.mat-accent .mat-checkbox-background {
|
||||||
background-color: #0366d6 !important;
|
// background-color: #0366d6 !important;
|
||||||
}
|
//}
|
||||||
mat-checkbox-checked {
|
//mat-checkbox-checked {
|
||||||
border-color: white;
|
// border-color: white;
|
||||||
}
|
//}
|
||||||
mat-checkbox {
|
//mat-checkbox {
|
||||||
color: white;
|
// color: white;
|
||||||
margin-bottom: 16px;
|
// margin-bottom: 16px;
|
||||||
}
|
//}
|
||||||
.mat-step-header .mat-step-icon-selected,
|
//.mat-step-header .mat-step-icon-selected,
|
||||||
.mat-step-icon-state-edit {
|
//.mat-step-icon-state-edit {
|
||||||
background-color: #0366d6 !important;
|
// background-color: #0366d6 !important;
|
||||||
}
|
//}
|
||||||
|
|
||||||
// customize datepicker
|
// customize datepicker
|
||||||
//.mat-datepicker-content-container {
|
//.mat-datepicker-content-container {
|
||||||
|
@ -98,11 +123,3 @@ mat-checkbox {
|
||||||
// background-color: #1b6ec2;
|
// background-color: #1b6ec2;
|
||||||
// border-color: #1861ac;
|
// border-color: #1861ac;
|
||||||
//}
|
//}
|
||||||
html,
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue