Shapes

Arrows

Defaults

Width: 5px
Color: black

.arrow-up(@width: 5px, @color: black)

Usage

Import the transition mixin into the less file for your site or page:

@import "[path]/mixins/shapes/arrow-up.less";
@import "[path]/mixins/shapes/arrow-down.less";
@import "[path]/mixins/shapes/arrow-left.less";
@import "[path]/mixins/shapes/arrow-right.less";

OR using the absolute url:

@import "https://raw.github.com/commons/less/master/mixins/shapes/arrow-up.less";
@import "https://raw.github.com/commons/less/master/mixins/shapes/arrow-down.less";
@import "https://raw.github.com/commons/less/master/mixins/shapes/arrow-left.less";
@import "https://raw.github.com/commons/less/master/mixins/shapes/arrow-right.less";

Add an arrow to a style using defaults eg:

.someclass {  
    .arrow-up();
}

Add an arrow to a style setting a size and color

.someclass {  
    .arrow-up(20px, red);
}

Browser support

• Chrome
• Safari
• Firefox
• IE10
• Opera

Working on all above as at 27 Dec 2012

Links

Demo

Circles

Defaults

Radius: 100px
Color: black Border: none

.circle(@radius: 100px, @color: black, @border:none)

Usage

Import the transition mixin into the less file for your site or page:

@import "[path]/mixins/shapes/circle.less";

OR using the absolute url:

@import "https://raw.github.com/commons/less/master/mixins/shapes/circle.less";

Add an circle to a style using defaults eg:

.someclass {  
    .circle();  
}

Add an arrow to a style setting a size and color and border

.someclass {  
    .circle(200px, #f00, 1px solid #000);  
}

Browser support

• Chrome
• Safari
• Firefox
• IE10
• Opera

Working on all above as at 27 Dec 2012

Links

Demo

Bubbles (speech bubbles)

Defaults

Width: auto Height: auto
Margin: auto
Padding: auto
Background color: black
Hover color: #ccc
Tip position: 50%
Border radius: 15px
Tip height: 15px

bubble(@width: auto, @height: auto, @margin:auto, @padding:auto, @bgcolor: black, @hover:#ccc, @pos:50%, @radius:15px, @tip:15px )

Usage

Import the bubble mixin into the less file for your site or page:

@import "[path]/mixins/shapes/bubble.less";

OR using the absolute url:

@import "https://raw.github.com/commons/less/master/mixins/shapes/bubble.less";

Add a bubble to a style using defaults eg:

.someclass {  
    .bubble();
}

Add a bubble to a style setting all options

.someclass {  
    .bubble(200px, 200px, 20px, 20px, #f00, #c00, 25%, 20px, 20px);
}

Browser support

• Chrome
• Safari
• Firefox
• IE10
• Opera

Working on all above as at 27 Dec 2012

Links

Demo