compass_ae_sencha 1.0.0 → 1.0.1

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

@@ -0,0 +1,214 @@
+// Label
+.x-form-label {
+    display: none !important;
+
+    span {
+        font-weight: bold;
+    }
+
+    .x-form-label-nowrap & {
+        @include ellipsis();
+    }
+}
+
+//  Ext.field.Field
+.x-field {
+    @include st-box();
+
+    .x-field-input {
+        position: relative;
+        min-width: 3.7em;
+    }
+
+    .x-field-input,
+    .x-input-el {
+        width: 100%;
+    }
+
+    &.x-field-labeled {
+        .x-form-label {
+            display: block !important;
+        }
+    }
+
+    .x-component-outer {
+        position: relative;
+    }
+}
+
+.x-label-align-left,
+.x-label-align-right {
+    @include st-box-orient(horizontal);
+
+    .x-component-outer {
+        @include st-box-flex(1, 0px);
+    }
+}
+
+.x-label-align-right {
+    @include st-box-direction(reverse, row);
+}
+
+.x-label-align-top,
+.x-label-align-bottom {
+    @include st-box-orient(vertical);
+}
+
+.x-label-align-bottom {
+    @include st-box-direction(reverse, column);
+}
+
+.x-input-el {
+    display: block;
+}
+
+.x-field-mask {
+    @include absolute-fit();
+}
+
+.x-ie .x-field {
+    &.x-field-text,
+    &.x-field-textarea,
+    &.x-field-search {
+        .x-field-mask {
+            z-index: -1;
+        }
+    }
+}
+
+// Required fields
+.x-field-required .x-form-label:after {
+    content: "*";
+    display: inline;
+}
+
+// Ext.field.Hidden
+.x-field-hidden {
+    @extend .x-hidden-display;
+}
+
+// Ext.field.Spinner
+.x-spinner {
+    .x-component-outer {
+        @include st-box();
+
+        > * {
+            width: auto;
+        }
+    }
+
+    .x-field-input {
+        @include st-box-flex(1, 0px);
+
+        .x-input-el {
+            width: 100%;
+            text-align: center;
+        }
+
+        //http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-inputs-spin-box
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    }
+
+    .x-spinner-button {
+        text-align: center;
+        border: 1px solid #ccc !important;
+        background-color: #eee;
+    }
+
+    &.x-field-grouped-buttons {
+        .x-input-el {
+            text-align: left;
+        }
+    }
+}
+
+
+// Ext.field.Select
+.x-select-overlay {
+    .x-list-label {
+        @include ellipsis();
+        display: block;
+    }
+}
+
+
+//remove browser styling
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+.x-field-number {
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
+
+.x-field-input .x-clear-icon {
+    display: none;
+    width: 10px;
+    height: 10px;
+    background-color: #ccc;
+    position: absolute;
+    top: 50%;
+    right: 0;
+}
+
+.x-field-clearable {
+    .x-clear-icon {
+        display: block;
+    }
+
+    .x-field-input {
+        padding-right: 10px;
+    }
+}
+
+.x-android .x-input-el {
+  -webkit-text-fill-color: #000;
+}
+
+.x-android .x-empty .x-input-el {
+  -webkit-text-fill-color: #A9A9A9;
+}
+
+.x-android .x-item-disabled .x-input-el {
+  -webkit-text-fill-color: #b3b3b3;
+}
+
+// Ext.form.FieldSet
+.x-form-fieldset {
+    .x-form-fieldset-inner {
+        border: 1px solid #ccc;
+        overflow: hidden;
+    }
+
+    .x-dock {
+        .x-dock-body {
+            @include st-box-flex(1);
+        }
+    }
+}
+
+.x-form-fieldset-title {
+    font-weight: bold;
+
+    .x-innerhtml {
+        @include ellipsis();
+    }
+}
+
+.x-form-fieldset-instructions {
+    text-align: center;
+}
+
+.x-ie {
+  .x-field-select .x-field-mask {
+    z-index: 3;
+  }
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/base/src/layout/_Abstract.scss

@@ -0,0 +1,29 @@
+html,
+body {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.x-fullscreen {
+    position: absolute !important;
+}
+
+.x-body {
+    position: relative;
+    z-index: 0;
+}
+
+.x-inner,
+.x-body {
+    width: 100%;
+    height: 100%;
+}
+
+.x-sized {
+    position: relative;
+}
+
+.x-innerhtml {
+    width: 100%;
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/base/src/layout/_Box.scss

@@ -0,0 +1,111 @@
+/**
+ * @class Ext.layout.Box
+ */
+
+.x-layout-box {
+    @include st-box();
+    
+    &.x-horizontal {
+        @include st-box-orient(horizontal, important);
+
+        > .x-layout-box-item.x-flexed {
+            min-width: 0 !important;
+        }
+    }
+
+    &.x-vertical {
+        @include st-box-orient(vertical, important);
+
+        > .x-layout-box-item.x-flexed {
+            min-height: 0 !important;
+        }
+    }
+
+    > .x-layout-box-item {
+        @include st-box(important);
+    }
+
+    &.x-align-start {
+        @include st-box-align(start);
+    }
+
+    &.x-align-center {
+        @include st-box-align(center);
+    }
+
+    &.x-align-end {
+        @include st-box-align(end);
+    }
+
+    &.x-align-stretch {
+        @include st-box-align(stretch);
+    }
+
+    &.x-pack-start {
+        @include st-box-pack(start);
+    }
+
+    &.x-pack-center {
+        @include st-box-pack(center);
+    }
+
+    &.x-pack-end {
+        @include st-box-pack(end);
+    }
+
+    &.x-pack-justify {
+        @include st-box-pack(justify);
+    }
+}
+
+.x-layout-box-item.x-sized {
+    > .x-inner, > .x-body, > .x-dock-outer {
+        @include absolute-fit();
+    }
+}
+
+// Platform specific code
+
+.x-webkit {
+    .x-layout-box {
+        &.x-horizontal > .x-layout-box-item.x-flexed {
+            width: 0 !important;
+        }
+        
+        &.x-vertical > .x-layout-box-item.x-flexed {
+            height: 0 !important;
+        }
+    }
+}
+
+.x-firefox {
+    .x-stretched {
+        &.x-dock-horizontal {
+            > .x-dock-body {
+                width: 0;
+            }
+        }
+
+        &.x-dock-vertical {
+            > .x-dock-body {
+                height: 0;
+            }
+        }
+    }
+    
+    .x-container {
+        .x-dock-horizontal.x-unsized {
+            .x-dock-body {
+                @include st-box-flex(1, 0px);
+                min-height: 0;
+                min-width: 0;
+            }
+        }
+    }
+
+    .x-has-height > .x-dock.x-unsized.x-dock-vertical {
+        > .x-dock-body {
+            height: 0;
+        }
+    }
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/base/src/layout/_Card.scss

@@ -0,0 +1,23 @@
+/**
+ * @class Ext.layout.Card
+ */
+
+.x-layout-card {
+    position: relative;
+    overflow: hidden;
+}
+
+.x-layout-card-perspective {
+    -webkit-perspective: 1000px;
+    -ms-perspective: 1000px;
+    perspective: 1000px;
+}
+
+.x-layout-card-item-container {
+    @include absolute-fit;
+}
+
+.x-layout-card-item {
+    @include absolute-position;
+    position: absolute !important;
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/base/src/layout/_Dock.scss

@@ -0,0 +1,102 @@
+/**
+ * @class Ext.layout.Dock
+ */
+
+.x-dock {
+    @include st-box();
+
+    > .x-dock-body {
+        overflow: hidden;
+    }
+
+    &.x-sized, &.x-sized > .x-dock-body > *,
+    &.x-sized > .x-dock-body > .x-body > .x-inner {
+        @include absolute-fit();
+    }
+
+    &.x-sized > .x-dock-body {
+        position: relative;
+        @include st-box();
+        @include st-box-flex(1);
+        min-height: 0;
+        min-width: 0;
+    }
+
+    &.x-unsized,
+    &.x-stretched {
+        height: 100%;
+        
+        > .x-dock-body {
+            position: relative;
+            @include st-box();
+            @include st-box-flex(1);
+            @include st-box-orient(vertical);
+            min-height: 0;
+            min-width: 0;
+
+            > * {
+                @include st-box-flex(1);
+                min-height: 0;
+                min-width: 0;
+            }
+        }
+    }
+
+    &.x-dock-vertical {
+        @include st-box-orient(vertical);
+    }
+
+    &.x-dock-horizontal {
+        @include st-box-orient(horizontal, important);
+
+        > .x-dock-item {
+            @include st-box();
+
+            &.x-sized {
+                > .x-inner, > .x-body {
+                    @include absolute-fit();
+                }
+            }
+
+            &.x-unsized {
+                @include st-box-orient(vertical);
+
+                > * {
+                    @include st-box-flex(1);
+                    min-height: 0;
+                    min-width: 0;
+                }
+            }
+        }
+    }
+}
+
+// Platform specific code
+
+.x-ie {
+    .x-stretched {
+        &.x-dock-horizontal {
+            > .x-dock-body {
+                width: 0;
+            }
+        }
+
+        &.x-dock-vertical {
+            > .x-dock-body {
+                height: 0;
+            }
+        }
+    }
+
+    .x-has-width > .x-dock.x-unsized.x-dock-horizontal {
+        > .x-dock-body {
+            width: 0;
+        }
+    }
+
+    .x-has-height > .x-dock.x-unsized.x-dock-vertical {
+        > .x-dock-body {
+            height: 0;
+        }
+    }
+}