UNPKG

@nomios/web-uikit

Version:
71 lines (58 loc) 1.99 kB
/* Note: If you add a color here, please add it to "/stories/base/colors.css" as well */ /* ========================================================================== Fonts ========================================================================== */ /* ========================================================================== All typography variants $unit - Either em or rem ========================================================================== */ .inputContainer { display: inline-flex } .inputContainer:hover label span { color: rgb(75, 69, 61) } .inputContainer:hover label span::before { border-color: rgba(75, 69, 61, 0.8); } .inputContainer label { position: relative; cursor: pointer } .inputContainer label span { will-change: color; font-family: "IbmPlexMono", monospace; font-weight: 400; font-size: 1.6rem; line-height: calc(2.4em / 1.6); margin-left: calc(1.6rem + 1.2rem); color: rgba(75, 69, 61, 0.7); transition: color 0.2s ease } .inputContainer label span::before { content: ""; box-sizing: border-box; will-change: border; position: absolute; top: 50%; left: 0; width: 1.6rem; height: 1.6rem; transform: translateY(-50%); border: 1px solid rgba(75, 69, 61, 0.3); border-radius: 50%; transition: border 0.2s ease; } .inputContainer label input { position: absolute; opacity: 0; cursor: pointer } .inputContainer label input:checked + span { color: rgb(75, 69, 61) } .inputContainer label input:checked + span::before { border: 0.6rem solid #d4b58b; }