docks_theme_api 1.0.2

data/source/components/exploded/exploded.scss

@@ -0,0 +1,166 @@
+//        ___          ___         ___                   ___        _____        ___        _____
+//       /  /\        /__/|       /  /\                 /  /\      /  /::\      /  /\      /  /::\
+//      /  /:/_      |  |:|      /  /::\               /  /::\    /  /:/\:\    /  /:/_    /  /:/\:\
+//     /  /:/ /\     |  |:|     /  /:/\:\___     ___  /  /:/\:\  /  /:/  \:\  /  /:/ /\  /  /:/  \:\
+//    /  /:/ /:/_  __|__|:|    /  /:/~/:/__/\   /  /\/  /:/  \:\/__/:/ \__\:|/  /:/ /:/_/__/:/ \__\:|
+//   /__/:/ /:/ /\/__/::::\___/__/:/ /:/\  \:\ /  /:/__/:/ \__\:\  \:\ /  /:/__/:/ /:/ /\  \:\ /  /:/
+//   \  \:\/:/ /:/   ~\~~\::::|  \:\/:/  \  \:\  /:/\  \:\ /  /:/\  \:\  /:/\  \:\/:/ /:/\  \:\  /:/
+//    \  \::/ /:/     |~~|:|~~ \  \::/    \  \:\/:/  \  \:\  /:/  \  \:\/:/  \  \::/ /:/  \  \:\/:/
+//     \  \:\/:/      |  |:|    \  \:\     \  \::/    \  \:\/:/    \  \::/    \  \:\/:/    \  \::/
+//      \  \::/       |  |:|     \  \:\     \__\/      \  \::/      \__\/      \  \::/      \__\/
+//       \__\/        |__|/       \__\/                 \__\/                   \__\/
+
+//*
+// @pattern Exploded
+//
+// An exploded view of a given DOM structure that can be freely rotated. It
+// allows the user to see the structure of the component as it is rendered,
+// helping them learn about subcomponents that make up the overall structure.
+//
+// @since 1.0.0
+
+
+
+//*
+// This is the base component for an explosion. It contains the source markup
+// and the exploded representation, as well as communicates overall states of
+// the component to subcomponents.
+//
+// @helper
+// <%= docks_exploded markup: %Q(
+//   <div class="foo" style="padding: 1em;">
+//     <div class="foo__bar" style="height: 5em; position: relative;">
+//       <div class="foo__bar__baz" style="width: 50%; height: 100%; position: absolute; top: 0; left: 0;"></div>
+//       <div class="foo__bar__baz" style="width: 50%; height: 100%; position: absolute; top: 0; left: 50%;"></div>
+//     </div>
+//   </div>
+// ) %>
+
+.exploded {}
+
+.exploded--is-being-initialized {
+  .exploded__pane {
+    transition: transform 0.25s ease;
+  }
+}
+
+
+
+.exploded__source,
+.exploded__structure {
+  padding: default(spacing) double(default(spacing));
+}
+
+
+
+//*
+// The container for the original source markup for the component. This is
+// kept around so that each pane can be associated to a source DOM node for
+// any consumer of the explosion pane selection to display source structure
+// details.
+
+.exploded__source {}
+
+//*
+// A container that wraps exactly around the source markup. This extra
+// container (corresponding to the structure's `exploded__structure__content`)
+// is required to simplify absolute positioning calculations for the
+// JavaScript component.
+
+.exploded__source__content {}
+
+
+
+//*
+// The container around the exploded representation. This container provides
+// the perspective required to make the component three-dimensional.
+
+.exploded__structure {
+  position: relative;
+  perspective: 2000px;
+  transform-style: preserve-3d;
+  cursor: pointer;
+}
+
+
+
+//*
+// The container that wraps exactly around the exploded structure. This extra
+// container exists so that `exploded__structure` can provide some padding/
+// horizontal centering of the exploded structure while also providing a
+// simple relative container (this subcomponent) from which to make absolute
+// positioning calculations.
+
+.exploded__structure__content {
+  position: relative;
+  z-index: 0;
+  margin: 0 auto;
+}
+
+
+
+//*
+// The container for all controls (range sliders) that can be used to
+// manipulate the component.
+
+.exploded__control-container {
+  display: flex;
+  align-items: flex-end;
+  margin: 3rem negative(default(spacing)) 0;
+}
+
+//*
+// A container for a single control that manipulates the component.
+
+.exploded__control {
+  flex: 1 1 0;
+  margin-left: default(spacing);
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
+
+
+//*
+// A single pane representing a DOM node in the source markup. These panes are
+// absolutely positioned by the JavaScript part of this components and,
+// likewise, are rotated in three-dimensional space as the user drags over the
+// component.
+
+.exploded__pane {
+  // position
+  position: absolute;
+
+  // box model
+  box-sizing: content-box;
+
+  // backdrop
+  @include default(border-radius);
+  background-color: rgba(ui-color(gray, darker), 0.6);
+  border: 1px solid rgba(ui-color(gray), 0.5);
+
+  // transition
+  transition: background 0.3s ease;
+
+  &:hover {
+    background-color: ui-color(blue);
+  }
+}
+
+//*
+// The JavaScript adds this state to panes that have been clicked/ tapped by
+// the user. The actual representation of the active pane is deferred to other
+// components (this is done by firing an event with a reference to this
+// selected pane).
+//
+// @demo_type none
+// @set_by Exploded.click
+
+.exploded__pane--is-selected {
+  &, &:hover {
+    background: ui-color(blue, dark);
+    opacity: 1;
+  }
+}

data/source/components/exploded/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "exploded.js"
+}

