Gestion des custom 'checkbox'

This commit is contained in:
xdrm-brackets 2016-07-14 10:25:57 +02:00
parent a0fd5c464e
commit e776015e47
5 changed files with 168 additions and 27 deletions

View File

@ -638,28 +638,21 @@ article.check-table{
input[type='checkbox'] + label[for]{ input[type='checkbox'] + label[for]{
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 1em; width: 1.5em;
height: 1em; height: 1.5em;
border-radius: 50% / 50%; // border-radius: 50% / 50%;
box-shadow: 0 0 0 3px #fff, 0 0 0 5px #aaa;
background: url('/src/static/container/checkbox.svg') center center no-repeat;
background-size: 100% auto;;
background: #fff;
transition: box-shadow .2s ease-in-out; transition: box-shadow .2s ease-in-out;
cursor: pointer; cursor: pointer;
&:hover{
box-shadow: 0 0 0 3px #fff, 0 0 0 5px #d54e4a;
}
} }
input[type='checkbox']:checked + label[for]{ input[type='checkbox']:checked + label[for]{
box-shadow: 0 0 0 3px #fff, 0 0 0 5px #d54e4a; background-image: url('/src/static/container/checkbox@checked.svg');
background: #e65450;
} }
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="32"
version="1.1"
viewBox="0 0 32 32"
width="32"
id="svg4230"
inkscape:version="0.91 r13725"
sodipodi:docname="checkbox.svg">
<metadata
id="metadata4244">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="960"
inkscape:window-height="1028"
id="namedview4242"
showgrid="false"
inkscape:zoom="24.05"
inkscape:cx="10"
inkscape:cy="10"
inkscape:window-x="960"
inkscape:window-y="24"
inkscape:window-maximized="0"
inkscape:current-layer="svg4230"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<desc
id="desc4234" />
<defs
id="defs4236" />
<g
id="Page-1"
transform="scale(1.6,1.6)"
style="fill:#909090;fill-rule:evenodd;stroke:none;stroke-width:1;fill-opacity:1">
<g
id="Core"
transform="translate(-170,-86)"
style="fill:#909090;fill-opacity:1">
<g
id="check-circle-outline-blank"
transform="translate(170,86)"
style="fill:#909090;fill-opacity:1">
<path
d="M 10,0 C 4.5,0 0,4.5 0,10 0,15.5 4.5,20 10,20 15.5,20 20,15.5 20,10 20,4.5 15.5,0 10,0 l 0,0 z m 0,18 C 5.6,18 2,14.4 2,10 2,5.6 5.6,2 10,2 c 4.4,0 8,3.6 8,8 0,4.4 -3.6,8 -8,8 l 0,0 z"
id="Shape"
inkscape:connector-curvature="0"
style="fill:#909090;fill-opacity:1" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="32"
version="1.1"
viewBox="0 0 32 32"
width="32"
id="svg4246"
inkscape:version="0.91 r13725"
sodipodi:docname="checkbox@checked.svg">
<metadata
id="metadata4260">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview4258"
showgrid="false"
inkscape:zoom="11.8"
inkscape:cx="10"
inkscape:cy="10"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg4246"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<desc
id="desc4250" />
<defs
id="defs4252" />
<g
id="Page-1"
transform="scale(1.6,1.6)"
style="fill:#007dd8;fill-rule:evenodd;stroke:none;stroke-width:1;fill-opacity:1">
<g
id="Core"
transform="translate(-128,-86)"
style="fill:#007dd8;fill-opacity:1">
<g
id="check-circle-outline"
transform="translate(128,86)"
style="fill:#007dd8;fill-opacity:1">
<path
d="M 5.9,8.1 4.5,9.5 9,14 19,4 17.6,2.6 9,11.2 5.9,8.1 l 0,0 z M 18,10 c 0,4.4 -3.6,8 -8,8 -4.4,0 -8,-3.6 -8,-8 0,-4.4 3.6,-8 8,-8 0.8,0 1.5,0.1 2.2,0.3 L 13.8,0.7 C 12.6,0.3 11.3,0 10,0 4.5,0 0,4.5 0,10 c 0,5.5 4.5,10 10,10 5.5,0 10,-4.5 10,-10 l -2,0 0,0 z"
id="Shape"
inkscape:connector-curvature="0"
style="fill:#007dd8;fill-opacity:1" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB