compass_ae_sencha 1.0.0 → 1.0.1

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/default/widgets/_tabs.scss

@@ -1,312 +0,0 @@
-// Tab icons used with permission from Drew Wilson
-// http://pictos.drewwilson.com/
-// Pictos icons are (c) 2010 Drew Wilson
-
-@import '../global';
-
-/**
- * @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;
-
-// Private
-
-$tabs-top-height: $global-row-height - .8em;
-
-$tabs-top-icon-size: $tabs-top-height - .6em;
-
-/**
- * Includes default tab styles.
- *
- * @member Ext.tab.Bar
- */
-@mixin sencha-tabs {
-  @if $include-top-tabs {
-    @include sencha-top-tabs;
-  }
-  @if $include-bottom-tabs {
-    @include sencha-bottom-tabs;
-  }
-
-  @if $include-tabbar-uis {
-    @include sencha-tabbar-ui('light', $tabs-light, $tabs-bar-gradient, $tabs-light-active);
-    @include sencha-tabbar-ui('dark', $tabs-dark, $tabs-bar-gradient, $tabs-dark-active-color);
-    @include sencha-tabbar-ui('neutral', $neutral-color, $tabs-bar-gradient, darken($neutral-color, 40));
-  }
-
-  // Rules for all tabs
-  .x-tab.x-item-disabled span.x-button-label, .x-tab.x-item-disabled .x-button-icon {
-    @include opacity(.5);
-  }
-  .x-tab.x-draggable {
-    @include opacity(.7);
-  }
-
-  .x-tab {
-    z-index: 1;
-    -webkit-user-select: none;
-    overflow: visible !important;
-
-    .x-button-label {
-      overflow: visible !important;
-    }
-  }
-}
-
-
-@mixin sencha-top-tabs {
-  .x-tabbar.x-docked-top {
-    border-bottom-width: .1em;
-    border-bottom-style: solid;
-    height: $global-row-height;
-    padding: 0 .8em;
-
-    .x-tab {
-      position: relative;
-      padding: (($tabs-top-height - 1em) / 2) .8em;
-      height: $tabs-top-height;
-      min-width : 3.3em;
-      @if $include-border-radius { @include border-radius($tabs-top-height / 2); }
-
-      .x-button-label {
-        font-size              : .8em;
-        line-height            : 1.2em;
-        text-rendering         : optimizeLegibility;
-        -webkit-font-smoothing : antialiased;
-      }
-
-      .x-badge {
-        font-size : .6em !important;
-        top       : -0.5em;
-      }
-
-      &.x-tab-icon {
-        padding : (($tabs-top-height - 1em) / 2) - .1em .8em;
-
-        .x-button-icon {
-          -webkit-mask-size : $tabs-top-icon-size;
-          width             : $tabs-top-icon-size;
-          height            : $tabs-top-icon-size;
-          display           : inline-block;
-          margin            : 0 auto;
-          position          : relative;
-        }
-
-        .x-button-label {
-          margin      : 0;
-          margin-left : .3em;
-          padding     : .1em 0 .2em 0;
-          display     : inline-block;
-          position    : relative;
-          top         : -.4em;
-        }
-      }
-    }
-  }
-}
-
-
-@mixin sencha-bottom-tabs {
-  .x-tabbar.x-docked-bottom {
-    border-top-width: .1em;
-    border-top-style: solid;
-    height: 3em;
-    padding: 0;
-
-    .x-tab {
-      @if $include-border-radius { @include border-radius($tabs-bottom-radius); }
-      min-width: 3.3em;
-      position: relative;
-      padding-top: .2em;
-      @include box-orient(vertical);
-
-      .x-button-icon {
-        -webkit-mask-size: $tabs-bottom-icon-size;
-        width: $tabs-bottom-icon-size;
-        height: $tabs-bottom-icon-size;
-        display: block;
-        margin: 0 auto;
-        position: relative;
-      }
-
-      .x-button-label {
-        margin: 0;
-        padding: .1em 0 .2em 0;
-        font-size: 9px;
-        line-height: 12px;
-        text-rendering: optimizeLegibility;
-        -webkit-font-smoothing: antialiased;
-      }
-    }
-  }
-
-  @if $include-default-icons {
-    @include pictos-iconmask('bookmarks');
-    @include pictos-iconmask('download');
-    @include pictos-iconmask('favorites');
-    @include pictos-iconmask('info');
-    @include pictos-iconmask('more');
-    @include pictos-iconmask('time');
-    @include pictos-iconmask('user');
-    @include pictos-iconmask('team');
-  }
-}
-
-/**
- * Creates a theme UI for tabbar/tab components.
- *
- *     // SCSS
- *     @include sencha-button-ui('pink', #333, 'matte', #AE537A);
- *
- *     // JS
- *     var tabs = new Ext.tab.Panel({
- *        tabBar: {
- *          ui: 'pink',
- *          dock: 'bottom',
- *          layout: { pack: 'center' }
- *        },
- *        ...
- *     });
- *
- * @param {string} $ui-label The name of the UI being created.
- *   Can not included spaces or special punctuation (used in class names)
- * @param {color} $bar-color Base color for the tab bar.
- * @param {string} $bar-gradient Background gradient style for the tab bar.
- * @param {color} $tab-active-color Background-color for active tab icons.
- *
- * @member Ext.tab.Bar
- */
-@mixin sencha-tabbar-ui($ui-label, $bar-color, $bar-gradient, $tab-active-color) {
-  .x-tabbar-#{$ui-label} {
-    @include background-gradient($bar-color, $bar-gradient);
-    border-top-color: darken($bar-color, 5%);
-    border-bottom-color: darken($bar-color, 15%);
-
-    .x-tab {
-      @include color-by-background($bar-color, 40%);
-      border-bottom: 1px solid transparent;
-    }
-
-    .x-tab-active {
-      @include color-by-background($bar-color, 90%);
-      border-bottom-color: lighten($bar-color, 3%);
-    }
-
-    .x-tab-pressed {
-      @include color-by-background($bar-color, 100%);
-    }
-  }
-
-  @if $include-bottom-tabs {
-    .x-tabbar-#{$ui-label}.x-docked-bottom {
-      .x-tab {
-        @include bevel-by-background($bar-color);
-        .x-button-icon {
-          @include mask-by-background($bar-color, 20%, $tabs-bar-gradient);
-        }
-      }
-
-      .x-tab-active {
-        @include background-gradient(darken($bar-color, 5%), recessed);
-        @include bevel-by-background(lighten($bar-color, 10%));
-
-        @if ($include-tab-highlights) {
-          @include box-shadow(darken($bar-color, 10%) 0 0 .25em inset);
-        }
-
-        .x-button-icon {
-          @include background-gradient($tab-active-color, $tabs-bottom-active-gradient);
-        }
-      }
-    }
-  }
-
-  @if $include-top-tabs {
-    .x-tabbar-#{$ui-label}.x-docked-top {
-      .x-tab-active {
-        @include background-gradient(darken($bar-color, 5%), 'recessed');
-        @include color-by-background(darken($bar-color, 5%));
-      }
-      .x-tab {
-        .x-button-icon {
-          @include mask-by-background($bar-color, 20%, $tabs-bar-gradient);
-        }
-      }
-    }
-  }
-}

