compass_ae_sencha 1.0.0 → 1.0.1

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/windows/src/picker/_Picker.scss

@@ -0,0 +1,95 @@
+/**
+ * @class Ext.picker.Picker
+ */
+
+@include icon('check2');
+@include icon('delete');
+
+.x-picker {
+    .x-toolbar {
+        padding-top: .5em;
+    }
+
+    background-color: $background-color;
+}
+
+.x-picker .x-picker-inner {
+    margin: $sheet-padding;
+
+    @if $dark-theme {
+        background-color: $background-color;
+    }
+
+    .x-picker-slot {
+        .x-body {
+            border-width: 0;
+        }
+
+        &.x-last {
+            .x-body {
+                border-left: 0;
+                border-right: 0;
+            }
+        }
+    }
+}
+
+.x-picker-bar {
+    height: $picker-row-height + 10px;
+}
+
+.x-use-titles .x-picker-bar {
+    margin-top: 400px;
+}
+
+.x-picker-slot-title {
+    position:relative;
+    z-index: 2;
+    background-color: $dialog-color;
+
+    > div {
+        font-weight: 700;
+        padding: 0 5px;
+        font-size: $font-size-normal;
+        text-transform: uppercase;
+        color: $foreground-color;
+    }
+}
+
+.x-picker-slot {
+    .x-dataview-item {
+        margin: 10px 5px;
+        height: $picker-row-height;
+        font-weight: bold;
+        padding: 0 10px;
+        color: color-by-background($background-color, 60);
+        border: 1px solid color-by-background($background-color, 30);
+        line-height: $picker-row-height;
+
+        &.x-item-selected {
+            color: color-by-background($base-color);
+            background: $base-color;
+            border-color: $base-color;
+        }
+
+        &.x-item-pressed {
+            color: color-by-background($base-color);
+        }
+    }
+
+    .x-picker-item {
+        font-size: $font-size-medium-large;
+    }
+}
+
+.x-picker-right {
+    text-align: right;
+}
+
+.x-picker-center {
+    text-align: center;
+}
+
+.x-picker-left {
+    text-align: left;
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/windows/src/plugin/_PullRefresh.scss

@@ -0,0 +1,24 @@
+/**
+ * @class Ext.plugin.PullRefresh
+ */
+
+.x-list-pullrefresh-arrow {
+    background: center center theme_image('default', "pullarrow.png") no-repeat;
+    background-size: 2em 3em;
+    -webkit-transition-property: -webkit-transform;
+    -webkit-transition-duration: 200ms;
+    @include rotate(0deg);
+}
+
+.x-android-2 .x-list-pullrefresh-arrow {
+    -webkit-transition-property: none;
+    -webkit-transition-duration: 0;
+}
+
+.x-list-pullrefresh-release .x-list-pullrefresh-arrow {
+    @include rotate(-180deg);
+}
+
+.x-list-pullrefresh-message {
+    margin-bottom: 0.1em;
+}

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

@@ -0,0 +1,77 @@
+/**
+ * @class Ext.slider.Slider
+ */
+
+.x-slider {
+    height: $form-slider-height;
+
+    &:before {
+        margin: 0;
+    }
+}
+
+.x-slider-inner {
+    overflow: hidden;
+}
+
+.x-slider.x-item-disabled {
+    &:before {
+        background-color: $form-slider-disabled-background-color;
+    }
+
+    .x-thumb {
+        background-color: $form-slider-disabled-thumb-background-color;
+
+        &:before {
+            background-color: $form-slider-disabled-value-background-color;
+        }
+    }
+}
+
+.x-thumb {
+    height: $form-slider-height;
+    width: $form-slider-height;
+    background-color: $form-slider-thumb-background-color;
+    border: 0;
+
+    &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        width: 5000px;
+        right: $form-slider-height;
+        height: $form-slider-height;
+        background-color: $base-color;
+    }
+
+    &:after {
+        content: '';
+        position: absolute;
+
+        // here so the tap area is bigger on mobile devices
+        $form-slider-thumb-extra-size: 20px;
+        top: -$form-slider-thumb-extra-size;
+        left: -$form-slider-thumb-extra-size;
+        height: $form-slider-height + ($form-slider-thumb-extra-size * 2);
+        width: $form-slider-height + ($form-slider-thumb-extra-size * 2);
+    }
+}
+
+// Create the slider track
+.x-slider:before {
+    top: 0;
+    height: $form-slider-height;
+    background-color: $form-slider-background-color;
+}
+
+.x-slider-multiple {
+    .x-slider:after {
+        background-color: $base-color;
+        opacity: 1;
+    }
+
+    .x-thumb:before {
+        background: transparent;
+        width: 0;
+    }
+}

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

