utils.less

// function border radius 
.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
      -ms-border-radius: @radius;
       -o-border-radius: @radius;
  border-radius: @radius;
}

// Geometrical shapes
.square(@size, @color) {
  height: @size;
  width: @size;
  background-color: @color;
}

.circle(@size, @color) {
  height: @size;
  width: @size;
  .border-radius(50%); 
}

.bottom-triangle(@color: #fff) {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  border: 15px solid transparent;
  border-top-color: @color;
  margin-left: 35px; //set these as per requirement.
  margin-top: 65px; // set these as per requirement.
}

.right-triangle(@color: #eee) {
  .parent-container:before {
    width: 0;
    height: 0;
    position: absolute;
    right: -10px;
    top: 30px;
    content: "";
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid @color;
  }
}

.container-padding(@width:0px) {
  padding-left: @width;
  padding-right: @width;
}

.button-color(@font:24px, @padding:30px, @color) {
  background-color: @color;
  font-size: @font;
  font-weight: bold;
  color: white;
  padding-left: @padding;
  padding-right: @padding;
}

.container-margin(@value:30px) {
  margin-top: @value;
  margin-bottom: @value;
}

//circle with a central texts
.small-circle(@color, @radius, @color-point: #fff) {
  .circle(@radius, @color);
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  background-color: @color;
  .point { // class of the text
    color: @color-point;
    font-weight: bold;
    padding: 24px;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
  }
}


.dialog-box(@padding, @radius, @width) {
  padding: @padding;
  background-color: @gray-lighter;
  .border-radius(@radius);
  max-width: @width;
}

.container-widget(@background: #fff){
  background: @background;
  .box-shadow(0 2px 6px darken(@gray-light, 10%));
}

.top-border-radius(@radius) {
  border-top-right-radius: @radius;
  border-top-left-radius: @radius;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.bottom-border-radius(@radius) {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: @radius;
  border-bottom-left-radius: @radius;
}