add extjs 6.0.1 sources

[extjs.git] / extjs / modern / theme-base / sass / etc / recipes / gradients.scss

/**\r
 * @class Global_CSS\r
 */\r
\r
@import "compass/css3/images";\r
\r
$default-gradient: matte !default;\r
$support-for-original-webkit-gradients: false;\r
\r
/**\r
 * Adds a background gradient into a specified selector.\r
 *\r
 *     @include background-gradient(#444, 'glossy');\r
 *\r
 * You can also use color-stops if you want full control of the gradient:\r
 *\r
 *     @include background-gradient(#444, color-stops(#333, #222, #111));\r
 *\r
 * @param {Color} $bg-color\r
 * The base color of the gradient.\r
 *\r
 * @param {String/List} [$type=matte]\r
 * The style of the gradient, one of five pre-defined options: matte, bevel, glossy, recessed, or linear:\r
 *\r
 *     @include background-gradient(red, 'glossy');\r
 *\r
 * It can also accept a list of color-stop values:;\r
 *\r
 *     @include background-gradient(black, color-stops(#333, #111, #000));\r
 *\r
 * Values 'flat' and 'none' will result in no gradient, just flat background-color\r
 *\r
 * @param {String} $direction\r
 * The direction of the gradient.\r
 */\r
@mixin background-gradient($bg-color, $type: $default-gradient, $direction: top, $contrast: 1) {\r
    $flat: $type == null or $type == none or $type == flat;\r
\r
    @if $flat or ($bg-color == transparent) {\r
        background-color: $bg-color;\r
\r
        @if $bg-color != null {\r
            // invoking this mixin with null, none, or flat as the $type parameter means\r
            // "no gradient" so make sure we don't inherit one via the cascade\r
            background-image: none;\r
        }\r
    }\r
\r
    @if not $flat {\r
        @if type-of($type) == "list" {\r
            // Color stops provided - no $bg-color required\r
            @include background-image(linear-gradient($direction, $type));\r
        } @else if $bg-color != transparent {\r
            // Named gradients\r
            @if $bg-color == null {\r
                @warn '@background-gradient: $bg-color is required for named gradient "#{$type}"';\r
            } @else if $type == bevel {\r
                @include background-image(bevel-gradient($bg-color, $direction, $contrast));\r
            } @else if $type == glossy {\r
                @include background-image(glossy-gradient($bg-color, $direction, $contrast));\r
            } @else if $type == recessed {\r
                @include background-image(recessed-gradient($bg-color, $direction, $contrast));\r
            } @else if $type == linear {\r
                @include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 5%), darken($bg-color, 10%))));\r
            } @else if $type == matte {\r
                @include background-image(matte-gradient($bg-color, $direction, $contrast));\r
            } @else {\r
                @warn '@background-gradient: invalid gradient name "#{$type}"';\r
            }\r
        }\r
    }\r
}\r
\r
// These are functions so they can be combined together with background-image()// ie. @include background-image(background_noise(), glossy-gradient());\r
\r
@function bevel-gradient($bg-color: $base-color, $direction: top, $contrast: 1) {\r
    @return linear-gradient($direction, color_stops(\r
        lighten($bg-color, 15%),\r
        lighten($bg-color, 8%) 30%,\r
        $bg-color 65%,\r
        darken($bg-color, 6%)\r
    ));\r
}\r
\r
@function glossy-gradient($bg-color: $base-color, $direction: top, $contrast: 1) {\r
    @return linear-gradient($direction, color_stops(lighten($bg-color, 15% * $contrast), lighten($bg-color, 5% * $contrast) 50%, $bg-color 51%, darken($bg-color, 5% * $contrast)));\r
}\r
\r
@function recessed-gradient($bg-color: $base-color, $direction: top, $contrast: 1) {\r
    @return linear-gradient($direction, color_stops(darken($bg-color, 10% * $contrast), darken($bg-color, 5% * $contrast) 10%, $bg-color 65%, lighten($bg-color, .5% * $contrast)));\r
}\r
\r
@function matte-gradient (\r
    $bg-color: $base-color,\r
    $direction: top,\r
    $contrast: 1\r
) {\r
    @return linear-gradient(\r
        $direction,\r
        color_stops(\r
            lighten($bg-color, 15% * $contrast),\r
            lighten($bg-color, 5% * $contrast) 3%,\r
            darken($bg-color, 5% * $contrast)\r
        )\r
    );\r
}\r