@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/src/components/button.js

@@ -1,156 +0,0 @@
-import { Button } from '../../../components/button/index';
-import { setupMenuOptions } from '../menuoptions';
-import { convertElementToCode, getChildTextNode, attachEventListener } from '../sample-utils';
-
-/** @return {void} */
-function initializeSampleComponents() {
-  const buttons = document.querySelectorAll('.js .mdw-button');
-  for (let i = 0; i < buttons.length; i += 1) {
-    Button.attach(buttons.item(i));
-  }
-}
-
-/** @type {HTMLElement} */
-let sampleComponent;
-
-/** @return {void} */
-function updateSampleCode() {
-  const jsRequired = document.querySelector('input[name="javascript"][value="required"]').checked;
-  const jsOptional = document.querySelector('input[name="javascript"][value="optional"]').checked;
-  const useJS = jsRequired || jsOptional;
-
-  // Strip JS related elements and attributes
-  Button.detach(sampleComponent);
-
-  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
-  htmlCodeElement.textContent = convertElementToCode(sampleComponent);
-
-  // Reattach JS if requested
-  if (useJS) {
-    Button.attach(sampleComponent);
-  }
-
-  const jsCodeElement = document.getElementsByClassName('component-js')[0];
-  jsCodeElement.textContent = 'mdw.Button.attach(buttonElement);';
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const { name, value, checked } = event.target;
-  let focusRing;
-  let newElement;
-  switch (name) {
-    case 'elevation':
-      switch (value) {
-        default:
-        case 'flat':
-          sampleComponent.removeAttribute('mdw-raised');
-          break;
-        case 'raised':
-          sampleComponent.setAttribute('mdw-raised', '');
-          break;
-        case 'raised-always':
-          sampleComponent.setAttribute('mdw-raised', 'always');
-          break;
-      }
-      break;
-    case 'outlined':
-      if (checked) {
-        sampleComponent.setAttribute('mdw-outline', '');
-      } else {
-        sampleComponent.removeAttribute('mdw-outline');
-      }
-      break;
-    case 'disabled':
-      if (checked) {
-        sampleComponent.setAttribute('disabled', '');
-      } else {
-        sampleComponent.removeAttribute('disabled');
-      }
-      break;
-    case 'focus-ring':
-      focusRing = sampleComponent.getElementsByClassName('mdw-button__focus-ring')[0];
-      if (checked) {
-        if (!focusRing) {
-          focusRing = document.createElement('div');
-          focusRing.classList.add('mdw-button__focus-ring');
-          sampleComponent.insertBefore(focusRing, sampleComponent.firstChild);
-        }
-      } else if (focusRing) {
-        focusRing.parentElement.removeChild(focusRing);
-      }
-      break;
-    case 'content':
-      switch (value) {
-        case 'text':
-          sampleComponent.removeAttribute('mdw-icon');
-          sampleComponent.classList.remove('material-icons');
-          getChildTextNode(sampleComponent).nodeValue = 'Button';
-          break;
-        case 'icon':
-          sampleComponent.setAttribute('mdw-icon', '');
-          sampleComponent.classList.add('material-icons');
-          getChildTextNode(sampleComponent).nodeValue = 'favorite';
-          break;
-        default:
-      }
-      break;
-    case 'color':
-      switch (value) {
-        case 'default':
-          sampleComponent.removeAttribute('mdw-theme-color');
-          break;
-        default:
-          sampleComponent.setAttribute('mdw-theme-color', value);
-          break;
-      }
-      break;
-    case 'fill':
-      switch (value) {
-        case 'none':
-          sampleComponent.removeAttribute('mdw-theme-fill');
-          break;
-        default:
-          sampleComponent.setAttribute('mdw-theme-fill', value);
-          break;
-      }
-      break;
-    case 'htmltype':
-      newElement = document.createElement(value);
-      while (sampleComponent.firstChild) {
-        newElement.appendChild(sampleComponent.firstChild);
-      }
-      for (let i = sampleComponent.attributes.length - 1; i >= 0; i -= 1) {
-        const attr = sampleComponent.attributes.item(i);
-        newElement.attributes.setNamedItem(attr.cloneNode());
-      }
-      sampleComponent.parentElement.replaceChild(newElement, sampleComponent);
-      sampleComponent = newElement;
-      if (value === 'a') {
-        sampleComponent.setAttribute('href', '#');
-      } else {
-        sampleComponent.removeAttribute('href');
-      }
-      break;
-    default:
-  }
-  updateSampleCode();
-}
-
-/** @return {void} */
-function setupComponentOptions() {
-  sampleComponent = document.querySelector('.component-sample .mdw-button');
-  attachEventListener(
-    document.querySelectorAll('input[name]'),
-    'change',
-    onOptionChange
-  );
-}
-
-initializeSampleComponents();
-setupMenuOptions();
-setupComponentOptions();
-updateSampleCode();

