life-towers/frontend/src/app/components/pages/pages.component.scss

102 lines
2 KiB
SCSS

@import '../../../library/main';
:host {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
@include inner-spacing(var(--large-padding));
.select-add-container {
width: 250px;
margin: 0 auto;
position: relative;
z-index: 1000;
@media (max-width: $mobile-width) {
width: 80vw;
max-width: 320px;
}
}
.page-container {
flex: 1 1 auto;
min-height: 0;
// Generous breathing room between the page selector dropdown and the
// towers — the dropdown can open downward without crowding the towers.
padding-top: var(--large-padding);
@media (max-width: $mobile-width) {
padding-top: var(--medium-padding);
}
}
button {
transition: opacity $long-animation-time;
&.transparent {
opacity: 0;
}
@media (max-width: $mobile-width) {
margin-top: var(--medium-padding);
font-size: var(--medium-font-size);
}
}
.confirm-delete {
@include card();
width: 66vw;
max-width: 500px;
@media (max-width: $mobile-width) {
width: 88vw;
max-width: 88vw;
padding: var(--medium-padding);
}
box-sizing: border-box;
padding: var(--large-padding);
position: relative;
box-shadow: $shadow;
@include inner-spacing(var(--large-padding));
text-align: center;
.header {
@include center-child();
.exit {
position: absolute;
right: var(--large-padding);
@include exit();
}
}
.confirm-buttons {
display: flex;
justify-content: center;
gap: var(--large-padding);
button {
max-width: 100%;
}
button.danger {
color: #b53f3f;
border-bottom-color: #b53f3f55;
&:after {
background-color: #b53f3f;
}
}
@media (max-width: $mobile-width) {
flex-direction: column;
gap: var(--small-padding);
button {
width: 100%;
}
}
}
}
}