jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove unneeded expansion styles from search box code 

Input expansion behavior has been changed in Codex to expand
the input when the menu opens, instead of when the input is
focused. This patch removes styles targeting the server-
rendered search box that mimicked the expansion behavior
on initial focus to ease the transition between the server-
rendered version and the Vue version.

Bug: T312594
Change-Id: Id716860f52df7585c068a7927bf799129faf4ad3
This commit is contained in:
Anne Tomasevich 2022-09-01 15:33:15 -04:00
parent b0b58915d4
commit eec6d5f608
1 changed files with 0 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -163,26 +163,5 @@
margin-left: @size-search-expand;
width: ~'calc( 100% - @{size-search-expand} )';
}
// Recreate Codex 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( @{padding-left-start-icon} + @{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 @spacing-start-typeahead-icon in Codex
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/typeahead-search/TypeaheadSearch.vue#708
@spacing-start-typeahead-icon: 22px;
// Codex uses left: @spacing-start-typeahead-icon, but we have to account for the fact
// that we made the search button wider and centered the icon in it
@size-icon-px: 20px;
left: @spacing-start-typeahead-icon - ( @padding-left-start-icon - @size-icon-px ) / 2;
}
}
}