generator-pho/app/templates/src/styles/helpers.less

Project generator that includes pho-devstack

/*
 * A collection of useful helper mixins
 *
<% if (less) { %> * - .group - clears floats, used as a wrap for column layout
 * - .pseudo([@display:block, @content:'']) - sets display and content of an
 *   element
 * - .absolute([@left:0, @top:0 | @square:0]) - positions an element absolutely
 * - .min-size([@width:0, @height:0 | @square:0])
 * - .max-size([@width:100%, @height:100% | @square:100%])
 * - .pointer-events([@value:all])
 */

.group {
  *zoom: 1;

  &:before, &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}

.pseudo (@display: block, @content: '') {
  content: @content;
  display: @display;
}

.absolute (@x: 0, @y: 0) {
  position: absolute;
  left: @x;
  top: @y;
}

.absolute (@xy: 0) {
  position: absolute;
  left: @xy;
  top: @xy;
}

.min-size(@w: 0, @h: 0) {
  min-width: @w;
  min-height: @h;
}

.min-size(@square: 0) {
  min-width: @square;
  min-height: @square;
}

.max-size(@w: 100%, @h: 100%) {
  max-width: @w;
  max-height: @h;
}

.max-size(@square: 100%) {
  max-width: @square;
  max-height: @square;
}

.pointer-events(@value:all) {
  pointer-events: @value;
  -ms-pointer-events: @value;
}
<% } if (sass) { %>
* - group - clears floats, used as a wrap for column layout
* - pseudo([$display:block, $content:'']) - sets display and content of an
*   element
* - absolute([$left:0, $top:0 | $square:0]) - positions an element absolutely
* - min-size([$width:0, $height:0 | $square:0])
* - max-size([$width:100%, $height:100% | $square:100%])
* - pointer-events([$value:all])
*/

@mixin group {
*zoom: 1;

&:before, &:after {
  content: " ";
  display: table;
}

&:after {
  clear: both;
}
}

@mixin pseudo ($display: block, $content: '') {
content: $content;
  display: $display;
}

@mixin absolute ($x: 0, $y: 0) {
  position: absolute;
  left: $x;
  top: $y;
}

@mixin absolute ($xy: 0) {
  position: absolute;
  left: $xy;
  top: $xy;
}

@mixin min-size($w: 0, $h: 0) {
  min-width: $w;
  min-height: $h;
}

@mixin min-size($square: 0) {
  min-width: $square;
  min-height: $square;
}

@mixin max-size($w: 100%, $h: 100%) {
  max-width: $w;
  max-height: $h;
}

@mixin max-size($square: 100%) {
  max-width: $square;
  max-height: $square;
}

@mixin pointer-events($value:all) {
  pointer-events: $value;
  -ms-pointer-events: $value;
}
<% } %>