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

@@ -0,0 +1,21 @@
+/**
+ * @class Ext.Toolbar
+ */
+/**
+ * @var {color} $toolbar-base-color
+ * The primary color variable from which toolbars derive their light and dark UIs.
+ */
+$toolbar-base-color: $base-color !default;
+/**
+ * @var {string} $toolbar-gradient
+ * Background gradient style for toolbars.
+ */
+$toolbar-gradient: $base-gradient !default;
+/**
+ * @var {boolean} $include-toolbar-uis
+ * Optionally disable separate toolbar UIs (light and dark).
+ */
+$include-toolbar-uis: $include-default-uis !default;

@@ -0,0 +1,19 @@
+/**
+ * @class Ext.carousel.Carousel
+ */
+/**
+ * @var {measurement} $carousel-indicator-size Size (width/height) of carousel indicator dots.
+ */
+$carousel-indicator-size: .5em !default;
+/**
+ * @var {measurement} $carousel-indicator-spacing
+ * Amount of space between carousel indicator dots.
+ */
+$carousel-indicator-spacing: .2em !default;
+/**
+ * @var {measurement} $carousel-track-size Size of the track the carousel indicator dots are in.
+ */
+$carousel-track-size: 1.5em !default;

@@ -0,0 +1,21 @@
+/**
+ * @class Ext.dataview.IndexBar
+ */
+/**
+ * @var {measurement} $index-bar-width
+ * Width of the index bar.
+ */
+$index-bar-width: 1.1em !default;
+/**
+ * @var {color} $index-bar-bg-color
+ * Background-color of the index bar.
+ */
+$index-bar-bg-color: hsla(hue($base-color), 10%, 60%, .8) !default;
+/**
+ * @var {color} $index-bar-color
+ * Text color of the index bar.
+ */
+$index-bar-color: darken(desaturate($base-color, 5%), 15%) !default;

@@ -0,0 +1,82 @@
+/**
+ * @class Ext.dataview.List
+ */
+/**
+ * @var {color} $list-color
+ * Text color for list rows.
+ */
+$list-color: #000 !default;
+/**
+ * @var {color} $list-bg-color
+ * Background-color for list rows.
+ */
+$list-bg-color: #f7f7f7 !default;
+/**
+ * @var {color} $include-list-highlights
+ * Optionally disable all list gradients, text-shadows, and box-shadows. Useful for CSS debugging,
+ * non-performant browsers, or minimalist designs.
+ */
+$include-list-highlights: $include-highlights !default;
+/**
+ * @var {boolean} $list-zebrastripe
+ * Optionally zebra-stripe the list (alternating background colors).
+ */
+$list-zebrastripe: false !default;
+/**
+ * @var {color} $list-pressed-color
+ * Background-color for pressed list rows.
+ */
+$list-pressed-color: lighten($active-color, 50%) !default;
+/**
+ * @var {color} $list-active-color
+ * Background-color for selected list rows.
+ */
+$list-active-color: $active-color !default;
+/**
+ * @var {string} $list-active-gradient
+ * Gradient style for selected list rows.
+ */
+$list-active-gradient: $base-gradient !default;
+/**
+ * @var {color} $list-header-bg-color
+ * Background-color for list header rows (in grouped lists).
+ */
+$list-header-bg-color: lighten(saturate($base-color, 10%), 20%) !default;
+/**
+ * @var {string} $list-header-gradient
+ * Gradient style for list header rows (in grouped lists).
+ */
+$list-header-gradient: $base-gradient !default;
+/**
+ * @var {measurement} $list-disclosure-size
+ * Default size (width/height) for disclosure icons.
+ */
+$list-disclosure-size: 32px;
+/**
+ * @var {measurement} $list-disclosure-round-size
+ * Default size (width/height) for disclosure icons in a list with a `round` ui.
+ */
+$list-disclosure-round-size: 1.5em;
+/**
+ * @var {measurement} $list-round-padding
+ * Default padding for lists with a `round` ui.
+ */
+$list-round-padding: 13px !default;
+/**
+ * @var {measurement} $list-rounded-radius
+ * Default border-radius for items in rounded list
+ */
+$list-rounded-radius: .4em !default;

@@ -0,0 +1,15 @@
+/**
+ * @class Ext.field.Field
+ */
+/**
+ * @var {color} $form-field-bg-color
+ * Default background-color for form fields.
+ */
+$form-field-bg-color: #fff !default;
+/**
+ * @var {measurement} $form-field-height
+ * Default height for form fields.
+ */
+$form-field-height: 2.5em !default;

@@ -0,0 +1,15 @@
+/**
+ * @class Ext.field.Slider
+ */
+/**
+ * @var {measurement} $form-thumb-size
+ * Default size of "thumbs" for form sliders/toggles.
+ */
+$form-thumb-size: 2.2em !default;
+/**
+ * @var {measurement} $form-slider-size
+ * Height of the slider "track."
+ */
+$form-slider-size: .8em !default;

