tao_form 0.1.0

data/lib/assets/stylesheets/tao/form/fields/select/multiple_result.scss

@@ -0,0 +1,72 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/fields/select/multiple_result';
+
+tao-multiple-select-result {
+  min-width: $form-field-width;
+  padding-top: 0.125rem;
+
+  .selected-item {
+    &:hover {
+      background: $white-color;
+      border-color: $red-color;
+
+      .icon-close {
+        fill: $red-color;
+      }
+    }
+
+    &:focus {
+      box-shadow: 0px 0px 2px 0px rgba($border-color, 0.5);
+    }
+  }
+
+  .link-add {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    flex: 0 0 auto;
+    padding: 0 0.625rem 0 0.5rem;
+    margin: $select-item-margin;
+    height: $select-item-height;
+    border: 1px dashed $border-color;
+    background: $white-color;
+    border-radius: $border-radius-s;
+    color: $text-color;
+    font-size: $select-item-font-size;
+    text-decoration: none;
+    outline: none;
+
+    .icon-add {
+      font-size: 1rem;
+      fill: $lighter-grey-color;
+      margin: 0 0.25rem 0 0;
+    }
+
+    &:focus {
+      box-shadow: 0px 0px 2px 0px rgba($border-color, 0.5);
+    }
+  }
+
+  &[active] .link-add,
+  .link-add:hover {
+    color: $link-color;
+    border-color: $form-field-active-border-color;
+
+    .icon-add {
+      fill: $link-color;
+    }
+  }
+
+  &.disabled {
+    .selected-item {
+      &:hover {
+        background-color: $grey-bg-color;
+        border-color: $grey-bg-color;
+      }
+    }
+
+    .link-add {
+      display: none;
+    }
+  }
+}

data/lib/assets/stylesheets/tao/form/fields/select/result.scss

@@ -0,0 +1,101 @@
+@import 'tao/form/globals';
+
+tao-select-result {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: $white-color;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-s;
+  transition: border-color 300ms;
+  cursor: pointer;
+
+  &:hover {
+    border-color: $form-field-active-border-color;
+  }
+
+  &[active],
+  &:focus {
+    border-color: $form-field-active-border-color;
+    outline: none;
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    background: $grey-bg-color;
+    border-color: $light-border-color;
+
+    &[selected][clearable] .link-clear {
+      display: none;
+    }
+
+    .selected-text {
+      color: $lightest-grey-color;
+    }
+  }
+
+  select {
+    display: none;
+  }
+
+  .placeholder,
+  .selected-text {
+    padding: $form-field-padding-v $form-field-padding-h;
+    font-size: $form-field-font-size;
+    line-height: $form-field-line-height;
+    min-height: $form-field-height - 0.125rem;
+  }
+
+  .placeholder {
+    color: $lightest-grey-color;
+  }
+
+  .selected-text {
+    color: $form-field-text-color;
+    display: none;
+  }
+
+  .icon-wrapper,
+  .link-clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: $form-field-height - 0.125rem;
+    height: $form-field-height - 0.125rem;
+    fill: $lighter-grey-color;
+  }
+
+  .link-clear {
+    display: none;
+    text-decoration: none;
+    outline: none;
+
+    &:hover {
+      fill: $grey-color;
+    }
+  }
+
+  &[selected] {
+    .placeholder {
+      display: none;
+    }
+
+    .selected-text {
+      display: block;
+    }
+
+    &[clearable] {
+      &[active],
+      &:hover {
+        .link-clear {
+          display: flex;
+        }
+
+        .icon-arrow-down {
+          display: none;
+        }
+      }
+    }
+  }
+}

data/lib/assets/stylesheets/tao/form/fields/switch.scss

@@ -0,0 +1,12 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/fields/switch';
+
+tao-switch {
+  .switch-wrapper {
+    &:focus {
+      border-color: #63D65C;
+      box-shadow: 0px 0px 4px 0px rgba(#4A90E2, 0.5);
+      outline: none;
+    }
+  }
+}

data/lib/assets/stylesheets/tao/form/index.scss

@@ -0,0 +1,5 @@
+//= require tao/ui
+//= require ./reset
+//= require ./layout
+//= require ./inputs
+//= require ./fields

data/lib/assets/stylesheets/tao/form/inputs/boolean.scss

@@ -0,0 +1,8 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/inputs/boolean';
+
+tao-form .boolean-field {
+  height: $form-field-height;
+  display: flex;
+  align-items: center;
+}

data/lib/assets/stylesheets/tao/form/inputs/group.scss

@@ -0,0 +1,2 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/inputs/group';

data/lib/assets/stylesheets/tao/form/inputs/index.scss

@@ -0,0 +1 @@
+//= require_tree ./

data/lib/assets/stylesheets/tao/form/inputs/text.scss

@@ -0,0 +1,2 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/inputs/text';

data/lib/assets/stylesheets/tao/form/layout.scss

@@ -0,0 +1,148 @@
+@import './globals';
+
+tao-form {
+  display: block;
+
+  form {
+    margin: 2em 0 0 0;
+
+    fieldset {
+      border: none;
+      padding: 0;
+      margin: 0 0 2em 0;
+
+      legend {
+        font-size: $font-size-l;
+        margin: 0 0 1.5em 0;
+      }
+    }
+
+    & > .error {
+      display: block;
+      width: 80%;
+      margin: 0 auto;
+      margin-bottom: 2em;
+      font-size: $font-size-s;
+      padding: 1rem;
+      color: $red-color;
+      border: 1px solid $red-color;
+      border-radius: $border-radius;
+      text-align: center;
+    }
+
+    .form-input {
+      display: flex;
+      align-items: flex-start;
+      align-content: flex-start;
+      margin: 0 0 0.75rem 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .input-label {
+        display: block;
+        width: $form-label-width;
+        flex: 0 0 auto;
+        padding: $form-field-padding-v 0;
+        text-align: right;
+        margin: 0 $form-field-margin-h 0 0;
+        line-height: $form-label-line-height;
+        font-size: $form-label-font-size;
+        color: $light-grey-color;
+
+        &.required abbr {
+          text-decoration: none;
+          color: $red-color;
+          border: none;
+        }
+      }
+
+
+      .input-content {
+        min-height: $form-field-height;
+
+        .input-field-wrapper {
+          margin-bottom: 0.75rem;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .input-field-placeholder {
+          display: inline-block;
+          width: $form-field-width;
+          padding: $form-field-padding-v $form-field-padding-h;
+          line-height: $form-field-line-height;
+          font-size: $form-field-font-size;
+          color: $text-color;
+        }
+
+        & > .bottom-hint {
+          display: block;
+          color: $lighter-grey-color;
+          margin: 0.375rem 0;
+          font-size: $form-hint-font-size;
+        }
+
+        & > .error {
+          color: $red-color;
+          margin: 0.375rem 0;
+          font-size: $form-hint-font-size;
+        }
+      }
+
+      & > .hint {
+        opacity: 0;
+        color: $lighter-grey-color;
+        margin: 0 0 0 $form-field-margin-h;
+        padding: $form-field-padding-v 0;
+        font-size: $form-hint-font-size;
+        line-height: $form-field-line-height;
+        transition: 200ms opacity;
+      }
+
+      &.input-with-errors .input-content .input-field {
+        border-color: $red-color;
+      }
+
+      &:hover, &.focus {
+        .hint {
+          opacity: 1;
+        }
+      }
+    }
+
+    .form-buttons {
+      margin: 2em 0 0 $form-label-width + $form-field-margin-h;
+
+      .success-message {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: $button-padding;
+        font-size: $button-font-size;
+        line-height: $button-line-height;
+        border-radius: $border-radius-s;
+        text-align: center;
+        vertical-align: middle;
+        background: $white-color;
+        border: 1px solid $green-color;
+        color: $green-color;
+        fill: $green-color;
+
+        .icon {
+          margin: 0 0.4em 0 0;
+        }
+      }
+    }
+
+    &.form-without-label {
+      .form-buttons {
+        margin-left: 0;
+      }
+    }
+
+  }
+}

data/lib/assets/stylesheets/tao/form/mobile/_globals.scss

@@ -0,0 +1,3 @@
+@import 'tao/ui/mobile/globals';
+@import 'tao/form/mobile/variables';
+@import 'tao/form/mobile/mixins';

data/lib/assets/stylesheets/tao/form/mobile/_mixins.scss

@@ -0,0 +1,22 @@
+@mixin text-field-style {
+  display: block;
+  width: 100%;
+  padding: $form-field-padding-v $form-field-padding-h;
+  background: $white-color;
+  border: none;
+  font-size: $form-field-font-size;
+  line-height: $form-field-line-height;
+  transition: border-color 300ms, box-shadow 300ms;
+
+  &:focus {
+    outline: none;
+  }
+
+  &[readonly] {
+    color: $light-grey-color;
+  }
+
+  &[disabled] {
+    color: $lightest-grey-color;
+  }
+}

data/lib/assets/stylesheets/tao/form/mobile/_variables.scss

@@ -0,0 +1,3 @@
+@import 'tao/form/mobile/variables/base';
+@import 'tao/form/mobile/variables/select';
+@import 'tao/form/mobile/variables/moment_picker';

data/lib/assets/stylesheets/tao/form/mobile/fields/checkbox.scss

@@ -0,0 +1,2 @@
+@import 'tao/form/mobile/globals';
+@import 'tao/form/shared/fields/checkbox';

data/lib/assets/stylesheets/tao/form/mobile/fields/datetime_picker.scss

@@ -0,0 +1,18 @@
+@import 'tao/form/mobile/globals';
+
+tao-datetime-picker {
+  display: inline-block;
+
+  & > input[type='datetime-local'] {
+    display: none;
+  }
+
+  tao-date-picker.moment-picker {
+    display: block;
+  }
+
+  tao-time-picker.moment-picker {
+    display: block;
+  }
+
+}

data/lib/assets/stylesheets/tao/form/mobile/fields/index.scss

@@ -0,0 +1 @@
+//= require_tree ./

data/lib/assets/stylesheets/tao/form/mobile/fields/moment_picker/index.scss

@@ -0,0 +1,9 @@
+//= require_self
+//= require_tree ./
+
+@import 'tao/form/mobile/globals';
+
+.moment-picker {
+  display: inline-block;
+  position: relative;
+}

data/lib/assets/stylesheets/tao/form/mobile/fields/moment_picker/result.scss

@@ -0,0 +1,19 @@
+@import 'tao/form/mobile/globals';
+@import 'tao/form/shared/fields/moment_picker/result';
+
+tao-moment-picker-result {
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 2em;
+    height: $form-field-height;
+    fill: $lightest-grey-color;
+
+    .icon {
+      width: 1em;
+      height: 1em;
+    }
+  }
+}