Layer type on list
This commit is contained in:
@@ -6,77 +6,84 @@ $my-app-primary: mat.define-palette(mat.$orange-palette);
|
||||
$my-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
|
||||
$my-app-warn: mat.define-palette(mat.$red-palette);
|
||||
|
||||
$my-app-theme: mat.define-light-theme(
|
||||
(
|
||||
color: (
|
||||
primary: $my-app-primary,
|
||||
accent: $my-app-accent,
|
||||
warn: $my-app-warn,
|
||||
),
|
||||
)
|
||||
);
|
||||
$my-app-theme: mat.define-light-theme((color: (primary: $my-app-primary,
|
||||
accent: $my-app-accent,
|
||||
warn: $my-app-warn,
|
||||
),
|
||||
));
|
||||
|
||||
@include mat.all-component-themes($my-app-theme);
|
||||
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
|
||||
.AppLoading {
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
opacity: 0;
|
||||
transition: opacity .8s ease-in-out;
|
||||
position: fixed;
|
||||
height: 105%;
|
||||
width: 105%;
|
||||
z-index: -1;
|
||||
background-color: lightgrey;
|
||||
background-image: url('./assets/loader.gif');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
|
||||
app-root:empty + .AppLoading {
|
||||
opacity: 1;
|
||||
z-index: 100;
|
||||
}
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
opacity: 0;
|
||||
transition: opacity .8s ease-in-out;
|
||||
position: fixed;
|
||||
height: 105%;
|
||||
width: 105%;
|
||||
z-index: -1;
|
||||
background-color: lightgrey;
|
||||
background-image: url('./assets/loader.gif');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
:root {
|
||||
--avatar-size: 30px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
height: var(--avatar-size);
|
||||
text-align: center;
|
||||
width: var(--avatar-size);
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
|
||||
app-root:empty+.AppLoading {
|
||||
opacity: 1;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
min-width: 120px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.col:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
:root {
|
||||
--avatar-size: 30px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
height: var(--avatar-size);
|
||||
text-align: center;
|
||||
width: var(--avatar-size);
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
min-width: 120px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.col:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
width: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user