compass_ae_sencha 1.0.0 → 1.0.1

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/bb10/src/field/_Field.scss

@@ -0,0 +1,61 @@
+/**
+ * @member Ext.field.Field
+ */
+
+.x-field {
+
+}
+
+.x-form-label {
+    color: #292429;
+    font-size: 16px;
+    padding: 0 3px;
+    line-height: 50px;
+
+    span {
+        font-weight: normal;
+    }
+}
+
+.x-field-input {
+    padding: 6px 3px;
+}
+
+.x-field-clearable .x-field-input {
+    padding-right: 3px;
+}
+
+.x-field-input .x-clear-icon {
+    top: 12px;
+    right: 8px;
+    background: theme_image('bb10', "clear_icon.png") no-repeat;
+    width: 24px;
+    height: 24px;
+
+    &.x-pressing {
+        background-position: top right;
+    }
+}
+
+.x-input-text,
+.x-input-url,
+.x-input-email,
+.x-input-search,
+.x-input-number,
+.x-input-password,
+.x-spinner-button {
+    padding: 9px 5px;
+    border: 1px solid #C7C7C7;
+    background-color: #ffffff;
+    @include border-radius(3px);
+    @include box-shadow(inset 0 1px 0px 0 #f0f0f0);
+
+    .x-field-focused & {
+        border-color: $base-color;
+        @include box-shadow(0 0 0 1px $base-color);
+    }
+
+    &::-webkit-input-placeholder {
+        font-style:italic;
+    }
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/bb10/src/field/_Radio.scss

@@ -0,0 +1,32 @@
+/**
+ * @class Ext.field.Radio
+ */
+
+.x-field-radio .x-field-mask {
+    height: 47px;
+
+    &::before {
+        @include border-radius(35px);
+        width: 20px;
+        height: 20px;
+        top: 16px;
+        right: 6px;
+    }
+
+    &::after {
+        @include border-radius(35px);
+        width: 16px;
+        height: 16px;
+        top: 18px;
+        right: 8px;
+    }
+}
+
+.x-input-radio:checked ~ .x-field-mask::after {
+    @include background(linear-gradient(color-stops(#3498CB, #0974A8)));
+    @include box-shadow(inset 0 1px 0 0 #55AAD5);
+    font-family: Helvetica;
+    font-size: 26px;
+    line-height: 13px;
+    content: '•';
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/bb10/src/field/_Spinner.scss

@@ -0,0 +1,8 @@
+.x-spinner-button {
+    margin: 6px 3px;
+    padding: 0;
+    width: 30px !important;
+    line-height: 33px;
+    height: 36px;
+    font-weight: bold;
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/bb10/src/form/_FieldSet.scss

@@ -0,0 +1,22 @@
+/**
+ * @member Ext.form.FieldSet
+ */
+
+.x-form-fieldset-inner {
+    border-width: 0 !important;
+    padding: 3px;
+}
+
+.x-form-fieldset-title {
+    font-weight: normal;
+    font-size: 14px;
+    padding: 2px 10px;
+    border-top: 1px solid #CBCBCB;
+    border-bottom: 2px solid #0AA9DC;
+    @include background(linear-gradient(color-stops(#FEFEFE, #DDDDDD)));
+}
+
+.x-form-fieldset-instructions {
+    font-size: 14px;
+    padding: 10px 0;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * @member Ext.form.Panel
+ */
+
+.x-panel.x-floating > .x-dock.x-sized,
+.x-msgbox > .x-dock.x-sized,
+.x-form.x-floating > .x-dock.x-sized {
+    margin: 0;
+}

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

@@ -0,0 +1,53 @@
+/**
+ * @class Ext.picker.Picker
+ */
+
+$picker-row-height: 2.9em !default;
+
+.x-picker .x-picker-inner {
+    background-color: #fff;
+    overflow: hidden;
+    @include background-clip(padding-box);
+    background: #dedede;
+}
+
+.x-picker-mask {
+	z-index: 0;
+}
+
+.x-picker-bar {
+    border-top: 1px solid $base-color;
+    border-bottom: 1px solid $base-color;
+    background: #fff;
+    height: $picker-row-height;
+}
+
+.x-use-titles {
+    .x-picker-bar {
+        margin-top: 1.5em;
+    }
+}
+
+.x-picker-slot-title {
+    height: 1.5em;
+    @include background-image(linear-gradient(top, #f7f7f7, #e0e0e0));
+    border-bottom: 1px solid darken(#e0e0e0, 20%);
+    padding: 0.3em 1.02em;
+
+    > div {
+    	font-weight: normal;
+        font-size: 0.8em;
+    }
+}
+
+.x-picker-slot {
+	border-right: 1px solid #d0d0d0;
+
+    .x-dataview-item {
+        height: $picker-row-height;
+        line-height: $picker-row-height;
+        padding: 0 10px;
+		font-weight: normal !important;
+		@include box-shadow(none);
+    }
+}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/bb10/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/bb10/src/slider/_Slider.scss

@@ -0,0 +1,56 @@
+.x-slider {
+    height: 40px;
+
+    &:before {
+        top: 16px;
+        @include background(linear-gradient(color-stops(#3595CC, #0678C4)));
+        @include border-radius(4px);
+        @include box-shadow(0 0 0 1px #CECFCE);
+        border: 1px solid #3177A4;
+    }
+
+    &.x-item-disabled:before {
+        @include background(linear-gradient(color-stops(#fff, #e1e1e1)));
+        border-color: #ddd;
+        box-shadow: none;
+    }
+
+    .x-thumb {
+        margin-top: 5px;
+    }
+}
+
+.x-thumb {
+    border: 1px solid #bbb;
+    width: 30px;
+    height: 30px;
+    @include border-radius(15px);
+    @include background(linear-gradient(color-stops(#fff, #E4E2E4)));
+    @include box-shadow(inset 0 0 0 1px #fff);
+
+    &.x-item-disabled {
+        border-color: #ccc;
+        @include background(linear-gradient(color-stops(#fff, #eee)));
+    }
+}
+
+.x-toggle {
+    height: 34px;
+    @include border-radius(17px);
+    border: 1px solid #9D9D9D;
+    width: 90px;
+    padding: 0;
+    margin: 5px;
+    @include background(linear-gradient(color-stops(#DBDBDB, #E2E2E2)));
+    @include box-shadow(inset 0 2px 2px #C0C0C0);
+
+    .x-thumb {
+        margin: 1px;
+    }
+}
+
+.x-toggle-on .x-thumb {
+    @include background(linear-gradient(color-stops(#4B9CCC, #0076B9)));
+    @include box-shadow(inset 0 1px 1px #6BADD5);
+    border-color: #7D7D7D;
+}

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

@@ -0,0 +1,325 @@
+//// Tab icons used with permission from Drew Wilson
+//// http://pictos.drewwilson.com/
+//// Pictos icons are (c) 2010 Drew Wilson
+
+.x-tab {
+    height: 45px;
+    background-color: transparent;
+    border: 0;
+    border-left: 1px solid darken($dark-color, 1);
+    color: #fff;
+
+    .x-button-icon:before {
+        line-height: 2em;
+    }
+
+    .x-button-icon {
+        display: block !important;
+    }
+
+    &:last-child {
+        border-right: 1px solid darken($dark-color, 1);
+    }
+
+    &:before {
+        @include absolute-position;
+        content: '';
+        height: 3px;
+        bottom: auto;
+        background: lighten($dark-color, 10);
+    }
+
+    .x-button-icon.x-hidden {
+        display: block !important;
+    }
+}
+
+.x-tabbar-light {
+    .x-tab {
+        border-color: darken($base-color, 13);
+        background-color: rgba(255,255,255,.1);
+
+        &:before {
+            background: lighten($base-color, 15);
+        }
+    }
+
+    .x-tab-active {
+        &:before {
+            background-color: #fff;
+        }
+    }
+}
+
+.x-tabbar-neutral,
+.x-tabbar-dark {
+    .x-tab {
+        border-color: darken($dark-color, 6);
+    }
+
+    .x-tab-active {
+        @include bb-gradient(lighten($dark-color, 5));
+
+        &:before {
+            background-color: $base-color;
+        }
+    }
+}
+
+.x-tabbar {
+    .x-tab {
+        @include st-box-orient(vertical);
+
+        .x-button-icon {
+            margin: 0 auto;
+        }
+
+        .x-button-label {
+            margin: 5px 0;
+            font-size: 9px;
+            line-height: 12px;
+        }
+        .x-badge {
+            margin: 3px;
+        }
+    }
+}
+
+///**
+// * @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 .8em;
+
+//    .x-button-label {
+//      font-size: $font-size-extra-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;
+//      display: block;
+//      margin: 0 auto;
+//      position: relative;
+//      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;
+//        }
+//      }
+//    }
+//  }
+//}
+