erp_app 3.0.0 → 3.0.1

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

@@ -0,0 +1,354 @@
+// Toolbar icons used with permission from Drew Wilson
+// http://pictos.drewwilson.com/
+// Pictos icons are (c) 2010 Drew Wilson
+
+@import '../global';
+
+/**
+ * @class Ext.Button
+ */
+
+/**
+ * @var {measurement} $button-height Default height for buttons.
+ */
+$button-height: 1.8em;
+
+/**
+ * @var {measurement} $button-radius Default border-radius for buttons.
+ */
+$button-radius: .4em !default;
+
+/**
+ * @var {measurement} $button-stroke-weight Default border width for buttons.
+ */
+$button-stroke-weight: .1em !default;
+
+/**
+ * @var {string} $button-gradient Default gradient for buttons.
+ *
+ * See {@link Global_CSS#background-gradient background-gradient}.
+ */
+$button-gradient: $base-gradient !default;
+
+/**
+ * @var {string} $toolbar-icon-size Default size (width and height) for toolbar icons.
+ */
+$toolbar-icon-size: 1.4em !default;
+
+/**
+ * @var {boolean} $include-button-uis Optionally disable separate button UIs, including action, confirm, and decline.
+ */
+$include-button-uis: $include-default-uis !default;
+
+/**
+ * @var {boolean} $include-button-highlights Optionally disable special CSS3 effects on buttons including gradients, text-shadows, and box-shadows.
+ */
+$include-button-highlights: $include-highlights !default;
+
+
+/**
+ * Includes default button styles.
+ *
+ * See {@link Global_CSS#background-gradient background-gradient}.
+ */
+@mixin sencha-buttons {
+  // Basic button style
+  .x-button {
+    @include background-clip(padding-box);
+    @if $include-border-radius { @include border-radius($button-radius); }
+    @include display-box;
+    @include box-align(center);
+    @include toolbar-button(#ccc, $button-gradient);
+    min-height: $button-height; // Why was this !important? Breaks small uis - DK
+    padding: .3em .6em;
+    position: relative;
+    overflow: hidden;
+    -webkit-user-select: none;
+
+    // Default icon style
+    .x-button-icon {
+      width: 2.1em;
+      height: 2.1em;
+      background-repeat: no-repeat;
+      background-position: center;
+      display: block;
+
+      &.x-icon-mask {
+        width: 1.3em;
+        height: 1.3em;
+        -webkit-mask-size: 1.3em;
+      }
+    }
+
+    &.x-item-disabled .x-button-label, &.x-item-disabled .x-button-icon {
+      opacity: .5;
+    }
+  }
+
+  .x-button-round {
+    @if $include-border-radius { @include border-radius($button-height/2); }
+    padding: .1em $button-height/2;
+  }
+
+  // Button icon alignment
+  .x-iconalign-left, .x-icon-align-right {
+    @include box-orient(horizontal);
+  }
+  .x-iconalign-top, .x-iconalign-bottom {
+    @include box-orient(vertical);
+  }
+  .x-iconalign-bottom, .x-iconalign-right {
+    @include box-direction(reverse);
+  }
+  .x-iconalign-center {
+    @include box-pack(center);
+  }
+  .x-iconalign-left .x-button-label {
+    margin-left: $toolbar-spacing * 1.5;
+  }
+  .x-iconalign-right .x-button-label {
+    margin-right: $toolbar-spacing * 1.5;
+  }
+  .x-iconalign-top .x-button-label {
+    margin-top: $toolbar-spacing * 1.5;
+  }
+  .x-iconalign-bottom .x-button-label {
+    margin-bottom: $toolbar-spacing * 1.5;
+  }
+
+  // Button labels
+  .x-button-label {
+    @include box-flex(1);
+    @include box-align(center);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: center;
+    font-weight: bold;
+    line-height: 1.2em;
+    display: block;
+    overflow: hidden;
+  }
+
+  // Toolbar button styling
+  .x-toolbar .x-button {
+    margin: 0 .2em;
+    padding: .3em .6em;
+
+    .x-button-label {
+      font-size: .7em;
+    }
+  }
+
+  .x-button-small, .x-toolbar .x-button-small {
+    @if $include-border-radius { @include border-radius(.3em); }
+    padding: .2em .4em;
+    min-height: 0;
+
+    .x-button-label {
+      font-size: .6em;
+    }
+
+    .x-button-icon {
+      width: .75em;
+      height: .75em;
+    }
+  }
+
+  // Back/Forward buttons
+  $shadow-width: .065em; // Space between tip and its shadow
+  $overlap-width: .2em; // how far the mask is clipped
+
+  // $mask-height: $button-height + $button-stroke-weight * 2; // Ugh, this is non-specific... borders?
+  $mask-height: $button-height;
+  $mask-width: $mask-height/2.33;
+
+  $mask-offset: $button-radius - $overlap-width - $button-stroke-weight + $shadow-width - .02em;
+
+  $tip-width: $mask-width - $mask-offset + $shadow-width;
+
+  .x-button-forward, .x-button-back {
+    position: relative;
+    overflow: visible;
+    height: $button-height;
+    z-index: 1;
+    &:before, &:after {
+      @include insertion($mask-width, $mask-height, -$button-stroke-weight, auto);
+      z-index: 2;
+      -webkit-mask: $mask-offset 0 theme_image($theme-name, "tip.png") no-repeat;
+      -webkit-mask-size: $mask-width $mask-height;
+      overflow: hidden;
+    }
+  }
+
+  .x-button-back,
+  .x-toolbar .x-button-back {
+    margin-left: $tip-width - $shadow-width + $toolbar-spacing;
+    padding-left: .4em;
+    &:before {
+      left: - $tip-width;
+    }
+    &:after {
+      left: - $tip-width + $shadow-width;
+    }
+  }
+
+  .x-button-forward,
+  .x-toolbar .x-button-forward {
+    margin-right: $tip-width - $shadow-width + $toolbar-spacing;
+    padding-right: .4em;
+    &:before, &:after {
+      -webkit-mask: -$mask-offset 0 theme_image($theme-name, "tip_right.png") no-repeat;
+    }
+    &:before {
+      right: - $tip-width;
+    }
+    &:after {
+      right: - $tip-width + $shadow-width;
+    }
+  }
+
+  // Plain buttons automatically use a margin trick to have a
+  // wide gradial glow for pressed state.
+  .x-button.x-button-plain,
+  .x-toolbar .x-button.x-button-plain {
+    background: none;
+    border: 0 none;
+    @if $include-border-radius { @include border-radius(none); }
+    min-height: 0;
+    text-shadow: none;
+    line-height: auto;
+    height: auto;
+    padding: 0.5em;
+
+    & > * {
+      overflow: visible;
+    }
+
+    .x-button-icon {
+      -webkit-mask-size: $toolbar-icon-size;
+      width: $toolbar-icon-size;
+      height: $toolbar-icon-size;
+    }
+
+    &.x-button-pressing, &.x-button-pressed {
+      background: none;
+
+      $mask-radial-glow: lighten($active-color, 50%);
+      @include background-image(radial-gradient(fade-out($mask-radial-glow, .3), fade-out($mask-radial-glow, 1) 24px));
+      .x-button-icon.x-button-mask {
+        @include background-gradient(#fff, 'recessed');
+      }
+    }
+  }
+
+  // SegmentedButtons
+  .x-segmentedbutton .x-button {
+    margin: 0;
+
+    @if $include-border-radius {
+      @include border-radius(0);
+
+      &.x-first {
+        @include border-left-radius($button-radius);
+      }
+      &.x-last {
+        @include border-right-radius($button-radius);
+      }
+    }
+
+    &:not(:first-child) {
+      border-left: 0;
+    }
+  }
+
+  // Badges
+  $badge-size: 2em !default;
+  $badge-radius: .2em !default;
+  $badge-bg-color: darken($alert-color, 10%) !default;
+  $badge-bg-gradient: $base-gradient !default;
+
+  .x-hasbadge {
+    overflow: visible;
+    .x-badge {
+      @extend .x-button-label;
+      @include background-clip(padding-box);
+      @if $include-border-radius { @include border-radius($badge-radius); }
+      padding: .1em .3em;
+      z-index: 2;
+      @if $include-button-highlights {
+        @include bevel-by-background($badge-bg-color);
+        @include box-shadow(rgba(#000, .5) 0 .1em .1em);
+      }
+      overflow: hidden;
+      @include color-by-background($badge-bg-color, $contrast: 50%);
+      border: 1px solid darken($badge-bg-color, 10%);
+      position: absolute;
+      width: auto;
+      min-width: $badge-size;
+      line-height: 1.2em;
+      font-size: .6em;
+      right: 0px;
+      top: -.2em;
+      max-width: 95%;
+      @include background-gradient($badge-bg-color, $badge-bg-gradient);
+      display: inline-block;
+    }
+  }
+
+  @if $include-default-icons {
+    @include pictos-iconmask('action');
+    @include pictos-iconmask('add');
+    @include pictos-iconmask('arrow_down');
+    @include pictos-iconmask('arrow_left');
+    @include pictos-iconmask('arrow_right');
+    @include pictos-iconmask('arrow_up');
+    @include pictos-iconmask('compose');
+    @include pictos-iconmask('delete');
+    @include pictos-iconmask('organize');
+    @include pictos-iconmask('refresh');
+    @include pictos-iconmask('reply');
+    @include pictos-iconmask('search');
+    @include pictos-iconmask('settings');
+    @include pictos-iconmask('star');
+    @include pictos-iconmask('trash');
+    @include pictos-iconmask('maps');
+    @include pictos-iconmask('locate');
+    @include pictos-iconmask('home');
+  }
+
+  @if $include-button-uis {
+    @include sencha-button-ui('action', $active-color);
+    @include sencha-button-ui('confirm', desaturate(darken($confirm-color, 10%), 5%));
+    @include sencha-button-ui('decline', desaturate(darken($alert-color, 10%), 5%));
+  }
+}
+
+
+/**
+ * Creates a theme UI for buttons.
+ * Also automatically generates UIs for {ui-label}-round and {ui-label}-small.
+ *
+ *     // SCSS
+ *     @include sencha-button-ui('secondary', #99A4AE, 'glossy');
+ *
+ *     // JS
+ *     var cancelBtn = new Ext.Button({text: 'Cancel', ui: 'secondary'});
+ *
+ * @param {string} $ui-label The name of the UI being created.
+ *   Can not included spaces or special punctuation (used in class names)
+ * @param {color} $color Base color for the UI.
+ * @param {string} $gradient Default gradient for the UI.
+ */
+@mixin sencha-button-ui($ui-label, $color, $gradient: $button-gradient) {
+  .x-button.x-button-#{$ui-label}, .x-button.x-button-#{$ui-label}-round, .x-button.x-button-#{$ui-label}-small {
+    @include toolbar-button($color, $gradient);
+  }
+
+  .x-button.x-button-#{$ui-label}-round {
+    @extend .x-button-round;
+  }
+
+  .x-button.x-button-#{$ui-label}-small {
+    @extend .x-button-small;
+  }
+}

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

@@ -0,0 +1,113 @@
+@import '../global';
+
+/**
+ * @class Ext.carousel.Indicator
+ */
+
+/**
+ * @var {measurement} $carousel-indicator-size Size (width/height) of carousel indicator dots.
+ */
+$carousel-indicator-size: .5em !default;
+
+/**
+ * @var {measurement} $carousel-indicator-spacing
+ * Amount of space between carousel indicator dots.
+ */
+$carousel-indicator-spacing: .2em !default;
+
+/**
+ * @var {measurement} $carousel-track-size Size of the track the carousel indicator dots are in.
+ */
+$carousel-track-size: 1.5em !default;
+
+/**
+ * Creates a theme UI for carousel indicator components.
+ *
+ * @param {string} $ui-label The name of the UI being created.
+ *   Can not included spaces or special punctuation (used in class names)
+ * @param {color} $color Base color for the UI.
+ * @param {string} $gradient Default gradient for the UI.
+ * @param {color} $active-color Active color for the UI.
+ * @param {string} $active-gradient Active gradient for the UI.
+ */
+@mixin sencha-carousel-indicator-ui($ui-label, $color, $gradient, $active-color, $active-gradient) {
+  .x-carousel-indicator-#{$ui-label} span {
+    @include background-gradient($color, $gradient);
+
+    &.x-carousel-indicator-active {
+      @include background-gradient($active-color, $active-gradient)
+    }
+  }
+}
+
+/**
+ * @class Ext.carousel.Carousel
+ */
+
+/**
+ * Includes basic carousel formatting.
+ */
+@mixin sencha-carousel {
+  .x-carousel {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .x-carousel-item {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    > * {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+  }
+
+  .x-carousel-indicator {
+    // @TODO: we should not have to cancel out the x-floating styling
+    padding: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-shadow: none;
+    background-color: transparent;
+    background-image: none;
+  }
+
+  .x-carousel-indicator {
+    -webkit-box-flex: 1;
+
+    @include display-box;
+    @include box-pack(center);
+    @include box-align(center);
+
+    span {
+      display: block;
+      width: $carousel-indicator-size;
+      height: $carousel-indicator-size;
+      @if $include-border-radius { @include border-radius($carousel-indicator-size / 2); }
+      margin: $carousel-indicator-spacing;
+    }
+  }
+
+  .x-carousel-indicator-horizontal {
+    height: $carousel-track-size;
+    width: 100%;
+  }
+
+  .x-carousel-indicator-vertical {
+    @include box-orient(vertical);
+    width: $carousel-track-size;
+    height: 100%;
+  }
+
+  $indicator-light: rgba(#fff, .1);
+  $indicator-light-active: rgba(#fff, .3);
+  $indicator-dark: rgba(#000, .1);
+  $indicator-dark-active: rgba(#000, .3);
+
+  @include sencha-carousel-indicator-ui('light', $indicator-light, 'flat', $indicator-light-active, 'flat');
+  @include sencha-carousel-indicator-ui('dark', $indicator-dark, 'flat', $indicator-dark-active, 'flat');
+}
+

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

@@ -0,0 +1,102 @@
+@import '../global';
+
+/*
+ * Includes basic form slider styles.
+ */
+@mixin sencha-form-sliders {
+
+  .x-slider {
+    position: relative;
+    height: $form-thumb-size;
+    margin: $form-spacing;
+    min-height: 0;
+  }
+
+  .x-thumb {
+    position: absolute;
+    height: $form-thumb-size;
+    width: $form-thumb-size;
+    border: 1px solid red;
+
+    &.x-dragging {
+      background-color: red;
+    }
+  }
+
+  .x-input-slider {
+    width: auto;
+    background-color: #000;
+  }
+
+  .x-field-toggle, .x-field-slider {
+    background-color: #fff;
+//    @extend .x-input-el;
+  }
+
+  .x-field-toggle .x-slider {
+    width: $form-thumb-size * 2;
+    @if $include-border-radius { @include border-radius($form-thumb-size/2); }
+    overflow: hidden;
+    border: .1em solid darken($form-light, 15%);
+    // -webkit-transform: translate3d(0px, 0px, 0px);
+    @include background-gradient($form-light, 'recessed');
+    z-index: 2;
+
+    // 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-toggle-thumb-off, .x-toggle-thumb-on {
+        display: none;
+      }
+
+      &.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');
+    }
+  }
+
+  .x-android .x-field-toggle .x-slider {
+    //-webkit-transform: translate(0px, 0px);
+  }
+}

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

@@ -0,0 +1,149 @@
+@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
+      &:before {
+        @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 {
+        &:before {
+          @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;
+      -webkit-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');
+  }
+}