package/docs/src/components/button.pug

@@ -1,194 +0,0 @@
-include ../mixins.pug
-
-mixin button-test
-  div.display-flex.flex-wrap
-    button.mdw-button Flat
-      .mdw-button__focus-ring
-    button.mdw-button(mdw-raised) Raised
-      .mdw-button__focus-ring
-    button.mdw-button(mdw-raised disabled) Disabled
-      .mdw-button__focus-ring
-    button.mdw-button(mdw-raised="always") +Raised
-      .mdw-button__focus-ring
-    button.mdw-button(mdw-outline) Outlined
-  div(style="height:24px")
-  div.display-flex.flex-wrap
-    button.mdw-button(mdw-theme-color="primary") Flat
-      .mdw-button__focus-ring
-    button.mdw-button(mdw-theme-color="primary" mdw-raised) Raised
-      .mdw-button__focus-ring
-    button.mdw-button(mdw-theme-color="primary" mdw-raised disabled) Disabled
-      .mdw-button__focus-ring
-    button.mdw-button(mdw-theme-color="accent-A100") Accent
-      .mdw-button__focus-ring
-    button.mdw-button(mdw-outline mdw-theme-color="accent-A100") Outlined
-  div(style="height:24px")
-  div.display-flex.flex-wrap
-    button.mdw-button(mdw-theme-fill="primary dark") Flat
-      .mdw-button__focus-ring
-    button.mdw-button(mdw-theme-fill="primary dark" mdw-raised) Raised
-      .mdw-button__focus-ring
-    button.mdw-button(mdw-theme-fill="primary dark" mdw-raised disabled) Disabled
-      .mdw-button__focus-ring
-    button.mdw-button(mdw-theme-fill="accent-A100 light" mdw-raised) Accent
-      .mdw-button__focus-ring
-  div(style="height:24px")
-  div.display-flex.flex-wrap
-    button.mdw-button(mdw-icon).material-icons favorite
-    button.mdw-button(mdw-theme-color="warn dark" mdw-icon).material-icons favorite
-    button.mdw-button(mdw-theme-fill="warn dark" mdw-icon).material-icons favorite
-    button.mdw-button(mdw-theme-fill="warn dark" mdw-icon mdw-raised).material-icons favorite
-    button.mdw-button(mdw-theme-fill="warn dark" mdw-icon mdw-raised disabled).material-icons favorite
-    button.mdw-button(mdw-icon disabled).material-icons favorite
-
-+header()
-  +navdrawer("button")
-    .mdw-layout(mdw-margin-top mdw-margin-bottom)
-      .mdw-layout__item(mdw-colspan="100%")
-        div
-          h5.mdw-type(mdw-baseline-next="36") Buttons communicate the action that will occur when the user touches them.
-          p.mdw-type Material buttons trigger an ink reaction on press. They may display text, imagery, or both.
-      .mdw-layout__item(mdw-colspan="4")
-        .component-sample
-          .display-flex
-            button.mdw-button(mdw-theme-color="accent-A200") Button
-      .mdw-layout__item(mdw-colspan="8")
-        div
-          .mdw-type(mdw-style="subtitle") Javascript
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="required" disabled)
-              .mdw-selection__icon
-              .mdw-selection__label Required
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="optional" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Optional
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="none")
-              .mdw-selection__icon
-              .mdw-selection__label None
-          .mdw-type(mdw-style="subtitle") Elevation
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="elevation" value="flat" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Flat
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="elevation" value="raised")
-              .mdw-selection__icon
-              .mdw-selection__label Raised
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="elevation" value="raised-always")
-              .mdw-selection__icon
-              .mdw-selection__label Always Raised
-          .mdw-type(mdw-style="subtitle") Content
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="content" value="text" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Text
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="content" value="icon")
-              .mdw-selection__icon
-              .mdw-selection__label Icon
-          .mdw-type(mdw-style="subtitle") Options
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="checkbox" name="outlined")
-              .mdw-selection__icon
-              .mdw-selection__label Outlined
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="checkbox" name="disabled")
-              .mdw-selection__icon
-              .mdw-selection__label Disabled
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="checkbox" name="focus-ring")
-              .mdw-selection__icon
-              .mdw-selection__label Focus Ring
-          .mdw-type(mdw-style="subtitle") Color (Ink)
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="color" value="default")
-              .mdw-selection__icon
-              .mdw-selection__label Default
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="color" value="primary-400")
-              .mdw-selection__icon
-              .mdw-selection__label Primary 400
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="color" value="accent-A200" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Accent A200
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="color" value="warn")
-              .mdw-selection__icon
-              .mdw-selection__label Warn
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="color" value="purple-A400")
-              .mdw-selection__icon
-              .mdw-selection__label Purple-A400
-          .mdw-type(mdw-style="subtitle") Fill
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="none" checked)
-              .mdw-selection__icon
-              .mdw-selection__label None
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="primary dark")
-              .mdw-selection__icon
-              .mdw-selection__label Primary
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="accent-A100 light")
-              .mdw-selection__icon
-              .mdw-selection__label Accent A100
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="warn-200 light")
-              .mdw-selection__icon
-              .mdw-selection__label Warn 200
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="green-700 dark")
-              .mdw-selection__icon
-              .mdw-selection__label Green 700
-          .mdw-type(mdw-style="subtitle") HTML Element Type
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="htmltype" value="div")
-              .mdw-selection__icon
-              .mdw-selection__label HTMLElement
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="htmltype" value="button" checked)
-              .mdw-selection__icon
-              .mdw-selection__label HTMLButtonElement
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="htmltype" value="a")
-              .mdw-selection__icon
-              .mdw-selection__label HTMLAnchorElement
-      .mdw-layout__item(mdw-colspan="100%" style="max-height:0")
-      .mdw-layout__item(mdw-colspan="6")
-        .display-flex(flex-column)
-          h6.mdw-type HTML Code
-          .mdw-card.component-code.component-html
-      .mdw-layout__item(mdw-colspan="2")
-        .display-flex(flex-column)
-          h6.mdw-type Javascript Code
-          .mdw-card.component-code.component-js
-      .mdw-layout__item(mdw-colspan="100%")
-        h6.mdw-type Samples
-      .mdw-layout__item.display-flex(mdw-colspan="4" flex-justify-content="center")
-        .render
-          +androidstatusbar('')
-          +toolbar('', [], []) CSS Only
-          .content(style="padding: 16px 0")
-            div
-              +button-test
-          +androidnavbar
-      .mdw-layout__item.display-flex(mdw-colspan="4" flex-justify-content="center")
-        .render.js
-          +androidstatusbar('')
-          +toolbar('', [], []) Javascript Version
-          .content(style="padding: 16px 0")
-            div
-              +button-test
-          +androidnavbar
-  script(src='button.min.js')

