mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-17 08:36:25 +03:00
82 lines
6.9 KiB
CSS
82 lines
6.9 KiB
CSS
/* ============================================================
|
|
Screen 09: corner style.
|
|
|
|
One question, four radii, and a deliberate limit: the text bars barely move
|
|
and the dots do not move at all.
|
|
|
|
A bar in this wireframe stands for a line of type. Round it like a button
|
|
and it stops reading as text and starts reading as a tag, which would make
|
|
the pill answer look like a different page rather than the same page with
|
|
rounder corners. So bars top out a few pixels short of their own height.
|
|
|
|
The dots stay circular in every answer, Sharp included. A dot is a mark
|
|
rather than a shape with corners; squaring it changes what it is, not how
|
|
round it is, and the Sharp page reads as sharp without it.
|
|
============================================================ */
|
|
|
|
/* ── Sharp ───────────────────────────────────────────────────
|
|
Nothing rounded. Every corner is drafted. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="sharp"]) .picker-preview-corners,
|
|
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="sharp"]:checked)) [data-carry] {
|
|
--pvs-radius-frame: 0px;
|
|
--pvs-radius-frame-phone: 0px;
|
|
--pvs-radius-surface: 0px;
|
|
--pvs-radius-control: 0px;
|
|
--pvs-radius-bar: 0px;
|
|
}
|
|
|
|
/* ── Slightly soft ───────────────────────────────────────────
|
|
Enough radius to take the edge off and not enough to be remarked on. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="slightly-soft"]) .picker-preview-corners,
|
|
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="slightly-soft"]:checked)) [data-carry] {
|
|
--pvs-radius-frame: 4px;
|
|
--pvs-radius-frame-phone: 5px;
|
|
--pvs-radius-surface: 3px;
|
|
--pvs-radius-control: 3px;
|
|
--pvs-radius-bar: 2px;
|
|
}
|
|
|
|
/* ── Friendly ────────────────────────────────────────────────
|
|
Cards, pictures, and buttons are clearly rounded, and the handset rounds
|
|
with them. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="friendly"]) .picker-preview-corners,
|
|
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="friendly"]:checked)) [data-carry] {
|
|
--pvs-radius-frame: 7px;
|
|
--pvs-radius-frame-phone: 11px;
|
|
--pvs-radius-surface: 8px;
|
|
--pvs-radius-control: 8px;
|
|
--pvs-radius-bar: 3px;
|
|
}
|
|
|
|
/* ── Pill-like ───────────────────────────────────────────────
|
|
Controls go fully round. Surfaces round hard but stay rectangles, because
|
|
a card at half its own height is no longer a card. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="pill"]) .picker-preview-corners,
|
|
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="pill"]:checked)) [data-carry] {
|
|
--pvs-radius-frame: 9px;
|
|
--pvs-radius-frame-phone: 15px;
|
|
--pvs-radius-surface: 12px;
|
|
--pvs-radius-control: 999px;
|
|
--pvs-radius-bar: 3px;
|
|
}
|
|
|
|
/* Corner radii on the derived clones. Dots remain dots while frames,
|
|
surfaces, controls, and text bars take the selected radius. Ported from
|
|
the gallery derived sheet; values match the artboard radius ramp above. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="sharp"]) .picker-screen[data-screen="09"] .picker-board-stage,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="sharp"]:checked) .picker-screen[data-screen="09"] .picker-board-stage { --derived-frame-radius: 0px; --derived-phone-radius: 0px; --derived-surface-radius: 0px; --derived-control-radius: 0px; --derived-bar-radius: 0px; }
|
|
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="slightly-soft"]) .picker-screen[data-screen="09"] .picker-board-stage,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="slightly-soft"]:checked) .picker-screen[data-screen="09"] .picker-board-stage { --derived-frame-radius: 4px; --derived-phone-radius: 5px; --derived-surface-radius: 3px; --derived-control-radius: 3px; --derived-bar-radius: 2px; }
|
|
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="friendly"]) .picker-screen[data-screen="09"] .picker-board-stage,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="friendly"]:checked) .picker-screen[data-screen="09"] .picker-board-stage { --derived-frame-radius: 7px; --derived-phone-radius: 11px; --derived-surface-radius: 8px; --derived-control-radius: 8px; --derived-bar-radius: 3px; }
|
|
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="pill"]) .picker-screen[data-screen="09"] .picker-board-stage,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="pill"]:checked) .picker-screen[data-screen="09"] .picker-board-stage { --derived-frame-radius: 9px; --derived-phone-radius: 15px; --derived-surface-radius: 12px; --derived-control-radius: 999px; --derived-bar-radius: 3px; }
|
|
|
|
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview .pv-desktop { border-radius: var(--derived-frame-radius) !important; }
|
|
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview .pv-phone { border-radius: var(--derived-phone-radius) !important; }
|
|
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview :is(.pv-image, .pv-mini-card, .po-chart, .po-rows, .po-panel, .pg-row) { border-radius: var(--derived-surface-radius) !important; }
|
|
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview .pd-note { border-radius: 0 var(--derived-surface-radius) var(--derived-surface-radius) 0 !important; }
|
|
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview :is(.pv-pill, .pv-actions i, .po-item--on, .po-field, .po-row, .po-toggle) { border-radius: var(--derived-control-radius) !important; }
|
|
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview .po-toggle::after { border-radius: var(--derived-control-radius) !important; }
|
|
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview :is(.pv-nav-bars i, .pv-pill::after, .pv-eyebrow, .pv-headline i, .pv-copy-bar, .po-line, .po-cell, .po-heading, .po-label, .pd-item span, .pd-heading, .pd-para i, .pd-note-lines i, .pg-cap i, .pg-track i) { border-radius: var(--derived-bar-radius) !important; }
|