Your IP : 10.10.0.253


Current Path : /var/www/templates/shaper_helix3/less/
Upload File :
Current File : /var/www/templates/shaper_helix3/less/mixins.less

// Vendor Prefixes
//
// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
// Autoprefixer in our Gruntfile. They will be removed in v4.

// - Animations
// - Backface visibility
// - Box shadow
// - Box sizing
// - Content columns
// - Hyphens
// - Placeholder text
// - Transformations
// - Transitions
// - User Select

.clearfix() {
	&:before,
	&:after {
		content: " "; // 1
		display: table; // 2
	}
	&:after {
		clear: both;
	}
}

// Animations
.animation(@animation) {
	-webkit-animation: @animation;
	-o-animation: @animation;
	animation: @animation;
}
.animation-name(@name) {
	-webkit-animation-name: @name;
	animation-name: @name;
}
.animation-duration(@duration) {
	-webkit-animation-duration: @duration;
	animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
	-webkit-animation-timing-function: @timing-function;
	animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
	-webkit-animation-delay: @delay;
	animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
	-webkit-animation-iteration-count: @iteration-count;
	animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
	-webkit-animation-direction: @direction;
	animation-direction: @direction;
}
.animation-fill-mode(@fill-mode) {
	-webkit-animation-fill-mode: @fill-mode;
	animation-fill-mode: @fill-mode;
}

// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`

.backface-visibility(@visibility) {
	-webkit-backface-visibility: @visibility;
	-moz-backface-visibility: @visibility;
	backface-visibility: @visibility;
}

// Drop shadows
//
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
// supported browsers that have box shadow capabilities now support it.

.box-shadow(@shadow) {
	-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
	box-shadow: @shadow;
}

// Box sizing
.box-sizing(@boxmodel) {
	-webkit-box-sizing: @boxmodel;
	-moz-box-sizing: @boxmodel;
	box-sizing: @boxmodel;
}

// CSS3 Content Columns
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
	-webkit-column-count: @column-count;
	-moz-column-count: @column-count;
	column-count: @column-count;
	-webkit-column-gap: @column-gap;
	-moz-column-gap: @column-gap;
	column-gap: @column-gap;
}

// Optional hyphenation
.hyphens(@mode: auto) {
	word-wrap: break-word;
	-webkit-hyphens: @mode;
	-moz-hyphens: @mode;
	-ms-hyphens: @mode; // IE10+
	-o-hyphens: @mode;
	hyphens: @mode;
}

.form-control {
	display: block;
	height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
	padding: @padding-base-vertical @padding-base-horizontal;
	font-size: @font-size-base;
	line-height: @line-height-base;
	color: @input-color;
	background-color: @input-bg;
	background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
	border: 1px solid @input-border;
	border-radius: @input-border-radius;
	.box-shadow(inset 0 1px 1px rgba(0,0,0,0.075));
	.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");

	// Customize the `:focus` state to imitate native WebKit styles.
	.form-control-focus();

	// Placeholder
	.placeholder();

	// Disabled and read-only inputs
	//
	// HTML5 says that controls under a fieldset > legend:first-child won't be
	// disabled if the fieldset is disabled. Due to implementation difficulty, we
	// don't honor that edge case; we style them as disabled anyway.
	&[disabled],
	&[readonly],
	fieldset[disabled] & {
		cursor: @cursor-disabled;
		background-color: @input-bg-disabled;
		opacity: 1; // iOS fix for unreadable disabled content
	}

	// Reset height for `textarea`s
	textarea& {
		height: auto;
	}
}

.form-control-focus(@color: @input-border-focus) {
	@color-rgba: rgba(red(@color), green(@color), blue(@color), 0.6);
	&:focus {
		border-color: @color;
		outline: 0;
		.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
	}
}

// Placeholder text
.placeholder(@color: @input-color-placeholder) {
	// Firefox
	&::-moz-placeholder {
		color: @color;
		opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
	}
	&:-ms-input-placeholder {
		color: @color;
	} // Internet Explorer 10+
	&::-webkit-input-placeholder {
		color: @color;
	} // Safari and Chrome
}

// Transformations
.scale(@ratio) {
	-webkit-transform: scale(@ratio);
	-ms-transform: scale(@ratio); // IE9 only
	-o-transform: scale(@ratio);
	transform: scale(@ratio);
}
.scale(@ratioX; @ratioY) {
	-webkit-transform: scale(@ratioX, @ratioY);
	-ms-transform: scale(@ratioX, @ratioY); // IE9 only
	-o-transform: scale(@ratioX, @ratioY);
	transform: scale(@ratioX, @ratioY);
}
.scaleX(@ratio) {
	-webkit-transform: scaleX(@ratio);
	-ms-transform: scaleX(@ratio); // IE9 only
	-o-transform: scaleX(@ratio);
	transform: scaleX(@ratio);
}
.scaleY(@ratio) {
	-webkit-transform: scaleY(@ratio);
	-ms-transform: scaleY(@ratio); // IE9 only
	-o-transform: scaleY(@ratio);
	transform: scaleY(@ratio);
}
.skew(@x; @y) {
	-webkit-transform: skewX(@x) skewY(@y);
	-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
	-o-transform: skewX(@x) skewY(@y);
	transform: skewX(@x) skewY(@y);
}
.translate(@x; @y) {
	-webkit-transform: translate(@x, @y);
	-ms-transform: translate(@x, @y); // IE9 only
	-o-transform: translate(@x, @y);
	transform: translate(@x, @y);
}
.translate3d(@x; @y; @z) {
	-webkit-transform: translate3d(@x, @y, @z);
	transform: translate3d(@x, @y, @z);
}
.rotate(@degrees) {
	-webkit-transform: rotate(@degrees);
	-ms-transform: rotate(@degrees); // IE9 only
	-o-transform: rotate(@degrees);
	transform: rotate(@degrees);
}
.rotateX(@degrees) {
	-webkit-transform: rotateX(@degrees);
	-ms-transform: rotateX(@degrees); // IE9 only
	-o-transform: rotateX(@degrees);
	transform: rotateX(@degrees);
}
.rotateY(@degrees) {
	-webkit-transform: rotateY(@degrees);
	-ms-transform: rotateY(@degrees); // IE9 only
	-o-transform: rotateY(@degrees);
	transform: rotateY(@degrees);
}
.perspective(@perspective) {
	-webkit-perspective: @perspective;
	-moz-perspective: @perspective;
	perspective: @perspective;
}
.perspective-origin(@perspective) {
	-webkit-perspective-origin: @perspective;
	-moz-perspective-origin: @perspective;
	perspective-origin: @perspective;
}
.transform-origin(@origin) {
	-webkit-transform-origin: @origin;
	-moz-transform-origin: @origin;
	-ms-transform-origin: @origin; // IE9 only
	transform-origin: @origin;
}

// Transitions

.transition(@transition) {
	-webkit-transition: @transition;
	-o-transition: @transition;
	transition: @transition;
}
.transition-property(@transition-property) {
	-webkit-transition-property: @transition-property;
	transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
	-webkit-transition-delay: @transition-delay;
	transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
	-webkit-transition-duration: @transition-duration;
	transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
	-webkit-transition-timing-function: @timing-function;
	transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
	-webkit-transition: -webkit-transform @transition;
	-moz-transition: -moz-transform @transition;
	-o-transition: -o-transform @transition;
	transition: transform @transition;
}

// User select
// For selecting text on the page

.user-select(@select) {
	-webkit-user-select: @select;
	-moz-user-select: @select;
	-ms-user-select: @select; // IE10+
	user-select: @select;
}

// Gradients

#gradient {
	// Horizontal gradient, from left to right
	//
	// Creates two color stops, start and end, by specifying a color and position for each color stop.
	// Color stops are not available in IE9 and below.
	.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
		background-image: -webkit-linear-gradient(
			left,
			@start-color @start-percent,
			@end-color @end-percent
		); // Safari 5.1-6, Chrome 10+
		background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12
		background-image: linear-gradient(
			to right,
			@start-color @start-percent,
			@end-color @end-percent
		); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
		background-repeat: repeat-x;
		filter: e(
			%(
				"progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",
				argb(@start-color),
				argb(@end-color)
			)
		); // IE9 and down
	}

	// Vertical gradient, from top to bottom
	//
	// Creates two color stops, start and end, by specifying a color and position for each color stop.
	// Color stops are not available in IE9 and below.
	.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
		background-image: -webkit-linear-gradient(
			top,
			@start-color @start-percent,
			@end-color @end-percent
		); // Safari 5.1-6, Chrome 10+
		background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12
		background-image: linear-gradient(
			to bottom,
			@start-color @start-percent,
			@end-color @end-percent
		); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
		background-repeat: repeat-x;
		filter: e(
			%(
				"progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
				argb(@start-color),
				argb(@end-color)
			)
		); // IE9 and down
	}

	.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
		background-repeat: repeat-x;
		background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
		background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
		background-image: linear-gradient(
			@deg,
			@start-color,
			@end-color
		); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
	}
	.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
		background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
		background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
		background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
		background-repeat: no-repeat;
		filter: e(
			%(
				"progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",
				argb(@start-color),
				argb(@end-color)
			)
		); // IE9 and down, gets no color-stop at all for proper fallback
	}
	.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
		background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
		background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
		background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
		background-repeat: no-repeat;
		filter: e(
			%(
				"progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
				argb(@start-color),
				argb(@end-color)
			)
		); // IE9 and down, gets no color-stop at all for proper fallback
	}
	.radial(@inner-color: #555; @outer-color: #333) {
		background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
		background-image: radial-gradient(circle, @inner-color, @outer-color);
		background-repeat: no-repeat;
	}
	.striped(@color: rgba(255,255,255,0.15); @angle: 45deg) {
		background-image: -webkit-linear-gradient(
			@angle,
			@color 25%,
			transparent 25%,
			transparent 50%,
			@color 50%,
			@color 75%,
			transparent 75%,
			transparent
		);
		background-image: -o-linear-gradient(
			@angle,
			@color 25%,
			transparent 25%,
			transparent 50%,
			@color 50%,
			@color 75%,
			transparent 75%,
			transparent
		);
		background-image: linear-gradient(
			@angle,
			@color 25%,
			transparent 25%,
			transparent 50%,
			@color 50%,
			@color 75%,
			transparent 75%,
			transparent
		);
	}
}

// Opacity

.opacity(@opacity) {
	opacity: @opacity;
	// IE8 filter
	@opacity-ie: (@opacity * 100);
	filter: ~"alpha(opacity=@{opacity-ie})";
}