package/docs/src/components/card.js

@@ -1,136 +0,0 @@
-import { setupMenuOptions } from '../menuoptions';
-import { convertElementToCode, attachEventListener } from '../sample-utils';
-
-/** @type {HTMLElement} */
-let sampleComponent;
-/** @type {HTMLElement} */
-let mediaElement;
-
-/** @return {void} */
-function updateSampleCode() {
-  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
-  htmlCodeElement.textContent = convertElementToCode(sampleComponent);
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const { name, value, checked } = /** @type {HTMLInputElement} */ (event.target);
-  let textElement;
-  let actionsElement;
-  switch (name) {
-    case 'elevation':
-      sampleComponent.removeAttribute('mdw-elevation');
-      sampleComponent.removeAttribute('mdw-raised');
-      switch (value) {
-        default:
-        case 'auto':
-          break;
-        case '1':
-          sampleComponent.setAttribute('mdw-elevation', '1');
-          break;
-        case 'raised':
-          sampleComponent.setAttribute('mdw-raised', '');
-          break;
-      }
-      break;
-    case 'focusable':
-      if (checked) {
-        sampleComponent.setAttribute('tabindex', '0');
-      } else {
-        sampleComponent.removeAttribute('tabindex');
-      }
-      break;
-    case 'media-placement':
-      if (mediaElement.parentElement) {
-        mediaElement.parentElement.removeChild(mediaElement);
-      }
-      if (value === 'none') {
-        break;
-      }
-      switch (value) {
-        case 'top':
-          sampleComponent.insertBefore(mediaElement, sampleComponent.firstChild);
-          break;
-        case 'middle':
-          textElement = sampleComponent.getElementsByClassName('mdw-card__supporting-text')[0];
-          sampleComponent.insertBefore(mediaElement, textElement);
-          break;
-        case 'bottom':
-          sampleComponent.appendChild(mediaElement);
-          break;
-      }
-      break;
-    case 'media-ratio':
-      if (!mediaElement.parentElement) {
-        return;
-      }
-      switch (value) {
-        default:
-        case 'none':
-          mediaElement.removeAttribute('mdw-ratio');
-          break;
-        case '16:9':
-          mediaElement.setAttribute('mdw-ratio', '16:9');
-          break;
-        case '3:2':
-          mediaElement.setAttribute('mdw-ratio', '3:2');
-          break;
-        case '4:3':
-          mediaElement.setAttribute('mdw-ratio', '4:3');
-          break;
-        case '1:1':
-          mediaElement.setAttribute('mdw-ratio', '1:1');
-          break;
-      }
-      break;
-    case 'actions':
-      actionsElement = sampleComponent.getElementsByClassName('mdw-card__actions')[0];
-      if (checked) {
-        if (!actionsElement) {
-          textElement = sampleComponent.getElementsByClassName('mdw-card__supporting-text')[0];
-          textElement.insertAdjacentHTML('afterend',
-            `<div class="mdw-card__actions">
-              <button class="mdw-button" mdw-theme-color="accent">Action 1</button>
-              <button class="mdw-button" mdw-theme-color="accent">Action 2</button>
-              <span></span>
-              <button class="mdw-button material-icons" mdw-icon>more_vert</button>
-            </div>`);
-        }
-      } else {
-        if (actionsElement) {
-          actionsElement.parentElement.removeChild(actionsElement);
-        }
-      }
-      break;
-    case 'fill':
-      switch (value) {
-        case 'none':
-          sampleComponent.removeAttribute('mdw-theme-fill');
-          break;
-        default:
-          sampleComponent.setAttribute('mdw-theme-fill', value);
-          break;
-      }
-      break;
-    default:
-  }
-  updateSampleCode();
-}
-
-/** @return {void} */
-function setupComponentOptions() {
-  sampleComponent = document.querySelector('.component-sample .mdw-card');
-  mediaElement = sampleComponent.getElementsByClassName('mdw-card__media')[0];
-  attachEventListener(
-    document.querySelectorAll('input[name]'),
-    'change',
-    onOptionChange
-  );
-}
-
-setupMenuOptions();
-setupComponentOptions();
-updateSampleCode();

