compass_ae_sencha 1.0.0 → 1.0.1

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

@@ -0,0 +1,23 @@
+.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-ios.x-phone {
+	font-size: 114%;
+}
+
+body.x-desktop {
+	font-size: 114%;
+}
+
+.x-layout-card-item {
+	background: $page-bg-color;
+}

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

@@ -0,0 +1,98 @@
+/**
+ * @class Ext.MessageBox
+ */
+
+.x-msgbox {
+    margin: .5em;
+    border: .15em solid $base-color;
+
+    @include box-shadow(rgba(#000, .4) 0 .1em .5em);
+    @if $include-border-radius {
+        @include border-radius($panel-border-radius);
+    }
+
+    .x-icon {
+        margin: 0 0.8em 0 0.5em;
+        background: #fff;
+        -webkit-mask-size: 100%;
+    }
+
+    .x-msgbox-info {
+        -webkit-mask-image: theme_image('default', "pictos/info.png");
+    }
+
+    .x-msgbox-warning {
+        -webkit-mask-image: theme_image('default', "pictos/warning_black.png");
+    }
+
+    .x-msgbox-question {
+        -webkit-mask-image: theme_image('default', "pictos/help.png");
+    }
+
+    .x-msgbox-error {
+        -webkit-mask-image: theme_image('default', "pictos/minus_black2.png");
+    }
+
+    .x-title {
+        font-size: .9em;
+        line-height: 1.4em;
+    }
+
+    .x-body {
+        background: transparent !important;
+    }
+
+    .x-toolbar {
+        background: transparent none;
+        @include box-shadow(none);
+
+        &.x-docked-top {
+            height: 1.3em;
+        }
+    }
+
+    .x-field {
+        min-height: 2em;
+        background: #fff;
+        @if $include-border-radius { @include border-radius(.2em); }
+    }
+
+    .x-form-field {
+        min-height:1.5em;
+        padding-right: 0 !important;
+        -webkit-appearance: none;
+    }
+
+    .x-field-input {
+        padding-right: 2.2em;
+    }
+}
+
+.x-msgbox-text {
+    padding: 6px 0;
+    line-height: 1.4em;
+}
+
+.x-msgbox-buttons {
+    padding: 0.4em 0;
+    height: auto;
+
+    .x-button-normal span {
+        opacity: .7;
+    }
+}
+
+@mixin msgbox-ui($ui-label, $bg-color: $sheet-bg-color) {
+    .x-msgbox-#{$ui-label} {
+        .x-msgbox-text {
+            @include color-by-background($bg-color, 80%);
+            @include bevel-by-background($bg-color);
+        }
+        .x-msgbox-input {
+            @include background-gradient(lighten($bg-color, 80%), 'recessed');
+            border: .1em solid lighten($bg-color, 40%);
+        }
+    }
+}
+
+@include msgbox-ui('dark', $sheet-bg-color);

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

@@ -0,0 +1,79 @@
+/**
+ * @class Ext.Panel
+ */
+
+// Private variables
+$anchor-height: .7em;
+$anchor-width: $anchor-height*2.33;
+
+@if $include-floating-panels {
+    .x-panel.x-floating,
+    .x-msgbox,
+    .x-form.x-floating {
+        @if $include-border-radius {
+            @include border-radius($panel-border-radius);
+        }
+        @include box-shadow(rgba(0,0,0,.8) 0 .2em .6em);
+        @include background-gradient(darken($base-color, 40%), 'flat');
+
+        &.x-floating-light {
+            @include background-gradient($base-color, 'flat');
+        }
+
+        .x-panel-inner,
+        > .x-body {
+            @if $include-border-radius {
+                @include border_radius($panel-border-radius);
+            }
+        }
+    }
+
+    .x-webkit .x-anchor {
+        position: absolute;
+        overflow: hidden;
+
+        &.x-anchor-top {
+            margin-top: -$anchor-height + 0.02em;
+            margin-left: -$anchor-width / 2;
+            width: $anchor-width;
+            height: $anchor-height;
+            -webkit-mask: 0 0 theme_image('default', "tip_top.png") no-repeat;
+            -webkit-mask-size: $anchor-width $anchor-height;
+            background-color: darken($base-color, 40%);
+        }
+
+        &.x-anchor-bottom {
+            margin-left: -$anchor-width / 2;
+            width: $anchor-width;
+            height: $anchor-height;
+            -webkit-mask: 0 0 theme_image('default', "tip_bottom.png") no-repeat;
+            -webkit-mask-size: $anchor-width $anchor-height;
+            background-color: darken($base-color, 40%);
+        }
+
+        &.x-anchor-left {
+            margin-left: -$anchor-width / 2 + 0.15em;
+            margin-top: -$anchor-height / 2;
+            height: $anchor-width;
+            width: $anchor-height;
+            -webkit-mask: 0 0 theme_image('default', "tip_left.png") no-repeat;
+            -webkit-mask-size: $anchor-height $anchor-width;
+            background-color: darken($base-color, 40%);
+        }
+
+        &.x-anchor-right {
+            margin-top: -$anchor-height / 2;
+            height: $anchor-width;
+            width: $anchor-height;
+            -webkit-mask: 0 0 theme_image('default', "tip_right.png") no-repeat;
+            -webkit-mask-size: $anchor-height $anchor-width;
+            background-color: darken($base-color, 40%);
+        }
+    }
+
+    .x-floating.x-panel-light {
+        &:after {
+            background-color: $base-color;
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+/**
+ * @class Ext.Sheet
+ */
+
+.x-sheet,
+.x-picker,
+.x-sheet-action {
+    padding: $sheet-padding;
+    border-top: 1px solid darken($base-color, 30%);
+    @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;
+        }
+    }
+}

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

@@ -0,0 +1,284 @@
+/**
+ * @class Ext.Toolbar
+ */
+
+.x-toolbar {
+    padding: 0 $toolbar-spacing;
+
+    &.x-docked-left {
+        width: 7em;
+        padding: $toolbar-spacing;
+    }
+
+    &.x-docked-right {
+        width: 7em;
+        padding: $toolbar-spacing;
+    }
+}
+
+.x-title {
+    line-height: $global-row-height - .5em;
+    font-size: 1.2em;
+    margin: 0 0.3em;
+    padding: 0 .3em;
+}
+
+/**
+* Creates a theme UI for toolbars.
+*
+*     // SCSS
+*     @include sencha-toolbar-ui('sub', #58710D, 'glossy');
+*
+*     // JS
+*     var myTb = new Ext.Toolbar({title: 'My Green Glossy Toolbar', ui: 'sub'})
+*
+* @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: $toolbar-gradien Background gradient style for the UI.
+*/
+@mixin sencha-toolbar-ui($ui-label, $color, $gradient: $toolbar-gradient) {
+    $toolbar-border-color: darken($color, 50%);
+    $toolbar-button-color: darken($color, 5%);
+
+    .x-toolbar-#{$ui-label} {
+        @include background-gradient($color, $gradient);
+        border-color: $toolbar-border-color;
+
+        .x-title {
+            @include color-by-background($color);
+            @include bevel-by-background($color);
+        }
+
+        &.x-docked-top {
+            border-bottom-color: $toolbar-border-color;
+        }
+
+        &.x-docked-bottom {
+            border-top-color: $toolbar-border-color;
+        }
+
+        &.x-docked-left {
+            border-right-color: $toolbar-border-color;
+        }
+
+        &.x-docked-right {
+            border-left-color: $toolbar-border-color;
+        }
+
+        .x-button,
+        .x-field-select .x-component-outer,
+        .x-field-select .x-component-outer:before {
+            @include toolbar-button($toolbar-button-color, $gradient);
+        }
+
+        .x-label,
+        .x-form-label {
+            font-weight: bold;
+            @include color-by-background($color);
+            @include bevel-by-background($color);
+        }
+    }
+}
+
+@if $include-toolbar-uis {
+    @include sencha-toolbar-ui('dark', darken($toolbar-base-color, 10%));
+    @include sencha-toolbar-ui('light', $toolbar-base-color);
+    @include sencha-toolbar-ui('neutral', $neutral-color);
+
+    .x-toolbar.x-toolbar-neutral .x-toolbar-inner .x-button.x-button-pressing {
+        $mask-radial-glow: lighten($base-color, 25);
+        @include background-image(radial-gradient(fade-out($mask-radial-glow, .3), fade-out($mask-radial-glow, 1) 24px));
+        .x-button-icon.x-button-mask {
+            @include background-gradient(#fff, 'recessed');
+        }
+    }
+}
+
+
+
+/**
+ * @class Ext.field.Field
+ */
+
+/**
+ * @var {color} $toolbar-input-bg
+ * Background-color for toolbar form fields.
+ */
+$toolbar-input-bg: #fff !default;
+
+/**
+ * @var {color} $toolbar-input-color
+ * Text color for toolbar form fields.
+ */
+$toolbar-input-color: #000 !default;
+
+/**
+ * @var {measurement} $toolbar-input-height
+ * Text color for toolbar form fields.
+ */
+$toolbar-input-height: 1.6em !default;
+
+/**
+ * @var {color} $toolbar-input-border-color
+ * Border color for toolbar form fields.
+ */
+$toolbar-input-border-color: rgba(#000, .5) !default;
+
+// Private
+$toolbar-select-overflow-mask-width: 3em;
+$toolbar-search-left-padding: 1.67em;
+
+// Includes default toolbar form field styles.
+
+//so disabled fields are still dark
+.x-spinner .x-input-el,
+.x-field-select .x-input-el {
+    -webkit-text-fill-color: #000;
+    -webkit-opacity: 1;
+}
+
+.x-spinner.x-item-disabled .x-input-el,
+.x-field-select.x-item-disabled .x-input-el {
+    -webkit-text-fill-color: currentcolor;
+}
+
+//and inside toolbars
+.x-toolbar .x-field-select .x-input-el {
+    -webkit-text-fill-color: #fff;
+}
+
+.x-toolbar .x-field-select.x-item-disabled .x-input-el {
+    -webkit-text-fill-color: rgba(255,255,255,.6);
+}
+
+.x-toolbar {
+    .x-form-field-container {
+        @if $include-border-radius {
+            padding: 0 .3em;
+        }
+    }
+
+    .x-field {
+        width: 13em;
+        margin: .5em;
+        min-height: 0;
+        border-bottom: 0;
+        background: transparent;
+
+        .x-clear-icon {
+            background-size: 50% 50%;
+            right: -0.8em;
+            margin-top: -1.06em;
+        }
+    }
+
+    .x-field-input {
+        padding-right: 1.6em !important;
+    }
+
+    .x-field-textarea,
+    .x-field-text,
+    .x-field-number,
+    .x-field-search {
+        .x-component-outer {
+            background-color: $toolbar-input-bg;
+
+            @if $include-border-radius {
+                @include border-radius(.3em);
+            }
+
+            @if $include-highlights {
+              @include box-shadow($toolbar-input-border-color 0 .1em 0 inset, $toolbar-input-border-color 0 -.1em 0 inset, $toolbar-input-border-color .1em 0 0 inset, $toolbar-input-border-color -.1em 0 0 inset, rgba(#000, .5) 0 .15em .4em inset);
+            }
+        }
+    }
+
+    .x-form-label {
+        background: transparent;
+        border: 0;
+        padding: 0;
+        line-height: 1.4em;
+    }
+
+    .x-form-field {
+        height: $toolbar-input-height;
+        color: lighten($toolbar-input-color, 43%);
+        background: transparent;
+        min-height: 0;
+        -webkit-appearance: none;
+        padding: 0em .3em;
+        margin: 0;
+
+        &:focus {
+            color: $toolbar-input-color;
+        }
+    }
+
+    .x-field-select,
+    .x-field-search {
+        .x-component-outer {
+            @if $include-border-radius {
+                @include border-radius($toolbar-input-height/2);
+            }
+        }
+    }
+
+    .x-field-search {
+        .x-field-input {
+            background-position: .5em 50%;
+        }
+    }
+
+    .x-field-select {
+        -webkit-box-shadow: none;
+
+        .x-form-field {
+            height: 1.4em;
+        }
+    }
+
+    .x-field-select {
+        background: transparent;
+
+        .x-component-outer {
+            &:after {
+                right: .4em;
+            }
+        }
+
+        &.x-item-disabled {
+            .x-component-outer:after {
+                opacity: .6;
+            }
+        }
+
+        // Background is set in _toolbar file
+        .x-component-outer:before {
+            width: $toolbar-select-overflow-mask-width;
+            border-left: none;
+
+            @if $include-border-radius {
+                @include border-right-radius($toolbar-input-height/2);
+            }
+            @if $include-highlights {
+                -webkit-mask: theme_image('default', "select_mask.png");
+                -webkit-mask-position: right top;
+                -webkit-mask-repeat: repeat-y;
+                -webkit-mask-size: $toolbar-select-overflow-mask-width .05em;
+            }
+            @else {
+                width: 0.5em !important;
+            }
+        }
+
+        .x-input-text {
+            color: #fff;
+        }
+    }
+}
+
+.x-android .x-field-search .x-field-input {
+    padding-left: .2em !important;
+    padding-right: 2.2em !important;
+}