refactor(content): add ion-fixed component and move from content

packages/core/src/components/content/content.scss

@@ -62,24 +62,6 @@ ion-content.has-refresher ion-scroll {
   background-color: inherit;
 }
 
-// Fixed Content (ion-fixed and ion-fab)
-// --------------------------------------------------
-
-.fixed-content {
-  @include position(0, 0, 0, 0);
-
-  position: absolute;
-  display: block;
-}
-
-[ion-fixed] {
-  position: absolute;
-
-  z-index: $z-index-fixed-content;
-
-  transform: translateZ(0);
-}
-
 
 // Content Padding
 // --------------------------------------------------

packages/core/src/components/content/content.tsx

@@ -1,6 +1,6 @@
 import { Component, h, Ionic, Prop } from '@stencil/core';
 import { createThemedClasses } from '../../utils/theme';
-import { getParentElement } from '../../utils/helpers';
+import { getParentElement, getToolbarHeight } from '../../utils/helpers';
 import { Scroll } from '../scroll/scroll-interface';
 import { ScrollDetail } from '../../utils/interfaces';
 
@@ -112,23 +112,3 @@ export class Content {
     );
   }
 }
-
-
-function getToolbarHeight(toolbarTagName: string, pageChildren: HTMLElement[], mode: string, iosHeight: string, defaultHeight: string) {
-  for (var i = 0; i < pageChildren.length; i++) {
-    if (pageChildren[i].tagName === toolbarTagName) {
-      var headerHeight = pageChildren[i].getAttribute(`${mode}-height`);
-      if (headerHeight) {
-        return headerHeight;
-      }
-
-      if (mode === 'ios') {
-        return iosHeight;
-      }
-
-      return defaultHeight;
-    }
-  }
-
-  return '';
-}

packages/core/src/components/fixed/fixed.scss

@@ -0,0 +1,19 @@
+@import "../../themes/ionic.globals";
+
+// Fixed Content (ion-fixed)
+// --------------------------------------------------
+
+ion-fixed {
+  @include position(0, 0, 0, 0);
+
+  position: absolute;
+  display: block;
+}
+
+[ion-fixed] {
+  position: absolute;
+
+  z-index: $z-index-fixed-content;
+
+  transform: translateZ(0);
+}

packages/core/src/components/fixed/fixed.tsx

@@ -0,0 +1,34 @@
+import { Component, h, Ionic, VNodeData } from '@stencil/core';
+import { getParentElement, getToolbarHeight } from '../../utils/helpers';
+
+
+@Component({
+  tag: 'ion-fixed',
+  styleUrl: 'fixed.scss'
+})
+export class Fixed {
+  $el: HTMLElement;
+  mode: string;
+
+  hostData(): VNodeData {
+    const pageChildren: HTMLElement[] = getParentElement(this.$el).children;
+    const headerHeight = getToolbarHeight('ION-HEADER', pageChildren, this.mode, '44px', '56px');
+    const footerHeight = getToolbarHeight('ION-FOOTER', pageChildren, this.mode, '50px', '48px');
+
+    return {
+      class: {
+        'statusbar-padding': Ionic.config.getBoolean('statusbarPadding')
+      },
+      style: {
+        'margin-top': headerHeight,
+        'margin-bottom': footerHeight
+      }
+    };
+  }
+
+  render() {
+    return (
+      <slot></slot>
+    );
+  }
+}

packages/core/src/utils/helpers.ts

@@ -93,3 +93,22 @@ export function applyStyles(elm: HTMLElement, styles: {[styleProp: string]: stri
     }
   }
 }
+
+export function getToolbarHeight(toolbarTagName: string, pageChildren: HTMLElement[], mode: string, iosHeight: string, defaultHeight: string) {
+  for (var i = 0; i < pageChildren.length; i++) {
+    if (pageChildren[i].tagName === toolbarTagName) {
+      var headerHeight = pageChildren[i].getAttribute(`${mode}-height`);
+      if (headerHeight) {
+        return headerHeight;
+      }
+
+      if (mode === 'ios') {
+        return iosHeight;
+      }
+
+      return defaultHeight;
+    }
+  }
+
+  return '';
+}