compass_ae_sencha 1.0.0 → 1.0.1

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

@@ -0,0 +1,227 @@
+/**
+ * @class Ext.Button
+ */
+
+// Private variables
+$disabled-color: #999;
+
+.x-button {
+    @include background-clip(padding-box);
+    @include toolbar-button($background-color);
+    min-height: 1.8em;
+    padding: .3em .6em .5em .6em;
+
+    // Default icon style
+    .x-button-icon {
+        width: 20px;
+        height: 24px;
+
+        &:before {
+            font-size: 24px;
+            line-height: 22px;
+        }
+    }
+
+    .x-button-label {
+        color: $foreground-color;
+    }
+
+    &.x-item-disabled {
+        border-color: $disabled-color;
+
+        .x-button-label, .x-button-icon {
+            color: $disabled-color;
+        }
+    }
+
+    &.x-button-pressing,
+    &.x-button-pressed,
+    &.x-button-active {
+        &,
+        .x-button-label,
+        .x-button-icon:before {
+            color: $background-color;
+        }
+    }
+}
+
+.x-button-round {
+    @include border-radius(1.8em);
+}
+
+// Button icon alignment
+.x-iconalign-left .x-button-label {
+    margin-left: .6em;
+}
+.x-iconalign-right .x-button-label {
+    margin-right: .6em;
+}
+
+.x-iconalign-top .x-button-label {
+    margin-top: .6em;
+}
+
+.x-iconalign-bottom .x-button-label {
+    margin-bottom: .6em;
+}
+
+// Button labels
+.x-button-label {
+    line-height: 1.2em;
+    text-transform: lowercase;
+}
+
+// Toolbar button styling
+.x-toolbar .x-button {
+    margin: 0 .2em;
+    padding: .3em .5em;
+    min-width: 2.6em;
+    min-height: 2.6em;
+
+    .x-hasbadge .x-badge {
+        line-height: 1.6em;
+    }
+
+    .x-button-label {
+        padding-left: 6px;
+        padding-right: 6px;
+        line-height: 1.6em;
+    }
+
+    .x-webkit & .x-button-icon:before {
+        line-height: 26px;
+    }
+}
+
+.x-button-small,
+.x-toolbar .x-button-small {
+    padding: .2em .4em;
+    min-height: 0;
+
+    .x-button-label {
+        font-size: $font-size-small;
+    }
+}
+
+.x-button-forward,
+.x-button-back {
+    position: relative;
+    overflow: visible;
+    z-index: 1;
+    border-radius: 40px;
+    min-width: 40px !important;
+    min-height: 40px !important;
+
+    .x-button-label {
+        display: none;
+    }
+
+    &:before {
+        @include absolute-position;
+        content: '[';
+        font-family: 'Pictos';
+        text-align: center;
+        font-size: 29px;
+        line-height: 40px;
+        color: $foreground-color;
+    }
+
+    .x-ie &:before {
+        line-height: 35px;
+    }
+
+    &.x-button-pressing {
+        &:before {
+            color: $background-color;
+        }
+    }
+}
+
+.x-button-forward {
+    &:before {
+        content: ']';
+    }
+}
+
+// Badges
+.x-hasbadge {
+    overflow: visible;
+}
+
+.x-badge {
+    border: 0;
+    background-color: $base-color;
+    color: #fff;
+    font-size: 9pt;
+    min-width: 30px;
+    right: -3px;
+    top: -2px;
+    @include ellipsis;
+    padding: 0 2px;
+}
+
+@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.
+ */
+@mixin sencha-button-ui($ui-label, $color) {
+    .x-button.x-button-#{$ui-label},
+    .x-button.x-button-#{$ui-label}-round,
+    .x-button.x-button-#{$ui-label}-small {
+        @include toolbar-button($color);
+    }
+
+    .x-button.x-button-#{$ui-label}-small {
+        @extend .x-button-small;
+    }
+
+    .x-button-#{$ui-label}-round {
+        @extend .x-button-round;
+    }
+}
+
+@if $include-button-uis {
+    @include sencha-button-ui('action', $background-color);
+    @include sencha-button-ui('confirm', desaturate(darken($confirm-color, 10%), 5%));
+    @include sencha-button-ui('decline', desaturate(darken($alert-color, 10%), 5%));
+}

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

