make checkboxes and radios focusable
This commit is contained in:
Felix Niklas
parent
581328361b
commit
2b47677fea
8 changed files with 57 additions and 27 deletions
|
|
@ -950,6 +950,7 @@ th.align-right {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-replacement.checkbox-replacement--fullscreen,
|
||||
|
|
@ -969,14 +970,42 @@ th.align-right {
|
|||
}
|
||||
|
||||
.checkbox-replacement input,
|
||||
.radio-replacement input {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.checkbox-replacement .icon-checked,
|
||||
.radio-replacement .icon-checked {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.checkbox-replacement .icon-unchecked,
|
||||
.radio-replacement .icon-unchecked {
|
||||
color: #9C9C9B;
|
||||
}
|
||||
|
||||
.checkbox-replacement input:not(:checked) ~ .icon-checked,
|
||||
.checkbox-replacement input:checked ~ .icon-unchecked,
|
||||
.radio-replacement input,
|
||||
.radio-replacement input:not(:checked) ~ .icon-checked,
|
||||
.radio-replacement input:checked ~ .icon-unchecked {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-replacement input:focus ~ .icon-checked,
|
||||
.checkbox-replacement input:focus ~ .icon-unchecked,
|
||||
.radio-replacement input:focus ~ .icon-checked,
|
||||
.radio-replacement input:focus ~ .icon-unchecked, {
|
||||
box-shadow: 0 0 0 2px hsl(201,62%,90%);
|
||||
color: hsl(200,71%,59%);
|
||||
}
|
||||
|
||||
.radio-replacement input:focus ~ .icon-checked,
|
||||
.radio-replacement input:focus ~ .icon-unchecked {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.checkbox-replacement + .label-text,
|
||||
.radio-replacement + .label-text {
|
||||
margin-left: 0;
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -17,6 +17,7 @@ gulp.task('svgstore', function () {
|
|||
run: function ($) {
|
||||
// remove green-screen color
|
||||
$('[fill="#50E3C2"]').removeAttr('fill').parents('[fill="none"]').removeAttr('fill');
|
||||
$('[fill="#BD0FE1"]').attr('fill', 'currentColor').parents('[fill="none"]').removeAttr('fill');
|
||||
},
|
||||
parserOptions: { xmlMode: true }
|
||||
}))
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
|
@ -1,14 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.4 (15575) - http://www.bohemiancoding.com/sketch -->
|
||||
<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 3.6 (26304) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>checkbox-checked</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="checkbox-checked" sketch:type="MSArtboardGroup">
|
||||
<path d="M11,0 L0,0 L0,11 L11,11 L11,0 Z" id="Path-Copy" fill="#50E3C2" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M0,0 L0,0.55 L0,10.45 L0,11 L0.55,11 L10.45,11 L11,11 L11,10.45 L11,0.55 L11,0 L10.45,0 L0.55,0 L0,0 Z M10,1 L10,10 L1,10 L1,1 L10,1 Z" id="Path" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M4.27323943,6.76760563 L2.23802816,4.97183098 L1.39999999,5.80985915 L4.87183098,10 C5.47042253,8.20422535 7.38591549,4.73239436 9.66056338,2.21830985 L9.42112676,1.49999999 C6.90704225,3.29577464 4.99154929,5.57042253 4.27323943,6.76760563 L4.27323943,6.76760563 L4.27323943,6.76760563 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="checkbox-checked">
|
||||
<path d="M11,0 L0,0 L0,11 L11,11 L11,0 Z" id="Path-Copy" fill="#50E3C2"></path>
|
||||
<path d="M0,0 L0,0.55 L0,10.45 L0,11 L0.55,11 L10.45,11 L11,11 L11,10.45 L11,0.55 L11,0 L10.45,0 L0.55,0 L0,0 Z M10,1 L10,10 L1,10 L1,1 L10,1 Z" id="Path" fill="#BD0FE1"></path>
|
||||
<path d="M4.27323943,6.76760563 L2.23802816,4.97183098 L1.39999999,5.80985915 L4.87183098,10 C5.47042253,8.20422535 7.38591549,4.73239436 9.66056338,2.21830985 L9.42112676,1.49999999 C6.90704225,3.29577464 4.99154929,5.57042253 4.27323943,6.76760563 L4.27323943,6.76760563 L4.27323943,6.76760563 Z" id="Shape" fill="#000000"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,13 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.4 (15575) - http://www.bohemiancoding.com/sketch -->
|
||||
<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 3.6 (26304) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>checkbox</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="checkbox" sketch:type="MSArtboardGroup">
|
||||
<path d="M11,0 L0,0 L0,11 L11,11 L11,0 Z" id="Path-Copy" fill="#50E3C2" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M11,0 L0,0 L0,11 L11,11 L11,0 Z M1,1 L10,1 L10,10 L1,10 L1,1 Z" id="Shape" fill="#9C9C9B" sketch:type="MSShapeGroup"></path>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="checkbox">
|
||||
<path d="M11,0 L0,0 L0,11 L11,11 L11,0 Z" id="Path-Copy" fill="#50E3C2"></path>
|
||||
<path d="M11,0 L0,0 L0,11 L11,11 L11,0 Z M1,1 L10,1 L10,10 L1,10 L1,1 Z" id="Shape" fill="#BD0FE1"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 874 B After Width: | Height: | Size: 714 B |
|
|
@ -1,13 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.4 (15575) - http://www.bohemiancoding.com/sketch -->
|
||||
<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 3.6 (26304) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>radio-checked</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="radio-checked" sketch:type="MSArtboardGroup" fill="#000000">
|
||||
<circle id="inner" sketch:type="MSShapeGroup" cx="5.5" cy="5.5" r="2.5"></circle>
|
||||
<path d="M5.5,11 C8.53756612,11 11,8.53756612 11,5.5 C11,2.46243388 8.53756612,0 5.5,0 C2.46243388,0 0,2.46243388 0,5.5 C0,8.53756612 2.46243388,11 5.5,11 Z M5.5,10 C7.98528137,10 10,7.98528137 10,5.5 C10,3.01471863 7.98528137,1 5.5,1 C3.01471863,1 1,3.01471863 1,5.5 C1,7.98528137 3.01471863,10 5.5,10 Z" id="outer" sketch:type="MSShapeGroup"></path>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="radio-checked">
|
||||
<circle id="inner" fill="#000000" cx="5.5" cy="5.5" r="2.5"></circle>
|
||||
<path d="M5.5,11 C8.53756612,11 11,8.53756612 11,5.5 C11,2.46243388 8.53756612,0 5.5,0 C2.46243388,0 0,2.46243388 0,5.5 C0,8.53756612 2.46243388,11 5.5,11 Z M5.5,10 C7.98528137,10 10,7.98528137 10,5.5 C10,3.01471863 7.98528137,1 5.5,1 C3.01471863,1 1,3.01471863 1,5.5 C1,7.98528137 3.01471863,10 5.5,10 Z" id="outer" fill="#BD0FE1"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 947 B |
|
|
@ -1,13 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.4 (15575) - http://www.bohemiancoding.com/sketch -->
|
||||
<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 3.6 (26304) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>radio</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="radio" sketch:type="MSArtboardGroup">
|
||||
<path d="M5.5,0 C2.46243342,0 0,2.46243342 0,5.5 C0,8.53756567 2.46243342,11 5.5,11 C8.53756567,11 11,8.53756567 11,5.5 C11,2.46243342 8.53756567,0 5.5,0 Z" fill="#9C9C9B" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M1,5.5 C1,3.0147184 3.0147184,1 5.5,1 C7.9852816,1 10,3.0147184 10,5.5 C10,7.9852816 7.9852816,10 5.5,10 C3.0147184,10 1,7.9852816 1,5.5 L1,5.5 Z" id="radio-path" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="radio">
|
||||
<path d="M5.5,0 C2.46243342,0 0,2.46243342 0,5.5 C0,8.53756567 2.46243342,11 5.5,11 C8.53756567,11 11,8.53756567 11,5.5 C11,2.46243342 8.53756567,0 5.5,0 Z" fill="#BD0FE1"></path>
|
||||
<path d="M1,5.5 C1,3.0147184 3.0147184,1 5.5,1 C7.9852816,1 10,3.0147184 10,5.5 C10,7.9852816 7.9852816,10 5.5,10 C3.0147184,10 1,7.9852816 1,5.5 L1,5.5 Z" id="radio-path" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 896 B |
Loading…
Reference in a new issue