compass_ae_sencha 1.0.0 → 1.0.1

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

@@ -0,0 +1,77 @@
+/**
+ * @class Ext.slider.Slider
+ */
+
+// Private variables
+$form-thumb-space: ($form-thumb-size - $form-toggle-size) / 2;
+
+.x-slider,
+.x-toggle {
+    height: $form-thumb-size;
+}
+
+.x-slider.x-item-disabled {
+    opacity: .6;
+}
+
+@if $basic-slider {
+    .x-thumb {
+        height: $form-thumb-size;
+        width: $form-thumb-size;
+        border: 1px solid #000;
+        background-color: #777;
+
+        &.x-dragging {
+            background-color: #AAA;
+        }
+    }
+
+    // Create the slider track
+    .x-slider:before {
+        margin: 0 $form-toggle-size/2;
+        border: .1em solid rgba(#000, .1);
+        border-bottom: 0;
+        background-color: $form-light;
+        @include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0);
+    }
+} @else {
+    .x-thumb {
+        height: $form-thumb-size;
+        width: $form-thumb-size;
+        background: transparent none;
+        border: 0;
+
+        // The actual thumb
+        &:after {
+            border: 1px solid darken($form-light, 30%);
+            @include insertion($form-toggle-size, $form-toggle-size, $form-thumb-space, $form-thumb-space);
+            @include background-gradient($form-light);
+            @include background-clip(padding-box);
+            @if $include-border-radius {
+                @include border-radius($form-toggle-size/2);
+            }
+        }
+
+        &.x-dragging {
+            opacity: 1;
+            &:after {
+                @include background-gradient(darken($form-light, 5%));
+            }
+        }
+    }
+
+    // Create the slider track
+    .x-slider:before {
+        margin: 0 $form-toggle-size/2;
+        border: .1em solid rgba(#000, .1);
+        border-bottom: 0;
+
+        @include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0);
+        @include background-gradient($form-light, 'recessed');
+        @include box-shadow(rgba(#fff,.7) 0 .1em 0);
+        @if $include-border-radius {
+            @include border-radius($form-slider-size/2);
+        }
+    }
+}
+

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

@@ -0,0 +1,27 @@
+/**
+ * @class Ext.slider.Toggle
+ */
+
+.x-toggle {
+    width: $form-thumb-size * 2;
+    border: 1px solid darken($form-light, 15%);
+
+    @include background-gradient($form-light, 'recessed');
+    @if $include-border-radius {
+        @include border-radius($form-thumb-size/2);
+    }
+
+    .x-thumb {
+        &.x-dragging {
+            opacity: 1;
+        }
+
+        &:before {
+            top: ($form-thumb-size - $form-toggle-size) / 2;
+        }
+    }
+}
+
+.x-toggle-on {
+    @include background-gradient($confirm-color, 'recessed');
+}

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

@@ -0,0 +1,202 @@
+/**
+ * @class Ext.tab.Panel
+ */
+
+// Private variables
+$tabs-top-height: $global-row-height - .8em;
+$tabs-top-icon-size: $tabs-top-height - .6em;
+
+// 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);
+}
+
+@mixin sencha-top-tabs {
+    .x-tabbar.x-docked-top {
+        height: $global-row-height;
+        padding: 0 .8em;
+
+        .x-tab {
+            background: transparent none;
+            border: 0;
+
+            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;
+            }
+
+            .x-badge {
+                font-size : .6em !important;
+                top       : -0.5em;
+            }
+
+            .x-button-icon {
+                width: $tabs-top-icon-size;
+                height: $tabs-top-icon-size;
+                margin: 0 auto;
+
+                &:before {
+                    font-size: 1.6em;
+                }
+            }
+
+            &.x-tab-icon {
+                padding : (($tabs-top-height - 1em) / 2) - .1em .8em;
+
+                .x-button-label {
+                    margin: 0;
+                    margin-left: .3em;
+                    padding: .1em 0 .2em 0;
+                    display: inline-block;
+                    position: relative;
+                    top: -.4em;
+                }
+            }
+        }
+    }
+}
+
+@mixin sencha-bottom-tabs {
+    .x-tabbar.x-docked-bottom {
+        height: 3em;
+        padding: 0;
+
+        .x-tab {
+            background: transparent none;
+            border: 0;
+
+            padding-top: .2em;
+            @if $include-border-radius {
+                @include border-radius($tabs-bottom-radius);
+            }
+            @include st-box-orient(vertical);
+
+            .x-button-icon {
+                width: $tabs-bottom-icon-size;
+                height: $tabs-bottom-icon-size;
+                margin: 0 auto;
+
+                &:before {
+                    font-size: 1.6em;
+                    line-height: 1.1em;
+                }
+            }
+
+            .x-button-label {
+                margin: 0;
+                padding: .1em 0 .2em 0;
+                font-size: 9px;
+                line-height: 12px;
+                text-rendering: optimizeLegibility;
+                -webkit-font-smoothing: antialiased;
+            }
+        }
+    }
+}
+
+/**
+ * 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} {
+        border-top-color: darken($bar-color, 5%);
+        border-bottom-color: darken($bar-color, 15%);
+        @include background-gradient($bar-color, $bar-gradient);
+
+        .x-tab {
+            @include color-by-background($bar-color, 40%);
+            border-bottom: 1px solid transparent;
+        }
+
+        .x-tab-active {
+            @include color-by-background($bar-color, 90%);
+            border-bottom-color: lighten($bar-color, 3%);
+    
+            .x-button-icon:before {
+                color: $tab-active-color;
+            }
+        }
+
+        .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-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:before {
+                    color: $tab-active-color;
+                }
+            }
+        }
+    }
+
+    @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%));
+            }
+        }
+    }
+}
+
+@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));
+}

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

@@ -0,0 +1,38 @@
+/**
+ * @class Ext.Button
+ */
+
+/**
+ * @var {measurement} $button-height Default height for buttons.
+ */
+$button-height: 1.8em;
+
+/**
+ * @var {measurement} $button-radius Default border-radius for buttons.
+ */
+$button-radius: .4em !default;
+
+/**
+ * @var {measurement} $button-stroke-weight Default border width for buttons.
+ */
+$button-stroke-weight: 1px !default;
+
+/**
+ * @var {string} $button-gradient Default gradient for buttons.
+ */
+$button-gradient: $base-gradient !default;
+
+/**
+ * @var {string} $toolbar-icon-size Default size (width and height) for toolbar icons.
+ */
+$toolbar-icon-size: 1.4em !default;
+
+/**
+ * @var {boolean} $include-button-uis Optionally disable separate button UIs, including action, confirm, and decline.
+ */
+$include-button-uis: $include-default-uis !default;
+
+/**
+ * @var {boolean} $include-button-highlights Optionally disable special CSS3 effects on buttons including gradients, text-shadows, and box-shadows.
+ */
+$include-button-highlights: $include-highlights !default;

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/default/{_variables.scss → var/_Class.scss}

