barecss-power/less/config.less

A classless CSS framework (power) http://barecss.com

// sizes
@size-xs: 1em / 2;
@size-s:  4em / 5;
@size-l:  5em / 4;
@size-xl: 2em / 1;

// base colors
@pri-back: yellow;
@pri-text: black;
@sec-back: lightgreen;
@sec-text: black;
@def-back: white;
@def-text: black;

// padding
@pad-s: 1em;
@pad-l: 3em;
// margin
@margin-s: @pad-s;
@margin-l: @pad-l;
// border
@border-s: 0.2 * @pad-s;
// radius
@radius-s: 0.2 * @pad-s;
@radius-xl: 2.4 * @pad-s;

// set overall temperature with hue and intensity with saturation
@hue: 200;
@sat: 10%;


// blacks and greys inherit colour temperature of hue and saturation
@grey-ultralight:	hsl(@hue,@sat,96%);
@grey-light:		  hsl(@hue,@sat,90%);
@grey-mid:			  hsl(@hue,@sat,70%);
@grey-dark:			  hsl(@hue,@sat,50%);
@grey-ultradark:	hsl(@hue,@sat,30%);


// shadows
@box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);


// widths
@view-a: 200px;
@view-b: 400px;
@view-c: 800px;
@view-d: 1600px;
@view-e: 3200px;
@view-f: 6400px;
@mobile: @view-c;
@width: @view-c; // (@view-b + @view-c) / 2;


// media query
@view-an: ~'(max-width:' @view-a   ~')';
@view-ap: ~'(min-width:' @view-a+1 ~')';
@view-bn: ~'(max-width:' @view-b   ~')';
@view-bp: ~'(min-width:' @view-b+1 ~')';
@view-cn: ~'(max-width:' @view-c   ~')';
@view-cp: ~'(min-width:' @view-c+1 ~')';
@view-dn: ~'(max-width:' @view-d   ~')';
@view-dp: ~'(min-width:' @view-d+1 ~')';
@view-en: ~'(max-width:' @view-e   ~')';
@view-ep: ~'(min-width:' @view-e+1 ~')';
@view-fn: ~'(max-width:' @view-f   ~')';
@view-fp: ~'(min-width:' @view-f+1 ~')';
@mobilen: ~'(max-width:' @mobile   ~')';
@mobilep: ~'(min-width:' @mobile+1 ~')';


// lighten or darken color by a precent
.twinkle(@color, @percent) {
  x: if(luma(@color) < 50%, lighten(@color, @percent), darken(@color, @percent));
}

// set background to color difference
.backdiff(@a, @b) {
  background: difference(@a, @b);
}

.apperance(@x) {
  -webkit-appearance: @x;
  appearance: @x;
}