erp_app 3.0.0 → 3.0.1

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

@@ -0,0 +1,79 @@
+@import '../global';
+
+$panel-border-radius: .3em;
+
+@mixin sencha-panel($include-floating: $include-floating-panels) {
+  .x-panel,
+  .x-msgbox,
+  .x-panel-body {
+    position: relative;
+  }
+
+  @if $include-floating {
+    .x-panel.x-floating,
+    .x-msgbox.x-floating,
+    .x-form.x-floating {
+      padding: 6px;
+      @if $include-border-radius { @include border-radius($panel-border-radius); }
+      -webkit-box-shadow: rgba(0,0,0,.8) 0 .2em .6em;
+      @include background-gradient(darken($base-color, 40%), 'flat');
+
+      &.x-floating-light {
+        @include background-gradient($base-color, 'flat');
+      }
+
+      > .x-panel-inner,
+      .x-scroll-view,
+      .x-body {
+        background-color: #fff;
+        @if $include-border-radius { @include border_radius($panel-border-radius); }
+      }
+    }
+
+    $anchor-height: .7em;
+    $anchor-width: $anchor-height*2.33;
+    $anchor-offset: 0.1em;
+
+    .x-anchor {
+      width: $anchor-width;
+      height: $anchor-height;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      -webkit-mask: 0 0 theme_image($theme-name, "tip_horizontal.png") no-repeat;
+      -webkit-mask-size: $anchor-width $anchor-height;
+      overflow: hidden;
+      background-color: darken($base-color, 40%);
+      -webkit-transform-origin: 0% 0%;
+
+      &.x-anchor-top {
+        margin-left: -($anchor-width / 2);
+        margin-top: -$anchor-height;
+      }
+
+      &.x-anchor-bottom {
+        -webkit-transform: rotate(180deg);
+        margin-left: $anchor-width / 2;
+        margin-top: $anchor-height - $anchor-offset;
+      }
+
+      &.x-anchor-left {
+          -webkit-transform: rotate(270deg);
+          margin-left: -$anchor-height;
+          margin-top: -$anchor-offset;
+      }
+
+      &.x-anchor-right {
+          -webkit-transform: rotate(90deg);
+          margin-left: $anchor-height;
+          margin-top: 0;
+      }
+    }
+    .x-floating.x-panel-light {
+      &:after {
+        background-color: $base-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,154 @@
+@import '../global';
+
+$picker-row-height: 2.5em !default;
+$picker-active-border: .12em solid $active-color !default;
+$picker-sheet-radius: .4em !default;
+$picker-title-color: darken(desaturate($base-color, 10%), 25%) !default;
+$picker-title-bg-color: lighten(saturate($base-color, 10%), 5%) !default;
+$picker-title-bg-gradient: $base-gradient !default;
+$include-picker-highlights: $include-highlights !default;
+$picker-bar-gradient: $base-gradient !default;
+
+@mixin sencha-picker {
+
+  .x-sheet.x-picker {
+    padding: 0;
+  }
+
+  .x-sheet.x-picker .x-sheet-inner {
+    position: relative;
+    background-color: #fff;
+    @if $include-border-radius { @include border-radius($picker-sheet-radius); }
+    @include background-clip(padding-box);
+    overflow: hidden;
+    margin: $sheet-padding;
+
+    @if $include-picker-highlights {
+      &:before, &:after {
+        z-index: 1;
+        @include insertion(100%, 30%, 0, 0);
+      }
+
+      &:before {
+        top: auto;
+        @if $include-border-radius { @include border-bottom-radius($picker-sheet-radius); }
+        bottom: 0;
+        @include background-image(linear-gradient(color-stops(#fff, #bbb)));
+      }
+      &:after {
+        @if $include-border-radius { @include border-top-radius($picker-sheet-radius); }
+        @include background-image(linear-gradient(color-stops(#bbb, #fff)));
+      }
+    }
+
+    .x-picker-slot {
+      .x-body {
+        border-left: 1px solid #999999;
+        border-right: 1px solid #ACACAC;
+      }
+
+      &.x-first {
+        .x-body {
+          border-left: 0;
+        }
+      }
+
+      &.x-last {
+        .x-body {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+    }
+  }
+
+  .x-picker-slot .x-scroll-view {
+    z-index: 2;
+    position: relative;
+
+    @if $include-highlights {
+      -webkit-box-shadow: rgba(#000,.4) -1px 0 1px;
+    }
+    &:first-child {
+      -webkit-box-shadow: none;
+    }
+  }
+
+  .x-picker-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    @include display-box;
+    @include box-align(stretch);
+    @include box-orient(vertical);
+    @include box-pack(center);
+    pointer-events: none;
+  }
+
+  .x-picker-bar {
+    border-top: $picker-active-border;
+    border-bottom: $picker-active-border;
+    height: $picker-row-height;
+    @include background-gradient(hsla(hue($active-color), 90, 50, .3), $picker-bar-gradient);
+    @if $include-highlights {
+      -webkit-box-shadow: rgba(#000,0.2) 0 .2em .2em;
+    }
+  }
+
+  .x-use-titles {
+    .x-picker-bar {
+      margin-top: 1.5em;
+    }
+  }
+
+  .x-picker-slot-title {
+    height: 1.5em;
+    position:relative;
+    z-index: 2;
+    @include background-gradient($picker-title-bg-color, $picker-title-bg-gradient);
+    border-top: 1px solid $picker-title-bg-color;
+    border-bottom: 1px solid darken($picker-title-bg-color, 20%);
+    -webkit-box-shadow: 0px .1em .3em rgba(0, 0, 0, 0.3);
+    padding: 0.2em 1.02em;
+
+    > div {
+      font-weight: bold;
+      font-size: 0.8em;
+      color: $picker-title-color;
+      @if $include-picker-highlights {
+        @include bevel-text('light');
+      }
+    }
+  }
+
+  .x-picker-slot {
+    .x-dataview-inner {
+      width: 100%;
+    }
+
+    .x-dataview-item {
+      vertical-align: middle;
+      height: $picker-row-height;
+      line-height: $picker-row-height;
+      font-weight: bold;
+      padding: 0 10px;
+    }
+
+    .x-picker-item {
+      @include ellipsis;
+    }
+  }
+
+  .x-picker-right {
+      text-align: right;
+  }
+  .x-picker-center {
+      text-align: center;
+  }
+  .x-picker-left {
+      text-align: left;
+  }
+}

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

@@ -0,0 +1,52 @@
+@import '../global';
+
+/**
+ * @class Ext.Sheet
+ */
+
+/**
+ * @var {color} $sheet-bg-color
+ * Background-color for action sheets and message boxes.
+ */
+$sheet-bg-color: transparentize(darken($base-color, 40%), .1) !default;
+
+/**
+ * @var {color} $sheet-bg-gradient
+ * Background gradient style for action sheets and message boxes.
+ */
+$sheet-bg-gradient: $base-gradient !default;
+
+/**
+ * @var {measurement} $sheet-button-spacing
+ * Vertical spacing between sheet buttons.
+ */
+$sheet-button-spacing: .5em !default;
+
+/**
+ * @var {measurement} $sheet-padding
+ * Overall padding in a sheet.
+ */
+$sheet-padding: .7em !default;
+
+/**
+ * Includes default sheet styles (also required for message box).
+ */
+@mixin sencha-sheet {
+  .x-sheet, .x-sheet-action {
+    padding: $sheet-padding;
+    border-top: 1px solid darken($base-color, 30%);
+    height: auto;
+    @include background-gradient($sheet-bg-color, $sheet-bg-gradient);
+    @include border-radius(0);
+  }
+
+  .x-sheet-inner, .x-sheet-action-inner {
+    > .x-button {
+      margin-bottom: $sheet-button-spacing;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,269 @@
+// Tab icons used with permission from Drew Wilson
+// http://pictos.drewwilson.com/
+// Pictos icons are (c) 2010 Drew Wilson
+
+@import '../global';
+
+/**
+ * @class Ext.tab.Bar
+ */
+
+/**
+ * @var {boolean} $include-tabbar-uis Optionally disable separate tabbar UIs (light and dark).
+ */
+$include-tabbar-uis: $include-default-uis !default;
+
+/**
+ * @var {boolean} $include-top-tabs
+ * Optionally exclude top tab styles by setting to false.
+ */
+$include-top-tabs: true !default;
+
+/**
+ * @var {boolean} $include-bottom-tabs
+ * Optionally exclude bottom tab styles by setting to false.
+ */
+$include-bottom-tabs: true !default;
+
+/**
+ * @var {color} $tabs-light
+ * Base color for "light" UI tabs.
+ */
+$tabs-light: desaturate($base-color, 10%) !default;
+
+/**
+ * @var {color} $tabs-light-active
+ * Active color for "light" UI tabs.
+ */
+$tabs-light-active: lighten(saturate($active-color, 20%), 20%) !default;
+
+/**
+ * @var {color} $tabs-dark
+ * Base color for "dark" UI tabs.
+ */
+$tabs-dark: darken($base-color, 20%) !default;
+
+/**
+ * @var {color} $tabs-dark-active
+ * Active color for "dark" UI tabs.
+ */
+$tabs-dark-active-color: saturate(lighten($active-color, 30%), 70%) !default;
+
+/**
+ * @var {string} $tabs-bar-gradient
+ * Background gradient style for tab bars.
+ */
+$tabs-bar-gradient: $base-gradient !default;
+
+/**
+ * @class Ext.tab.Tab
+ */
+
+/**
+ * @var {string} $tabs-bottom-radius
+ * Border-radius for bottom tabs.
+ */
+$tabs-bottom-radius: .25em !default;
+
+/**
+ * @var {string} $tabs-bottom-icon-size
+ * Icon size for bottom tabs
+ */
+$tabs-bottom-icon-size: 1.65em !default;
+
+/**
+ * @var {string} $tabs-bottom-active-gradient
+ * Background gradient style for active bottom tabs.
+ */
+$tabs-bottom-active-gradient: $base-gradient !default;
+
+/**
+ * @var {boolean} $include-tab-highlights
+ * Optionally disable all gradients, text-shadows, and box-shadows. Useful for CSS debugging,
+ * non-performant browsers, or minimalist designs.
+ */
+$include-tab-highlights: $include-highlights !default;
+
+// Private
+
+$tabs-top-height: $global-row-height - .8em;
+
+/**
+ * Includes default tab styles.
+ *
+ * @member Ext.tab.Bar
+ */
+@mixin sencha-tabs {
+  @if $include-top-tabs {
+    @include sencha-top-tabs;
+  }
+  @if $include-bottom-tabs {
+    @include sencha-bottom-tabs;
+  }
+
+  @if $include-tabbar-uis {
+    @include sencha-tabbar-ui('light', $tabs-light, $tabs-bar-gradient, $tabs-light-active);
+    @include sencha-tabbar-ui('dark', $tabs-dark, $tabs-bar-gradient, $tabs-dark-active-color);
+    @include sencha-tabbar-ui('neutral', $neutral-color, $tabs-bar-gradient, darken($neutral-color, 40));
+  }
+
+  // Rules for all tabs
+  .x-tab.x-item-disabled span.x-button-label, .x-tab.x-item-disabled .x-button-icon {
+    @include opacity(.5);
+  }
+  .x-tab.x-draggable {
+    @include opacity(.7);
+  }
+
+  .x-tab {
+    -webkit-user-select: none;
+    overflow: visible !important;
+  }
+}
+
+
+@mixin sencha-top-tabs {
+  .x-tabbar.x-docked-top {
+    border-bottom-width: .1em;
+    border-bottom-style: solid;
+    height: $global-row-height;
+    padding: 0 .8em;
+
+    .x-tab {
+      padding: (($tabs-top-height - 1em) / 2) .8em;
+      height: $tabs-top-height;
+      @if $include-border-radius { @include border-radius($tabs-top-height / 2); }
+    }
+
+    .x-button-label {
+      font-size: .8em;
+      line-height: 1.2em;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+    }
+  }
+}
+
+
+@mixin sencha-bottom-tabs {
+  .x-tabbar.x-docked-bottom {
+    border-top-width: .1em;
+    border-top-style: solid;
+    height: 3em;
+    padding: 0;
+
+    .x-tab {
+      @if $include-border-radius { @include border-radius($tabs-bottom-radius); }
+      min-width: 3.3em;
+      position: relative;
+      padding-top: .2em;
+
+      .x-button-icon {
+        -webkit-mask-size: $tabs-bottom-icon-size;
+        width: $tabs-bottom-icon-size;
+        height: $tabs-bottom-icon-size;
+        display: block;
+        margin: 0 auto;
+        position: relative;
+      }
+
+      .x-button-label {
+        margin: 0;
+        padding: .1em 0 .2em 0;
+        font-size: 9px;
+        line-height: 12px;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+      }
+    }
+  }
+
+  @if $include-default-icons {
+    @include pictos-iconmask('bookmarks');
+    @include pictos-iconmask('download');
+    @include pictos-iconmask('favorites');
+    @include pictos-iconmask('info');
+    @include pictos-iconmask('more');
+    @include pictos-iconmask('time');
+    @include pictos-iconmask('user');
+    @include pictos-iconmask('team');
+  }
+}
+
+/**
+ * Creates a theme UI for tabbar/tab components.
+ *
+ *     // SCSS
+ *     @include sencha-button-ui('pink', #333, 'matte', #AE537A);
+ *
+ *     // JS
+ *     var tabs = new Ext.tab.Panel({
+ *        tabBar: {
+ *          ui: 'pink',
+ *          dock: 'bottom',
+ *          layout: { pack: 'center' }
+ *        },
+ *        ...
+ *     });
+ *
+ * @param {string} $ui-label The name of the UI being created.
+ *   Can not included spaces or special punctuation (used in class names)
+ * @param {color} $bar-color Base color for the tab bar.
+ * @param {string} $bar-gradient Background gradient style for the tab bar.
+ * @param {color} $tab-active-color Background-color for active tab icons.
+ *
+ * @member Ext.tab.Bar
+ */
+@mixin sencha-tabbar-ui($ui-label, $bar-color, $bar-gradient, $tab-active-color) {
+  .x-tabbar-#{$ui-label} {
+    @include background-gradient($bar-color, $bar-gradient);
+    border-top-color: darken($bar-color, 5%);
+    border-bottom-color: darken($bar-color, 15%);
+
+    .x-tab {
+      @include color-by-background($bar-color, 40%);
+    }
+
+    .x-tab-active {
+      @include color-by-background($bar-color, 90%);
+      border-bottom: 1px solid lighten($bar-color, 3%);
+    }
+
+    .x-tab-pressed {
+      @include color-by-background($bar-color, 100%);
+    }
+  }
+
+  @if $include-bottom-tabs {
+    .x-tabbar-#{$ui-label}.x-docked-bottom {
+      .x-tab {
+        @include bevel-by-background($bar-color);
+        .x-button-icon {
+          @include mask-by-background($bar-color, 20%, $tabs-bar-gradient);
+        }
+      }
+
+      .x-tab-active {
+        @include background-gradient(darken($bar-color, 5%), recessed);
+        @include bevel-by-background(lighten($bar-color, 10%));
+
+        @if ($include-tab-highlights) {
+          @include box-shadow(darken($bar-color, 10%) 0 0 .25em inset);
+        }
+
+        .x-button-icon {
+          @include background-gradient($tab-active-color, $tabs-bottom-active-gradient);
+        }
+      }
+    }
+  }
+
+  @if $include-top-tabs {
+    .x-tabbar-#{$ui-label}.x-docked-top {
+      .x-tab-active {
+        @include background-gradient(darken($bar-color, 5%), 'recessed');
+        @include color-by-background(darken($bar-color, 5%));
+      }
+    }
+  }
+}