element-web/res/css/structures/_AutocompleteInput.pcss
Michael Telatynski d770e2afcc
Deduplicate icons using Compound Design Tokens ()
* Deduplicate icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-10-14 16:54:15 +00:00

121 lines
2.6 KiB
Text

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_AutocompleteInput {
position: relative;
}
.mx_AutocompleteInput_search_icon {
margin-left: $spacing-8;
fill: $secondary-content;
}
.mx_AutocompleteInput_editor {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid $input-border-color;
border-radius: 4px;
transition: border-color 0.25s;
> input {
flex: 1;
min-width: 40%;
resize: none;
/* `!important` is required to bypass global input styles. */
margin: 0 !important;
padding: $spacing-8 9px;
border: none !important;
color: $primary-content !important;
font-weight: normal !important;
&::placeholder {
color: $primary-content !important;
font-weight: normal !important;
}
}
}
.mx_AutocompleteInput_editor--focused {
border-color: $links;
}
.mx_AutocompleteInput_editor--has-suggestions {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.mx_AutocompleteInput_editor_selection {
display: flex;
margin-left: $spacing-8;
}
.mx_AutocompleteInput_editor_selection_pill {
display: flex;
align-items: center;
border-radius: 12px;
padding-left: $spacing-8;
padding-right: $spacing-8;
background-color: $username-variant1-color;
color: #ffffff;
font-size: $font-12px;
}
.mx_AutocompleteInput_editor_selection_remove_button svg {
vertical-align: middle;
}
.mx_AutocompleteInput_matches {
position: absolute;
left: 0;
right: 0;
background-color: $background;
border: 1px solid $links;
border-top-color: $input-border-color;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 1000;
}
.mx_AutocompleteInput_suggestion {
display: flex;
align-items: center;
padding: $spacing-8;
cursor: pointer;
> * {
user-select: none;
}
&:hover {
background-color: $quinary-content;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.mx_AutocompleteInput_suggestion--selected {
background-color: $quinary-content;
&:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.mx_AutocompleteInput_suggestion_title {
margin-right: $spacing-8;
}
.mx_AutocompleteInput_suggestion_description {
color: $secondary-content;
font-size: $font-12px;
}