add ui

ui/components/form/button.page.styl

@@ -0,0 +1,82 @@
+@import './var.inc.styl'
+
+.button
+  font-size: rem($font-size-secondary)
+  line-height: rem($form-control-height - 2)
+  background-color: lighten($default-color, 50%)
+  border: 1px solid $default-color
+  height: rem($form-control-height)
+  padding: rem(0 25px)
+  display: inline-block
+  outline: 0
+  margin: 0 0 1rem
+  transition: background-color .2s, box-shadow .5s
+  transition-timing-function: ease-out-sine
+  cursor: pointer
+  user-select: none
+
+  &, &:visited, &:hover
+    &, .typo &
+      color: $text-1-color
+
+  &:hover, &:focus
+    text-decoration: none
+
+  &:not(.disabled)
+    &:hover, &:focus
+      background-color: darken($default-color, 5%)
+      border-color: darken($default-color, 5%)
+      box-shadow: 0 4px 15px rgba(darken($default-color, 10%), 0.5)
+
+    &:focus
+      border-color: $input-focus-color
+
+  &.expanded
+    padding-left: 0
+    padding-right: 0
+    text-align: center
+    width: 100%
+
+  &.rounded
+    border-radius: rem($form-control-height / 2)
+
+  &.primary
+    border-color: $primary-color
+    background-color: $primary-color
+
+    &, &:visited, &:hover
+      &, .typo &
+        color: #FFF
+
+    &:not(.disabled)
+      &:hover
+        background-color: lighten(saturate($primary-color, 30%), 10%)
+        border-color: saturate($primary-color, 70%)
+        box-shadow: 0 4px 15px rgba(saturate($primary-color, 70%), 0.3)
+
+  &.disabled
+    cursor: default
+    opacity: 0.5
+
+  &.compact
+    margin-bottom: 0
+    height: rem($compact-control-height)
+    line-height: rem($compact-control-height - 2)
+    padding: rem(0 15px)
+
+.button.inverse
+  line-height: rem($form-control-height - 4)
+  border: 2px solid #FFF
+  background: none
+
+  &, &:visited
+    &, .typo &
+      color: #FFF
+
+  &:not(.disabled)
+    &:hover, &:focus
+      border-color: $immersive-primary-color
+      background: none
+      box-shadow: none
+      &, .typo &
+        color: $immersive-primary-color

ui/components/form/checkbox.page.styl

@@ -0,0 +1,90 @@
+@import './var.inc.styl'
+
+$checkbox-size = 16px
+
+.checkbox
+  font-size: rem($font-size-secondary)
+  line-height: 1.4
+  border: 0
+  display: inline-block
+  vertical-align: middle
+  cursor: pointer
+  user-select: none
+  color: lighten($text-1-color, 30%)
+  margin: $input-margin
+  padding: ((rem($form-control-height) - (@line-height * @font-size)) / 2) 0
+
+  &:hover
+    color: $text-1-color
+
+  input
+    appearance: none
+    border: 1px solid #D0D0D0
+    display: inline-block
+    border-radius: 1px
+    vertical-align: top
+    width: rem($checkbox-size)
+    height: rem($checkbox-size)
+    margin: ((@line-height * @font-size - rem($checkbox-size)) / 2) 0
+    margin-right: rem(5px)
+    position: relative
+    outline: 0
+    transition: background .1s linear
+    background: none
+    cursor: pointer
+
+    &:after
+      content: ''
+      width: rem(10px)
+      height: rem(6px)
+      position: absolute
+      top: rem(3px)
+      left: rem(2px)
+      border: 2px solid #FFF
+      border-top: none
+      border-right: none
+      background: transparent
+      transform: rotate(-65deg) scale(0.5)
+      opacity: 0
+
+    &:enabled:hover
+      border-color: rgba($secondary-color, 0.7)
+
+    &:checked
+      background: $secondary-color
+      border-color: $secondary-color
+
+    &:checked:after
+      opacity: 1
+      transform: rotate(-45deg)
+
+    &:disabled
+      opacity: 0.5
+
+  &.compact
+    margin-bottom: 0
+    line-height: 1.2
+    padding: ((rem($compact-control-height) - (@line-height * @font-size)) / 2) 0
+
+    input
+      margin: ((@line-height * @font-size - rem($checkbox-size)) / 2) 0
+      margin-right: rem(5px)
+
+label.checkbox.inverse
+  color: rgba($immersive-text-color, 0.8)
+
+  input
+    color: $immersive-text-color
+    border-color: rgba($immersive-text-color, 0.4)
+
+    &:disabled, &:read-only
+      color: rgba($immersive-text-color, 0.6)
+
+    &:enabled:read-write:hover
+      border-color: rgba($immersive-text-color, 0.8)
+
+    &:enabled:read-write:focus
+      border-color: $immersive-primary-color
+
+  &.focus
+    color: $immersive-primary-color

