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

111 lines
2 KiB
SCSS
Raw Normal View History

.wunderbar {
2019-08-21 22:54:44 +02:00
flex: 1;
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);
2020-07-24 22:08:31 +02:00
max-width: 20rem;
@media (max-width: $breakpoint-small) {
max-width: none;
}
> .icon {
top: 0;
2020-06-01 19:03:19 +02:00
left: var(--spacing-s);
height: 100%;
position: absolute;
z-index: 1;
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) {
margin: var(--spacing-xxs) 0;
2019-12-18 06:27:08 +01:00
}
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;
2020-06-01 19:03:19 +02:00
padding-right: var(--spacing-s);
2019-06-11 20:10:58 +02:00
padding-left: 2.5rem;
transition: all 0.2s;
-webkit-app-region: no-drag;
2019-06-11 20:10:58 +02:00
&:focus {
2019-11-22 22:13:00 +01:00
border-radius: var(--border-radius);
}
}
.wunderbar__input--inline {
@extend .wunderbar__input;
@media (max-width: $breakpoint-small) {
position: absolute;
top: 0;
}
}
.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;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s) var(--spacing-s);
&:not(:first-of-type) {
border-top: 1px solid transparent;
}
.icon {
flex-shrink: 0;
}
}
.wunderbar__suggestion-label {
overflow: hidden;
2020-06-01 19:03:19 +02:00
padding-left: var(--spacing-s);
text-overflow: ellipsis;
white-space: nowrap;
}
.wunderbar__suggestion-label--action {
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-m);
2019-07-21 23:31:22 +02:00
opacity: 0.6;
white-space: nowrap;
}