Skip to content

Instantly share code, notes, and snippets.

@sylphdesign
Created March 4, 2016 22:29
Show Gist options
  • Select an option

  • Save sylphdesign/7a748fe2a25322220fa0 to your computer and use it in GitHub Desktop.

Select an option

Save sylphdesign/7a748fe2a25322220fa0 to your computer and use it in GitHub Desktop.
vGNWpz
<div class="sidebar">
<label for="margin">MARGIN</label>
<div class="vtm-checkbox__wrapper">
<label class="">
<input type="checkbox" name="all" value="all" checked />
<span>All</span>
</label>
<label class="">
<input type="checkbox" name="top" value="top" checked />
<span>t</span>
</label>
<label class="">
<input type="checkbox" name="right" value="right" />
<span>r</span>
</label>
<label class="">
<input type="checkbox" name="bottom" value="bottom" />
<span>b</span>
</label><label class="">
<input type="checkbox" name="left" value="left" />
<span>l</span>
</label>
</div>
<div class="select-box">
<select name="sizes" id="">
<option value="none">None</option>
<option value="xs">X-Small</option>
<option value="sm">Small</option>
<option value="md">Medium</option>
<option value="lg">Large</option>
<option value="xl">X-Large</option>
</select>
</div>
</div>
.sidebar {
width: 340px;
padding: 1em;
background: black;
color: white;
}
.vtm-checkbox__wrapper {
display: flex;
margin: 1em 0;
justify-content: space-between;
input[type="checkbox"]{
display: none;
+ span{
text-transform: uppercase;
background: grey;
width: 40px;
height: 40px;
padding: 5px;
outline: 1px dotted darkgrey;
}
&:checked {
+ span{
background: green;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment