Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Atom.io styles for rainbow indent guides. Yay rainbows!
/*
* Atom Stylesheet
*
* .generate-indents(): makes pretty indent guides.
* Enable 'Settings' -> 'Show Indent Guide' and taste the rainbow!
*
*/
// Default and base colors for indent guides
@indentColor: hsla(345, 100%, 55%, .3); // Manipulate this to make pretty
@defaultColor: hsla(1, 0%, 80%, 0.80); // Color for undefined indents
// Recursively generate alternating color bars for indent guides
// @num: total number of colored rows (others will get @defaultColor)
// @steps: how many steps of color. Repeat until @num is reached.
// @i: index for recursive calls.
.generate-indents(@num: 1; @steps: 1; @i: 0) when (@i < @num) {
@this_num: @i + 1; // @i counter is zero indexed, so kick it up
@this_step: mod(@i, @steps) + 1; // @steps drives subdivison frequency
@this_step_multiplier: mod(@i, @steps) / @steps; // for percentages
@step_percent: percentage( 1 / (@num/@steps) );
@this_step_percent: @this_step_multiplier * @step_percent;
@num_groups: @num / @steps; // How many 'groups' will repeat
@this_group: ceil( @this_num / @num * @steps ); // current group
@this_group_multiplier: @this_group / @steps; //
@this_group_percent: percentage(@this_group_multiplier);
&:nth-child(@{this_num}) {
color: fadein(
spin( @indentColor, round(@this_step_multiplier * 360) ),
@this_group_percent
);
}
.generate-indents(@num:@num; @steps: @steps; @i:(@i + 1));
}
.tree-view {
}
.editor {
.indent-guide {
// default indent level color
color: @defaultColor;
// Start generating colors!
// @num should be larger than and divisible by @steps.
.generate-indents(@num:12; @steps: 6;);
}
}
.editor .cursor {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment