- .arrow(@weight, @length, @rotation, @color);
- A simple straight arrow mixin
-
Parameters and default values:
- @weight: 4px (the stroke weight of the line)
- @length: 100px (the length of the line)
- @rotation: 0deg (the direction of the arrow)
- @color: orange (self-explanatory)
- .arrow-extended(@weight, @length, @rotation, @ext-angle, @ext-length, @color);
- An arrow with an added line to make more complex paths
-
Parameters and default values:
- @weight: 4px (the stroke weight of the line)
- @length: 100px (the length of the line)
- @rotation: 0deg (the direction of the arrow)
- @ext-angle: 90deg (the direction the extra line will extend... values closer to right angles work better)
- @ext-lenght: 100px (the length of the additional line)
- @color: orange (self-explanatory)
- .circle-line(@weight, @diameter, @length, @rotation, @color);
- A line with a circle at the end for highlighting an area
-
Parameters and default values:
- @weight: 4px (the stroke weight of the line)
- @diameter: 20px (the size of the circle)
- @length: 100px (the lenght of the line)
- @rotation: 0deg (the direction of the line)
- @color: orange (self-explanatory)
- .circle-line-extended(@weight, @diameter, @length, @rotation, @ext-angle, @ext-length, @color);
- A circle-line with an additional line for complex paths
-
Parameters and default values:
- @weight: 4px (the stroke weight of the line)
- @diameter: 20px (the size of the circle)
- @length: 100px (the length of the line)
- @rotation: 0deg (the direction of the line)
- @ext-angle: 90deg (the direction of the additional line)
- @ext-length: 100px (the length of the addtional line)
- @color: orange (self-explanatory)
- .box-line(@weight, @length, @box-width, @box-height, @rotation, @color);
- A line with a box on the end for highlighting an area.
-
Parameters and default values:
- @weight: 4px (the stroke weight of the line)
- @length: 100px (the length of the line)
- @box-width: 20px (the width of the box)
- @box-height: 20px (the height of the box)
- @rotation: 0deg (the direction of the line)
- @color: orange (self-explanatory)
- .box-line-extended(@weight, @length, @box-width, @box-height, @rotation, @ext-angle, @ext-length, @color);
- A box line with an additional line for complex paths
-
Parameters and default values:
- @weight: 4px (the stroke weight of the line)
- @length: 100px (the length of the line)
- @box-width: 20px (the width of the box)
- @box-height: 20px (the height of the box)
- @rotation: 0deg (the direction of the line)
- @ext-angle: 90deg (the direction of the additional line)
- @ext-length: 100px (the length of the additional line)
- @color: orange (self-explanatory)
Additionally, add ".active" to any of these classes for a flashing animation on the line.
Image Labels
This mixin allows the easy addition of a text label to any image or div. The HTML:
<div id="labeled-img">
<img src="#" alt="" />
<p>HELLO LABEL WORLD!</p>
</div>
Apply one of the following mixins to #labeled-img in your LESS. Any direct child img of the containing div (#labeled-img in this case) will have a width of 100% applied, and any direct child p will have appropriate positioning based on the arguments passed to the mixin.
My Bottom Label
My Top Label
My Left Label
My Right Label