@@ -0,0 +1,9 @@
+/**
+ * @class Ext.field.Spinner
+ */
+/**
+ * @var {measurement} $form-spinner-button-width
+ * The width of the buttons on the spinner field component.
+ */
+$form-spinner-button-width: 3em !default;

@@ -0,0 +1,9 @@
+/**
+ * @class Ext.field.TextArea
+ */
+/**
+ * @var {measurement} $form-textarea-height
+ * Default height for form textareas.
+ */
+$form-textarea-height: 6em !default;

@@ -0,0 +1,9 @@
+/**
+ * @class Ext.field.Toggle
+ */
+/**
+ * @var {measurement} $form-toggle-size
+ * Thumb size minus padding for inset thumbs like in a Toggle element.
+ */
+$form-toggle-size: $form-thumb-size - .35em;

@@ -0,0 +1,9 @@
+/**
+ * @class Ext.form.FieldSet
+ */
+/**
+ * @var {measurement} $form-fieldset-radius
+ * Default border-radius for form fieldsets.
+ */
+$form-fieldset-radius: .4em !default;

@@ -0,0 +1,39 @@
+/**
+ * @class Ext.form.Panel
+ */
+/**
+ * @var {color} $form-bg-color
+ * Default background-color for forms.
+ */
+$form-bg-color: #eee !default;
+/**
+ * @var {color} $form-light
+ * Light color for form fields, mostly used on field borders.
+ */
+$form-light: #ddd !default;
+/**
+ * @var {color} $form-dark
+ * Dark color for form fields, mostly used on labels/text.
+ */
+$form-dark: #333 !default;
+/**
+ * @var {measurement} $form-spacing
+ * Default spacing for form fields, used for padding, etc.
+ */
+$form-spacing: .6em !default;
+/**
+ * @var {measurement} $form-label-width
+ * Default width for form labels.
+ */
+$form-label-width: 6em !default;
+/**
+ * @var {color} $form-label-background-color
+ * The default background color for labels
+ */
+$form-label-background-color: lighten($form-light, 10%);

@@ -0,0 +1,51 @@
+/**
+ * @class Ext.picker.Picker
+ */
+/**
+ * @var {measurement} $picker-row-height
+ * The height of each picker item
+ */
+$picker-row-height: 2.5em !default;
+/**
+ * @var {measurement} $picker-active-border-color
+ * The height of each picker item
+ */
+$picker-active-border-color: $active-color !default;
+/**
+ * @var {measurement} $picker-sheet-radius
+ * The border radius size for the picker sheet
+ */
+$picker-sheet-radius: .4em !default;
+/**
+ * @var {color} $picker-title-color
+ * The color for picker titles
+ */
+$picker-title-color: darken(desaturate($base-color, 10%), 25%) !default;
+/**
+ * @var {color} $picker-title-bg-color
+ * The background color for picker titles
+ */
+$picker-title-bg-color: lighten(saturate($base-color, 10%), 5%) !default;
+/**
+ * @var {string} $picker-title-bg-gradient
+ * The gradient used for backgrounds on picker titles.
+ */
+$picker-title-bg-gradient: $base-gradient !default;
+/**
+ * @var {string} $picker-bar-gradient
+ * The gradient used on the selected bar on pickers.
+ */
+$picker-bar-gradient: $base-gradient !default;
+/**
+ * @var {boolean} $include-picker-highlights
+ * True to include gradients, text shadows and box shadows on the picker.
+ */
+$include-picker-highlights: $include-highlights !default;

@@ -0,0 +1,79 @@
+/**
+ * @class Ext.tab.Bar
+ */
+/**
+ * @var {boolean} $include-tabbar-uis Optionally disable separate tabbar UIs (light and dark).
+ */
+$include-tabbar-uis: $include-default-uis !default;
+/**
+ * @var {boolean} $include-top-tabs
+ * Optionally exclude top tab styles by setting to false.
+ */
+$include-top-tabs: true !default;
+/**
+ * @var {boolean} $include-bottom-tabs
+ * Optionally exclude bottom tab styles by setting to false.
+ */
+$include-bottom-tabs: true !default;
+/**
+ * @var {color} $tabs-light
+ * Base color for "light" UI tabs.
+ */
+$tabs-light: desaturate($base-color, 10%) !default;
+/**
+ * @var {color} $tabs-light-active
+ * Active color for "light" UI tabs.
+ */
+$tabs-light-active: lighten(saturate($active-color, 20%), 20%) !default;
+/**
+ * @var {color} $tabs-dark
+ * Base color for "dark" UI tabs.
+ */
+$tabs-dark: darken($base-color, 20%) !default;
+/**
+ * @var {color} $tabs-dark-active
+ * Active color for "dark" UI tabs.
+ */
+$tabs-dark-active-color: saturate(lighten($active-color, 30%), 70%) !default;
+/**
+ * @var {string} $tabs-bar-gradient
+ * Background gradient style for tab bars.
+ */
+$tabs-bar-gradient: $base-gradient !default;
+/**
+ * @class Ext.tab.Tab
+ */
+/**
+ * @var {string} $tabs-bottom-radius
+ * Border-radius for bottom tabs.
+ */
+$tabs-bottom-radius: .25em !default;
+/**
+ * @var {string} $tabs-bottom-icon-size
+ * Icon size for bottom tabs
+ */
+$tabs-bottom-icon-size: 1.65em !default;
+/**
+ * @var {string} $tabs-bottom-active-gradient
+ * Background gradient style for active bottom tabs.
+ */
+$tabs-bottom-active-gradient: $base-gradient !default;
+/**
+ * @var {boolean} $include-tab-highlights
+ * Optionally disable all gradients, text-shadows, and box-shadows. Useful for CSS debugging,
+ * non-performant browsers, or minimalist designs.
+ */
+$include-tab-highlights: $include-highlights !default;

