misc_pterodactyl-panel/resources/assets/styles/components/forms.css

79 lines
1.7 KiB
CSS
Raw Normal View History

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;
}
2018-05-26 22:00:41 +00:00
/**
* 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-400 .py-3 .mb-3;
2018-05-26 22:00:41 +00:00
&:focus {
2018-05-26 23:11:44 +00:00
@apply .border-blue-light;
2018-05-26 22:00:41 +00:00
outline: 0;
transition: border 500ms ease-out;
}
&:focus + label, &:valid + label, &.has-content + label {
@apply .text-neutral-800 .px-0 .cursor-pointer;
2018-05-26 22:00:41 +00:00
transform:translateY(-26px)
}
&:required {
box-shadow: none;
}
}
.input-open > label {
@apply .block .uppercase .tracking-wide .textneutral-500s.text-xs .mb-2 .absolute;
2018-05-26 22:00:41 +00:00
top: 14px;
transition: transform 200ms ease-out;
}
2018-06-12 05:36:43 +00:00
/**
* Styling for other forms throughout the Panel.
*/
.input:not(.open-label) {
@apply .appearance-none .p-3 .rounded .border .text-neutral-800 .w-full;
2018-06-12 05:36:43 +00:00
transition: all 100ms linear;
&:focus {
@apply .border-blue-light;
}
&:required, &:invalid {
box-shadow: none;
}
2018-06-17 23:53:24 +00:00
&.error {
@apply .text-red-600 .border-red;
2018-06-17 23:53:24 +00:00
}
2018-06-12 05:36:43 +00:00
}
.input-label {
@apply .block .uppercase .tracking-wide .text-neutral-900 .text-xs .font-bold .mb-2;
2018-06-12 05:36:43 +00:00
}
.input-help {
@apply .text-xs .textneutral-500s.pt-2;
2018-06-17 23:53:24 +00:00
&.error {
@apply .text-red-600;
2018-06-17 23:53:24 +00:00
}
2018-06-12 05:36:43 +00:00
}