Permalink
Browse files

feat(checkbox): added dark theme for checkbox

  • Loading branch information...
Freihofner, Katrin Freihofner, Katrin
Freihofner, Katrin authored and Freihofner, Katrin committed Dec 14, 2016
1 parent e6be81c commit 3d8314f2f3db4c6c34822617c3f35bc6579b4079
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<polygon fill="#ffffff" points="453.448,132.553 404.422,91.414 203.872,330.42 99.69,243.001 58.552,292.028 211.76,420.586 "/>
</svg>
View
@@ -18,6 +18,11 @@
padding-right: 20px;
}
.theme--dark .checkbox__label,
.checkbox__label.theme--dark {
color: #fff;
}
.checkbox__label:before {
content: " ";
display: inline-block;
@@ -29,6 +34,11 @@
box-sizing: border-box;
}
.theme--dark .checkbox__label:before,
.checkbox__label.theme--dark:before {
border: solid 2px #fff;
}
.checkbox__label:after {
content: " ";
position: absolute;
@@ -42,6 +52,11 @@
display: none;
}
.theme--dark .checkbox__label:after,
.checkbox__label.theme--dark:after {
background-image: url(/assets/images/icons/Icons_file_003_Checkmark_white.svg);
}
.checkbox__label > icon {
width: 18px;
height: 18px;
@@ -59,24 +74,37 @@
border-color: $turquoise-700;
}
.checkbox:checked + .checkbox__label:after {
.theme--dark .checkbox__label:hover:before,
.checkbox__label.theme--dark:hover:before {
border-color: #fff;
background-color: rgba(255, 255, 255, 0.2);
}
.checkbox:checked + .checkbox__label:after,
.checkbox:checked + .theme--dark .checkbox__label:after,
.checkbox:checked + .checkbox__label.theme--dark:after {
display: block;
}
.checkbox:focus + .checkbox__label:before {
box-shadow: 0 0 0 2px $focuscolor;
}
.checkbox[disabled] + .checkbox__label {
.checkbox[disabled] + .checkbox__label,
.checkbox[disabled] + .checkbox__label.theme--dark,
.checkbox[disabled] + .theme--dark .checkbox__label {
color: $disabledcolor;
cursor: default;
}
.checkbox[disabled] + .checkbox__label:before {
border-color: $disabledcolor;
background-color: transparent;
}
.checkbox[disabled] + .checkbox__label:after {
.checkbox[disabled] + .checkbox__label:after,
.checkbox[disabled] + .theme--dark .checkbox__label:after,
.checkbox[disabled] + .checkbox__label.theme--dark:after {
display: none;
}
@@ -0,0 +1,4 @@
<input type="checkbox" checked class="checkbox" id="cb5"/>
<label for="cb5" class="checkbox__label theme--dark">
<span class="checkbox__caption">Test</span>
</label>
@@ -0,0 +1,4 @@
<input type="checkbox" disabled class="checkbox" id="cb6"/>
<label for="cb6" class="checkbox__label theme--dark">
<span class="checkbox__caption">Test</span>
</label>
@@ -0,0 +1,6 @@
<div class="theme--dark">
<input type="checkbox" checked class="checkbox" id="cb7"/>
<label for="cb7" class="checkbox__label">
<span class="checkbox__caption">Test</span>
</label>
</div>

0 comments on commit 3d8314f

Please sign in to comment.