@@ -0,0 +1,128 @@
+$default-gradient: null;
+/**
+ * @class Global_CSS
+ */
+///**
+// * Includes a base64-encoded icon for use within tab bars and buttons (With the component parameter iconMask: true).
+// *
+// *     @include pictos-iconmask('attachment');
+// *
+// * @param {string} $name The name of the icon to be included. This is to match the name of the icon file (located at resources/themes/images/default/pictos) without its extention (.png).
+// */
+//@mixin pictos-iconmask($name) {
+//    .x-tab .x-button-icon.#{$name},
+//    .x-button .x-button-icon.x-icon-mask.#{$name} {
+//        @include icon($name);
+//    }
+//}
+//@mixin icon($name, $background-color: transparent, $size: 1.1em,$position: 50% 50%) {
+//  webkit-mask-image: theme_image('windows-phone/dark', "pictos/" + $name + ".png");
+//  background-image: theme_image('windows-phone/dark', "pictos/" + $name + ".png");
+//  background-color: $background-color;
+//  background-position: $position;
+//  background-repeat: no-repeat;
+//  background-size: $size;
+//}
+/**
+ * Includes the default styles for toolbar buttons, mostly used as a helper function.
+ *
+ * @param {color} $bg-color Base color to be used for the button.
+ */
+@mixin toolbar-button($bg-color) {
+  &,
+  .x-toolbar & {
+    border: 2px solid $foreground-color;
+    background-color: $bg-color;
+    &,
+    &.x-button-back:after,
+    &.x-button-forward:after {
+      background-color: $bg-color;
+    }
+    &.x-button-pressing,
+    &.x-button-pressed,
+    &.x-button-active {
+      &,
+      &:after {
+        color: $bg-color;
+        background-color: $foreground-color;
+      }
+    }
+  }
+}
+/**
+ * Creates a background gradient for masked elements, based on the lightness of their background.
+ *
+ * @param {color} $bg-color Background color of element.
+ * @param {percent} $percent Contrast of the new gradient to its background.
+ * @param {percent} $style Gradient style of the gradient.
+ * @see background-gradient
+ *
+ */
+@mixin mask-by-background($bg-color, $contrast: 100%, $style: $base-gradient) {
+  @if (lightness($bg-color) > 50) { @include background-gradient(darken($bg-color, $contrast), $style) }
+  @else { @include background-gradient(lighten($bg-color, $contrast), $style) }
+}
+@mixin readable-color($color, $contrast: 100) {
+  @if lightness(lighten($color, 100 - $contrast)) > 30 {
+      color: $color;
+      fill: $color;
+  } @else {
+      color: darken(lighten($color, 100 - $contrast), 30);
+      fill: darken(lighten($color, 100 - $contrast), 30);
+  }
+}
+/**
+* TextBlock styles
+*/
+@mixin phone-text-normal(){
+  font-family: $phone-font-family-normal;
+  font-size: $font-size-normal;
+  color: $foreground-color;
+}
+@mixin phone-text-title1(){
+  font-family: $phone-font-family-semilight;
+  font-size: $font-size-extra-large;
+  color: $foreground-color;
+}
+@mixin phone-text-subtle(){
+  font-family: $phone-font-family-normal;
+  font-size: $font-size-normal;
+  color: $phone-subtle-color;
+}
+@mixin phone-text-title2(){
+  font-family: $phone-font-family-semilight;
+  font-size: $phone-font-size-large;
+  color: $foreground-color;
+}
+@mixin phone-text-title3(){
+  font-family: $phone-font-family-semilight;
+  font-size: $font-size-medium;
+  color: $foreground-color;
+}
+@mixin phone-text-accent(){
+  font-family: $phone-font-family-semibold;
+  font-size: $font-size-normal;
+  color: $base-color;
+}
+@mixin fieldset-instructions() {
+  color: #666666;
+  font-size: .8em;
+  text-align: left;
+  margin: 0.7em 0 0.3em 0;
+}

	@@ -0,0 +1 @@
1	+ @import "src/all";

compass_ae_sencha 1.0.0 → 1.0.1