erp_app 3.0.0 → 3.0.1

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

@@ -0,0 +1,196 @@
+@import 'compass/css3';
+
+/**
+ * @class Global_CSS
+ */
+
+/**
+ * Add a background gradient to a selector.
+ *
+ *     .my-element {
+ *       @include background-gradient(green, 'recessed')
+ *     }
+ *
+ * @param {color} $bg-color The base color of the gradient.
+ * @param {string} $type The style of the gradient, one of five pre-defined options: matte, bevel, glossy, recessed, or flat.
+ */
+@mixin background-gradient($bg-color, $type: $base-gradient) {
+  background-color: $bg-color;
+  @if $include-highlights {
+    @if $type == bevel {
+      @include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 15%) 2%, lighten($bg-color, 8%) 30%, $bg-color 65%, darken($bg-color, 10%))));
+    } @else if $type == glossy {
+      @include background-image(linear-gradient(color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%))));
+    } @else if $type == recessed {
+      @include background-image(linear-gradient(color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%))));
+    } @else if $type == matte {
+      @include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 7%) 2%, darken($bg-color, 7%))));
+    } @else {
+      background-image: none;
+    }
+  }
+}
+
+/**
+ * Includes a base64-encoded icon for use within tab bars and buttons (With the component parameter iconMask: true).
+ *
+ *     @include pictos-iconmask('attachment');
+ *
+ * @param {string} $name The name of the icon to be included. This is to match the name of the icon file (located at resources/themes/images/default/pictos) without its extention (.png).
+ */
+@mixin pictos-iconmask($name) {
+  .x-tab .x-button-icon.#{$name},
+  .x-button .x-button-icon.x-icon-mask.#{$name} {
+    -webkit-mask-image: theme_image($theme-name, "pictos/" + $name + ".png");
+  }
+}
+
+/**
+ * Includes the default styles for toolbar buttons, mostly used as a helper function.
+ *
+ * @param {color} $bg-color Base color to be used for the button.
+ * @param {color} $type Gradient style for the button, will automatically use "recessed" when pressed.
+ */
+@mixin toolbar-button($bg-color, $type: $button-gradient){
+  &, .x-toolbar & {
+    border: 1px solid darken($bg-color, 20%);
+    border-top-color: darken($bg-color, 15%);
+    @include color-by-background($bg-color);
+
+    &.x-button-back:before, &.x-button-forward:before {
+      background: darken($bg-color, 20%);
+    }
+
+    &, &.x-button-back:after, &.x-button-forward:after {
+      @include background-gradient($bg-color, $type);
+    }
+
+    .x-button-icon.x-icon-mask {
+      @include mask-by-background($bg-color);
+    }
+
+    &.x-button-pressing, &.x-button-pressed, &.x-button-active {
+      &, &:after {
+        @include background-gradient(darken($bg-color, 3%), 'recessed');
+      }
+    }
+  }
+}
+
+/**
+ * Adds a small text shadow (or highlight) to give the impression of beveled text.
+ *
+ * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
+ */
+@mixin bevel-text($type: 'shadow') {
+  @if $include-highlights {
+    @if $type == shadow {
+      text-shadow: rgba(0,0,0,.5) 0 -.08em 0;
+    } @else {
+      text-shadow: rgba(255,255,255,.25) 0 .08em 0;
+    }
+  }
+}
+
+/**
+ * Adds a small box shadow (or highlight) to give the impression of being beveled.
+ *
+ * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
+ */
+@mixin bevel-box($type: 'light') {
+  @if $include-highlights {
+    @if $type == shadow {
+      -webkit-box-shadow: rgba(#000, .5) 0 -.06em 0;
+    } @else {
+      -webkit-box-shadow: rgba(#fff, .35) 0 .06em 0;
+    }
+  }
+}
+
+/**
+ * Adds basic styles to :before or :after pseudo-elements.
+ *
+ *     .my-element:after {
+ *       @include insertion(50px, 50px);
+ *     }
+ *
+ * @param {measurement} $width Height of pseudo-element.
+ * @param {measurement} $height Height of pseudo-element.
+ * @param {measurement} $top Top positioning of pseudo-element.
+ * @param {measurement} $left Left positioning of pseudo-element.
+ *
+ */
+@mixin insertion($width: 30px, $height: 30px, $top: 0, $left: 0) {
+  content: "";
+  position: absolute;
+  width: $width;
+  height: $height;
+  top: $top;
+  left: $left;
+}
+
+/**
+ * Makes an element stretch to its parent's bounds.
+ */
+@mixin stretch {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/**
+ * Colors the text of an element based on lightness of its background.
+ *
+ *     .my-element {
+ *       @include color-by-background(#fff); // Colors text black.
+ *     }
+ *
+ *     .my-element {
+ *       @include color-by-background(#fff, 40%); // Colors text gray.
+ *     }
+ *
+ * @param {color} $bg-color Background color of element.
+ * @param {percent} $contrast Contrast of text color to its background.
+ *
+ */
+@mixin color-by-background($bg-color, $contrast: 100%) {
+  @if (lightness($bg-color) > 50) { color: darken($bg-color, $contrast) }
+  @else { color: lighten($bg-color, $contrast) }
+}
+
+/**
+ * Bevels the text based on its background.
+ *
+ * @param {color} $bg-color Background color of element.
+ * @see bevel-text
+ *
+ */
+@mixin bevel-by-background($bg-color) {
+  @if (lightness($bg-color) > 50) { @include bevel-text(light) }
+  @else { @include bevel-text; }
+}
+
+/**
+ * Creates a background gradient for masked elements, based on the lightness of their background.
+ *
+ * @param {color} $bg-color Background color of element.
+ * @param {percent} $percent Contrast of the new gradient to its background.
+ * @param {percent} $style Gradient style of the gradient.
+ * @see background-gradient
+ *
+ */
+@mixin mask-by-background($bg-color, $contrast: 100%, $style: $base-gradient) {
+  @if (lightness($bg-color) > 50) { @include background-gradient(darken($bg-color, $contrast), $style) }
+  @else { @include background-gradient(lighten($bg-color, $contrast), $style) }
+}
+
+/**
+ * Makes the element text overflow to use ellipsis.
+ */
+@mixin ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,116 @@
+$theme-name: 'default';
+
+/**
+ * @class Global_CSS
+ *
+ * Global CSS variables and mixins of Sencha Touch.
+ */
+
+/**
+ * @var {boolean} $include-html-style
+ * Optionally remove included HTML styles/typography (for components with styleHtmlContent: true).
+ * Styles are scoped to .x-html. Set to false to reduce CSS weight.
+ */
+$include-html-style: true !default;
+
+/**
+ * @var {boolean} $include-default-icons
+ * Optionally remove the default icon set which includes the following toolbar and tab bar icons: action,
+ * add, arrow_down, arrow_left, arrow_right, arrow_up, bookmarks, compose, delete, download, favorites,
+ * home, info, locate, maps, more, organize, refresh, reply, search, settings, star, team, time, trash,
+ * and user. Set to false to reduce CSS weight.
+ */
+$include-default-icons: true !default;
+
+/**
+ * @var {boolean} $include-form-sliders
+ * Decides if default HTML styles are included (for components with styleHtmlContent: true). Class is applied to .x-html.
+ */
+$include-form-sliders: true !default;
+
+/**
+ * @var {boolean} $include-floating-panels
+ * Decides whether or not to include floating panels (useful to disable for iPhone applications which do not typically have floating menus).
+ */
+$include-floating-panels: true !default;
+
+/**
+ * @var {boolean} $include-default-uis
+ * Decides whether or not to include the default UIs for all components.
+ */
+$include-default-uis: true !default;
+
+/**
+ * @var {boolean} $include-highlights=true
+ * Optionally disable all gradients, text-shadows, and box-shadows. Useful for CSS debugging,
+ * non-performant browsers, or minimalist designs.
+ */
+$include-highlights: true !default; // Can disable all theme-generated gradients, text-shadows, and box-shadows.
+
+/**
+ * @var {boolean} $include-border-radius
+ * Optionally disable all border-radius. Useful for CSS debugging, non-performant browsers, or minimalist designs.
+ */
+$include-border-radius: true !default; // Can disable all rounded corners
+
+/**
+ * @var {boolean} $basic-slider
+ * Optionally remove CSS3 effects from the slider component for improved performance.
+ */
+$basic-slider: false !default;
+
+/**
+ * @var {color} $base-color
+ * The primary color variable from which most elements derive their color scheme.
+ */
+$base-color: #1985D0 !default; // Triton Blue
+
+/**
+ * @var {string} $base-gradient
+ * The primary gradient variable from which most elements derive their color scheme.
+ * @see background-gradient
+ */
+$base-gradient: 'matte' !default;
+
+/**
+ * @var {font-family} $font-family
+ * The font-family to be used throughout the theme.
+ * @see background-gradient
+ */
+$font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif !default;
+
+/**
+ * @var {color} $alert-color
+ * Color used for elements like badges, errors, and "decline" UIs (eg. on buttons).
+ */
+$alert-color: red !default;
+
+/**
+ * @var {color} $confirm-color
+ * Color used for elements like success messages, and "confirm" UIs (eg. on buttons).
+ */
+$confirm-color: #92cf00 !default; // Green
+
+/**
+ * @var {color} $active-color
+ * Color used for elements like selected rows, "action" UIs (eg. on buttons) and certain overlays like the picker mask.
+ */
+$active-color: darken(saturate($base-color, 55%), 10%) !default;
+
+/**
+ * @var {color} $neutral-color
+ * Color used for the neautral `ui` for Toolbars and Tabbars.
+ */
+$neutral-color: #e0e0e0;
+
+/**
+ * @var {color} $page-bg-color
+ * Background color for fullscreen components.
+ */
+$page-bg-color: #eee !default;
+
+/**
+ * @var {measurement} $global-row-height
+ * The minimum row height for items like toolbars and list items.
+ */
+$global-row-height: 2.6em !default;

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

@@ -0,0 +1,16 @@
+@import 'widgets/map';
+@import 'widgets/picker';
+@import 'widgets/panel';
+@import 'widgets/toolbar';
+@import 'widgets/buttons';
+@import 'widgets/tabs';
+@import 'widgets/carousel';
+@import 'widgets/indexbar';
+@import 'widgets/list';
+@import 'widgets/form';
+@import 'widgets/sheets';
+@import 'widgets/msgbox';
+@import 'widgets/toolbar-forms';
+@import 'widgets/loading-spinner';
+@import 'widgets/img';
+@import 'widgets/media';

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/default/core/_core.scss

@@ -0,0 +1,189 @@
+@import '../global';
+@import 'compass/css3/box-sizing';
+@import 'blueprint/typography';
+
+$experimental-support-for-mozilla: false;
+$experimental-support-for-opera: false;
+$experimental-support-for-microsoft: false;
+$experimental-support-for-khtml: false;
+
+html, body {
+  font-family: $font-family;
+  font-weight: normal;
+  position: relative;
+  -webkit-text-size-adjust: none;
+}
+
+body.x-desktop {
+  overflow: hidden;
+}
+
+*, *:after, *:before {
+  @include box-sizing(border-box);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+}
+
+.x-ios.x-tablet .x-landscape * {
+  -webkit-text-stroke: 1px transparent;
+}
+
+body {
+  font-size: 104%;
+}
+
+body.x-ios {
+  -webkit-backface-visibility: hidden;
+}
+
+body.x-android.x-phone {
+  font-size: 116%;
+}
+
+body.x-android.x-phone.x-silk {
+  font-size: 130%;
+}
+
+body.x-ios.x-phone {
+  font-size: 114%;
+}
+
+body.x-desktop {
+  font-size: 114%;
+}
+
+input, textarea {
+  -webkit-user-select: text;
+}
+
+.x-hidden-visibility {
+    visibility: hidden !important;
+}
+
+.x-hidden-display {
+    display: none !important;
+}
+
+.x-hidden-offsets {
+  position: absolute !important;
+  left: -10000em;
+  top: -10000em;
+  visibility: hidden;
+}
+
+.x-fullscreen {
+  position: absolute !important;
+//  removing this so floating items dont always stick to the top. i've seen no downside to this. ^robert
+//  top: 0px;
+//  left: 0px;
+}
+
+.x-desktop .x-body-stretcher {
+  margin-bottom: 0px;
+}
+
+.x-mask {
+  $min-width: 8.5em;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  z-index: 10;
+
+  @include display-box;
+  @include box-align(center);
+  @include box-pack(center);
+
+  background: rgba(0,0,0,.3) center center no-repeat;
+
+  &.x-mask-gray {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &.x-mask-transparent {
+    background-color: transparent;
+  }
+
+  .x-mask-inner {
+    background: rgba(0, 0, 0, .25);
+    color: #fff;
+    text-align: center;
+    padding: .4em;
+    font-size: .95em;
+    font-weight: bold;
+    @if $include-border-radius { @include border-radius(.5em); }
+  }
+
+  .x-loading-spinner-outer {
+    @include display-box;
+    @include box-orient(vertical);
+    @include box-align(center);
+    @include box-pack(center);
+    width: 100%;
+    min-width: $min-width;
+    height: $min-width;
+  }
+
+  &.x-indicator-hidden {
+    .x-loading-spinner-outer {
+      display: none;
+    }
+  }
+
+  .x-mask-message {
+    @include bevel-text;
+    -webkit-box-flex: 0 !important;
+    max-width: 13em;
+    min-width: $min-width;
+  }
+}
+
+.x-draggable {
+  z-index: 1;
+}
+
+.x-dragging {
+  opacity: 0.7;
+}
+
+.x-panel-list {
+  background-color: saturate(lighten($base-color, 50%), 15%);
+}
+
+@if $include-html-style {
+  .x-html {
+    -webkit-user-select: auto;
+    -webkit-touch-callout: inherit;
+
+    @include blueprint-typography;
+    line-height: 1.5;
+    color: #333;
+    font-size: .8em;
+    padding: 1.2em;
+
+    ul li {
+      list-style-type: circle;
+    }
+    ol li {
+      list-style-type: decimal;
+    }
+  }
+}
+
+.x-video {
+  background-color: #000;
+}
+
+.x-sortable .x-dragging {
+  opacity: 1;
+  z-index: 5;
+}
+
+.x-layout-card-item {
+  background: $page-bg-color;
+}