lbry-desktop/ui/scss/component/_wunderbar.scss

98 lines
1.8 KiB
SCSS
Raw Normal View History

.wunderbar {
2019-08-21 22:54:44 +02:00
flex: 1;
height: 100%;
cursor: text;
display: flex;
2019-06-11 20:10:58 +02:00
align-items: center;
position: relative;
z-index: 1;
2019-11-22 22:13:00 +01:00
font-size: var(--font-small);
2020-01-02 17:30:27 +01:00
height: var(--height-input);
> .icon {
top: 0;
2019-06-11 20:10:58 +02:00
left: var(--spacing-small);
height: 100%;
position: absolute;
z-index: 1;
2019-11-22 22:13:00 +01:00
stroke: var(--color-input-placeholder);
}
}
.wunderbar--inline {
2019-09-16 07:32:02 +02:00
@extend .wunderbar;
flex: 0;
margin-right: 0;
2019-09-16 07:48:44 +02:00
fieldset-section {
width: 15rem;
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
display: none;
}
2019-09-16 07:32:02 +02:00
}
.wunderbar__active-suggestion {
2019-11-22 22:13:00 +01:00
color: var(--color-search-suggestion);
background-color: var(--color-search-suggestion-background);
}
.wunderbar__input {
width: 100%;
align-items: center;
2019-06-17 22:32:38 +02:00
min-width: 0;
overflow: hidden;
white-space: nowrap;
2019-07-21 23:31:22 +02:00
text-overflow: ellipsis;
2019-11-22 22:13:00 +01:00
height: var(--height-input);
border-radius: var(--height-input);
background-color: var(--color-input-bg);
color: var(--color-input);
2019-07-21 23:31:22 +02:00
border: none;
padding-right: var(--spacing-small);
2019-06-11 20:10:58 +02:00
padding-left: 2.5rem;
transition: all 0.2s;
&:focus {
2019-11-22 22:13:00 +01:00
border-radius: var(--border-radius);
}
}
.wunderbar__menu {
min-width: 100%;
overflow: hidden;
2019-11-22 22:13:00 +01:00
background-color: var(--color-input-bg);
margin-top: -4px;
}
.wunderbar__suggestion {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: row;
justify-items: flex-start;
2019-07-21 23:31:22 +02:00
padding: var(--spacing-small) var(--spacing-small);
&:not(:first-of-type) {
border-top: 1px solid transparent;
}
.icon {
flex-shrink: 0;
}
}
.wunderbar__suggestion-label {
overflow: hidden;
2019-07-21 23:31:22 +02:00
padding-left: var(--spacing-small);
text-overflow: ellipsis;
white-space: nowrap;
}
.wunderbar__suggestion-label--action {
2019-07-21 23:31:22 +02:00
margin-left: var(--spacing-medium);
opacity: 0.6;
white-space: nowrap;
}