<header class="header">
</header>
<section class="content">
<ul class="list">
<li class="list__item">
<label class="label--checkbox">
<input type="checkbox" class="checkbox" checked>
Item 1
</label>
</li>
<li class="list__item">
<label class="label--checkbox">
<input type="checkbox" class="checkbox">
Item 2
</label>
</li>
<li class="list__item">
<label class="label--checkbox">
<input type="checkbox" class="checkbox">
Item 3
</label>
</li>
<li class="list__item">
<label class="label--checkbox">
<input type="checkbox" class="checkbox">
Item 4
</label>
</li>
</ul>
</section>
<a href="https://www.twitter.com/sambego" target="_blank" class="button--round button--sticky">
<i class="fa fa-twitter"></i>
</a>
@import "bourbon";
body {
font-size: 16px;
}
.header {
height: 8rem;
background: #009688;
}
.content {
width: 20rem;
margin: -4rem auto 0 auto;
padding: 1rem;
background: #fff;
border-radius: 0.125rem;
box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);
}
.list {
margin: 0.5rem;
}
.list__item {
margin: 0 0 0.5rem 0;
padding: 0;
}
.label--checkbox {
position: relative;
margin: 0.5rem;
font-family: Arial, sans-serif;
line-height: 135%;
cursor: pointer;
}
.checkbox {
position: relative;
top: -0.375rem;
margin: 0 1rem 0 0;
cursor: pointer;
}
.checkbox:before {
content: "";
position: absolute;
left: 0;
z-index: 1;
width: 1rem;
height: 1rem;
border: 2px solid #f2f2f2;
}
.checkbox:checked:before {
height: 0.5rem;
border-color: #009688;
border-top-style: none;
border-right-style: none;
}
.checkbox:after {
content: "";
position: absolute;
top: -0.125rem;
left: 0;
width: 1.1rem;
height: 1.1rem;
background: #fff;
cursor: pointer;
}
.button--round {
width: 2rem;
height: 2rem;
background: #5677fc;
border-radius: 50%;
box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);
color: #fff;
text-decoration: none;
text-align: center;
}
.button--round i {
font-size: 1rem;
line-height: 220%;
vertical-align: middle;
}
.button--round:hover {
background: #3b50ce;
}
.button--sticky {
position: fixed;
right: 2rem;
top: 16rem;
}
.content {
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideUp;
animation-name: slideUp;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(6.25rem);
transform: translateY(6.25rem);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideUp {
0% {
-webkit-transform: translateY(6.25rem);
transform: translateY(6.25rem);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
/* Checkboxes based upon the material design implementation of the polymer checkboxes.
* They don't fully replicate these but are just an exercise to imitate them with just css.
* These only work in chrome :)
*
* See:
* - https://www.google.com/design/spec
* - http://www.polymer-project.org/components/paper-elements/demo.html#paper-checkbox
*
* Other checkbox experiments:
* - https://codepen.io/Sambego/pen/yiruz
* - https://codepen.io/Sambego/pen/ICsjd
* - https://codepen.io/Sambego/pen/mIhbk
*/