0byt3m1n1

Path: /home/afpkr2/m/resources/themes/stylesheets/sencha-touch/default/widgets/ [ Home ]
File: _form.scss
@import '../global';
@import 'form-sliders';

$form-bg-color: #eee !default;
$form-field-bg-color: #fff !default;
$form-light: #ddd !default;
$form-dark: #333 !default;
$form-label-width: 6em !default;
$form-field-height: 2.5em !default;
$form-spacing: .6em !default;
$form-textarea-height: 6em !default;
$form-thumb-size: 2.2em !default;
$form-toggle-size: $form-thumb-size - .35em;
$form-thumb-space: ( $form-thumb-size - $form-toggle-size ) / 2;
$form-fieldset-radius: .4em !default;
$form-slider-size: .8em !default;

// Private utility vars
$form-input-fields: '.x-input-text, .x-input, .x-input-number, .x-spinner-body, .x-input-radio, .x-input-checkbox, .x-input-email, .x-input-url, .x-input-password, .x-input-slider';
$form-scrollable-fields: '.x-field-slider, .x-field-toggle, .x-field-checkbox, .x-field-radio';

@mixin label {
  text-shadow: #fff 0 1px 1px;
  color: $form-dark; 
}

@mixin sencha-form($include-sliders: $include-form-sliders) {
  
  .x-form .x-panel-body {
    padding: 1em;
    background-color: $form-bg-color;
  }
  
  .x-input-el {
    min-height: $form-field-height;
    width: 100%;
    display: block;
    background: $form-field-bg-color none;
    -webkit-appearance: none;
  }
  
  .x-field {
    overflow: hidden;
    position: relative;
    min-height: $form-field-height;
    border-bottom: 1px solid $form-light;
    
    // .x-input-text {
    //   white-space: nowrap;
    //   text-overflow: ellipsis;
    //   overflow: hidden;
    // }
    
    input, textarea, select, .x-field-slider {
      @extend .x-input-el;
      @include border-radius(0);
      padding: .4em;
      border: 0;
    }
  }
  
  .x-field:last-child {
    border-bottom: 0;
  }
  
  .x-field-mask {
    @include stretch;
  }
  
  #{$form-scrollable-fields} {
    .x-field-mask {
      @extend .x-hidden-display;
    }
  }

  // Hidden fields

  .x-field-hidden {
    @extend .x-hidden-display;
  }

  .x-form-fieldset {
    
    margin: 1em 0 1.5em;
    .x-panel-body {
      border: 1px solid $form-light;
      padding: 0;
      @if $include-highlights {
        -webkit-box-shadow: rgba(255,255,255,.7) 0 1px 0;
      }
      @include border-radius($form-fieldset-radius);
      overflow: hidden;
    }
  }
  
  .x-form-fieldset-title {
    @include label;
    margin: 1em ( $form-spacing + .1em ) .3em;
    color: $form-dark;
    font-weight: bold;
  }
  
  .x-form-fieldset-instructions {
    @include label;
    color: lighten($form-dark, 30%);
    margin: 1em ( $form-spacing + .1em ) .3em;
    font-size: .8em;
    text-align: center;
  }
  
  .x-form-label {
    @include label;
    @include bevel-text('light');
    background-color: lighten($form-light, 10%);
    padding: $form-spacing;
    border-top: 1px solid lighten($form-light, 20%);
    display: block;

    span {
      font-size: .8em;
      font-weight: bold;
    }
  }

  .x-form-field-container {
    @include box-flex(1);
    width: 100%;
    position: relative;
  }
  
  .x-field {
    @include display-box;
  }
  
  #{$form-input-fields} {
    @include box-flex(1);
  }
  
  .x-label-align-left, .x-label-align-right {
    @include box-orient(horizontal);
    @include box-align(stretch);
    
//    .x-form-label {
//      width: $form-label-width;
//    }
  }
  
  // Round the corners on fieldsets.
  // Warning: It ain't pretty

  .x-form-fieldset .x-field {
    &:first-child, &:first-child > :first-child:not(.x-input-toggle), &:first-child > :first-child input, &:first-child > :first-child textarea {
      @include border-top-left-radius($form-fieldset-radius);
    }

    &:first-child, &:first-child > :last-child:not(.x-input-toggle), &:first-child > :last-child input, &:first-child > :last-child textarea {
      @include border-top-right-radius($form-fieldset-radius);
    }

    &:last-child, &:last-child > :first-child:not(.x-input-toggle), &:last-child > :first-child input, &:last-child > :first-child textarea {
      @include border-bottom-left-radius($form-fieldset-radius);
    }

    &:last-child, &:last-child > :last-child:not(.x-input-toggle), &:last-child > :last-child input, &:last-child > :last-child textarea {
      @include border-bottom-right-radius($form-fieldset-radius);
    }
  }

  .x-label-align-right {
    @include box-direction(reverse);
    @include box-pack(end);
  }
  
  .x-form-fieldset .x-label-align-right {
    &:first-child {
      .x-form-label {
        @include border-top-right-radius($form-fieldset-radius);
      }
      #{$form-input-fields} {
        @include border-top-right-radius(0);
      }
    }
    &:last-child {
      .x-form-label {
        @include border-bottom-right-radius($form-fieldset-radius);
      }
      #{$form-input-fields} {
        @include border-bottom-right-radius(0);
      }
    }
  }
  
  .x-label-align-top, .x-label-align-bottom {
    @include box-orient(vertical);
  }
  .x-label-align-bottom {
    @include box-direction(reverse);
  }
  
  // Required fields
  
  .x-field-required {
    label:after, .x-form-label:after {
      content: "*";
      display: inline;
    }
    .x-form-label {
      // color: $base-color;
    }
  }

  // Create the dropdown arrow
  // for select fields
  .x-field-select {
    
    // Tip
    &:after {
      @include insertion(0,0,0,auto);
      right: 0;
      position: absolute;
      display: block;
      margin: 1em;
      border: .4em solid transparent;
      border-top-color: $form-light;
      z-index: 1;
    }

//   &.x-label-align-right:after {
//      right: $form-label-width;
//    }

    &.x-label-align-top:after {
      top: auto;
      bottom: 0;
    }
  }
  
  .x-item-disabled {
    .x-form-label span, input, .x-spinner-body, select, textarea, .x-field-clear-container {
      color: lighten($form-dark, 50%);
    }
  }
  
  .x-field-textarea {
    textarea {
      min-height: $form-textarea-height;
      padding-top: .5em;
    }
  }
  
  .x-field .x-input-radio, .x-field .x-input-checkbox {
    &:after {
      @include insertion(1.3em, 1.3em, .8em, auto);
      right: $form-spacing;
      -webkit-mask: theme-image($theme-name, 'check.png') no-repeat;
      /* somehow the auto height of this mask image crashes the simulators, changed it to a fixed value for now */
      -webkit-mask-size: 1.3em 1.1em;
      @include background-gradient($form-light, 'flat');
    }
    
    &:checked:after {
      @include background-gradient($active-color, 'flat');
    }
  }
  
  .x-label-align-right .x-input-radio:after, .x-label-align-right .x-input-checkbox:after {
    right: auto;
    left: $form-spacing;
  }

  // Spinner
  .x-spinner {
    border-bottom: 1px solid $form-light;
  }
  
  .x-spinner .x-spinner-body {
    @include display-box;
    @include box-direction(normal);
  }
  
  .x-spinner-body {
    @include box-orient(horizontal);
    @include box-align(stretch);
    width: 100%;
    text-align: center;
    
    span {
      font-size: 1.3em;
      font-weight: bold;
      @include bevel-text('light');
    }

    .x-form-field-container {
      width: 3em;
    }

    input {
      padding: 0;
      border-right: 0;
      border-left: 0;
      @include border-radius(0);
      border-color: $form-light;
      text-align: center;
    }

    .x-spinner-down, .x-spinner-up {
      @include box-flex(1);
      font-weight: bold;
      padding: .3em 0;
      @include toolbar-button($form-light);
    }
    .x-spinner-down {
      border-left: 0;
    }
    .x-spinner-up {
      border-right: 0;
    }
  }

  $form-clear-size: 1.1em;

  .x-field-clear-container {
    min-height: $form-field-height;
    background-color: $form-field-bg-color;
    @include display-box;
    @include box-orient(horizontal);
    @include box-align(center);
    @include box-pack(center);
    padding: 0 .3em;
  }

  .x-android .x-field-clear {
    line-height: 1.2em;
    padding: 0 .3em;
  }

  .x-field-clear {
    width: $form-clear-size;
    height: $form-clear-size;
    @include border-radius($form-clear-size/2);
    background-color: rgba(#000, .15);
    color: #fff;
    font-weight: bold;
    line-height: .9em;
    text-align: center;
    padding: 0 .27em;
  }
  
  .x-field-clearable input.x-field-clearable {
    padding-right: $form-clear-size + $form-spacing;
  }

  .x-label-align-top .x-field-clear {
    top: auto;
    bottom: .7em;
  }

  .x-label-align-right .x-field-clear {
    top: $form-spacing;
//    right: $form-spacing + $form-label-width;
    right: $form-spacing;
  }

  @if $include-sliders {
    @include sencha-form-sliders;
  }

  .x-select-overlay {
    min-width: 200px;
  }
}