@@ -1,17 +1,14 @@
-$theme-name: 'default' !default;
-
 /**
  * @class Global_CSS
- *
- * Global CSS variables and mixins of Sencha Touch.
+ * Global CSS variables and mixins of Sencha Touch's Default Theme.
  */
 
 /**
- * @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.
+ * @var {boolean} $include-pictos-font
+ * Optionally remove the default Pictos font. This will reduce the size of your compiled CSS files, however icons
+ * will no longer be available unless you provide your own.
  */
-$include-html-style: true !default;
+$include-pictos-font: true !default;
 
 /**
  * @var {boolean} $include-default-icons
@@ -28,12 +25,6 @@ $include-default-icons: true !default;
  */
 $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.
@@ -68,14 +59,16 @@ $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
+ *
+ * See background-gradient mixin.
  */
 $base-gradient: if($include-highlights, matte, null) !default;
 
 /**
  * @var {font-family} $font-family
  * The font-family to be used throughout the theme.
- * @see background-gradient
+ *
+ * See background-gradient mixin.
  */
 $font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif !default;
 
@@ -120,3 +113,15 @@ $global-row-height: 2.6em !default;
  * The minimum row height for items like toolbars.
  */
 $global-list-height: 46px !default;
+
+/**
+ * @var {measurement} $toolbar-spacing
+ * Space between items in a toolbar (like buttons and fields)
+ */
+$toolbar-spacing: .2em !default;
+
+/**
+ * @var {color} $loading-spinner-color
+ * Background-color for the bars in the loading spinner.
+ */
+$loading-spinner-color: #aaa !default;

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

@@ -0,0 +1,15 @@
+/**
+ * @class Ext.Panel
+ */
+
+/**
+ * @var {measurement} $panel-border-radius
+ * The default border radius of floating panels.
+ */
+$panel-border-radius: .3em !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;

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/default/{widgets/_sheets.scss → var/_Sheet.scss}

@@ -1,5 +1,3 @@
-@import '../global';
-
 /**
  * @class Ext.Sheet
  */
@@ -27,26 +25,3 @@ $sheet-button-spacing: .5em !default;
  * 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;
-      }
-    }
-  }
-}