90 lines
1.6 KiB
CSS
90 lines
1.6 KiB
CSS
.form {
|
|
@apply w-full;
|
|
@apply mx-auto;
|
|
&.form-narrow {
|
|
@apply max-w-xs;
|
|
}
|
|
}
|
|
|
|
|
|
.btn, input:not([type=submit]), select {
|
|
@apply shadow;
|
|
@apply appearance-none;
|
|
@apply outline-none;
|
|
@apply rounded;
|
|
@apply py-2;
|
|
@apply px-3;
|
|
@apply block;
|
|
@apply text-gray-700;
|
|
@apply leading-tight;
|
|
@apply transition-all;
|
|
@apply duration-75;
|
|
|
|
&:focus {
|
|
@apply shadow-outline;
|
|
}
|
|
}
|
|
|
|
|
|
input:not([type=submit]), select {
|
|
@apply w-full;
|
|
/* rounded borders look weird on buttons in firefox, so we only apply that here */
|
|
@apply border-gray-300;
|
|
@apply border;
|
|
@apply mx-auto;
|
|
}
|
|
|
|
|
|
|
|
.input[type=submit] {
|
|
@apply bg-none;
|
|
}
|
|
|
|
.btn, input[type="submit"] {
|
|
@apply border-none;
|
|
|
|
&.btn-blue {
|
|
@apply text-white;
|
|
@apply bg-blue-600;
|
|
&:hover { @apply bg-blue-800; }
|
|
&:focus { @apply bg-blue-900; }
|
|
}
|
|
|
|
&.btn-green {
|
|
@apply text-white;
|
|
@apply bg-green-500;
|
|
&:hover { @apply bg-green-600; }
|
|
&:focus { @apply bg-green-700; }
|
|
}
|
|
|
|
&.btn-orange {
|
|
@apply text-white;
|
|
@apply bg-orange-500;
|
|
&:hover { @apply bg-orange-600; }
|
|
&:focus { @apply bg-orange-700; }
|
|
}
|
|
|
|
&.btn-red {
|
|
@apply text-white;
|
|
@apply bg-red-500;
|
|
&:hover { @apply bg-red-600; }
|
|
&:focus { @apply bg-red-700; }
|
|
}
|
|
|
|
&.btn-wide {
|
|
@apply px-6;
|
|
}
|
|
|
|
&.btn-inline {
|
|
@apply inline-block;
|
|
}
|
|
|
|
|
|
&.btn-center { @apply mx-auto; }
|
|
}
|
|
|
|
.field.error input {
|
|
@apply border-red-500;
|
|
}
|
|
|