152 lines
3.2 KiB
CSS
152 lines
3.2 KiB
CSS
textarea, select, input, button {
|
|
outline: none;
|
|
}
|
|
|
|
input[type=number]::-webkit-outer-spin-button,
|
|
input[type=number]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none !important;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield !important;
|
|
}
|
|
|
|
/**
|
|
* Styles for the login form open input boxes. Label floats up above it when content
|
|
* is input and then sinks back down into the field if left empty.
|
|
*/
|
|
.input-open {
|
|
@apply .w-full .px-3 .relative;
|
|
}
|
|
|
|
.input-open > .input {
|
|
@apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-200 .py-3 .mb-3;
|
|
|
|
&:focus {
|
|
@apply .border-primary-400;
|
|
outline: 0;
|
|
transition: border 500ms ease-out;
|
|
}
|
|
|
|
&:focus + label, &:valid + label, &.has-content + label {
|
|
@apply .text-neutral-800 .px-0 .cursor-pointer;
|
|
transform:translateY(-26px)
|
|
}
|
|
|
|
&:required {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.input-open > label {
|
|
@apply .block .uppercase .tracking-wide .text-neutral-500 .text-xs .mb-2 .absolute;
|
|
top: 14px;
|
|
transition: transform 200ms ease-out;
|
|
}
|
|
|
|
/**
|
|
* Styling for other forms throughout the Panel.
|
|
*/
|
|
.input:not(.open-label) {
|
|
@apply .appearance-none .p-3 .rounded .border .border-neutral-200 .text-neutral-800 .w-full;
|
|
transition: border 150ms linear;
|
|
|
|
&:focus {
|
|
@apply .border-primary-400;
|
|
}
|
|
|
|
&:required, &:invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.error {
|
|
@apply .text-red-600 .border-red-500;
|
|
}
|
|
}
|
|
|
|
.input-label {
|
|
@apply .block .uppercase .tracking-wide .text-neutral-800 .text-xs .font-bold .mb-2;
|
|
}
|
|
|
|
.input-help {
|
|
@apply .text-xs .text-neutral-400 .pt-2;
|
|
|
|
&.error {
|
|
@apply .text-red-600;
|
|
}
|
|
}
|
|
|
|
a.btn {
|
|
@apply .no-underline;
|
|
}
|
|
|
|
.btn {
|
|
@apply .rounded .p-2;
|
|
transition: all 150ms linear;
|
|
|
|
/**
|
|
* Button Colors
|
|
*/
|
|
&.btn-primary {
|
|
@apply .bg-primary-500 .border-primary-600 .border .text-white;
|
|
|
|
&:hover:not(:disabled) {
|
|
@apply .bg-primary-600 .border-primary-800;
|
|
}
|
|
}
|
|
|
|
&.btn-green {
|
|
@apply .bg-green-500 .border-green-600 .border .text-white;
|
|
|
|
&:hover:not(:disabled) {
|
|
@apply .bg-green-600 .border-green-800;
|
|
}
|
|
}
|
|
|
|
&.btn-red {
|
|
&:not(.btn-secondary) {
|
|
@apply .bg-red-500 .border-red-600 .border .text-white;
|
|
}
|
|
|
|
&:hover:not(:disabled) {
|
|
@apply .bg-red-600 .border-red-800;
|
|
}
|
|
}
|
|
|
|
&.btn-secondary {
|
|
@apply .border .border-neutral-200 .text-neutral-400;
|
|
|
|
&:hover:not(:disabled) {
|
|
@apply .border-neutral-500 .text-neutral-700;
|
|
}
|
|
|
|
&.btn-red:hover:not(:disabled) {
|
|
@apply .bg-red-600 .border-red-800 .text-white;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Button Sizes
|
|
*/
|
|
&.btn-jumbo {
|
|
@apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
|
|
}
|
|
|
|
&.btn-lg {
|
|
@apply .p-4 .uppercase .tracking-wide .text-sm;
|
|
}
|
|
|
|
&.btn-sm {
|
|
@apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
|
|
}
|
|
|
|
&.btn-xs {
|
|
@apply .py-2 .px-2 .uppercase .text-xs;
|
|
}
|
|
|
|
&:disabled, &.disabled {
|
|
opacity: 0.55;
|
|
cursor: default;
|
|
}
|
|
}
|