path: root/app/assets/stylesheets/vendor/survival-kit/_forms.scss

// Survival ✚ Kit

// A simple search box, generic.
// If $width contains a second argument, it won't output the width to the parent element, allowing you to use box-size.
//
// <form action="#" accept-charset="utf-8" class="search-box">
//   <input type="text" class="text" value="Search..." name="q" />
//   <input type="submit" class="button" value="" />
// </form>
@mixin search-box-simple {
  // Preferences
  $width: 210px;
  $height: 27px;
  $font-size: 12px;

  background: #FFF;
  overflow: hidden;
  height: $height;
  width: $width;

  // Style
  border:1px solid #4BC5ED;
  margin-top: -3px;
  @extend .bradius-inner;
  @include gradient(#FFF, #F5F5F5);

  &.active {
    @include box-shadow(0px 1px 2px transparentize(#000, 0.8));
    background:#FFF;
  }

  // Calculations
  $button-width: 27px;
  $input-width: $width - $button-width - 2px;

  input, button {
    background:transparent;
    border: 0;
    font-size: $font-size;
    outline: none;
  }
  .text {
    @include size($input-width, $height, 7px 10px);
    color: #777;
    float: left;
    line-height: $height - (7px * 2);
  }
  button, .search {
    cursor: pointer;
    display: block;
    float:right;
    height: $height;
    padding:0;
    width: $button-width;
  }
  .search {
    background:transparent image-url('redesign/vendor/survival-kit/search-13x16.png') center center no-repeat;
  }
}

// Search Box Simple dimention override
@mixin search-box-simple-size($width, $height, $button-width: 27px) {
  $input-width: $width - $button-width - 2px;
  height: $height;
  width: $width;
  .text {
    @include size($input-width, $height, 7px 10px);
    line-height: $height - (7px * 2);
  }
  button, .search {
    height: $height;
    width: $button-width;
  }
}


// Inputs.
$input-shadow           : inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2) !default;
$input-hover-color      : #7DBEF1 !default;
$input-hover-shadow     : 0 0 6px #7DBEF1 !default;

//
// Adds the Input state effects
//
@mixin input-effects() {
  @if $input-shadow { @include box-shadow($input-shadow); }
  border:1px solid #CCCCCC;
  outline: 0;
  &:focus {
    @if $input-hover-shadow {
      @include box-shadow($input-hover-shadow);
    }
    border:1px solid $input-hover-color;
  }
}

//
// Forms Styles (Survival Kit)
// This styles are meant to be used with Simple_Forms (Rails)
// Usage:
// simple-forms(default, option-1 option2)
// Options:
//    block-hints : display the hints right after the inut field.
@mixin simple-forms($selector : "simple_form", $opts:false) {
  // Setup
  $size-modifier          : 0px;
  $input-width            : 300px;
  $input-font-size        : $base-font-size + $size-modifier;
  $vertical-spacing       : 7px;
  $horizontal-spacing     : 10px;
  $label-width            :148px;

  // 7px                  = base padding at 0 size modifier.
  $vertical-field-padding : floor((7px + $size-modifier) + ($size-modifier / 4.4) * 2);
  $horizontal-field-padding: 6px;

  // Colors.
  $hint-color             : #6E6E6E;

  @if $selector == auto or $selector == default {
    $selector: 'simple_form';
  }

  .hidden { display: none; }
  // Force $opts into a list goddamnit.
  $opts: join($opts, herp derp);

  .#{$selector} {
    @include debug;
    .hint {
      @include debug(green);
      display:inline-block;
      padding:$vertical-field-padding 0 $vertical-field-padding ($label-width + $horizontal-spacing);
    }

    // Fix a issue with the spacing.
    input.date {
      label {
        width: 145px !important;
      }
    }


    label {
      @include debug(green);
      vertical-align:middle;
      width:$label-width; // double line labels.
      display:inline-block;  // works with already inline displayed items.
      margin:0 $horizontal-spacing 0 0;
      padding: $vertical-field-padding 0;
      line-height:$input-font-size + ($input-font-size * 0.26);
      text-align: right;
      abbr {
        @include debug(yellow);
        @if index($opts, no-stars) {
          display:none;
        } @else {
          color:#E62500;
          float: right;
          margin-left: $horizontal-spacing;
        }
      }
      &.boolean, &.collection_radio_buttons { padding:$horizontal-spacing/2; width: auto;}
    }

    .ext-sfr {
      @include debug(yellow);
      display: inline-block;
      vertical-align: middle;
      width: $label-width;
    }

    .input {
      @include debug(blue);
      padding:$vertical-spacing 0;
      .hint {
        @extend .ext-sfr;
        color: #8A8A8A;
        display: block;
        font-size: size(11px);
        padding: 2px 0 0 ($label-width + $horizontal-spacing);
        width: $input-width + ($horizontal-field-padding * 2) + $horizontal-spacing;
      }
      &.boolean {
        padding: 2px 0 0 ($label-width + $horizontal-spacing);
      }
    }

    select {
      border:1px solid #CCCCCC;
      outline:none;
      // floor(Font Size * Line Height) + (Vertical Input Padding * 2) + 1px)
      $calc: floor(($input-font-size * $base-line-height ) + ($vertical-field-padding * 2)) + (1px);
      height: $calc + 1px;
      padding:(6px + $size-modifier) * $base-line-height ;
      &:focus {
        border:1px solid $input-hover-color;
      }
    }

    // Needs to be nested so it doesn't collide with date selects.
    .select select, .country select {
      width:$input-width + ($horizontal-field-padding * 2);
    }
    textarea, input[type=text], input[type=password], input[type=email] {
      font-size:$input-font-size;
      padding: $vertical-field-padding $horizontal-field-padding;
      vertical-align:top;
      width:$input-width;
      // Input Effects
      @include input-effects;
    }

    textarea {
      height:80px;
      max-width:$input-width;
    }

    input {
      &.check_boxes, &.radio, &.boolean {
        vertical-align:middle;
      }
    }

    .submit, .padded {
      padding-left: $label-width + $horizontal-spacing;
    }

    .form-actions {
      background: #F7F7F7;
      border-top: 1px solid #DDD;
      padding: 17px 0px 18px $label-width + $horizontal-spacing;
    }

    // Simple Form Button for the forms.
    .button {
      @extend .sk-button;
    }


    // Errors @todo: this should be in its own section.
    span.error, .error {
      @extend .ext-sfr;
      color: #D65C5C;
      font-size: 12px;
      margin-left: 10px;
    }

    #error_explanation {
      @include box-shadow(#D4D4D4 0 0 10px);
      background: #FFEBD6;
      border: 1px solid #FFB36C;
      color:#895334;
      margin:$vertical-spacing * 4 0;
      padding: 10px 14px;
      h2 {
        @include header-size(18px);
        color:#AE4910;
        margin-top:0;
      }
    }


      // Colors for form validity
    input:valid, textarea:valid   {}

    input:invalid, textarea:invalid {
      $error-color: #FF6161;
      box-shadow:$input-shadow, inset -7px 0px 0px lighten($error-color, 15%) !important;
      &:focus {
        @if $input-hover-shadow {
          @include box-shadow($input-hover-shadow, inset -7px 0px 0px $error-color !important );
        }
      }
    }
  }

  // Rails 3 wraps errors in Divs
  .field_with_errors {
    display:inline;
  }

  // Make this compatible when you have no javascript loaded!
  @if not index($opts, no-browser-support) {
    .ie7 {
      select { margin-top:15px;}
    }
  }
}

// Allows you to have different widths for different layouts.
@mixin simple-form-width($width:false, $label-width:false) {
  $horizontal-field-padding : 6px;
  $horizontal-spacing       : 3px;
  $input-width              : $width;

  @if $width {
    textarea, input[type=text], input[type=password] {
      max-width: $width;
      width:$width;
    }

    .select select, .country select {
      width:$input-width + ($horizontal-field-padding * 2);
    }
  }

  @if $label-width {
    .input .hint {
      width:$label-width;
    }
  }
}