Skip to content

Instantly share code, notes, and snippets.

@mdarens
Created June 19, 2015 16:31
Show Gist options
  • Save mdarens/32466c72e80e8dee32c2 to your computer and use it in GitHub Desktop.
Save mdarens/32466c72e80e8dee32c2 to your computer and use it in GitHub Desktop.
quick and dirty extended bootstrap tooltips
@import "PATH/TO/bootstrap/less/variables.less";
.tooltip {
.tooltip-inner {
.classisize-inner(~"danger");
.classisize-inner(~"success");
.classisize-inner(~"warning");
.classisize-inner(~"info");
}
.tooltip-arrow {
.classisize-arrows(~"danger");
.classisize-arrows(~"success");
.classisize-arrows(~"warning");
.classisize-arrows(~"info");
}
}
.get-brand-color(@name) {
@cl-brand: "brand-@{name}";
@cl-unescape: @@cl-brand;
@cl-return: darken(@cl-unescape,8%);
}
.classisize-inner(@name) {
.get-brand-color(@name);
.@{name}& { background-color: @cl-return; }
}
.classisize-arrows(@name) {
.get-brand-color(@name);
.@{name}& { .colorize-arrows(@cl-return); }
}
.colorize-arrows(@cl-base) {
.colorize-border(top, @cl-base);
.colorize-border(right, @cl-base);
.colorize-border(bottom, @cl-base);
.colorize-border(left, @cl-base);
}
.colorize-border(@direction,@cl-base) {
.@{direction}& {
border-@{direction}-color: @cl-base;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment