tao_form 0.1.0

data/lib/assets/stylesheets/tao/form/mobile/variables/_base.scss

@@ -0,0 +1,12 @@
+$form-label-font-size: 0.875rem !default;
+
+$form-field-height: 3rem !default;
+$form-field-line-height: 1.5rem !default;
+$form-field-font-size: 1rem !default;
+$form-field-padding-v: 0.75rem !default;
+$form-field-padding-h: 1rem !default;
+$form-field-text-color: $text-color !default;
+$form-field-active-border-color: $link-color !default;
+
+$form-hint-font-size: 0.75rem !default;
+$form-hint-padding: 0.375rem 1rem !default;

data/lib/assets/stylesheets/tao/form/mobile/variables/_moment_picker.scss

@@ -0,0 +1,9 @@
+$moment-picker-segment-labels-padding: 0.75rem 2.5rem !default;
+$moment-picker-segment-label-padding: 0.25rem 0.75rem !default;
+$moment-picker-segment-label-margin: 0.25rem !default;
+$moment-picker-segment-label-font-size: 0.875rem !default;
+
+$moment-picker-segment-arrow-position-v: -3rem !default;
+$moment-picker-segment-arrow-position-h: 0 !default;
+
+$moment-picker-segment-item-height: 3rem !default;

data/lib/assets/stylesheets/tao/form/mobile/variables/_select.scss

@@ -0,0 +1,9 @@
+$select-option-height: $form-field-height - 0.125rem !default;
+$select-option-padding: $form-field-padding-v $form-field-padding-h !default;
+$select-option-line-height: $form-field-line-height !default;
+$select-option-font-size: 0.875rem !default;
+
+$select-item-padding: 0 0.5rem !default;
+$select-item-margin: 0 0.25rem 0.25rem 0 !default;
+$select-item-height: 2rem !default;
+$select-item-font-size: 0.875rem !default;

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

@@ -0,0 +1,30 @@
+@import './globals';
+
+::placeholder {
+  color: $lightest-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;
+}

data/lib/assets/stylesheets/tao/form/shared/fields/_checkbox.scss

@@ -0,0 +1,61 @@
+tao-check-box {
+  display: inline-block;
+  vertical-align: middle;
+  user-select: none;
+  outline: none;
+
+  .checkbox-wrapper {
+    display: block;
+    background-color: #fff;
+    border: 1px #9B9B9B solid;
+    border-radius: 2px;
+    height: 1.125rem;
+    width: 1.125rem;
+    transition: border-color 200ms, background 200ms;
+    outline: none;
+
+    .icon {
+      display: none;
+      margin: 1px;
+      height: 0.875rem;
+      width: 0.875rem;
+      fill: #ffffff;
+
+      &.icon-indeterminate {
+        width: 10px;
+        height: 2px;
+        margin: 7px 3px;
+        border-radius: 2px;
+        background: #ffffff;
+      }
+    }
+  }
+
+  input[type=checkbox] {
+    display: none;
+
+    &:indeterminate + .checkbox-wrapper,
+    &:checked + .checkbox-wrapper {
+      background-color: #55BB33;
+      border-color: #55BB33;
+    }
+
+    &:indeterminate + .checkbox-wrapper .icon-indeterminate,
+    &:checked + .checkbox-wrapper .icon-checkbox {
+      display: block;
+    }
+
+    &:disabled + .checkbox-wrapper {
+      border: 1px #DDDDDD solid;
+      background-color: #F6F6F6;
+
+      .icon {
+        fill: #dddddd;
+      }
+
+      .icon-indeterminate {
+        background: #dddddd;
+      }
+    }
+  }
+}

data/lib/assets/stylesheets/tao/form/shared/fields/_radio.scss

@@ -0,0 +1,53 @@
+tao-radio-button {
+  display: inline-block;
+  vertical-align: middle;
+  user-select: none;
+
+  .radio-wrapper {
+    display: block;
+    height: 1rem;
+    width: 1rem;
+    padding: 2px;
+    border: 1px #9B9B9B solid;
+    border-radius: 50%;
+    background-color: #ffffff;
+    transition: 200ms border-color, 200ms background-color;
+
+    .icon-radio {
+      height: 100%;
+      width: 100%;
+      border-radius: 50%;
+      background-color: #55BB33;
+      display: none;
+      transition: 200ms border-color, 200ms background-color;
+    }
+  }
+
+  input[type=radio] {
+    display: none;
+
+    &:disabled + .radio-wrapper {
+      cursor: not-allowed;
+      border-color: #DDDDDD;
+      background-color: #F6F6F6;
+    }
+
+    &:checked + .radio-wrapper {
+      border-color: #55BB33;
+
+      .icon-radio {
+        display: block;
+      }
+    }
+
+    &:checked:disabled + .radio-wrapper {
+      border-color: #DDDDDD;
+      background-color: #F6F6F6;
+
+      .icon-radio {
+        background-color: #DDDDDD;
+      }
+    }
+  }
+
+}

data/lib/assets/stylesheets/tao/form/shared/fields/_switch.scss

