compass_ae_sencha 1.0.0 → 1.0.1

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

@@ -1,3 +0,0 @@
-@import 'core/reset';
-@import 'core/core';
-@import 'core/layout';

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

@@ -1,2 +0,0 @@
-@import 'variables';
-@import 'mixins';

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

@@ -1,153 +0,0 @@
-@import 'compass/css3';
-@import 'recipes/background';
-@import 'recipes/color';
-
-$default-gradient: $base-gradient;
-
-/**
- * @class Global_CSS
- */
-
-/**
- * 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('default', "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 {
-      @include box-shadow(rgba(#000, .5) 0 -.06em 0);
-    } @else {
-      @include 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;
-}
-
-/**
- * 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/_widgets.scss

@@ -1,18 +0,0 @@
-@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/draw';
-@import 'widgets/charts';
-@import 'widgets/img';
-@import 'widgets/media';

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

@@ -1,205 +0,0 @@
-@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-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 {
-    position: relative;
-    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-mask-inner {
-      padding-bottom: 0 !important;
-    }
-    .x-loading-spinner-outer {
-      display: none;
-    }
-    .x-mask-message {
-      position: relative;
-      bottom: .25em;
-    }
-  }
-
-  .x-mask-message {
-    position: absolute;
-    bottom: 1.7em;
-    @include bevel-text;
-    -webkit-box-flex: 0 !important;
-    max-width: 13em;
-    min-width: $min-width;
-  }
-
-  &.x-has-message {
-    .x-mask-inner {
-      padding-bottom: 2em;
-    }
-
-    .x-loading-spinner-outer {
-      height: 7.5em;
-    }
-  }
-}
-
-.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;
-}

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

@@ -1,629 +0,0 @@
-@mixin absolute-position($top: 0, $right: 0, $bottom: 0, $left: 0){
-  position: absolute;
-  top: $top;
-  right: $right;
-  bottom: $bottom;
-  left: $left;
-}
-
-@mixin absolute-fit {
-  width: auto;
-  height: auto;
-//overflow: hidden;
-  @include absolute-position;
-}
-
-@mixin box(){
-  display: -webkit-box;
-}
-
-@mixin box-align($align: stretch){
-  -webkit-box-align: $align;
-}
-
-@mixin box-orient($orient: horizontal){
-  -webkit-box-orient: $orient;
-}
-
-@mixin box-orient-important($orient: horizontal){
-  -webkit-box-orient: $orient !important;
-}
-
-@mixin box-pack($pack: start){
-  -webkit-box-pack: $pack;
-}
-
-@mixin box-flex($flex: 1){
-  -webkit-box-flex: $flex;
-}
-
-@mixin sencha-layout {
-  html, body {
-    width: 100%;
-    height: 100%;
-  }
-
-  @-webkit-keyframes x-paint-monitor-helper {
-    from { zoom: 1 }
-    to { zoom: 1 }
-  }
-
-  .x-paint-monitored {
-    position: relative;
-  }
-
-  .x-paint-monitor {
-    width: 0 !important;
-    height: 0 !important;
-    visibility: hidden;
-    &.cssanimation {
-      -webkit-animation-duration: 0.0001ms;
-      -webkit-animation-name: x-paint-monitor-helper;
-    }
-    &.overflowchange {
-      overflow: hidden;
-      &::after {
-        content: "";
-        display: block;
-        width: 1px !important;
-        height: 1px !important;
-      }
-    }
-  }
-
-  .x-size-monitored {
-    position:relative;
-  }
-
-  .x-size-monitors {
-    position:absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    z-index: -9999;
-    overflow: hidden;
-    > * {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-    &.scroll > * {
-      &.shrink::after {
-        content: "";
-        display: block;
-        width: 200%;
-        height: 200%;
-        min-width: 1px;
-        min-height: 1px;
-      }
-      &.expand::after {
-        content: "";
-        display: block;
-        width: 100000px;
-        height: 100000px;
-      }
-    }
-    &.overflowchanged > * {
-      &.shrink {
-        > * {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      &.expand {
-        > * {
-          width: 200%;
-          height: 200%;
-        }
-      }
-    }
-  }
-
-
-  //.x-container, .x-component, .x-body, .x-inner {
-  //  position: relative;
-  //  overflow: hidden;
-  //}
-
-  .x-body {
-    position: relative;
-    z-index: 0;
-  }
-
-  .x-inner, .x-body {
-    width: 100%;
-    height: 100%;
-  }
-
-  .x-dock, .x-dock-body {
-    height: 100%;
-  }
-
-  .x-sized {
-    position: relative;
-  }
-
-  .x-stretched.x-container {
-    @include box;
-    @include box-orient(vertical);
-    > .x-inner, > .x-body, > .x-body > .x-inner {
-      @include box();
-      @include box-flex(1);
-      @include box-orient(vertical);
-    }
-  }
-
-  .x-innerhtml {
-    width: 100%;
-  }
-
-  .x-layout-card {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .x-layout-card-item-container {
-    @include absolute-fit;
-  }
-
-  .x-layout-card-item {
-    @include absolute-position;
-  }
-
-  .x-layout-newcard-item, .x-layout-newcard-item > * {
-    @include absolute-position;
-  }
-
-  .x-layout-newcard-item:not(.active) {
-    display: none;
-  }
-
-  .x-layout-fit.x-stretched > .x-layout-fit-item {
-    @include box();
-    @include box-flex(1);
-  }
-
-  .x-layout-fit {
-    position: relative;
-  }
-
-  .x-layout-fit-item {
-    &.x-sized {
-      @include absolute-position;
-    }
-    &.x-unsized {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .x-center, .x-centered {
-    @include absolute-position;
-    @include box;
-    @include box-align(center);
-    @include box-pack(center);
-    > * {
-      position: relative;
-    }
-    > .x-floating {
-      position: relative !important;
-    }
-  }
-
-  .x-floating {
-    position: absolute;
-  }
-
-  .x-dock {
-    @include box();
-    &.x-sized, &.x-sized > .x-dock-body > *,
-    &.x-sized > .x-dock-body > .x-body > .x-inner {
-      @include absolute-fit();
-    }
-    .x-dock-body {
-      @include box();
-      @include box-flex(1);
-    }
-    &.x-sized > .x-dock-body {
-      position: relative;
-    }
-    &.x-unsized, &.x-stretched {
-      > .x-dock-body {
-        @include box-orient(vertical);
-        > * {
-          @include box-flex(1);
-        }
-      }
-    }
-    &.x-dock-vertical {
-      @include box-orient(vertical);
-    }
-    &.x-dock-horizontal {
-      @include box-orient(horizontal);
-      > .x-dock-item {
-        @include box();
-        &.x-sized {
-          > .x-inner, > .x-body {
-            @include absolute-fit();
-          }
-        }
-        &.x-unsized {
-          @include box-orient(vertical);
-          > * {
-            @include box-flex(1);
-          }
-        }
-      }
-    }
-  }
-  //.x-dock {
-  //  display: table;
-  //  width: 100%;
-  //  height: 100%;
-  //  &.x-dock-vertical {
-  //    > * {
-  //      display: table-row;
-  //    }
-  //    > .x-dock-item {
-  //      height: 1px;
-  //    }
-  //    &.x-sized > .x-dock-body {
-  //      > .x-body, > .x-inner, > .x-body > .x-inner {
-  //        width: 100%;
-  //        height: 100%;
-  //      }
-  //    }
-  //  }
-  //  &.x-dock-horizontal {
-  //    > * {
-  //      display: table-cell;
-  //      vertical-align: top;
-  //      height: 100%;
-  //      position: relative;
-  //    }
-  //    > .x-dock-item {
-  //      width: 1px;
-  //    }
-  //    > .x-dock-item > *, > .x-dock-body > * {
-  //      height: 100%;
-  //    }
-  //    &.x-sized > .x-dock-body {
-  //      > .x-body, > .x-inner, > .x-body > .x-inner {
-  //        width: 100%;
-  //        height: 100%;
-  //      }
-  //    }
-  //  }
-  //}
-
-  .x-layout-box {
-    @include box;
-    &.x-horizontal {
-      @include box-orient-important(horizontal);
-      > .x-layout-box-item.x-flexed {
-        width: 0 !important;
-      }
-    }
-    &.x-vertical {
-      @include box-orient(vertical);
-      > .x-layout-box-item.x-flexed {
-        height: 0 !important;
-      }
-    }
-    > .x-layout-box-item {
-      display: -webkit-box !important;
-    }
-    &.x-align-start {
-      @include box-align(start);
-    }
-    &.x-align-center {
-      @include box-align(center);
-    }
-    &.x-align-end {
-      @include box-align(end);
-    }
-    &.x-align-stretch {
-      @include box-align(stretch);
-    }
-    &.x-pack-start {
-      @include box-pack(start);
-    }
-    &.x-pack-center {
-      @include box-pack(center);
-    }
-    &.x-pack-end {
-      @include box-pack(end);
-    }
-    &.x-pack-justify {
-      @include box-pack(justify);
-    }
-  }
-
-  .x-layout-box-item.x-sized {
-    > .x-inner, > .x-body, > .x-dock-outer {
-      @include absolute-fit;
-    }
-  }
-
-  .x-layout-float {
-    overflow: hidden;
-    > .x-layout-float-item {
-      float: left;
-    }
-    &.x-direction-right {
-      > .x-layout-float-item {
-        float: right;
-      }
-    }
-  }
-
-  .x-table-inner {
-    display: table !important;
-    width: 100% !important;
-    height: 100% !important;
-
-    &.x-fixed-layout {
-      table-layout: fixed !important;
-    }
-  }
-
-  .x-table-row {
-    display: table-row !important;
-  }
-
-  .x-table-cell {
-    display: table-cell !important;
-    vertical-align: middle;
-  }
-
-  .x-translatable {
-      position: absolute;
-      top: 100% !important;
-      left: 100% !important;
-      overflow: visible !important;
-      z-index: 1;
-      &::before {
-          content: "";
-          display: block;
-          position: absolute;
-          top: 100%;
-          left: 100%;
-          width: 100%;
-          height: 100%;
-          visibility: hidden;
-      }
-  }
-
-  .x-translatable-container {
-      overflow: hidden;
-      @include absolute-fit();
-      &::before {
-          content: "";
-          display: block;
-          width: 300%;
-          height: 300%;
-          visibility: hidden;
-      }
-  }
-
-  .x-size-change-detector {
-    visibility: hidden;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  .x-size-change-detector > * {
-    visibility: hidden;
-  }
-
-  .x-size-change-detector-shrink > * {
-    width: 200%;
-    height: 200%;
-  }
-
-  .x-size-change-detector-expand > * {
-    width: 100000px;
-    height: 100000px;
-  }
-
-  .x-scroll-view {
-    position: relative;
-    display: block;
-    overflow: hidden;
-  }
-
-  .x-scroll-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-
-  .x-scroll-scroller {
-    position: absolute;
-    min-width: 100%;
-    min-height: 100%;
-    width: auto !important;
-    height: auto !important;
-  }
-
-  .x-ios .x-scroll-scroller {
-    -webkit-transform: translate3d(0, 0, 0);
-  }
-
-  .x-scroll-stretcher {
-    position: absolute;
-    visibility: hidden;
-  }
-
-  .x-scroll-bar-grid-wrapper {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-
-  .x-scroll-bar-grid {
-    display: table;
-    width: 100%;
-    height: 100%;
-
-    > * {
-      display: table-row;
-    }
-
-    > * > * {
-      display: table-cell;
-    }
-
-    > :first-child > :first-child {
-      width: 100%;
-      height: 100%;
-    }
-
-    > :first-child > :nth-child(2) {
-      padding: 3px 3px 0 0;
-    }
-
-    > :nth-child(2) > :first-child {
-      padding: 0 0 3px 3px;
-    }
-  }
-
-  .x-scroll-bar {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .x-scroll-bar-stretcher {
-    position: absolute;
-    visibility: hidden;
-    width: 100%;
-    height: 100%;
-  }
-
-  .x-scroll-bar-x {
-    width: 100%;
-
-    > .x-scroll-bar-stretcher {
-      width: 300%;
-    }
-
-    &.active {
-      height: 6px;
-    }
-  }
-
-  .x-scroll-bar-y {
-    height: 100%;
-
-    > .x-scroll-bar-stretcher {
-      height: 300%;
-    }
-
-    &.active {
-      width: 6px;
-    }
-  }
-
-  .x-scroll-indicator {
-    background: #333;
-    position: absolute;
-    z-index: 3;
-    opacity: 0.5;
-  }
-
-  .x-android-4 .x-scroll-indicator {
-    opacity: 1;
-  }
-
-  .x-scroll-indicator.default {
-    @include border-top-radius(3px);
-    @include border-bottom-radius(3px);
-  }
-
-  .x-list-light,
-  .x-dataview-light {
-    .x-scroll-indicator {
-      background: #fff;
-      opacity: 1;
-    }
-  }
-
-  .x-scroll-indicator-x {
-    height: 100%;
-  }
-
-  .x-scroll-indicator-y {
-    width: 100%;
-  }
-
-  .x-scroll-indicator.csstransform {
-    background: none;
-
-    > * {
-      position: absolute;
-      background-color: #333;
-    }
-
-    > :nth-child(2) {
-      -webkit-transform-origin: 0% 0%;
-      background: none;
-      content: url(data:image/bmp;base64,Qk08AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABAAAAAAAAYAAAASCwAAEgsAAAAAAAAAAAAAxhgAAAAA);
-    }
-
-    &.x-scroll-indicator-light {
-      > * {
-        background-color: #eee;
-      }
-
-      > :nth-child(2) {
-        content: url(data:image/bmp;base64,Qk08AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABAAAAAAAAYAAAASCwAAEgsAAAAAAAAAAAAAvXcAAAAA);
-      }
-    }
-
-    &.x-scroll-indicator-y {
-      > * {
-        width: 100%;
-      }
-
-      > :first-child {
-        height: 3px;
-        @include border-top-radius(3px);
-      }
-
-      > :nth-child(2) {
-        height: 1px;
-      }
-
-      > :last-child {
-        height: 3px;
-        @include border-bottom-radius(3px);
-      }
-    }
-
-    &.x-scroll-indicator-x {
-      > * {
-        height: 100%;
-      }
-
-      > :first-child {
-        width: 3px;
-        @include border-left-radius(3px);
-      }
-
-      > :nth-child(2) {
-        width: 1px;
-      }
-      > :last-child {
-        width: 3px;
-        @include border-right-radius(3px);
-      }
-    }
-  }
-}