@nomios/web-uikit
Version:
Nomios' living web UIKit
71 lines (58 loc) • 1.99 kB
CSS
/*
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;
}