Requires CSS Browser Selector to disable on IE8 and Android
Last active
January 21, 2016 19:49
-
-
Save allybee/5ce0c8114005b423e9a6 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<form class="form"> | |
<div class="checkbox"> | |
<label> | |
<input type="checkbox" value=""> | |
<span>Option one is this and that—be sure to include why it's great</span> | |
</label> | |
</div> | |
<div class="checkbox disabled"> | |
<label> | |
<input type="checkbox" value="" disabled> | |
<span>Option two is disabled</span> | |
</label> | |
</div> | |
<div class="radio"> | |
<label> | |
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> | |
<span>Option one is this and that—be sure to include why it's great</span> | |
</label> | |
</div> | |
<div class="radio"> | |
<label> | |
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> | |
<span>Option two can be something else and selecting it will deselect option one</span> | |
</label> | |
</div> | |
<div class="radio disabled"> | |
<label> | |
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> | |
<span>Option three is disabled</span> | |
</label> | |
</div> | |
</form> | |
</div><!-- /.container --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
//== Pretty Radios & Checkboxes | |
// | |
//## Requires [CSS Browser Selector](https://github.com/crucifyer/css-browser-selector) to disable on IE8 and Android | |
// Bootstrap Variables | |
$brand-success: #5cb85c; | |
$input-border: #ccc; | |
$text-muted: lighten(#000, 46.7%); | |
// Custom Variables | |
$font-weight-normal: normal; | |
// Wrap in some class so we ony style the elements we want to | |
.form { | |
.checkbox, | |
.radio { | |
font-size: 1em; | |
cursor: pointer; | |
label { | |
padding-left: 0; | |
} | |
// We need to wrap the text in a span tag so we can determine if it is next to a :checked input | |
span { | |
font-weight: $font-weight-normal; | |
position: relative; | |
display: block; | |
padding-left: 2em; | |
&:before { | |
position: absolute; | |
top: 3px; | |
left: 0; | |
display: inline-block; | |
width: 1em; | |
height: 1em; | |
font-weight: bold; | |
line-height: 1em; | |
color: $brand-success; | |
text-align: center; | |
content: ''; | |
background-color: #fff; | |
box-shadow: 0 0 0 1px $input-border; | |
box-shadow: 0 0 0 1px $input-border, | |
inset 0 0 0 3px #fff; | |
-webkit-font-smoothing: antialiased; | |
} | |
} | |
} | |
// Make radios a circle | |
.radio span:before { | |
border-radius: 50%; | |
} | |
// Disabled state | |
.checkbox.disabled span, | |
fieldset[disabled] .checkbox span, | |
.radio.disabled span, | |
fieldset[disabled] .radio span { | |
color: $text-muted; | |
&:before { | |
box-shadow: 0 0 0 1px lighten($input-border, 12%); | |
} | |
} | |
// Checked state | |
.checkbox input[type='checkbox'], | |
.radio input[type='radio'] { | |
display: none; | |
&:checked ~ span:before { | |
background-color: $brand-success; | |
} | |
} | |
} | |
// Reset on IE8 and Android | |
.ie8, | |
.android { | |
.checkbox, | |
.radio { | |
margin-left: 20px; | |
span { | |
padding-left: 0; | |
&:before { | |
display: none; | |
} | |
} | |
} | |
.checkbox input[type='checkbox'], | |
.radio input[type='radio'] { | |
display: block; | |
} | |
} | |
// Import Bootstrap for the Demo | |
@import "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"; | |
.form .checkbox, | |
.form .radio { | |
font-size: 1em; | |
cursor: pointer; | |
} | |
.form .checkbox label, | |
.form .radio label { | |
padding-left: 0; | |
} | |
.form .checkbox span, | |
.form .radio span { | |
font-weight: normal; | |
position: relative; | |
display: block; | |
padding-left: 2em; | |
} | |
.form .checkbox span:before, | |
.form .radio span:before { | |
position: absolute; | |
top: 3px; | |
left: 0; | |
display: inline-block; | |
width: 1em; | |
height: 1em; | |
font-weight: bold; | |
line-height: 1em; | |
color: #5cb85c; | |
text-align: center; | |
content: ''; | |
background-color: #fff; | |
box-shadow: 0 0 0 1px #ccc; | |
box-shadow: 0 0 0 1px #ccc, inset 0 0 0 3px #fff; | |
-webkit-font-smoothing: antialiased; | |
} | |
.form .radio span:before { | |
border-radius: 50%; | |
} | |
.form .checkbox.disabled span, | |
.form fieldset[disabled] .checkbox span, | |
.form .radio.disabled span, | |
.form fieldset[disabled] .radio span { | |
color: #777777; | |
} | |
.form .checkbox.disabled span:before, | |
.form fieldset[disabled] .checkbox span:before, | |
.form .radio.disabled span:before, | |
.form fieldset[disabled] .radio span:before { | |
box-shadow: 0 0 0 1px #ebebeb; | |
} | |
.form .checkbox input[type='checkbox'], | |
.form .radio input[type='radio'] { | |
display: none; | |
} | |
.form .checkbox input[type='checkbox']:checked ~ span:before, | |
.form .radio input[type='radio']:checked ~ span:before { | |
background-color: #5cb85c; | |
} | |
.ie8 .checkbox, | |
.ie8 .radio, | |
.android .checkbox, | |
.android .radio { | |
margin-left: 20px; | |
} | |
.ie8 .checkbox span, | |
.ie8 .radio span, | |
.android .checkbox span, | |
.android .radio span { | |
padding-left: 0; | |
} | |
.ie8 .checkbox span:before, | |
.ie8 .radio span:before, | |
.android .checkbox span:before, | |
.android .radio span:before { | |
display: none; | |
} | |
.ie8 .checkbox input[type='checkbox'], | |
.ie8 .radio input[type='radio'], | |
.android .checkbox input[type='checkbox'], | |
.android .radio input[type='radio'] { | |
display: block; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<form class="form"> | |
<div class="checkbox"> | |
<label> | |
<input type="checkbox" value=""> | |
<span>Option one is this and that—be sure to include why it's great</span> | |
</label> | |
</div> | |
<div class="checkbox disabled"> | |
<label> | |
<input type="checkbox" value="" disabled> | |
<span>Option two is disabled</span> | |
</label> | |
</div> | |
<div class="radio"> | |
<label> | |
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> | |
<span>Option one is this and that—be sure to include why it's great</span> | |
</label> | |
</div> | |
<div class="radio"> | |
<label> | |
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> | |
<span>Option two can be something else and selecting it will deselect option one</span> | |
</label> | |
</div> | |
<div class="radio disabled"> | |
<label> | |
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> | |
<span>Option three is disabled</span> | |
</label> | |
</div> | |
</form> | |
</div><!-- /.container --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment