tao_form 0.1.0

data/lib/assets/javascripts/tao/form/shared/fields/switch.coffee

@@ -0,0 +1,19 @@
+class Tao.Form.SwitchBase extends TaoComponent
+
+  @include Tao.Form.Mixins.Checkable
+
+  @tag 'tao-switch'
+
+  _connected: ->
+    @field = @jq.find('input:checkbox')
+    @_bind()
+
+  _bind: ->
+    @on 'click', '.switch-wrapper', (e) =>
+      if @field.is(':enabled')
+        @_toggleChecked()
+        @trigger 'change'
+      false
+
+  _disconnected: ->
+    @off()

data/lib/assets/javascripts/tao/form/shared/fields/time_picker.coffee

@@ -0,0 +1,10 @@
+
+class Tao.Form.TimePicker extends Tao.Form.MomentPicker.Element
+
+  @tag 'tao-time-picker'
+
+  @attribute 'valueFormat', default: 'HH:mm:ss'
+
+  @attribute 'displayFormat', default: 'HH:mm'
+
+TaoComponent.register Tao.Form.TimePicker

data/lib/assets/javascripts/tao/form/shared/mixins/checkable.coffee

@@ -0,0 +1,11 @@
+
+Tao.Form.Mixins.Checkable = ->
+
+  @get 'checked', ->
+    @field?.prop 'checked'
+
+  @set 'checked', (value) ->
+    @field?.prop 'checked', value
+
+  _toggleChecked: ->
+    @checked = !@checked

data/lib/assets/javascripts/tao/ui/icons/form.coffee

