d370cc37a8
- Factor out for re-use in upcoming Shared Blocklist
- Improvements:
- Uses floating popup to show the suggestion/result rather than inline.
- Users can now press Enter to select the suggestion, instead of having to use the mouse.
- Users now don't need to enter '@' for channel names. They will still need to enter the full channel name, and disambiguate with claim_id if necessary.
- Fix jumpiness in position as the user types.
177 lines
2.7 KiB
SCSS
177 lines
2.7 KiB
SCSS
.search__header {
|
|
width: 100%;
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
.placeholder {
|
|
background-color: var(--color-placeholder-background);
|
|
}
|
|
}
|
|
|
|
.search__options {
|
|
margin-top: var(--spacing-s);
|
|
display: none;
|
|
|
|
fieldset:not(:first-child) {
|
|
margin-top: var(--spacing-m);
|
|
}
|
|
|
|
table {
|
|
line-height: 1.5;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
td:nth-of-type(1) {
|
|
width: 25%;
|
|
|
|
&:not(:first-of-type) {
|
|
width: 20%;
|
|
}
|
|
}
|
|
|
|
.claim-type-filter {
|
|
display: inline-block;
|
|
}
|
|
|
|
.close-button {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.close-button--visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
.filter-values {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.button-toggle {
|
|
margin-right: 0;
|
|
}
|
|
|
|
select {
|
|
@media (min-width: $breakpoint-small) {
|
|
min-width: 200px;
|
|
}
|
|
}
|
|
|
|
.icon--help {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.button--close {
|
|
position: unset;
|
|
align-self: center;
|
|
margin-left: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.media-types {
|
|
margin-top: var(--spacing-m);
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.radio,
|
|
.checkbox {
|
|
display: inline-block;
|
|
margin-top: 0;
|
|
|
|
&:not(:first-of-type) {
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
&:not(:first-of-type) {
|
|
margin-left: var(--spacing-m);
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.search__options--expanded {
|
|
display: block;
|
|
}
|
|
|
|
.search__legend {
|
|
font-weight: var(--font-weight-bold);
|
|
font-size: var(--font-small);
|
|
padding: var(--spacing-xxs);
|
|
}
|
|
|
|
.search__top-link {
|
|
margin-top: var(--spacing-s);
|
|
font-weight: var(--font-weight-body);
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
|
|
.search__top-links {
|
|
margin-bottom: 0;
|
|
margin-top: var(--spacing-xs);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.recommended-content__toggles {
|
|
margin-top: var(--spacing-xs);
|
|
margin-right: var(--spacing-xs);
|
|
|
|
button {
|
|
padding: 0 var(--spacing-xs);
|
|
height: 2rem;
|
|
max-width: 15rem;
|
|
}
|
|
}
|
|
|
|
.search__channel {
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
fieldset-section {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.search__channel--popup {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.search__channel--popup-results {
|
|
position: absolute;
|
|
z-index: 99;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: #21252980;
|
|
color: white;
|
|
|
|
.claim-preview__title {
|
|
color: #eff1f4;
|
|
}
|
|
|
|
.button--uri-indicator,
|
|
.media__subtitle {
|
|
color: #d8dde1;
|
|
}
|
|
|
|
.icon--help {
|
|
vertical-align: middle;
|
|
}
|
|
}
|