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

Fixes for sticky header: 

- Make page title width fill container.
- Remove page title fadeout, replace with ellipsis.
- Prevent language button contents from wrapping.

Bug: T298885
Bug: T300036
Bug: T298887
Change-Id: I6b09f89ed89a9da7406cdf8b3a00698a9dd66d10
This commit is contained in:
Clare Ming 2022-02-03 13:29:41 -07:00
parent 99294ce088
commit 19e5d2885a
2 changed files with 4 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/skins.vector.styles/components/LanguageButton.less
View File

@ -102,6 +102,7 @@
@arrow-width: 18px;
position: relative;
padding-right: calc( @button-padding + @arrow-width );
white-space: nowrap;
&:after {
content: '';

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

@ -58,7 +58,7 @@
}
&-start {
flex-grow: 1;
min-width: 0;
}
//
@ -69,30 +69,15 @@
margin: 0 15px;
padding-left: 30px;
white-space: nowrap;
min-width: 0;
}
&-context-bar-primary {
position: relative;
max-width: 500px;
overflow: hidden;
padding-right: 10px;
font-family: @font-family-serif;
// T296320 closest standardized option to 22px (24px)
font-size: @font-size-heading-2;
// T289814 Fade out page titles longer than 500px.
/* Stylelint rule broken for vendor prefixes: https://github.com/stylelint/stylelint/issues/1939 */
/* stylelint-disable function-linear-gradient-no-nonstandard-direction */
&:after {
content: '';
position: absolute;
left: 480px;
width: 100%;
height: 100%;
background-color: transparent;
background-image: -webkit-linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 20px );
background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 20px );
}
text-overflow: ellipsis;
}
.vector-search-box {