@@ -0,0 +1,11 @@
+Tao._icons += '''
+  <symbol id="icon-arrow-down" viewBox="0 0 24 24" width="100%" height="100%"><defs/><g class="zhiren_icon" stroke="none" stroke-width="1" fill-rule="evenodd"><g class="Main" transform="translate(12.000000, 12.000000) scale(-1, 1) rotate(90.000000) translate(-12.000000, -12.000000) translate(6.000000, 0.000000)"><path d="M11.6164511,11.610417 L1.05810978,1.05207572 C0.867040921,0.861006859 0.548815536,0.859363964 0.353553391,1.05462611 C0.164001817,1.24417768 0.157149396,1.5653289 0.351003,1.7591825 L10.6032963,12.0114758 L0.351003,22.2637691 C0.15993414,22.4548379 0.158291245,22.7730633 0.353553391,22.9683255 C0.543104964,23.157877 0.864256177,23.1647294 1.05810978,22.9708758 L11.6156318,12.4133538 C11.6336098,12.3997323 11.6508692,12.3847273 11.6672619,12.3683346 C11.7368142,12.2987823 11.7817682,12.2115117 11.8012344,12.119313 C11.8373259,11.9580366 11.7933395,11.7806946 11.6672619,11.654617 C11.6512157,11.6385707 11.6342264,11.6238338 11.6164511,11.610417 Z" class="Arrow_Down" transform="translate(6.010408, 12.010938) scale(1, -1) translate(-6.010408, -12.010938) "/></g></g></symbol>
+  <symbol id="icon-arrow-left" viewBox="0 0 24 24" width="100%" height="100%"><defs/><g class="zhiren_icon" stroke="none" stroke-width="1" fill-rule="evenodd"><g class="Main" transform="translate(11.000000, 12.000000) scale(-1, -1) translate(-11.000000, -12.000000) translate(5.000000, 0.000000)"><path d="M11.6164511,11.610417 L1.05810978,1.05207572 C0.867040921,0.861006859 0.548815536,0.859363964 0.353553391,1.05462611 C0.164001817,1.24417768 0.157149396,1.5653289 0.351003,1.7591825 L10.6032963,12.0114758 L0.351003,22.2637691 C0.15993414,22.4548379 0.158291245,22.7730633 0.353553391,22.9683255 C0.543104964,23.157877 0.864256177,23.1647294 1.05810978,22.9708758 L11.6156318,12.4133538 C11.6336098,12.3997323 11.6508692,12.3847273 11.6672619,12.3683346 C11.7368142,12.2987823 11.7817682,12.2115117 11.8012344,12.119313 C11.8373259,11.9580366 11.7933395,11.7806946 11.6672619,11.654617 C11.6512157,11.6385707 11.6342264,11.6238338 11.6164511,11.610417 Z" class="Arrow_Left" transform="translate(6.010408, 12.010938) scale(1, -1) translate(-6.010408, -12.010938) "/></g></g></symbol>
+  <symbol id="icon-arrow-right" viewBox="0 0 24 24" width="100%" height="100%"><defs/><g class="zhiren_icon" stroke="none" stroke-width="1" fill-rule="evenodd"><g class="Main" transform="translate(7.000000, 0.000000)"><path d="M11.6164511,11.610417 L1.05810978,1.05207572 C0.867040921,0.861006859 0.548815536,0.859363964 0.353553391,1.05462611 C0.164001817,1.24417768 0.157149396,1.5653289 0.351003,1.7591825 L10.6032963,12.0114758 L0.351003,22.2637691 C0.15993414,22.4548379 0.158291245,22.7730633 0.353553391,22.9683255 C0.543104964,23.157877 0.864256177,23.1647294 1.05810978,22.9708758 L11.6156318,12.4133538 C11.6336098,12.3997323 11.6508692,12.3847273 11.6672619,12.3683346 C11.7368142,12.2987823 11.7817682,12.2115117 11.8012344,12.119313 C11.8373259,11.9580366 11.7933395,11.7806946 11.6672619,11.654617 C11.6512157,11.6385707 11.6342264,11.6238338 11.6164511,11.610417 Z" class="Arrow_Right" transform="translate(6.010408, 12.010938) scale(1, -1) translate(-6.010408, -12.010938) "/></g></g></symbol>
+  <symbol id="icon-calendar" viewBox="0 0 24 24" width="100%" height="100%"><defs/><g class="zhiren_icon" stroke="none" stroke-width="1" fill-rule="evenodd"><g class="Main" transform="translate(1.000000, 1.000000)"><path d="M0,1.49839123 C0,1.22313735 0.21484375,1 0.497698784,1 L4.50230122,1 C4.77717266,1 5,1.23298088 5,1.50225774 L5,1.50225774 C5,1.77964703 4.78494263,2.00451548 4.50952148,2.00451548 L1,2.00451548 L1,21 L21.0012503,21 L21.0012503,2.00451548 L17.4832825,2.00451548 C17.2117468,2.00451548 16.9916235,1.77153459 16.9916235,1.50225774 L16.9916235,1.50225774 C16.9916235,1.22486845 17.2068272,1 17.4901561,1 L21.5014674,1 C21.7767994,1 22,1.22163089 22,1.49839123 L22,21.5016088 C22,21.7768626 21.7822583,22 21.4991639,22 L0.500836134,22 C0.224231975,22 0,21.7783691 0,21.5016088 L0,1.49839123 Z M1,6 L21,6 L21,7 L1,7 L1,6 Z M4,11.5 C4,11.7761424 4.21403503,12 4.50468445,12 L5.49531555,12 C5.77404508,12 6,11.7680664 6,11.5 L6,11.5 C6,11.2238576 5.78596497,11 5.49531555,11 L4.50468445,11 C4.22595492,11 4,11.2319336 4,11.5 L4,11.5 Z M4,14.5 C4,14.7761424 4.21403503,15 4.50468445,15 L5.49531555,15 C5.77404508,15 6,14.7680664 6,14.5 L6,14.5 C6,14.2238576 5.78596497,14 5.49531555,14 L4.50468445,14 C4.22595492,14 4,14.2319336 4,14.5 L4,14.5 Z M4,17.5 C4,17.7761424 4.21403503,18 4.50468445,18 L5.49531555,18 C5.77404508,18 6,17.7680664 6,17.5 L6,17.5 C6,17.2238576 5.78596497,17 5.49531555,17 L4.50468445,17 C4.22595492,17 4,17.2319336 4,17.5 L4,17.5 Z M8,11.5 C8,11.7761424 8.21403503,12 8.50468445,12 L9.49531555,12 C9.77404508,12 10,11.7680664 10,11.5 L10,11.5 C10,11.2238576 9.78596497,11 9.49531555,11 L8.50468445,11 C8.22595492,11 8,11.2319336 8,11.5 L8,11.5 Z M8,14.5 C8,14.7761424 8.21403503,15 8.50468445,15 L9.49531555,15 C9.77404508,15 10,14.7680664 10,14.5 L10,14.5 C10,14.2238576 9.78596497,14 9.49531555,14 L8.50468445,14 C8.22595492,14 8,14.2319336 8,14.5 L8,14.5 Z M8,17.5 C8,17.7761424 8.21403503,18 8.50468445,18 L9.49531555,18 C9.77404508,18 10,17.7680664 10,17.5 L10,17.5 C10,17.2238576 9.78596497,17 9.49531555,17 L8.50468445,17 C8.22595492,17 8,17.2319336 8,17.5 L8,17.5 Z M12,11.5 C12,11.7761424 12.214035,12 12.5046844,12 L13.4953156,12 C13.7740451,12 14,11.7680664 14,11.5 L14,11.5 C14,11.2238576 13.785965,11 13.4953156,11 L12.5046844,11 C12.2259549,11 12,11.2319336 12,11.5 L12,11.5 Z M12,14.5 C12,14.7761424 12.214035,15 12.5046844,15 L13.4953156,15 C13.7740451,15 14,14.7680664 14,14.5 L14,14.5 C14,14.2238576 13.785965,14 13.4953156,14 L12.5046844,14 C12.2259549,14 12,14.2319336 12,14.5 L12,14.5 Z M12,17.5 C12,17.7761424 12.214035,18 12.5046844,18 L13.4953156,18 C13.7740451,18 14,17.7680664 14,17.5 L14,17.5 C14,17.2238576 13.785965,17 13.4953156,17 L12.5046844,17 C12.2259549,17 12,17.2319336 12,17.5 L12,17.5 Z M16,11.5 C16,11.7761424 16.214035,12 16.5046844,12 L17.4953156,12 C17.7740451,12 18,11.7680664 18,11.5 L18,11.5 C18,11.2238576 17.785965,11 17.4953156,11 L16.5046844,11 C16.2259549,11 16,11.2319336 16,11.5 L16,11.5 Z M16,14.5 C16,14.7761424 16.214035,15 16.5046844,15 L17.4953156,15 C17.7740451,15 18,14.7680664 18,14.5 L18,14.5 C18,14.2238576 17.785965,14 17.4953156,14 L16.5046844,14 C16.2259549,14 16,14.2319336 16,14.5 L16,14.5 Z M8,1.5 C8,1.22385763 8.22788048,1 8.49100518,1 L13.5089948,1 C13.7801695,1 14,1.23193359 14,1.5 L14,1.5 C14,1.77614237 13.7721195,2 13.5089948,2 L8.49100518,2 C8.21983051,2 8,1.76806641 8,1.5 L8,1.5 Z M6,0.490478516 C6,0.219594711 6.23193359,0 6.5,0 L6.5,0 C6.77614237,0 7,0.215057373 7,0.490478516 L7,3.50952148 C7,3.78040529 6.76806641,4 6.5,4 L6.5,4 C6.22385763,4 6,3.78494263 6,3.50952148 L6,0.490478516 Z M15,0.490478516 C15,0.219594711 15.2319336,0 15.5,0 L15.5,0 C15.7761424,0 16,0.215057373 16,0.490478516 L16,3.50952148 C16,3.78040529 15.7680664,4 15.5,4 L15.5,4 C15.2238576,4 15,3.78494263 15,3.50952148 L15,0.490478516 Z" class="Calendar"/></g></g></symbol>
+  <symbol id="icon-checkbox" viewBox="0 0 24 24" width="100%" height="100%"><defs/><g class="zhiren_icon" stroke="none" stroke-width="1" fill-rule="evenodd"><g class="Main" transform="translate(1.000000, 0.000000)"><path d="M0.460155108,7.45725615 C0.460155108,6.63043007 1.12595234,5.96015511 1.96015511,5.96015511 L1.96015511,5.96015511 C2.78858223,5.96015511 3.46015511,6.63134454 3.46015511,7.46183073 L3.46015511,12.9601551 L19.9564452,12.9601551 C20.7869212,12.9601551 21.4601551,13.6259523 21.4601551,14.4601551 L21.4601551,14.4601551 C21.4601551,15.2885822 20.785232,15.9601551 19.9667219,15.9601551 L1.95358834,15.9601551 C1.12878794,15.9601551 0.460155108,15.2884991 0.460155108,14.4630541 L0.460155108,7.45725615 Z" class="CheckboxMark" transform="translate(10.960155, 10.960155) rotate(-45.000000) translate(-10.960155, -10.960155) "/></g></g></symbol>
+  <symbol id="icon-clock" viewBox="0 0 24 24" width="100%" height="100%"><defs/><g class="zhiren_icon" stroke="none" stroke-width="1" fill-rule="evenodd"><g class="Main" transform="translate(1.000000, 1.000000)"><path d="M11,22 C17.0751322,22 22,17.0751322 22,11 C22,4.92486775 17.0751322,0 11,0 C4.92486775,0 0,4.92486775 0,11 C0,17.0751322 4.92486775,22 11,22 Z M11,21 C16.5228475,21 21,16.5228475 21,11 C21,5.4771525 16.5228475,1 11,1 C5.4771525,1 1,5.4771525 1,11 C1,16.5228475 5.4771525,21 11,21 Z M10.5,3.00966585 C10.5,2.72818517 10.7319336,2.5 11,2.5 C11.2761424,2.5 11.5,2.73079681 11.5,3.00043583 L11.5,10.5 L16.0023012,10.5 C16.2771727,10.5 16.5,10.7319336 16.5,11 C16.5,11.2761424 16.2721195,11.5 16.0089948,11.5 L10.9910052,11.5 C10.7198305,11.5 10.5,11.2775269 10.5,10.9903342 L10.5,3.00966585 Z" class="Clock"/></g></g></symbol>
+  <symbol id="icon-search" viewBox="0 0 24 24" width="100%" height="100%"><defs/><g class="zhiren_icon" stroke="none" stroke-width="1" fill-rule="evenodd"><g class="Main" transform="translate(1.000000, 1.000000)"><path d="M14.5610109,16.0768647 C13.0302194,17.2814309 11.0990251,18 9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 C13.9705627,0 18,4.02943725 18,9 C18,11.3489613 17.1001192,13.4877442 15.6262932,15.0904129 L21.8402784,20.8382529 C22.0438968,21.0265968 22.0482516,21.3387618 21.8607428,21.5248371 L21.5286336,21.8544073 C21.3363174,22.0452534 21.0152795,22.0472113 20.8117305,21.8589237 L14.5610109,16.0768647 Z M9,17 C13.418278,17 17,13.418278 17,9 C17,4.581722 13.418278,1 9,1 C4.581722,1 1,4.581722 1,9 C1,13.418278 4.581722,17 9,17 Z" class="Search"/></g></g></symbol>
+  <symbol id="icon-success" viewBox="0 0 24 24" width="100%" height="100%"><defs/><g class="zhiren_icon" stroke="none" stroke-width="1" fill-rule="evenodd"><g class="Main" transform="translate(1.000000, 1.000000)"><path d="M11,22 C17.0751322,22 22,17.0751322 22,11 C22,4.92486775 17.0751322,0 11,0 C4.92486775,0 0,4.92486775 0,11 C0,17.0751322 4.92486775,22 11,22 Z M11,21 C16.5228475,21 21,16.5228475 21,11 C21,5.4771525 16.5228475,1 11,1 C5.4771525,1 1,5.4771525 1,11 C1,16.5228475 5.4771525,21 11,21 Z M17.0734953,8.10417138 C17.2692381,7.90842856 17.2639172,7.58574584 17.0743656,7.39619427 C16.8791035,7.20093212 16.5598374,7.20361571 16.3604356,7.40301751 L9.64974442,14.1137087 L5.75429682,10.2182611 C5.56254737,10.0265116 5.24310191,10.0350698 5.05355034,10.2246214 C4.85828819,10.4198835 4.8646839,10.7428617 5.05597058,10.9341484 L9.29377079,15.1719486 C9.49036959,15.3685474 9.81220265,15.365464 10.0041681,15.1734985 L17.0734953,8.10417138 Z" class="Success"/></g></g></symbol>
+
+'''

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

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

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

