From eec6d5f608a435c37ff2eae6b5034c03cdeaaa90 Mon Sep 17 00:00:00 2001 From: Anne Tomasevich Date: Thu, 1 Sep 2022 15:33:15 -0400 Subject: [PATCH] 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 --- .../components/VueEnhancedSearchBox.less | 21 ------------------- 1 file changed, 21 deletions(-) diff --git a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less index 22cafd0f..cedc6d9d 100644 --- a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less +++ b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less @@ -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; - } } }