Skip to content

Instantly share code, notes, and snippets.

@trilodge
Last active August 29, 2015 14:19
Show Gist options
  • Save trilodge/172f1cb9175d19794d12 to your computer and use it in GitHub Desktop.
Save trilodge/172f1cb9175d19794d12 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="row row--alt survey_chbx">
<input id="policy" type="checkbox" name="policy" class="checkbox" required>
<label for="policy"><em title="Pflichtfeld">*</em> Ich bin mit den <a href="#">Nutzungsbedingungen</a> sowie mit der
<a href="#">Erhebung meiner Daten</a> einverstanden.
</label>
</div>
<br><br><br>
<div class="row survey_radio">
<input id="radio2" name="radio" type="radio" class="radio"> <label for="radio2">Option 2</label>
</div>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
%vh {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
// @mixin checkbox
//
// Markup needs to be input + label in sourceorder for this thing to work
//
// $height,
// $width,
// $labelcolor: $grey,
// $position: "right",
// $content: "×"
//
@mixin checkbox( $height, $width, $labelcolor, $color, $position: 'left', $content: "") {
@extend %vh;
+ label {
color: $labelcolor;
position: relative;
padding: 12px;
vertical-align: middle;
@if $position == "right" {
padding-right: 2.5em;
margin-right: 6px;
}
@else if $position == "left" {
padding-left: 2.5em;
margin-left: 6px;
}
&:before {
content: '';
color: $color;
position: absolute;
top: 6px;
@if $position == "right" {
right: 0;
}
@else if $position == "left" {
left: 0;
}
width: $width;
height: $height;
border: 1px solid #ededed;
background: white;
font-size: 18px;
line-height: 21px;
text-align: center;
}
}
&:checked {
+ label {
color: black;
&:before {
content: $content;
font-size: 45px;
line-height: 31px;
text-align: center;
text-transform: uppercase;
}
}
}
// Include any extra rules supplied
@content;
}
// @mixin radio
//
// Markup needs to be input + label in sourceorder for this thing to work
//
// $height,
// $width,
// $labelcolor: $grey,
// $position: "right"
//
@mixin radio( $height, $width, $labelcolor, $color, $position: 'left') {
@extend %vh;
+ label {
color: $labelcolor;
position: relative;
padding: 12px;
vertical-align: middle;
@if $position == "right" {
padding-right: 2.5em;
margin-right: 6px;
}
@else if $position == "left" {
padding-left: 2.5em;
margin-left: 6px;
}
&:before {
content: '';
color: $color;
position: absolute;
top: 6px;
@if $position == "right" {
right: 0;
}
@else if $position == "left" {
left: 0;
}
width: $width;
height: $height;
border: 1px solid #ededed;
background: white;
font-size: 18px;
text-align: center;
}
}
&:checked {
+ label {
color: black;
&:after {
content: '';
background-color: $color;
position: absolute;
top: 14px;
@if $position == "right" {
right: 8px;
}
@else if $position == "left" {
left: 8px;
}
width: 18px;
height: 18px;
}
}
}
+ label {
&:before,
&:after {
border-radius: 50%;
}
}
// Include any extra rules supplied
@content;
}
.survey_chbx {
.checkbox {
@include checkbox($height: 32px, $width: 32px, $labelcolor: #000, $color: #ededed, $position: left, $content: '✔');
}
}
.survey_radio {
.radio {
@include radio($height: 32px, $width: 32px, $labelcolor: #000, $color: #ededed, $position: right);
}
}
@charset "UTF-8";
.survey_chbx .checkbox, .survey_radio .radio {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.survey_chbx .checkbox + label {
color: #000;
position: relative;
padding: 12px;
vertical-align: middle;
padding-left: 2.5em;
margin-left: 6px;
}
.survey_chbx .checkbox + label:before {
content: '';
color: #ededed;
position: absolute;
top: 6px;
left: 0;
width: 32px;
height: 32px;
border: 1px solid #ededed;
background: white;
font-size: 18px;
line-height: 21px;
text-align: center;
}
.survey_chbx .checkbox:checked + label {
color: black;
}
.survey_chbx .checkbox:checked + label:before {
content: "✔";
font-size: 45px;
line-height: 31px;
text-align: center;
text-transform: uppercase;
}
.survey_radio .radio + label {
color: #000;
position: relative;
padding: 12px;
vertical-align: middle;
padding-right: 2.5em;
margin-right: 6px;
}
.survey_radio .radio + label:before {
content: '';
color: #ededed;
position: absolute;
top: 6px;
right: 0;
width: 32px;
height: 32px;
border: 1px solid #ededed;
background: white;
font-size: 18px;
text-align: center;
}
.survey_radio .radio:checked + label {
color: black;
}
.survey_radio .radio:checked + label:after {
content: '';
background-color: #ededed;
position: absolute;
top: 14px;
right: 8px;
width: 18px;
height: 18px;
}
.survey_radio .radio + label:before, .survey_radio .radio + label:after {
border-radius: 50%;
}
<div class="row row--alt survey_chbx">
<input id="policy" type="checkbox" name="policy" class="checkbox" required>
<label for="policy"><em title="Pflichtfeld">*</em> Ich bin mit den <a href="#">Nutzungsbedingungen</a> sowie mit der
<a href="#">Erhebung meiner Daten</a> einverstanden.
</label>
</div>
<br><br><br>
<div class="row survey_radio">
<input id="radio2" name="radio" type="radio" class="radio"> <label for="radio2">Option 2</label>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment