From 4a5561257cfe67cebf3a187a4caf91837699d94d Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Thu, 18 Jul 2019 08:27:18 -0700 Subject: [PATCH] Set header height to 54px equivalent in `em`s Same patch as I4eed89f6a64eeb369c1ab0bb47f0462de7b0ceb3 but destination is `em`s. Bug: T195795 Change-Id: I1165f1e3f6fe1b86f843c2acb7a87681eda3aec6 --- minerva.less/minerva.variables.less | 5 ++++- skinStyles/mobile.startup/Overlay.less | 2 +- skinStyles/mobile.startup/search/SearchOverlay.less | 5 +++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/minerva.less/minerva.variables.less b/minerva.less/minerva.variables.less index 6146182..bbdfc8b 100644 --- a/minerva.less/minerva.variables.less +++ b/minerva.less/minerva.variables.less @@ -14,6 +14,8 @@ */ @fontFamilySans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif; @fontFamilyBase: @fontFamilySans; + +@fontSizeBrowserDefault: 16; // Assumed browser default of `16px`. @tocFontSize: 0.8em; @indicatorFontSize: 0.4em; @@ -44,7 +46,8 @@ @contentMargin: 16px; // Header -@headerHeight: 3.35em; +@headerHeight: unit( 54 / @fontSizeBrowserDefault, em ); +@headerVerticalPadding: 0.15em; @headerMarginTop: -1px; // used to hide the header border top when a banner is not present @searchBoxWidth: 375/16em; @iconSizeTotal: @iconSize + @iconGutterWidth + @iconGutterWidth; diff --git a/skinStyles/mobile.startup/Overlay.less b/skinStyles/mobile.startup/Overlay.less index e5f8775..ac7119e 100644 --- a/skinStyles/mobile.startup/Overlay.less +++ b/skinStyles/mobile.startup/Overlay.less @@ -25,7 +25,7 @@ } .overlay-header .overlay-title { - padding: 0.15em 0; + padding: @headerVerticalPadding 0; &:last-child { // Reserve space to the right in case the search form in the header or diff --git a/skinStyles/mobile.startup/search/SearchOverlay.less b/skinStyles/mobile.startup/search/SearchOverlay.less index 70d532b..d6cd7fd 100644 --- a/skinStyles/mobile.startup/search/SearchOverlay.less +++ b/skinStyles/mobile.startup/search/SearchOverlay.less @@ -11,9 +11,10 @@ .clear { position: absolute; - top: ( @headerHeight / 2 ) - ( @iconSize / 2 ); + // the icon should take into account overlay-title top padding + // and then be centered + top: ( @iconSize / 2 ) + @headerVerticalPadding; right: 0; - margin-top: @headerMarginTop; } }