Layer type on list

This commit is contained in:
Michał Zieliński
2023-08-22 19:26:08 +02:00
parent f4978009b5
commit dd64b34fa3
7 changed files with 110 additions and 135 deletions

View File

@@ -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%;
}