Update: Adding narrow layout support.

Author: jarrodek

api-oauth2-settings-document.html

@@ -17,12 +17,23 @@
       @apply --arc-font-subhead;
     }
 
+    ul {
+      maring: 0;
+      padding: 0;
+    }
+
     .settings-value {
       background: var(--code-background-color, #f5f2f0);
       display: block;
       padding: 1em;
       margin: .5em 0;
     }
+
+    .settings-list-value {
+      background: var(--code-background-color, #f5f2f0);
+      display: block;
+      padding: 1em;
+    }
     </style>
     <template is="dom-if" if="[[hasAccessTokenUri]]">
       <h4>Access token URI</h4>
@@ -38,16 +49,16 @@ <h4>Authorization URI</h4>
       <h4>Authorization grants</h4>
       <uL>
         <template is="dom-repeat" items="[[authorizationGrants]]">
-          <li class="">[[item]]</li>
+          <li class="settings-list-value">[[item]]</li>
         </template>
       </ul>
     </template>
 
     <template is="dom-if" if="[[hasScopes]]">
       <h4>Authorization scopes</h4>
-      <uL>
+      <ul>
         <template is="dom-repeat" items="[[scopes]]">
-          <li class="">[[item.label]]</li>
+          <li class="settings-list-value">[[item.label]]</li>
         </template>
       </ul>
     </template>

api-security-documentation.html

@@ -21,32 +21,24 @@
     }
 
     h1 {
-      @apply --arc-font-display1;
-    }
-
-    h2 {
       @apply --arc-font-headline;
+      @apply --api-security-documentation-title;
     }
 
-    h3 {
+    h2 {
       @apply --arc-font-title;
+      @apply --api-security-documentation-main-section-title;
     }
 
-    h4 {
-      @apply --arc-font-subhead;
+    :host([narrow]) h1 {
+      font-size: 20px;
+      margin: 0;
+      @apply --api-security-documentation-title-narrow;
     }
 
-    .settings-value {
-      background: var(--code-background-color, #f5f2f0);
-      display: block;
-      padding: 1em;
-      margin: .5em 0;
-    }
-
-    .settings-list-value {
-      background: var(--code-background-color, #f5f2f0);
-      display: block;
-      padding: 1em;
+    :host([narrow]) h2 {
+      font-size: 18px;
+      @apply --api-security-documentation-main-section-title-narrow;
     }
     </style>
     <template is="dom-if" if="[[aware]]">
@@ -63,30 +55,26 @@ <h1>[[type]]</h1>
         <div slot="markdown-html" class="markdown-body"></div>
       </marked-element>
     </template>
-
     <template is="dom-if" if="[[hasSettings]]">
       <template is="dom-if" if="[[isOauth2Settings]]">
-        <h3>Settings</h3>
+        <h2>Settings</h2>
         <api-oauth2-settings-document settings="[[settings]]"></api-oauth2-settings-document>
       </template>
       <template is="dom-if" if="[[isOauth1Settings]]">
-        <h3>Settings</h3>
+        <h2>Settings</h2>
         <api-oauth1-settings-document settings="[[settings]]"></api-oauth1-settings-document>
       </template>
     </template>
-
     <template is="dom-if" if="[[hasQueryParameters]]">
-      <api-parameters-document amf-model="[[amfModel]]" query-opened query-parameters="[[queryParameters]]"></api-parameters-document>
+      <api-parameters-document amf-model="[[amfModel]]" query-opened query-parameters="[[queryParameters]]" narrow="[[narrow]]"></api-parameters-document>
     </template>
-
     <template is="dom-if" if="[[hasHeaders]]">
-      <api-headers-document opened amf-model="[[amfModel]]" headers="[[headers]]"></api-headers-document>
+      <api-headers-document opened amf-model="[[amfModel]]" headers="[[headers]]" narrow="[[narrow]]"></api-headers-document>
     </template>
-
     <template is="dom-if" if="[[hasResponses]]">
       <section class="response-documentation">
-        <h3>Responses</h3>
-        <api-responses-document amf-model="[[amfModel]]" returns="[[responses]]"></api-responses-document>
+        <h2>Responses</h2>
+        <api-responses-document amf-model="[[amfModel]]" returns="[[responses]]" narrow="[[narrow]]"></api-responses-document>
       </section>
     </template>
   </template>
@@ -103,6 +91,12 @@ <h3>Responses</h3>
    * Custom property | Description | Default
    * ----------------|-------------|----------
    * `--api-security-documentation` | Mixin applied to this elment | `{}`
+   * `--arc-font-headline` | Theme mixin, Applied to H1 element | `{}`
+   * `--api-security-documentation-title` | Mixin applied to the H1 element | `{}`
+   * `--api-security-documentation-title-narrow` | Mixin applied to the H1 element in narrow layout | `{}`
+   * `--arc-font-title` | Theme mixin, applied to h2 element | `{}`
+   * `--api-security-documentation-main-section-title` | Mixin applied to main sections title element | `{}`
+   * `--api-security-documentation-main-section-title-narrow` | Mixin applied to main sections title element in narrow layout | `{}`
    *
    * @customElement
    * @polymer
@@ -204,7 +198,14 @@ <h3>Responses</h3>
         hasCustomProperties: {
           type: Boolean,
           computed: '_computeHasCustomProperties(security)'
-        }
+        },
+        /**
+         * Set to render a mobile friendly view.
+         */
+         narrow: {
+           type: Boolean,
+           reflectToAttribute: true
+         }
       };
     }