Permalink
Browse files

fix(checkbox): is in a different branch

  • Loading branch information...
Freihofner, Katrin Freihofner, Katrin
Freihofner, Katrin authored and Freihofner, Katrin committed Jul 21, 2016
1 parent 8ad15b3 commit b8ace8a13bf951afd13709555d525644656941f7
View
@@ -1,4 +0,0 @@
## Notes
The checkbox needs `input` and `label` elements to work properly. Not applicable
to other elements.
View
@@ -1,80 +0,0 @@
@import "../common/variables";
.checkbox {
position: absolute;
width: 16px;
height: 16px;
border: solid 2px $turquoise600;
}
.checkbox__label {
position: relative;
padding-left: 28px;
cursor: pointer;
user-select: none;
}
.to-right + .checkbox__label {
padding-left: 28px;
padding-right: 28px;
}
.to-right + .checkbox__label:before {
left: auto;
right: 0;
}
.to-right + .checkbox__label:after {
left: auto;
right: 18px;
}
.checkbox:checked + .checkbox__label:before {
/*background-color: $turquoise600;
border-color: $turquoise600;*/
}
.checkbox:checked + .checkbox__label:after {
left: 16px;
}
.checkbox.to-right:checked + .checkbox__label:after {
/*left: auto;
right: 2px;*/
}
.checkbox[disabled] + .checkbox__label:before {
border-color: $gray300;
}
.checkbox[disabled]:checked + .checkbox__label:before {
border-color: $gray300;
}
.checkbox[disabled] + .checkbox__label:after {
background-color: transparent;
border: 2px solid $gray300;
}
.checkbox[disabled]:checked + .checkbox__label:before {
background-color: transparent;
}
.checkbox[disabled] + .checkbox__label {
color: $gray300;
cursor: default;
}
.checkbox:focus:not(:active) + .checkbox__label:before {
border-color: $turquoise400;
}
.checkbox__label:focus {
outline: none;
}
.checkbox__caption {
font-family: $mainfont;
font-size: 14px;
}
@@ -1,4 +0,0 @@
<input type="checkbox" class="checkbox" id="cb1"/>
<label for="cb1" class="checkbox__label">
<span class="checkbox__caption">blubber</span>
</label>
@@ -1,4 +0,0 @@
<input type="checkbox" checked class="checkbox" id="cb2"/>
<label for="cb2" class="checkbox__label">
<span class="checkbox__caption">Test</span>
</label>
@@ -1,4 +0,0 @@
<input type="checkbox" disabled class="checkbox" id="cb3"/>
<label for="cb3" class="checkbox__label">
<span class="checkbox__caption">Test</span>
</label>
@@ -1,4 +0,0 @@
<input type="checkbox" checked disabled class="checkbox" id="cb4"/>
<label for="cb4" class="checkbox__label">
<span class="checkbox__caption">Test</span>
</label>
@@ -1,4 +0,0 @@
<input type="checkbox" class="checkbox to-right" id="cb5"/>
<label for="cb5" class="checkbox__label">
<span class="checkbox__caption">Test</span>
</label>
@@ -1,4 +0,0 @@
<input type="checkbox" class="checkbox to-right" id="cb6"/>
<label for="cb6" class="checkbox__label">
<span class="checkbox__caption">Test</span>
</label>
@@ -1,4 +0,0 @@
<input type="checkbox" disabled class="checkbox to-right" id="cb7"/>
<label for="cb7" class="checkbox__label">
<span class="checkbox__caption">Test</span>
</label>
@@ -1,4 +0,0 @@
<input type="checkbox" disabled checked class="checkbox to-right" id="cb8"/>
<label for="cb8" class="checkbox__label">
<span class="checkbox__caption">Test</span>
</label>

0 comments on commit b8ace8a

Please sign in to comment.