Formtastic Custom - Base Stylesheet transformed to SASS

formtastic-custom.sass

// Formtastic stylesheet based on the gem's version, retrieved 2013-01-04
// This version reflects the gem exactly.
// Use as a base for modifications.

.formtastic
  margin: 0
  padding: 0

  // resets
  ul, ol, li, fieldset, legend, input, button, textarea, select, p
    margin: 0
    padding: 0
  fieldset
    border: 0
  em, strong
    font-style: normal
    font-weight: normal
  ol, ul
    list-style: none
  abbr, acronym
    border: 0
    font-variant: normal
  input, button, textarea
    font-family: sans-serif
    font-size: inherit
    font-weight: inherit
  input, textarea, select
    font-size: 100%
  legend
    white-space: normal
    color: #000

  // semantic errors
  .errors
    color: #cc0000
    margin: 0.5em 0 1.5em 25%
    list-style: square
    li
      padding: 0
      border: none
      display: list-item

  // buttons and actions
  .buttons, .actions
    overflow: hidden
    padding-left: 25%
  .button, .action
    float: left
    padding-right: 0.5em
  .button_action button
    padding: 3px 8px
  .link_action a
    display: block
    padding: 3px 0

  // inputs
  .inputs
    overflow: hidden
  .input
    overflow: hidden
    padding: 0.5em 0
    margin-top: -0.5em
    margin-bottom: 1em

  // left-aligned labels
  .input .label
    display: block
    width: 25%
    float: left
    padding-top: .2em
  .fragments .label, .choices .label
    position: absolute
    width: 95%
    left: 0px
  .fragments .label label
    position: absolute

  // nested fieldsets and legends (radio, check boxes and date/time inputs use nested fieldsets)
  .choices
    .label label
      position: absolute
    position: relative
  .choices-group
    float: left
    width: 74%
    margin: 0
    padding: 0 0 0 25%
  .choice
    padding: 0
    border: 0

  // inline hints
  .input .inline-hints
    color: #666
    margin: 0.5em 0 0 25%

  // inline errors
  .inline-errors
    color: #cc0000
    margin: 0.5em 0 0 25%
  .errors
    color: #cc0000
    margin: 0.5em 0 0 25%
    list-style: square
    li
      padding: 0
      border: none
      display: list-item

  // stringish overrides (string, numeric, password, email, phone, search, etc.)
  .stringish input
    width: 72%
    &[size], &[max]
      width: auto
      max-width: 72%

  // textarea overrides
  .text textarea
    width: 72%
    &[cols]
      width: auto
      max-width: 72%

  // hidden inputs
  .hidden
    display: none

  // boolean labels
  .boolean label
    padding-left: 25%
    display: block

  // choice groups
  .choices-group
    margin-bottom: -0.5em
  .choice
    margin: 0.1em 0 0.5em 0
    label
      float: none
      width: 100%
      line-height: 100%
      padding-top: 0
      margin-bottom: 0.6em
      input
        margin: 0 0.3em 0 0.1em
        line-height: 100%

  // ADJUSTMENTS FOR INPUTS INSIDE LABELS (boolean input, radio input, check_boxes input)
  .boolean label input
    margin: 0 0.3em 0 0.1em
    line-height: 100%

  // FRAGMENTED INPUTS (DATE/TIME/DATETIME)
  .fragments
    position: relative
  .fragments-group
    float: left
    width: 74%
    margin: 0
    padding: 0 0 0 25%
  .fragment
    float: left
    width: auto
    margin: 0 .3em 0 0
    padding: 0
    border: 0
    label
      display: none
      input
        display: inline
        margin: 0
        padding: 0