diff options
Diffstat (limited to 'front-end/src/buttons.scss')
-rw-r--r-- | front-end/src/buttons.scss | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/front-end/src/buttons.scss b/front-end/src/buttons.scss new file mode 100644 index 0000000..409f405 --- /dev/null +++ b/front-end/src/buttons.scss @@ -0,0 +1,48 @@ +.btn{ + @apply focus:ring-2 focus:outline-none font-medium rounded text-sm px-4 py-2 text-center me-2 text-white; + + &.round{ + @apply rounded-full; + } + + &.blue{ + @apply bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800; + } + + &.red{ + @apply bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800; + } + + &.green{ + @apply bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800; + } + + &.yellow{ + @apply bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800; + } + + &.purple{ + @apply bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800; + } + + &.pink{ + @apply bg-pink-700 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800; + } + + &.indigo{ + @apply bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800; + } + + &.gray{ + @apply bg-gray-700 hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800; + } + + &.orange{ + @apply bg-orange-700 hover:bg-orange-800 focus:ring-orange-300 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-800; + } + + &.light{ + @apply text-gray-500 border bg-white hover:bg-gray-100 focus:ring-blue-300 border-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600; + } + +} |