update
This commit is contained in:
+125
@@ -0,0 +1,125 @@
|
||||
// Custom Theming for Angular Material
|
||||
// For more information: https://material.angular.io/guide/theming
|
||||
@import '~@angular/material/theming';
|
||||
// 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();
|
||||
|
||||
|
||||
@import './variables.scss';
|
||||
|
||||
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
||||
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
||||
// hue. Available color palettes: https://material.io/design/color/
|
||||
$light-theme: mat-light-theme((color: (primary: $light-primary,
|
||||
accent: $light-accent,
|
||||
warn: $light-warn,
|
||||
)));
|
||||
|
||||
// Define an alternate dark theme.
|
||||
$dark-theme: mat-dark-theme((color: (primary: $dark-primary,
|
||||
accent: $dark-accent,
|
||||
warn: $dark-warn,
|
||||
)));
|
||||
|
||||
// Include theme styles for core and each component used in your app.
|
||||
// Alternatively, you can import and @include the theme mixins for each component
|
||||
// that you are using.
|
||||
@include angular-material-theme($light-theme);
|
||||
|
||||
|
||||
.dark-theme {
|
||||
@include angular-material-color($dark-theme);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
/* fallback */
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(assets/fonts/material_icons.woff2) format('woff2');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-moz-font-feature-settings: 'liga';
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
|
||||
}
|
||||
|
||||
app-root {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
mat-card {
|
||||
max-width: 400px;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
display: block;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
&.ng-valid {
|
||||
.mat-form-field-wrapper {
|
||||
padding-bottom: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
&.ng-invalid,
|
||||
&.mat-form-field-invalid {
|
||||
.mat-form-field-wrapper {
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ng-untouched {
|
||||
.mat-form-field-wrapper {
|
||||
padding-bottom: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field {
|
||||
&-underline {
|
||||
position: static;
|
||||
}
|
||||
|
||||
&-subscript-wrapper {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user