145 lines
2.8 KiB
CSS
145 lines
2.8 KiB
CSS
/* Buttons */
|
|
|
|
.btn,
|
|
.btn-lg,
|
|
.btn-sm,
|
|
.btn-xs {
|
|
@apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-sm transition;
|
|
}
|
|
|
|
.btn {
|
|
@apply px-3 py-2;
|
|
}
|
|
|
|
.btn-lg {
|
|
@apply px-4 py-3;
|
|
}
|
|
|
|
.btn-sm {
|
|
@apply px-2 py-1;
|
|
}
|
|
|
|
.btn-xs {
|
|
@apply px-2 py-0.5;
|
|
}
|
|
|
|
/* Colors */
|
|
|
|
.btn-primary {
|
|
@apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600 text-diffcolor;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-secondary-800 hover:bg-secondary-700 focus-visible:outline-secondary-800 text-diffcolor;
|
|
}
|
|
|
|
.btn-tertiary {
|
|
@apply bg-tertiary-600 hover:bg-tertiary-500 focus-visible:outline-tertiary-600 text-diffcolor;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-danger-600 hover:bg-danger-500 focus-visible:outline-danger-600 text-diffcolor;
|
|
}
|
|
|
|
.btn-warning {
|
|
@apply bg-warning-500 hover:bg-warning-400 focus-visible:outline-warning-500 text-diffcolor;
|
|
}
|
|
|
|
.btn-info {
|
|
@apply bg-info-600 hover:bg-info-500 focus-visible:outline-info-600 text-diffcolor;
|
|
}
|
|
|
|
.btn-success {
|
|
@apply bg-success-600 hover:bg-success-500 focus-visible:outline-success-600 text-diffcolor;
|
|
}
|
|
|
|
/* Outline */
|
|
|
|
.btn-outline-primary {
|
|
@apply bg-gray-800 hover:border-gray-600 text-primary-500;
|
|
}
|
|
|
|
.btn-outline-tertiary {
|
|
@apply bg-gray-800 hover:border-gray-600 text-tertiary-500;
|
|
}
|
|
|
|
.btn-outline-danger {
|
|
@apply bg-gray-800 hover:border-gray-600 text-danger-500;
|
|
}
|
|
|
|
.btn-outline-warning {
|
|
@apply bg-gray-800 hover:border-gray-600 text-warning-400;
|
|
}
|
|
|
|
.btn-outline-info {
|
|
@apply bg-gray-800 hover:border-gray-600 text-info-500;
|
|
}
|
|
|
|
.btn-outline-success {
|
|
@apply bg-gray-800 hover:border-gray-600 text-success-500;
|
|
}
|
|
|
|
/* Disabled Buttons */
|
|
|
|
.btn:disabled,
|
|
.btn-lg:disabled,
|
|
.btn-sm:disabled,
|
|
.btn-xs:disabled {
|
|
@apply opacity-50 cursor-not-allowed pointer-events-none;
|
|
}
|
|
|
|
/* Colors for Disabled States */
|
|
|
|
.btn-primary:disabled {
|
|
@apply bg-primary-600 text-gray-300;
|
|
}
|
|
|
|
.btn-secondary:disabled {
|
|
@apply bg-secondary-800 text-gray-400;
|
|
}
|
|
|
|
.btn-tertiary:disabled {
|
|
@apply bg-tertiary-600 text-gray-300;
|
|
}
|
|
|
|
.btn-danger:disabled {
|
|
@apply bg-danger-600 text-gray-300;
|
|
}
|
|
|
|
.btn-warning:disabled {
|
|
@apply bg-warning-500 text-gray-400;
|
|
}
|
|
|
|
.btn-info:disabled {
|
|
@apply bg-info-600 text-gray-300;
|
|
}
|
|
|
|
.btn-success:disabled {
|
|
@apply bg-success-600 text-gray-300;
|
|
}
|
|
|
|
/* Outline Disabled States */
|
|
|
|
.btn-outline-primary:disabled {
|
|
@apply bg-gray-800 border-gray-700 text-gray-500;
|
|
}
|
|
|
|
.btn-outline-tertiary:disabled {
|
|
@apply bg-gray-800 border-gray-700 text-gray-500;
|
|
}
|
|
|
|
.btn-outline-danger:disabled {
|
|
@apply bg-gray-800 border-gray-700 text-gray-500;
|
|
}
|
|
|
|
.btn-outline-warning:disabled {
|
|
@apply bg-gray-800 border-gray-700 text-gray-500;
|
|
}
|
|
|
|
.btn-outline-info:disabled {
|
|
@apply bg-gray-800 border-gray-700 text-gray-500;
|
|
}
|
|
|
|
.btn-outline-success:disabled {
|
|
@apply bg-gray-800 border-gray-700 text-gray-500;
|
|
} |