hensei-web/components/SearchModal/index.scss

106 lines
2.1 KiB
SCSS

.Search.DialogContent {
box-sizing: border-box;
display: flex;
flex-direction: column;
min-height: 430px;
padding: 0;
@include breakpoint(phone) {
animation: none;
border-radius: 0;
min-width: inherit;
min-height: 100vh;
}
.DialogHeader.Search {
align-items: inherit;
display: flex;
flex-direction: column;
gap: $unit;
padding: 0;
padding-bottom: $unit-2x;
position: sticky;
top: 0;
left: 0;
#Bar {
align-items: center;
border-top-left-radius: $unit;
border-top-right-radius: $unit;
display: flex;
gap: $unit * 2.5;
margin: 0;
padding: ($unit * 3) ($unit * 3) 0 ($unit * 3);
position: sticky;
top: 0;
button {
background: transparent;
border: none;
height: 42px;
padding: 0;
}
label {
width: 100%;
// .Input {
// background: $grey-90;
// border: none;
// border-radius: calc($unit / 2);
// box-sizing: border-box;
// font-size: $font-regular;
// padding: $unit * 1.5;
// text-align: left;
// width: 100%;
// }
}
}
}
#Results {
margin: 0;
padding: 0 ($unit * 1.5);
overflow-y: scroll;
@include breakpoint(phone) {
max-height: inherit;
}
h5.total {
font-size: $font-regular;
font-weight: $normal;
color: var(--text-tertiary);
padding: $unit-half ($unit * 1.5);
}
.footer {
align-items: center;
display: flex;
color: var(--text-tertiary);
font-size: $font-regular;
font-weight: $normal;
height: $unit-10x;
justify-content: center;
}
.WeaponResult:last-child {
margin-bottom: $unit * 1.5;
}
}
}
.Search.DialogContent #NoResults {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
}
.Search.DialogContent #NoResults h2 {
color: var(--text-secondary);
font-size: $font-large;
font-weight: 500;
margin-top: $unit-4x * -1;
}