Skip to content

Instantly share code, notes, and snippets.

@jmabbas
Last active May 30, 2017 05:18
Show Gist options
  • Save jmabbas/3cf170fb7452552cf747defb9cc0e7ce to your computer and use it in GitHub Desktop.
Save jmabbas/3cf170fb7452552cf747defb9cc0e7ce to your computer and use it in GitHub Desktop.
pizzaro Radio button style
.ywapo_group_container_radio label {
height: 100%;
width: auto;
text-align: left;
}
.ywapo_input_container_radio input {
height: 32px;
}
.ywapo_group_container_radio label:before {
content: "\f10c";
font-size: 16px;
color: #d2d2d2;
font-weight: 100;
border: 0px;
font-family: FontAwesome,sans-serif;
width: initial;
height: initial;
position: initial;
transform: initial;
}
.ywapo_group_container_radio label span {
padding: 0;
text-align: left;
margin-left: 5px;
width: 100%;
display: inline;
}
.single-product div.product form.cart .ywapo_input_container_radio input:checked+label::before {
content: "\f058";
background-color: #000;
color: #ffcd00;
border: 0px;
box-shadow: inset 0px -10px 0px -8px rgba(255,255,255,1);
background: radial-gradient(ellipse at center, rgba(19,19,19,1) 43%, rgba(19,19,19,0.45) 32%, rgba(76,76,76,0) 60%);
}
.single-product div.product form.cart .ywapo_input_container_radio:hover label::before {
background-color: transparent;
border: 0px;
}
.single-product div.product form.cart .ywapo_input_container_radio {
display: block;
}
.ywapo_input_container_radio:hover label::before {
background-color: transparent;
border: 0px;
}
ul.products li.product:hover .ywapo_input_container_radio input:checked+label::before {
content: "\f058";
background-color: #000;
color: #ffcd00;
border: 0px;
box-shadow: inset 0px -10px 0px -8px rgba(255,255,255,1);
background: radial-gradient(ellipse at center, rgba(19,19,19,1) 43%, rgba(19,19,19,0.45) 32%, rgba(76,76,76,0) 60%);
}
ul.products li.product .ywapo_input_container_radio.ywapo_input_container {
display: block;
}
.ywapo_option_description {
display: none;
}
@media (max-width: 1199px) {
ul.products li.product .ywapo_input_container_radio.ywapo_input_container {
margin-bottom: 5px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment