Permalink
Cannot retrieve contributors at this time
// Radios & checkboxes | |
// | |
// Part of any good form. | |
$radio-check-size: 12px; | |
// Some shared styling for checkboxes & radios | |
//input[type=radio], input[type=checkbox] { | |
.radio, .checkbox { | |
-moz-user-select: none; | |
-webkit-user-select: none; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
vertical-align: -1px; | |
padding: 0; | |
margin: 0; // reset | |
font-size: 100%; | |
outline: none; | |
background-image: linear-gradient(transparent, var(--color-shadow-2)); | |
background-color: transparent; // iOS reset | |
border: var(--space-px) solid var(--color, var(--color-main-5)); | |
outline: none; | |
width: $radio-check-size; | |
height: $radio-check-size; | |
position: relative; | |
display: inline-block; | |
cursor: pointer; | |
transition: box-shadow .4s; | |
border-radius: 0;// ios7 reset | |
align-self: center; // opinionated smart default for checkboxed within flex rows | |
&:focus { | |
//border-color: var(--colored, var(--color-main-5)); | |
box-shadow: 0 0 0 var(--space-px) var(--color, var(--color-main-5)); | |
} | |
&:disabled { | |
opacity: .3; | |
cursor: not-allowed; | |
} | |
&:after, &:before { | |
content: ''; | |
position: absolute; | |
background-color: var(--color, var(--color-main-5)); | |
} | |
} | |
//input[type=radio] { | |
.radio { | |
border-radius: 50%; | |
&:after { | |
border: 1px solid var(--color, var(--color-main-5)); | |
border-radius: 50%; | |
width: 4px; | |
height: 4px; | |
top: 50%; | |
left: 50%; | |
transform: scale(0) translateX(-50%) translateY(-50%); | |
transform-origin: 0% 0%; | |
} | |
&:checked:after { | |
transform: scale(1) translateX(-50%) translateY(-50%); | |
} | |
} | |
// pseudo real checkboxes with a checkmark | |
//input[type=checkbox] { | |
.checkbox { | |
position: relative; | |
//border-radius: 2px; | |
&:before, &:after { | |
width: 3px; | |
height: 6px; | |
top: 0; | |
left: 0; | |
} | |
// left part | |
&:after { | |
transform: scale(0) translateX(2px) translateY(2px) rotate(-45deg); | |
} | |
// right part | |
&:before { | |
transform: scale(0) translateX(7px) translateY(-5px) rotate(45deg); | |
transform-origin: 2px 7px; | |
height: 14px; | |
} | |
&:checked { | |
&:after { transform: scale(1) translateX(2px) translateY(2px) rotate(-45deg); } | |
&:before { transform: scale(1) translateX(7px) translateY(-5px) rotate(45deg); } | |
} | |
} | |
.active { | |
.radio, .checkbox { | |
background-image: linear-gradient(var(--color-highlight-3), var(--color-highlight-1)); | |
border-color: var(--color-main-1); | |
&:after, &:before { | |
background-color: var(--color-main-1); | |
} | |
&:focus { | |
box-shadow: 0 0 0 var(--space-px) var(--color-main-1); | |
} | |
} | |
} |