fix(cibg): datablock row separators + filled Bestand-upload button
- Datablock entries had no separators: CIBG ships the border on dt/dd with a :last-of-type reset, but the one-row-per-<div> grouping (for axe) made every dt/dd a last-of-type, stripping them all. Carry the separator on the row (:host:not(:last-of-type)) in the CIBG line colour (#f1f5f9 = cool-grey-200). - Upload "Bestand toevoegen" button read as a pale outline: btn-outline-primary forced a transparent background over .btn-upload's accent fill. Use btn-primary btn-upload (solid #01689b, white text, folder glyph) and drop the redundant centred background-image folder. GREEN: lint, tokens, 183 tests, build, 137 axe stories. Verified via Storybook screenshots (datablock separators, filled blue upload button). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -26,7 +26,9 @@ const TYPE_LABELS: Record<string, string> = {
|
||||
.file-picker-drop-area { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rhc-space-max-sm); }
|
||||
/* Default (not subtle) foreground: subtle grey on the grey drop-area fails WCAG AA contrast. */
|
||||
.upload-instructions { margin: 0; color: var(--rhc-color-foreground-default); font-size: var(--rhc-text-font-size-sm); }
|
||||
.btn-upload { cursor: pointer; }
|
||||
/* Solid CIBG-blue button; the .btn-upload ::before folder glyph is the icon, so
|
||||
drop its redundant centred background-image folder. */
|
||||
.btn-upload { cursor: pointer; background-image: none; }
|
||||
.btn-upload.disabled { cursor: not-allowed; }
|
||||
/* The input is visually hidden but still focusable; surface its focus on the button. */
|
||||
input:focus-visible + .btn-upload { outline: var(--rhc-border-width-md) solid var(--rhc-color-foreground-link); outline-offset: 2px; }
|
||||
@@ -48,7 +50,7 @@ const TYPE_LABELS: Record<string, string> = {
|
||||
[multiple]="multiple()"
|
||||
[disabled]="disabled()"
|
||||
(change)="onChange($event)" />
|
||||
<label class="btn btn-outline-primary btn-upload" [class.disabled]="disabled()" [attr.for]="inputId()">
|
||||
<label class="btn btn-primary btn-upload" [class.disabled]="disabled()" [attr.for]="inputId()">
|
||||
{{ buttonText() }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user