fix(header): update box shadow to match MD spec (#16149)

ionic-team · Oct 30, 2018 · 00544e9 · 00544e9
1 parent b2f493f
commit 00544e9
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 12 deletions.
diff --git a/core/src/components/footer/footer.md.scss b/core/src/components/footer/footer.md.scss
@@ -1,19 +1,20 @@
 @import "./footer";
+@import "./footer.md.vars";
 
 // Material Design Footer
 // --------------------------------------------------
 
 .footer-md::before {
-  // using datauri png background image for improved scroll performance
-  // rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);`
-  // noticable performance difference on older Android devices
-  @include position(-2px, null, auto, 0);
+  // Using a datauri png background image for improved scroll
+  // performance rather than using a box-shadow. There is a
+  // noticeable performance difference on older Android devices.
+  @include position(-$footer-md-box-shadow-height, null, auto, 0);
   @include background-position(start, 0, top, 0);
 
   position: absolute;
 
   width: 100%;
-  height: 2px;
+  height: $footer-md-box-shadow-height;
 
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==");
   background-repeat: repeat-x;

diff --git a/core/src/components/footer/footer.md.vars.scss b/core/src/components/footer/footer.md.vars.scss
@@ -0,0 +1,7 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Footer
+// --------------------------------------------------
+
+/// @prop - Height of the footer box shadow
+$footer-md-box-shadow-height:                    2px !default;
diff --git a/core/src/components/header/header.md.scss b/core/src/components/header/header.md.scss
@@ -1,21 +1,22 @@
 @import "./header";
+@import "./header.md.vars";
 
 // Material Design Header
 // --------------------------------------------------
 
 .header-md::after {
-  // using datauri png background image for improved scroll performance
-  // rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);`
-  // noticable performance difference on older Android devices
-  @include position(null, null, -5px, 0);
-  @include background-position(start, 0, top, -2px);
+  // Using a datauri png background image for improved scroll
+  // performance rather than using a box-shadow. There is a
+  // noticeable performance difference on older Android devices.
+  @include position(null, null, -$header-md-box-shadow-height, 0);
+  @include background-position(start, 0, top, 0);
 
   position: absolute;
 
   width: 100%;
-  height: 5px;
+  height: $header-md-box-shadow-height;
 
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==");
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAIBAMAAAACWGKkAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAAB3RSTlMFTEIzJBcOYhQUIwAAAB9JREFUCNdjEIQCBiUoYDCGAgYXKGAIhQKGNChgwAAAorMLKSCkL40AAAAASUVORK5CYII=");
   background-repeat: repeat-x;
 
   content: "";

diff --git a/core/src/components/header/header.md.vars.scss b/core/src/components/header/header.md.vars.scss
@@ -0,0 +1,7 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Header
+// --------------------------------------------------
+
+/// @prop - Height of the header box shadow
+$header-md-box-shadow-height:                    8px !default;
diff --git a/core/src/components/toolbar/test/spec/e2e.ts b/core/src/components/toolbar/test/spec/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('toolbar: spec', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toolbar/test/spec'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/toolbar/test/spec/index.html b/core/src/components/toolbar/test/spec/index.html
@@ -0,0 +1,60 @@
+@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Toolbar - Spec</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="download"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="print"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="bookmark"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-title>Standard</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="content">
+      <div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>