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

253 lines
6 KiB
CSS
Raw Normal View History

form {
@apply .m-0;
}
textarea, select, input, button {
2019-12-22 22:53:27 +00:00
@apply .outline-none;
}
button:focus, button:focus-visible {
@apply .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;
}
/**
* Styling for other forms throughout the Panel.
*/
2019-10-12 22:29:45 +00:00
.input:not(select), .input-dark:not(select) {
@apply .appearance-none .w-full;
2019-06-17 01:07:57 +00:00
min-width: 0;
&:required, &:invalid {
box-shadow: none;
}
}
2019-10-12 22:29:45 +00:00
.input:not(select) {
@apply .p-3 .rounded .border .border-neutral-200 .text-neutral-800;
transition: border 150ms linear;
2018-06-12 05:36:43 +00:00
&:focus {
2019-02-09 22:44:35 +00:00
@apply .border-primary-400;
2018-06-12 05:36:43 +00:00
}
2018-06-17 23:53:24 +00:00
&.error {
2019-02-09 22:48:47 +00:00
@apply .text-red-600 .border-red-500;
2018-06-17 23:53:24 +00:00
}
2018-06-12 05:36:43 +00:00
2019-10-12 22:29:45 +00:00
&:disabled {
@apply .bg-neutral-100 .border-neutral-200;
}
}
2019-10-12 22:29:45 +00:00
.input-dark:not(select) {
2019-06-23 01:58:07 +00:00
@apply .p-3 .bg-neutral-600 .border .border-neutral-500 .text-sm .rounded .text-neutral-200 .shadow-none;
transition: border 150ms linear, box-shaodw 150ms ease-in;
&:focus {
2019-06-23 01:58:07 +00:00
@apply .shadow-md .border-neutral-400;
}
&:hover {
@apply .border-neutral-400;
}
& + .input-help {
@apply .text-xs .text-neutral-400;
}
&.error + .input-help {
@apply .text-red-400 !important;
}
&:disabled {
@apply .opacity-75;
}
}
.has-error .input-dark:not(select), .input-dark.error {
@apply .text-red-100 .border-red-400;
}
.input-help {
@apply .text-xs .text-neutral-400 .pt-2;
&.error {
@apply .text-red-400 !important;
}
}
label {
@apply .block .text-xs .uppercase .text-neutral-700 .mb-2;
}
2019-05-14 23:48:23 +00:00
select:not(.appearance-none) {
2019-10-12 22:29:45 +00:00
@apply .shadow-none .block .p-3 .pr-8 .rounded .border .w-full .text-sm;
transition: border-color 150ms linear;
2019-05-14 23:48:23 +00:00
2019-10-12 22:29:45 +00:00
&, &:hover:not(:disabled), &:focus {
@apply .outline-none;
2019-05-14 23:48:23 +00:00
}
-webkit-appearance: none;
-moz-appearance: none;
2019-10-12 22:29:45 +00:00
background-size: 1rem;
background-repeat: no-repeat;
background-position-x: calc(100% - 0.75rem);
background-position-y: center;
2019-05-14 23:48:23 +00:00
&::-ms-expand {
display: none;
}
2019-10-12 22:29:45 +00:00
}
2019-05-14 23:48:23 +00:00
2019-10-12 22:29:45 +00:00
select.input:not(.appearance-none) {
@apply .bg-white .border-neutral-200 .text-neutral-400;
transition: color 150ms linear;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
&:hover:not(:disabled), &:focus {
@apply .border-primary-500 .text-neutral-700;
}
}
select.input-dark:not(.appearance-none) {
@apply .bg-neutral-600 .border-neutral-500 .text-neutral-200;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
&:hover:not(:disabled), &:focus {
@apply .border-neutral-400;
}
2019-05-14 23:48:23 +00:00
}
.input-dark-label {
@apply .uppercase .text-neutral-200;
}
2018-06-12 05:36:43 +00:00
.input-label {
@apply .block .uppercase .tracking-wide .text-neutral-800 .text-xs .font-bold;
&:not(.mb-0) {
@apply .mb-2;
}
2018-06-12 05:36:43 +00:00
}
2019-02-10 01:07:11 +00:00
a.btn {
@apply .no-underline;
}
.btn {
@apply .rounded .p-2 .uppercase .tracking-wide .text-sm;
transition: all 150ms linear;
&.btn-secondary {
@apply .border .border-neutral-600 .bg-transparent .text-neutral-200;
2019-02-10 01:07:11 +00:00
&:hover:not(:disabled) {
@apply .border-neutral-500 .text-neutral-100;
}
&.btn-red:hover:not(:disabled) {
@apply .bg-red-500 .border-red-600 .text-red-50;
}
&.btn-green:hover:not(:disabled) {
@apply .bg-green-500 .border-green-600 .text-green-50;
}
}
&.btn-primary {
&:not(.btn-secondary) {
@apply .bg-primary-500 .border-primary-600 .border .text-primary-50;
}
2019-02-10 01:07:11 +00:00
&:hover:not(:disabled) {
@apply .bg-primary-600 .border-primary-700;
}
}
&.btn-grey {
@apply .border .border-neutral-600 .bg-neutral-500 .text-neutral-50;
&:hover:not(:disabled) {
@apply .bg-neutral-600 .border-neutral-700;
}
}
&.btn-green {
&:not(.btn-secondary) {
@apply .bg-green-500 .border-green-600 .border .text-green-50;
}
&:hover:not(:disabled), &.btn-secondary:active:not(:disabled) {
@apply .bg-green-600 .border-green-700;
}
}
&.btn-red {
&:not(.btn-secondary) {
@apply .bg-red-500 .border-red-600 .text-red-50;
}
&:hover:not(:disabled), &.btn-secondary:active:not(:disabled) {
@apply .bg-red-600 .border-red-700;
}
}
/**
* Button Sizes
*/
&.btn-jumbo {
@apply .p-4 .w-full;
}
&.btn-lg {
@apply .p-4 .text-sm;
}
&.btn-sm {
@apply .p-3;
}
&.btn-xs {
@apply .p-2 .text-xs;
}
&:disabled, &.disabled {
opacity: 0.55;
cursor: default;
}
}
input[type="checkbox"], input[type="radio"] {
@apply .appearance-none .inline-block .align-middle .select-none .flex-no-shrink .w-4 .h-4 .text-primary-400 .border .border-neutral-300 .rounded-sm;
color-adjust: exact;
background-origin: border-box;
transition: all 75ms linear, box-shadow 25ms linear;
&:checked {
@apply .border-transparent .bg-no-repeat .bg-center;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
background-color: currentColor;
background-size: 100% 100%;
}
&:focus {
@apply .outline-none .border-primary-300;
box-shadow: 0 0 0 1px rgba(9, 103, 210, 0.25);
}
}
input[type="radio"] {
@apply .rounded-full;
}