itsm-whlg/wechat/app/bower_components/ladda/css/ladda.scss

/*!
 * Ladda
 * http://lab.hakim.se/ladda
 * MIT licensed
 *
 * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
 */


/*************************************
 * CONFIG
 */

$spinnerSize: 32px;


/*************************************
 * MIXINS
 */

@mixin prefix ( $property, $value ) {
	-webkit-#{$property}: $value;
	   -moz-#{$property}: $value;
	    -ms-#{$property}: $value;
	     -o-#{$property}: $value;
	        #{$property}: $value;
}

@mixin transition( $value ) {
	-webkit-transition: $value !important; // important to override bootstrap
	   -moz-transition: $value !important;
	    -ms-transition: $value !important;
	     -o-transition: $value !important;
	        transition: $value !important;
}

@mixin transform( $value ) {
	@include prefix( transform, $value );
}

@mixin transform-origin( $value ) {
	@include prefix( transform-origin, $value );
}

@mixin buttonColor( $name, $color ) {
	&[data-color=#{$name}] {
		background: $color;

		&:hover {
			background-color: lighten( $color, 5% );
		}
	}
}


/*************************************
 * BUTTON BASE
 */

.ladda-button {
	position: relative;
}


/* Spinner animation */
.ladda-button .ladda-spinner {
	position: absolute;
	z-index: 2;
	display: inline-block;
	width: $spinnerSize;
	height: $spinnerSize;
	top: 50%;
	margin-top: 0;
	opacity: 0;
	pointer-events: none;
}

/* Button label */
.ladda-button .ladda-label {
	position: relative;
	z-index: 3;
}

/* Progress bar */
.ladda-button .ladda-progress {
	position: absolute;
	width: 0;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba( 0, 0, 0, 0.2 );

	visibility: hidden;
	opacity: 0;

	@include transition( 0.1s linear all );
}
	.ladda-button[data-loading] .ladda-progress {
		opacity: 1;
		visibility: visible;
	}


/*************************************
 * EASING
 */

.ladda-button,
.ladda-button .ladda-spinner,
.ladda-button .ladda-label {
	@include transition( 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275) all );
}

.ladda-button[data-style=zoom-in],
.ladda-button[data-style=zoom-in] .ladda-spinner,
.ladda-button[data-style=zoom-in] .ladda-label,
.ladda-button[data-style=zoom-out],
.ladda-button[data-style=zoom-out] .ladda-spinner,
.ladda-button[data-style=zoom-out] .ladda-label {
	@include transition( 0.3s ease all );
}


/*************************************
 * EXPAND LEFT
 */

.ladda-button[data-style=expand-right] {
	.ladda-spinner {
		right: $spinnerSize/-2 + 10;
	}

	&[data-size="s"] .ladda-spinner,
	&[data-size="xs"] .ladda-spinner {
		right: $spinnerSize/-2 + 4;
	}

	&[data-loading] {
		padding-right: 56px;

		.ladda-spinner {
			opacity: 1;
		}

		&[data-size="s"],
		&[data-size="xs"] {
			padding-right: 40px;
		}
	}
}


/*************************************
 * EXPAND RIGHT
 */

.ladda-button[data-style=expand-left] {
	.ladda-spinner {
		left: $spinnerSize/2 + 10;
	}

	&[data-size="s"] .ladda-spinner,
	&[data-size="xs"] .ladda-spinner {
		left: 4px;
	}

	&[data-loading] {
		padding-left: 56px;

		.ladda-spinner {
			opacity: 1;
		}

		&[data-size="s"],
		&[data-size="xs"] {
			padding-left: 40px;
		}
	}
}


/*************************************
 * EXPAND UP
 */

.ladda-button[data-style=expand-up] {
	overflow: hidden;

	.ladda-spinner {
		top: -$spinnerSize;
		left: 50%;
		margin-left: 0;
	}

	&[data-loading] {
		padding-top: 54px;

		.ladda-spinner {
			opacity: 1;
			top: ($spinnerSize/ 2) + 10;
			margin-top: 0;
		}

		&[data-size="s"],
		&[data-size="xs"] {
			padding-top: 32px;

			.ladda-spinner {
				top: 4px;
			}
		}
	}
}


/*************************************
 * EXPAND DOWN
 */

 .ladda-button[data-style=expand-down] {
 	overflow: hidden;

 	.ladda-spinner {
 		top: 62px;
 		left: 50%;
 		margin-left: 0;
 	}

 	&[data-size="s"] .ladda-spinner,
 	&[data-size="xs"] .ladda-spinner {
 		top: 40px;
 	}

 	&[data-loading] {
 		padding-bottom: 54px;

 		.ladda-spinner {
 			opacity: 1;
 		}

 		&[data-size="s"],
 		&[data-size="xs"] {
 			padding-bottom: 32px;
 		}
 	}
 }


/*************************************
 * SLIDE LEFT
 */
.ladda-button[data-style=slide-left] {
	overflow: hidden;

	.ladda-label {
		position: relative;
	}
	.ladda-spinner {
		left: 100%;
		margin-left: 0;
	}

	&[data-loading] {
		.ladda-label {
			opacity: 0;
			left: -100%;
		}
		.ladda-spinner {
			opacity: 1;
			left: 50%;
		}
	}
}


/*************************************
 * SLIDE RIGHT
 */
.ladda-button[data-style=slide-right] {
	overflow: hidden;

	.ladda-label {
		position: relative;
	}
	.ladda-spinner {
		right: 100%;
		margin-left: 0;
		left: $spinnerSize/2
	}

	&[data-loading] {
		.ladda-label {
			opacity: 0;
			left: 100%;
		}
		.ladda-spinner {
			opacity: 1;
			left: 50%;
		}
	}
}


/*************************************
 * SLIDE UP
 */
.ladda-button[data-style=slide-up] {
	overflow: hidden;

	.ladda-label {
		position: relative;
	}
	.ladda-spinner {
		left: 50%;
		margin-left: 0;
		margin-top: 1em;
	}

	&[data-loading] {
		.ladda-label {
			opacity: 0;
			top: -1em;
		}
		.ladda-spinner {
			opacity: 1;
			margin-top: 0;
		}
	}
}


/*************************************
 * SLIDE DOWN
 */
.ladda-button[data-style=slide-down] {
	overflow: hidden;

	.ladda-label {
		position: relative;
	}
	.ladda-spinner {
		left: 50%;
		margin-left: 0;
		margin-top: -2em;
	}

	&[data-loading] {
		.ladda-label {
			opacity: 0;
			top: 1em;
		}
		.ladda-spinner {
			opacity: 1;
			margin-top: 0;
		}
	}
}


/*************************************
 * ZOOM-OUT
 */

.ladda-button[data-style=zoom-out] {
	overflow: hidden;
}
	.ladda-button[data-style=zoom-out] .ladda-spinner {
		left: 50%;
		margin-left: $spinnerSize;

		@include transform( scale( 2.5 ) );
	}
	.ladda-button[data-style=zoom-out] .ladda-label {
		position: relative;
		display: inline-block;
	}

.ladda-button[data-style=zoom-out][data-loading] .ladda-label {
	opacity: 0;

	@include transform( scale( 0.5 ) );
}
.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {
	opacity: 1;
	margin-left: 0;

	@include transform( none );
}


/*************************************
 * ZOOM-IN
 */

.ladda-button[data-style=zoom-in] {
	overflow: hidden;
}
	.ladda-button[data-style=zoom-in] .ladda-spinner {
		left: 50%;
		margin-left: $spinnerSize/-2;

		@include transform( scale( 0.2 ) );
	}
	.ladda-button[data-style=zoom-in] .ladda-label {
		position: relative;
		display: inline-block;
	}

.ladda-button[data-style=zoom-in][data-loading] .ladda-label {
	opacity: 0;

	@include transform( scale( 2.2 ) );
}
.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {
	opacity: 1;
	margin-left: 0;

	@include transform( none );
}


/*************************************
 * CONTRACT
 */

.ladda-button[data-style=contract] {
	overflow: hidden;
	width: 100px;
}
	.ladda-button[data-style=contract] .ladda-spinner {
		left: 50%;
		margin-left: 0;
	}

.ladda-button[data-style=contract][data-loading] {
	border-radius: 50%;
	width: 52px;
}
	.ladda-button[data-style=contract][data-loading] .ladda-label {
		opacity: 0;
	}
	.ladda-button[data-style=contract][data-loading] .ladda-spinner {
		opacity: 1;
	}



/*************************************
 * OVERLAY
 */

.ladda-button[data-style=contract-overlay] {
	overflow: hidden;
	width: 100px;

	box-shadow: 0px 0px 0px 2000px rgba(0,0,0,0);
}
	.ladda-button[data-style=contract-overlay] .ladda-spinner {
		left: 50%;
		margin-left: 0;
	}

.ladda-button[data-style=contract-overlay][data-loading] {
	border-radius: 50%;
	width: 52px;

	/*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/
	box-shadow: 0px 0px 0px 2000px rgba(0,0,0,0.8);
}
	.ladda-button[data-style=contract-overlay][data-loading] .ladda-label {
		opacity: 0;
	}
	.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner {
		opacity: 1;
	}