130 lines
2.8 KiB
CSS
130 lines
2.8 KiB
CSS
.btn {
|
|
@apply inline-flex items-center justify-center
|
|
font-semibold rounded-lg px-6 py-3
|
|
text-base transition-all duration-200
|
|
cursor-pointer select-none;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply border-none;
|
|
background: var(--btn-background);
|
|
color: var(--btn-text);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
filter: brightness(0.95);
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply border border-solid;
|
|
border-color: var(--btn-outline-border);
|
|
color: var(--btn-outline-text);
|
|
background: var(--btn-outline-background);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background-color: var(--btn-outline-background-hover);
|
|
color: var(--btn-outline-text-hover);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background-color: transparent;
|
|
color: var(--btn-ghost-text);
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background-color: var(--btn-ghost-hover-bg);
|
|
}
|
|
|
|
.fuz-input {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem; /* bardziej eleganckie */
|
|
border-radius: 0.75rem;
|
|
|
|
/* Kolory z theme.css */
|
|
background-color: var(--f-background);
|
|
color: var(--f-text);
|
|
border: 1px solid var(--fuz-border, #d1d5db); /* fallback dla bezpieczeństwa */
|
|
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
|
|
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Hover odcien zależny od border, nie od Tailwind */
|
|
.fuz-input:hover {
|
|
border-color: var(--f-text);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Placeholder — używa f-text ale jaśniejszy */
|
|
.fuz-input::placeholder {
|
|
color: color-mix(in srgb, var(--f-text) 40%, transparent);
|
|
}
|
|
|
|
/* Focus — używa accent */
|
|
.fuz-input:focus {
|
|
outline: none;
|
|
border-color: var(--fuz-accent);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fuz-accent) 40%, transparent);
|
|
}
|
|
|
|
/* Error */
|
|
.fuz-input-error {
|
|
border-color: #ff4d4f !important;
|
|
box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.3) !important;
|
|
}
|
|
|
|
/* Disabled */
|
|
.fuz-input:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
background-color: color-mix(in srgb, var(--f-background) 80%, #888);
|
|
}
|
|
|
|
/* Textarea */
|
|
/* textarea.fuz-input {
|
|
resize: none;
|
|
} */
|
|
|
|
/* .fuz-link {
|
|
color: var(--fuz-accent);
|
|
transition: color 0.2s ease;
|
|
} */
|
|
|
|
|
|
/* Kapsuła — input + dropdown jako jedna całość */
|
|
.autocomplete-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
/* Input (gdy dropdown otwarty) */
|
|
.autocomplete-open {
|
|
border-bottom-left-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
border-bottom-width: 0 !important;
|
|
}
|
|
|
|
/* Dropdown */
|
|
.autocomplete-list {
|
|
@apply absolute left-0 right-0 z-50 bg-[var(--f-background)] text-[var(--f-text)]
|
|
border border-gray-300 dark:border-slate-700
|
|
rounded-b-xl shadow-xl max-h-56 overflow-auto;
|
|
|
|
border-top: none; /* ważne */
|
|
animation: fadeIn 0.12s ease-out;
|
|
}
|
|
|
|
.autocomplete-list li {
|
|
@apply px-4 py-2 cursor-pointer transition-colors;
|
|
}
|
|
|
|
.autocomplete-list li:hover,
|
|
.autocomplete-list li.active {
|
|
@apply bg-gray-100 dark:bg-slate-800;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-2px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
} |