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

291 lines
5.4 KiB
SCSS
Raw Normal View History

2020-12-03 18:29:47 +01:00
.wunderbar__wrapper {
2019-08-21 22:54:44 +02:00
flex: 1;
2020-12-03 18:29:47 +01:00
max-width: 30rem;
margin-left: var(--spacing-s);
margin-right: var(--spacing-s);
}
2020-12-11 19:33:27 +01:00
.wunderbar__wrapper--mobile {
margin: 0;
border-bottom: 1px solid var(--color-border);
height: var(--header-height);
display: flex;
align-items: center;
width: 100%;
.wunderbar {
flex: 1;
}
.wunderbar__input {
font-size: 16px; // https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
background-color: transparent;
color: var(--color-text);
border-radius: 0;
margin-right: var(--spacing-l);
&:focus {
box-shadow: none;
}
}
}
2020-12-03 18:29:47 +01:00
.wunderbar {
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-12-11 19:33:27 +01:00
padding-left: var(--spacing-s);
> .icon {
top: 0;
2020-12-11 19:33:27 +01:00
left: var(--spacing-m);
height: 100%;
position: absolute;
z-index: 1;
stroke: var(--color-input-placeholder);
}
2020-12-11 19:33:27 +01:00
@media (min-width: $breakpoint-small) {
padding: 0;
}
}
.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__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;
}
}
2020-12-03 18:29:47 +01:00
.wunderbar__suggestions {
z-index: 3;
position: absolute;
left: 0;
right: 0;
top: calc(var(--header-height) - (var(--height-input)) + 3px);
@extend .card;
box-shadow: var(--card-box-shadow);
border-top-right-radius: 0;
border-top-left-radius: 0;
border-top: none;
2020-12-16 17:00:02 +01:00
padding-top: var(--spacing-xs);
2020-12-03 18:29:47 +01:00
margin: 0 var(--spacing-s);
}
2020-12-11 19:33:27 +01:00
.wunderbar__suggestions--mobile {
top: calc(var(--header-height) - var(--spacing-xs));
margin-top: var(--spacing-m);
padding: 0;
overflow: visible;
}
2020-12-03 18:29:47 +01:00
.wunderbar__top-claim {
margin-bottom: var(--spacing-m);
}
.wunderbar__label {
margin-bottom: var(--spacing-xs);
2020-12-11 19:33:27 +01:00
margin-left: var(--spacing-m);
2020-12-03 18:29:47 +01:00
}
.wunderbar__top-separator {
margin: var(--spacing-s) 0;
2020-12-11 19:33:27 +01:00
width: 100%;
}
.wunderbar__suggestion {
display: flex;
2020-12-03 18:29:47 +01:00
align-items: center;
2020-12-11 19:33:27 +01:00
padding: var(--spacing-s) 0;
margin-left: var(--spacing-m);
2020-12-03 18:29:47 +01:00
.media__thumb {
flex-shrink: 0;
2020-12-11 19:33:27 +01:00
$width: 5rem;
2020-12-03 18:29:47 +01:00
@include handleClaimListGifThumbnail($width);
width: $width;
height: calc(#{$width} * (9 / 16));
margin-right: var(--spacing-s);
2020-12-11 19:33:27 +01:00
}
2020-12-11 19:33:27 +01:00
@media (min-width: $breakpoint-small) {
margin-left: var(--spacing-s);
}
2020-12-03 18:29:47 +01:00
}
2020-12-03 18:29:47 +01:00
.wunderbar__suggestion--channel {
.channel-thumbnail {
@include handleChannelGif(calc(5rem * 9 / 16));
margin-right: var(--spacing-xs);
@media (min-width: $breakpoint-small) {
@include handleChannelGif(calc(5rem * 9 / 16));
margin-right: var(--spacing-s);
}
}
}
.wunderbar__suggestion-label {
2020-12-03 18:29:47 +01:00
font-size: var(--font-small);
min-width: 0;
white-space: nowrap;
}
.wunderbar__suggestion-title {
overflow: hidden;
text-overflow: ellipsis;
}
2020-12-03 18:29:47 +01:00
.wunderbar__suggestion-name {
@extend .help;
margin-top: 0;
}
.wunderbar__more-results {
margin-top: var(--spacing-xs);
2020-12-30 23:16:06 +01:00
margin-left: var(--spacing-s);
2020-12-11 19:33:27 +01:00
margin-bottom: var(--spacing-l);
2020-12-16 17:00:02 +01:00
.button {
padding: var(--spacing-s);
}
2020-12-11 19:33:27 +01:00
@media (min-width: $breakpoint-small) {
2021-04-13 06:30:39 +02:00
margin-bottom: var(--spacing-xs);
2020-12-11 19:33:27 +01:00
}
2020-12-03 18:29:47 +01:00
}
.wunderbar__placeholder-suggestion {
2020-12-11 19:33:27 +01:00
margin-bottom: var(--spacing-s);
@media (min-width: $breakpoint-small) {
padding-left: 0;
2020-12-11 19:33:27 +01:00
}
}
.wunderbar__placeholder-label {
width: 30%;
height: 1rem;
margin-top: var(--spacing-xs);
@include placeholder;
}
.wunderbar__placeholder-thumbnail {
width: 3rem;
height: 3rem;
@include placeholder;
}
.wunderbar__placeholder-info {
width: 50%;
height: 3rem;
margin-left: var(--spacing-s);
@include placeholder;
}
2020-12-11 19:33:27 +01:00
.wunderbar__mobile-search {
@extend .button--alt;
@extend .header__navigation-item--icon;
padding: var(--spacing-xs);
2021-04-26 21:19:17 +02:00
margin-right: var(--spacing-m);
2020-12-11 19:33:27 +01:00
.button__label {
color: var(--color-input-placeholder);
opacity: 0.4;
}
@media (max-width: $breakpoint-small) {
&:focus {
box-shadow: none;
}
}
}
2021-04-13 06:30:39 +02:00
.wunderbar__tag-search {
.tag {
display: flex;
align-items: center;
height: 1.2rem;
margin-left: var(--spacing-xxs);
&:hover {
background-color: var(--color-tag-bg);
color: var(--color-tag);
}
}
}
.wunderbar__bottom-links {
display: flex;
align-items: center;
:first-child {
flex: 1;
}
}
2020-12-11 19:33:27 +01:00
[data-reach-combobox-option] {
padding: 0;
2020-12-03 18:29:47 +01:00
border-radius: var(--border-radius);
&:hover {
background-color: var(--color-menu-background--active);
}
2020-12-16 17:00:02 +01:00
@media (min-width: $breakpoint-small) {
margin-left: var(--spacing-xs);
margin-right: var(--spacing-xs);
}
2020-12-03 18:29:47 +01:00
}
[data-reach-combobox-option][data-highlighted] {
background-color: var(--color-menu-background--active);
}
[data-reach-combobox-option][aria-selected='true'] {
&:hover {
background-color: var(--color-menu-background--active);
}
}