data/public/stylesheets/sencha_touch/resources/themes/stylesheets/sencha-touch/default/widgets/_toolbar-forms.scss

@@ -1,182 +0,0 @@
-@import '../global';
-
-/**
- * @class Ext.field.Field
- */
-
-/**
- * @var {color} $toolbar-input-bg
- * Background-color for toolbar form fields.
- */
-$toolbar-input-bg: #fff !default;
-
-/**
- * @var {color} $toolbar-input-color
- * Text color for toolbar form fields.
- */
-$toolbar-input-color: #000 !default;
-
-/**
- * @var {measurement} $toolbar-input-height
- * Text color for toolbar form fields.
- */
-$toolbar-input-height: 1.6em !default;
-
-/**
- * @var {color} $toolbar-input-border-color
- * Border color for toolbar form fields.
- */
-$toolbar-input-border-color: rgba(#000, .5) !default;
-
-// Private
-$toolbar-select-overflow-mask-width: 3em;
-$toolbar-search-left-padding: 1.67em;
-
-/**
- * Includes default toolbar form field styles.
- *
- * @member Ext.tab.Bar
- */
-@mixin sencha-toolbar-forms {
-  //so disabled fields are still dark
-  .x-spinner .x-input-el,
-  .x-field-select .x-input-el {
-    -webkit-text-fill-color: #000;
-    -webkit-opacity: 1;
-  }
-
-  .x-spinner.x-item-disabled .x-input-el,
-  .x-field-select.x-item-disabled .x-input-el {
-    -webkit-text-fill-color: currentcolor;
-  }
-
-  //and inside toolbars
-  .x-toolbar .x-field-select .x-input-el {
-    -webkit-text-fill-color: #fff;
-  }
-
-  .x-toolbar .x-field-select.x-item-disabled .x-input-el {
-    -webkit-text-fill-color: rgba(255,255,255,.6);
-  }
-
-  .x-toolbar {
-    .x-form-field-container {
-      @if $include-border-radius { padding: 0 .3em; }
-    }
-
-    .x-field {
-      width: 13em;
-      margin: .5em;
-      min-height: 0;
-      border-bottom: 0;
-      background: transparent;
-
-      .x-clear-icon {
-        background-size: 50% 50%;
-        right: -0.8em;
-        margin-top: -1.06em;
-      }
-    }
-
-    .x-field-input {
-      padding-right: 1.6em !important;
-    }
-
-    .x-field-textarea,
-    .x-field-text,
-    .x-field-number,
-    .x-field-search {
-      .x-component-outer {
-        @if $include-border-radius { @include border-radius(.3em); }
-        background-color: $toolbar-input-bg;
-
-        @if $include-highlights {
-          @include box-shadow($toolbar-input-border-color 0 .1em 0 inset, $toolbar-input-border-color 0 -.1em 0 inset, $toolbar-input-border-color .1em 0 0 inset, $toolbar-input-border-color -.1em 0 0 inset, rgba(#000, .5) 0 .15em .4em inset);
-        }
-      }
-    }
-
-    .x-form-label {
-      background: transparent;
-      border: 0;
-      padding: 0;
-      line-height: 1.4em;
-    }
-
-    .x-form-field {
-      height: $toolbar-input-height;
-      color: lighten($toolbar-input-color, 43%);
-      background: transparent;
-      min-height: 0;
-      -webkit-appearance: none;
-      padding: 0em .3em;
-      margin: 0;
-
-      &:focus {
-        color: $toolbar-input-color;
-      }
-    }
-
-    .x-field-select,
-    .x-field-search {
-      .x-component-outer {
-        @if $include-border-radius { @include border-radius($toolbar-input-height/2); }
-      }
-    }
-
-    .x-field-search {
-      .x-field-input {
-        background-position: .5em 50%;
-      }
-    }
-
-    .x-field-select {
-      -webkit-box-shadow: none;
-
-      .x-form-field {
-        height: 1.4em;
-      }
-    }
-
-    .x-field-select {
-      background: transparent;
-
-      .x-component-outer {
-        &:after {
-          right: .4em;
-        }
-      }
-
-      &.x-item-disabled {
-        .x-component-outer:after {
-          opacity: .6;
-        }
-      }
-
-      // Background is set in _toolbar file
-      .x-component-outer:before {
-        width: $toolbar-select-overflow-mask-width;
-        border-left: none;
-        @if $include-border-radius { @include border-right-radius($toolbar-input-height/2); }
-        @if $include-highlights {
-            -webkit-mask: theme_image($theme-name, "select_mask.png");
-            -webkit-mask-position: right top;
-            -webkit-mask-repeat: repeat-y;
-            -webkit-mask-size: $toolbar-select-overflow-mask-width .05em;
-        }
-        @else {
-            width: 0.5em !important;
-        }
-      }
-
-      .x-input-text {
-        color: #fff;
-      }
-    }
-  }
-
-  .x-android .x-field-search .x-field-input {
-    padding-left: .2em !important;
-    padding-right: 2.2em !important;
-  }
-}