@@ -0,0 +1,60 @@
+/**
+ * @class Ext.slider.Toggle
+ */
+
+.x-toggle {
+    width: 51px;
+    height: 19px;
+    border: 2px solid $form-toggle-border-color;
+    overflow: visible;
+
+    .x-thumb {
+        background: transparent;
+        width: 8px;
+        height: 13px;
+
+        &:before {
+            height: 13px;
+            width: 34px;
+        }
+
+        &:after {
+            position: absolute;
+            width: 14px;
+            height: 19px;
+            top: -3px;
+            left: -3px;
+            background: $form-slider-thumb-background-color;
+            content: '';
+        }
+    }
+}
+
+.x-toggle-field .x-component-outer {
+    overflow: hidden;
+}
+
+.x-toggle-inner {
+    margin: 1px;
+    height: 13px;
+    width: 45px;
+    background-color: $form-toggle-background-color;
+}
+
+.x-toggle-on {
+    background: transparent;
+}
+
+.x-item-disabled .x-toggle {
+    border-color: $form-toggle-disabled-border-color;
+
+    .x-thumb {
+        &:after {
+            background: $form-slider-disabled-thumb-background-color;
+        }
+    }
+
+    .x-toggle-inner {
+        background-color: $form-toggle-disabled-background-color;
+    }
+}

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

@@ -0,0 +1,233 @@
+/**
+ * @class Ext.tab.Bar
+ */
+
+// Tabs
+.x-tab {
+    background-color: transparent;
+    border: 0;
+    color: $foreground-color;
+
+    &.x-tab-active {
+        color: $foreground-color !important;
+    }
+
+    &.x-item-disabled {
+        span.x-button-label,
+        .x-button-icon {
+            @include opacity(.5);
+        }
+    }
+
+    &.x-draggable {
+        @include opacity(.7);
+    }
+
+    .x-button-label {
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+    }
+}
+
+// Tabbar
+.x-tabbar {
+    background-color: transparent;
+
+    &.x-docked-top {
+        border-bottom-width: 0;
+    }
+
+    &.x-docked-bottom {
+        border-top-width: 0;
+    }
+}
+
+// Docked Top
+.x-tabbar.x-docked-top {
+    height: 70px;
+
+    .x-tab {
+        color: $inactive-color;
+        padding: .4em .4em;
+
+        .x-button-label {
+            font-size: $font-size-large;
+            font-weight: normal;
+            line-height: 1.2em;
+        }
+
+        .x-badge {
+            font-size: .6em;
+            top: -0.5em;
+        }
+
+        &.x-tab-icon {
+            display: none;
+        }
+    }
+}
+
+// Docked bottom
+.x-tabbar.x-docked-bottom {
+    height: 90px;
+
+    .x-button-icon:before {
+        font-size: 29px;
+        line-height: 35px;
+    }
+
+    .x-tab {
+        @include st-box();
+        @include st-box-orient(vertical);
+        padding: 0;
+        min-width: auto;
+        margin: 13px 20px 18px;
+
+        .x-button-label {
+            font-size: 12px;
+            padding-top: 7px;
+        }
+
+        .x-button-icon {
+            width: 42px;
+            height: 42px;
+            margin: 0 auto;
+            border: 2px solid;
+            border-radius: 42px;
+        }
+    }
+}
+
+// UIs
+.x-tabbar-accent.x-docked-top {
+    background-color: $base-color;
+
+    .x-tab {
+        .x-button-label {
+            color: lighten($base-color, 15);
+        }
+
+        &.x-tab-pressed,
+        &.x-tab-active {
+            .x-button-label {
+                color: #fff;
+            }
+        }
+    }
+}
+
+.x-tabbar-light.x-docked-top {
+    background-color: #fff;
+
+    .x-tab {
+        &.x-tab-pressed,
+        &.x-tab-active {
+            .x-button-label {
+                color: #000;
+            }
+        }
+    }
+}
+
+.x-tabbar-dark.x-docked-top {
+    background-color: #111;
+
+    .x-tab {
+        .x-button-label {
+            color: #666;
+        }
+
+        &.x-tab-pressed,
+        &.x-tab-active {
+            .x-button-label {
+                color: #fff;
+            }
+        }
+    }
+}
+
+.x-tabbar-accent.x-docked-bottom {
+    background-color: $base-color;
+
+    .x-button-label {
+        color: #fff;
+    }
+
+    .x-badge {
+        background-color: lighten($base-color, 20);
+    }
+
+    .x-tab {
+        .x-button-icon {
+            color: #fff;
+            border-color: #fff;
+        }
+
+        &.x-tab-pressed,
+        &.x-tab-active {
+            .x-button-icon {
+                background-color: #fff;
+
+                &:before {
+                    color: #000;
+                }
+            }
+        }
+    }
+}
+
+.x-tabbar-dark.x-docked-bottom {
+    background-color: #111;
+
+    .x-button-label {
+        color: #fff;
+    }
+
+    .x-tab {
+        .x-button-icon {
+            color: #fff;
+            border-color: #fff;
+        }
+
+        &.x-tab-pressed,
+        &.x-tab-active {
+            .x-button-icon {
+                background-color: #fff;
+
+                &:before {
+                    color: #000;
+                }
+            }
+        }
+    }
+}
+
+.x-tabbar-light.x-docked-bottom {
+    background-color: #eee;
+
+    .x-tab {
+        .x-button-label {
+            color: #000;
+        }
+
+        .x-button-icon {
+            border-color: #000;
+
+            &:before {
+                color: #000;
+            }
+        }
+
+        &.x-tab-pressed,
+        &.x-tab-active {
+            .x-button-icon {
+                background-color: #000;
+                border-color: #000;
+
+                &:before {
+                    color: #fff;
+                }
+            }
+        }
+    }
+}