|
|
|
.form-group { |
|
margin-bottom: var(--spacing-4); |
|
} |
|
|
|
.form-label { |
|
display: block; |
|
font-weight: var(--font-weight-medium); |
|
margin-bottom: var(--spacing-2); |
|
color: var(--color-secondary-700); |
|
} |
|
|
|
.form-input, |
|
.form-select, |
|
.form-textarea { |
|
width: 100%; |
|
padding: var(--spacing-3); |
|
border: 1px solid var(--color-secondary-300); |
|
border-radius: var(--radius); |
|
font-size: var(--font-size-base); |
|
transition: all var(--transition-normal); |
|
background: white; |
|
color: black; |
|
} |
|
|
|
.form-input:focus, |
|
.form-select:focus, |
|
.form-textarea:focus { |
|
outline: none; |
|
border-color: var(--color-primary-500); |
|
box-shadow: 0 0 0 3px rgba(255, 128, 128, 0.1); |
|
} |
|
|
|
.form-input:disabled, |
|
.form-select:disabled, |
|
.form-textarea:disabled { |
|
background: var(--color-accent-100); |
|
cursor: not-allowed; |
|
} |
|
|
|
.form-textarea { |
|
resize: vertical; |
|
min-height: 100px; |
|
} |
|
|
|
|
|
.post-content-textarea { |
|
color: black; |
|
} |
|
|
|
.form-row { |
|
display: grid; |
|
grid-template-columns: 1fr; |
|
gap: var(--spacing-4); |
|
} |
|
|
|
@media (min-width: 768px) { |
|
.form-row { |
|
grid-template-columns: 1fr 1fr; |
|
} |
|
} |
|
|
|
@media (min-width: 1024px) { |
|
.form-row { |
|
grid-template-columns: repeat(3, 1fr); |
|
} |
|
} |