135 lines
6.4 KiB
CSS
135 lines
6.4 KiB
CSS
/* The native input stays in the DOM -- it carries the state, the keyboard
|
|
* behaviour and the accessibility -- but it is invisible; .cx-check-box is what
|
|
* you see. Hiding it with opacity rather than display:none keeps it focusable. */
|
|
.cx-check-input, .cx-radio-input, .cx-toggle-input {
|
|
position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
|
|
}
|
|
|
|
.cx-check { display: inline-flex; }
|
|
.cx-check-box {
|
|
width: 16px; height: 16px; flex: none;
|
|
border: var(--bw) solid var(--line); border-radius: var(--r-2);
|
|
background: var(--elev-2);
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
transition: background var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-check-box::after {
|
|
content: ""; width: 9px; height: 5px;
|
|
border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent);
|
|
transform: rotate(-45deg) translateY(-1px) scale(.6);
|
|
opacity: 0; transition: opacity var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-check-input:checked + .cx-check-face .cx-check-box { background: var(--accent); border-color: var(--accent); }
|
|
.cx-check-input:checked + .cx-check-face .cx-check-box::after { opacity: 1; transform: rotate(-45deg) translateY(-1px) scale(1); }
|
|
.cx-check-input:indeterminate + .cx-check-face .cx-check-box { background: var(--accent); border-color: var(--accent); }
|
|
.cx-check-input:indeterminate + .cx-check-face .cx-check-box::after {
|
|
opacity: 1; width: 8px; height: 0; border-bottom: 2px solid var(--on-accent);
|
|
border-left: 0; transform: none;
|
|
}
|
|
.cx-check-input:focus-visible + .cx-check-face .cx-check-box { border-color: var(--accent); box-shadow: var(--focus-ring); }
|
|
.cx-check-input:disabled + .cx-check-face .cx-check-box { opacity: var(--disabled-opacity); }
|
|
|
|
/* The input sits alongside its label, not inside it -- see choice.js. The row
|
|
* is the positioning context; the .cx-check-face label is what you click. */
|
|
.cx-check-row, .cx-radio, .cx-toggle-row { position: relative; }
|
|
/* Room around the words. A checkbox in this app is a switch with a sentence
|
|
under it, not a tick in a list: at 4px the label and its explanation sat hard
|
|
against the top and bottom of the card they are in, and a hint that wrapped
|
|
to two lines had nowhere to wrap into. */
|
|
.cx-check-face {
|
|
display: flex; align-items: flex-start; gap: var(--sp-4);
|
|
cursor: pointer; padding: var(--sp-4) 0;
|
|
}
|
|
.cx-toggle-face { align-items: center; justify-content: space-between; gap: var(--sp-6); }
|
|
/* min-inline-size, or a long word in a hint pushes the row wider than the panel
|
|
it is in instead of wrapping. */
|
|
.cx-check-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
|
|
.cx-check-label { font-size: var(--fs-4); line-height: var(--lh-4); color: var(--text); }
|
|
.cx-checklist {
|
|
display: flex; flex-direction: column;
|
|
max-height: 200px; overflow-y: auto;
|
|
border: var(--bw) solid var(--line); border-radius: var(--r-3);
|
|
padding: var(--sp-3) var(--sp-4);
|
|
}
|
|
|
|
.cx-radio-group { display: flex; gap: var(--sp-4); }
|
|
.cx-radio-vertical { flex-direction: column; gap: var(--sp-2); }
|
|
.cx-radio-dot {
|
|
width: 16px; height: 16px; flex: none; border-radius: var(--r-pill);
|
|
border: var(--bw) solid var(--line); background: var(--elev-2);
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
}
|
|
.cx-radio-dot::after {
|
|
content: ""; width: 8px; height: 8px; border-radius: var(--r-pill);
|
|
background: var(--accent); transform: scale(0);
|
|
transition: transform var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-radio-input:checked + .cx-check-face .cx-radio-dot { border-color: var(--accent); }
|
|
.cx-radio-input:checked + .cx-check-face .cx-radio-dot::after { transform: scale(1); }
|
|
.cx-radio-input:focus-visible + .cx-check-face .cx-radio-dot { border-color: var(--accent); box-shadow: var(--focus-ring); }
|
|
|
|
.cx-select-md { height: var(--ctl-h-lg); padding: 0 var(--ctl-pad-x-md); font-size: var(--fs-4); }
|
|
.cx-select-sm { height: var(--ctl-h-md); padding: 0 var(--ctl-pad-x-sm); font-size: var(--fs-5); }
|
|
|
|
.cx-segmented {
|
|
display: inline-flex; border: var(--bw) solid var(--line);
|
|
border-radius: var(--ctl-r); overflow: hidden; background: var(--elev-2);
|
|
}
|
|
.cx-segment {
|
|
border: 0; background: transparent; color: var(--muted);
|
|
cursor: pointer; font-family: var(--font-ui);
|
|
border-left: var(--bw) solid var(--line);
|
|
transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-segment:first-child { border-left: 0; }
|
|
.cx-segmented-md .cx-segment { height: var(--ctl-h-lg); padding: 0 var(--ctl-pad-x-lg); font-size: var(--fs-5); }
|
|
.cx-segmented-sm { padding: var(--sp-1); gap: var(--sp-1); }
|
|
.cx-segmented-sm .cx-segment { height: var(--ctl-h-sm); padding: 0 var(--ctl-pad-x-md); font-size: var(--fs-6); border-left: 0; border-radius: var(--r-2); }
|
|
.cx-segment:hover { background: var(--hover); color: var(--text); }
|
|
.cx-segment.cx-on { background: var(--accent-soft); color: var(--accent-hi); }
|
|
|
|
|
|
.cx-toggle-track {
|
|
width: 34px; height: 20px; flex: none; border-radius: var(--r-pill);
|
|
background: var(--line); position: relative;
|
|
transition: background var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-toggle-knob {
|
|
position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
|
|
border-radius: var(--r-pill); background: var(--elev-1);
|
|
transition: transform var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-toggle-input:checked + .cx-check-face .cx-toggle-track { background: var(--accent); }
|
|
.cx-toggle-input:checked + .cx-check-face .cx-toggle-track .cx-toggle-knob { transform: translateX(14px); }
|
|
.cx-toggle-input:focus-visible + .cx-check-face .cx-toggle-track { box-shadow: var(--focus-ring); }
|
|
|
|
/* Colour: the swatch sized to the control height so it lines up with every
|
|
other field in a settings column, and the hex field kept narrow because six
|
|
characters in a full-width input reads as an empty box. */
|
|
.cx-swatch-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-4);
|
|
}
|
|
|
|
.cx-swatch {
|
|
inline-size: var(--ctl-h-lg);
|
|
block-size: var(--ctl-h-lg);
|
|
padding: 0;
|
|
border: var(--bw) solid var(--line);
|
|
border-radius: var(--ctl-r);
|
|
background: var(--elev-1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cx-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
|
|
.cx-swatch::-webkit-color-swatch { border: 0; border-radius: var(--r-2); }
|
|
.cx-swatch::-moz-color-swatch { border: 0; border-radius: var(--r-2); }
|
|
|
|
.cx-swatch:disabled { opacity: var(--disabled-opacity); cursor: default; }
|
|
|
|
.cx-swatch-hex {
|
|
inline-size: 10ch;
|
|
font-family: var(--font-mono);
|
|
}
|