@import '../../common/variables.less'; /** * Minimal styling for initial no-JS server-rendered * search form, which gets replaced by WVUI on focus. * Most values are hard-coded since they aim to * mimic WVUI-specific variables and disable the * ResourceLoader LESS transformation of `calc`. */ // Derived from @size-base in WVUI // https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#7 @size-base: unit( 32px / @font-size-browser / @font-size-base, em ); @min-size-search-button: 30px; @background-size-x-search-button: unit( 20px / @font-size-browser / @font-size-base, em ); // 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 { // Use Vector's base font-size, as this is a component outside of `.vector-body`. font-size: @font-size-base; // Support IE 9-11, Trident cuts values 2 digits after decimal point. // `calc` enables to set correct calculation in place again. See T102364. font-size: @font-size-base--trident-hack; // If this is a flex item, make sure it grows into available space. flex-grow: 1; > div { max-width: @max-width-search; } } // Typeahead search elements .vector-search-box-vue .vector-search-box-input, .vector-search-box-vue .searchButton { // Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less font-size: inherit; } .vector-search-box-vue .vector-search-box-input { height: @size-base; } .vector-search-box-vue .searchButton { background-size: @background-size-x-search-button auto; } // Only apply the following WVUI-related rules to clients who have js enabled. .client-js .vector-search-box-vue { // Derived from @size-search-figure in WVUI // https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#21 @size-search-figure: unit( 36px / @font-size-browser / @font-size-base, em ); .wvui-typeahead-search__suggestion, .wvui-typeahead-search__suggestions__footer { // Remove link underline on hover that is applied by mediawiki.skinning/elements.css. text-decoration: none; } .wvui-typeahead-search__suggestions li { // Remove margin-bottom on li elements that is applied by mediawiki.skinning/elements.css. margin-bottom: 0; } .vector-search-box-input { padding-left: @size-search-figure; // Derived from @padding-input-text in WVUI's Input component. padding-right: 8px; } // Move & resize search icon to match WVUI. .searchButton { // T270202: Act like a an inert element instead of a submit button before // WVUI loads to discourage people clicking on it since it is a submit // button styled to look like WVUI's inert start icon. Note, ideally these // submit buttons should be changed to inert elements like span to be // semantically correct. pointer-events: none; // Override the default right & left position of the icon. right: auto; top: 0; bottom: 0; // Accounts for the 1px input border. Derived from // https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/input/Input.vue#163 left: @border-width-base; // Increase size to match WVUI. width: @size-search-figure; } // Reset WVUI. Prevents the input border from animating // when it gets inserted into the DOM while being focused. .wvui-input__input:not( [ disabled ] ) { transition: none; } &.vector-search-box-show-thumbnail { > div { // Ensure the input + search button = 500px when unfocused and `auto-expand-width` enabled (i.e. search in header) // Also increases the width of the sticky header search, which has `auto-expand-width` disabled max-width: @max-width-search + unit( @size-search-expand / @font-size-browser / @font-size-base, em ); // 37.42857143em @ 16 & 0.875em } &.vector-search-box-auto-expand-width .searchButton { // Accounts for the margin that allocates space for the input expanding and // 1px input border. left: @size-search-expand + @border-width-base; } &.vector-search-box-auto-expand-width .vector-search-box-input { margin-left: @size-search-expand; width: ~'calc( 100% - @{size-search-expand} )'; } // Recreate WVUI expanding input. &:not( .vector-search-box-auto-expand-width ) .vector-search-box-input, &.vector-search-box-auto-expand-width .vector-search-box-input:focus { margin-left: 0; // Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation. padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )'; width: 100%; } // Reposition search icon for expanded input. &:not( .vector-search-box-auto-expand-width ) .vector-search-box-input ~ .searchButton, &.vector-search-box-auto-expand-width .vector-search-box-input:focus ~ .searchButton { // Derived from // https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655 // (12px of space between the border and the icon) with 1px to account for the focused input border. @space-icon-start: @size-search-expand / 2; left: @space-icon-start + @border-width-base; } } }