@function linear-gradient-bevel($direction, $bg-color) { @return linear-gradient($direction, color_stops( lighten($bg-color, 15%), lighten($bg-color, 8%) 30%, $bg-color 65%, darken($bg-color, 6%) ));} @function linear-gradient-glossy($direction, $bg-color) { @return linear-gradient($direction, color_stops( lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%) ));} @function linear-gradient-recessed($direction, $bg-color) { @return linear-gradient($direction, color_stops( darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%) ));} @function linear-gradient-matte($direction, $bg-color) { @return linear-gradient($direction, color_stops( lighten($bg-color, 3%), darken($bg-color, 4%) ));} @function linear-gradient-matte-reverse($direction, $bg-color) { @return linear-gradient($direction, color_stops( darken($bg-color, 6%), lighten($bg-color, 4%) ));} @function linear-gradient-panel-header($direction, $bg-color) { @return linear-gradient($direction, color_stops( adjust-color($bg-color, $hue: -0.857deg, $saturation: -1.63%, $lightness: 3.529%), adjust-color($bg-color, $hue: 0.158deg, $saturation: -1.21%, $lightness: 0.392%) 45%, adjust-color($bg-color, $hue: 1.154deg, $saturation: 0.607%, $lightness: -7.647%) 46%, adjust-color($bg-color, $hue: 1.154deg, $saturation: 0.607%, $lightness: -7.647%) 50%, adjust-color($bg-color, $hue: 1.444deg, $saturation: -1.136%, $lightness: -4.706%) 51%, $bg-color ));} @function linear-gradient-tabbar($direction, $bg-color) { @return linear-gradient($direction, color_stops( adjust-color($bg-color, $hue: 0.0deg, $saturation: 1.604%, $lightness: 4.706%), $bg-color ));} @function linear-gradient-tab($direction, $bg-color) { @return linear-gradient($direction, color_stops( adjust-color($bg-color, $hue: 1.382deg, $saturation: -18.571%, $lightness: -4.902%), adjust-color($bg-color, $hue: 0.43deg, $saturation: -10.311%, $lightness: -2.157%) 25%, $bg-color 45% ));} @function linear-gradient-tab-active($direction, $bg-color) { @return linear-gradient($direction, color_stops( adjust-color($bg-color, $hue: -212.903deg, $saturation: -88.571%, $lightness: 6.863%), adjust-color($bg-color, $hue: 0.43deg, $saturation: -6.753%, $lightness: 4.706%) 25%, $bg-color 45% ));} @function linear-gradient-tab-over($direction, $bg-color) { @return linear-gradient($direction, color_stops( adjust-color($bg-color, $hue: 4.462deg, $saturation: -9.524%, $lightness: -3.725%), adjust-color($bg-color, $hue: 2.272deg, $saturation: 0.0%, $lightness: -1.569%) 25%, $bg-color 45% ));} @function linear-gradient-tab-disabled($direction, $bg-color) { @return linear-gradient($direction, color_stops( $bg-color, adjust-color($bg-color, $hue: -0.267deg, $saturation: 18.571%, $lightness: 2.941%) ));} @function linear-gradient-grid-header($direction, $bg-color) { @return linear-gradient($direction, color_stops( adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: 20.392%), adjust-color($bg-color, $hue: 220.0deg, $saturation: 5.66%, $lightness: 12.353%) ));} @function linear-gradient-grid-header-over($direction, $bg-color) { @return linear-gradient($direction, color_stops( adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%), adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%) 39%, adjust-color($bg-color, $hue: 0.372deg, $saturation: 0.101%, $lightness: 10.196%) 40%, adjust-color($bg-color, $hue: 0.372deg, $saturation: 0.101%, $lightness: 10.196%) ));} @function linear-gradient-grid-row-over($direction, $bg-color) { @return linear-gradient($direction, color_stops( adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%), $bg-color ));} @function linear-gradient-grid-cell-special($direction, $bg-color) { @return linear-gradient($direction, color_stops( $bg-color, darken($bg-color, 5) ));} @function linear-gradient-glossy-button($direction, $bg-color) { @return linear-gradient($direction, color_stops( $bg-color, adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -2.353%) 48%, adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -11.373%) 52%, adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -9.412%) ));} @function linear-gradient-glossy-button-over($direction, $bg-color) { @return linear-gradient($direction, color_stops( $bg-color, adjust-color($bg-color, $hue: 1.754deg, $saturation: 0.0%, $lightness: -2.157%) 48%, adjust-color($bg-color, $hue: 5.833deg, $saturation: -35.135%, $lightness: -9.216%) 52%, adjust-color($bg-color, $hue: 5.833deg, $saturation: -27.273%, $lightness: -7.647%) ));} @function linear-gradient-glossy-button-pressed($direction, $bg-color) { @return linear-gradient($direction, color_stops( $bg-color, adjust-color($bg-color, $hue: -1.839deg, $saturation: -2.18%, $lightness: 2.157%) 48%, adjust-color($bg-color, $hue: -2.032deg, $saturation: 37.871%, $lightness: -4.706%) 52%, adjust-color($bg-color, $hue: -1.641deg, $saturation: 36.301%, $lightness: -2.549%) ));} // Patch compass background-image mixin to fix EXTJSIV-9723. // This patch is only guaranteed to be compatible with the current Sencha Cmd-bundled // version of compass - 0.12.2 // Remove this override when proper support for w3c style gradients is implemented in // the compass framework. For more info see: // https://github.com/chriseppstein/compass/issues/965#ref-pullrequest-10812518 @mixin background-image( $image-1, $image-2: false, $image-3: false, $image-4: false, $image-5: false, $image-6: false, $image-7: false, $image-8: false, $image-9: false, $image-10: false) { $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10); $add-pie-bg: prefixed(-pie, $images) or -compass-list-size($images) > 1; @if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; } @if $support-for-original-webkit-gradients and prefixed(-owg, $images) { background-image: -owg($images); } @if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); } @if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); } @if $experimental-support-for-opera and prefixed(-o, $images) { background-image: -o($images); } @if $experimental-support-for-pie and $add-pie-bg { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." } // begin patch background-image: -ms-#{$images}; // end patch background-image: $images ;} /** * Creates a background gradient. * * Example usage: * .foo { * @include background-gradient(#808080, matte, left); * } * * @param {Color} $bg-color The background color of the gradient * @param {String/List} [$type=$base-gradient] The type of gradient to be used. Can either * be a String which is a predefined gradient name, or it can can be a list of color stops. * If null is passed, this mixin will still set the `background-color` to $bg-color. * The available predefined gradient names are: * * * bevel * * glossy * * recessed * * matte * * matte-reverse * * panel-header * * tabbar * * tab * * tab-active * * tab-over * * tab-disabled * * grid-header * * grid-header-over * * grid-row-over * * grid-cell-special * * glossy-button * * glossy-button-over * * glossy-button-pressed * * Each of these gradient names corresponds to a function named linear-gradient[name]. * Themes can override these functions to customize the color stops that they return. * For example, to override the glossy-button gradient function add a function named * "linear-gradient-glossy-button" to a file named "sass/etc/mixins/background-gradient.scss" * in your theme. The function should return the result of calling the Compass linear-gradient * function with the desired direction and color-stop information for the gradient. For example: * * @function linear-gradient-glossy-button($direction, $bg-color) { * @return linear-gradient($direction, color_stops( * mix(#fff, $bg-color, 10%), * $bg-color 50%, * mix(#000, $bg-color, 5%) 51%, * $bg-color * )); * } * * @param {String} [$direction=top] The direction of the gradient. Can either be * `top` or `left`. * * @member Global_CSS */@mixin background-gradient($bg-color, $type: $base-gradient, $direction: top) { background-image: none; background-color: $bg-color; @if not is-null($base-gradient) and $bg-color != transparent { $gradient: null; //color_stops @if type-of($type) == "list" { $gradient: linear-gradient($direction, $type); } //default gradients @else if $type == bevel { $gradient: linear-gradient-bevel($direction, $bg-color); } @else if $type == glossy { $gradient: linear-gradient-glossy($direction, $bg-color); } @else if $type == recessed { $gradient: linear-gradient-recessed($direction, $bg-color); } @else if $type == matte { $gradient: linear-gradient-matte($direction, $bg-color); } @else if $type == matte-reverse { $gradient: linear-gradient-matte-reverse($direction, $bg-color); } // gradients @else if $type == panel-header { $gradient: linear-gradient-panel-header($direction, $bg-color); } @else if $type == tabbar { $gradient: linear-gradient-tabbar($direction, $bg-color); } @else if $type == tab { $gradient: linear-gradient-tab($direction, $bg-color); } @else if $type == tab-active { $gradient: linear-gradient-tab-active($direction, $bg-color); } @else if $type == tab-over { $gradient: linear-gradient-tab-over($direction, $bg-color); } @else if $type == tab-disabled { $gradient: linear-gradient-tab-disabled($direction, $bg-color); } @else if $type == grid-header { $gradient: linear-gradient-grid-header($direction, $bg-color); } @else if $type == grid-header-over { $gradient: linear-gradient-grid-header-over($direction, $bg-color); } @else if $type == grid-row-over { $gradient: linear-gradient-grid-row-over($direction, $bg-color); } @else if $type == grid-cell-special { $gradient: linear-gradient-grid-cell-special($direction, $bg-color); } @else if $type == glossy-button or $type == glossy-button-disabled { $gradient: linear-gradient-glossy-button($direction, $bg-color); } @else if $type == glossy-button-over { $gradient: linear-gradient-glossy-button-over($direction, $bg-color); } @else if $type == glossy-button-pressed { $gradient: linear-gradient-glossy-button-pressed($direction, $bg-color); } @if $gradient != null { @include background-image($gradient); } }}