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

@@ -0,0 +1,11 @@
+/**
+ * @class Ext.SgementedButton
+ */
+.x-segmentedbutton .x-button {
+    margin: 0;
+    &:not(.x-first) {
+        border-left: 0;
+    }
+}

@@ -0,0 +1,24 @@
+/**
+ * @class Ext.Sheet
+ */
+.x-sheet,
+.x-sheet-action {
+	padding: $sheet-padding;
+	background-color: $sheet-bg-color;
+}
+.x-sheet-inner,
+.x-sheet-action-inner {
+	> .x-button {
+		margin-bottom: $sheet-button-spacing;
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+.x-sheet-action {
+	padding: 1.2em;
+}

@@ -0,0 +1,38 @@
+/**
+ * @class Ext.Toolbar
+ */
+.x-toolbar {
+    padding: 0 $toolbar-spacing;
+    background-color: transparent;
+    border-width: 0 !important;
+    min-height: 4em;
+    &.x-docked-left {
+        width: 7em;
+        padding: $toolbar-spacing;
+    }
+    &.x-docked-right {
+        width: 7em;
+        padding: $toolbar-spacing;
+    }
+    &.x-docked-bottom {
+        background-color: $background-color;
+    }
+}
+.x-toolbar-inner {
+    height: 100% !important;
+}
+.x-title {
+    line-height: 44px;
+    font-size: $font-size-extra-large;
+    color: $foreground-color;
+    text-align: left;
+    margin: 0 0.3em;
+    padding: 0 5px;
+    font-weight: normal;
+}

@@ -0,0 +1,21 @@
+@import 'Class';
+@import 'Button';
+@import 'SegmentedButton';
+@import 'MessageBox';
+@import 'Toolbar';
+@import 'Sheet';
+@import 'Panel';
+@import 'carousel/Carousel';
+@import 'dataview/List';
+@import 'field/Field';
+@import 'field/Checkbox';
+@import 'field/Radio';
+@import 'field/Spinner';
+@import 'field/TextArea';
+@import 'form/Panel';
+@import 'form/FieldSet';
+@import 'picker/Picker';
+@import 'slider/Slider';
+@import 'slider/Toggle';
+@import 'tab/Panel';
+@import 'plugin/PullRefresh';

@@ -0,0 +1,19 @@
+/**
+ * @class Ext.carousel.Carousel
+ */
+.x-carousel-indicator span {
+	width: $carousel-indicator-size;
+	height: $carousel-indicator-size;
+	margin: $carousel-indicator-spacing;
+}
+.x-carousel-indicator-light span,
+.x-carousel-indicator-dark span {
+	background-color: $inactive-color;
+	&.x-carousel-indicator-active {
+		background-color: $base-color;
+	}
+}

@@ -0,0 +1,69 @@
+/**
+ * @class Ext.dataview.List
+ */
+.x-list {
+    .x-list-item {
+        line-height: 42px;
+        color: color-by-background($background-color);
+        font-size: $font-size-medium;
+        .x-dock-horizontal {
+            border-top: 0;
+        }
+        .x-list-item-body,
+        &.x-list-item-tpl .x-innerhtml {
+            padding: 1px 5px;
+        }
+        &.x-item-selected {
+            .x-dock-horizontal,
+            &.x-list-item-tpl .x-innerhtml {
+                background-color: $base-color;
+                color: color-by-background($base-color);
+            }
+        }
+    }
+    .x-list-header {
+        background-color: $background-color;
+        border: 0;
+        padding: 0.1em 1.02em 0.2em 0.65em;
+        padding-left: 5px !important;
+        font-weight: normal;
+        font-size: 17pt;
+        .x-innerhtml {
+          padding: .5em 0 0 .2em;
+          min-width: 44px;
+          min-height: 44px;
+          background-color: $base-color;
+          color: $foreground-color;
+          display: inline-block;
+          width: auto;
+        }
+    }
+    // Disclosure
+    .x-list-disclosure {
+        border: 0;
+        background: $base-color;
+        width: 29px;
+        height: 29px;
+        line-height: 26px;
+        text-align: center;
+        margin: 7px 6px 0 0;
+        &:before {
+            content: '>';
+            color: color-by-background($base-color);
+        }
+    }
+    .x-item-selected .x-list-disclosure {
+        &:before {
+            color: $base-color;
+        }
+    }
+}

@@ -0,0 +1,55 @@
+/**
+ * @class Ext.field.Checkbox
+ */
+.x-field-checkbox .x-field-mask,
+.x-field-radio .x-field-mask {
+    @include absolute-position;
+    &:before {
+        position: absolute;
+        content: '';
+        top: 0;
+        right: 0;
+        width: 32px;
+        height: 32px;
+        background-color: $field-background-color;
+        border: 2px solid $field-border-color;
+    }
+}
+.x-input-checkbox,
+.x-input-radio {
+    visibility: hidden;
+}
+.x-input-checkbox:checked ~ .x-field-mask:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 32px;
+    text-align: center;
+    font-family: 'Pictos';
+    font-size: 26px;
+    line-height: 36px;
+    content: '3';
+    color: #000;
+}
+.x-item-disabled {
+    &.x-field-checkbox .x-field-mask,
+    &.x-field-radio .x-field-mask {
+        &:before {
+            background-color: $field-disabled-background-color;
+            border-color: $field-disabled-border-color;
+        }
+    }
+    .x-input-checkbox:checked ~ .x-field-mask:after {
+        color: $field-disabled-color;
+    }
+    .x-input-radio:checked ~ .x-field-mask:after {
+        background-color: $field-disabled-color;
+    }
+}

@@ -0,0 +1,71 @@
+/**
+ * @class Ext.field.Field
+ */
+.x-field {
+    padding: 1em .5em;
+    .x-field-input {
+        position: relative;
+        min-width: 3.7em;
+    }
+    .x-field-input,
+    .x-input-el {
+        width: 100%;
+    }
+}
+.x-field-text,
+.x-field-textarea,
+.x-field-number,
+.x-field-search,
+.x-spinner,
+.x-field-select {
+    .x-clear-icon,
+    .x-component-outer .x-input-el {
+        background-color: $field-background-color;
+        border: 2px solid $field-border-color;
+    }
+    &.x-field-focused {
+        .x-clear-icon,
+        .x-component-outer .x-input-el {
+            background-color: $field-focus-background-color;
+            border: 2px solid $field-focus-border-color;
+        }
+    }
+    &.x-item-disabled {
+        .x-clear-icon,
+        .x-component-outer .x-input-el {
+            background-color: $field-disabled-background-color;
+            border-color: $field-disabled-border-color;
+        }
+    }
+}
+.x-clear-icon {
+    border-left: 0 !important;
+}
+.x-input-el {
+    padding: .2em;
+    min-height: 30px;
+    border-width: 0;
+    background: transparent;
+    -webkit-appearance: none !important;
+    -ms-appearance: none !important;
+    appearance: none !important;
+}
+.x-item-disabled {
+    .x-input-el {
+        color: $field-disabled-color;
+    }
+}
+.x-input-el:-ms-input-placeholder { color: $field-placeholder-color; }
+.x-input-el::-webkit-input-placeholder { color: $field-placeholder-color; }
+.x-item-disabled .x-input-el::-webkit-input-placeholder { color: $field-disabled-placeholder-color; }
+.x-item-disabled .x-input-el:-ms-input-placeholder { color: $field-disabled-placeholder-color; }

@@ -0,0 +1,20 @@
+/**
+ * @class Ext.field.Radio
+ */
+.x-field-radio .x-field-mask {
+    &:before {
+        @include border-radius(32px);
+    }
+}
+.x-input-radio:checked ~ .x-field-mask:after {
+    position: absolute;
+    content: '';
+    top: 8px;
+    right: 8px;
+    width: 16px;
+    height: 16px;
+    background: #000;
+    @include border-radius(22px);
+}

@@ -0,0 +1,63 @@
+/**
+ * @class Ext.field.Spinner
+ */
+.x-spinner {
+    &.x-item-disabled {
+        .x-field-input:before,
+        .x-spinner-button {
+            color: $field-disabled-color !important;
+            border-color: $field-disabled-border-color !important;
+            background-color: $field-disabled-background-color !important;
+        }
+    }
+    .x-spinner-button {
+        position: relative;
+        font-size: 0px;
+        text-indent: -1000px;
+        background: transparent;
+        border: 2px solid $field-border-color !important;
+        width: 30px;
+        height: 30px;
+        margin-left: 5px;
+        &:before {
+            @include absolute-position;
+            text-indent: 0;
+            font-family: 'Pictos';
+            font-size: 26px;
+            line-height: 29px;
+            content: '&';
+            color: $field-border-color;
+        }
+    }
+    .x-spinner-button-down:before {
+        content: '_';
+    }
+    .x-button-pressed {
+        background-color: $field-background-color;
+        &:before {
+            color: $field-color;
+        }
+    }
+    &.x-field-grouped-buttons {
+        .x-input-el {
+            text-align: left;
+        }
+    }
+}
+.x-ie {
+    .x-spinner-button:before {
+        line-height: 27px !important;
+    }
+    .x-spinner .x-field-input .x-input-el:disabled {
+        color: $field-color;
+    }
+}

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

@@ -0,0 +1,25 @@
+/**
+ * @class Ext.form.FieldSet
+ */
+.x-form-fieldset {
+    margin: .75em 0 .75em;
+    .x-form-fieldset-inner {
+        border: 0;
+    }
+}
+.x-form-fieldset-title {
+    color: $foreground-color;
+    font-size: $font-size-medium-large;
+    font-weight: normal;
+    margin: 10px 6px;
+}
+.x-form-fieldset-instructions {
+    color: #666666;
+    font-size: .8em;
+    text-align: left;
+    margin: 0 10px;
+}

@@ -0,0 +1,53 @@
+/**
+ * @class Ext.form.Panel
+ */
+// Label
+.x-form-label {
+    color: $foreground-color;
+    padding: 0 10px 10px 0;
+    span {
+        font-size: $font-size-normal;
+        font-weight: normal;
+    }
+}
+// Clear icon
+.x-field-input {
+    .x-clear-icon {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        height: auto;
+        width: 32px;
+        &:before {
+            @include absolute-position;
+            color: #000;
+            font-size: 28px;
+            font-weight: bold;
+            text-align: center;
+            line-height: 22px;
+            content: '×';
+        }
+        &:hover {
+            background: #DEDEDE;
+        }
+        &.x-pressing {
+            background: #000;
+            &:before {
+                color: #fff;
+            }
+        }
+    }
+}
+.x-field-clearable {
+    .x-field-input {
+        padding-right: 0;
+    }
+}

compass_ae_sencha 1.0.0 → 1.0.1