mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-23 10:21:40 +00:00
[Technical] Fix sticky header search input alignment when VisualEnhancementFlag is enabled
Visual changes when the flag is on Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06 More context at T322673#8383888 Bug: T322673 Change-Id: I64a47fa869247f758c6369c2e0ff8b12f87f9d9e
This commit is contained in:
parent
e60d8f6917
commit
16da6a5e6a
|
@ -10,7 +10,7 @@
|
|||
<header id="vector-sticky-header" aria-hidden="true"
|
||||
class="vector-sticky-header">
|
||||
<div class="vector-sticky-header-start">
|
||||
<div class="vector-sticky-header-icon-start mw-ui-icon-flush-left">
|
||||
<div class="vector-sticky-header-icon-start mw-ui-icon-flush-left mw-ui-icon-flush-right">
|
||||
{{#data-button-start}}
|
||||
{{>Button}}
|
||||
{{/data-button-start}}
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
@import '../../common/mixins.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
@spacing-search-title-divider: 30px;
|
||||
@font-size-sticky-header-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
|
||||
|
||||
.vector-sticky-header {
|
||||
|
@ -47,10 +48,6 @@
|
|||
&-context-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.vector-feature-visual-enhancement-next-enabled & {
|
||||
column-gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-start {
|
||||
|
@ -58,6 +55,13 @@
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
&-icon-start {
|
||||
.vector-feature-visual-enhancement-next-disabled & {
|
||||
// Override mw-ui-icon-flush-right temporarily when the flag is disabled
|
||||
margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
}
|
||||
|
||||
// Apply nowrap to title and buttons
|
||||
// Must apply to &-ccontext-bar-primary rather than &-context-bar or &-start
|
||||
// to avoid applying nowrap to the collapsed TOC menu
|
||||
|
@ -71,9 +75,16 @@
|
|||
//
|
||||
&-context-bar {
|
||||
border-left: @border-width-base @border-style-base #c8c8c8;
|
||||
margin: 0 15px;
|
||||
padding-left: 30px;
|
||||
padding-left: @spacing-search-title-divider;
|
||||
min-width: 0;
|
||||
|
||||
.vector-feature-visual-enhancement-next-disabled & {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.vector-feature-visual-enhancement-next-enabled & {
|
||||
margin-left: @spacing-search-title-divider;
|
||||
}
|
||||
}
|
||||
|
||||
&-toc-container {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
exports[`Sticky header renders 1`] = `
|
||||
"<header id=\\"vector-sticky-header\\" aria-hidden=\\"true\\" class=\\"vector-sticky-header\\">
|
||||
<div class=\\"vector-sticky-header-start\\">
|
||||
<div class=\\"vector-sticky-header-icon-start mw-ui-icon-flush-left\\">
|
||||
<div class=\\"vector-sticky-header-icon-start mw-ui-icon-flush-left mw-ui-icon-flush-right\\">
|
||||
|
||||
<button tabindex=\\"-1\\" data-event-name=\\"ui.vector-sticky-search-form.icon\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-search vector-sticky-header-search-toggle\\">
|
||||
<span>search</span>
|
||||
|
|
Loading…
Reference in a new issue