@@ -0,0 +1,56 @@
+$switch-width: 3.75rem;
+$switch-height: 1.75rem;
+$switch-slot-height: 1.375rem;
+
+tao-switch {
+  display: inline-block;
+
+  .switch-wrapper {
+    width: $switch-width;
+    height: $switch-height;
+    position: relative;
+
+    .switch-toggle {
+      width: 1.75rem;
+      height: 1.75rem;
+      background-color: $white-color;
+      margin-left: 0;
+      border: 1px solid $border-color;
+      border-radius: 50%;
+      box-shadow: 0 0 5px rgba(0,0,0,0.1);
+      transition: margin-left 0.2s;
+      position: relative;
+      z-index: 1;
+    }
+
+    .switch-slot {
+      width: $switch-width;
+      height: $switch-slot-height;
+      background-color: $light-line-color;
+      border-radius: 2.25rem;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-$switch-slot-height / 2);
+      transition: background-color 0.2s;
+    }
+  }
+
+  input[type=checkbox] {
+    display: none;
+
+    &:checked + .switch-wrapper {
+      .switch-toggle {
+        margin-left: 2rem;
+      }
+
+      .switch-slot {
+        background-color: $ui-color;
+      }
+    }
+
+    &:disabled + .switch-wrapper {
+      opacity: 0.5;
+    }
+  }
+}

data/lib/assets/stylesheets/tao/form/shared/fields/moment_picker/_result.scss

@@ -0,0 +1,46 @@
+tao-moment-picker-result {
+  display: flex;
+  align-items: center;
+
+  &[disabled] {
+    .result-text {
+      color: $lightest-grey-color;
+    }
+  }
+
+  input[type=text],
+  input[type=date],
+  input[type=time],
+  input[type=datetime-local],
+  input[type=month] {
+    display: none;
+  }
+
+  .placeholder,
+  .result-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;
+  }
+
+  .result-text {
+    color: $form-field-text-color;
+    display: none;
+  }
+
+  &[selected] {
+    .placeholder {
+      display: none;
+    }
+
+    .result-text {
+      display: block;
+    }
+  }
+}

data/lib/assets/stylesheets/tao/form/shared/fields/moment_picker/_segment_list.scss

@@ -0,0 +1,93 @@
+tao-moment-picker-segment-list {
+
+  .segment-labels {
+    padding: $moment-picker-segment-labels-padding;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .segment-label {
+      display: inline-block;
+      border: 1px solid $grey-bg-color;
+      background: $grey-bg-color;
+      color: $grey-color;
+      font-size: $moment-picker-segment-label-font-size;
+      padding: $moment-picker-segment-label-padding;
+      margin: 0 $moment-picker-segment-label-margin;
+      border-radius: $border-radius-s;
+      white-space: nowrap;
+      outline: none;
+
+      .placeholder {
+      }
+
+      .value {
+        display: none;
+      }
+
+      &.active {
+        border-color: $ui-color;
+        background: $white-color;
+        color: $ui-color;
+        cursor: default;
+      }
+
+      &.selected {
+        .placeholder {
+          display: none;
+        }
+
+        .value {
+          display: inline;
+        }
+      }
+    }
+
+    .separator {
+      font-size: $moment-picker-segment-label-font-size;
+      color: $lighter-grey-color;
+      margin: 0 $moment-picker-segment-label-margin / 2;
+    }
+  }
+
+  .segments {
+    .segment {
+      display: none;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      border-top: 1px solid $border-color;
+
+      &[active] {
+        display: block;
+      }
+
+      .link-prev,
+      .link-next {
+        display: block;
+        width: 2.5rem;
+        height: 2.5rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        fill: $light-grey-color;
+        position: absolute;
+        top: $moment-picker-segment-arrow-position-v;
+        outline: none;
+
+        .icon {
+          width: 0.875rem;
+          height: 0.875rem;
+        }
+      }
+
+      .link-next {
+        right: $moment-picker-segment-arrow-position-h;
+      }
+
+      .link-prev {
+        left: $moment-picker-segment-arrow-position-h;
+      }
+    }
+  }
+}

data/lib/assets/stylesheets/tao/form/shared/fields/moment_picker/segments/_date_segment.scss

@@ -0,0 +1,50 @@
+tao-moment-picker-date-segment {
+  .calendar {
+    .weekdays {
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      flex-wrap: wrap;
+      border-bottom: 1px dotted $border-color;
+
+      .weekday {
+        display: block;
+        width: percentage(1/7);
+        line-height: $moment-picker-segment-item-height;
+        text-align: center;
+        font-size: 0.875rem;
+      }
+    }
+
+    .days {
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      flex-wrap: wrap;
+
+      .day {
+        display: block;
+        width: percentage(1/7);
+        line-height: $moment-picker-segment-item-height;
+        text-align: center;
+        font-size: 0.875rem;
+        border-radius: $border-radius-s;
+        color: $text-color;
+        outline: none;
+
+        &.outside {
+          color: $lightest-grey-color;
+        }
+
+        &.today {
+          color: $orange-color;
+        }
+
+        &.selected {
+          background: $green-bg-color !important;
+          color: $green-color !important;
+        }
+      }
+    }
+  }
+}

data/lib/assets/stylesheets/tao/form/shared/fields/moment_picker/segments/_hour_segment.scss

@@ -0,0 +1,35 @@
+tao-moment-picker-hour-segment {
+  .hours {
+    .morning-hours,
+    .afternoon-hours {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .morning-hours {
+      padding-bottom: $moment-picker-segment-item-height / 3;
+      border-bottom: 1px dotted $border-color;
+    }
+
+    .afternoon-hours {
+      padding-top: $moment-picker-segment-item-height / 3;
+    }
+
+    .hour {
+      display: block;
+      width: percentage(1/6);
+      line-height: $moment-picker-segment-item-height;
+      text-align: center;
+      font-size: 0.875rem;
+      color: $text-color;
+      outline: none;
+
+      &.selected {
+        background: $green-bg-color;
+        color: $green-color;
+      }
+    }
+  }
+}