Merge pull request #514 from appuniversum/full-height-utility

Add a `au-u-height-full` utility

Author: Windvis

stories/1-outline/Getting-started.stories.mdx

@@ -205,6 +205,7 @@ Alternatively you can also load every SCSS partial in your `app.scss` file for m
 @import "@appuniversum/ember-appuniversum/styles/utilities/u-font-family";
 @import "@appuniversum/ember-appuniversum/styles/utilities/u-font-weights";
 @import "@appuniversum/ember-appuniversum/styles/utilities/u-headings";
+@import "@appuniversum/ember-appuniversum/styles/utilities/u-heights";
 @import "@appuniversum/ember-appuniversum/styles/utilities/u-hide";
 @import "@appuniversum/ember-appuniversum/styles/utilities/u-max-widths";
 @import "@appuniversum/ember-appuniversum/styles/utilities/u-paragraphs";

stories/4-utilities/Heights.stories.mdx

@@ -0,0 +1,51 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Utilities/Heights" />
+
+<style>{`
+  .sbdocs-p,
+  .sbdocs-ul,
+  .sbdocs-li,
+  .sbdocs-p code {
+    font-weight: 400;
+    font-size: 1.6rem;
+  }
+
+  .sbdocs-a {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--au-font);
+    transition: color var(--au-transition), text-decoration var(--au-transition);
+    font-weight: var(--au-regular);
+    text-decoration: underline;
+    text-decoration-color: var(--au-blue-300);
+    color: var(--au-blue-700);
+  }
+
+  .sbdocs-a:visited {
+    color: var(--au-blue-700);
+  }
+
+  .sbdocs-a:hover,
+  .sbdocs-a:focus {
+    color: var(--au-blue-900);
+    text-decoration-color: var(--au-blue-200);
+  }
+
+  .sbdocs-a:focus {
+    outline: var(--au-outline);
+    outline-offset: var(--au-outline-offset);
+  }
+
+  code {
+    font-family: courier, monospace;
+  }
+
+  .os-content {
+    background-color: var(--au-gray-100);
+  }
+`}</style>
+
+# Heights
+
+`.au-u-height-full`: 100%

styles/_a-utilities.scss

@@ -9,6 +9,7 @@
 @import "./utilities/u-background";
 @import "./utilities/u-break-word";
 @import "./utilities/u-headings";
+@import "./utilities/u-heights";
 @import "./utilities/u-hide";
 @import "./utilities/u-flex";
 @import "./utilities/u-font-family";

styles/utilities/_u-heights.scss

@@ -0,0 +1,3 @@
+.au-u-height-full {
+  height: 100% !important;
+}