ui/components/form/form.page.js

@@ -0,0 +1,15 @@
+import { AutoloadPage } from 'vj/misc/PageLoader';
+
+const formPage = new AutoloadPage('formPage', () => {
+  $(document).on('vjFormDisableUpdate', 'input, select, textarea', (ev) => {
+    const $input = $(ev.currentTarget);
+    const $formItem = $input.closest('.form__item');
+    if ($input.prop('disabled')) {
+      $formItem.addClass('is--disabled');
+    } else {
+      $formItem.removeClass('is--disabled');
+    }
+  });
+});
+
+export default formPage;

ui/components/form/form.page.styl

@@ -0,0 +1,199 @@
+// Extracted from Foundation framework
+
+/**
+   * Known limitation: by default, Chrome and Safari on OS X allow very limited
+   * styling of `select`, unless a `border` property is set.
+   */
+/**
+   * 1. Correct color not being inherited.
+   *    Known issue: affects color of disabled elements.
+   * 2. Correct font properties not being inherited.
+   * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+   */
+button,
+input,
+optgroup,
+select,
+textarea
+  color: inherit
+  /* 1 */
+  font: inherit
+  /* 2 */
+  margin: 0
+  /* 3 */
+
+/**
+   * Address `overflow` set to `hidden` in IE 8/9/10/11.
+   */
+button
+  overflow: visible
+
+/**
+   * Address inconsistent `text-transform` inheritance for `button` and `select`.
+   * All other form control elements do not inherit `text-transform` values.
+   * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+   * Correct `select` style inheritance in Firefox.
+   */
+button,
+select
+  text-transform: none
+
+/**
+   * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+   *    and `video` controls.
+   * 2. Correct inability to style clickable `input` types in iOS.
+   * 3. Improve usability and consistency of cursor style between image-type
+   *    `input` and others.
+   */
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"]
+  appearance: button
+  /* 2 */
+  cursor: pointer
+  /* 3 */
+
+/**
+   * Re-set default cursor for disabled elements.
+   */
+button[disabled],
+html input[disabled]
+  cursor: not-allowed
+
+/**
+   * Remove inner padding and border in Firefox 4+.
+   */
+button::-moz-focus-inner,
+input::-moz-focus-inner
+  border: 0
+  padding: 0
+
+/**
+   * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+   * the UA stylesheet.
+   */
+input
+  line-height: normal
+
+/**
+   * It's recommended that you don't attempt to style these elements.
+   * Firefox's implementation doesn't respect box-sizing, padding, or width.
+   *
+   * 1. Address box sizing set to `content-box` in IE 8/9/10.
+   * 2. Remove excess padding in IE 8/9/10.
+   */
+input[type="checkbox"],
+input[type="radio"]
+  box-sizing: border-box
+  /* 1 */
+  padding: 0
+  /* 2 */
+
+/**
+   * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+   * `font-size` values of the `input`, it causes the cursor style of the
+   * decrement button to change from `default` to `text`.
+   */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button
+  height: auto
+
+/**
+   * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+   * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+   */
+input[type="search"]
+  appearance: textfield
+  /* 1 */
+  box-sizing: content-box
+  /* 2 */
+
+/**
+   * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+   * Safari (but not Chrome) clips the cancel button when the search input has
+   * padding (and `textfield` appearance).
+   */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration
+  -webkit-appearance: none
+
+/**
+   * Define consistent border, margin, and padding.
+   * [NOTE] We don't enable this ruleset in Foundation, because we want the <fieldset> element to have plain styling.
+   */
+/* fieldset
+    border: 1px solid #c0c0c0
+    margin: 0 2px
+    padding: 0.35em 0.625em 0.75em
+   */
+/**
+   * 1. Correct `color` not being inherited in IE 8/9/10/11.
+   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+   */
+legend
+  border: 0
+  /* 1 */
+  padding: 0
+  /* 2 */
+
+/**
+   * Remove default vertical scrollbar in IE 8/9/10/11.
+   */
+textarea
+  overflow: auto
+
+/**
+   * Don't inherit the `font-weight` (applied by a rule above).
+   * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+   */
+optgroup
+  font-weight: bold
+
+.form--inline
+  display: inline
+
+textarea
+  height: auto
+  border-radius: 0px
+  resize: vertical
+
+select
+  width: 100%
+  border-radius: 0px
+
+button
+  appearance: none
+  background: transparent
+  padding: 0
+  border: 0
+  border-radius: 0px
+  line-height: 1
+
+[data-whatinput='mouse'] button
+  outline: 0
+
+label
+  display: block
+  margin: 0
+  font-size: rem($font-size-secondary)
+  line-height: 1.8
+  color: $label-color
+
+  input, textarea, select
+    display: block
+
+.help-text
+  margin-top: -0.5rem
+  margin-bottom: 1rem
+  font-size: rem($font-size-small)
+  color: $help-text-color
+
+.form__item
+  transition: opacity .1s linear
+
+  &.is--disabled
+    opacity: 0.3
+
+  :disabled
+    opacity: 1

