mediawiki-skins-Vector/resources/skins.vector.styles/components/SearchBox.less
Jon Robson fc8513e61a Do not load CodexTypeaheadSearch styles on page load
Move CdxTypeaheadSearch out of render blocking module - it is not
needed - only CdxSearchInput is rendered by default.

Bug: T378636
Change-Id: Id4feb26f73413826cf04ec200d0d501c6b057bfc
2024-10-31 20:34:15 +00:00

27 lines
885 B
Plaintext

// Search container
// We have to put those styles outside `.skin-vector-search-vue`,
// as we can't address no-JS modern and Vue enhanced otherwise.
.vector-search-box {
font-size: @font-size-small;
// If this is a flex item, make sure it grows into available space.
flex-grow: 1;
.vector-typeahead-search-container {
max-width: @max-width-search;
margin-right: @margin-end-search;
}
}
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
// The CodexTypeaheadSearch when loaded will introduce a margin.
// To avoid a reflow of the UI, we duplicate this code here.
.client-js .cdx-typeahead-search--auto-expand-width {
margin-left: @size-search-expand;
}
.client-js & .vector-search-box.vector-search-box-auto-expand-width {
// Ensure search box is aligned with content when it autoexpands (i.e. search thumbnails)
margin-left: -@size-search-expand;
}
}