nest-parrot/src/less/n-button.less

Parrot built on react

div.n-button {
	height: @form-control-height;
	position: relative;
	a.btn {
		transition: none;
		-o-transition: none;
		-webkit-transition: none;
		padding-top: 2px;
		padding-bottom: 2px;
		position: relative;
		&:before {
			content: '';
			position: absolute;
			display: block;
			left: 50%;
			top: 50%;
			height: 0;
			width: 0;
			border-radius: 100%;
			z-index: 1;
			opacity: 0;
			margin: 0;
			outline: 0;
			background-color: @font-color-reverse;
		}
		&:focus:before {
			-webkit-animation: buttonRippleOff .65s linear forwards;
			animation: buttonRippleOff .65s linear forwards;
			-o-animation: buttonRippleOff .65s linear forwards;
		}
		&.effect:focus:before {
			-webkit-animation: buttonRippleOn .65s linear forwards;
			animation: buttonRippleOn .65s linear forwards;
			-o-animation: buttonRippleOn .65s linear forwards;
		}
		&:focus,
		&:active:focus,
		&.active:focus,
		&.focus,
		&:active.focus,
		&.active.focus {
			outline: 0;
			outline-offset: 0;
		}
		&:active {
			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
			-o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		}
		&.disabled {
			border-right: 0;
			border-bottom: 0;
			pointer-events: none;
			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
			-o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		}
		&.btn-default {
			&:hover,
			&:focus {
				border-color: @border-color;
			}
		}
		&.btn-link,
		&.btn-link:hover,
		&.btn-link:active,
		&.btn-link:active:hover,
		&.btn-link:active:focus,
		&.btn-link:active:focus:hover,
		&.btn-link:focus,
		&.btn-link:focus:hover {
			box-shadow: none;
			-o-box-shadow: none;
			-webkit-box-shadow: none;
			background-color: transparent;
			background-image: none;
		}
	}
	&.n-disabled {
		cursor: @disabled-cursor;
	}
	a.btn.dropdown-toggle {
		&:focus:before {
			-webkit-animation: none;
			animation: none;
			-o-animation: none;
		}
		&.effect:focus:before {
			-webkit-animation: none;
			animation: none;
			-o-animation: none;
		}
	}
	a.btn:first-child.dropdown-toggle {
		padding-right: 40px;
		> span.caret {
		    position: absolute;
		    top: 45%;
		    right: 10%;
		}
	}
}

@keyframes buttonRippleOn {
	0% {
		opacity: 0;
		height: 30%;
		width: 30%;
		top: 35%;
		left: 35%;
	}
	25% {
		opacity: 0.2;
		height: 60%;
		width: 60%;
		top: 20%;
		left: 20%;
	}
	50% {
		opacity: 0.5;
		height: 90%;
		width: 90%;
		top: 5%;
		left: 5%;
	}
	75% {
		opacity: 0.3;
		height: 120%;
		width: 120%;
		top: -10%;
		left: -10%;
	}
	99% {
		opacity: 0;
		height: 150%;
		width: 150%;
		top: -25%;
		left: -25%;
	}
	100% {
		opacity: 0;
		height: 0;
		width: 0;
		top: 35%;
		left: 35%;
	}
}

@keyframes buttonRippleOff {
	0% {
		opacity: 0;
		height: 30%;
		width: 30%;
		top: 35%;
		left: 35%;
	}
	25% {
		opacity: 0.2;
		height: 60%;
		width: 60%;
		top: 20%;
		left: 20%;
	}
	50% {
		opacity: 0.5;
		height: 90%;
		width: 90%;
		top: 5%;
		left: 5%;
	}
	75% {
		opacity: 0.3;
		height: 120%;
		width: 120%;
		top: -10%;
		left: -10%;
	}
	99% {
		opacity: 0;
		height: 150%;
		width: 150%;
		top: -25%;
		left: -25%;
	}
	100% {
		opacity: 0;
		height: 0;
		width: 0;
		top: 35%;
		left: 35%;
	}
}