bookyt 0.0.1

data/app/assets/stylesheets/partials/formtastic/_custom_fields.sass

@@ -0,0 +1,2 @@
+form.formtastic input.hasCheckHours
+  width: 85px

data/app/assets/stylesheets/partials/formtastic/_formtastic_base.sass

@@ -0,0 +1,652 @@
+//
+// FORMTASTIC SASS
+// Flexible styling for formtastic forms
+// http://www.github.com/active-stylus/formtastic-sass
+//
+//--------------------------------------------------------
+// STACKED FORMS
+// Labels fill up the full width of the form
+// Inputs are on new lines
+//--------------------------------------------------------
+//
+// Arguments:
+//
+// +stack-form(full-width, input-width, submit-button-align)
+//
+// Example:
+//
+// form.formtastic
+//   +stack-form(300px,"full","right")
+//
+// Default Settings:
+//
+$stacked_fieldset: 100%
+
+// Full width of the fieldset
+//
+$stacked_input: auto
+
+// "auto"   = automatic widths
+// "full"   = same width as form
+// "960px"  = custom width
+//
+$stacked_padding: 0
+
+// Left padding on all labels and inputs
+//
+$stacked_button_align: buttons-left
+
+// "buttons-left"   = float submit button left
+// "buttons-right"  = float submit button right
+// "buttons-full"   = submit button matches input width
+//
+$stacked_select_width: select-auto
+
+// "select-auto"   = default width
+// "select-full"  = same as specified input width
+//
+//--------------------------------------------------------
+// FLOATED FORMS
+// Column layout with labels left of the inputs
+// Comes in 2 flavors for text alignment of the labels
+//--------------------------------------------------------
+//
+// Arguments:
+//
+// +float-form-left(total-width, label-width, input-width, label-padding-x, submit-align)
+//
+// Examples:
+//
+// form.lefty
+//   +float-form-left(800px,500px,200px,6px,"buttons-left")
+//
+// form.righty
+//   +float-form-right(800px,500px,200px,6px,"buttons-left")
+//
+//--------------------------------------------------------
+// Default Settings:
+// (do not mix units because calculations are made)
+//
+$floated_total_width: 100%
+
+// Total Width of form
+//
+$floated_input_width: 70%
+
+// Width of inputs
+//
+$floated_label_width: 20%
+
+// Width of Label
+//
+$floated_label_padding_x: 0
+
+// How far labels are spaced from inputs
+//
+$floated_button_align: buttons-left
+
+// "buttons-left"   = float submit button left
+// "buttons-right"  = float submit button right
+// "buttons-full"   = submit button matches input width
+//
+$floated_label_text_align: left
+
+// "left"
+// "right"
+// "center"
+//
+$floated_select_width: select-auto
+
+// "select-auto"   = default width
+// "select-full"  = same as specified input width
+//
+//========================================================
+// FORMTASTIC STYLING
+// Note: Be careful when modifying widths and
+// horizontal padding/margins as you can break layouts
+//========================================================
+=clearfix
+  *display: inline-block
+  &:after
+    content: " "
+    display: block
+    height: 0
+    clear: both
+    visibility: hidden
+
+//
+//
+//
+//--------------------------------------------------------
+//========================================================
+// Base stuff (do not edit unless you are smarter than me :p)
+//========================================================
+//--------------------------------------------------------
+//
+//
+//
+//--------------------------------------------------------
+// Generic Mixins
+//--------------------------------------------------------
+=float-labels($width, $padding: 0, $direction: left)
+  width: $width - $padding
+  text-align: $direction
+  display: inline
+  float: left
+  clear: none
+  @if $padding == 0
+    padding: 0
+  @else
+    padding-#{$direction}: $padding
+
+=block($block_float: clear)
+  display: block
+  @if $block_float == "clear"
+    clear: both
+    float: none
+  @else
+    float: $block_float
+
+=inline($float: none, $clear: none)
+  display: inline
+  float: $float
+  clear: $clear
+
+=reset-form
+  // Reset elements
+  ul, ol, legend, p
+    margin: 0
+    padding: 0
+  li
+    margin-left: 0px
+    margin-right: 0px
+    padding-left: 0px
+    padding-right: 0px
+  // Clearfix fieldsets
+  fieldset
+    display: block
+    +clearfix
+  // * fields
+  abbr, acronym
+    border: 0
+    font-variant: normal
+    font-weight: normal
+  // Reset list styles
+  ol, ul
+    list-style: none
+  // Clearfix label
+  label
+    display: block
+    +clearfix
+  // Align Inputs
+  input, textarea
+    vertical-align: middle
+  // Make Labels Clickable
+  .check_boxes, .radio
+    input
+      margin: 0
+    label
+      cursor: pointer
+  // Hide hidden fields
+  .hidden
+    display: none
+  // Date Time Selects shown inline
+  .date, .time, .datetime
+    li
+      float: left
+      width: auto
+      clear: none
+    label
+      display: none
+      width: auto
+    input
+      display: inline
+      margin: 0
+      padding: 0
+  // Error lists for each input
+  .errors
+    list-style: square
+    li
+      padding: 0
+      border: none
+      display: list-item
+      float: none
+      clear: both
+  .inputs
+    z-index: 99
+  // Float Submit Buttons
+  .buttons li
+    float: left
+  // Reset Nested Fieldset & Legends
+  li
+    +clearfix
+    display: block
+    fieldset
+      border: none
+      position: relative
+      margin-top: 0px
+    legend
+      display: block
+      margin-bottom: 0
+    .label
+      display: block
+      clear: both
+      background: transparent
+    // Reset lists for checkboxes and radio buttons
+    ol
+      float: left
+      margin: 0
+      li
+        padding: 0
+        border: 0
+        display: inline
+
+//
+//--------------------------------------------------------
+// Form Stack
+//--------------------------------------------------------
+//
+=stack-form($stacked_fieldset, $stacked_input, $stacked_padding, $stacked_button_align, $stacked_select_width)
+  +reset-form
+  fieldset
+    width: $stacked_fieldset
+  ol
+    padding-left: $stacked_padding
+  input
+    clear: both
+    float: none
+  li
+    +block
+    width: $stacked_fieldset
+    ol
+      padding: 0
+    li
+      clear: none
+      width: auto
+    fieldset
+      legend, legend .label
+        display: block
+        clear: both
+      .label
+        position: relative
+      label, input
+        width: auto
+  .date, .time, .datetime
+    ol
+      width: $stacked_fieldset
+    li
+      display: inline
+      clear: none
+      float: left
+      padding-right: $stacked_padding / 2
+  .checkbox, .radio
+    li
+      display: block
+    input
+      border: none
+  label
+    +block
+    width: $stacked_input
+  input, textarea
+    @if $stacked_input == "full"
+      width: $stacked_fieldset - $stacked_padding
+    @else
+      width: $stacked_input
+  select
+    @if $stacked_select_width == "select-auto"
+      width: auto
+    @else
+      width: $stacked_input
+  .errors li
+    display: list-item
+  .buttons
+    ol
+      padding-left: $stacked_padding
+      padding-right: $stacked_padding
+    li
+      @if $stacked_button_align == "buttons-left"
+        float: left
+      @if $stacked_button_align == "buttons-right"
+        float: right
+      width: auto
+      clear: none
+      display: inline
+    input
+      @if $stacked_button_align == "buttons-full"
+        width: $stacked_fieldset
+      @else
+        width: auto
+  #errorExplanation
+    width: $stacked_fieldset - $stacked_padding
+  .label
+    // Legend Left Margin Hack for IE
+    #left: -0.5em
+    #position: relative
+
+//
+//--------------------------------------------------------
+// Float Form Core
+//--------------------------------------------------------
+//
+=float-form($floated_total_width, $floated_label_width, $floated_input_width, $floated_label_padding_x, $floated_button_align, $floated_label_text_align, $floated_select_width)
+  +reset-form
+  fieldset
+    width: $floated_total_width
+  label
+    float: left
+    width: $floated_label_width - $floated_label_padding_x
+    text-align: $floated_label_text_align
+    padding-#{$floated_label_text_align}: $floated_label_padding_x
+  li
+    ol
+      padding: 0 $floated_total_width - ($floated_input_width + $floated_label_width) 0 $floated_label_width
+    fieldset
+      legend, legend .label
+        display: block
+      legend
+        +float-labels($floated_label_width, $floated_label_padding_x, $floated_label_text_align)
+        width: $floated_total_width - $floated_label_padding_x
+      .label
+        position: absolute
+        width: $floated_label_width - $floated_label_padding_x
+        top: 0px
+        @if $floated_label_text_align == "right"
+          left: 0
+        @else
+          left: $floated_label_padding_x
+      label
+        padding-left: 0
+      label, input
+        width: auto
+        display: inline
+        clear: none
+        text-align: left
+      select
+        padding: 0
+        clear: both
+        display: block
+  .inline-hints, .inline-errors, .errors
+    margin: 0 0 0 $floated_label_width
+  input, textarea
+    width: $floated_input_width
+  select
+    @if $floated_select_width == "select-auto"
+      width: auto
+    @else
+      width: $floated_input_width
+  .checkbox, .radio
+    li
+      display: block
+      clear: both
+    input
+      border: none
+  .buttons
+    padding-left: $floated_label_width
+    width: $floated_total_width - $floated_label_width
+    input
+      width: auto
+    ol
+      @if $floated_button_align == "buttons-right"
+        padding-right: $floated_label_padding_x
+    li
+      width: auto
+      @if $floated_button_align == "buttons-right"
+        float: right
+      @else
+        float: left
+      @if $floated_button_align == "full-buttons"
+        input
+          width: $floated_input_width
+      @else
+        display: inline
+  #errorExplanation
+    margin-left: $floated_label_width
+    width: $floated_input_width
+
+//
+//--------------------------------------------------------
+// Float Form Left/Right
+//--------------------------------------------------------
+//
+=float-form-left($floated_total_width, $floated_label_width, $floated_input_width, $floated_label_padding_x, $floated_button_align)
+  +float-form($floated_total_width, $floated_label_width, $floated_input_width, $floated_label_padding_x, $floated_button_align, "left")
+
+=float-form-right($floated_total_width, $floated_label_width, $floated_input_width, $floated_label_padding_x, $floated_button_align)
+  +float-form($floated_total_width, $floated_label_width, $floated_input_width, $floated_label_padding_x, $floated_button_align, "right")
+
+//
+//--------------------------------------------------------
+// Float Inputs
+//--------------------------------------------------------
+//
+=float-inputs($margin_right: 10px, $line_height: 150%)
+  .radio, .check_boxes
+    ol
+      +inline("left")
+    li
+      width: auto
+      +inline("left", "none")
+    input
+      float: none
+      display: inline
+    label
+      display: block
+      clear: none
+      width: auto
+      padding-left: 0
+      line-height: $line_height
+      margin-right: $margin_right
+
+//
+=float-inputs-for($dom_target, $margin_right: 10px, $line_height: 150%)
+  #{$dom_target}
+    +float-inputs-core($margin_right, $line_height)
+
+//
+//--------------------------------------------------------
+// Grid Inputs
+//--------------------------------------------------------
+//
+=grid-inputs($width: 100px, $line_height: 150%)
+  .radio, .check_boxes
+    ol
+      +inline("left")
+    li
+      +inline("left", "none")
+      width: $width
+    label
+      +inline("left", "none")
+      width: auto
+      line-height: $line_height
+
+=grid-inputs-for($dom_target, $width: 100px, $line_height: 150%)
+  #{$dom_target}
+    +grid-inputs-core($width, $line_height)
+
+//--------------------------------------------------------
+// Labels
+//--------------------------------------------------------
+=bold-labels($select: all)
+  li
+    @if $select == "all"
+      label, legend span.label
+        font-weight: bold
+      li
+        label
+          font-weight: normal
+    @if $select == "required"
+      &.required
+        label, .label
+          font-weight: bold
+        li
+          label
+            font-weight: normal
+
+//---------------------------------------------------
+// Original Mixin (deprecated!)
+//
+$form_layout: float
+
+// Set the general layout of the form
+// "float" will use two column layout with labels on the left
+// "clear" will have labels above the inputs
+
+//
+$total_width: 100%
+
+// Set width of entire fieldset
+//
+// Set label widths and hint/error left margins
+$label_width: 24%
+
+//
+$input_width: 70%
+
+// Set width of inputs, textareas and selects
+//
+$label_pad: 2%
+
+// Set horizontal padding for labels
+
+//
+$label_float: left
+
+// Set alignment of labels
+// "clear" puts labels above inputs
+// "left" floats labels left and aligns text left
+// "right" floats labels left and aligns text right
+
+//
+// Set widths of all inputs, textareas and selects (all aligned)
+// False will preserve auto width
+$full_width_inputs: true
+
+//
+// Set float direction of form buttons ("right" or "left")
+$button_float: left
+
+// Installation ------------------------------------------
+//
+//$ sudo gem install haml
+//$ cd rails app
+//$ haml --rails (or merb/sinatra/etc)
+//
+// Set up master Sass file and include it in your html
+// Save this file as _base.sass and include it in master sass like so:
+//
+// @import base.sass
+//
+// Usage -------------------------------------------------
+//
+// form.formtastic
+//   +formtastic-float
+//
+//  This will provide forms of columns with label floated left
+//  For label on top of inputs you can use
+//
+// form.formtastic
+//   +formtastic-block
+//
+// Customize ---------------------------------------------
+//
+// form.formtastic
+//   +formtastic(410px,100px,300px,12px,"right",true)
+//
+// Note: When using pixel values be sure to pad total width by 10px
+// Still looking for a way to make this cleaner
+//--------------------------------------------------------
+=formtastic($total_width, $label_width, $input_width, $label_pad, $label_float, $button_float, $full_width_inputs)
+  fieldset
+    width: $total_width
+  ol li
+    label
+      @if $label_float == "clear"
+        display: block
+        clear: both
+        float: none
+      @else
+        float: left
+        width: $label_width - $label_pad
+        @if $label_float == "left"
+          padding-left: $label_pad
+          text-align: left
+        @else
+          text-align: right
+    fieldset
+      legend
+        @if $label_float == "clear"
+          display: block
+          clear: both
+          float: none
+          span.label
+            display: block
+            clear: both
+            float: none
+        @else
+          width: $label_width - $label_pad
+          @if $label_float == "left"
+            padding-left: $label_pad
+          @else
+            padding-right: $label_pad
+            text-align: right
+          span.label
+            position: absolute
+            width: $label_width - $label_pad
+      ol
+        @if $label_float == "clear"
+          padding: 0
+        @else
+          padding: 0 $total_width - ($input_width + $label_width) 0 $label_width
+    @if $label_float == "clear"
+      &.string input, &.password input, &.numeric input, &.text textarea, select
+        width: $input_width
+    @else
+      p.inline-hints, p.inline-errors, ul.errors
+        margin: 0 0 0 $label_width
+      @if $full_width_inputs
+        &.string input, &.password input, &.numeric input, &.text textarea, select
+          width: $input_width
+      &.boolean label
+        padding-left: $label_width
+  fieldset
+    &.buttons
+      @if $label_float == "clear"
+        width: $total_width
+      @else
+        padding-left: $label_width
+        width: $input_width
+      @if $button_float == "left"
+        ol
+          li
+            display: inline
+            width: auto
+            float: left
+      @if $button_float == "right"
+        ol
+          padding-left: 0
+          @if $label_float == "clear"
+            width: $input_width
+          li
+            float: right
+            width: auto
+            @if $label_float != "clear"
+              padding-left: $label_pad
+
+//--------------------------------------------------------
+// Formtastic Errors on top (aligned with label)
+//
+// Create formtastic.rb in config/initializers and add this:
+// Formtastic::SemanticFormBuilder.inline_order = [:errors, :input, :hints]
+// Best used with right-aligned labels
+// +formtastic(100%,20%,70%,4%,"right")
+//--------------------------------------------------------
+=formtastic-errors-on-top($label_vertical_margin: 21px)
+  ol li.error
+    p.inline-errors
+      margin-top: 0px
+    label, span.label
+      margin-top: unquote("-#{$label_vertical_margin}")
+      padding-bottom: 18px
+    fieldset label
+      margin-top: 0
+      padding-bottom: 0