<div class="swatch swatch--left"></div>
<div class="swatch swatch--right"></div>

<div class="reference">
    <ul>
        <li><a href="http://caniuse.com/#search=linear-gradient" target="_blank">Can I use&hellip; linear gradients</a></li>
        <li><a href="http://caniuse.com/#feat=css-backgroundblendmode" target="_blank">Can I use&hellip; background blend mode</a></li>
    </ul>
</div>

/* Slack CSS background patterns using linear gradients.

Both examples use linear gradients and background blend modes, which do not work in every browser.

Compatibilty reference:
- http://caniuse.com/#search=linear-gradient
- http://caniuse.com/#feat=css-backgroundblendmode
*/

$slack_cream: rgb(241, 228, 212);
$slack_yellow: rgba(234, 168, 32, 0.75);
$slack_green: rgba(63, 185, 146, 0.75);
$slack_pink: rgba(224, 21, 100, 0.75);
$slack_blue: rgba(111, 202, 221, 0.75);

// Rather use official brand colors? Use the variables below:
// https://brandcolors.net
// $slack_yellow: #e9a820;
// $slack_green: #3eb991;
// $slack_pink: #e01563;
// $slack_blue: #6ecadc;

// A linear background, which looks good until you try to rotate it
%pattern_slack_linear {
    background-blend-mode: darken;
    background-color: $slack_cream;
    background-image:
        linear-gradient(0deg, transparent 25%, $slack_yellow 25%, $slack_yellow 50%, transparent 50%, transparent),
        linear-gradient(0deg, transparent 75%, $slack_green 75%, $slack_green 100%, transparent 100%, transparent),
        linear-gradient(90deg, transparent 25%, $slack_pink 25%, $slack_pink 50%, transparent 50%, transparent),
        linear-gradient(90deg, transparent 75%, $slack_blue 75%, $slack_blue 100%, transparent 100%, transparent);
    background-size: 200px 200px;
}

// A repeating linear background, which does rotate nicely
%pattern_slack_repeating {
    $slack_stop_size: 50px;
    $slack_rotation: 45deg;

    background-blend-mode: darken;
    background-color: $slack_cream;
    background-image:
        repeating-linear-gradient($slack_rotation,
            transparent $slack_stop_size,
            transparent $slack_stop_size * 2,
            $slack_pink $slack_stop_size * 2,
            $slack_pink $slack_stop_size * 3,
            transparent $slack_stop_size * 3,
            transparent $slack_stop_size * 4,
            $slack_blue $slack_stop_size * 4,
            $slack_blue $slack_stop_size * 5,
            transparent $slack_stop_size * 5
        ),
        repeating-linear-gradient($slack_rotation + 90,
            transparent $slack_stop_size,
            transparent $slack_stop_size * 2,
            $slack_yellow $slack_stop_size * 2,
            $slack_yellow $slack_stop_size * 3,
            transparent $slack_stop_size * 3,
            transparent $slack_stop_size * 4,
            $slack_green $slack_stop_size * 4,
            $slack_green $slack_stop_size * 5,
            transparent $slack_stop_size * 5
        );
}

.swatch, .reference {
    float: left;
    margin: 0.5em;
}

.swatch {
    height: 15em;
    width: 30em;
}

.swatch--left {
    @extend %pattern_slack_linear;
}

.swatch--right {
    @extend %pattern_slack_repeating;
}