/* * Published from shard-soft/laravel-core v0.1.0, resources/css/shard-forms.css * (php artisan vendor:publish --tag=shard-forms). This site links its CSS from * public/fiscala/css rather than building it with Vite, so the copy lives here. * Refresh it when the core version changes. */ /* * Shard Soft form fields — knowledge base conventions/form-fields.md and * conventions/arabic-and-rtl.md. Publish with * php artisan vendor:publish --tag=shard-forms * and import it into the site's stylesheet. Only logical directions here: * everything flips with , nothing is pinned to the left. */ /* The example disappears on focus, not on the first keystroke, and comes back if the field is left empty. */ input:focus::placeholder, textarea:focus::placeholder { color: transparent; } /* LTR content (phone, email, URL, prices) typed left-to-right but still right-aligned in an Arabic page. */ [dir="rtl"] input[dir="ltr"], [dir="rtl"] textarea[dir="ltr"] { text-align: right; } .shard-field { margin-block-end: 1rem; text-align: start; } .shard-field-group { border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; } .shard-label { display: block; font-weight: 500; margin-block-end: 0.25rem; } .shard-field-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .shard-field-inline > .shard-label { display: inline; margin-block-end: 0; } .shard-field-inline > .shard-field-hint, .shard-field-inline > .shard-field-error { flex-basis: 100%; } .shard-option { display: flex; align-items: center; gap: 0.5rem; } .shard-required { color: #b91c1c; margin-inline-start: 0.25em; } /* Muted, so an example can never be mistaken for a value already filled in. */ .shard-control::placeholder { color: #9ca3af; opacity: 1; } .shard-field-hint { display: block; color: #6b7280; font-size: 0.875em; margin-block-start: 0.25rem; } .shard-field-hint > span { display: block; } /* Errors sit below the field and never replace its label. */ .shard-field-error { color: #b91c1c; font-size: 0.875em; margin-block-start: 0.25rem; } .shard-field-error > p { margin: 0; } .shard-field-invalid .shard-control { border-color: #b91c1c; }