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

#shape.arrow(@direction, @size, @color);

Arrow shapes take in 3 parameters:

@direction (required)
@size
@color

#shape.arrow(right);

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:

#shape.arrow(left, 40px);

To change the color (background-color), pass in a color as a 3rd parameter:

#shape.arrow(up, 2.5rem, @ocean-green);

#shape.arrow(down, 50px, @ocean-green);

Round Shape

#shape.round(@size, @color);

For round shapes you can pass in padding, width and height (as the same value) and background-color.

#shape.round();

#shape.round(1rem, @orange);

Square Shape

#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.

#shape.square();

For rounded edgeds you can pass in the 'rounded' type as the first parameter. You can also add a custom size and background color.

#shape.square(rounded, 70px, @color[secondary]);

To adjust the border radius, pass in a custom value as the 4th parameter.

#shape.square(rounded, 70px, @color[secondary], 10px);

Rectangle Shape

#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.

#shape.rectangle();

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.

#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.

#shape.rectangle(rounded, 150px, @violet);

To adjust the border radius, pass in a custom value as the 4th parameter.

#shape.rectangle(rounded, 150px, @violet, 20px);