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; 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 ) { @media ( min-width: @width-breakpoint-desktop ) {
@margin-start-search: 40px; @margin-start-search: 40px;
@ -60,7 +51,7 @@
max-width: @max-width-search; 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 margin-left: unit( ( @margin-start-search - @size-search-expand ) / @font-size-browser / @font-size-base, em ); // 1.14285714em @ 16 & 0.875em
> div { > div {
@ -96,16 +87,6 @@
.wvui-typeahead-search__wrapper { .wvui-typeahead-search__wrapper {
position: static; 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; 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 { .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 // Accounts for the margin that allocates space for the input expanding and
// 1px input border. // 1px input border.
left: @size-search-expand + @border-width-base; 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; margin-left: @size-search-expand;
width: ~'calc( 100% - @{size-search-expand} )'; width: ~'calc( 100% - @{size-search-expand} )';
} }
// Recreate WVUI expanding input. // 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; margin-left: 0;
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation. // Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )'; padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )';
@ -113,7 +114,8 @@
} }
// Reposition search icon for expanded input. // 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 // Derived from
// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655 // 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. // (12px of space between the border and the icon) with 1px to account for the focused input border.