compass_ae_sencha 1.0.0 → 1.0.1

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

@@ -0,0 +1,181 @@
+///**
+// * @class Global_CSS
+// *
+// * Global CSS variables and mixins of Sencha Touch.
+// */
+
+$base-color: #0AACE5 !default;
+$dark-color: #2D2D2D !default;
+
+$include-default-icons: true !default;
+
+/**
+ * @var {color} $loading-spinner-color
+ * Background-color for the bars in the loading spinner.
+ */
+$loading-spinner-color: #aaa !default;
+
+///**
+// * @var {boolean} $include-html-style
+// * Optionally remove included HTML styles/typography (for components with styleHtmlContent: true).
+// * Styles are scoped to .x-html. Set t o 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 {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} $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.
+// */
+//$global-row-height: 2.6em !default;
+
+///**
+// * @var {measurement} $global-row-height
+// * The minimum row height for items like toolbars.
+// */
+//$global-list-height: 46px !default;
+
+
+///**
+// * theme settings
+// */
+////$theme-dark: 'dark';
+////$theme-light: 'light';
+////$theme: $theme-dark !default;
+
+////$theme-name: 'windows-phone'+'/'+$theme;
+
+///**
+// * color styles
+// */
+
+
+
+//$dark-theme: true !default;
+
+//$dialog-color: #1F1F1F;
+
+
+
+///**
+// * @var {color} $base-color
+// * The primary color variable from which most elements derive their color scheme.
+// */
+//$base-color: rgba(145,0,145,1) !default; // Triton Blue
+
+//// Light theme
+//$background-color: #fff;
+//$foreground-color: #111;
+//$inactive-color: #ddd;
+
+//// Form fields
+//$field-background-color: #fff;
+//$field-border-color: #BABABA;
+//$field-color: #000;
+//$field-placeholder-color: #7A7A7A;
+//$field-focus-background-color: #fff;
+//$field-focus-border-color: #5C5C5C;
+//$field-disabled-background-color: #EAEAEA;
+//$field-disabled-border-color: #D9D9D9;
+//$field-disabled-color: #9F9F9F;
+//$field-disabled-placeholder-color: #BDBDBD;
+
+//$form-slider-background-color: #C6C6C6;
+//$form-slider-value-background-color: $base-color;
+//$form-slider-thumb-background-color: #000;
+//$form-slider-disabled-background-color: #DBDBDB;
+//$form-slider-disabled-value-background-color: #BABABA;
+//$form-slider-disabled-thumb-background-color: #A0A0A0;
+
+//$form-toggle-background-color: #A6A6A6;
+//$form-toggle-border-color: #A6A6A6;
+//$form-toggle-thumb-background-color: $form-slider-thumb-background-color;
+//$form-toggle-disabled-background-color: #E0E0E0;
+//$form-toggle-disabled-border-color: #CCCCCC;
+//$form-toggle-disabled-thumb-background-color: #A6A6A6;
+
+//// Dark theme
+//@if ($dark-theme) {
+//    $background-color: #111;
+//    $foreground-color: #fff;
+//    $inactive-color: #666;
+
+//    // Form fields
+//    $field-background-color: #D2D2D2;
+//    $field-border-color: #D2D2D2;
+//    $field-color: rgba(0,0,0,.8);
+//    $field-placeholder-color: rgba(0,0,0,.6);
+//    $field-focus-background-color: #FFFFFF;
+//    $field-focus-border-color: #FFFFFF;
+//    $field-disabled-background-color: #1D1D1D;
+//    $field-disabled-border-color: #777777;
+//    $field-disabled-color: rgba(255,255,255,.4);
+//    $field-disabled-placeholder-color: rgba(255,255,255,.2);
+
+//    $form-slider-background-color: #6C6C6C;
+//    $form-slider-value-background-color: $base-color;
+//    $form-slider-thumb-background-color: #fff;
+//    $form-slider-disabled-background-color: #383838;
+//    $form-slider-disabled-value-background-color: #535353;
+//    $form-slider-disabled-thumb-background-color: #7E7E7E;
+
+//    $form-toggle-background-color: #6B6B6B;
+//    $form-toggle-border-color: #6C6C6C;
+//    $form-toggle-thumb-background-color: $form-slider-thumb-background-color;
+//    $form-toggle-disabled-background-color: #383838;
+//    $form-toggle-disabled-border-color: #4A4A4A;
+//    $form-toggle-disabled-thumb-background-color: #6C6C6C;
+//}
+
+//$form-slider-height: 11px;
+
+//$alert-color: red !default;
+//$confirm-color: #92cf00 !default; // Green
+
+///**
+//* font sizes
+//*/
+//$font-size-small: 10pt;
+//$font-size-normal: 11pt;
+//$font-size-medium: 15pt;
+//$font-size-medium-large: 17pt;
+//$font-size-large: 19pt;
+//$font-size-extra-large: 24pt;

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

@@ -1,2 +1 @@
-@import 'core';
-@import 'widgets';
+@import "src/all";

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

@@ -0,0 +1,98 @@
+/**
+ * @class Global_CSS
+ */
+
+/**
+ * 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%);
+        background-color: $bg-color;
+        @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-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 st-box-shadow(rgba(#000, .5) 0 -.06em 0);
+        } @else {
+            @include st-box-shadow(rgba(#fff, .35) 0 .06em 0);
+        }
+    }
+}
+
+/**
+ * Bevels the text based on its background.
+ *
+ * @param {color} $bg-color Background color of element.
+ *
+ * See {@link #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.
+ */
+@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);
+    }
+}

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

