Merge "Set header height to 54px equivalent in `em`s"

This commit is contained in:
jenkins-bot 2019-07-22 19:03:53 +00:00 committed by Gerrit Code Review
commit a9f6d67d3c
3 changed files with 8 additions and 4 deletions

View File

@ -14,6 +14,8 @@
*/ */
@fontFamilySans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif; @fontFamilySans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@fontFamilyBase: @fontFamilySans; @fontFamilyBase: @fontFamilySans;
@fontSizeBrowserDefault: 16; // Assumed browser default of `16px`.
@tocFontSize: 0.8em; @tocFontSize: 0.8em;
@indicatorFontSize: 0.4em; @indicatorFontSize: 0.4em;
@ -44,7 +46,8 @@
@contentMargin: 16px; @contentMargin: 16px;
// Header // 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 @headerMarginTop: -1px; // used to hide the header border top when a banner is not present
@searchBoxWidth: 375/16em; @searchBoxWidth: 375/16em;
@iconSizeTotal: @iconSize + @iconGutterWidth + @iconGutterWidth; @iconSizeTotal: @iconSize + @iconGutterWidth + @iconGutterWidth;

View File

@ -25,7 +25,7 @@
} }
.overlay-header .overlay-title { .overlay-header .overlay-title {
padding: 0.15em 0; padding: @headerVerticalPadding 0;
&:last-child { &:last-child {
// Reserve space to the right in case the search form in the header or // Reserve space to the right in case the search form in the header or

View File

@ -11,9 +11,10 @@
.clear { .clear {
position: absolute; 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; right: 0;
margin-top: @headerMarginTop;
} }
} }