ima-ui-atoms/dist/atomAmp.less

IMA.js UI React atoms

.atm-list {
	&- {
		&disc {
			list-style-type: disc;
		}

		&circle {
			list-style-type: circle;
		}

		&square {
			list-style-type: square;
		}

		&decimal {
			list-style-type: decimal;
		}

		&upper-roman {
			list-style-type: upper-roman;
		}

		&upper-alpha {
			list-style-type: upper-alpha;
		}

		&lower-alpha {
			list-style-type: lower-alpha;
		}

		&none {
			list-style-type: none;
		}
	}
}

.atm-loader {
	position: relative;
	font-size: 16px;
	width: 6.2em;
	height: 6.2em;
	margin: 0 auto;
	text-align: center;
	transform: translateZ(0);
}

.atm-loader-animation {
	position: absolute;
	top:  ~'calc(50% - .5em)';
	left:  ~'calc(50% - .5em)';
	width: 1em;
	height: 1em;

	border-radius: 50%;
	animation: 1.1s infinite ease;
}

.atm-loader-animation-black {
	animation-name: atmLoader-black;
}

.atm-loader-animation-white {
	animation-name: atmLoader-white;
}

.loaderAnimation(@loader-color-name, @loader-color) {
	@keyframesName: ~'atmLoader-@{loader-color-name}';

	@keyframes @keyframesName {
		0%,
		100% {
			box-shadow: 0em -2.6em 0em 0em @loader-color, 
						1.8em -1.8em 0 0em fade(@loader-color, 20%),
						2.5em 0em 0 0em fade(@loader-color, 20%),
						1.75em 1.75em 0 0em fade(@loader-color, 20%),
						0em 2.5em 0 0em fade(@loader-color, 20%),
						-1.8em 1.8em 0 0em fade(@loader-color, 20%),
						-2.6em 0em 0 0em fade(@loader-color, 50%),
						-1.8em -1.8em 0 0em fade(@loader-color, 70%);
		}
		12.5% {
			box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 70%),
						1.8em -1.8em 0 0em @loader-color,
						2.5em 0em 0 0em fade(@loader-color, 20%),
						1.75em 1.75em 0 0em fade(@loader-color, 20%),
						0em 2.5em 0 0em fade(@loader-color, 20%),
						-1.8em 1.8em 0 0em fade(@loader-color, 20%),
						-2.6em 0em 0 0em fade(@loader-color, 20%),
						-1.8em -1.8em 0 0em fade(@loader-color, 50%);
		}
		25% {
			box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 50%),
						1.8em -1.8em 0 0em fade(@loader-color, 70%),
						2.5em 0em 0 0em @loader-color,
						1.75em 1.75em 0 0em fade(@loader-color, 20%),
						0em 2.5em 0 0em fade(@loader-color, 20%),
						-1.8em 1.8em 0 0em fade(@loader-color, 20%),
						-2.6em 0em 0 0em fade(@loader-color, 20%),
						-1.8em -1.8em 0 0em fade(@loader-color, 20%);
		}
		37.5% {
			box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 20%),
						1.8em -1.8em 0 0em fade(@loader-color, 50%),
						2.5em 0em 0 0em fade(@loader-color, 70%),
						1.75em 1.75em 0 0em @loader-color,
						0em 2.5em 0 0em fade(@loader-color, 20%),
						-1.8em 1.8em 0 0em fade(@loader-color, 20%),
						-2.6em 0em 0 0em fade(@loader-color, 20%),
						-1.8em -1.8em 0 0em fade(@loader-color, 20%);
		}
		50% {
			box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 20%),
						1.8em -1.8em 0 0em fade(@loader-color, 20%),
						2.5em 0em 0 0em fade(@loader-color, 50%),
						1.75em 1.75em 0 0em fade(@loader-color, 70%),
						0em 2.5em 0 0em @loader-color,
						-1.8em 1.8em 0 0em fade(@loader-color, 20%),
						-2.6em 0em 0 0em fade(@loader-color, 20%),
						-1.8em -1.8em 0 0em fade(@loader-color, 20%);
		}
		62.5% {
			box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 20%),
						1.8em -1.8em 0 0em fade(@loader-color, 20%),
						2.5em 0em 0 0em fade(@loader-color, 20%),
						1.75em 1.75em 0 0em fade(@loader-color, 50%),
						0em 2.5em 0 0em fade(@loader-color, 70%),
						-1.8em 1.8em 0 0em @loader-color,
						-2.6em 0em 0 0em fade(@loader-color, 20%),
						-1.8em -1.8em 0 0em fade(@loader-color, 20%);
		}
		75% {
			box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 20%),
						1.8em -1.8em 0 0em fade(@loader-color, 20%),
						2.5em 0em 0 0em fade(@loader-color, 20%),
						1.75em 1.75em 0 0em fade(@loader-color, 20%),
						0em 2.5em 0 0em fade(@loader-color, 50%),
						-1.8em 1.8em 0 0em fade(@loader-color, 70%),
						-2.6em 0em 0 0em @loader-color,
						-1.8em -1.8em 0 0em fade(@loader-color, 20%);
		}
		87.5% {
			box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 20%),
						1.8em -1.8em 0 0em fade(@loader-color, 20%),
						2.5em 0em 0 0em fade(@loader-color, 20%),
						1.75em 1.75em 0 0em fade(@loader-color, 20%),
						0em 2.5em 0 0em fade(@loader-color, 20%),
						-1.8em 1.8em 0 0em fade(@loader-color, 50%),
						-2.6em 0em 0 0em fade(@loader-color, 70%),
						-1.8em -1.8em 0 0em @loader-color;
		}
	}
}

.loaderAnimation("black", #222);
.loaderAnimation("white", #f9f9f9);

.atm-loader-small {
	font-size: 8px;
}

.atm-loader-center {
	position: absolute;
	top:  ~'calc(50% - 3.1em)';
	left:  ~'calc(50% - 3.1em)';
}