@@ -0,0 +1,332 @@
+/**
+ * @class Ext.Button
+ */
+
+.x-button {
+    @include background-clip(padding-box);
+    @include toolbar-button(#ccc, $button-gradient);
+
+    @if $include-border-radius {
+        @include border-radius($button-radius);
+    }
+
+    min-height: $button-height;
+    padding: .3em .6em;
+
+    // Default icon style
+    .x-button-icon {
+        width: 1.5em;
+        height: 1.5em;
+
+        &:before {
+            font-size: 1.6em;
+            line-height: 1em;
+        }
+    }
+
+    &.x-item-disabled .x-button-label,
+    &.x-item-disabled .x-button-icon {
+        opacity: .5;
+    }
+}
+
+@if $include-border-radius {
+    .x-button-round {
+        @include border-radius($button-height/2);
+    }
+}
+
+.x-ie .x-button {
+    height: 0px;
+
+    .x-button-label {
+        overflow: visible;
+    }
+}
+
+.x-iconalign-left .x-button-label {
+    margin-left: .6em;
+}
+.x-iconalign-right .x-button-label {
+    margin-right: .6em;
+}
+.x-iconalign-top,
+.x-iconalign-bottom {
+    padding-top: .2em !important;
+    padding-bottom: .2em !important;
+}
+
+// Button labels
+.x-button-label {
+    font-weight: bold;
+    line-height: 1.2em;
+}
+
+// Toolbar button styling
+.x-toolbar .x-button {
+    margin: 6px .2em;
+    padding: 0 .6em;
+
+    .x-button-label {
+        font-size: .7em;
+    }
+
+    .x-button-label, .x-hasbadge .x-badge {
+        line-height: 1.6em;
+    }
+
+    .x-button-icon {
+        &:before {
+            font-size: 1.3em;
+            line-height: 1.3em;
+        }
+    }
+}
+
+// For whatever reason, IE10 multiples before values with existing values!? We need to add lower values
+// here so it is the correct size.
+.x-ie .x-toolbar .x-button .x-button-icon::before {
+    font-size: .6em;
+    line-height: 1em;
+}
+
+.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: .045em; // 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.23;
+
+$mask-offset: $button-radius - $overlap-width + $shadow-width - .02;
+
+$tip-width: $mask-width - $mask-offset + $shadow-width;
+
+.x-button-forward,
+.x-button-back {
+    position: relative;
+    overflow: visible;
+    height: $button-height - 0.1;
+    z-index: 1;
+}
+
+.x-webkit {
+    .x-button-forward,
+    .x-button-back {
+        &:before, &:after {
+            @include insertion(15px, auto, -2px, auto);
+            bottom: -2px;
+            z-index: 2;
+            -webkit-mask: 4px 0 theme_image('default', "tip2_left.png") no-repeat;
+            -webkit-mask-size: 15px 100%;
+            overflow: hidden;
+        }
+    }
+}
+
+.x-webkit {
+    .x-button-back,
+    .x-toolbar .x-button-back {
+        margin-left: $tip-width - $shadow-width + $toolbar-spacing  - 0.01;
+        padding-left: .4em;
+
+        &:before {
+            left: -15px;
+        }
+
+        &:after {
+            left: -14px;
+        }
+    }
+
+    .x-button-forward,
+    .x-toolbar .x-button-forward {
+        margin-right: $tip-width - $shadow-width + $toolbar-spacing;
+        padding-right: .4em;
+
+        &:before,
+        &:after {
+            -webkit-mask: -4px 0 theme_image('default', "tip2_right.png") no-repeat;
+            -webkit-mask-size: 15px 100%;
+        }
+
+        &:before {
+            right: -15px;
+        }
+
+        &:after {
+            right: -14px;
+        }
+    }
+}
+
+// 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;
+    min-height: 0;
+    text-shadow: none;
+    line-height: auto;
+    height: 1.9em;
+    padding: 0 0.5em;
+
+    @if $include-border-radius {
+        @include border-radius(none);
+    }
+
+    & > * {
+        overflow: visible;
+    }
+
+    &.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));
+    }
+}
+
+
+// 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(.x-first) {
+        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;
+
+        border-color: darken($badge-bg-color, 10%);
+        min-width: $badge-size;
+        line-height: 1.2em;
+        top: -.2em;
+        padding: .1em .3em;
+
+        @include background-clip(padding-box);
+        @include color-by-background($badge-bg-color, $contrast: 50%);
+        @include background-gradient($badge-bg-color, $badge-bg-gradient);
+
+        @if $include-border-radius {
+            @include border-radius($badge-radius);
+        }
+
+        @if $include-button-highlights {
+            @include bevel-by-background($badge-bg-color);
+            @include box-shadow(rgba(#000, .5) 0 .1em .1em);
+        }
+    }
+}
+
+@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');
+}
+
+/**
+ * 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);
+    }
+
+    @if $include-border-radius {
+        .x-button.x-button-#{$ui-label}-round {
+            @extend .x-button-round;
+        }
+    }
+
+    .x-button.x-button-#{$ui-label}-small {
+        @extend .x-button-small;
+    }
+}
+
+@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%));
+}