package/docs/src/components/card.pug

@@ -1,133 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("card")
-    .mdw-layout(mdw-margin-top mdw-margin-bottom)
-      .mdw-layout__item(mdw-colspan="100%")
-        div
-          h5.mdw-type(mdw-baseline-next="36") Cards contain content and actions about a single subject.
-          p.mdw-type(mdw-baseline-next="36") Cards are surfaces that display content and actions on a single topic.
-          p.mdw-type They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
-      .mdw-layout__item(mdw-colspan="4")
-        .component-sample
-          .display-flex
-            .mdw-card
-              .mdw-card__thumbnail.material-icons(style="font-size:40px") account_circle
-              h6.mdw-card__header(mdw-two-line) Title goes here
-              .mdw-card__subheader Secondary text
-              .mdw-card__media(mdw-ratio="16:9")
-                img.mdw-card__image(src="https://free-images.com/md/f673/sunset_sky_red_gold_0.jpg")
-              .mdw-card__supporting-text Greyhound divisively hello coldly wonderfully marginally far upon excluding.
-              .mdw-card__actions
-                button.mdw-button(mdw-theme-color="accent") Action 1
-                button.mdw-button(mdw-theme-color="accent") Action 2
-                span
-                button.mdw-button.material-icons(mdw-icon) more_vert
-      .mdw-layout__item(mdw-colspan="8")
-        div
-          .mdw-type(mdw-style="subtitle") Javascript
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="required" disabled)
-              .mdw-selection__icon
-              .mdw-selection__label Required
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="optional" disabled)
-              .mdw-selection__icon
-              .mdw-selection__label Optional
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="none" checked)
-              .mdw-selection__icon
-              .mdw-selection__label None
-          .mdw-type(mdw-style="subtitle") Elevation
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="elevation" value="auto" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Auto
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="elevation" value="1")
-              .mdw-selection__icon
-              .mdw-selection__label 1dp
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="elevation" value="raised")
-              .mdw-selection__icon
-              .mdw-selection__label Raised
-          .mdw-type(mdw-style="subtitle") Media Placement
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="media-placement" value="none")
-              .mdw-selection__icon
-              .mdw-selection__label None
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="media-placement" value="top")
-              .mdw-selection__icon
-              .mdw-selection__label Top
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="media-placement" value="middle" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Middle
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="media-placement" value="bottom")
-              .mdw-selection__icon
-              .mdw-selection__label Bottom
-          .mdw-type(mdw-style="subtitle") Media Ratio
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="media-ratio" value="none")
-              .mdw-selection__icon
-              .mdw-selection__label None
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="media-ratio" value="16:9" checked)
-              .mdw-selection__icon
-              .mdw-selection__label 16:9
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="media-ratio" value="3:2")
-              .mdw-selection__icon
-              .mdw-selection__label 3:2
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="media-ratio" value="4:3")
-              .mdw-selection__icon
-              .mdw-selection__label 4:3
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="media-ratio" value="1:1")
-              .mdw-selection__icon
-              .mdw-selection__label 1:1
-          .mdw-type(mdw-style="subtitle") Options
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="checkbox" name="focusable")
-              .mdw-selection__icon
-              .mdw-selection__label Focusable
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="checkbox" name="actions" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Actions
-          .mdw-type(mdw-style="subtitle") Fill
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="none" checked)
-              .mdw-selection__icon
-              .mdw-selection__label None
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="primary dark")
-              .mdw-selection__icon
-              .mdw-selection__label Primary
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="accent-A100 light")
-              .mdw-selection__icon
-              .mdw-selection__label Accent A100
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="warn-200 light")
-              .mdw-selection__icon
-              .mdw-selection__label Warn 200
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="green-700 dark")
-              .mdw-selection__icon
-              .mdw-selection__label Green 700
-      .mdw-layout__item(mdw-colspan="100%" style="max-height:0")
-      .mdw-layout__item(mdw-colspan="100%")
-        .display-flex(flex-column)
-          h6.mdw-type HTML Code
-          .mdw-card.component-code.component-html
-  script(src='card.min.js')