tao_form 0.1.0

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

@@ -0,0 +1,52 @@
+@import 'tao/form/mobile/globals';
+@import 'tao/form/shared/fields/moment_picker/segment_list';
+
+tao-moment-picker-segment-list {
+  display: block;
+
+  .link-clear {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: $form-field-padding-v $form-field-padding-h;
+    color: $red-color;
+    background: $red-bg-color;
+    border-bottom: 1px solid $border-color;
+    font-size: 0.875rem;
+    outline: none;
+
+    .icon-close {
+      fill: $red-color;
+      margin-left: 0.5rem;
+    }
+  }
+
+  &[clearable] .link-clear {
+    display: flex;
+  }
+
+  .segment-labels {
+    .segment-label {
+      &:active {
+        background: $white-color;
+        border-color: $border-color;
+      }
+    }
+  }
+
+  .segments {
+    .segment {
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      border-color: $light-line-color;
+
+      .link-prev,
+      .link-next {
+        &:active {
+          fill: $grey-color;
+        }
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,14 @@
+@import 'tao/form/mobile/globals';
+@import 'tao/form/shared/fields/moment_picker/segments/date_segment';
+
+tao-moment-picker-date-segment {
+  .calendar {
+    .days {
+      .day {
+        &:active {
+          background: $grey-bg-color;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+@import 'tao/form/mobile/globals';
+@import 'tao/form/shared/fields/moment_picker/segments/hour_segment';
+
+tao-moment-picker-hour-segment {
+  .hours {
+    margin: 1rem 0 0 0;
+
+    .hour {
+      &:active {
+        background: $grey-bg-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+@import 'tao/form/mobile/globals';
+@import 'tao/form/shared/fields/moment_picker/segments/minute_segment';
+
+tao-moment-picker-minute-segment {
+  .minutes {
+    margin: 1rem 0 0 0;
+
+    .minute {
+      &:active {
+        background: $grey-bg-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+@import 'tao/form/mobile/globals';
+@import 'tao/form/shared/fields/moment_picker/segments/month_segment';
+
+tao-moment-picker-month-segment {
+  .month-list {
+    margin: 1rem 0 0 0;
+
+    .month {
+      &:active {
+        background: $grey-bg-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+@import 'tao/form/mobile/globals';
+@import 'tao/form/shared/fields/moment_picker/segments/year_segment';
+
+tao-moment-picker-year-segment {
+  .year-list {
+    margin: 1rem 0 0 0;
+
+    .year {
+      &:active {
+        background: $grey-bg-color;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,66 @@
+//= require_self
+//= require_tree ./
+
+@import 'tao/form/mobile/globals';
+
+tao-select {
+  display: inline-block;
+
+  .select-result-delegate {
+    display: flex;
+    align-items: center;
+
+    select {
+      display: none;
+    }
+
+    .placeholder,
+    .selected-text {
+      flex: 1 1 auto;
+      padding: $form-field-padding-v 0;
+      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 {
+      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;
+      }
+    }
+  }
+
+  &[disabled] .select-result-delegate {
+    .selected-text {
+      color: $lightest-grey-color;
+    }
+  }
+
+  &[selected] .select-result-delegate {
+    .placeholder {
+      display: none;
+    }
+
+    .selected-text {
+      display: block;
+    }
+  }
+}

data/lib/assets/stylesheets/tao/form/mobile/fields/select/list.scss

@@ -0,0 +1,10 @@
+@import 'tao/form/mobile/globals';
+@import 'tao/form/shared/fields/select/list';
+
+tao-select-list {
+  display: block;
+
+  &[empty] .list-wrapper {
+    display: none;
+  }
+}

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

@@ -0,0 +1,12 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/fields/select/multiple_result';
+
+tao-multiple-select-result {
+  display: none;
+  padding: 0.75rem 0.75rem 0.25rem 0.75rem;
+  border-bottom: 1px solid $border-color;
+
+  &[selected] {
+    display: flex;
+  }
+}

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

@@ -0,0 +1,28 @@
+@import 'tao/form/mobile/globals';
+
+tao-select-result {
+  select {
+    display: none;
+  }
+
+  .link-clear {
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    padding: $form-field-padding-v $form-field-padding-h;
+    color: $red-color;
+    background: $red-bg-color;
+    border-bottom: 1px solid $border-color;
+    font-size: 0.875rem;
+    outline: none;
+
+    .icon-close {
+      fill: $red-color;
+    }
+  }
+
+  &[selected] .link-clear {
+    display: flex;
+  }
+
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+@import 'tao/form/mobile/globals';
+@import 'tao/form/shared/inputs/boolean';
+
+tao-form .boolean-field {
+  justify-content: flex-end;
+  padding: 0 $form-field-padding-h;
+}

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

@@ -0,0 +1,6 @@
+@import 'tao/form/mobile/globals';
+@import 'tao/form/shared/inputs/group';
+
+tao-form .group-field {
+  justify-content: flex-end;
+}

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

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

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

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

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

@@ -0,0 +1,137 @@
+@import './globals';
+
+tao-form {
+  display: block;
+
+  form {
+    fieldset {
+      padding: 0;
+      margin: 0;
+      border: none;
+
+      legend {
+        display: block;
+        width: 100%;
+        line-height: 1;
+        padding: 0.5rem 1rem;
+        background: $grey-bg-color;
+        font-size: $font-size-s;
+        color: $lighter-grey-color;
+        border-bottom: 1px solid $border-color;
+      }
+    }
+
+    & > .error {
+      display: block;
+      font-size: $font-size-s;
+      padding: 1rem;
+      color: $red-color;
+      border-bottom: 1px solid $red-color;
+      text-align: center;
+    }
+
+    .form-input {
+      background: $white-color;
+      border-bottom: 1px solid $border-color;
+
+      .input-content {
+        min-height: $form-field-height;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        .input-label {
+          flex: 0 0 auto;
+          display: block;
+          padding: $form-field-padding-v $form-field-padding-h;
+          line-height: $form-field-line-height;
+          font-size: $form-label-font-size;
+          color: $light-grey-color;
+          position: relative;
+
+          &.required abbr {
+            display: block;
+            width: 0.5em;
+            position: absolute;
+            top: 0.5em;
+            left: 0.5em;
+            text-decoration: none;
+            color: $red-color;
+            border: none;
+          }
+        }
+
+        .input-label ~ * {
+          flex: 1 1 auto;
+        }
+
+        & > textarea,
+        .text-field input,
+        tao-select .select-result-delegate,
+        .moment-picker tao-moment-picker-result {
+          text-align: right;
+        }
+
+        .input-field-placeholder {
+          flex: 1 1 auto;
+          display: block;
+          padding: $form-field-padding-v $form-field-padding-h;
+          line-height: $form-field-line-height;
+          font-size: $form-field-font-size;
+          color: $text-color;
+          text-align: right;
+        }
+      }
+
+      & > .error {
+        color: $red-color;
+        padding: $form-hint-padding;
+        font-size: $form-hint-font-size;
+        border-top: 1px dotted $red-color;
+      }
+
+      & > .hint {
+        color: $lighter-grey-color;
+        padding: $form-hint-padding;
+        font-size: $form-hint-font-size;
+        border-top: 1px dotted $border-color;
+      }
+
+      & > .bottom-hint {
+        display: block;
+        color: $lighter-grey-color;
+        padding: $form-hint-padding;
+        font-size: $form-hint-font-size;
+        border-top: 1px dotted $border-color;
+      }
+    }
+
+    .form-buttons {
+      margin: 2rem 1rem;
+
+      .button {
+        width: 100%;
+      }
+
+      .success-message {
+        display: 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;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+@import './globals';
+
+::placeholder {
+  color: $lighter-grey-color;
+}
+
+textarea,
+input[type=text],
+input[type=tel],
+input[type=email],
+input[type=number],
+input[type=password],
+input[type=date],
+input[type=time],
+input[type=month],
+input[type=datetime-local] {
+  @include text-field-style;
+}
+
+textarea {
+  display: block;
+  height: auto;
+  line-height: 1.6;
+  resize: none;
+}
+
+select {
+  @include text-field-style;
+  appearance: none;
+}