master @ 37 LINES
[ HISTORY ] [ UP ]
┌─ SCSS ─────────────────────────────────────────────────────────────────────┐
│ .radio { │
│ cursor: pointer; │
│ white-space: pre; │
│ │
│ input { │
│ position: absolute; │
│ opacity: 0; │
│ width: 1px; │
│ height: 1px; │
│ margin: 0; │
│ pointer-events: none; │
│ } │
│ │
│ .radio-mark::before { │
│ content: "( )"; │
│ } │
│ input:checked + .radio-mark::before { │
│ content: "(-)"; │
│ } │
│ │
│ input:focus-visible + .radio-mark { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 1px; │
│ } │
│ │
│ &:hover:not(:has(input:disabled)) { │
│ text-decoration: underline; │
│ text-underline-offset: 3px; │
│ } │
│ │
│ &:has(input:disabled) { │
│ color: var(--ink-soft); │
│ opacity: 0.55; │
│ cursor: not-allowed; │
│ } │
│ } │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ SCSS ───────────────────────────────┐
│ .radio { │
│ cursor: pointer; │
│ white-space: pre; │
│ │
│ input { │
│ position: absolute; │
│ opacity: 0; │
│ width: 1px; │
│ height: 1px; │
│ margin: 0; │
│ pointer-events: none; │
│ } │
│ │
│ .radio-mark::before { │
│ content: "( )"; │
│ } │
│ input:checked + .radio-mark::before { │
│ content: "(-)"; │
│ } │
│ │
│ input:focus-visible + .radio-mark { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 1px; │
│ } │
│ │
│ &:hover:not(:has(input:disabled)) { │
│ text-decoration: underline; │
│ text-underline-offset: 3px; │
│ } │
│ │
│ &:has(input:disabled) { │
│ color: var(--ink-soft); │
│ opacity: 0.55; │
│ cursor: not-allowed; │
│ } │
│ } │
└──────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET