3.1.2 (Brainy Betty) f0b7795a1e8167a839021591857435e2bc7c7c93 o:Sass::Tree::RootNode :@has_childrenT:@children[o:Sass::Tree::ImportNode ;[: @options{:@imported_filename"compass/css3: @linei:@template0o; ;[; @ ; "recipes/background; i; 0o; ;[; @ ; "recipes/color; i; 0o:Sass::Tree::VariableNode ;[; @ : @guarded0: @name"default-gradient: @expro:Sass::Script::Variable ; {;"base-gradient:@underscored_name"base_gradient; i ; i o:Sass::Tree::CommentNode ;[: @loud0; @ : @silent0: @value"!/** * @class Global_CSS */; i : @lines[o; ;[;0; @ ;0;"l/** * 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). */; i;[o:Sass::Tree::MixinDefNode ;T;[o:Sass::Tree::RuleNode ;T;[o:Sass::Tree::PropNode ;[: @tabsi; @ :@prop_syntax:new;["-webkit-mask-image;o:Sass::Script::Funcall ; {: @args[o; ; @);"theme-name;"theme_name; io:Sass::Script::Operation :@operand1o; ;!o:Sass::Script::String ; @);" pictos/; i: @type: string; @):@operator: plus:@operand2o; ; @);" name;" name; i; i; @);%;&;'o;" ; @);" .png; i;#;$; i;"theme_image; i:@keywords{; i;i; @ : @rule[ ".x-tab .x-button-icon.o; ; {;" name;" name; i"., .x-button .x-button-icon.x-icon-mask.o; ; {;" name;" name; i; i; @ ;[[o;; {;" name;" name0;"pictos-iconmask; io; ;[;0; @ ;0;" /** * 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. * @param {color} $type Gradient style for the button, will automatically use "recessed" when pressed. */; i;[o; ;T;[o; ;T;[ o; ;[;i; @ ;;;[" border;o:Sass::Script::List ; {:@separator: space;[o:Sass::Script::Number :@denominator_units[; @X:@numerator_units["px:@original"1px;i; i&o;" ; @X;" solid; i&;#:identifiero; ; @X;[o; ; @X;" bg-color;" bg_color; i&o;- ;.[; @X;/["%;0"20%;i; i&;" darken; i&;({; i&; i&o; ;[;i; @ ;;;["border-top-color;o; ; {;[o; ; @r;" bg-color;" bg_color; i'o;- ;.[; @r;/["%;0"15%;i; i';" darken; i';({; i'o:Sass::Tree::MixinNode ;[; @ ;[o; ; {;" bg-color;" bg_color; i(;"color-by-background; i(;({o; ;T;[o; ;[;i; @ ;;;["background;o; ; {;[o; ; @;" bg-color;" bg_color; i+o;- ;.[; @;/["%;0"20%;i; i+;" darken; i+;({; i+;i; @ ;)["6&.x-button-back:before, &.x-button-forward:before:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence;5[o:#Sass::Selector::SimpleSequence;5[o:Sass::Selector::Parent:@filename"; i*o:Sass::Selector::Class;["x-button-back;9@; i*o:Sass::Selector::Pseudo ;[" before;9@: @arg0; i*;#: class;9@; i*o;6;5[o;7;5[o;8;9@; i*o;:;["x-button-forward;9@; i*o;; ;[" before;9@;<0; i*;#;=;9@; i*;9@; i*; i*o; ;T;[o;2 ;[; @ ;[o; ; {;" bg-color;" bg_color; i/o; ; @;" type;" type; i/;"background-gradient; i/;({;i; @ ;)["7&, &.x-button-back:after, &.x-button-forward:after;3o;4;5[o;6;5[o;7;5[o;8;9"; i.;9@; i.o;6;5[o;7;5[o;8;9@; i.o;:;["x-button-back;9@; i.o;; ;[" after;9@;<0; i.;#;=;9@; i.o;6;5[o;7;5[o;8;9@; i.o;:;["x-button-forward;9@; i.o;; ;[" after;9@;<0; i.;#;=;9@; i.;9@; i.; i.o; ;T;[o;2 ;[; @ ;[o; ; {;" bg-color;" bg_color; i3;"mask-by-background; i3;({;i; @ ;)[".x-button-icon.x-icon-mask;3o;4;5[o;6;5[o;7;5[o;:;["x-button-icon;9"; i2o;:;["x-icon-mask;9@; i2;9@; i2;9@; i2; i2o; ;T;[o; ;T;[o;2 ;[; @ ;[o; ; {;[o; ; @;" bg-color;" bg_color; i8o;- ;.[; @;/["%;0"3%;i; i8;" darken; i8;({o;" ; @;" recessed; i8;#;$;"background-gradient; i8;({;i; @ ;)["&, &:after;3o;4;5[o;6;5[o;7;5[o;8;9"; i7;9@; i7o;6;5[o;7;5[o;8;9@; i7o;; ;[" after;9@;<0; i7;#;=;9@; i7;9@; i7; i7;i; @ ;)["?&.x-button-pressing, &.x-button-pressed, &.x-button-active;3o;4;5[o;6;5[o;7;5[o;8;9"; i6o;:;["x-button-pressing;9@+; i6;9@+; i6o;6;5[o;7;5[o;8;9@+; i6o;:;["x-button-pressed;9@+; i6;9@+; i6o;6;5[o;7;5[o;8;9@+; i6o;:;["x-button-active;9@+; i6;9@+; i6;9@+; i6; i6;i; @ ;)["&, .x-toolbar &;3o;4;5[o;6;5[o;7;5[o;8;9"; i%;9@H; i%o;6;5[o;7;5[o;:;["x-toolbar;9@H; i%;9@H; i%o;7;5[o;8;9@H; i%;9@H; i%;9@H; i%; i%; @ ;[[o;; {;" bg-color;" bg_color0[o;; @V;" type;" typeo; ; @V;"button-gradient;"button_gradient; i$;"toolbar-button; i$o; ;[;0; @ ;0;"/** * Adds a small text shadow (or highlight) to give the impression of beveled text. * * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark. */; i>;[o; ;T;[u:Sass::Tree::IfNode[o:Sass::Script::Variable : @options{: @name"include-highlights:@underscored_name"include_highlights: @lineiD0[u:Sass::Tree::IfNode)[o:Sass::Script::Operation :@operand1o:Sass::Script::Variable : @options{: @name" type:@underscored_name" type: @lineiE;@:@operator:eq:@operand2o:Sass::Script::String ;@: @value" shadow; iE: @type:identifier; iEu:Sass::Tree::IfNode*[00[o:Sass::Tree::PropNode :@children[: @tabsi: @options{:@prop_syntax:new: @name["text-shadow: @valueo:Sass::Script::List ;{:@separator: space; [ o:Sass::Script::Funcall ;@ : @args[ o:Sass::Script::Number :@denominator_units[;@ :@numerator_units[:@original"255; i: @lineiHo; ;@;@ ;[;"255; i;iHo; ;@;@ ;[;"255; i;iHo; ;@;@ ;[;" 0.25; f 0.25;iH; " rgba;iH:@keywords{o; ;@;@ ;[;"0; i;iHo; ;[;@ ;["em;" 0.08em; f0.080000000000000002{;iHo; ;@;@ ;[;"0; i;iH;iH;iH[o:Sass::Tree::PropNode :@children[: @tabsi;{:@prop_syntax:new; ["text-shadow;o:Sass::Script::List ;{:@separator: space;[ o:Sass::Script::Funcall ;@: @args[ o:Sass::Script::Number :@denominator_units[;@:@numerator_units[:@original"0;i; iFo; ;@;@; [;!"0;i; iFo; ;@;@; [;!"0;i; iFo; ;@;@; [;!"0.5;f0.5; iF; " rgba; iF:@keywords{o; ;@;@; [;!"0;i; iFo; ;[;@; ["em;!" -0.08em;f-0.080000000000000002{; iFo; ;@;@; [;!"0;i; iF; iF; iF; @ ;[[o;; {;" type;" typeo;" ; @k;" shadow; iC;#;$;"bevel-text; iCo; ;[;0; @ ;0;"/** * Adds a small box shadow (or highlight) to give the impression of being beveled. * * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark. */; iM;[o; ;T;[u;>[o:Sass::Script::Variable : @options{: @name"include-highlights:@underscored_name"include_highlights: @lineiS0[u:Sass::Tree::IfNode/[o:Sass::Script::Operation :@operand1o:Sass::Script::Variable : @options{: @name" type:@underscored_name" type: @lineiT;@:@operator:eq:@operand2o:Sass::Script::String ;@: @value" shadow; iT: @type:identifier; iTu:Sass::Tree::IfNode3[00[o:Sass::Tree::PropNode :@children[: @tabsi: @options{:@prop_syntax:new: @name["-webkit-box-shadow: @valueo:Sass::Script::List ;{:@separator: space; [ o:Sass::Script::Funcall ;@ : @args[o:Sass::Script::Color ;@ : @attrs{ :redi: alphai: greeni: bluei; 0: @lineiWo:Sass::Script::Number :@denominator_units[;@ :@numerator_units[:@original" 0.35; f0.34999999999999998ff;iW; " rgba;iW:@keywords{o; ;@;@ ;[;"0; i;iWo; ;[;@ ;["em;" 0.06em; f0.059999999999999998;iWo; ;@;@ ;[;"0; i;iW;iW;iW[o:Sass::Tree::PropNode :@children[: @tabsi;{:@prop_syntax:new; ["-webkit-box-shadow;o:Sass::Script::List ;{:@separator: space;[ o:Sass::Script::Funcall ;@: @args[o:Sass::Script::Color ;@: @attrs{ :redi: alphai: greeni: bluei;0; iUo:Sass::Script::Number :@denominator_units[;@:@numerator_units[:@original"0.5;f0.5; iU; " rgba; iU:@keywords{o;$ ;%@;@;&[;'"0;i; iUo;$ ;%[;@;&["em;'" -0.06em;f-0.059999999999999998; iUo;$ ;%@;@;&[;'"0;i; iU; iU; iU; @ ;[[o;; {;" type;" typeo;" ; @{;" light; iR;#;$;"bevel-box; iRo; ;[;0; @ ;0;"/** * Adds basic styles to :before or :after pseudo-elements. * * .my-element:after { * @include insertion(50px, 50px); * } * * @param {measurement} $width Height of pseudo-element. * @param {measurement} $height Height of pseudo-element. * @param {measurement} $top Top positioning of pseudo-element. * @param {measurement} $left Left positioning of pseudo-element. * */; i\;[o; ;T;[ o; ;[;i; @ ;;;[" content;o;";""";#;1; ijo; ;[;i; @ ;;;[" position;o;";" absolute;#;1; iko; ;[;i; @ ;;;[" width;o; ; {;" width;" width; il; ilo; ;[;i; @ ;;;[" height;o; ; {;" height;" height; im; imo; ;[;i; @ ;;;["top;o; ; {;"top;"top; in; ino; ;[;i; @ ;;;[" left;o; ; {;" left;" left; io; io; @ ;[ [o;; {;" width;" widtho;- ;.[; @;/["px;0" 30px;i#; ii[o;; @;" height;" heighto;- ;.[; @;/["px;0" 30px;i#; ii[o;; @;"top;"topo;- ;.[; @;/[;0"0;i; ii[o;; @;" left;" lefto;- ;.@; @;/[;0"0;i; ii;"insertion; iio; ;[;0; @ ;0;"@/** * Makes an element stretch to its parent's bounds. */; ir;[o; ;T;[ o; ;[;i; @ ;;;[" position;o;";" absolute;#;1; ivo; ;[;i; @ ;;;["top;o;";"0;#;1; iwo; ;[;i; @ ;;;[" right;o;";"0;#;1; ixo; ;[;i; @ ;;;[" bottom;o;";"0;#;1; iyo; ;[;i; @ ;;;[" left;o;";"0;#;1; iz; @ ;[;" stretch; iuo; ;[;0; @ ;0;"/** * Bevels the text based on its background. * * @param {color} $bg-color Background color of element. * @see bevel-text * */; i};[o; ;T;[u;>[[o:Sass::Script::Operation :@operand1o:Sass::Script::Funcall : @options{: @args[o:Sass::Script::Variable ;@: @name" bg-color:@underscored_name" bg_color: @linei; "lightness; i:@keywords{;@:@operator:gt:@operand2o:Sass::Script::Number :@denominator_units[;@:@numerator_units[:@original"50: @valuei7; i; iu:Sass::Tree::IfNoder[00[o:Sass::Tree::MixinNode :@children[: @options{: @args[: @name"bevel-text: @linei:@keywords{[o:Sass::Tree::MixinNode :@children[;{; [o:Sass::Script::String ;{;" light; i: @type:identifier; "bevel-text; i;{; @ ;[[o;; {;" bg-color;" bg_color0;"bevel-by-background; io; ;[;0; @ ;0;"L/** * 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 * */; i;[o; ;T;[u;>[o:Sass::Script::Operation :@operand1o:Sass::Script::Funcall : @options{: @args[o:Sass::Script::Variable ;@: @name" bg-color:@underscored_name" bg_color: @linei; "lightness; i:@keywords{;@:@operator:gt:@operand2o:Sass::Script::Number :@denominator_units[;@:@numerator_units[:@original"50: @valuei7; i; iu:Sass::Tree::IfNode;[00[o:Sass::Tree::MixinNode :@children[: @options{: @args[o:Sass::Script::Funcall ;{;[o:Sass::Script::Variable ;@ : @name" bg-color:@underscored_name" bg_color: @lineio; ;@ ; " contrast; " contrast; i; " lighten; i:@keywords{o; ;@ ; " style; " style; i; "background-gradient; i;{[o:Sass::Tree::MixinNode :@children[;{; [o; ;{; [o; ;@; " bg-color; " bg_color; io; ;@; " contrast; " contrast; i; " darken; i;{o; ;@; " style; " style; i; "background-gradient; i;{; @ ;[[o;; {;" bg-color;" bg_color0[o;; @;" contrast;" contrasto;- ;.[; @;/["%;0" 100%;ii; i[o;; @;" style;" styleo; ; @;"base-gradient;"base_gradient; i;"mask-by-background; io; ;[;0; @ ;0;"@/** * Makes the element text overflow to use ellipsis. */; i;[o; ;T;[o; ;[;i; @ ;;;["white-space;o;";" nowrap;#;1; io; ;[;i; @ ;;;[" overflow;o;";" hidden;#;1; io; ;[;i; @ ;;;["text-overflow;o;";" ellipsis;#;1; i; @ ;[;" ellipsis; i; @ ; i; "@import 'compass/css3'; @import 'recipes/background'; @import 'recipes/color'; $default-gradient: $base-gradient; /** * @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} { -webkit-mask-image: theme_image($theme-name, "pictos/" + $name + ".png"); } } /** * 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. * @param {color} $type Gradient style for the button, will automatically use "recessed" when pressed. */ @mixin toolbar-button($bg-color, $type: $button-gradient){ &, .x-toolbar & { border: 1px solid darken($bg-color, 20%); border-top-color: darken($bg-color, 15%); @include color-by-background($bg-color); &.x-button-back:before, &.x-button-forward:before { background: darken($bg-color, 20%); } &, &.x-button-back:after, &.x-button-forward:after { @include background-gradient($bg-color, $type); } .x-button-icon.x-icon-mask { @include mask-by-background($bg-color); } &.x-button-pressing, &.x-button-pressed, &.x-button-active { &, &:after { @include background-gradient(darken($bg-color, 3%), 'recessed'); } } } } /** * Adds a small text shadow (or highlight) to give the impression of beveled text. * * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark. */ @mixin bevel-text($type: 'shadow') { @if $include-highlights { @if $type == shadow { text-shadow: rgba(0,0,0,.5) 0 -.08em 0; } @else { text-shadow: rgba(255,255,255,.25) 0 .08em 0; } } } /** * Adds a small box shadow (or highlight) to give the impression of being beveled. * * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark. */ @mixin bevel-box($type: 'light') { @if $include-highlights { @if $type == shadow { -webkit-box-shadow: rgba(#000, .5) 0 -.06em 0; } @else { -webkit-box-shadow: rgba(#fff, .35) 0 .06em 0; } } } /** * Adds basic styles to :before or :after pseudo-elements. * * .my-element:after { * @include insertion(50px, 50px); * } * * @param {measurement} $width Height of pseudo-element. * @param {measurement} $height Height of pseudo-element. * @param {measurement} $top Top positioning of pseudo-element. * @param {measurement} $left Left positioning of pseudo-element. * */ @mixin insertion($width: 30px, $height: 30px, $top: 0, $left: 0) { content: ""; position: absolute; width: $width; height: $height; top: $top; left: $left; } /** * Makes an element stretch to its parent's bounds. */ @mixin stretch { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /** * Bevels the text based on its background. * * @param {color} $bg-color Background color of element. * @see bevel-text * */ @mixin bevel-by-background($bg-color) { @if (lightness($bg-color) > 50) { @include bevel-text(light) } @else { @include bevel-text; } } /** * 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) } } /** * Makes the element text overflow to use ellipsis. */ @mixin ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }