colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
59 lines (51 loc) • 1.4 kB
text/stylus
// Radio buttons
//
// Default styles for radio buttons.
// Styling method takes a lot of inspiration from Materialize CSS.
//
// Markup: form-radiobutton.twig
//
// Weight: 5
//
// Styleguide: Forms.RadioButtons
// Checkboxes
//
// Default styles for checkboxes.
// Styling method takes a lot of inspiration from Materialize CSS.
//
// Markup: form-checkbox.twig
//
// Weight: 6
//
// Styleguide: Forms.Checkboxes
input[type='checkbox']
input[type='radio']
position absolute
opacity 0
pointer-events none
+ label
display inline-block
position relative
padding-left 1.5em
&:before
content ''
display inline-block
position absolute
top .25em
left 0
width 1em
height @width
background-color var(--form-input-text-color)
border 2px solid var(--form-input-radio-border-color)
box-shadow inset 0 0 0 1em var(--form-input-bg-color) // hide background
transition box-shadow .3s ease, color .3s linear
&:checked + label:before
box-shadow inset 0 0 0 .1em var(--form-input-bg-color)
&:focus + label
{outline}
.js-focus-visible &:focus:not(:focus-visible) + label
outline 0
input[type='radio']
+ label
&:before
border-radius 20em // high value to make it round