kupos-ui-components-lib/src/styles.css

A reusable UI components package

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Loader circle animation */
@keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.loader-circle,
.loader-circle:after {
	border-radius: 50%;
	width: 25px;
	height: 25px;
	margin-top: -3px;
}

.loader-circle {
	display: inline-block;
	margin: 0 6px 0 0;
	font-size: 10px;
	position: relative;
	text-indent: -9999em;
	border-top: 1.1em solid rgba(255, 255, 255, 0.2);
	border-right: 1.1em solid rgba(255, 255, 255, 0.2);
	border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
	border-left: 1.1em solid #ffffff;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
	vertical-align: middle;
}

/* Custom shadows that weren't being generated */
.shadow-xl {
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.shadow-2xl {
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.shadow-red-950 {
	--tw-shadow-color: rgb(69, 10, 10);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-service {
	box-shadow: 0 3px 7px 3px rgba(0, 0, 0, .08);
}

.shadow-service-2 {
	box-shadow: 0 3px 7px 3px rgba(0, 0, 0, .3);
}


@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}