Skip to content

Instantly share code, notes, and snippets.

@ckahle33
Created May 2, 2014 17:57
Show Gist options
  • Save ckahle33/df2f159435a7f01ba83b to your computer and use it in GitHub Desktop.
Save ckahle33/df2f159435a7f01ba83b to your computer and use it in GitHub Desktop.
.product-box {
width: 320px;
background: $lightgrey;
clear: both;
border: 1px 1px 3px 1px solid $grey;
position: absolute;
left: 13%;
z-index: 1;
.title {
background: $green;
margin: 0;
padding: 5px 20px;
background-image: url("../img/down-arrow.png");
background-repeat: no-repeat;
background-position-x: 270px;
background-position-y: 25px;
}
.active {
background-image: url("../img/up-arrow.png");
background-repeat: no-repeat;
background-position-x: 270px;
background-position-y: 25px;
}
#options input[type='checkbox'] {
display: none;
+ label {
display: block;
width:36px;
height: 35px;
vertical-align: middle;
background: url("../img/checkbox.png") left top no-repeat;
float: left;
padding: 5px 0 0 40px;
margin-bottom: 10px;
font-size: 18px;
}
&:checked + label {
display: block;
width:36px;
height: 35px;
vertical-align: middle;
background: url("../img/checkbox-checked.png") left top no-repeat;
float: left;
width: 100%;
}
}
}
.industry-box {
width: 320px;
background: $lightgrey;
clear: both;
border: 1px 1px 3px 1px solid $grey;
position: absolute;
right: 13%;
z-index: 1;
.title {
background: $lightblue;
margin: 0;
padding: 5px 20px;
background-image: url("../img/down-arrow.png");
background-repeat: no-repeat;
background-position-x: 270px;
background-position-y: 25px;
}
.active {
background-image: url("../img/up-arrow.png");
background-repeat: no-repeat;
background-position-x: 270px;
background-position-y: 25px;
}
#options2 input[type='checkbox'] {
display: none;
+ label {
display: block;
width:36px;
height: 35px;
vertical-align: middle;
background: url("../img/checkbox.png") left top no-repeat;
float: left;
padding: 5px 0 0 40px;
margin-bottom: 10px;
font-size: 18px;
width: 100%;
}
&:checked + label {
display: block;
width:36px;
height: 35px;
vertical-align: middle;
background: url("../img/checkbox-checked-blue.png") left top no-repeat;
float: left;
width: 100%;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment