RubyGems - compass_ae_sencha - Versions diffs - 1.0.0 → 1.0.1 - Mend

@@ -0,0 +1,35 @@
+/**
+ * @class Ext.field.Radio
+ */
+@mixin radiomark($color: #000, $size: 20px) {
+    @include insertion($size, $size, ($size * -.5) + 24, auto);
+    right: ($size * -.5) + 24;
+    background-color: $color;
+    @include border-radius($size);
+}
+.x-field-radio .x-field-mask {
+    @include absolute-position;
+    &::after {
+        @include radiomark(darken($form-light, 5), 16px);
+    }
+    &::before {
+        @include radiomark($form-light, 26px);
+    }
+}
+.x-input-radio:checked + .x-field-mask::after {
+    background: $active-color;
+}
+.x-item-disabled {
+    &.x-field-radio {
+        .x-input-radio:checked + .x-field-mask::after {
+            background: mix($form-light, $active-color, 60);
+        }
+    }
+}

@@ -0,0 +1,23 @@
+/**
+ * @class Ext.field.Search
+ */
+.x-field-search {
+    .x-field-input {
+        position: relative;
+        @include inline-icon('search');
+        &:before {
+            color: #ccc;
+            top: .3em;
+            left: .5em;
+            font-size: 1.1em;
+            right: auto;
+        }
+        .x-form-field {
+            margin-left: 1.35em;
+        }
+    }
+}

@@ -0,0 +1,69 @@
+/**
+ * @class Ext.field.Select
+ */
+@mixin selectmark($color: #000){
+    @extend .x-selectmark-base;
+    background-color: $color;
+}
+.x-webkit .x-selectmark-base {
+    @include insertion(1em, 1em, 50%, auto);
+    right: ($form-spacing + .1em);
+    -webkit-mask-size: 1em;
+    -webkit-mask-image: theme_image('default', "pictos/arrow_down.png");
+    margin-top: -.5em;
+}
+// Create the dropdown arrow
+// for select fields
+.x-field-select {
+    position: relative;
+    z-index: 1;
+    .x-component-outer {
+        &:after {
+            z-index: 2;
+            @include selectmark($form-light);
+        }
+        &:before,
+        &:after {
+            pointer-events: none;
+            position: absolute;
+            display: block;
+        }
+        &:before {
+            z-index: 1;
+            @include insertion(4em,auto,0,auto);
+            right: 0;
+            bottom: 0;
+            @if $include-border-radius {
+                @include border-right-radius($form-fieldset-radius);
+            }
+            @if $include-highlights {
+                @include background-image(linear-gradient(left, color-stops(rgba(255,255,255,0), white .5)));
+            }
+        }
+    }
+}
+// Overlay
+.x-select-overlay {
+    .x-list-item-label {
+        height: 2.6em;
+    }
+    .x-item-selected {
+        .x-list-label {
+            margin-right: 2.6em;
+        }
+        &.x-list-item::after {
+            @include checkmark($form-light);
+        }
+    }
+}

@@ -0,0 +1,10 @@
+/**
+ * @class Ext.field.Slider
+ */
+.x-slider-field,
+.x-toggle-field {
+    .x-component-outer {
+        padding: $form-spacing;
+    }
+}

@@ -0,0 +1,57 @@
+/**
+ * @class Ext.field.Spinner
+ */
+.x-spinner {
+    .x-field-input {
+        .x-input-el {
+            -webkit-text-fill-color: #000;
+        }
+    }
+    &.x-item-disabled {
+        .x-input-el {
+            -webkit-text-fill-color: #B3B3B3;
+        }
+        .x-spinner-button {
+            @include toolbar-button(lighten($form-light, 10), matte);
+            color: #aaa !important;
+        }
+    }
+    .x-spinner-button {
+        margin-top: .25em;
+        margin-bottom: .25em;
+        width: 2em;
+        padding: .23em 0 .27em;
+        font-weight: bold;
+        text-align: center;
+        border: 1px solid $form-light !important;
+        @include border-radius(1em);
+        @include toolbar-button(lighten($form-light, 5), matte);
+    }
+    .x-spinner-button-down {
+        margin-left: .25em;
+    }
+    .x-spinner-button-up {
+        margin-right: .25em;
+    }
+    &.x-field-grouped-buttons {
+        .x-spinner-button-down {
+            margin-right: .5em;
+        }
+    }
+}
+.x-android {
+    .x-spinner-button {
+        padding: .40em 0 .11em !important;
+    }
+}
+.x-ie .x-spinner .x-field-input .x-input-el:disabled {
+  color: #000;
+}

@@ -0,0 +1,8 @@
+/**
+ * @class Ext.field.TextArea
+ */
+.x-field-textarea textarea {
+    min-height: $form-textarea-height;
+    padding-top: .5em;
+}

@@ -0,0 +1,101 @@
+/**
+ * @class Ext.form.FieldSet
+ */
+.x-form-fieldset {
+    margin: .5em .5em 1.5em;
+    .x-form-label {
+        border-top: 1px solid lighten($form-light, 20%);
+    }
+    .x-form-fieldset-inner {
+        border: 1px solid $form-light;
+        background: #fff;
+        padding: 0;
+        @if $include-border-radius {
+            @include border-radius($form-fieldset-radius);
+        }
+    }
+    //Ext.field.Field
+    .x-field {
+        border-bottom: 1px solid $form-light;
+        background: transparent;
+        &:first-child {
+            @if $include-border-radius {
+              @include border-top-radius($form-fieldset-radius);
+            }
+        }
+        &:last-child {
+            border-bottom: 0;
+            @if $include-border-radius {
+              @include border-bottom-radius($form-fieldset-radius);
+            }
+        }
+    }
+}
+.x-form-fieldset-title {
+    @include label();
+    margin: 1em ( $form-spacing + .1em ) .3em;
+    color: $form-dark;
+}
+.x-form-fieldset-instructions {
+    @include label();
+    color: lighten($form-dark, 30%);
+    margin: 1em ( $form-spacing + .1em ) .3em;
+    font-size: .8em;
+}
+@if $include-border-radius {
+    .x-label-align-left {
+        &:first-child {
+            .x-form-label {
+                @include border-top-left-radius($form-fieldset-radius);
+            }
+        }
+        &:last-child {
+            .x-form-label {
+                @include border-bottom-left-radius($form-fieldset-radius);
+            }
+        }
+    }
+    .x-label-align-right {
+        &:first-child {
+            .x-form-label {
+              @include border-top-right-radius($form-fieldset-radius);
+            }
+        }
+        &:last-child {
+            border-bottom: 0;
+            .x-form-label {
+                @include border-bottom-right-radius($form-fieldset-radius);
+            }
+        }
+    }
+    .x-label-align-top {
+        &:first-child {
+            .x-form-label {
+                @include border-top-radius($form-fieldset-radius);
+            }
+        }
+    }
+    .x-label-align-bottom {
+        &:last-child {
+            .x-form-label {
+                @include border-bottom-radius($form-fieldset-radius);
+            }
+        }
+    }
+}

@@ -0,0 +1,26 @@
+/**
+ * @class Ext.form.Panel
+ */
+.x-form {
+    .x-scroll-container {
+        background-color: $form-bg-color;
+    }
+}
+// Label
+@mixin label {
+    text-shadow: #fff 0 1px 1px;
+    color: $form-dark;
+}
+.x-form-label {
+    @include label();
+    @include bevel-text('light');
+    padding: $form-spacing;
+    background-color: $form-label-background-color;
+    span {
+        font-size: .8em;
+    }
+}

@@ -0,0 +1,73 @@
+/**
+ * @class Ext.picker.Picker
+ */
+.x-picker .x-picker-inner {
+    background-color: #fff;
+    overflow: hidden;
+    margin: $sheet-padding;
+    @if $include-border-radius {
+        @include border-radius($picker-sheet-radius);
+    }
+    @include background-clip(padding-box);
+    @if $include-picker-highlights {
+        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(30%,#ffffff), color-stop(70%,#ffffff), color-stop(100%,#bbbbbb));
+        background: -webkit-linear-gradient(top,  #bbbbbb 0%,#ffffff 30%,#ffffff 70%,#bbbbbb 100%);
+    }
+}
+.x-picker-slot .x-scroll-view {
+    @if $include-highlights {
+        @include box-shadow(rgba(#000,.4) -1px 0 1px);
+    }
+    &:first-child {
+        @include box-shadow(none);
+    }
+}
+.x-picker-bar {
+    border-top: .12em solid $picker-active-border-color;
+    border-bottom: .12em solid $picker-active-border-color;
+    height: $picker-row-height;
+    @include background-gradient(hsla(hue($active-color), 90, 50, .3), $picker-bar-gradient);
+    @if $include-highlights {
+        @include box-shadow(rgba(#000,0.2) 0 .2em .2em);
+    }
+}
+.x-use-titles {
+    .x-picker-bar {
+        margin-top: 1.5em;
+    }
+}
+.x-picker-slot-title {
+    height: 1.5em;
+    border-top: 1px solid $picker-title-bg-color;
+    border-bottom: 1px solid darken($picker-title-bg-color, 20%);
+    padding: 0.2em 1.02em;
+    @include box-shadow(rgba(0, 0, 0, 0.3) 0px .1em .3em);
+    @include background-gradient($picker-title-bg-color, $picker-title-bg-gradient);
+    > div {
+        font-size: 0.8em;
+        color: $picker-title-color;
+        @if $include-picker-highlights {
+            @include bevel-text('light');
+        }
+    }
+}
+.x-picker-slot {
+    .x-dataview-item {
+        height: $picker-row-height;
+        line-height: $picker-row-height;
+        font-weight: bold;
+        padding: 0 10px;
+    }
+}

@@ -0,0 +1,18 @@
+/**
+ * @class Ext.plugin.ListPaging
+ */
+.x-list-paging {
+    padding: 1em 0;
+    .x-list-paging-msg {
+        color: $active-color;
+        @if $include-border-radius {
+            @include border-radius(6px);
+        }
+    }
+    &.x-loading {
+        padding: 0.5em;
+    }
+}

@@ -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;
+}

compass_ae_sencha 1.0.0 → 1.0.1