tests/css/main.css
/**
 * @description
 * Generates keyframe animations
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-border-radius: <values>;
 *           border-radius: <values>;
 *
 * @example
 *   .selector {
 *     ._animation(jump 1s ease-out);
 *   }
 */
/**
* @description
* Generates `appearance` for a given element
*
* @author romamatusevich
*
* @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
* @link css-tricks http://css-tricks.com/almanac/properties/a/appearance/
* @link spec http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance
*
* @param value
* @returns
* -webkit-appearance: <value>;
* -moz-appearance: <value>;
* appearance: <value>;
*
* @example
*   .selector {
*       ._appearance(button);
*   }
*/
/**
 * @description
 * Generates cross-browser-compatible `border-radius` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/border-radius
 * @link spec http://www.w3.org/TR/css3-background/#corners
 *
 * @param values
 * @returns
 *   -webkit-border-radius: <values>;
 *           border-radius: <values>;
 *
 * @example
 *   .selector {
 *     ._border-radius(20px 10px);
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `box-shadow` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-boxshadow
 * @link spec http://www.w3.org/TR/css3-background/#the-box-shadow
 *
 * @param values
 * @returns
 *   -webkit-box-shadow: <values>;
 *           box-shadow: <values>;
 *
 * @example
 *   .selector {
 *     ._box-shadow(5px 5px 10px 5px #aaa);
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `box-sizing` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @param type
 * @returns
 *   -webkit-box-sizing: <type>;
 *      -moz-box-sizing: <type>;
 *           box-sizing: <type>;
 *
 * @example
 *   .selector {
 *     ._box-sizing;
 *   }
 */
/**
 * @description
 * Generates a linear gradient for a given element with a fallback color.
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @dependency helper-gradient-angle
 * @param direction {top|left}
 * @param fallback {color}
 * @param from {color}
 * @param to {color}
 * @default 'to bottom', #ccc, #ccc, #aaa
 *
 * @returns
 *   background-color: <fallback>;
 *   background-image: -webkit-linear-gradient(<direction - converted>, <from>, <to>);
 *   background-image:    -moz-linear-gradient(<direction - converted>, <from>, <to>);
 *   background-image:     -ms-linear-gradient(<direction - converted>, <from>, <to>);
 *   background-image:      -o-linear-gradient(<direction - converted>, <from>, <to>);
 *   background-image:         linear-gradient(<direction>, <from>, <to>);
 *
 * @example
 *   .selector {
 *     ._linear-gradient(top, #ccc, #ddd, #bbb);
 *   }
 */
/**
* @description
* Implement `opacity` for a given element
*
* @author romamatusevich
*
* @link spec http://www.w3.org/TR/css3-color/#transparency
* @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
*
* @param value
* @returns
* opacity: value;
* filter: alpha(opacity = value * 100);
*
* @example
*   .selector {
*       ._opacity(0.5);
*   }
*/
/**
 * @description
 * Generates `placeholder` content for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder
 * @link css-tricks http://css-tricks.com/snippets/css/style-placeholder-text/
 *
 * @returns
 *    &::-webkit-input-placeholder {
 *        color: <color>;
 *    }
 *    &::-moz-placeholder {
 *        color: <color>;
 *    }
 *    &:-ms-input-placeholder {
 *        color: <color>;
 *    }
 *
 * @example
 *   .selector {
 *     ._placeholder(#ccc);
 *   }
 */
/**
 * @description
 * This mixin will enable using the CSS3 value `rem`, which lets you define
 * property-sizes based on the root-element's font-size.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/rem
 * @link spec http://www.w3.org/TR/css3-values/#relative0
 *
 * @param property
 * @param value
 * @param default-font-size {int} optional
 * @returns
 *   <property>: (<value> * <default-font-size>)px;
 *   <property>: <value>;
 *
 * @example
 *   .selector {
 *     ._rem(font-size, 1.3);
 *   }
 *
 * Note: Depending on the font-size of the root-element `rem` calculates a
 * property of a current element. The fallback solution excepts a
 * `default-font-size`-argument which is 16px by default.
 */
/**
 * @description
 * Sass-mixin for CSS property `tab-size`, generates cross-browser-compatible
 * `tab-size` output.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css3-tabsize
 * @link spec http://dev.w3.org/csswg/css-text/#tab-size1
 *
 * @param value int optional
 * @default 4
 * @returns
 *   -moz-tab-size: <value>;
 *     -o-tab-size: <value>;
 *        tab-size: <value>;
 *
 * @example
 *   .selector {
 *     ._tab-size(4);
 *    }
 */
/**
 * @description
 * Generates cross-browser-compatible `transform` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/transforms2d http://caniuse.com/transforms3d
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-transform: <values>;
 *      -moz-transform: <values>;
 *        -o-transform: <values>;
 *       -ms-transform: <values>;
 *           transform: <values>;
 *
 * @example
 *   .selector {
 *     ._transform(rotate(1deg));
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `transition` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-transitions
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-transition: <values>;
 *      -moz-transition: <values>;
 *        -o-transition: <values>;
 *           transition: <values>;
 *
 * @example
 *   .selector {
 *     ._transition(background 0.3s ease-in);
 *   }
 */
/**
 * @description
 * Disables selection of content of a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/user-select-none
 *
 * @param value none|auto optional
 * @default none
 * @returns
 *   -webkit-user-select: <value>;
 *      -moz-user-select: <value>;
 *       -ms-user-select: <value>;
 *           user-select: <value>;
 *
 * @example
 *   .selector {
 *     .x-user-select;
 *   }
 */
html {
  width: 100%;
  max-width: 900px;
  background: #fff;
  margin: 0 auto;
  font: 15px/2 Helvetica Neue, Helvetica, sans-serif;
  color: #000;
}
.test-case {
  width: 100%;
  background: #eee;
  margin-bottom: 20px;
  border: 2px solid #aaa;
  text-align: center;
  vertical-align: middle;
}
.appearance {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}
.border-radius {
  -webkit-border-radius: 20px 10px;
  border-radius: 20px 10px;
}
.box-shadow {
  -webkit-box-shadow: 5px 5px 10px 5px #aaaaaa;
  box-shadow: 5px 5px 10px 5px #aaaaaa;
}
.box-sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 0 30px;
}
.linear-gradient {
  background-color: #cccccc;
  background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
  background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
  background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
  background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
  background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
}
.linear-gradient-2 {
  background-color: #dddddd;
  background-image: -webkit-linear-gradient(left, #dddddd, #555555);
  background-image: -moz-linear-gradient(left, #dddddd, #555555);
  background-image: -ms-linear-gradient(left, #dddddd, #555555);
  background-image: -o-linear-gradient(left, #dddddd, #555555);
  background-image: linear-gradient(to right, #dddddd, #555555);
}
.opacity {
  opacity: 0.5;
  filter: alpha(opacity = 50);
}
.placeholder::-webkit-input-placeholder {
  color: #cccccc;
}
.placeholder::-moz-placeholder {
  color: #cccccc;
}
.placeholder:-ms-input-placeholder {
  color: #cccccc;
}
.rem {
  -: ;font-size: 20.8px;
  -: ;font-size: 1.3rem;
}
.transform {
  -webkit-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  transform: rotate(1deg);
}
.transition {
  -webkit-transition: background 0.3s ease-in;
  -o-transition: background 0.3s ease-in;
  transition: background 0.3s ease-in;
}
.transition:hover {
  background: #bbb;
}
.user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
