Skip to content

Instantly share code, notes, and snippets.

@fredsterss fredsterss/colorblind.scss
Last active Aug 29, 2015

Embed
What would you like to do?
The code used to make Rainforest red-green colorblind compatible.
/**
* Colorblind styles for Rainforest
*
* @author Fred Stevens-Smith
* @copyright Cldrdr Inc. d/b/a Rainforest, 2014
*/
.colorblind {
$greenReplacement: #7F00FF;
$redReplacement: $orange;
.status-bubble {
&.passed .bubble { background-color: $greenReplacement; }
&.failed .bubble { background-color: $redReplacement; }
}
.browser {
&.passed {
color: $greenReplacement;
&.filled {
color: $white;
background-color: $greenReplacement;
border-color: tint($greenReplacement, 20) !important;
}
}
&.failed {
color: $redReplacement;
&.filled {
color: $white;
background-color: $redReplacement;
border-color: tint($redReplacement, 20) !important;
}
&.failureChild {
background-color: tint($redReplacement, 70);
border-color: tint($redReplacement, 60) !important;
}
}
}
.runs-view td.breakdown .passed:not(.zero) { background-color: $greenReplacement; }
.runs-view td.breakdown .failed:not(.zero) { background-color: $redReplacement; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.