data/source/components/field/field.js

@@ -0,0 +1,24 @@
+const classes = {
+  root: "field",
+  input: "field__input",
+  label: "label"
+};
+
+const states = {
+  root: { focused: `${classes.root}--is-focused` },
+  label: { focused: `${classes.label}--is-focused` }
+};
+
+var Field = {
+  init() {
+    $(document).on("focusin focusout", `.${classes.input}`, (event) => {
+      var method = event.type === "focusin" ? "add" : "remove",
+          label = document.querySelector(`[for=${event.target.id}]`);
+
+      event.target.parentNode.classList[method](states.root.focused);
+      label.classList[method](states.label.focused);
+    });
+  }
+};
+
+export default Field;

data/source/components/field/field.scss

@@ -0,0 +1,101 @@
+.field {
+  @include default(border-radius);
+  background-color: ui-color(gray, dark);
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  padding: 0 half(default(spacing));
+}
+
+$field--switch--size: multiply(1.5, default(spacing));
+
+.field--switch {
+  padding: 0;
+  background-color: transparent;
+  position: relative;
+
+  > .label {
+    margin: 0;
+    padding-left: multiply(1.5, $field--switch--size);
+    position: relative;
+    line-height: $field--switch--size;
+    color: ui-color(gray, darkest);
+
+    &:after {
+      content: '';
+      display: block;
+      height: multiply($field--switch--size, 0.7);
+      width: multiply(0.3, $field--switch--size);
+      position: absolute;
+      top: half($field--switch--size);
+      left: half($field--switch--size);
+      border-bottom: 2px solid ui-color(blue, darker);
+      border-right: 2px solid ui-color(blue, darker);
+      transform: translate(-50%, -60%) rotate(45deg);
+      display: none;
+    }
+
+    &:before {
+      content: '';
+      display: block;
+      height: $field--switch--size;
+      width: $field--switch--size;
+      background: ui-color(gray);
+      position: absolute;
+      top: 0; left: 0;
+      @include default(border-radius);
+    }
+  }
+
+  > .field__switch:checked + .label:before {
+    background: ui-color(blue);
+  }
+
+  > .field__switch:checked + .label:after {
+    display: block;
+  }
+
+  > .field__switch {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.1;
+  }
+
+  + .field--switch {
+    margin-top: default(spacing);
+  }
+}
+
+.field__icon {
+  flex: 0 0 auto;
+  font-size: 0;
+
+  > .icon {
+    @include icon--recolor(gray, darker);
+  }
+}
+
+.field__input {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  line-height: default(control-size);
+  font-size: 1.1rem;
+  @include type--default-font-family;
+
+  &::-webkit-input-placeholder {
+    color: rgba(ui-color(gray, darker), 0.5);
+  }
+
+  &::placeholder {
+    color: rgba(ui-color(gray, darker), 0.5);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+

data/source/components/field/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "field.js"
+}

data/source/components/header/header.scss

@@ -0,0 +1,33 @@
+//*
+// @pattern Page Header
+// @group Partials
+//
+// A group of headings and other page-level information that appears at the
+// top of a given page or section.
+//
+// @since 1.0.0
+
+//*
+// @markup
+// <header class="page-header">
+//   <div class="grid grid--vertically-centered">
+//     <div class="grid__item">
+//       <h1 class="type type--heading type--heading-1">The title</h1>
+//     </div>
+//
+//     <div class="grid__item grid__item--no-flex">
+//       <button class="docks-button docks-button--dark">Action</button>
+//     </div>
+//   </div>
+// </header>
+
+.page-header {
+  background-color: ui-color(gray);
+  padding: default(spacing);
+  padding-bottom: default(spacing);
+  min-height: rem(66);
+
+  .type--heading-1 {
+    margin: -0.5em 0;
+  }
+}

data/source/components/iframe/iframe.erb

@@ -0,0 +1,12 @@
+<%
+  iframe.configure do |config|
+    config.defaults(id: unique_iframe_id)
+  end
+
+  id = iframe.id
+%>
+
+<iframe class="iframe" data-iframe-id="<%= id %>" frameborder="0"></iframe>
+<script class="iframe__content" type="text/iframe-content">
+  <%= CGI.escapeHTML(docks_demo(iframe.demo, id: id)) %>
+</script>