compass_ae_sencha 1.0.0 → 1.0.1

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/default/widgets/_form-sliders.scss

@@ -1,149 +0,0 @@
-@import '../global';
-
-/**
- * Includes default form slider styles.
- *
- * @member Ext.field.Slider
- */
-@mixin sencha-form-sliders {
-
-  .x-slider-field, .x-toggle-field {
-    .x-component-outer {
-      padding: $form-spacing;
-    }
-  }
-
-  .x-slider,
-  .x-toggle {
-      position: relative;
-      height: $form-thumb-size;
-      min-height: 0;
-      min-width: 0;
-
-    > * {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-    }
-  }
-
-  .x-slider.x-item-disabled {
-    opacity: .6;
-  }
-
-  @if $basic-slider {
-    .x-thumb {
-      position: absolute;
-      height: $form-thumb-size;
-      width: $form-thumb-size;
-      border: #000;
-      background-color: #777;
-
-      &.x-dragging {
-        background-color: #AAA;
-      }
-    }
-
-    // Create the slider track
-    .x-slider:after {
-      @include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0);
-      right: 0;
-      margin: 0 $form-toggle-size/2;
-      border: .1em solid rgba(#000, .1);
-      border-bottom: 0;
-      background-color: $form-light;
-    }
-  } @else {
-    .x-thumb {
-      position: absolute;
-      height: $form-thumb-size;
-      width: $form-thumb-size;
-
-      // The actual thumb
-      &:after {
-        @include insertion($form-toggle-size, $form-toggle-size, $form-thumb-space, $form-thumb-space);
-        border: 1px solid darken($form-light, 30%);
-        @if $include-border-radius { @include border-radius($form-toggle-size/2); }
-        // overflow: visible;
-        @include background-gradient($form-light);
-        @include background-clip(padding-box);
-      }
-
-      &.x-dragging {
-        &:after {
-          @include background-gradient(darken($form-light, 5%));
-        }
-        opacity: 1;
-      }
-    }
-
-    // Create the slider track
-    .x-slider:after {
-      @include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0);
-      right: 0;
-      margin: 0 $form-toggle-size/2;
-      @include background-gradient($form-light, 'recessed');
-      border: .1em solid rgba(#000, .1);
-      border-bottom: 0;
-      @include box-shadow(rgba(#fff,.7) 0 .1em 0);
-      @if $include-border-radius { @include border-radius($form-slider-size/2); }
-    }
-  }
-
-  .x-toggle {
-    width: $form-thumb-size * 2;
-    @if $include-border-radius { @include border-radius($form-thumb-size/2); }
-    overflow: hidden;
-    border: 1px solid darken($form-light, 15%);
-    @include background-gradient($form-light, 'recessed');
-    -webkit-box-flex: 0;
-
-    // Masking the slider doesn't work in iOS 3, so we're fake-masking the outer area
-    // UPDATED: Doesnt fly on Android...
-    // &:after {
-    //   @include insertion($form-thumb-size*2, $form-thumb-size, 0, 0);
-    //   -webkit-mask: theme_image($theme-name, "trackmask_outer.png");
-    //   background-color: white;
-    //   -webkit-mask-size: $form-thumb-size*2 $form-thumb-size;
-    //   pointer-events: none;
-    //   z-index: 4;
-    // }
-
-    .x-thumb {
-      &.x-dragging {
-        opacity: 1;
-      }
-
-      &:before {
-        top: ($form-thumb-size - $form-toggle-size) / 2;
-      }
-
-      // Actual thumb
-      // &:after {
-      //   @include insertion($form-thumb-size, $form-thumb-size, 0, 0);
-      //   -webkit-box-shadow: rgba(0,0,0,.5) 0 0 .15em;
-      //   @if $include-border-radius { @include border-radius($form-thumb-size/2); }
-      //   -webkit-transform: scale(.65);
-      //   @include background-gradient($complement_light, 'glossy');
-      //   border: 1px solid $complement;
-      //   overflow: visible;
-      //   z-index: 2;
-      // }
-
-      // &.x-dragging {
-      //   &:after {
-      //     -webkit-transform: scale(.75);
-      //   }
-      // }
-      //
-      // Used to animate the thumb. class added/removed by javascript when needed.
-      // &.x-animate {
-      //   -webkit-transition: left .2s ease-in-out;
-      // }
-    }
-  }
-
-  .x-toggle-on {
-    @include background-gradient($confirm-color, 'recessed');
-  }
-}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/default/widgets/_form.scss

@@ -1,654 +0,0 @@
-@import '../global';
-@import 'form-sliders';
-
-/**
- * @var {color} $form-bg-color
- * Default background-color for forms.
- *
- * @member Ext.form.Panel
- */
-$form-bg-color: #eee !default;
-
-/**
- * @class Ext.field.Field
- */
-
-/**
- * @var {color} $form-field-bg-color
- * Default background-color for form fields.
- */
-$form-field-bg-color: #fff !default;
-
-/**
- * @var {color} $form-light
- * Light color for form fields, mostly used on field borders.
- */
-$form-light: #ddd !default;
-
-/**
- * @var {color} $form-dark
- * Dark color for form fields, mostly used on labels/text.
- */
-$form-dark: #333 !default;
-
-/**
- * @var {measurement} $form-label-width
- * Default width for form labels.
- */
-$form-label-width: 6em !default;
-
-/**
- * @var {color} $form-label-background-color
- * The default background color for labels
- */
-$form-label-background-color: lighten($form-light, 10%);
-
-/**
- * @var {measurement} $form-field-height
- * Default height for form fields.
- */
-$form-field-height: 2.5em !default;
-
-/**
- * @var {measurement} $form-spacing
- * Default spacing for form fields, used for padding, etc.
- */
-$form-spacing: .6em !default;
-
-/**
- * @var {measurement} $form-textarea-height
- * Default height for form textareas.
- *
- * @member Ext.field.TextArea
- */
-$form-textarea-height: 6em !default;
-
-/**
- * @var {measurement} $form-thumb-size
- * Default size of "thumbs" for form sliders/toggles.
- *
- * @member Ext.field.Slider
- */
-$form-thumb-size: 2.2em !default;
-
-/**
- * @var {measurement} $form-toggle-size
- * Thumb size minus padding for inset thumbs like in a Toggle element.
- *
- * @member Ext.field.Toggle
- */
-$form-toggle-size: $form-thumb-size - .35em;
-
-/**
- * @var {measurement} $form-fieldset-radius
- * Default border-radius for form fieldsets.
- *
- * @member Ext.form.FieldSet
- */
-$form-fieldset-radius: .4em !default;
-
-/**
- * @var {measurement} $form-slider-size
- * Height of the slider "track."
- *
- * @member Ext.field.Slider
- */
-$form-slider-size: .8em !default;
-
-$form-spinner-button-width: 3em !default;
-
-// Private utility vars & mixins
-
-$form-thumb-space: ( $form-thumb-size - $form-toggle-size ) / 2;
-$form-input-fields: '.x-field-text, .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';
-
-@mixin label {
-  text-shadow: #fff 0 1px 1px;
-  color: $form-dark;
-}
-
-@mixin checkmark($color: #000){
-  @extend .x-checkmark-base;
-  background-color: $color;
-}
-
-@mixin radiomark($color: #000){
-  @extend .x-radiomark-base;
-  background-color: $color;
-}
-
-@mixin selectmark($color: #000){
-  @extend .x-selectmark-base;
-  background-color: $color;
-}
-/**
- * Includes default form styles.
- *
- * @member Ext.form.Panel
- */
-@mixin sencha-form($include-sliders: $include-form-sliders) {
-
-  // Ext.form.Panel
-  .x-form {
-    .x-scroll-container {
-      background-color: $form-bg-color;
-
-      > .x-inner {
-        padding: 1em;
-      }
-    }
-  }
-
-  // Label
-  .x-form-label {
-    @include label;
-    @include bevel-text('light');
-    padding: $form-spacing;
-    display: none !important;
-    background-color: $form-label-background-color;
-
-    span {
-      font-size: .8em;
-      font-weight: bold;
-    }
-
-    .x-form-label-nowrap & {
-      @include ellipsis;
-    }
-  }
-
-  //  Ext.field.Field
-  .x-field {
-    @include display-box;
-    min-height: $form-field-height;
-    background: #fff;
-
-    .x-field-input {
-      position: relative;
-      min-width: 3.7em;
-    }
-
-    .x-field-input,
-    .x-input-el {
-      width: 100%;
-    }
-
-    &.x-field-labeled {
-      .x-form-label {
-        display: block !important;
-      }
-    }
-
-    &:last-child {
-      border-bottom: 0;
-    }
-  }
-
-  .x-label-align-left,
-  .x-label-align-right {
-    .x-component-outer {
-      @include box-flex(1);
-    }
-  }
-
-  .x-label-align-left {
-    &:first-child {
-      .x-form-label {
-        @if $include-border-radius { @include border-top-left-radius($form-fieldset-radius); }
-      }
-    }
-
-    &:last-child {
-      .x-form-label {
-        @if $include-border-radius { @include border-bottom-left-radius($form-fieldset-radius); }
-      }
-    }
-
-    .x-form-label {
-
-    }
-  }
-
-  .x-label-align-right {
-    @include box-direction(reverse);
-
-    &:first-child {
-      .x-form-label {
-        @if $include-border-radius { @include border-top-right-radius($form-fieldset-radius); }
-      }
-    }
-
-    &:last-child {
-      border-bottom: 0;
-
-      .x-form-label {
-        @if $include-border-radius { @include border-bottom-right-radius($form-fieldset-radius); }
-      }
-    }
-    .x-form-label {
-
-    }
-  }
-
-  .x-label-align-left,
-  .x-label-align-right {
-    @include box-orient(horizontal !important);
-  }
-
-  .x-label-align-top,
-  .x-label-align-bottom {
-    @include box-orient(vertical !important);
-    .x-form-label {
-
-    }
-  }
-
-  .x-label-align-top {
-    &:first-child {
-      .x-form-label {
-        @if $include-border-radius { @include border-top-radius($form-fieldset-radius); }
-      }
-    }
-
-    // Needed so that the arrow icon in selectfield's only fit to the size of the field. TOUCH-2672
-    .x-component-outer {
-      position: relative;
-    }
-  }
-
-  .x-label-align-bottom {
-    @include box-direction(reverse);
-
-    &:last-child {
-      .x-form-label {
-        @if $include-border-radius { @include border-bottom-radius($form-fieldset-radius); }
-      }
-    }
-  }
-
-  .x-input-el {
-    padding: .4em;
-    min-height: $form-field-height;
-    display: block;
-    border-width: 0;
-    background: transparent;
-    -webkit-appearance: none;
-  }
-
-  .x-field-mask {
-    @include stretch;
-  }
-
-  // Required fields
-  .x-field-required {
-    label:after,
-    .x-form-label:after {
-      content: "*";
-      display: inline;
-    }
-  }
-
-  .x-item-disabled {
-    label:after,
-    .x-form-label:after {
-      color: #666 !important;
-    }
-  }
-
-  // Ext.field.TextArea
-  .x-field-textarea {
-    textarea {
-      min-height: $form-textarea-height;
-      padding-top: .5em;
-    }
-  }
-
-  // Ext.field.Hidden
-  .x-field-hidden {
-    @extend .x-hidden-display;
-  }
-
-  // Ext.field.Checkbox
-  .x-checkmark-base {
-    @include insertion(1.4em, 1.4em, 50%, auto);
-    right: ($form-spacing + .5em);
-    -webkit-mask-size: 1.4em;
-    -webkit-mask-image: theme_image('default', "pictos/check2.png");
-    margin-top: -.7em;
-  }
-
-  // Ext.field.Radio
-  .x-radiomark-base {
-    @include insertion(1.4em, 1.4em, 50%, auto);
-    right: ($form-spacing + .5em);
-    margin-top: -0.7em;
-    -webkit-mask-size: 1.4em;
-    -webkit-mask-image: theme_image('default', "pictos/circle4.png");
-  }
-
-  .x-field-checkbox .x-input-el {
-    position: relative;
-    &:after {
-      @include checkmark($form-light);
-    }
-    &:checked:after {
-      @include checkmark($active-color);
-    }
-  }
-
-  .x-field-radio .x-input-el {
-    position: relative;
-    &:before {
-      @include radiomark(darken($form-light, 5));
-    }
-    &:after {
-      @include radiomark($form-light);
-      -webkit-mask-image: theme_image('default', "pictos/circle3.png");
-    }
-    &:checked:before {
-      background-color: $active-color;
-    }
-  }
-
-  .x-item-disabled {
-    &.x-field-radio {
-      .x-input-el:checked:before {
-        background: mix($form-light, $active-color, 60);
-      }
-
-      .x-input-el:after {
-        background: #eee;
-      }
-    }
-
-    &.x-field-checkbox {
-      .x-input-el {
-        &:checked:after {
-          background: mix($form-light, $active-color, 60);
-        }
-      }
-    }
-  }
-
-  // Ext.field.Spinner
-  .x-spinner {
-    .x-component-outer {
-      @include display-box;
-
-      > * {
-        width: auto;
-      }
-    }
-
-    .x-field-input {
-      -webkit-box-flex: 1;
-
-      .x-input-el {
-        -webkit-text-fill-color: #000;
-        width: 100%;
-        text-align: center;
-      }
-
-      //http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-inputs-spin-box
-      input::-webkit-outer-spin-button,
-      input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-    }
-
-    &.x-item-disabled {
-      .x-input-el {
-       -webkit-text-fill-color: #B3B3B3;
-      }
-
-      .x-spinner-button {
-        @include toolbar-button(lighten($form-light, 10), matte);
-        color: #aaa !important;
-      }
-    }
-
-    .x-spinner-button {
-      margin-top: .25em;
-      margin-bottom: .25em;
-      width: 2em;
-      padding: .23em 0 .27em;
-      font-weight: bold;
-      text-align: center;
-      border: 1px solid $form-light !important;
-      @include border-radius(1em);
-      @include toolbar-button(lighten($form-light, 5), matte);
-    }
-
-    .x-spinner-button-down {
-      margin-left: .25em;
-    }
-    .x-spinner-button-up {
-      margin-right: .25em;
-    }
-
-    &.x-field-grouped-buttons {
-      .x-input-el {
-        text-align: left;
-      }
-
-      .x-spinner-button-down {
-        margin-right: .5em;
-      }
-    }
-  }
-
-  .x-android {
-    .x-spinner-button {
-      padding: .40em 0 .11em !important;
-    }
-  }
-
-  // Ext.field.Select
-  .x-select-overlay {
-    .x-list-item-label {
-      height: 2.6em;
-    }
-
-    .x-list-label {
-      @include ellipsis;
-      display: block;
-    }
-
-    .x-item-selected {
-      .x-list-label {
-        margin-right: 2.6em;
-      }
-
-      .x-list-item-inner {
-        &:before {
-          @include checkmark(rgba(0,0,0,.3));
-          margin-top: -.8em;
-        }
-
-        &:after {
-          @include checkmark($form-light);
-        }
-      }
-    }
-  }
-
-  @if $include-sliders {
-    @include sencha-form-sliders;
-  }
-
-  //remove browser styling
-  input[type="search"]::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-  }
-
-  .x-field-number {
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-
-    .x-field-search {
-        .x-field-input {
-            position: relative;
-
-            &:before {
-                @include insertion(.86em, .86em, 50%, .5em);
-                -webkit-mask-image: theme_image('default', "pictos/search.png");
-                -webkit-mask-size: .86em;
-                background-color: #ccc;
-                -webkit-mask-repeat: no-repeat;
-                margin-top: -0.43em;
-      }
-      .x-form-field {
-        margin-left: $toolbar-search-left-padding - 0.67em;
-      }
-    }
-  }
-
-  //clear icon
-  $form-clear-size: 2.2em;
-
-  .x-field-input {
-    .x-clear-icon {
-      display: none;
-      background: theme_image('default', "clear_icon.png") no-repeat;
-      background-position: center center;
-      background-size: 55% 55%;
-      width: $form-clear-size;
-      height: $form-clear-size;
-      margin: .5em;
-      margin-top: -($form-clear-size/2);
-      position: absolute;
-      top: 50%;
-      right: -.5em;
-    }
-  }
-
-  .x-field-clearable {
-    .x-clear-icon {
-      display: block;
-    }
-
-    .x-field-input {
-      padding-right: $form-clear-size;
-    }
-  }
-
-  .x-android .x-input-el {
-    -webkit-text-fill-color: #000;
-  }
-
-  .x-android .x-empty .x-input-el {
-    -webkit-text-fill-color: #A9A9A9;
-  }
-
-  //disabled fields
-  .x-item-disabled .x-form-label span,
-  .x-item-disabled input,
-  .x-item-disabled .x-input-el,
-  .x-item-disabled .x-spinner-body,
-  .x-item-disabled select,
-  .x-item-disabled textarea,
-  .x-item-disabled .x-field-clear-container {
-    color: lighten($form-dark, 50%);
-    -webkit-text-fill-color: lighten($form-dark, 50%);
-    pointer-events: none;
-  }
-
-  // Ext.form.FieldSet
-  .x-form-fieldset {
-    margin: 0 0 1.5em;
-
-    .x-form-label {
-      border-top: 1px solid lighten($form-light, 20%);
-    }
-
-    .x-form-fieldset-inner {
-      border: 1px solid $form-light;
-      background: #fff;
-      padding: 0;
-      @if $include-border-radius { @include border-radius($form-fieldset-radius); }
-      overflow: hidden;
-    }
-
-    //Ext.field.Field
-    .x-field {
-      border-bottom: 1px solid $form-light;
-      background: transparent;
-
-      &:first-child {
-        @if $include-border-radius {
-          @include border-top-radius($form-fieldset-radius);
-        }
-      }
-
-      &:last-child {
-        border-bottom: 0;
-
-        @if $include-border-radius {
-          @include border-bottom-radius($form-fieldset-radius);
-        }
-      }
-    }
-  }
-
-  .x-form-fieldset-title {
-    @include label;
-    margin: 1em ( $form-spacing + .1em ) .3em;
-    color: $form-dark;
-    font-weight: bold;
-
-    .x-innerhtml {
-      @include ellipsis;
-    }
-  }
-
-  .x-form-fieldset-instructions {
-    @include label;
-    color: lighten($form-dark, 30%);
-    margin: 1em ( $form-spacing + .1em ) .3em;
-    font-size: .8em;
-    text-align: center;
-  }
-
-  // Ext.field.Select
-  .x-selectmark-base {
-    @include insertion(1em, 1em, 50%, auto);
-    right: ($form-spacing + .1em);
-    -webkit-mask-size: 1em;
-    -webkit-mask-image: theme_image('default', "pictos/arrow_down.png");
-    margin-top: -.5em;
-  }
-
-  // Create the dropdown arrow
-  // for select fields
-  .x-field-select {
-    position: relative;
-    z-index: 1;
-
-    .x-component-outer {
-      &:after {
-        @include selectmark($form-light);
-      }
-
-      &:before,
-      &:after {
-        pointer-events: none;
-        position: absolute;
-        display: block;
-      }
-
-      &:before {
-        @include insertion(4em,auto,0,auto);
-        right: 0;
-        bottom: 0;
-        @if $include-border-radius { @include border-right-radius($form-fieldset-radius); }
-        @if $include-highlights { background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba($form-field-bg-color, 0)), color-stop(.5, rgba($form-field-bg-color, 1))); }
-      }
-    }
-  }
-}