travopti/frontend/src/app/containers/region-details/region-details.component.scss
2020-06-23 23:02:41 +02:00

98 lines
1.4 KiB
SCSS

:host {
display: flex;
flex-direction: column;
height: 100%;
}
.region-img {
width: 100%;
object-fit: cover;
height: 10rem;
margin-bottom: 1.5rem;
align-self: center;
}
.region-details-header {
display: flex;
flex-direction: row;
align-items: center;
> .region-title {
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin: 0.25rem 0;
> .region-name {
font-weight: bold;
font-size: 2rem;
}
> .region-country {
text-transform: uppercase;
font-size: 1.2rem;
}
}
}
.region-decsription {
text-align: justify;
margin: 0.5rem 0;
> .more-btn {
color: #8f8f8f;
cursor: pointer;
}
}
.region-stats-group {
display: flex;
flex-direction: column;
margin: 2rem 0 1rem 0;
> .group-title {
font-size: 1.5rem;
}
mat-tab-body {
min-height: 30vh !important;
}
.graph {
height: 30vh;
display: block;
margin-top: 1rem;
}
}
.places-container {
display: flex;
flex-direction: column;
> .group-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
> .places {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
app-place {
margin: 0.5rem;
}
}
}
.spinner {
flex: 1 1 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}