rms.sass

// Prototype for Sass Form Styling
// Built atop RMS-Forms Framework
// http://www.rmsjr.com/blog/web-design/rmsforms-a-flexible-tableless-css-forms-framework/
// Still very rough around the edges!

//--------------------------------------------------------
// Form Defaults
//--------------------------------------------------------
form
  :margin 0
  :padding 0
  li
    :width 100%
    :float left
  ol
    :margin 0
    :padding 0
    :list-style none
    :overflow hidden
    :height 1%
    li ol
      :background-color #F8F3B8
.form
  :margin 0 0 0 0
  :padding 10px
  :list-style none
  :background-color #FFFFFF
  ol
    :overflow hidden
    :height 1%
  label
    :width 120px
    :padding 3px 5px 3px 0px
    :float left
    :display inline
  li
    :margin 3px 0 0 0
    :padding-bottom 3px
    ol li
      :border-bottom 0px solid #ff0000
  input
    :float left
    :display inline
    :line-height 100%
  select, textarea
    :float left
    :display inline
  input
    &[type='radio'], &[type='checkbox']
      :border 0px
  em, abbr
    :color #FF0000

//--------------------------------------------------------
// Fieldsets
//--------------------------------------------------------
fieldset
  :margin-bottom 40px
  :display block

//--------------------------------------------------------
// Vertical Mixins
//--------------------------------------------------------
!vertical_li_width = 100%
!vertical_label_width = 100%
!vertical_input_width = "auto"

=form_has_layout
  :overflow hidden
  :height 1%

=vertical_form_li(!vertical_li_width)
  li
    :clear both
    :display block
    :float left
    :width = !vertical_li_width

=vertical_form_label(!vertical_label_width)
  label
    :clear both
    :display block
    :float none
    :width = !vertical_label_width

=vertical_form_input(!vertical_input_width)
  input, select, textarea
    :display block
    :float left
    :width = !vertical_input_width

//--------------------------------------------------------
// Horizontal Mixins
//--------------------------------------------------------

!horizontal_li_width= "auto"
!horizontal_li_margin_right = 10px
!horizontal_label_width = 100px
!horizontal_input_width= "auto"

=horizontal_form_li(!horizontal_li_width,!horizontal_li_margin_right)
  li
    :clear none
    :display inline
    :float left
    :margin-right = !horizontal_li_margin_right
    :width = !horizontal_li_width
    
=horizontal_form_label(!horizontal_label_width)
  label
    :float left
    :width = !horizontal_label_width

=horizontal_form_input(!horizontal_input_width)
  input, select, textarea
    :float left
    :width = !horizontal_input_width

//--------------------------------------------------------
// Inline Mixins
//--------------------------------------------------------
=inline_form_li(!horizontal_li_width,!horizontal_li_margin_right)
  +horizontal_form_li(!horizontal_li_width,!horizontal_li_margin_right)
  li
    :clear both
  
=inline_form_label
  label
    :display inline
    :margin-right 0px
    :vertical-align middle
    :text-align left
    :width auto
    :float left

=inline_form_input
  input, select, textarea
    :display inline
    :vertical-align middle
  
//--------------------------------------------------------
// Form Template Mixins
//--------------------------------------------------------

=vvv_form(!width=100%,!input_width="false")
  +vertical_form_li(!width)
  +vertical_form_label(!width)
  @if !input_width=="false"
    +vertical_form_input(!width)
  @else
    +vertical_form_input(!input_width)
    =hvv_form(!horizontal_li_width,!horizontal_li_margin_right,!vertical_label_width,!vertical_input_width)
  +form_has_layout
  +horizontal_form_li(!horizontal_li_width,!horizontal_li_margin_right)
  +vertical_form_label(!vertical_label_width)
  +vertical_form_input(!vertical_input_width)

=hii_form(!horizontal_li_width,!horizontal_li_margin_right)
  +form_has_layout
  +horizontal_form_li(!horizontal_li_width,!horizontal_li_margin_right)
  +inline_form_label
  +inline_form_input

=hhh_form(!horizontal_li_width,!horizontal_li_margin_right,!horizontal_label_width,!horizontal_input_width)  
  +form_has_layout
  +inline_form_li(!horizontal_li_width,!horizontal_li_margin_right)
  +horizontal_form_label(!horizontal_label_width)
  +horizontal_form_input(!horizontal_input_width)

=vii_form(!vertical_li_width)
  :float left
  :display inline
  :width auto
  +vertical_form_li(!vertical_li_width)
  +inline_form_label
  input, select, textarea
    :display inline
    :vertical-align middle
    :float none
    
=vhh_form
  :float left
  :display inline
  +vertical_form_li(!vertical_li_width)
  +horizontal_form_label(!horizontal_label_width)
  input, select, textarea
    :float left
    :display inline



//--------------------------------------------------------
// MultiSelect Mixins
//--------------------------------------------------------
!multi_select_width = 200px
!multi_select_height = 200px
!multi_select_label_margin_left = 20px

=form_multi_select(!multi_select_width,!multi_select_height,!multi_select_label_margin_left)
  :height = !multi_select_width
  :width = !multi_select_height
  :float left
  :padding 0px
  :overflow hidden
  :overflow auto
  +horizontal_form_label(!horizontal_label_width)
  input
    :float left
  .form
    :height auto
    :margin 0
    :padding 0
    :border 0
  label
    :float none
    :margin-left = !multi_select_label_margin_left
    :display block
    :width auto
    :clear none

=vhh_multi_select(!multi_select_width,!multi_select_height)
  +multi_select(!multi_select_width,!multi_select_height)
  :margin 0
  :padding 0
  li
    :overflow hidden
    :width 100%   

=vii_multi_select(!multi_select_width,!multi_select_height)
  +multi_select(!multi_select_width,!multi_select_height)  
  li
    :width 100%

//--------------------------------------------------------
// For semantic Non-Purists
// (comment out if you don't like presentaitonal class names)
//--------------------------------------------------------
.vvv
  +vvv_form
.hvv
  +hvv_form  
.hii
  +hii_form
.hhh
  +hhh_form
.vii
  +vii_form
.vhh
  +vhh_form

.multi_select
  +form_multi_select

.vhh_multi_select
  +multi_select(!multi_select_width,!multi_select_height)

.vii_multi_select
  +multi_select(!multi_select_width,!multi_select_height)
  
label
  &.v, &.vertical
    :display block
    :float none
    :width auto
    :padding 3px
    :text-align left

  &.h, &.horizontal
    :display block
    :float left
    :width auto
    :display inline

.form input.noBorder
  :border 0px

.requiredDesignation
  :display block
  :padding 5px 5px 5px 5px
  :margin-bottom 10px

.required
  :color #FF0000
  label:Before
    :content "* "

.requiredDesignation:before
  :content "* "
.leftNote
  :padding 3px 5px 0 5px
  :color #FF9933
  :float left

.bottomNote
  :padding 0
  :color #FF9933
  :clear both
  :display block

.tar label
  :text-align right

.fl
  :float left

.cb
  :clear both

.w100p
  :width 100%

.mr20
  :margin-right 20px

.ml20
  :margin-left 20px

.offset1
  :margin-left 130px

.offset2
  :margin-left 105px