@@ -0,0 +1,51 @@
+body {
+    color: $foreground-color;
+
+    input {
+        font-family: "Segoe UI", "HelveticaNeue", Helvetica, Arial, sans-serif;
+    }
+
+    h1,
+    h2,
+    h3 {
+        font-family: "Segoe UI Light", "HelveticaNeue-light", Helvetica, Arial, sans-serif;
+    }
+
+    h4,
+    h5 {
+        font-family: "Segoe UI Semibold", "HelveticaNeue-bold", Helvetica, Arial, sans-serif;
+    }
+
+    h1 { font-size: 42pt; line-height: 50pt; }
+    h2 { font-size: 20pt; line-height: 22pt; }
+    h3 { font-size: 20pt; line-height: 22pt; }
+
+    &,
+    h4,
+    h5,
+    p {
+        font-size: 11pt;
+        line-height: 16pt;
+    }
+
+    &,
+    p {
+        font-family: "Segoe UI Semilight", "HelveticaNeue-light", Helvetica, Arial, sans-serif;
+    }
+}
+
+.x-layout-card-item {
+    background: $background-color;
+}
+
+@if $dark-theme {
+    .x-html,
+    .x-html h1,
+    .x-html h2,
+    .x-html h3,
+    .x-html h4,
+    .x-html h5,
+    .x-html h6 {
+        color: #eee;
+    }
+}

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

@@ -0,0 +1,93 @@
+/**
+ * Includes default message box styles.
+ */
+
+.x-msgbox {
+    max-height: 90%;
+    width: 100%;
+    padding: 10px;
+    border: 0;
+    margin: 0;
+    max-width: 100%;
+
+    > .x-dock {
+        max-width: 600px;
+        margin: 0 auto;
+    }
+
+    .x-msgbox-buttons {
+        .x-toolbar-inner {
+            @include st-box-pack(end, important);
+        }
+    }
+
+    .x-title {
+        color: #000;
+        padding: 0 !important;
+    }
+
+    //icons
+    .x-icon {
+        margin: 0 20px 0 0;
+
+        &:before {
+            line-height: 45px;
+            font-size: 42px;
+        }
+    }
+
+    .x-msgbox-info {
+        @include inline-icon('info');
+    }
+
+    .x-msgbox-warning {
+        @include inline-icon('warning_black');
+    }
+
+    .x-msgbox-question {
+        @include inline-icon('help');
+    }
+
+    .x-msgbox-error {
+        @include inline-icon('delete_black1');
+    }
+
+    .x-title {
+        font-size: $font-size-medium-large;
+        font-weight: normal;
+        line-height: 1.4em;
+        margin: 0;
+    }
+
+    .x-toolbar {
+        padding: 0;
+        margin-bottom: 0;
+
+        .x-button {
+            margin: 0 0 0 5px;
+        }
+    }
+
+    .x-field {
+        margin: 6px 0 !important;
+        min-height: 2em;
+        background: #fff;
+    }
+
+    .x-form-field {
+        min-height: 32px;
+        padding-right: 0 !important;
+        -webkit-appearance: none;
+    }
+}
+
+.x-msgbox-title {
+    padding: 0 !important;
+}
+
+.x-msgbox-text {
+    color: #000;
+    padding: 10px 0;
+    text-align: left;
+    line-height: 1.4em;
+}

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

@@ -0,0 +1,268 @@
+/**
+ * @class Ext.Panel
+ */
+
+.x-form.x-floating,
+.x-panel.x-floating,
+.x-msgbox {
+    background-color: #fff;
+
+    @if $dark-theme {
+        color: #000;
+
+        .x-title,
+        .x-html {
+            color: #000;
+        }
+
+        .x-item-disabled {
+            .x-input-el {
+                color: $light-field-disabled-color;
+            }
+        }
+
+        .x-input-el:-ms-input-placeholder { color: $light-field-placeholder-color; }
+        .x-input-el::-webkit-input-placeholder { color: $light-field-placeholder-color; }
+        .x-item-disabled .x-input-el::-webkit-input-placeholder { color: $light-field-disabled-placeholder-color; }
+        .x-item-disabled .x-input-el:-ms-input-placeholder { color: $light-field-disabled-placeholder-color; }
+
+        // Label
+        .x-form-label {
+            color: $light-foreground-color;
+        }
+
+        .x-field-text,
+        .x-field-textarea,
+        .x-field-search,
+        .x-spinner,
+        .x-field-select {
+            .x-clear-icon,
+            .x-component-outer .x-input-el {
+                background-color: $light-field-background-color;
+                border-color: $light-field-border-color;
+            }
+
+            &.x-field-focused {
+                .x-clear-icon,
+                .x-component-outer .x-input-el {
+                    background-color: $light-field-focus-background-color;
+                    border-color: $light-field-focus-border-color;
+                }
+            }
+
+            &.x-item-disabled {
+                .x-clear-icon,
+                .x-component-outer .x-input-el {
+                    background-color: $light-field-disabled-background-color;
+                    border-color: $light-field-disabled-border-color;
+                }
+            }
+        }
+
+        // checkboxfield + radiofield
+        .x-field-checkbox .x-field-mask,
+        .x-field-radio .x-field-mask {
+            &:before {
+                background-color: $light-field-background-color;
+                border-color: $light-field-border-color;
+            }
+        }
+
+        .x-item-disabled {
+            &.x-field-checkbox .x-field-mask,
+            &.x-field-radio .x-field-mask {
+                &:before {
+                    background-color: $light-field-disabled-background-color;
+                    border-color: $light-field-disabled-border-color;
+                }
+            }
+
+            .x-input-checkbox:checked ~ .x-field-mask:after {
+                color: $light-field-disabled-color;
+            }
+
+            .x-input-radio:checked ~ .x-field-mask:after {
+                background-color: $light-field-disabled-color;
+            }
+        }
+
+        // Ext.field.Spinner
+        .x-spinner {
+            &.x-item-disabled {
+                .x-field-input:before,
+                .x-spinner-button {
+                    color: $light-field-disabled-color !important;
+                    border-color: $light-field-disabled-border-color !important;
+                    background-color: $light-field-disabled-background-color !important;
+                }
+            }
+
+            .x-spinner-button {
+                border-color: $light-field-border-color !important;
+
+                &:before {
+                    color: $light-field-border-color;
+                }
+            }
+
+            .x-button-pressed {
+                background-color: $light-field-background-color;
+
+                &:before {
+                    color: $light-field-color;
+                }
+            }
+        }
+
+        .x-form-fieldset-title {
+            color: $light-foreground-color;
+        }
+    }
+
+    .x-slider.x-item-disabled {
+        &:before {
+            background-color: $light-form-slider-disabled-background-color;
+        }
+
+        .x-thumb {
+            background-color: $light-form-slider-disabled-thumb-background-color;
+
+            &:before {
+                background-color: $light-form-slider-disabled-value-background-color;
+            }
+        }
+    }
+
+    .x-thumb {
+        background-color: $light-form-slider-thumb-background-color;
+    }
+
+    .x-slider:before {
+        background-color: $light-form-slider-background-color;
+    }
+
+    // togglefield
+    .x-toggle {
+        border-color: $light-form-toggle-border-color;
+
+        .x-thumb {
+            &:after {
+                background: $light-form-slider-thumb-background-color;
+            }
+        }
+    }
+
+    .x-toggle-inner {
+        background-color: $light-form-toggle-background-color;
+    }
+
+    .x-item-disabled .x-toggle {
+        border-color: $light-form-toggle-disabled-border-color;
+
+        .x-thumb {
+            &:after {
+                background: $light-form-slider-disabled-thumb-background-color;
+            }
+        }
+
+        .x-toggle-inner {
+            background-color: $light-form-toggle-disabled-background-color;
+        }
+    }
+
+    .x-toolbar {
+        background: transparent;
+    }
+}
+
+.x-sheet,
+.x-sheet-action,
+.x-msgbox,
+.x-panel.x-floating,
+.x-form.x-floating {
+    .x-button,
+    .x-clear-icon,
+    .x-input-el {
+        border-color: #000 !important;
+        background-color: #fff !important;
+
+        .x-button-label {
+            color: #000 !important;
+        }
+
+        &.x-item-disabled {
+            border-color: #bbb !important;
+
+            .x-button-label {
+                color: #bbb !important;
+            }
+        }
+    }
+
+    .x-button-pressing {
+        background-color: #000 !important;
+
+        .x-button-label {
+            color: #fff !important;
+        }
+    }
+
+    .x-list-item {
+        color: #000;
+    }
+}
+
+.x-panel-accent,
+.x-nested-list-accent,
+.x-list-accent,
+.x-container-accent {
+    background-color: $base-color;
+
+    // Title
+    .x-title {
+        color: #fff;
+    }
+
+    // Back buttons
+    .x-button-back,
+    .x-button-forward {
+        border-color: #fff !important;
+
+        &:before {
+            color: #fff;
+        }
+
+        &.x-button-pressing {
+            background: #fff !important;
+
+            &:before {
+                color: $base-color;
+            }
+        }
+    }
+
+    // Lists
+    .x-list-item-body {
+        color: #fff;
+    }
+
+    .x-item-pressed {
+        .x-dock-horizontal .x-dock-body {
+            background-color: rgba(255,255,255,.1) !important;
+
+            .x-list-item-body {
+                color: #fff !important;
+            }
+        }
+    }
+
+    .x-item-selected {
+        .x-dock-horizontal .x-dock-body {
+            background-color: #fff !important;
+
+            .x-list-item-body {
+                color: $base-color !important;
+            }
+        }
+    }
+}