feat(toolbar): add attributes to hide all borders and box shadows

closes #7237
ionic-team · Jul 8, 2016 · 88b637b · 88b637b
1 parent d01ee4b
commit 88b637b
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 26 deletions.
diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss
@@ -69,6 +69,11 @@ ion-footer .toolbar:last-child .toolbar-background,
   border-bottom-width: 0;
 }
 
+.toolbar[no-border] .toolbar-background {
+  border-top-width: 0;
+  border-bottom-width: 0;
+}
+
 
 // iOS Toolbar Content
 // --------------------------------------------------

diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss
@@ -29,6 +29,25 @@ $toolbar-md-button-border-radius:        2px !default;
 $navbar-md-height:                       $toolbar-md-height !default;
 
 
+.toolbar {
+  padding: $toolbar-md-padding;
+
+  min-height: $toolbar-md-height;
+}
+
+
+// Material Design Toolbar Background
+// --------------------------------------------------
+
+.toolbar-background {
+  border-color: $toolbar-md-border-color;
+  background: $toolbar-md-background;
+}
+
+
+// Material Design Header / Footer / Tabs Box Shadow
+// --------------------------------------------------
+
 ion-header::after,
 [tabsPlacement="top"] > ion-tabbar::after,
 ion-footer::before,
@@ -60,22 +79,13 @@ ion-footer::before,
   background-position: 0 0;
 }
 
-.toolbar {
-  padding: $toolbar-md-padding;
-
-  min-height: $toolbar-md-height;
-}
-
-
-// Material Design Toolbar Background
-// --------------------------------------------------
-
-.toolbar-background {
-  border-color: $toolbar-md-border-color;
-  background: $toolbar-md-background;
+ion-header[no-shadow]::after,
+ion-footer[no-shadow]::before,
+[tabsPlacement="top"][no-shadow] > ion-tabbar::after,
+[tabsPlacement="bottom"][no-shadow] > ion-tabbar::before {
+  display: none;
 }
 
-
 // Material Design Toolbar Content
 // --------------------------------------------------
 

diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts
@@ -114,22 +114,56 @@ export class ToolbarBase extends Ion {
  * | `right`     | Positions element to the right of all other elements.                                                           |
  *
  *
- * ### Multiple Toolbars
+ * ### Header / Footer Box Shadow
+ * In `md` mode, the `ion-header` will receive a box-shadow on the bottom, and the
+ * `ion-footer` will receive a box-shadow on the top. This can be removed by adding
+ * the `no-shadow` attribute to the element.
+ *
+ * ```html
+ * <ion-header no-shadow>
+ *   <ion-toolbar>
+ *     <ion-title>Header</ion-title>
+ *   </ion-toolbar>
+ * </ion-header>
+ *
+ * <ion-content>
+ * </ion-content>
+ *
+ * <ion-footer no-shadow>
+ *   <ion-toolbar>
+ *     <ion-title>Footer</ion-title>
+ *   </ion-toolbar>
+ * </ion-footer>
+ * ```
+ *
+ * ### Toolbar Borders
  * Toolbars can be stacked up vertically in `<ion-header>`, `<ion-content>`, and
- * `<ion-footer>` elements. However, toolbars also come with borders on both
- * the top and bottom of the toolbar. To give developers full control of the
- * design, Ionic also includes the `no-border-bottom` and `no-border-top` attributes.
- * For example, sometimes two vertically stacked toolbars may have different
- * background colors, in this case it might be best to leave a border between them.
- * However, if they have the same background color, the app may look best without
- * a border between them. The main point here is, it's entirely up to the app's design
- * to decide when and when not to show borders between toolbars, and to do so then
- * each toolbar can individually set `no-border-bottom` and `no-border-top` attributes.
+ * `<ion-footer>` elements. In `ios` mode, toolbars have borders on the top and
+ * bottom. To hide both borders, the `no-border` attribute should be used on the
+ * `ion-toolbar`. To hide the top or bottom border, the `no-border-top` and
+ * `no-border-bottom` attribute should be used.
+ *
+ * ```html
+ * <ion-header no-shadow>
+ *   <ion-toolbar no-border-bottom>
+ *     <ion-title>Header</ion-title>
+ *   </ion-toolbar>
+ *   <ion-toolbar no-border>
+ *     <ion-title>Subheader</ion-title>
+ *   </ion-toolbar>
+ *   <ion-toolbar no-border-top>
+ *     <ion-title>Another Header</ion-title>
+ *   </ion-toolbar>
+ * </ion-header>
+ *
+ * <ion-content>
+ * </ion-content>
+ * ```
  *
  *
  * @usage
  * ```html
- * <ion-header>
+ * <ion-header no-shadow>
  *
  *   <ion-toolbar no-border-bottom>
  *     <ion-buttons start>
@@ -161,7 +195,7 @@ export class ToolbarBase extends Ion {
  *
  * <ion-footer>
  *
- *   <ion-toolbar no-border-bottom>
+ *   <ion-toolbar no-border>
  *     <ion-title>I'm a subfooter</ion-title>
  *     <ion-buttons right>
  *       <button>