ui/components/form/multiSelectCheckbox.page.js

@@ -0,0 +1,45 @@
+import { AutoloadPage } from 'vj/misc/PageLoader';
+
+const lastSelectionByGroup = {};
+
+function isInGroup(group) {
+  return (idx, element) => element.getAttribute('data-checkbox-group') === group;
+}
+
+function onRangeRoleCheckboxClick(ev) {
+  const $current = $(ev.currentTarget);
+  const targetGroup = $current.attr('data-checkbox-group');
+  const $targets = $('[type="checkbox"]')
+    .filter(isInGroup(targetGroup))
+    .filter(':visible')
+    .filter(':not(:disabled)');
+  if (ev.shiftKey && lastSelectionByGroup[targetGroup]) {
+    const destCheck = lastSelectionByGroup[targetGroup].prop('checked');
+    const from = $targets.index(lastSelectionByGroup[targetGroup]);
+    const to = $targets.index($current);
+    const start = Math.min(from, to);
+    const end = Math.max(from, to) + 1;
+    $targets
+      .slice(start, end)
+      .prop('checked', destCheck);
+  }
+  lastSelectionByGroup[targetGroup] = $current;
+}
+
+function onToggleRoleCheckboxClick(ev) {
+  const $current = $(ev.currentTarget);
+  const targetGroup = $current.attr('data-checkbox-toggle');
+  const $targets = $('[type="checkbox"]')
+    .filter(isInGroup(targetGroup))
+    .filter(':visible')
+    .filter(':not(:disabled)');
+  const destCheck = $current.prop('checked');
+  $targets.prop('checked', destCheck);
+}
+
+const multiSelectCheckboxPage = new AutoloadPage('multiSelectCheckboxPage', () => {
+  $(document).on('click', '[data-checkbox-range]', onRangeRoleCheckboxClick);
+  $(document).on('click', '[data-checkbox-toggle]', onToggleRoleCheckboxClick);
+});
+
+export default multiSelectCheckboxPage;

ui/components/form/radiobox.page.styl

@@ -0,0 +1,62 @@
+@import './var.inc.styl'
+
+$radiobox-size = 16px
+
+.radiobox
+  display: block
+  font-size: rem($font-size-secondary)
+  line-height: 1.4
+  border: 0
+  cursor: pointer
+  user-select: none
+  color: lighten($text-1-color, 30%)
+  margin: $input-multi-line-margin
+
+  &:hover
+    color: $text-1-color
+
+  input
+    display: inline-block
+
+.radiobox-container
+  margin: $input-margin
+
+// Image Radio Box
+
+.radiobox.with-image
+  margin: $input-image-radio-margin
+
+  .radiobox__image-container
+    cursor: pointer
+    border: 2px solid #DDD
+    transition: border-color .1s linear, opacity .1s linear
+    padding: 1px
+    overflow: hidden
+    position: relative
+    opacity: 0.7
+
+    &:hover
+      border: 2px solid $primary-color
+      opacity: 1
+
+    &:after
+      position: absolute
+      width: rem(20px)
+      height: rem(20px)
+      right: rem(-10px)
+      top: rem(-10px)
+      transform: translateX(10px) translateY(-10px) rotate(45deg)
+      background: $highlight-color
+      content: ''
+      transition: transform .1s ease-out-cubic
+
+  input
+    visibility: hidden
+    position: absolute
+
+    &:checked + .radiobox__image-container
+      border: 2px solid $highlight-color
+      opacity: 1
+
+      &:after
+        transform: rotate(45deg)

ui/components/form/select.page.styl

@@ -0,0 +1,29 @@
+@import './var.inc.styl'
+
+.select
+  form-styles()
+  padding-right: 1.1rem
+  background-color: $input-background-color
+  background-image: url('~vj/misc/icons/' + $icon-expand_more-file)
+  background-size: 16px 16px
+  background-position: right -1rem center
+  background-origin: content-box
+  background-repeat: no-repeat
+  outline: $input-outline
+  transition: outline-color .2s, border-color .2s
+  transition-timing-function: ease-out-cubic
+
+  &:focus
+    border-color: $input-focus-border-color
+    outline: $input-focus-outline
+    outline-offset: 0
+
+  &:disabled
+    opacity: 0.5
+
+.select-container.compact .select, .select.compact
+  margin-bottom: 0
+  height: rem($compact-control-height)
+  line-height: rem($compact-control-height - 2)
+  padding-top: 0
+  padding-bottom: 0

ui/components/form/textbox.page.js

@@ -0,0 +1,20 @@
+import { AutoloadPage } from 'vj/misc/PageLoader';
+
+const textboxPage = new AutoloadPage('textboxPage', () => {
+  $(document).on('focusin', '.textbox.material input', (ev) => {
+    $(ev.currentTarget).parent().addClass('focus');
+  });
+
+  $(document).on('focusout', '.textbox.material input', (ev) => {
+    $(ev.currentTarget).parent().removeClass('focus');
+  });
+
+  const $focusElement = $(document.activeElement);
+  if ($focusElement.prop('tagName') === 'INPUT'
+    && $focusElement.parent().is('.textbox.material')
+  ) {
+    $focusElement.focusin();
+  }
+});
+
+export default textboxPage;

ui/components/form/textbox.page.styl

@@ -0,0 +1,72 @@
+@import './var.inc.styl'
+
+// Normal Textbox
+input.textbox, textarea.textbox
+  form-styles()
+  background-color: $input-background-color
+  outline: $input-outline
+  transition: outline-color .2s, border-color .2s
+  transition-timing-function: ease-out-cubic
+
+  &:focus
+    border-color: $input-focus-border-color
+    outline: $input-focus-outline
+    outline-offset: 0
+
+  // Overwrite, for IE compatibility
+  &:read-only
+    outline: 0
+
+  &:disabled
+    opacity: 0.5
+
+textarea.textbox
+  height: rem(200px)
+
+.data-table
+  input.textbox, textarea.textbox
+    margin-bottom: 0
+
+// Material Textbox
+label.textbox.material
+  input
+    form-styles()
+    border: 0
+    background: none
+    outline: 0
+    padding-left: 0
+    padding-right: 0
+    color: $text-1-color
+    border-bottom: 2px solid rgba($text-1-color, 0.4)
+    transition: border-color .2s ease-out-cubic
+
+    &:disabled, &:read-only
+      color: rgba($text-1-color, 0.6)
+
+    &:enabled:read-write:hover
+      border-color: rgba($text-1-color, 0.8)
+
+    &:enabled:read-write:focus
+      border-color: $input-focus-border-color
+
+  &.focus
+    color: $input-focus-border-color
+
+label.textbox.material.inverse
+  color: rgba($immersive-text-color, 0.8)
+
+  input
+    color: $immersive-text-color
+    border-color: rgba($immersive-text-color, 0.4)
+
+    &:disabled, &:read-only
+      color: rgba($immersive-text-color, 0.6)
+
+    &:enabled:read-write:hover
+      border-color: rgba($immersive-text-color, 0.8)
+
+    &:enabled:read-write:focus
+      border-color: $immersive-primary-color
+
+  &.focus
+    color: $immersive-primary-color

ui/components/form/var.inc.styl

@@ -0,0 +1,14 @@
+form-styles()
+  appearance: none
+  display: block
+  width: 100%
+  font-size: rem($font-size-secondary)
+  margin: $input-margin
+  height: rem($form-control-height)
+  line-height: 1.2
+  padding: rem(5px)
+  border: $input-border
+
+  &.inline
+    display: inline-block
+    width: auto