TelegramPWA/src/components/common/pickers/PickerStyles.module.scss
2025-02-13 14:27:52 +01:00

82 lines
1.3 KiB
SCSS

@use "../../../styles/mixins";
.container {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.header {
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--color-borders);
display: flex;
flex-flow: row wrap;
flex-shrink: 0;
overflow-y: auto;
max-height: 20rem;
:global(.input-group) {
margin-bottom: 0;
flex-grow: 1;
}
:global(.form-control) {
height: 2rem;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none !important;
}
}
.pickerCategoryTitle {
color: var(--color-text-secondary);
padding-inline: 0.5rem;
margin-bottom: 0.5rem;
font-weight: var(--font-weight-medium);
&:not(:first-child) {
border-top: 1px solid var(--color-borders);
padding-top: 0.5rem;
margin-top: 0.375rem;
}
}
.peerChip {
margin-bottom: 0.5rem;
max-width: calc(50% - 0.5rem);
}
.pickerList {
flex-grow: 1;
overflow-y: auto;
overflow-x: hidden;
}
.padded {
padding: 0.5rem;
scrollbar-gutter: stable;
@include mixins.adapt-padding-to-scrollbar(0.5rem);
@media (max-width: 600px) {
padding-inline: 0;
}
}
.noResults {
height: 100%;
margin: 0;
padding: 1rem 1rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
}
.onlineStatus {
color: var(--color-primary);
}