mirror of
https://github.com/discourse/discourse.git
synced 2025-10-03 17:21:20 +08:00
64f1b97e0c
This is a stripped-back version of the Search Banner component https://meta.discourse.org/t/search-banner/122939, which will be renamed to Advanced Search Banner, see https://github.com/discourse/discourse-search-banner/pull/84. This welcome banner interacts with the header search. When `search_experience` is set to `search_field`, we only show the header search after the welcome banner scrolls out of view, and vice-versa. Only new sites will get this feature turned on by default, existing sites have a migration to disable it. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com> Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
151 lines
3.1 KiB
SCSS
151 lines
3.1 KiB
SCSS
.header-search--enabled,
|
|
.search-header--visible {
|
|
.panel .header-dropdown-toggle.search-dropdown,
|
|
.panel .search-menu {
|
|
display: none;
|
|
}
|
|
|
|
.before-header-panel-outlet {
|
|
flex: 0.25 0.25 auto;
|
|
}
|
|
|
|
a.search-link {
|
|
color: var(--tertiary);
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.search-item-slug,
|
|
.keyword {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
.floating-search-input + .panel {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.floating-search-input-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.floating-search-input {
|
|
width: 60%;
|
|
|
|
.search-banner {
|
|
height: 100%;
|
|
|
|
&-inner.wrap {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0;
|
|
|
|
.search-menu {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
|
|
@media screen and (max-width: 1025px) {
|
|
width: 80%;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
width: 95%;
|
|
}
|
|
|
|
// Hide search-icon when search-context is present
|
|
.search-input .search-context ~ .search-icon {
|
|
display: none;
|
|
}
|
|
|
|
.search-input .search-context ~ #search-term {
|
|
padding-left: 0.5em;
|
|
}
|
|
|
|
.searching .extra-search-icons ~ .clear-search {
|
|
display: none;
|
|
}
|
|
|
|
.searching {
|
|
width: 3em;
|
|
justify-content: flex-end;
|
|
|
|
.show-advanced-search,
|
|
a.clear-search {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.search-icon {
|
|
background: transparent;
|
|
padding: 0.25em;
|
|
pointer-events: none;
|
|
color: var(--header_primary-medium);
|
|
margin-left: 0.3em;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.search-menu-panel {
|
|
padding: 0;
|
|
}
|
|
|
|
.search-input {
|
|
display: flex;
|
|
padding: 0 0 0 1.5em;
|
|
border-radius: var(--d-input-border-radius);
|
|
|
|
#search-term {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0.5em;
|
|
border-radius: var(--d-input-border-radius);
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.results {
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
background: var(--secondary);
|
|
border: 1px solid var(--primary-low);
|
|
padding: 0.5em;
|
|
position: relative;
|
|
box-shadow: var(--shadow-header);
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
|
|
ul.list,
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Styling for extra icons
|
|
.search-bar-icons--icon {
|
|
.d-icon {
|
|
color: var(--primary-low-mid);
|
|
}
|
|
|
|
&:hover .d-icon {
|
|
color: var(--primary-high);
|
|
}
|
|
}
|
|
}
|
