Skip to content

Instantly share code, notes, and snippets.

@robertlyall
Created February 20, 2015 13:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robertlyall/c1ff9cd9a73c87a35864 to your computer and use it in GitHub Desktop.
Save robertlyall/c1ff9cd9a73c87a35864 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="sexy-checkbox">
<label class="sexy-checkbox__container" for="swag"></label>
<input class="sexy-checkbox__checkbox" type="checkbox" id="swag">
<label class="sexy-checkbox__fill" for="swag"></label>
</div>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
.sexy-checkbox {
position: relative;
}
.sexy-checkbox__container {
border: 1px solid #d7d7d7;
border-radius :50%;
display: block;
height: 30px;
width: 30px;
}
.sexy-checkbox__checkbox {
display: none;
}
.sexy-checkbox__fill {
background: #f62f62;
border-radius: 50%;
display: none;
height: 26px;
position: absolute;
top: 3px;
left: 3px;
width: 26px;
}
.sexy-checkbox__checkbox:checked + .sexy-checkbox__fill {
display: block;
}
.sexy-checkbox {
position: relative;
}
.sexy-checkbox__container {
border: 1px solid #d7d7d7;
border-radius: 50%;
display: block;
height: 30px;
width: 30px;
}
.sexy-checkbox__checkbox {
display: none;
}
.sexy-checkbox__fill {
background: #f62f62;
border-radius: 50%;
display: none;
height: 26px;
position: absolute;
top: 3px;
left: 3px;
width: 26px;
}
.sexy-checkbox__checkbox:checked + .sexy-checkbox__fill {
display: block;
}
<div class="sexy-checkbox">
<label class="sexy-checkbox__container" for="swag"></label>
<input class="sexy-checkbox__checkbox" type="checkbox" id="swag">
<label class="sexy-checkbox__fill" for="swag"></label>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment