golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Merge "Use .vector-search-box-auto-expand-width class to style intermediate search components"

This commit is contained in:
jenkins-bot 2022-01-11 19:42:02 +00:00 committed by Gerrit Code Review
parent 2fa9ac3d66 72120a36a0
commit 68b2bb23d1
3 changed files with 7 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/skins.vector.styles/components/Header.less
View File

@ -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;
}
}
}
}
}

9
resources/skins.vector.styles/components/StickyHeader.less
View File

@ -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;
}
}
}

10
resources/skins.vector.styles/components/VueEnhancedSearchBox.less
View File

@ -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.