3.1.2 (Brainy Betty) a2dd934023431d1f11eafe6afa599c33a4c0dd73 o:Sass::Tree::RootNode :@has_childrenT:@children[)o:Sass::Tree::CommentNode ;[: @options{: @lines[: @loud0: @value"/* Tab icons used with permission from Drew Wilson * http://pictos.drewwilson.com/ * Pictos icons are (c) 2010 Drew Wilson */: @linei: @silentio:Sass::Tree::ImportNode ;[:@imported_filename"../global; @ ; i :@template0o; ;[; @ ; [; 0; ""/** * @class Ext.tab.Bar */; i ;0o; ;[; @ ; [; 0; "k/** * @var {boolean} $include-tabbar-uis Optionally disable separate tabbar UIs (light and dark). */; i;0o:Sass::Tree::VariableNode : @expro:Sass::Script::Variable ; {: @name"include-default-uis:@underscored_name"include_default_uis; i;[; @ ;"include-tabbar-uis: @guarded" !default; io; ;[; @ ; [; 0; "j/** * @var {boolean} $include-top-tabs * Optionally exclude top tab styles by setting to false. */; i;0o; ;o:Sass::Script::Bool; {; T; i;[; @ ;"include-top-tabs;" !default; io; ;[; @ ; [; 0; "p/** * @var {boolean} $include-bottom-tabs * Optionally exclude bottom tab styles by setting to false. */; i;0o; ;o;; {; T; i;[; @ ;"include-bottom-tabs;" !default; io; ;[; @ ; [; 0; "K/** * @var {color} $tabs-light * Base color for "light" UI tabs. */; i!;0o; ;o:Sass::Script::Funcall ; {:@keywords{: @args[o; ; @9;"base-color;"base_color; i%o:Sass::Script::Number :@original"10%; @9:@denominator_units[:@numerator_units["%; i; i%;"desaturate; i%;[; @ ;"tabs-light;" !default; i%o; ;[; @ ; [; 0; "T/** * @var {color} $tabs-light-active * Active color for "light" UI tabs. */; i';0o; ;o; ; {;{;[o; ; @N;{;[o; ; @N;"active-color;"active_color; i+o; ;"20%; @N;[;["%; i; i+;" saturate; i+o; ;"20%; @N;[;["%; i; i+;" lighten; i+;[; @ ;"tabs-light-active;" !default; i+o; ;[; @ ; [; 0; "I/** * @var {color} $tabs-dark * Base color for "dark" UI tabs. */; i-;0o; ;o; ; {;{;[o; ; @l;"base-color;"base_color; i1o; ;"20%; @l;[;["%; i; i1;" darken; i1;[; @ ;"tabs-dark;" !default; i1o; ;[; @ ; [; 0; "R/** * @var {color} $tabs-dark-active * Active color for "dark" UI tabs. */; i3;0o; ;o; ; {;{;[o; ; @|;{;[o; ; @|;"active-color;"active_color; i7o; ;"30%; @|;[;["%; i#; i7;" lighten; i7o; ;"70%; @|;[;["%; iK; i7;" saturate; i7;[; @ ;"tabs-dark-active-color;" !default; i7o; ;[; @ ; [; 0; "[/** * @var {string} $tabs-bar-gradient * Background gradient style for tab bars. */; i9;0o; ;o; ; {;"base-gradient;"base_gradient; i=;[; @ ;"tabs-bar-gradient;" !default; i=o; ;[; @ ; [; 0; ""/** * @class Ext.tab.Tab */; i?;0o; ;[; @ ; [; 0; "S/** * @var {string} $tabs-bottom-radius * Border-radius for bottom tabs. */; iC;0o; ;o; ;" 0.25em; {;[;["em; f 0.25; iG;[; @ ;"tabs-bottom-radius;" !default; iGo; ;[; @ ; [; 0; "Q/** * @var {string} $tabs-bottom-icon-size * Icon size for bottom tabs */; iI;0o; ;o; ;" 1.65em; {;[;["em; f1.6499999999999999ff; iM;[; @ ;"tabs-bottom-icon-size;" !default; iMo; ;[; @ ; [; 0; "o/** * @var {string} $tabs-bottom-active-gradient * Background gradient style for active bottom tabs. */; iO;0o; ;o; ; {;"base-gradient;"base_gradient; iS;[; @ ;" tabs-bottom-active-gradient;" !default; iSo; ;[; @ ; [; 0; "/** * @var {boolean} $include-tab-highlights * Optionally disable all gradients, text-shadows, and box-shadows. Useful for CSS debugging, * non-performant browsers, or minimalist designs. */; iU;0o; ;o; ; {;"include-highlights;"include_highlights; iZ;[; @ ;"include-tab-highlights;" !default; iZo; ;[; @ ; [; 0; "/* Private */; i\;io; ;o:Sass::Script::Operation :@operand2o; ;" 0.8em; {;[;["em; f0.80000000000000004; i^; @:@operand1o; ; @;"global-row-height;"global_row_height; i^:@operator: minus; i^;[; @ ;"tabs-top-height;0; i^o; ;[; @ ; [; 0; "F/** * Includes default tab styles. * * @member Ext.tab.Bar */; i`;0o:Sass::Tree::MixinDefNode ;T;[ u:Sass::Tree::IfNode[o:Sass::Script::Variable : @options{: @name"include-top-tabs:@underscored_name"include_top_tabs: @lineif0[o:Sass::Tree::MixinNode :@children[;{:@keywords{: @args[;"sencha-top-tabs; igu;&[o:Sass::Script::Variable : @options{: @name"include-bottom-tabs:@underscored_name"include_bottom_tabs: @lineii0[o:Sass::Tree::MixinNode :@children[;{:@keywords{: @args[;"sencha-bottom-tabs; iju;&[o:Sass::Script::Variable : @options{: @name"include-tabbar-uis:@underscored_name"include_tabbar_uis: @lineim0[o:Sass::Tree::MixinNode :@children[;{:@keywords{: @args[ o:Sass::Script::String ;{: @value" light; in: @type: stringo; ;@;"tabs-light;"tabs_light; ino; ;@;"tabs-bar-gradient;"tabs_bar_gradient; ino; ;@;"tabs-light-active;"tabs_light_active; in;"sencha-tabbar-ui; ino; ; [;@ ; {; [ o; ;{;" dark; io;;o; ;@";"tabs-dark;"tabs_dark; ioo; ;@";"tabs-bar-gradient;"tabs_bar_gradient; ioo; ;@";"tabs-dark-active-color;"tabs_dark_active_color; io;"sencha-tabbar-ui; ioo; ; [;@ ; {; [ o; ;{;" neutral; ip;;o; ;@3;"neutral-color;"neutral_color; ipo; ;@3;"tabs-bar-gradient;"tabs_bar_gradient; ipo:Sass::Script::Funcall ;@3; {; [o; ;@3;"neutral-color;"neutral_color; ipo:Sass::Script::Number :@original"40;@3:@denominator_units[:@numerator_units[;i-; ip;" darken; ip;"sencha-tabbar-ui; ipo; ;[; @ ; [; 0; "/* Rules for all tabs */; is;io:Sass::Tree::RuleNode ;T;[o:Sass::Tree::MixinNode ;[; @ ;{;[o; ;"0.5; {;[;[; f0.5; iu;" opacity; iu: @tabsi; @ : @rule["V.x-tab.x-item-disabled span.x-button-label, .x-tab.x-item-disabled .x-button-icon:@parsed_ruleso:"Sass::Selector::CommaSequence:@filename": @members[o:Sass::Selector::Sequence;.[o:#Sass::Selector::SimpleSequence;-@ ;.[o:Sass::Selector::Class;[" x-tab;-@ ; ito;1;["x-item-disabled;-@ ; it; ito;0;-@ ;.[o:Sass::Selector::Element :@namespace0;[" span;-@ ; ito;1;["x-button-label;-@ ; it; ito;/;.[o;0;-@ ;.[o;1;[" x-tab;-@ ; ito;1;["x-item-disabled;-@ ; it; ito;0;-@ ;.[o;1;["x-button-icon;-@ ; it; it; it; ito;' ;T;[o;( ;[; @ ;{;[o; ;"0.7; {;@;[; f0.69999999999999996ff; ix;" opacity; ix;)i; @ ;*[".x-tab.x-draggable;+o;,;-";.[o;/;.[o;0;-@;;.[o;1;[" x-tab;-@;; iwo;1;["x-draggable;-@;; iw; iw; iw; iwo;' ;T;[o:Sass::Tree::PropNode ;[;)i; @ ;["-webkit-user-select:@prop_syntax:new; o:Sass::Script::String; " none: @type:identifier; i|o;4 ;[;)i; @ ;[" overflow;5;6; o;7; "visible !important;8;9; i}o;' ;T;[o;4 ;[;)i; @ ;[" overflow;5;6; o;7; "visible !important;8;9; i{;)i; @ ;*[".x-button-label;+o;,;-";.[o;/;.[o;0;-@`;.[o;1;["x-button-label;-@`; i; i; i; i;)i; @ ;*[" .x-tab;+o;,;-";.[o;/;.[o;0;-@l;.[o;1;[" x-tab;-@l; i{; i{; i{; i{o;' ;T;[o;4 ;[;)i; @ ;[" z-index;5;6; o;7; "1;8;9; i;)i; @ ;*[".x-tabbar > *;+o;,;-";.[o;/;.[o;0;-@;.[o;1;[" x-tabbar;-@; i~; i~">o;0;-@;.[o:Sass::Selector::Universal;30;-@; i~; i~; i~; i~; @ ;[;"sencha-tabs; ieo;% ;T;[o;' ;T;[ o;4 ;[;)i; @ ;["border-bottom-width;5;6; o;7; " .1em;8;9; io;4 ;[;)i; @ ;["border-bottom-style;5;6; o;7; " solid;8;9; io;4 ;[;)i; @ ;[" height;5;6; o; ; {;"global-row-height;"global_row_height; i; io;4 ;[;)i; @ ;[" padding;5;6; o;7; " 0 .8em;8;9; io;' ;T;[ o;4 ;[;)i; @ ;[" position;5;6; o;7; " relative;8;9; io;4 ;[;)i; @ ;[" padding;5;6; o:Sass::Script::List ; {:@separator: space; [o; ;!o; ; @;@;[; i; i; @;"o; ;!o; ;"1em; @;[;["em; i; i; @;"o; ; @;"tabs-top-height;"tabs_top_height; i;#;$; i;#:div; io; ;" 0.8em; @;[;["em; f0.80000000000000004; i; i; io;4 ;[;)i; @ ;[" height;5;6; o; ; {;"tabs-top-height;"tabs_top_height; i; iu;&[o:Sass::Script::Variable : @options{: @name"include-border-radius:@underscored_name"include_border_radius: @linei0[o:Sass::Tree::MixinNode :@children[;{:@keywords{: @args[o:Sass::Script::Operation :@operand2o:Sass::Script::Number :@original"2;{:@denominator_units[:@numerator_units[: @valuei; i;@:@operand1o; ;@;"tabs-top-height;"tabs_top_height; i:@operator:div; i;"border-radius; i;)i; @ ;*[" .x-tab;+o;,;-";.[o;/;.[o;0;-@;.[o;1;[" x-tab;-@; i; i; i; io;' ;T;[ o;4 ;[;)i; @ ;["font-size;5;6; o;7; " .8em;8;9; io;4 ;[;)i; @ ;["line-height;5;6; o;7; " 1.2em;8;9; io;4 ;[;)i; @ ;["text-rendering;5;6; o;7; "optimizeLegibility;8;9; io;4 ;[;)i; @ ;["-webkit-font-smoothing;5;6; o;7; "antialiased;8;9; i;)i; @ ;*[".x-button-label;+o;,;-";.[o;/;.[o;0;-@;.[o;1;["x-button-label;-@; i; i; i; io;' ;T;[o;4 ;[;)i; @ ;["font-size;5;6; o;7; ".6em !important;8;9; io;4 ;[;)i; @ ;["top;5;6; o; ;" -0.5em; {;[;["em; f -0.5; i; i;)i; @ ;*[" .x-badge;+o;,;-";.[o;/;.[o;0;-@;.[o;1;[" x-badge;-@; i; i; i; i;)i; @ ;*[".x-tabbar.x-docked-top;+o;,;-";.[o;/;.[o;0;-@+;.[o;1;[" x-tabbar;-@+; io;1;["x-docked-top;-@+; i; i; i; i; @ ;[;"sencha-top-tabs; io;% ;T;[o;' ;T;[ o;4 ;[;)i; @ ;["border-top-width;5;6; o;7; " .1em;8;9; io;4 ;[;)i; @ ;["border-top-style;5;6; o;7; " solid;8;9; io;4 ;[;)i; @ ;[" height;5;6; o;7; "3em;8;9; io;4 ;[;)i; @ ;[" padding;5;6; o;7; "0;8;9; io;' ;T;[ u;&[o:Sass::Script::Variable : @options{: @name"include-border-radius:@underscored_name"include_border_radius: @linei0[o:Sass::Tree::MixinNode :@children[;{:@keywords{: @args[o; ;{;"tabs-bottom-radius;"tabs_bottom_radius; i;"border-radius; io;4 ;[;)i; @ ;["min-width;5;6; o;7; " 3.3em;8;9; io;4 ;[;)i; @ ;[" position;5;6; o;7; " relative;8;9; io;4 ;[;)i; @ ;["padding-top;5;6; o;7; " .2em;8;9; io;' ;T;[ o;4 ;[;)i; @ ;["-webkit-mask-size;5;6; o; ; {;"tabs-bottom-icon-size;"tabs_bottom_icon_size; i; io;4 ;[;)i; @ ;[" width;5;6; o; ; {;"tabs-bottom-icon-size;"tabs_bottom_icon_size; i; io;4 ;[;)i; @ ;[" height;5;6; o; ; {;"tabs-bottom-icon-size;"tabs_bottom_icon_size; i; io;4 ;[;)i; @ ;[" display;5;6; o;7; " block;8;9; io;4 ;[;)i; @ ;[" margin;5;6; o;7; " 0 auto;8;9; io;4 ;[;)i; @ ;[" position;5;6; o;7; " relative;8;9; i;)i; @ ;*[".x-button-icon;+o;,;-";.[o;/;.[o;0;-@;.[o;1;["x-button-icon;-@; i; i; i; io;' ;T;[ o;4 ;[;)i; @ ;[" margin;5;6; o;7; "0;8;9; io;4 ;[;)i; @ ;[" padding;5;6; o;7; ".1em 0 .2em 0;8;9; io;4 ;[;)i; @ ;["font-size;5;6; o;7; "9px;8;9; io;4 ;[;)i; @ ;["line-height;5;6; o;7; " 12px;8;9; io;4 ;[;)i; @ ;["text-rendering;5;6; o;7; "optimizeLegibility;8;9; io;4 ;[;)i; @ ;["-webkit-font-smoothing;5;6; o;7; "antialiased;8;9; i;)i; @ ;*[".x-button-label;+o;,;-";.[o;/;.[o;0;-@;.[o;1;["x-button-label;-@; i; i; i; i;)i; @ ;*[" .x-tab;+o;,;-";.[o;/;.[o;0;-@;.[o;1;[" x-tab;-@; i; i; i; i;)i; @ ;*[".x-tabbar.x-docked-bottom;+o;,;-";.[o;/;.[o;0;-@;.[o;1;[" x-tabbar;-@; io;1;["x-docked-bottom;-@; i; i; i; iu;&[o:Sass::Script::Variable : @options{: @name"include-default-icons:@underscored_name"include_default_icons: @linei0[ o:Sass::Tree::MixinNode :@children[;{:@keywords{: @args[o:Sass::Script::String ;{: @value"bookmarks; i: @type: string;"pictos-iconmask; io; ; [;@ ; {; [o; ;{;" download; i;;;"pictos-iconmask; io; ; [;@ ; {; [o; ;{;"favorites; i;;;"pictos-iconmask; io; ; [;@ ; {; [o; ;{;" info; i;;;"pictos-iconmask; io; ; [;@ ; {; [o; ;{;" more; i;;;"pictos-iconmask; io; ; [;@ ; {; [o; ;{;" time; i;;;"pictos-iconmask; io; ; [;@ ; {; [o; ;{;" user; i;;;"pictos-iconmask; io; ; [;@ ; {; [o; ;{;" team; i;;;"pictos-iconmask; i; @ ;[;"sencha-bottom-tabs; io; ;[; @ ; [; 0; "/** * 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 */; i;0o;% ;T;[o;' ;T;[ o;( ;[; @ ;{;[o; ; {;"bar-color;"bar_color; io; ; @;"bar-gradient;"bar_gradient; i;"background-gradient; io;4 ;[;)i; @ ;["border-top-color;5;6; o; ; {;{;[o; ; @ ;"bar-color;"bar_color; io; ;"5%; @ ;[;["%; i ; i;" darken; i; io;4 ;[;)i; @ ;["border-bottom-color;5;6; o; ; {;{;[o; ; @;"bar-color;"bar_color; io; ;"15%; @;[;["%; i; i;" darken; i; io;' ;T;[o;( ;[; @ ;{;[o; ; {;"bar-color;"bar_color; io; ;"40%; @/;[;["%; i-; i;"color-by-background; i;)i; @ ;*[" .x-tab;+o;,;-";.[o;/;.[o;0;-@;;.[o;1;[" x-tab;-@;; i; i; i; io;' ;T;[o;( ;[; @ ;{;[o; ; {;"bar-color;"bar_color; io; ;"90%; @K;[;["%; i_; i;"color-by-background; io;4 ;[;)i; @ ;["border-bottom;5;6; o;; ; {;<;=; [o; ;"1px; @Y;[;["px; i; io;7 ; @Y; " solid; i;8;9o; ; @Y;{;[o; ; @Y;"bar-color;"bar_color; io; ;"3%; @Y;[;["%; i; i;" lighten; i; i; i;)i; @ ;*[".x-tab-active;+o;,;-";.[o;/;.[o;0;-@q;.[o;1;["x-tab-active;-@q; i; i; i; io;' ;T;[o;( ;[; @ ;{;[o; ; {;"bar-color;"bar_color; io; ;" 100%; @;[;["%; ii; i;"color-by-background; i;)i; @ ;*[".x-tab-pressed;+o;,;-";.[o;/;.[o;0;-@;.[o;1;["x-tab-pressed;-@; i; i; i; i;)i; @ ;*[".x-tabbar-o; ; {;" ui-label;" ui_label; i; iu;& [o:Sass::Script::Variable : @options{: @name"include-bottom-tabs:@underscored_name"include_bottom_tabs: @linei0[o:Sass::Tree::RuleNode :@has_childrenT:@children[o; ; T; [o:Sass::Tree::MixinNode ; [;{:@keywords{: @args[o; ;{;"bar-color;"bar_color; i;"bevel-by-background; io; ; T; [o; ; [;@;{;[o; ;{;"bar-color;"bar_color; io:Sass::Script::Number :@original"20%;@ :@denominator_units[:@numerator_units["%: @valuei; io; ;@ ;"tabs-bar-gradient;"tabs_bar_gradient; i;"mask-by-background; i: @tabsi;@: @rule[".x-button-icon:@parsed_ruleso:"Sass::Selector::CommaSequence:@filename": @members[o:Sass::Selector::Sequence;[o:#Sass::Selector::SimpleSequence;@/;[o:Sass::Selector::Class;["x-button-icon;@/; i; i; i; i;i;@;[" .x-tab;o;;";[o;;[o;;@;;[o;;[" x-tab;@;; i; i; i; io; ; T; [ o; ; [;@;{;[o:Sass::Script::Funcall ;{;{;[o; ;@K;"bar-color;"bar_color; io; ;"5%;@K;[;["%;i ; i;" darken; io:Sass::Script::String ;@K;" recessed; i: @type:identifier;"background-gradient; io; ; [;@;{;[o; ;{;{;[o; ;@_;"bar-color;"bar_color; io; ;"10%;@_;[;["%;i; i;" lighten; i;"bevel-by-background; iu:Sass::Tree::IfNode{[o:Sass::Script::Variable : @options{: @name"include-tab-highlights:@underscored_name"include_tab_highlights: @linei0[o:Sass::Tree::MixinNode :@children[;{:@keywords{: @args[o:Sass::Script::List ;{:@separator: space: @value[ o:Sass::Script::Funcall ;@; {; [o; ;@;"bar-color;"bar_color; io:Sass::Script::Number :@original"10%;@:@denominator_units[:@numerator_units["%;i; i;" darken; io; ;"0;@;[;[;i; io; ;"0;@;@!;[;i; io; ;" 0.25em;@;[;["em;f 0.25; io:Sass::Script::String ;@;" inset; i: @type:identifier; i;"box-shadow; io; ; T; [o; ; [;@;{;[o; ;{;"tab-active-color;"tab_active_color; i o; ;@t;" tabs-bottom-active-gradient;" tabs_bottom_active_gradient; i ;"background-gradient; i ;i;@;[".x-button-icon;o;;";[o;;[o;;@~;[o;;["x-button-icon;@~; i ; i ; i ; i ;i;@;[".x-tab-active;o;;";[o;;[o;;@;[o;;["x-tab-active;@; i; i; i; i;i;@;[".x-tabbar-o; ;{;" ui-label;" ui_label; i".x-docked-bottom; iu;&[o:Sass::Script::Variable : @options{: @name"include-top-tabs:@underscored_name"include_top_tabs: @linei0[o:Sass::Tree::RuleNode :@has_childrenT:@children[o; ; T; [o:Sass::Tree::MixinNode ; [;{:@keywords{: @args[o:Sass::Script::Funcall ;{;{;[o; ;@;"bar-color;"bar_color; io:Sass::Script::Number :@original"5%;@:@denominator_units[:@numerator_units["%: @valuei ; i;" darken; io:Sass::Script::String ;@;" recessed; i: @type: string;"background-gradient; io; ; [;@;{;[o; ;{;{;[o; ;@);"bar-color;"bar_color; io; ;"5%;@);[;["%;i ; i;" darken; i;"color-by-background; i: @tabsi;@: @rule[".x-tab-active:@parsed_ruleso:"Sass::Selector::CommaSequence:@filename": @members[o:Sass::Selector::Sequence;[o:#Sass::Selector::SimpleSequence;@9;[o:Sass::Selector::Class;["x-tab-active;@9; i; i; i; i;i;@;[".x-tabbar-o; ;{;" ui-label;" ui_label; i".x-docked-top; i; @ ;[ [o;; {;" ui-label;" ui_label0[o;; @;"bar-color;"bar_color0[o;; @;"bar-gradient;"bar_gradient0[o;; @;"tab-active-color;"tab_active_color0;"sencha-tabbar-ui; i; @ ; i;"'// 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%)); } } } }