Add project files.
This commit is contained in:
@@ -0,0 +1,277 @@
|
||||
@import '@angular/material/theming';
|
||||
@include mat-core();
|
||||
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
||||
.login-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mat-card-content-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.primary-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 600px;
|
||||
padding: 30px 40px 30px 40px;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
float: left;
|
||||
padding: 30px 40px 30px 40px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
z-index: 5;
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
.box.back {
|
||||
transform: scale(.95);
|
||||
-webkit-transform: scale(.95);
|
||||
-ms-transform: scale(.95);
|
||||
top: -20px;
|
||||
opacity: .8;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.box:before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
background: rgba(255, 255, 255, .6);
|
||||
left: 0;
|
||||
transform: scale(.95);
|
||||
-webkit-transform: scale(.95);
|
||||
-ms-transform: scale(.95);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
width: 350px !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
}
|
||||
|
||||
/* margins */
|
||||
.m-5 {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.m-10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.m-15 {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.m-20 {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.m-25 {
|
||||
margin: 25px;
|
||||
}
|
||||
|
||||
.m-30 {
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mt-15 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mt-25 {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.mt-30 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mb-15 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mb-25 {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.mb-30 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.ml-5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.ml-10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.ml-15 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.ml-25 {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.ml-30 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.mr-5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mr-15 {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.mr-20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.mr-25 {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.mr-30 {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.ml-a {
|
||||
margin-left: auto;
|
||||
}
|
||||
/* paddings */
|
||||
|
||||
/* min-width */
|
||||
.w-50 {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.w-75 {
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.w-100p {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* min-width */
|
||||
.mw-50 {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.mw-75 {
|
||||
min-width: 75px;
|
||||
}
|
||||
|
||||
.mw-100 {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.mw-50-imp {
|
||||
min-width: 50px !important;
|
||||
}
|
||||
|
||||
.mw-75-imp {
|
||||
min-width: 75px !important;
|
||||
}
|
||||
|
||||
.mw-100-imp {
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.fl-l {
|
||||
float: left
|
||||
}
|
||||
|
||||
.fl-r {
|
||||
float: right
|
||||
}
|
||||
|
||||
/* colors */
|
||||
|
||||
$primary: mat-palette($mat-blue,800);
|
||||
|
||||
.color-warn {
|
||||
color: mat-color($primary, default);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@import "src/styles/_variables";
|
||||
|
||||
// Import functions, variables, and mixins needed by other Bootstrap files
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/maps";
|
||||
@import "bootstrap/scss/mixins";
|
||||
|
||||
// Import Bootstrap Reboot
|
||||
@import "bootstrap/scss/root"; // Contains :root CSS variables used by other Bootstrap files
|
||||
@import "bootstrap/scss/reboot";
|
||||
|
||||
@import "bootstrap/scss/containers"; // Add .container and .container-fluid classes
|
||||
@import "bootstrap/scss/grid"; // Add the grid system
|
||||
|
||||
@import "src/styles/reset";
|
||||
|
||||
@import "src/styles/global";
|
||||
@@ -0,0 +1,36 @@
|
||||
// Custom Theming for Angular Material
|
||||
// For more information: https://material.angular.io/guide/theming
|
||||
@use '@angular/material' as mat;
|
||||
// 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!
|
||||
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
|
||||
// The following line adds:
|
||||
// 1. Default typography styles for all components
|
||||
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
|
||||
// If you specify typography styles for the components you use elsewhere, you should delete this line.
|
||||
// If you don't need the default component typographies but still want the hierarchy styles,
|
||||
// you can delete this line and instead use:
|
||||
// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
|
||||
@include mat.all-component-typographies();
|
||||
@include mat.core();
|
||||
|
||||
// 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/
|
||||
$theme-primary: mat.define-palette(mat.$deep-purple-palette);
|
||||
$theme-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
|
||||
|
||||
// The warn palette is optional (defaults to red).
|
||||
$theme-warn: mat.define-palette(mat.$red-palette);
|
||||
|
||||
// Create the theme object. A theme consists of configurations for individual
|
||||
// theming systems such as "color" or "typography".
|
||||
$theme: mat.define-light-theme(( color: ( primary: $theme-primary, accent: $theme-accent, warn: $theme-warn, ), typography: mat.define-typography-config(), ));
|
||||
|
||||
// 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 mat.all-component-themes($theme);
|
||||
Reference in New Issue
Block a user