Skip to content

Instantly share code, notes, and snippets.

@cristianferrarig
Last active October 22, 2015 14:16
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 cristianferrarig/4dda06886d77bd39d369 to your computer and use it in GitHub Desktop.
Save cristianferrarig/4dda06886d77bd39d369 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
@function solidify($alpha-color, $background-color: white) {
$percent: alpha($alpha-color) * 100%;
$opaque: opacify($alpha-color, 1);
$solid-color: mix($opaque, $background-color, $percent);
@return $solid-color;
}
$color: #12B398;
$light-color: solidify(rgba($color,.2));
$inverse: white;
body {
margin: 0;
padding: 50px;
}
.follow {
& {
position: relative;
}
span {
border-radius: 50%;
font-family: sans-serif;
text-align: center;
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
background: $inverse;
color: $color;
border: 1px solid $light-color;
background-clip: padding-box;
margin: 5px;
user-select: none;
cursor: pointer;
transition: all .25s;
}
span:active {
background: $light-color;
border-width: 6px;
margin: 0;
color: $inverse;
}
input {
position: absolute;
visibility: hidden;
}
input:checked {
+ span {
background: $color;
color: $inverse;
border-color: $color;
}
}
}
body {
margin: 0;
padding: 50px;
}
.follow {
position: relative;
}
.follow span {
border-radius: 50%;
font-family: sans-serif;
text-align: center;
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
background: white;
color: #12B398;
border: 1px solid #cfefea;
background-clip: padding-box;
margin: 5px;
user-select: none;
cursor: pointer;
transition: all .25s;
}
.follow span:active {
background: #cfefea;
border-width: 6px;
margin: 0;
color: white;
}
.follow input {
position: absolute;
visibility: hidden;
}
.follow input:checked + span {
background: #12B398;
color: white;
border-color: #12B398;
}
<label class='follow'>
<input type='checkbox'>
<span>+0</span>
</label>
<label class='follow'>
<input type='checkbox'>
<span>+0</span>
</label>
%label.follow
%input{type: "checkbox"}
%span +0
%label.follow
%input{type: "checkbox"}
%span +0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment