// 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; /** * 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 { -webkit-user-select: none; overflow: visible !important; .x-button-label { overflow: visible !important; } } .x-tabbar > * { z-index: 1; } } @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; @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; } } } @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; .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%); } .x-tab-active { @include color-by-background($bar-color, 90%); border-bottom: 1px solid 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%)); } } } }