Shape mixins

Mixins to style elements as shapes

Shape mixins currently supports 4 configurable shape types, and are designed to have the bare minimum styles to display an element as a shape. If the element has any child elements or text inside you may have to add additional styles to adjust the presentation of the child elements or text to taste.
  • arrow
  • round
  • square
  • rectangle

Arrow Shape

1#shape.arrow(@direction, @size, @color);
Arrow shapes take in 3 parameters:
  • @direction (required)
  • @size
  • @color
By default the size is set to 1rem and the colour is set to the @color[primary] setting. To change the size pass in a size value:
1#shape.arrow(left, 40px);
To change the color (background-color), pass in a color as a 3rd parameter:
1#shape.arrow(up, 2.5rem, @ocean-green);
1#shape.arrow(down, 50px, @ocean-green);

Round Shape

1#shape.round(@size, @color);
For round shapes you can pass in padding, width and height (as the same value) and background-color.
1#shape.round(1rem, @orange);

Square Shape

1#shape.square(@type, @size, @background);
Square shapes take 3 parameters. By default, the size is set to 100px and the background color defaults to the @color[primary] setting.
For rounded edgeds you can pass in the 'rounded' type as the first parameter. You can also add a custom size and background color.
1#shape.square(rounded, 70px, @color[secondary]);
To adjust the border radius, pass in a custom value as the 4th parameter.
1#shape.square(rounded, 70px, @color[secondary], 10px);

Rectangle Shape

1#shape.rectangle(@type, @size, @background);
Similar to the square shape mixin, rectangle shapes take in the same parameters of type, size and background color. The difference between the 2 is that the size of the square shape is an equal width and height value, and the rectangle divides the given size (width) value by 3 to caluclate the height value.
By default, the rectangle shape will have a size value of 100px, therefore the width will be 100px and height will be 33.333333px, and the background color will default to the @color[primary] setting. You can change the size by specifying a size value and change the backgound color by passing it in as a parameter.
1#shape.rectangle(200px, @crimson);
For rounded edges, pass in 'rounded' as the first parameter. The border radius value is set to the @settings[radius] value, which in this case is set to 4px.
1#shape.rectangle(rounded, 150px, @violet);
To adjust the border radius, pass in a custom value as the 4th parameter.
1#shape.rectangle(rounded, 150px, @violet, 20px);