128 lines
2.1 KiB
CSS
128 lines
2.1 KiB
CSS
/*
|
||
wlkns-dev-standards
|
||
UI Components – Buttons & Forms
|
||
Version: v1.0
|
||
|
||
Zweck:
|
||
Standardisierte UI-Bausteine auf Basis von tokens.css.
|
||
Fokus: Buttons, Inputs, Forms.
|
||
*/
|
||
|
||
/* =========================
|
||
Buttons
|
||
========================= */
|
||
|
||
.button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
|
||
padding: var(--space-2) var(--space-4);
|
||
font-size: var(--font-size-sm);
|
||
font-weight: 500;
|
||
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid transparent;
|
||
cursor: pointer;
|
||
|
||
background: none;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.button:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Primary */
|
||
.button.primary {
|
||
background: var(--color-accent);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.button.primary:hover {
|
||
filter: brightness(0.95);
|
||
}
|
||
|
||
/* Secondary */
|
||
.button.secondary {
|
||
border-color: var(--color-border);
|
||
background: var(--color-surface);
|
||
}
|
||
|
||
.button.secondary:hover {
|
||
background: var(--color-bg);
|
||
}
|
||
|
||
/* Danger */
|
||
.button.danger {
|
||
background: var(--color-error);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.button.danger:hover {
|
||
filter: brightness(0.95);
|
||
}
|
||
|
||
/* =========================
|
||
Forms
|
||
========================= */
|
||
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-1);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
label {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
input,
|
||
select,
|
||
textarea {
|
||
padding: var(--space-2) var(--space-3);
|
||
font-family: var(--font-ui);
|
||
font-size: var(--font-size-sm);
|
||
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--color-surface);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
input:focus,
|
||
select:focus,
|
||
textarea:focus {
|
||
outline: none;
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
input:disabled,
|
||
select:disabled,
|
||
textarea:disabled {
|
||
background: var(--color-bg);
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
/* Validation */
|
||
|
||
.form-error input,
|
||
.form-error textarea,
|
||
.form-error select {
|
||
border-color: var(--color-error);
|
||
}
|
||
|
||
.form-error .hint {
|
||
color: var(--color-error);
|
||
}
|
||
|
||
.hint {
|
||
font-size: var(--font-size-xs);
|
||
color: var(--color-text-muted);
|
||
}
|
||
|