diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less index f345d72..4a38f0b 100644 --- a/resources/skins.vector.styles/components/Header.less +++ b/resources/skins.vector.styles/components/Header.less @@ -32,15 +32,6 @@ flex-grow: 1; } - // Allocate space for the extra width of the input when the search component - // has thumbnails. - // - // FIXME: This can be removed when WVUI in core has been upgraded to use the - // `.wvui-typeahead-search--auto-expand-width` class. - .wvui-typeahead-search--show-thumbnail:not( .wvui-typeahead-search--auto-expand-width ) { - margin-left: @size-search-expand; - } - @media ( min-width: @width-breakpoint-desktop ) { @margin-start-search: 40px; @@ -60,7 +51,7 @@ max-width: @max-width-search; } - &.vector-search-box-show-thumbnail { + &.vector-search-box-auto-expand-width { margin-left: unit( ( @margin-start-search - @size-search-expand ) / @font-size-browser / @font-size-base, em ); // 1.14285714em @ 16 & 0.875em > div { @@ -96,16 +87,6 @@ .wvui-typeahead-search__wrapper { position: static; } - - // Position the start of suggestion list at the start of the input. - // - // FIXME: This can be removed when WVUI in core has been upgraded to use - // the `.wvui-typeahead-search--auto-expand-width` class. - .wvui-typeahead-search--show-thumbnail:not( .wvui-typeahead-search--auto-expand-width ) { - .wvui-typeahead-search__suggestions { - left: 0; - } - } } } } diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less index d77f5aa..c790fa3 100644 --- a/resources/skins.vector.styles/components/StickyHeader.less +++ b/resources/skins.vector.styles/components/StickyHeader.less @@ -126,15 +126,6 @@ color: @colorGray2; } } - - // Allocate space for the extra width of the input when the search component - // has thumbnails. - // - // FIXME: This can be removed when WVUI in core has been upgraded - // to use the `.wvui-typeahead-search--full-width` class. - .wvui-typeahead-search--show-thumbnail:not( .wvui-typeahead-search--full-width ) { - margin-left: @size-search-expand; - } } } diff --git a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less index 19ee08a..6429651 100644 --- a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less +++ b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less @@ -93,19 +93,20 @@ } .vector-search-box-show-thumbnail { - .searchButton { + &.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-input { + &.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. - .vector-search-box-input:focus { + &: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} )'; @@ -113,7 +114,8 @@ } // Reposition search icon for expanded input. - .vector-search-box-input:focus ~ .searchButton { + &: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.