Source: lib/shortcuts.less

/**
 * Apply a FontAwesome icon on a Semantic element and hide the semantic content.
 * @function .create-icon
 * @param {string} @class - To which class apply the icon.
 * @param {number} @value - What is the icon to apply.
 * @example <!-- Html -->
 * <div class="ui share">
 *     <!-- ... -->
 *     <a href class="facebook"><span>Facebook</span></a>
 *     <!-- ... -->
 * </div>
 * // Less
 * .share {
 *     .create-icon(e("facebook"), @fa-var-facebook);
 * }
 */
.create-icon(@class, @value) {
	.@{class} {
		> span {display: none;}
		.fa-icon();
		&:before {
			content: @value;
		}
	}
}

/**
 * Set the font size in px and just after in rem with rapport 10px == 1rem.
 * @function .font-size
 * @param {number} @sizeValue - Set the size in rem (will be auto convert in px).
 */
.font-size(@sizeValue) {
    @remValue: @sizeValue;
    @pxValue: (@sizeValue * 10);
    font-size: ~"@{pxValue}px";
    font-size: ~"@{remValue}rem";
}


/**
 * Allow `width` to get and set the `width + padding-left + padding-right`
 * and `height` to get and set the `height + padding-left + padding-right`
 * value on all markup.
 * @mixin .box-sizing-border-box
 */
.box-sizing-border-box {
	* {
	 	-webkit-box-sizing: border-box;
	  	   -moz-box-sizing: border-box;
	   		    box-sizing: border-box;
    }
}

/**
 * Avoid floating Grid HTMLElement to float on next HTMLElement.
 * @mixin .clear-left
 */
.clear-left {
	&:after {
		content: "";
		display: block;
		clear: left;
	}
}


/**
 * A shortcut for all prefixe of `transform: @value;`.
 * @function .transform
 * @param {string} @value - Set a transformation directive.
 */
.transform(@value) {
	-webkit-transform: @value;
	   -moz-transform: @value;
		-ms-transform: @value;
		 -o-transform: @value;
			transform: @value;
}

/**
 * A shortcut for all prefixe of `transition: @value;`.
 * @function .transform
 * @param {string} @value - Set a transition directive.
 */
.transition(@value) {
	-webkit-transition: @value;
	   -moz-transition: @value;
	    -ms-transition: @value;
	     -o-transition: @value;
	        transition: @value;
}

/**
 * A shortcut for all prefixe of `transform: rotate(@value);`.
 * @function .rotate
 * @param {string} @value - Set the offset of rotation.
 */
.rotate(@value) {
	-webkit-transform: rotate(@value);
	   -moz-transform: rotate(@value);
		-ms-transform: rotate(@value);
		 -o-transform: rotate(@value);
			transform: rotate(@value);
}

/**
 * A shortcut for all prefixe of `transform: translateX(@value);`.
 * @function .translate-X
 * @param {string} @value - Set the offset of translation.
 */
.translate-x(@value) {
	-webkit-transform: translateX(@value);
	   -moz-transform: translateX(@value);
		-ms-transform: translateX(@value);
		 -o-transform: translateX(@value);
			transform: translateX(@value);
}

/**
 * A shortcut for all prefixe of `transform: translateY(@value);`.
 * @function .translate-y
 * @param {string} @value - Set the offset of translation.
 */
.translate-y(@value) {
	-webkit-transform: translateY(@value);
	   -moz-transform: translateY(@value);
		-ms-transform: translateY(@value);
		 -o-transform: translateY(@value);
			transform: translateY(@value);
}

/**
 * A shortcut for all prefixe of `transform: translate(@value, @valueY)`.
 * @function .translate-xy
 * @param {string} @value - Set the offset of X translation.
 * @param {string} @valueY - Set the offset of Y translation.
 */
.translate-xy(@value, @valueY) {
	-webkit-transform: translate(@value, @valueY);
	   -moz-transform: translate(@value, @valueY);
		-ms-transform: translate(@value, @valueY);
		 -o-transform: translate(@value, @valueY);
			transform: translate(@value, @valueY);
}

/**
 * Avoid transformation.
 * @mixin .transform-none
 */
.transform-none {
	-webkit-transform: none;
	   -moz-transform: none;
		-ms-transform: none;
		 -o-transform: none;
			transform: none;
}