fix(content): document and add custom properties

references #14850 references #14808 references #14853
ionic-team · Aug 16, 2018 · 0372aec · 0372aec
1 parent 07e99a1
commit 0372aec
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 38 deletions.
diff --git a/core/src/components/content/content.ios.scss b/core/src/components/content/content.ios.scss
@@ -5,11 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  font-family: $content-ios-font-family;
-}
+  --hr-height: #{$hairlines-width};
+  --hr-background: #{$content-ios-horizontal-rule-background};
 
-::slotted(hr) {
-  height: $hairlines-width;
-
-  background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $content-ios-horizontal-rule-background-color-alpha);
+  font-family: $content-ios-font-family;
 }
diff --git a/core/src/components/content/content.ios.vars.scss b/core/src/components/content/content.ios.vars.scss
@@ -6,8 +6,8 @@
 /// @prop - Font family of the content
 $content-ios-font-family:                               $font-family-base !default;
 
-/// @prop - Background color of the outer content
-$content-ios-outer-background:                          $background-color-step-50 !default;
-
 /// @prop - Alpha for the Horizontal Rule
 $content-ios-horizontal-rule-background-color-alpha:    .12 !default;
+
+/// @prop - Background for the Horizontal Rule
+$content-ios-horizontal-rule-background:                rgba(var(--ion-text-color-rgb, $text-color-rgb), $content-ios-horizontal-rule-background-color-alpha) !default;
diff --git a/core/src/components/content/content.md.scss b/core/src/components/content/content.md.scss
@@ -5,9 +5,8 @@
 // --------------------------------------------------
 
 :host {
+  --hr-background: #{$background-color-step-50};
+
   font-family: $content-md-font-family;
 }
 
-::slotted(hr) {
-  background-color: $background-color-step-50;
-}
diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
@@ -4,8 +4,22 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$background-color};
-  --ion-color-contrast: #{$text-color};
+  /**
+   * @prop --background: Background of the Content
+   * @prop --color: Color of the Content
+   * @prop --padding-top: Padding top of the Content
+   * @prop --padding-bottom: Padding bottom of the Content
+   * @prop --padding-start: Padding start of the Content
+   * @prop --padding-end: Padding end of the Content
+   * @prop --keyboard-offset: Keyboard offset of the Content
+   * @prop --offset-top: Offset top of the Content
+   * @prop --offset-bottom: Offset bottom of the Content
+   *
+   * @prop --hr-height: Height of the hr in the Content
+   * @prop --hr-background: Background of the hr in the Content
+   */
+  --background: #{$background-color};
+  --color: #{$text-color};
   --padding-top: 0px;
   --padding-bottom: 0px;
   --padding-start: 0px;
@@ -24,28 +38,28 @@
   margin: 0 !important;
   /* stylelint-enable */
 
-  background-color: #{current-color(base)};
-  color: #{current-color(contrast)};
+  background: var(--background);
+  color: var(--color);
 
   contain: layout size style;
 }
 
-:host(.ion-color-outer),
+:host(.ion-color) {
+  --hr-background: #{current-color(shade)};
+
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
+// TODO we should remove outer-content in favor of a color
 :host(.outer-content) {
-  --ion-color-base: #{$background-color-step-50};
+  --background: #{$background-color-step-50};
+  --hr-background: #{$background-color-step-150};
 }
 
 .inner-scroll {
-  @include position(
-    calc(var(--offset-top) * -1), 0,
-    calc(var(--offset-bottom) * -1), 0
-  );
-  @include padding(
-    calc(var(--padding-top) + var(--offset-top)),
-    var(--padding-end),
-    calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)),
-    var(--padding-start)
-  );
+  @include position(calc(var(--offset-top) * -1), 0,calc(var(--offset-bottom) * -1), 0);
+  @include padding(calc(var(--padding-top) + var(--offset-top)), var(--padding-end), calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)), var(--padding-start));
 
   position: absolute;
 
@@ -85,4 +99,10 @@
 
 .overscroll::after {
   top: -1px;
-}
+}
+
+::slotted(hr) {
+  height: var(--hr-height);
+
+  background: var(--hr-background);
+}
diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md
@@ -39,6 +39,23 @@ view component.
 | `scrollToTop`      | Scroll to the top of the component                  |
 
 
+## CSS Custom Properties
+
+| Name                | Description                         |
+| ------------------- | ----------------------------------- |
+| `--background`      | Background of the Content           |
+| `--color`           | Color of the Content                |
+| `--hr-background`   | Background of the hr in the Content |
+| `--hr-height`       | Height of the hr in the Content     |
+| `--keyboard-offset` | Keyboard offset of the Content      |
+| `--offset-bottom`   | Offset bottom of the Content        |
+| `--offset-top`      | Offset top of the Content           |
+| `--padding-bottom`  | Padding bottom of the Content       |
+| `--padding-end`     | Padding end of the Content          |
+| `--padding-start`   | Padding start of the Content        |
+| `--padding-top`     | Padding top of the Content          |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/content/test/standalone/index.html b/core/src/components/content/test/standalone/index.html
@@ -8,14 +8,86 @@
   <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 </head>
 <body>
-  <ion-content padding>
-    <h1>Heading</h1>
-    <h2>Heading</h2>
-    <h3>Heading</h3>
-    <h4>Heading</h4>
-    <h5>Heading</h5>
-    <h6>Heading</h6>
-    <p>Paragraph</p>
-  </ion-content>
+  <div class="content-height">
+    <ion-content padding>
+      <h1>Heading</h1>
+      <h2>Heading</h2>
+      <h3>Heading</h3>
+      <hr>
+      <h4>Heading</h4>
+      <h5>Heading</h5>
+      <h6>Heading</h6>
+      <p>Paragraph</p>
+    </ion-content>
+  </div>
+
+  <div class="content-height">
+    <ion-content padding color="secondary">
+      <h1>Heading</h1>
+      <h2>Heading</h2>
+      <h3>Heading</h3>
+      <hr>
+      <h4>Heading</h4>
+      <h5>Heading</h5>
+      <h6>Heading</h6>
+      <p>Paragraph</p>
+    </ion-content>
+  </div>
+
+  <div class="content-height">
+    <ion-content padding class="custom-color">
+      <h1>Heading</h1>
+      <h2>Heading</h2>
+      <h3>Heading</h3>
+      <hr>
+      <h4>Heading</h4>
+      <h5>Heading</h5>
+      <h6>Heading</h6>
+      <p>Paragraph</p>
+    </ion-content>
+  </div>
+
+  <div class="content-height">
+    <ion-content padding class="outer-content">
+      <h1>Heading</h1>
+      <h2>Heading</h2>
+      <h3>Heading</h3>
+      <hr>
+      <h4>Heading</h4>
+      <h5>Heading</h5>
+      <h6>Heading</h6>
+      <p>Paragraph</p>
+    </ion-content>
+  </div>
+
+  <div class="content-height">
+    <ion-content padding class="outer-content">
+      <h1>Heading</h1>
+      <h2>Heading</h2>
+      <h3>Heading</h3>
+      <hr>
+      <h4>Heading</h4>
+      <h5>Heading</h5>
+      <h6>Heading</h6>
+      <p>Paragraph</p>
+    </ion-content>
+  </div>
+
+  <style>
+    .content-height {
+      height: 200px;
+    }
+
+    /* TODO should this be in content? */
+    ion-content {
+      height: 100%;
+    }
+
+    .custom-color {
+      --background: blue;
+      --color: white;
+      --hr-background: purple;
+    }
+  </style>
 </body>
 </html>