dotty_res.styles.theme.components.api-filters.css Maven / Gradle / Ivy
#content .documentableFilter {
display: flex;
flex-wrap: wrap;
z-index: 1;
row-gap: calc(2 * var(--base-spacing));
position: sticky;
top: var(--header-height);
padding: calc(2 * var(--base-spacing)) 0;
padding-left: 28px;
margin-bottom: calc(3 * var(--base-spacing));
margin-left: -28px;
background-color: var(--background-main);
}
.filtersContainer {
display: flex;
flex-wrap: wrap;
row-gap: calc(2 * var(--base-spacing));
}
.filterableInput {
background-color: var(--background-main);
color: var(--action-primary-content-active);
background-image: url("../../../images/icon-buttons/search/dark/default.svg");
background-repeat: no-repeat;
padding: calc(2 * var(--base-spacing)) calc(2 * var(--base-spacing))
calc(2 * var(--base-spacing)) calc(5 * var(--base-spacing));
border-radius: 4px;
background-size: 16px;
background-position: 10px 15px;
border: none;
}
.filterableInput:focus-visible {
border: none;
outline: none;
}
.filterableInput::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1em;
width: 1em;
background: url("../../../images/icon-buttons/close/light/default.svg")
no-repeat 50% 50%;
background-size: contain;
opacity: 0;
pointer-events: none;
}
.theme-dark .filterableInput::-webkit-search-cancel-button {
background: url("../../../images/icon-buttons/close/dark/default.svg")
no-repeat 50% 50%;
}
.filterableInput:focus::-webkit-search-cancel-button {
opacity: 1;
pointer-events: all;
}
.filterableInput.dark::-webkit-search-cancel-button {
filter: invert(1);
}