paint-rails 0.7.24 → 0.8.27.1

data/vendor/assets/stylesheets/{components → paint/components}/_dropdown.scss

@@ -1,9 +1,15 @@
-$dropdown-background-color: $white !default;
-$dropdown-border-color: $global-section-border-color !default;
+////
+/// Dropdown Component Styles
+/// @group dropdown
+/// @since v0.8.5
+////
+
+$dropdown-background-color: color(white) !default;
+$dropdown-border-color: color(border) !default;
 $dropdown-z-index: 100 !default;
-$dropdown-link-color: $body-font-color !default;
-$dropdown-link-hover-color: $black !default;
-$dropdown-link-hover-background-color: $global-section-border-color !default;
+$dropdown-link-color: color(text) !default;
+$dropdown-link-hover-color: color(black) !default;
+$dropdown-link-hover-background-color: color(border) !default;
 $dropdown-link-active-color: $dropdown-link-color !default;
 $dropdown-link-active-background-color: lighten($dropdown-link-hover-background-color, 50%) !default;
 $dropdown-link-disabled-color: lighten($dropdown-link-color, 50%) !default;
@@ -129,7 +135,7 @@ $include-html-paint-dropdown: true !default;
       i {
         @include icon(search);
 
-        color: $primary-color;
+        color: color(primary);
         line-height: $dropdown-search-icon-size;
       }
     }

data/vendor/assets/stylesheets/{components → paint/components}/_flip-panel.scss

@@ -1,5 +1,53 @@
+////
+/// Flip Panel
+/// @group panel
+/// @since v0.8.5
+////
+
 @import 'panel';
 
+/// Default settings
+
+/// @example scss - Usage
+///   .flip-panel {
+///     @include flip-panel;
+///   }
+///
+/// @example html - Default Markup
+/// <div class="flip-panel [flipped]">
+///   <div class="front">
+///     <header>
+///       <h1>Flip Panel Front</h1>
+///     </header>
+///
+///     <div class="content">
+///       <section>
+///         Flip panel front section content
+///       </section>
+///     </div>
+///
+///     <footer>
+///       <span><a>More information</a></span>
+///     </footer>
+///   </div> <!-- .front -->
+///
+///   <div class="back">
+///     <header>
+///       <h1><a><i class="back-icon"></i> Back to Front</a></h1>
+///     </header>
+///
+///     <div class="content">
+///       <section>
+///         <p>Flip panel back content</p>
+///       </section>
+///     </div>
+///   </div> <!-- .back -->
+/// </div>
+///
+/// @example html - Animation
+///   Toggle class `.flipped` on the main selector to trigger the flipping animation
+///
+
 $flip-panel-default-settings: (
   header-height: panel-settings(header-height),
   footer-height: panel-settings(footer-height),
@@ -10,22 +58,22 @@ $flip-panel-default-settings: (
   transition-settings: .3s ease-in-out
 );
 
-@if global-variable-exists(flip-panel) {
-  $flip-panel: map-merge-settings($flip-panel-default-settings, $flip-panel);
-} @else {
-  $flip-panel: $flip-panel-default-settings;
-}
+$flip-panel: () !default;
+$flip-panel: map-merge-settings($flip-panel-default-settings, $flip-panel);
 
 $include-html-paint-flip-panel: true !default;
 
 @function flip-panel-settings($setting, $property: null) {
   @if $property {
-    @return map-get(map-get($flip-panel, $setting), $property),
+    @return map-get(map-get($flip-panel, $setting), $property);
   } @else {
-    @return map-get($flip-panel, $setting)
+    @return map-get($flip-panel, $setting);
   }
 }
 
+/// Generate icons used for the panel header
+/// @access private
+
 @mixin flip-panel-icons {
   $flip-panel-icons: flip-panel-settings(icons);
 
@@ -36,6 +84,11 @@ $include-html-paint-flip-panel: true !default;
   }
 }
 
