lbry-desktop/ui/scss/component/_claim-search.scss

100 lines
1.8 KiB
SCSS
Raw Normal View History

2020-11-13 21:25:18 +01:00
.claim-search__wrapper {
width: 100%;
@media (min-width: $breakpoint-small) {
width: auto;
}
}
.claim-search__menus {
display: flex;
2020-11-13 21:25:18 +01:00
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m);
padding-bottom: var(--spacing-s);
margin-top: var(--spacing-m);
2020-11-13 21:25:18 +01:00
margin-bottom: var(--spacing-m);
color: var(--color-text-subtitle);
2020-11-13 21:25:18 +01:00
align-items: flex-start;
2020-11-13 21:25:18 +01:00
@media (min-width: $breakpoint-small) {
flex-direction: row;
}
}
.claim-search__dropdown {
2020-06-01 19:03:19 +02:00
padding: 0 var(--spacing-m);
2020-11-13 21:25:18 +01:00
padding-right: var(--spacing-l);
font-size: var(--font-body);
background-color: var(--color-card-background);
}
.claim-search__dropdown--selected {
2020-10-05 20:54:51 +02:00
background-color: var(--color-input-bg-selected);
}
2020-05-11 16:50:32 +02:00
.claim-search__input-container {
2020-05-21 17:38:28 +02:00
display: flex;
flex-direction: column;
font-size: var(--font-body);
2020-11-13 21:25:18 +01:00
width: 100%;
2020-05-21 17:38:28 +02:00
&:not(:first-of-type) {
2020-11-13 21:25:18 +01:00
margin-top: var(--spacing-s);
}
2020-05-21 17:38:28 +02:00
2020-11-13 21:25:18 +01:00
@media (min-width: $breakpoint-small) {
width: auto;
2020-05-21 17:38:28 +02:00
&:not(:first-of-type) {
2020-11-13 21:25:18 +01:00
margin-top: 0;
padding-left: var(--spacing-m);
}
}
}
2020-11-13 21:25:18 +01:00
.claim-search__filter-button {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.claim-search__input-special {
font-weight: var(--font-weight-bold);
}
2020-05-11 16:50:32 +02:00
.claim-search__extra {
display: flex;
align-items: center;
}
.claim-search__top {
display: flex;
flex-wrap: wrap;
2020-11-13 21:25:18 +01:00
justify-content: space-between;
@media (min-width: $breakpoint-small) {
justify-content: flex-start;
}
}
2020-05-11 16:50:32 +02:00
.claim-search__top > div {
@media (max-width: $breakpoint-small) {
2020-08-21 17:49:13 +02:00
margin-bottom: var(--spacing-xxs);
}
}
2020-11-13 21:25:18 +01:00
.claim-search__menu-group {
2020-05-11 21:54:07 +02:00
display: flex;
flex-wrap: nowrap;
2020-11-13 21:25:18 +01:00
&:last-of-type {
.button-toggle:last-of-type {
margin-right: 0;
}
}
2020-05-11 16:50:32 +02:00
}