Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

make checkboxes and radios focusable

Browse source
This commit is contained in:
Felix Niklas 2016-03-03 11:39:22 +01:00
parent 581328361b
commit 2b47677fea
8 changed files with 57 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/assets/stylesheets/zammad.scss
View file

@ -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;

BIN
contrib/icon-sprite.sketch
View file

Binary file not shown.

1
gulpfile.js
View file

@ -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 }
}))

2
public/assets/images/icons.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

14
public/assets/images/icons/checkbox-checked.svg
View file

@ -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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

12
public/assets/images/icons/checkbox.svg
View file

@ -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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 874 B

After

Width:  |  Height:  |  Size: 714 B

12
public/assets/images/icons/radio-checked.svg
View file

@ -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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 947 B

12
public/assets/images/icons/radio.svg
View file

@ -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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 896 B