Skip to content

Instantly share code, notes, and snippets.

@4foot30

4foot30/arrows.less

Created September 12, 2016 09:19
Show Gist options
  • Save 4foot30/585c510f86751dc661070828e9daf742 to your computer and use it in GitHub Desktop.
Save 4foot30/585c510f86751dc661070828e9daf742 to your computer and use it in GitHub Desktop.
Download ZIP
For drawing arrows with CSS (Bootstrap buttons, good but produces large CSS!)
Raw
arrows.less
// Add arrows to element
// Inner arrow is the main arrow colour, outer arrow drawn underneath forms
// the border/stroke around the inner arrow.
// Arrows default to colours and sizes that match Bootstrap's .btn-default
.arrow--left(@style: 'default',
@size: 'base',
@inner-arrow-color: color(~'@{btn-@{style}-bg}'),
@outer-arrow-color: color(~'@{btn-@{style}-border}'),
@inner-arrow-color-hover: darken(@inner-arrow-color, 10%),
@outer-arrow-color-hover: darken(@outer-arrow-color, 12%),
@inner-arrow-color-focus: darken(@inner-arrow-color, 10%),
@outer-arrow-color-focus: darken(@outer-arrow-color, 25%),
@inner-arrow-color-active: darken(@inner-arrow-color, 10%),
@outer-arrow-color-active: darken(@outer-arrow-color, 12%),
@inner-arrow-color-focus-active: darken(@inner-arrow-color, 17%),
@outer-arrow-color-focus-active: darken(@outer-arrow-color, 25%),
@border-top-width: 0,
@border-bottom-width: 0,
@border-right-width: 0,
@inner-arrow-x: 0,
@outer-arrow-x: 0,
@arrows-y: 0) {
// Seems you can't run Maths operations on the values of dynamically
// created variable names because the values become strings.
// Use guard mixins instead:
.setBorders() when (@size = 'xs') {
@border-top-width: ((round(@font-size-small * @line-height-small) + (@padding-xs-vertical * 2)) / 2);
@border-bottom-width: @border-top-width;
@border-right-width: round(@font-size-small * @line-height-small);
@inner-arrow-x: -(@border-right-width - 1);
@outer-arrow-x: -(@border-right-width + 1);
padding-left: @padding-xs-horizontal / 2;
}
.setBorders() when (@size = 'small') {
@border-top-width: ((round(@font-size-small * @line-height-small) + (@padding-small-vertical * 2)) / 2);
@border-bottom-width: @border-top-width;
@border-right-width: round(@font-size-small * @line-height-small);
@inner-arrow-x: -(@border-right-width - 1);
@outer-arrow-x: -(@border-right-width + 1);
padding-left: @padding-small-horizontal / 2;
}
.setBorders() when (@size = 'base') {
@border-top-width: ((round(@font-size-base * @line-height-base) + (@padding-base-vertical * 2)) / 2);
@border-bottom-width: @border-top-width;
@border-right-width: round(@font-size-base * @line-height-base);
@inner-arrow-x: -(@border-right-width - 1);
@outer-arrow-x: -(@border-right-width + 1);
padding-left: @padding-base-horizontal / 2;
}
.setBorders() when (@size = 'large') {
@border-top-width: ((round(@font-size-large * @line-height-large) + (@padding-large-vertical * 2)) / 2);
@border-bottom-width: @border-top-width;
@border-right-width: round(@font-size-large * @line-height-large);
@inner-arrow-x: -(@border-right-width - 1);
@outer-arrow-x: -(@border-right-width + 1);
padding-left: @padding-large-horizontal / 2;
}
// Call the setBorders mixin, to make borders variables available to the calling context (i.e. .arrow--left)
.setBorders();
position: relative;
margin-left: @border-right-width;
&:before, &:after {
border-top: @border-top-width solid transparent;
border-bottom: @border-bottom-width solid transparent;
// Fix jagged edges in Firefox
-moz-transform: scale(.9999);
content: '';
position: absolute;
top: @arrows-y;
.transition(~'color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease');
}
&:before {
border-right-width: @border-right-width;
border-right-style: solid;
border-right-color: @outer-arrow-color;
left: @outer-arrow-x;
}
&:after {
border-right-width: @border-right-width;
border-right-style: solid;
border-right-color: @inner-arrow-color;
left: @inner-arrow-x;
}
&:hover {
&:before {
border-right-color: @outer-arrow-color-hover;
}
&:after {
border-right-color: @inner-arrow-color-hover;
}
}
&:focus {
&:before {
border-right-color: @outer-arrow-color-focus;
}
&:after {
border-right-color: @inner-arrow-color-focus;
}
}
&:active {
&:before {
border-right-color: @outer-arrow-color-active;
}
&:after {
border-right-color: @inner-arrow-color-active;
}
}
&:hover, &:focus {
&:active {
&:before {
border-right-color: @outer-arrow-color-focus-active;
}
&:after {
border-right-color: @inner-arrow-color-focus-active;
}
}
}
}
.arrow--right(@style: 'default',
@size: 'base',
@inner-arrow-color: color(~'@{btn-@{style}-bg}'),
@outer-arrow-color: color(~'@{btn-@{style}-border}'),
@inner-arrow-color-hover: darken(@inner-arrow-color, 10%),
@outer-arrow-color-hover: darken(@outer-arrow-color, 12%),
@inner-arrow-color-focus: darken(@inner-arrow-color, 10%),
@outer-arrow-color-focus: darken(@outer-arrow-color, 25%),
@inner-arrow-color-active: darken(@inner-arrow-color, 10%),
@outer-arrow-color-active: darken(@outer-arrow-color, 12%),
@inner-arrow-color-focus-active: darken(@inner-arrow-color, 17%),
@outer-arrow-color-focus-active: darken(@outer-arrow-color, 25%),
@border-top-width: 0,
@border-bottom-width: 0,
@border-left-width: 0,
@inner-arrow-x: 0,
@outer-arrow-x: 0,
@arrows-y: 0) {
// Seems you can't run Maths operations on the values of dynamically
// created variable names because the values become strings.
// Use guard mixins instead:
.setBorders() when (@size = 'xs') {
@border-top-width: ((round(@font-size-small * @line-height-small) + (@padding-xs-vertical * 2)) / 2);
@border-bottom-width: @border-top-width;
@border-left-width: round(@font-size-small * @line-height-small);
@inner-arrow-x: -(@border-left-width - 1);
@outer-arrow-x: -(@border-left-width + 1);
padding-right: @padding-xs-horizontal / 2;
}
.setBorders() when (@size = 'small') {
@border-top-width: ((round(@font-size-small * @line-height-small) + (@padding-small-vertical * 2)) / 2);
@border-bottom-width: @border-top-width;
@border-left-width: round(@font-size-small * @line-height-small);
@inner-arrow-x: -(@border-left-width - 1);
@outer-arrow-x: -(@border-left-width + 1);
padding-right: @padding-small-horizontal / 2;
}
.setBorders() when (@size = 'base') {
@border-top-width: ((round(@font-size-base * @line-height-base) + (@padding-base-vertical * 2)) / 2);
@border-bottom-width: @border-top-width;
@border-left-width: round(@font-size-base * @line-height-base);
@inner-arrow-x: -(@border-left-width - 1);
@outer-arrow-x: -(@border-left-width + 1);
padding-right: @padding-base-horizontal / 2;
}
.setBorders() when (@size = 'large') {
@border-top-width: ((round(@font-size-large * @line-height-large) + (@padding-large-vertical * 2)) / 2);
@border-bottom-width: @border-top-width;
@border-left-width: round(@font-size-large * @line-height-large);
@inner-arrow-x: -(@border-left-width - 1);
@outer-arrow-x: -(@border-left-width + 1);
padding-right: @padding-large-horizontal / 2;
}
// Call the setBorders mixin, to make borders variables available to the calling context (i.e. .arrow--right)
.setBorders();
position: relative;
margin-right: @border-left-width;
&:before, &:after {
border-top: @border-top-width solid transparent;
border-bottom: @border-bottom-width solid transparent;
// Fix jagged edges in Firefox
-moz-transform: scale(.9999);
content: '';
position: absolute;
top: @arrows-y;
.transition(~'color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease');
}
&:before {
border-left-width: @border-left-width;
border-left-style: solid;
border-left-color: @outer-arrow-color;
right: @outer-arrow-x;
}
&:after {
border-left-width: @border-left-width;
border-left-style: solid;
border-left-color: @inner-arrow-color;
right: @inner-arrow-x;
}
&:hover {
&:before {
border-left-color: @outer-arrow-color-hover;
}
&:after {
border-left-color: @inner-arrow-color-hover;
}
}
&:focus {
&:before {
border-left-color: @outer-arrow-color-focus;
}
&:after {
border-left-color: @inner-arrow-color-focus;
}
}
&:active {
&:before {
border-left-color: @outer-arrow-color-active;
}
&:after {
border-left-color: @inner-arrow-color-active;
}
}
&:hover, &:focus {
&:active {
&:before {
border-left-color: @outer-arrow-color-focus-active;
}
&:after {
border-left-color: @inner-arrow-color-focus-active;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment