Current File : /home/jvzmxxx/wiki/extensions/Flow/modules/styles/js.less

@import 'mediawiki.mixins';
@import 'flow.colors';
@import 'flow.helpers';

// @todo: Find better home for this css
.client-js {
	.flow-action-view {
		// Hide the component while it is loading if Javascript
		// is enabled.
		.flow-ui-load-overlay {
			z-index: 101;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor: wait;
		}

		.flow-component {
			position: relative;
			opacity: 0.5;

			&-ready {
				opacity: 1;

				-moz-transition: opacity 0.5s;
				-webkit-transition: opacity 0.5s;
				-o-transition: opacity 0.5s;
				transition: opacity 0.5s;
			}
		}

		/*
		Fallback elements

		Fallback elements are invisible when JavaScript is enabled. They only exist when JavaScript does not run.

		Markup:
		<div class="flow-ui-fallback-element"></div>

		Styleguide X.
		*/
		.flow-ui-fallback-element {
			visibility: hidden;
			height: 0;
		}

		// With JS, hide .flow-nojs & display .flow-js elements
		.flow-nojs {
			display: none;
		}
		.flow-js {
			display: block;
		}

	}
}

// When the load more wrapper is being processed, show the spinning loading icon
.flow-ui-loading {
	// Hide by default
	display: none;

	// But show when a load is pending
	.flow-load-more.flow-api-inprogress & {
		display: block;
	}

	// Align the icon in the center
	text-align: center;
	.mw-ui-icon {
		display: inline-block;
		font-size: 2em;

		// Make the icon rotate
		-webkit-animation: spin infinite 2s linear;
		-moz-animation: spin infinite 2s linear;
		-ms-animation: spin infinite 2s linear;
		-o-animation: spin infinite 2s linear;
		animation: spin infinite 2s linear;

		&.mw-ui-icon-before:before {
			margin-right: 0;
		}
	}
}

// Basic API interaction indicator
div#content div#bodyContent .flow-api-inprogress { /* stylelint-disable-line selector-no-id */
	opacity: 0.5;
	cursor: wait;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate( 0deg );
		opacity: 0.5;
	}
	50% {
		opacity: 0.75;
	}
	100% {
		-webkit-transform: rotate( 360deg );
		opacity: 0.5;
	}
}

@-moz-keyframes spin {
	0% {
		-moz-transform: rotate( 0deg );
		opacity: 0.5;
	}
	50% {
		opacity: 0.75;
	}
	100% {
		-moz-transform: rotate( 360deg );
		opacity: 0.5;
	}
}

@keyframes spin {
	0% {
		transform: rotate( 0deg );
		opacity: 0.5;
	}
	50% {
		opacity: 0.75;
	}
	100% {
		transform: rotate( 360deg );
		opacity: 0.5;
	}
}