@@ -0,0 +1,28 @@
+@mixin text-field-style {
+  width: $form-field-width;
+  padding: $form-field-padding-v $form-field-padding-h;
+  background: $white-color;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-s;
+  font-size: $form-field-font-size;
+  color: $form-field-text-color;
+  line-height: $form-field-line-height;
+  transition: border-color 300ms;
+  outline: none;
+
+  &:hover,
+  &:focus {
+    border-color: $form-field-active-border-color;
+  }
+
+  &[readonly] {
+    color: $light-grey-color;
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    background: $grey-bg-color;
+    border-color: $light-border-color;
+    color: $lightest-grey-color;
+  }
+}

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

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

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

@@ -0,0 +1,36 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/fields/checkbox';
+
+tao-check-box {
+  .checkbox-wrapper {
+    &:hover {
+      border-color: #63D65C;
+    }
+
+    &:focus {
+      border-color: #63D65C;
+      box-shadow: 0px 0px 4px 0px rgba(#4A90E2, 0.5);
+    }
+  }
+
+  input[type=checkbox] {
+    &:indeterminate + .checkbox-wrapper,
+    &:checked + .checkbox-wrapper {
+      &:hover {
+        background-color: #63D65C;
+        border-color: #63D65C;
+      }
+    }
+
+    &:disabled + .checkbox-wrapper {
+      &:hover {
+        border: 1px #DDDDDD solid;
+        background-color: #F6F6F6;
+      }
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+@import 'tao/form/globals';
+
+tao-datetime-picker {
+  display: inline-flex;
+  width: 20rem;
+
+  & > input[type='datetime-local'] {
+    display: none;
+  }
+
+  tao-date-picker.moment-picker {
+    flex: 0 0 auto;
+    width: 11rem;
+    margin-right: 0.5rem;
+  }
+
+  tao-time-picker.moment-picker {
+    flex: 1 1 auto;
+    width: auto;
+  }
+
+}

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

@@ -0,0 +1,6 @@
+//= require ./checkbox
+//= require ./radio
+//= require ./switch
+//= require ./select
+//= require ./moment_picker
+//= require ./datetime_picker

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

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

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

@@ -0,0 +1,61 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/fields/moment_picker/result';
+
+tao-moment-picker-result {
+  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]:hover .link-clear {
+      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] {
+    &:hover,
+    &[active] {
+      .link-clear {
+        display: flex;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/fields/moment_picker/segment_list';
+
+$select-list-offset: 0.375rem;
+
+tao-moment-picker-segment-list {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: $white-color;
+  border: 1px solid $border-color;
+  box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
+  z-index: $z-index-popover;
+  margin-top: $select-list-offset;
+
+  &[active] {
+    display: block;
+  }
+
+  &[direction='up'] {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: $select-list-offset;
+  }
+
+  .segment-labels {
+    .segment-label {
+      &:focus,
+      &:hover {
+        background: $white-color;
+        border-color: $border-color;
+      }
+    }
+  }
+
+  .segments {
+    .segment {
+      margin: 0 0.5rem;
+      padding: 0.5rem 0;
+
+      .link-prev,
+      .link-next {
+        &:focus,
+        &:hover {
+          fill: $grey-color;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/fields/moment_picker/segments/date_segment';
+
+tao-moment-picker-date-segment {
+  .calendar {
+    width: 15rem;
+    margin-top: -0.5rem;
+
+    .days {
+      margin: 0.5rem 0 0 0;
+
+      .day:hover {
+        background: $grey-bg-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/fields/moment_picker/segments/hour_segment';
+
+tao-moment-picker-hour-segment {
+  .hours {
+    width: 12rem;
+
+    .hour {
+      &:focus,
+      &:hover {
+        background: $grey-bg-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/fields/moment_picker/segments/minute_segment';
+
+tao-moment-picker-minute-segment {
+  .minutes {
+    width: 12rem;
+    max-height: 12rem;
+    overflow: auto;
+
+    .minute {
+      &:focus,
+      &:hover {
+        background: $grey-bg-color;
+      }
+    }
+  }
+}

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

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

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

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

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

@@ -0,0 +1,33 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/fields/radio';
+
+tao-radio-button {
+  .radio-wrapper {
+    &:hover {
+      border-color: #69D061;
+
+      .icon-radio {
+        background-color: #69D061;
+      }
+    }
+
+    &:focus {
+      border-color: #63D65C;
+      box-shadow: 0px 0px 4px 0px rgba(#4A90E2, 0.5);
+      outline: none;
+    }
+  }
+
+  input[type=radio] {
+    &:checked + .radio-wrapper {
+      &:hover {
+        border-color: #63D65C;
+
+        .icon-radio {
+          background-color: #69D061;
+        }
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,10 @@
+//= require_self
+//= require_tree ./
+
+@import 'tao/form/globals';
+
+tao-select {
+  display: inline-block;
+  width: $form-field-width;
+  position: relative;
+}

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

@@ -0,0 +1,61 @@
+@import 'tao/form/globals';
+@import 'tao/form/shared/fields/select/list';
+
+tao-select-list {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: $form-field-width;
+  border: 1px solid $border-color;
+  box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
+  z-index: $z-index-popover;
+  margin-top: $select-list-offset;
+
+  &[active] {
+    display: flex;
+  }
+
+  &[direction='up'] {
+    flex-direction: column-reverse;
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: $select-list-offset;
+
+    .search-input {
+      border-top: 1px solid $border-color;
+      border-bottom: none;
+    }
+
+    .options-list {
+      flex-direction: column-reverse;
+
+      .option {
+        border-bottom: none;
+        border-top: 1px solid $border-color;
+
+        &:last-child {
+          border-top: none;
+        }
+      }
+    }
+  }
+
+  .list-wrapper {
+    max-height: 8 * $select-option-height;
+    flex: 0 0 auto;
+  }
+
+  .options-list {
+    display: flex;
+    flex-direction: column;
+
+    .option {
+      &:hover {
+        background: $grey-bg-color;
+      }
+    }
+  }
+}