+/// Create the scrollable content block based on the presence of header and footer
+/// @access private
+/// @param {Boolean} $with-header [true] - Specify if the panel has a header
+/// @param {Boolean} $with-footer [false] - Specify if the panel has a footer
+
 @mixin flip-panel-scroll-content($with-header: true, $with-footer: false) {
   @if $with-header {
     top: flip-panel-settings(header-height);
@@ -54,6 +107,14 @@ $include-html-paint-flip-panel: true !default;
   right: 0;
 }
 
+/// Mixin that generates the flip-panel styles
+/// @access public
+/// @param {Boolean} $with-front-header [true] - Specify if the panel front has a header
+/// @param {Boolean} $with-front-footer [true] - Specify if the panel front has a footer
+/// @param {Boolean} $with-back-header [true] - Specify if the panel back has a header
+/// @param {Boolean} $with-back-footer [false] - Specify if the panel back has a footer
+/// @param {value} $min-height [false] - Specify a fixed height for the panel
+
 @mixin flip-panel (
   $with-front-header: true,
   $with-front-footer: true,

data/vendor/assets/stylesheets/paint/components/_form.scss

@@ -0,0 +1,882 @@
+@import 'button';
+
+$form-with-border: true !default;
+$form-field-selector: '.form-field' !default;
+$form-field-with-errors: '.with-errors' !default;
+$form-field-error-selector: '.error' !default;
+$form-select-selector: '.form-select' !default;
+$form-multi-select-selector: '.form-multi-select' !default;
+$form-submission-action-selector: '.action' !default;
+$form-submission-action-active: '.active' !default;
+$form-submission-action-confirmation-selector: '.confirmation' !default;
+$form-confirm-border-color: transparentize($white, .65) !default;
+$form-input-background: linear-gradient(to top, transparent, rgba($black, .03)) !default;
+$form-input-background-color: $white !default;
+$form-input-border-color: darken($white, 10%) !default;
+$form-input-border-color-focused: $smoke !default;
+$form-input-disabled-bg: rgba(255, 255, 255, 0) !default;
+$form-input-height: $button-small-height !default;
+$form-input-padding: $form-input-height - $base-font-size !default;
+$form-input-shadow-color: rgba($black, .08) !default;
+$form-input-text-color: $small-font-color !default;
+$form-input-disabled-text-color: lighten($form-input-text-color, 20%) !default;
+$form-label-height: $form-input-height;
+$form-select-arrow-size: 4px !default;
+$form-select-background: linear-gradient(to bottom, transparent, rgba($black, .03)) !default;
+$form-multi-select-icon-color: $small-font-color !default;
+$form-multi-select-icon-size: 14px !default;
+$form-multi-select-option-color: $form-input-text-color !default;
+$form-multi-select-item-border: 0 !default;
+$form-multi-select-item-background: color(gray, jet) !default;
+$form-multi-select-item-color: color(white) !default;
+$form-multi-select-option-focused-background: color(border, light) !default;
+$form-multi-select-option-focused-color: color(text) !default;
+$form-multi-select-dropdown-icon: plus !default;
+$form-multi-select-options-max-height: 200px !default;
+
+$form-multi-checkbox-option-checked-background: color(info, light);
+$form-multi-checkbox-option-checked-color: color(info, dark);
+
+$include-html-paint-form: true !default;
+
+@mixin form($with-border: $form-with-border) {
+  @extend %grid-column-12;
+
+  padding: 0 !important;
+
+  @if $with-border {
+    background-color: lighten($panel-bg, 2%);
+    border: solid 1px color(border);
+    border-radius: $global-radius;
+  }
+}
+
+@mixin form-fieldset($with-border: $form-with-border) {
+  border: 0;
+  margin-bottom: 0;
+
+  @if $with-border {
+    padding: $column-gutter / 2 $column-gutter / 2 0;
+  } @else {
+    padding: 0;
+  }
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid color(border);
+  }
+
+  legend {
+    display: none;
+  }
+}
+
+@mixin form-field() {
+  min-height: $form-input-height * 3;
+
+  &#{$form-field-with-errors} {
+    #{$form-field-error-selector} {
+      color: color(alert);
+      font-size: $small-font-size;
+      line-height: $form-input-height / 2;
+      padding-left: $column-gutter / 2;
+    }
+
+    input,
+    textarea,
+    &#{$form-select-selector} > div {
+      @include single-transition(border-color, 150ms, linear);
+
+      border-color: color(alert, light);
+    }
+  }
+}
+
+@mixin form-label() {
+  font-size: $h5-font-size;
+  font-weight: $font-weight-bold;
+  line-height: $form-label-height;
+  min-height: $form-label-height;
+}
+
+@mixin form-input() {
+  @include form-input-shared-properties;
+
+  font-size: $base-font-size;
+  line-height: $form-input-height;
+  margin-bottom: 0;
+  padding: 0 $form-input-padding / 2;
+
+  &::-webkit-input-placeholder {
+    color: lighten($form-input-text-color, 20%);
+  }
+}
+
+@mixin form-checkbox($inner-wrapper: '.content', $float: left, $inline: false) {
+  @if ($inner-wrapper == null) {
+    $inner-wrapper: '&';
+  }
+
+  $label-margin-direction: right;
+
+  @if ($float == left) {
+    $label-margin-direction: left;
+  }
+
+  @if $inline {
+    width: auto !important;
+  }
+  
+  min-height: $form-input-height * 2;
+
+  label {
+    display: inline-block;
+    margin-#{$label-margin-direction}: $column-gutter / 2;
+  }
+
+  #{$inner-wrapper} {
+    display: inline-block;
+    float: $float;
+    line-height: $form-input-height;
+  }
+}
+
+@mixin form-select($inner-wrapper: '.content', $inline: false) {
+  @if ($inner-wrapper == null) {
+    $inner-wrapper: '&';
+  }
+
+  #{$inner-wrapper} {
+    @include form-input-shared-properties;
+    @include form-select-arrow;
+
+    background: $white;
+    background-image: $form-select-background !important;
+    line-height: $form-input-height;
+    overflow: hidden;
+    position: relative;
+
+    @if $inline {
+      float: left;
+      padding-right: $column-gutter;
+    }
+
+    select {
+      -webkit-appearance: none;
+      background: rgba($black, 0);
+      border: 0;
+      border-radius: $global-radius;
+      color: $form-input-text-color;
+      font-size: $base-font-size;
+      margin: 0;
+      padding: 0 $form-input-padding / 2;
+      position: relative;
+      text-shadow: 0 1px $white;
+      width: 130%;
+
+      &:focus {
+        color: color(link);
+        outline: none;
+        width: 100%;
+        z-index: 1;
+      }
+
+      > option {
+        background: color(gray, silver);
+        border-radius: $global-radius;
+        cursor: pointer;
+        margin: 3px;
+        padding: 3px 8px;
+        text-shadow: none;
+      }
+    }
+  }
+
+  &.disabled,
+  &.disabled #{$inner-wrapper} {
+    &,
+    select {
+      @include form-input-disabled;
+    }
+  }
+}
+
+@mixin form-multi-select-item-label($item-height) {
+  line-height: $item-height;
+  padding: 0 $form-multi-select-icon-size;
+  text-shadow: none;
+  transition: padding .125s ease;
+}
+
+@mixin form-multi-select-item($item, $label, $icon) {
+  $item-height: $form-multi-select-icon-size * 2;
+
+  #{$item} {
+    background-color: $form-multi-select-item-background;
+    border: $form-multi-select-item-border;
+    border-radius: $global-radius;
+    color: $form-multi-select-item-color;
+    float: left;
+    font-size: $small-font-size;
+    margin: $column-gutter / 5 $column-gutter / 5 $column-gutter / 5 0;
+    position: relative;
+
+    &:first-child {
+      margin-left: - $column-gutter / 5;
+    }
+
+    @if $label == false {
+      @include form-multi-select-item-label($item-height);
+    } @else {
+      &:hover {
+        #{$label} {
+          padding: 0 $form-multi-select-icon-size * 1.5 0 $form-multi-select-icon-size / 2;
+        }
+
+        #{$icon} {
+          display: block;
+        }
+      }
+
+      #{$label},
+      #{$icon} {
+        vertical-align: middle;
+      }
+
+      #{$label} {
+        @include form-multi-select-item-label($item-height);
+
+        display: block;
+      }
+
+      #{$icon} {
+        @include icon(times);
+
+        cursor: pointer;
+        display: none;
+        height: $item-height;
+        line-height: $item-height;
+        position: absolute;
+        right: -$form-multi-select-icon-size * 1000;
+        transition: color 300ms ease-in;
+        width: $form-multi-select-icon-size;
+
+        &:hover {
+          color: color(alert);
+        }
+
+        &:before {
+          font-size: $small-font-size;
+          left: -$form-multi-select-icon-size * 1000;
+          line-height: $item-height;
+          position: absolute;
+        }
+      }
+    }
+  }
+}
+
+@mixin form-multi-select-input() {
+  > input {
+    -webkit-appearance: none;
+    background: none !important;
+    border: 0 !important;
+    box-shadow: none !important;
+    cursor: default;
+    display: inline-block;
+    font-family: inherit;
+    line-height: $form-input-height;
+    margin: 0;
+    outline: none;
+    padding: 0 !important;
+    width: 100%;
+  }
+}
+
+@mixin form-multi-select-input-selector($selector: false) {
+  @if $selector {
+    #{$selector} {
+      @include form-multi-select-input;
+
+      display: block;
+      width: auto;
+    }
+  } @else {
+    @include form-multi-select-input;
+  }
+}
+
+@mixin form-multi-select-options($options, $option, $is-focused-selector) {
+  background-color: color(white);
+  border-radius: 0 0 $global-radius $global-radius;
+  border: 1px solid $form-input-border-color;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
+  box-sizing: border-box;
+  display: none;
+  margin-bottom: $column-gutter / 2;
+  margin-top: -1px;
+  max-height: $form-multi-select-options-max-height;
+  min-width: 100%;
+  -webkit-overflow-scrolling: touch;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+  top: 100%;
+  z-index: 1;
+
+  #{$options} {
+    margin: 0;
+    padding: 0;
+    padding-right: 20%;
+    width: 120%;
+  }
+
+  #{$option} {
+    border-bottom: 1px solid $form-input-border-color;
+    box-sizing: border-box;
+    color: $form-multi-select-option-color;
+    cursor: pointer;
+    display: block;
+    font-size: $small-font-size;
+    padding: $column-gutter / 4 $column-gutter / 2;
+
+    &:last-child {
+      border: 0;
+      border-radius: 0 0 $global-radius $global-radius;
+    }
+
+    &#{$is-focused-selector},
+    &:hover {
+      background-color: $form-multi-select-option-focused-background;
+      color: $form-multi-select-option-focused-color;
+      transition: background .125s ease;
+    }
+
+    &#{$is-focused-selector}::last-child {
+      margin-bottom: -1px;
+    }
+  }
+}
+
+@mixin form-multi-select(
+  $control: '.control',
+  $item: '.item',
+  $item-label: '.label',
+  $item-icon: '.icon',
+  $input-selector: false,
+  $add-selector: '.add',
+  $clear-all-selector: false,
+  $options-selector: '.options-selector',
+  $options: '.options',
+  $option: '.option',
+  $is-open-selector: '.is-open',
+  $has-items-selector: '.has-value',
+  $is-focused-selector: '.is-focused'
+) {
+  position: relative;
+
+  &#{$is-open-selector} > #{$control},
+  #{$is-open-selector}#{$control} {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-color: $form-input-border-color-focused;
+  }
+
+  &#{$is-open-selector} > #{$options-selector},
+  #{$is-open-selector} + #{$options-selector} {
+    display: block;
+  }
+
+  &#{$is-focused-selector} > #{$control},
+  &#{$is-focused-selector} > #{$options-selector},
+  #{$is-focused-selector}#{$control},
+  #{$is-focused-selector} + #{$options-selector} {
+    border-color: $form-input-border-color-focused;
+  }
+
+  &#{$has-items-selector} > #{$control},
+  #{$has-items-selector}#{$control} {
+    > .loading {
+      right: $column-gutter;
+    }
+
+    #{$input-selector} input,
+    > input {
+      width: auto;
+    }
+  }
+
+  &#{$is-open-selector} #{$input-selector} {
+    display: block;
+    width: 100%;
+  }
+
+  #{$control} {
+    @include form-input;
+    @include form-multi-select-input-selector($selector: $input-selector);
+    @include form-multi-select-item(
+      $item: $item,
+      $label: $item-label,
+      $icon: $item-icon
+    );
+
+    background-color: $form-input-background-color;
+    position: relative;
+  }
+
+  #{$add-selector},
+  #{$clear-all-selector} {
+    color: $form-multi-select-icon-color;
+    cursor: pointer;
+    height: $form-input-height;
+    line-height: $form-input-height;
+    overflow: hidden;
+    position: absolute;
+    text-align: right;
+    text-shadow: none;
+    top: 0;
+    width: $form-input-height;
+  }
+
+  #{$clear-all-selector} {
+    @include button-icon(trash-o);
+
+    margin: $column-gutter / 4
+      $column-gutter / 6
+      $column-gutter / 4
+      $column-gutter / 4;
+    right: $form-multi-select-icon-size;
+
+    &:hover {
+      color: color(alert, light);
+    }
+  }
+
+  #{$add-selector} {
+    @include button-icon($form-multi-select-dropdown-icon);
+
+    margin: $column-gutter / 4  0;
+    right: 0;
+
+    &:hover {
+      color: color(info);
+    }
+  }
+
+  #{$options-selector} {
+    @include form-multi-select-options(
+      $options: $options,
+      $option: $option,
+      $is-focused-selector: $is-focused-selector
+    );
+  }
+
+  .loading {
+    animation: spin 400ms infinite linear;
+    border: 2px solid color(gray, iron);
+    border-radius: 50%;
+    border-right-color: color(gray, oil);
+    box-sizing: border-box;
+    display: inline-block;
+    height: $form-multi-select-icon-size;
+    margin-top: -$form-multi-select-icon-size / 2;
+    position: relative;
+    right: $column-gutter;
+    top: 50%;
+    width: $form-multi-select-icon-size;
+  }
+}
+
+@mixin form-multi-checkbox-icon($icon) {
+  &:before {
+    @include icon($icon);
+    
+    float: right;
+    font-size: $small-font-size;
+    line-height: $form-input-height;
+    margin-left: $column-gutter / 2;
+  }
+}
+
+@mixin form-multi-checkbox-option(
+  $is-checked-selector: $is-checked-selector,
+  $option-whitespace: normal
+) {
+  white-space: $option-whitespace;
+
+  &:before {
+    @include icon(square-o);
+
+    color: color(text, small);
+    margin-right: $column-gutter / 4;
+  }
+
+  &#{$is-checked-selector} {
+    background-color: $form-multi-checkbox-option-checked-background;
+    color: $form-multi-checkbox-option-checked-color;
+
+    &:before {
+      @include icon(check);
+
+      color: $form-multi-checkbox-option-checked-color;
+    }
+  }
+}
+
+@mixin form-multi-checkbox-options(
+  $options: $options,
+  $option: $option,
+  $option-whitespace: $option-whitespace,
+  $is-focused-selector: $is-focused-selector,
+  $is-checked-selector: $is-checked-selector
+) {
+  @include form-multi-select-options($options, $option, $is-focused-selector);
+
+  #{$option} {
+    @include form-multi-checkbox-option($is-checked-selector, $option-whitespace);
+  }
+}
+
+@mixin form-multi-checkbox(
+  $control: '.control',
+  $options-selector: '.options-selector',
+  $options: '.options',
+  $option: '.option',
+  $option-whitespace: nowrap,
+  $is-open-selector: '.is-open',
+  $has-items-selector: '.has-value',
+  $is-focused-selector: '.is-focused',
+  $is-checked-selector: '.is-checked'
+) {
+  position: relative;
+
+  #{$control} {
+    @include form-input;
+    @include form-multi-checkbox-icon(plus);
+
+    background-color: $form-input-background-color;
+    display: block;
+  }
+
+  &#{$is-open-selector} > #{$control},
+  #{$is-open-selector}#{$control} {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-color: $form-input-border-color-focused;
+  }
+
+  &#{$is-open-selector} > #{$options-selector},
+  #{$is-open-selector} + #{$options-selector} {
+    display: block;
+  }
+
+  &#{$is-focused-selector} > #{$control},
+  &#{$is-focused-selector} > #{$options-selector},
+  #{$is-focused-selector}#{$control},
+  #{$is-focused-selector} + #{$options-selector} {
+    border-color: $form-input-border-color-focused;
+  }
+
+  &#{$has-items-selector} > #{$control} {
+    @include form-multi-checkbox-icon(check);
+  }
+
+  #{$options-selector} {
+    @include form-multi-checkbox-options(
+      $options: $options,
+      $option: $option,
+      $option-whitespace: $option-whitespace,
+      $is-focused-selector: $is-focused-selector,
+      $is-checked-selector: $is-checked-selector
+    );
+  }
+}
+
+@mixin form-textarea() {
+  @include form-input-shared-properties;
+
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+  min-height: $form-input-height * 3;
+  padding: $form-input-padding / 2;
+}
+
+@mixin form-submission-action($height: false) {
+  float: left;
+
+  &:not(:first-child) {
+    margin-left: $column-gutter / 2;
+  }
+
+  #{$form-submission-action-confirmation-selector} {
+    backface-visibility: hidden;
+    background-color: color(alert);
+    bottom: 0;
+    color: color(white);
+    left: 0;
+    padding: $column-gutter !important;
+    position: absolute;
+    right: 0;
+    text-align: right;
+    top: 0;
+    transform: rotateX(180deg) rotateY(0deg);
+    transform-style: preserve-3d;
+    transition: transform .250s ease-in-out;
+    z-index: 300;
+
+    &.warning {
+      background-color: color(warning);
+    }
+
+    &.info {
+      background-color: color(link);
+    }
+
+    &.success {
+      background-color: color(success);
+    }
+
+    span {
+      float: left;
+      line-height: $button-large-height;
+      padding: 0;
+    }
+
+    @if $height {
+      span {
+        line-height: $height !important;
+      }
+    }
+
+    button {
+      background-color: transparent;
+      border: solid 1px $form-confirm-border-color;
+      color: $white;
+
+      &:hover {
+        background-color: $form-confirm-border-color;
+      }
+    }
+
+    a {
+      color: $white;
+    }
+  }
+
+  &#{$form-submission-action-active} {
+    #{$form-submission-action-confirmation-selector} {
+      transform: rotateX(0deg);
+    }
+  }
+}
+
+@mixin form-submission($with-border: $form-with-border, $standalone: false, $height: false) {
+  @extend %grid-column-12;
+  @include single-transition(background-color, 150ms, linear);
+
+  position: relative;
+
+  @if $standalone == false {
+    background-color: color(white);
+    border-top: 1px solid color(border);
+
+    @if $with-border {
+      border-bottom-left-radius: $global-radius;
+      border-bottom-right-radius: $global-radius;
+      padding: $column-gutter !important;
+    } @else {
+      padding: $column-gutter $column-gutter / 2 !important;
+    }
+  } @else {
+    border: 0 !important;
+    border-radius: 0 !important;
+    padding: 0 $column-gutter / 2 !important;
+  }
+
+  @if $height {
+    height: $height;
+    line-height: $height;
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
+  }
+
+  #{$form-submission-action-selector} {
+    @include form-submission-action($height: $height);
+  }
+
+  button {
+    @include single-transition(background-color, 150ms, linear);
+
+    margin-bottom: 0 !important;
+
+    &[type='submit'] {
+      @extend %button-primary;
+
+      &:disabled {
+        @include button-disabled;
+      }
+    }
+
+    &.secondary {
+      @extend %button-secondary;
+    }
+
+    &.error {
+      @extend %button-error;
+    }
+
+    &.warning {
+      @extend %button-warning;
+    }
+
+    &.info {
+      @extend %button-info;
+    }
+
+    &.success {
+      @extend %button-success;
+    }
+  }
+
+  a {
+    color: color(text, small);
+    display: inline-block;
+
+    @if $height {
+      padding: 0 $column-gutter;
+    } @else {
+      padding: $column-gutter / 3 $column-gutter;
+    }
+
+    &:hover {
+      color: color(text);
+    }
+  }
+}
+
+@mixin form-select-arrow() {
+  &:before,
+  &:after {
+    border: $form-select-arrow-size dashed;
+    border-color: color(text, small) transparent;
+    content: '';
+    height: 0;
+    pointer-events: none;
+    position: absolute;
+    right: $form-input-padding / 2;
+    top: ($form-input-padding + $form-select-arrow-size) / 2;
+    width: 0;
+    z-index: 1;
+  }
+
+  &:before {
+    border-bottom-style: solid;
+    border-top: 0;
+  }
+
+  &:after {
+    border-bottom: 0;
+    border-top-style: solid;
+    margin-top: $form-select-arrow-size * 2;
+  }
+}
+
+@mixin form-input-disabled() {
+  background-color: $form-input-disabled-bg;
+  cursor: not-allowed;
+  color: $form-input-disabled-text-color;
+}
+
+@mixin form-input-shared-properties() {
+  background-image: $form-input-background;
+  border: 1px solid;
+  border-color: $form-input-border-color darken($form-input-border-color, 5%);
+  border-radius: $global-radius;
+  box-shadow: 0 1px 1px $form-input-shadow-color;
+  color: $form-input-text-color;
+  height: auto;
+  text-shadow: 0 1px $white;
+
+  &:hover {
+    box-shadow: 0 1px 2px rgba($black, .1);
+  }
+
+  &:focus {
+    background-color: $white;
+    background-image: none;
+  }
+
+  &:disabled,
+  &[disabled],
+  &[readonly] {
+    @include form-input-disabled;
+  }
+}
+
+@mixin form-item-small() {
+  @extend %grid-column-medium-6;
+  @extend %grid-column-large-4;
+}
+
+@mixin form-item-medium() {
+  @extend %grid-column-medium-6;
+  @extend %grid-column-large-6;
+}
+
+@mixin form-item-large() {
+  @extend %grid-column-medium-12;
+  @extend %grid-column-large-12;
+}
+
+@include exports('paint-form') {
+  @if $include-html-paint-form {
+    .form form {
+      @include form;
+
+      .form-fieldset {
+        @include form-fieldset;
+
+        .form-field {
+          @include form-field;
+
+          label {
+            @include form-label;
+          }
+
+          input {
+            @include form-input;
+          }
+
+          &.form-checkbox,
+          &.form-radio {
+            @include form-checkbox;
+          }
+
+          &.form-select {
+            @include form-select;
+          }
+
+          &.form-multi-select .content {
+            @include form-multi-select(
+              $control: '.control',
+              $input-selector: '.input'
+            );
+          }
+
+          &.form-multi-checkbox .content {
+            @include form-multi-checkbox(
+              $control: '.control'
+            );
+          }
+
+          textarea {
+            @include form-textarea;
+          }
+        }
+      }
+    }
+
+    .form-submission {
+      @include form-submission;
+    }
+  }
+}