extjs/classic/theme-base/sass/etc/mixins/background-gradient.scss

   1 @function linear-gradient-bevel($direction, $bg-color) {
   2     @return linear-gradient($direction, color_stops(
   3         lighten($bg-color, 15%),
   4         lighten($bg-color, 8%) 30%,
   5         $bg-color 65%,
   6         darken($bg-color, 6%)
   7     ));
   8 }
   9
  10 @function linear-gradient-glossy($direction, $bg-color) {
  11     @return linear-gradient($direction, color_stops(
  12         lighten($bg-color, 15%),
  13         lighten($bg-color, 5%) 50%,
  14         $bg-color 51%,
  15         darken($bg-color, 5%)
  16     ));
  17 }
  18
  19 @function linear-gradient-recessed($direction, $bg-color) {
  20     @return linear-gradient($direction, color_stops(
  21         darken($bg-color, 10%),
  22         darken($bg-color, 5%) 10%,
  23         $bg-color 65%,
  24         lighten($bg-color, .5%)
  25     ));
  26 }
  27
  28 @function linear-gradient-matte($direction, $bg-color) {
  29     @return linear-gradient($direction, color_stops(
  30         lighten($bg-color, 3%),
  31         darken($bg-color, 4%)
  32     ));
  33 }
  34
  35 @function linear-gradient-matte-reverse($direction, $bg-color) {
  36     @return linear-gradient($direction, color_stops(
  37         darken($bg-color, 6%),
  38         lighten($bg-color, 4%)
  39     ));
  40 }
  41
  42 @function linear-gradient-panel-header($direction, $bg-color) {
  43     @return linear-gradient($direction, color_stops(
  44         adjust-color($bg-color, $hue: -0.857deg, $saturation: -1.63%, $lightness: 3.529%),
  45         adjust-color($bg-color, $hue: 0.158deg, $saturation: -1.21%, $lightness: 0.392%) 45%,
  46         adjust-color($bg-color, $hue: 1.154deg, $saturation: 0.607%, $lightness: -7.647%) 46%,
  47         adjust-color($bg-color, $hue: 1.154deg, $saturation: 0.607%, $lightness: -7.647%) 50%,
  48         adjust-color($bg-color, $hue: 1.444deg, $saturation: -1.136%, $lightness: -4.706%) 51%,
  49         $bg-color
  50     ));
  51 }
  52
  53 @function linear-gradient-tabbar($direction, $bg-color) {
  54     @return linear-gradient($direction, color_stops(
  55         adjust-color($bg-color, $hue: 0.0deg, $saturation: 1.604%, $lightness: 4.706%),
  56         $bg-color
  57     ));
  58 }
  59
  60 @function linear-gradient-tab($direction, $bg-color) {
  61     @return linear-gradient($direction, color_stops(
  62         adjust-color($bg-color, $hue: 1.382deg, $saturation: -18.571%, $lightness: -4.902%),
  63         adjust-color($bg-color, $hue: 0.43deg, $saturation: -10.311%, $lightness: -2.157%) 25%,
  64         $bg-color 45%
  65     ));
  66 }
  67
  68 @function linear-gradient-tab-active($direction, $bg-color) {
  69     @return linear-gradient($direction, color_stops(
  70         adjust-color($bg-color, $hue: -212.903deg, $saturation: -88.571%, $lightness: 6.863%),
  71         adjust-color($bg-color, $hue: 0.43deg, $saturation: -6.753%, $lightness: 4.706%) 25%,
  72         $bg-color 45%
  73     ));
  74 }
  75
  76 @function linear-gradient-tab-over($direction, $bg-color) {
  77     @return linear-gradient($direction, color_stops(
  78         adjust-color($bg-color, $hue: 4.462deg, $saturation: -9.524%, $lightness: -3.725%),
  79         adjust-color($bg-color, $hue: 2.272deg, $saturation: 0.0%, $lightness: -1.569%) 25%,
  80         $bg-color 45%
  81     ));
  82 }
  83
  84 @function linear-gradient-tab-disabled($direction, $bg-color) {
  85     @return linear-gradient($direction, color_stops(
  86         $bg-color,
  87         adjust-color($bg-color, $hue: -0.267deg, $saturation: 18.571%, $lightness: 2.941%)
  88     ));
  89 }
  90
  91 @function linear-gradient-grid-header($direction, $bg-color) {
  92     @return linear-gradient($direction, color_stops(
  93         adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: 20.392%),
  94         adjust-color($bg-color, $hue: 220.0deg, $saturation: 5.66%, $lightness: 12.353%)
  95     ));
  96 }
  97
  98 @function linear-gradient-grid-header-over($direction, $bg-color) {
  99     @return linear-gradient($direction, color_stops(
 100         adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%),
 101         adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%) 39%,
 102         adjust-color($bg-color, $hue: 0.372deg, $saturation: 0.101%, $lightness: 10.196%) 40%,
 103         adjust-color($bg-color, $hue: 0.372deg, $saturation: 0.101%, $lightness: 10.196%)
 104     ));
 105 }
 106
 107 @function linear-gradient-grid-row-over($direction, $bg-color) {
 108     @return linear-gradient($direction, color_stops(
 109         adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%),
 110         $bg-color
 111     ));
 112 }
 113
 114 @function linear-gradient-grid-cell-special($direction, $bg-color) {
 115     @return linear-gradient($direction, color_stops(
 116         $bg-color,
 117         darken($bg-color, 5)
 118     ));
 119 }
 120
 121 @function linear-gradient-glossy-button($direction, $bg-color) {
 122     @return linear-gradient($direction, color_stops(
 123         $bg-color,
 124         adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -2.353%) 48%,
 125         adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -11.373%) 52%,
 126         adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -9.412%)
 127     ));
 128 }
 129
 130 @function linear-gradient-glossy-button-over($direction, $bg-color) {
 131     @return linear-gradient($direction, color_stops(
 132         $bg-color,
 133         adjust-color($bg-color, $hue: 1.754deg, $saturation: 0.0%, $lightness: -2.157%) 48%,
 134         adjust-color($bg-color, $hue: 5.833deg, $saturation: -35.135%, $lightness: -9.216%) 52%,
 135         adjust-color($bg-color, $hue: 5.833deg, $saturation: -27.273%, $lightness: -7.647%)
 136     ));
 137 }
 138
 139 @function linear-gradient-glossy-button-pressed($direction, $bg-color) {
 140     @return linear-gradient($direction, color_stops(
 141         $bg-color,
 142         adjust-color($bg-color, $hue: -1.839deg, $saturation: -2.18%, $lightness: 2.157%) 48%,
 143         adjust-color($bg-color, $hue: -2.032deg, $saturation: 37.871%, $lightness: -4.706%) 52%,
 144         adjust-color($bg-color, $hue: -1.641deg, $saturation: 36.301%, $lightness: -2.549%)
 145     ));
 146 }
 147
 148 // Patch compass background-image mixin to fix EXTJSIV-9723.
 149 // This patch is only guaranteed to be compatible with the current Sencha Cmd-bundled
 150 // version of compass - 0.12.2
 151 // Remove this override when proper support for w3c style gradients is implemented in
 152 // the compass framework.  For more info see:
 153 // https://github.com/chriseppstein/compass/issues/965#ref-pullrequest-10812518
 154 @mixin background-image(
 155   $image-1,
 156   $image-2: false,
 157   $image-3: false,
 158   $image-4: false,
 159   $image-5: false,
 160   $image-6: false,
 161   $image-7: false,
 162   $image-8: false,
 163   $image-9: false,
 164   $image-10: false
 165 ) {
 166   $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
 167   $add-pie-bg: prefixed(-pie,   $images) or -compass-list-size($images) > 1;
 168
 169   @if $experimental-support-for-svg          and prefixed(-svg,    $images) { background-image:    -svg($images); background-size: 100%; }
 170   @if $support-for-original-webkit-gradients and prefixed(-owg,    $images) { background-image:    -owg($images); }
 171   @if $experimental-support-for-webkit       and prefixed(-webkit, $images) { background-image: -webkit($images); }
 172   @if $experimental-support-for-mozilla      and prefixed(-moz,    $images) { background-image:    -moz($images); }
 173   @if $experimental-support-for-opera        and prefixed(-o,      $images) { background-image:      -o($images); }
 174   @if $experimental-support-for-pie          and $add-pie-bg                { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
 175   // begin patch
 176   background-image: -ms-#{$images};
 177   // end patch
 178                                                                               background-image:         $images ;
 179 }
 180
 181 /**
 182  * Creates a background gradient.
 183  *
 184  * Example usage:
 185  *     .foo {
 186  *          @include background-gradient(#808080, matte, left);
 187  *     }
 188  *
 189  * @param {Color} $bg-color The background color of the gradient
 190  * @param {String/List} [$type=$base-gradient] The type of gradient to be used. Can either
 191  * be a String which is a predefined gradient name, or it can can be a list of color stops.
 192  * If null is passed, this mixin will still set the `background-color` to $bg-color.
 193  * The available predefined gradient names are:
 194  *
 195  * * bevel
 196  * * glossy
 197  * * recessed
 198  * * matte
 199  * * matte-reverse
 200  * * panel-header
 201  * * tabbar
 202  * * tab
 203  * * tab-active
 204  * * tab-over
 205  * * tab-disabled
 206  * * grid-header
 207  * * grid-header-over
 208  * * grid-row-over
 209  * * grid-cell-special
 210  * * glossy-button
 211  * * glossy-button-over
 212  * * glossy-button-pressed
 213  *
 214  * Each of these gradient names corresponds to a function named linear-gradient[name].
 215  * Themes can override these functions to customize the color stops that they return.
 216  * For example, to override the glossy-button gradient function add a function named
 217  * "linear-gradient-glossy-button" to a file named "sass/etc/mixins/background-gradient.scss"
 218  * in your theme.  The function should return the result of calling the Compass linear-gradient
 219  * function with the desired direction and color-stop information for the gradient.  For example:
 220  *
 221  *     @function linear-gradient-glossy-button($direction, $bg-color) {
 222  *         @return linear-gradient($direction, color_stops(
 223  *             mix(#fff, $bg-color, 10%),
 224  *             $bg-color 50%,
 225  *             mix(#000, $bg-color, 5%) 51%,
 226  *             $bg-color
 227  *         ));
 228  *     }
 229  *
 230  * @param {String} [$direction=top] The direction of the gradient. Can either be
 231  * `top` or `left`.
 232  *
 233  * @member Global_CSS
 234  */
 235 @mixin background-gradient($bg-color, $type: $base-gradient, $direction: top) {
 236     background-image: none;
 237     background-color: $bg-color;
 238
 239     @if not is-null($base-gradient) and $bg-color != transparent {
 240         $gradient: null;
 241
 242         //color_stops
 243         @if type-of($type) == "list" {
 244             $gradient: linear-gradient($direction, $type);
 245         }
 246
 247         //default gradients
 248         @else if $type == bevel {
 249             $gradient: linear-gradient-bevel($direction, $bg-color);
 250         } @else if $type == glossy {
 251             $gradient: linear-gradient-glossy($direction, $bg-color);
 252         } @else if $type == recessed {
 253             $gradient: linear-gradient-recessed($direction, $bg-color);
 254         } @else if $type == matte {
 255             $gradient: linear-gradient-matte($direction, $bg-color);
 256         } @else if $type == matte-reverse {
 257             $gradient: linear-gradient-matte-reverse($direction, $bg-color);
 258         }
 259
 260         // gradients
 261         @else if $type == panel-header {
 262             $gradient: linear-gradient-panel-header($direction, $bg-color);
 263         } @else if $type == tabbar {
 264             $gradient: linear-gradient-tabbar($direction, $bg-color);
 265         } @else if $type == tab {
 266             $gradient: linear-gradient-tab($direction, $bg-color);
 267         } @else if $type == tab-active {
 268             $gradient: linear-gradient-tab-active($direction, $bg-color);
 269         } @else if $type == tab-over {
 270             $gradient: linear-gradient-tab-over($direction, $bg-color);
 271         } @else if $type == tab-disabled {
 272             $gradient: linear-gradient-tab-disabled($direction, $bg-color);
 273         } @else if $type == grid-header {
 274             $gradient: linear-gradient-grid-header($direction, $bg-color);
 275         } @else if $type == grid-header-over {
 276             $gradient: linear-gradient-grid-header-over($direction, $bg-color);
 277         } @else if $type == grid-row-over {
 278             $gradient: linear-gradient-grid-row-over($direction, $bg-color);
 279         } @else if $type == grid-cell-special {
 280             $gradient: linear-gradient-grid-cell-special($direction, $bg-color);
 281         } @else if $type == glossy-button or $type == glossy-button-disabled {
 282             $gradient: linear-gradient-glossy-button($direction, $bg-color);
 283         } @else if $type == glossy-button-over {
 284             $gradient: linear-gradient-glossy-button-over($direction, $bg-color);
 285         } @else if $type == glossy-button-pressed {
 286             $gradient: linear-gradient-glossy-button-pressed($direction, $bg-color);
 287         }
 288
 289         @if $gradient != null {
 290             @include background-image($gradient);
 291         }
 292     }
 293 }