compass_ae_sencha 1.0.0 → 1.0.1

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/base/src/slider/_Slider.scss

@@ -0,0 +1,44 @@
+/**
+ * @class Ext.slider.Slider
+ */
+
+.x-slider,
+.x-toggle {
+    position: relative;
+    height: 16px;
+    min-height: 0;
+    min-width: 0;
+
+    > * {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.x-thumb {
+    position: absolute;
+    height: 16px;
+    width: 10px;
+    border: 1px solid #ccc;
+    background-color: #ddd;
+}
+
+// Create the slider track
+.x-slider:before {
+    @include insertion(auto, 8px, 4px, 0);
+    right: 0;
+    margin: 0 5px;
+    background-color: #eee;
+}
+
+.x-toggle {
+    border: 1px solid #ccc;
+    width: 30px;
+    overflow: hidden;
+    @include st-box-flex(0);
+}
+
+.x-toggle-on {
+    background-color: #eee;
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/base/src/tab/_Panel.scss

@@ -0,0 +1,55 @@
+/**
+ * @class Ext.tab.Panel
+ */
+
+.x-tab {
+    z-index: 1;
+    overflow: visible !important;
+    background-color: #eee;
+    border: 1px solid #ccc;
+}
+
+.x-tabbar {
+    border-color: #ccc;
+    border-style: solid;
+    border-width: 0;
+    background-color: #eee;
+}
+
+.x-tabbar.x-docked-top {
+    border-bottom-width: 1px;
+
+    .x-tab .x-button-icon {
+        position: relative;
+
+        &.x-shown {
+            display: inline-block;
+        }
+
+        &.x-hidden {
+            display: none;
+        }
+    }
+}
+
+.x-tabbar.x-docked-bottom {
+    border-top-width: 1px;
+
+    .x-tab .x-button-icon {
+        display: block;
+        position: relative;
+
+        &.x-shown {
+            visibility: visible;
+        }
+
+        &.x-hidden {
+            visibility: hidden;
+        }
+    }
+}
+
+.x-tab {
+    position: relative;
+    min-width : 3.3em;
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/base/src/table/_Table.scss

@@ -0,0 +1,23 @@
+/**
+ * @class Ext.table.Table
+ * @ignore
+ */
+
+.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;
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/base/src/util/_PaintMonitor.scss

@@ -0,0 +1,49 @@
+/**
+ * @class Ext.util.PaintMonitor
+ */
+
+@-webkit-keyframes x-paint-monitor-helper {
+    from {
+        zoom: 1
+    }
+    to {
+        zoom: 1
+    }
+}
+
+@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;
+        animation-duration: 0.0001ms;
+        animation-name: x-paint-monitor-helper;
+    }
+
+    &.overflowchange {
+        overflow: hidden;
+
+        &::after {
+            content: '';
+            display: block;
+            width: 1px !important;
+            height: 1px !important;
+        }
+    }
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/base/src/util/_SizeMonitor.scss

@@ -0,0 +1,82 @@
+/**
+ * @class Ext.util.SizeMonitor
+ */
+
+.x-size-monitored {
+    position: relative;
+}
+
+.x-size-monitors {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+    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-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;
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/base/src/util/_Translatable.scss

@@ -0,0 +1,35 @@
+/**
+ * @class Ext.util.Translatable
+ */
+
+.x-translatable {
+    position: absolute !important;
+    top:  500000px !important;
+    left: 500000px !important;
+    overflow: visible !important;
+    z-index: 1;
+}
+
+.x-translatable-hboxfix {
+  position: absolute;
+  min-width: 100%;
+  top: 0;
+  left: 0;
+
+  > .x-translatable {
+      position: relative !important;
+  }
+}
+
+.x-translatable-container {
+    overflow: hidden;
+    @include absolute-fit();
+
+    &::before {
+        content: '';
+        display: block;
+        width:  1000000px;
+        height: 1000000px;
+        visibility: hidden;
+    }
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/bb10/_all.scss

@@ -0,0 +1 @@
+@import "src/all";

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/bb10/mixins/_Class.scss

@@ -0,0 +1,139 @@
+//$default-gradient: null;
+
+///**
+// * @class Global_CSS
+// */
+
+
+@mixin bb-gradient($color, $offset: 2) {
+	background: $color;
+	@include background-image(linear-gradient(top, color-stops(lighten($color, $offset), darken($color, $offset))));
+}
+
+/////**
+//// * 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} {
+////        @include icon($name);
+////    }
+////}
+
+////@mixin icon($name, $background-color: transparent, $size: 1.1em,$position: 50% 50%) {
+////  webkit-mask-image: theme_image('windows-phone/dark', "pictos/" + $name + ".png");
+////  background-image: theme_image('windows-phone/dark', "pictos/" + $name + ".png");
+////  background-color: $background-color;
+////  background-position: $position;
+////  background-repeat: no-repeat;
+////  background-size: $size;
+////}
+
+///**
+// * 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.
+// */
+//@mixin toolbar-button($bg-color) {
+//  &,
+//  .x-toolbar & {
+//    border: 2px solid $foreground-color;
+//    background-color: $bg-color;
+
+//    &.x-button-back:before,
+//    &.x-button-forward:before {
+//      background-color: $bg-color;
+//    }
+
+//    &,
+//    &.x-button-back:after,
+//    &.x-button-forward:after {
+//      background-color: $bg-color;
+//    }
+
+//    &.x-button-pressing,
+//    &.x-button-pressed,
+//    &.x-button-active {
+//      &,
+//      &:after {
+//        color: $bg-color;
+//        background-color: $foreground-color;
+//      }
+//    }
+//  }
+//}
+
+///**
+// * 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) }
+//}
+
+
+//@mixin readable-color($color, $contrast: 100) {
+//  @if lightness(lighten($color, 100 - $contrast)) > 30 {
+//      color: $color;
+//      fill: $color;
+//  } @else {
+//      color: darken(lighten($color, 100 - $contrast), 30);
+//      fill: darken(lighten($color, 100 - $contrast), 30);
+//  }
+//}
+
+///**
+//* TextBlock styles
+//*/
+//@mixin phone-text-normal(){
+//  font-family: $phone-font-family-normal;
+//  font-size: $font-size-normal;
+//  color: $foreground-color;
+//}
+
+//@mixin phone-text-title1(){
+//  font-family: $phone-font-family-semilight;
+//  font-size: $font-size-extra-large;
+//  color: $foreground-color;
+//}
+
+//@mixin phone-text-subtle(){
+//  font-family: $phone-font-family-normal;
+//  font-size: $font-size-normal;
+//  color: $phone-subtle-color;
+//}
+
+//@mixin phone-text-title2(){
+//  font-family: $phone-font-family-semilight;
+//  font-size: $phone-font-size-large;
+//  color: $foreground-color;
+//}
+
+//@mixin phone-text-title3(){
+//  font-family: $phone-font-family-semilight;
+//  font-size: $font-size-medium;
+//  color: $foreground-color;
+//}
+
+//@mixin phone-text-accent(){
+//  font-family: $phone-font-family-semibold;
+//  font-size: $font-size-normal;
+//  color: $base-color;
+//}
+
+//@mixin fieldset-instructions() {
+//  color: #666666;
+//  font-size: .8em;
+//  text-align: left;
+//  margin: 0.7em 0 0.3em 0;
+//}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/bb10/src/_Button.scss

@@ -0,0 +1,321 @@
+//// Toolbar icons used with permission from Drew Wilson
+//// http://pictos.drewwilson.com/
+//// Pictos icons are (c) 2010 Drew Wilson
+
+/**
+ * @class Ext.Button
+ */
+
+$button-border-radius: 5px;
+
+.x-button {
+    height: 40px;
+    padding: 0 3px;
+    border-color: #CECACE;
+    @include border-radius($button-border-radius);
+    @include background(linear-gradient(color-stops(#C6C3C6, #E7E7E7)));
+    position: relative;
+
+    &:before {
+        content: '';
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        bottom: 1px;
+        left: 1px;
+        border: 1px solid #B9B7B9;
+        @include border-radius(4px);
+        @include background(linear-gradient(color-stops(#FFFFFF, #DEDFDE)));
+    }
+
+    .x-button-label {
+        color: #252525;
+    }
+}
+
+.x-button-pressing {
+    border-color: #5E5E5E;
+    @include background(linear-gradient(color-stops(#404040, #858585)));
+
+    &:before {
+        border-color: #565656;
+        @include background(linear-gradient(color-stops(#2E85A1, #0C8AB2)));
+    }
+
+    .x-button-label {
+        color: #FAFAFA;
+    }
+}
+
+.x-button-round,
+.x-button-decline-round,
+.x-button-confirm-round {
+    @include border-radius(20px);
+
+    &:before {
+        @include border-radius(19px);
+    }
+}
+
+.x-button-label {
+    position: relative;
+    font-size: 14px;
+    padding: 0 5px;
+}
+
+.x-badge {
+    right: 5px;
+}
+
+// Toolbar buttons
+
+.x-toolbar {
+    .x-button {
+        margin: 0 5px;
+        padding: 0 10px;
+        height: 33px;
+    }
+}
+
+.x-toolbar-light {
+    .x-button {
+        border-color: #0A5A88;
+        @include background(linear-gradient(color-stops(#05608F, #04557F)));
+        @include box-shadow(0 0 0 1px #1C79AD);
+
+        &:before {
+            border-color: #10618A;
+            @include background(linear-gradient(color-stops(#3498CB, #0974A8)));
+            @include box-shadow(inset 0 1px 0 0 #55AAD5);
+        }
+    }
+
+    .x-button-label {
+        color: #fff;
+    }
+
+    .x-button-pressed,
+    .x-button-pressing {
+        border-color: #061C27;
+        @include background(linear-gradient(color-stops(#020C10, #0A2B3B)));
+        @include box-shadow(0 0 0 1px #3889B7);
+
+        &:before {
+            border-color: #0A2532;
+            @include background(linear-gradient(color-stops(#122D3A, #0D4662)));
+            @include box-shadow(inset 0 -1px 0 0 #1B4E64);
+        }
+    }
+}
+
+.x-toolbar-dark,
+.x-toolbar-neutral {
+    .x-button,
+    .x-button-pressing {
+        border-color: #060606;
+        @include background(linear-gradient(color-stops(#010101, #060606)));
+        @include box-shadow(0 0 0 1px #393939);
+
+        &:before {
+            border-color: #010101;
+            @include background(linear-gradient(color-stops(#404040, #262626)));
+            @include box-shadow(inset 0 1px 0 0 #404040);
+        }
+    }
+
+    .x-button-label {
+        color: #fff;
+    }
+
+    .x-button-pressed,
+    .x-button-pressing {
+        &:before {
+            @include background(linear-gradient(color-stops(#235F71, #0D6681)));
+            @include box-shadow(inset 0 -1px 0 0 #176982);
+        }
+    }
+}
+
+// Back button
+
+.x-toolbar .x-button-back,
+.x-toolbar .x-button-forward {
+    height: 45px !important;
+    margin: 0 !important;
+    border: 0;
+    @include border-radius(0);
+    @include box-shadow(none);
+    background: transparent;
+    background-image: none;
+    @include st-box-orient(vertical);
+    overflow: hidden;
+
+    .x-button-icon {
+        margin: 0 auto;
+        display: block;
+
+        &:before {
+            font-family: "Chalkboard";
+            font-size: 28px;
+            content: '<';
+            padding-left: 5px;
+        }
+    }
+
+    .x-button-label {
+        margin: 1px 0 3px;
+        font-size: 9px;
+        line-height: 12px;
+    }
+
+    &:before {
+        background: transparent;
+        background-image: none;
+    }
+
+    &.x-button-pressed,
+    &.x-button-pressing {
+        background: transparent;
+        background-image: none;
+
+        &:before {
+            background: transparent;
+            background-image: none;
+        }
+    }
+}
+
+.x-toolbar .x-button-back {
+    padding-right: 15px;
+    &:before {
+        @include rotate(6deg);
+        right: 5px;
+        top: -5px;
+        bottom: -5px;
+        border-color: $base-color;
+        border-width: 0 1px 0 0;
+        @include border-radius(0);
+    }
+}
+
+.x-toolbar .x-button-forward {
+    padding-left: 15px;
+    &:before {
+        @include rotate(-6deg);
+        left: 5px;
+        top: -5px;
+        bottom: -5px;
+        border-color: $base-color;
+        border-width: 0 0 0 1px;
+        @include border-radius(0);
+    }
+}
+
+// Badges
+
+.x-hasbadge {
+    overflow: visible;
+}
+
+.x-badge {
+    background-color: #0378B2;
+    border: 1px solid #0796D0;
+    @include border-radius(3px);
+    color: #fff;
+    padding: 1px 3px;
+    right: -2px;
+    top: -2px;
+}
+
+// Icons
+
+.x-button-icon {
+    width: 1.5em;
+    height: 1.5em;
+
+    &:before {
+        color: #fff;
+        font-size: 20px;
+        line-height: 1.2em;
+    }
+}
+
+@if $include-default-icons {
+    @include icon('calendar');
+    @include icon('action');
+    @include icon('add');
+    @include icon('arrow_down');
+    @include icon('arrow_left');
+    @include icon('arrow_right');
+    @include icon('arrow_up');
+    @include icon('compose');
+    @include icon('delete');
+    @include icon('organize');
+    @include icon('refresh');
+    @include icon('reply');
+    @include icon('search');
+    @include icon('settings');
+    @include icon('star');
+    @include icon('trash');
+    @include icon('maps');
+    @include icon('locate');
+    @include icon('home');
+    @include icon('bookmarks');
+    @include icon('download');
+    @include icon('favorites');
+    @include icon('info');
+    @include icon('more');
+    @include icon('time');
+    @include icon('user');
+    @include icon('team');
+    @include icon('list');
+}
+
+// Segmented Button
+
+.x-segmentedbutton {
+    padding: 0 2px;
+    height: 33px;
+    border: 1px solid;
+    @include border-radius($button-border-radius);
+
+    .x-button {
+        border: 0;
+        height: 27px;
+        margin: 2px 1px 0 0;
+        @include box-shadow(none);
+        @include border-radius(0);
+
+        &:last-child {
+            margin-right: 0;
+        }
+
+        &:before {
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            border: 0;
+            @include border-radius(0);
+        }
+    }
+
+    .x-first:before {
+        @include border-top-left-radius(4px);
+        @include border-bottom-left-radius(4px);
+    }
+
+    .x-last:before {
+        @include border-top-right-radius(4px);
+        @include border-bottom-right-radius(4px);
+    }
+}
+
+.x-toolbar-dark,
+.x-toolbar-neutral {
+    .x-segmentedbutton {
+        border-color: #060606;
+        @include background(linear-gradient(color-stops(#010101, #060606)));
+        @include box-shadow(0 0 0 1px #393939);
+    }
+}