Add triangle icon to form fieldset to make toggle clearer
This commit is contained in:
Yohan Boniface
parent
dac15bca95
commit
03b837ade6
3 changed files with 24 additions and 8 deletions
|
|
@ -278,7 +278,7 @@ input[type="file"] + .error {
|
|||
padding: 10px;
|
||||
}
|
||||
.fieldset.toggle .legend {
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background-color: #232729;
|
||||
|
|
@ -291,6 +291,20 @@ input[type="file"] + .error {
|
|||
font-size: 1.2em;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.fieldset.toggle .legend:before {
|
||||
background-repeat: no-repeat;
|
||||
text-indent: 36px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
background-image: url('./img/24-white.svg');
|
||||
vertical-align: bottom;
|
||||
content: " ";
|
||||
background-position: -143px -117px;
|
||||
}
|
||||
.fieldset.toggle.on .legend:before {
|
||||
background-position: -72px -117px;
|
||||
}
|
||||
/* Switch */
|
||||
input.switch:empty {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@
|
|||
<path id="rect4058-9" d="m11.906 29.898v0.13229 0.79375 0.13229h0.13229 0.79375 0.13229v-0.13229-0.09096l2.6458 1.0583v0.35555 0.11576l0.28939 0.0164h0.63665 0.13229v-0.13229-0.79375-0.13229h-0.13229-0.79375-0.13229v0.13229 0.14883l-2.6458-1.0583v-0.41341-0.13229h-0.13229-0.79375zm0.26458 0.26458h0.52917v0.52917h-0.52917zm3.7042 1.3229h0.52917v0.52917h-0.52917z" color="#000000" style="text-decoration-line:none;text-indent:0;text-transform:none"/>
|
||||
<path id="rect4058-9-5" d="m12.989 32.32v0.35555 0.11576l1.8769 2.927h0.63665 0.13229v0.13229 0.79375 0.13229h-0.13229-0.79375-0.13229v-0.13229-0.79375-0.09922l-1.8769-2.9435h-0.63665-0.13229v-0.13229-0.79375-0.13229h0.13229 0.79375 0.13229v0.13229 0.14883zm-0.26458-0.30591h-0.52917v0.52917h0.52917zm2.6458 3.9688h-0.52917v0.52917h0.52917z" color="#000000" style="text-decoration-line:none;text-indent:0;text-transform:none"/>
|
||||
</g>
|
||||
<path id="arrow-up" d="m33.329 32.279-2.0498 2.0596h4.0995z" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".046891"/>
|
||||
<path id="arrow-down" d="m23.802 34.339 2.0498-2.0596h-4.0995z" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".046831"/>
|
||||
<path id="arrow-up" d="m33.329 32.279-2.1078 2.1167h4.2333z" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".046891"/>
|
||||
<path id="arrow-down" d="m23.812 34.396 2.1167-2.1167h-4.2333z" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".046831"/>
|
||||
<path id="datalayers" d="m11.394 23.743h4e-6c0.0102-0.0168 0.02435-0.0308 0.04124-0.04083l9e-6 -2.6e-5 0.35309-0.20972 2.4753 1.4703 0.01763 0.01048 0.01763-0.01048 2.4753-1.4703 0.35309 0.20972c0.05689 0.03382 0.07555 0.10711 0.04128 0.16374-0.01019 0.01679-0.02442 0.03085-0.0413 0.04091l-2.846 1.6904-2.846-1.6904h-3e-6c-0.05691-0.03382-0.07557-0.10716-0.04125-0.16379zm0 1.435h4e-6c0.0102-0.01682 0.02435-0.03083 0.04124-0.04086h9e-6l0.35309-0.20975 2.4753 1.4703 0.01763 0.01046 0.01763-0.01046 2.4753-1.4703 0.35309 0.20975c0.05689 0.03379 0.07555 0.10713 0.04125 0.16376l0.02915 0.01701-0.02912-0.01703c-0.01019 0.0168-0.02442 0.03083-0.0413 0.04091l-2.7049 1.6066c-0.08683 0.05158-0.19526 0.05158-0.28209 0l-2.7049-1.6067h-3e-6c-0.05691-0.03382-0.07557-0.10713-0.04125-0.16376zm0.04125-2.6909-0.01757 0.02848 0.01757-0.02848c-0.05691-0.0338-0.07557-0.10714-0.04125-0.16376l2e-6 -2e-6c0.01019-0.01679 0.02435-0.03081 0.04125-0.04086h2e-6l2.7049-1.6067c0.08683-0.05157 0.19526-0.05157 0.28209 0l2.7049 1.6067c0.05689 0.0338 0.07555 0.10714 0.04125 0.16377-0.01019 0.01681-0.02438 0.03082-0.04125 0.04086l-2.846 1.6905z" fill="#f2f2f2" stroke="#999" stroke-width=".066146"/>
|
||||
<g id="tilelayers" transform="matrix(1.0025 0 0 1.0105 .44603 -.58487)" stroke-width=".99354">
|
||||
<path id="path1257" d="m25.978 7.8844h0.03307v-3.6125h-3.7796v3.6125h0.03307zm-3.9787-4.1591h4.2439c0.06157 0 0.12062 0.024461 0.16417 0.068001 0.04352 0.04354 0.068 0.10259 0.068 0.16417v4.2439c0 0.061569-0.02447 0.12062-0.068 0.16417-0.04355 0.04355-0.1026 0.067998-0.16417 0.067998h-4.2439c-0.06158 0-0.12063-0.024448-0.16417-0.067998-0.04354-0.04355-0.068-0.10261-0.068-0.16417v-4.2439c0-0.061577 0.02446-0.12063 0.068-0.16417 0.04354-0.04354 0.1026-0.068001 0.16417-0.068001z" fill="#f2f2f2" stroke="#999" stroke-width=".065719"/>
|
||||
|
|
@ -58,5 +58,6 @@
|
|||
</g>
|
||||
<path id="path1286" d="m24.352 6.3088h0.03307v-3.6125h-3.7796v3.6125h0.03307zm-3.9787-4.1591h4.2439c0.06157 0 0.12062 0.024461 0.16417 0.068002s0.068 0.1026 0.068 0.16417v4.2439c0 0.061569-0.02445 0.12062-0.068 0.16417-0.04355 0.04355-0.1026 0.067998-0.16417 0.067998h-4.2439c-0.06158 0-0.12063-0.024447-0.16417-0.067998-0.04354-0.04355-0.068-0.10261-0.068-0.16417v-4.2439c0-0.061577 0.02446-0.12063 0.068-0.16417 0.04354-0.043541 0.1026-0.068002 0.16417-0.068002z" fill="#f2f2f2" stroke="#999" stroke-width=".065719"/>
|
||||
</g>
|
||||
<path id="arrow-up-3" d="m43.921 33.337-2.1167-2.1167v4.2333z" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".046891"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
|
@ -1,9 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg width="180" height="180" viewBox="0 0 47.624994 47.624994" version="1.1" id="svg2876" inkscape:version="1.2.2 (b0a8486541, 2022-12-01)" sodipodi:docname="24-white.svg" inkscape:export-filename="../24-white.svg" inkscape:export-xdpi="7.52" inkscape:export-ydpi="7.52" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview id="namedview2878" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" showgrid="true" showguides="true" inkscape:zoom="16.185242" inkscape:cx="45.319063" inkscape:cy="127.55447" inkscape:window-width="1920" inkscape:window-height="1019" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="layer1">
|
||||
<inkscape:grid type="xygrid" id="grid2997" empspacing="4" originx="0" originy="0" />
|
||||
<svg width="180" height="180" viewBox="0 0 47.624994 47.624994" version="1.1" id="svg2876" inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" sodipodi:docname="24-white.svg" inkscape:export-filename="../24-white.svg" inkscape:export-xdpi="7.52" inkscape:export-ydpi="7.52" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview id="namedview2878" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" showgrid="true" showguides="true" inkscape:zoom="8.6832784" inkscape:cx="84.06963" inkscape:cy="121.72822" inkscape:window-width="1920" inkscape:window-height="1019" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="layer1">
|
||||
<inkscape:grid type="xygrid" id="grid2997" empspacing="4" originx="0" originy="0" spacingy="0.2645833" spacingx="0.2645833" units="px" visible="true" />
|
||||
<sodipodi:guide position="9.525,47.625" orientation="-1,0" id="guide3404" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
|
||||
<sodipodi:guide position="0,38.099995" orientation="0,1" id="guide3408" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
|
||||
<sodipodi:guide position="28.575,47.625" orientation="-1,0" id="guide3444" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
|
||||
|
|
@ -59,8 +59,8 @@
|
|||
<path inkscape:connector-curvature="0" style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.0661458;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate" d="m 11.906249,29.898045 v 0.132292 0.79375 0.132292 h 0.132291 0.79375 0.132292 v -0.132292 -0.09096 l 2.645832,1.058334 v 0.355547 0.115755 l 0.289388,0.0164 h 0.636654 0.132292 v -0.132292 -0.79375 -0.132291 h -0.132292 -0.79375 -0.132292 v 0.132291 0.148829 l -2.645832,-1.058334 v -0.413411 -0.132292 h -0.132292 -0.79375 z m 0.264583,0.264584 h 0.529167 v 0.529166 h -0.529167 z m 3.704166,1.322916 h 0.529166 v 0.529167 h -0.529166 z" id="rect4058-9" sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccc" />
|
||||
<path inkscape:connector-curvature="0" style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.0661458;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate" d="m 12.989387,32.320492 v 0.355547 0.115755 l 1.876888,2.926953 h 0.636653 0.132292 v 0.132292 0.79375 0.132291 h -0.132292 -0.79375 -0.132291 v -0.132291 -0.79375 -0.09922 l -1.876888,-2.94349 h -0.636654 -0.132292 v -0.132291 -0.79375 -0.132292 h 0.132292 0.79375 0.132292 v 0.132292 0.148828 z m -0.264584,-0.305912 h -0.529166 v 0.529167 h 0.529166 z m 2.645834,3.96875 h -0.529167 v 0.529167 h 0.529167 z" id="rect4058-9-5" sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccc" />
|
||||
</g>
|
||||
<path style="fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.0468913;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 33.328633,32.279163 -2.049775,2.059569 h 4.099549 z" id="arrow-up" inkscape:connector-curvature="0" />
|
||||
<path style="fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.0468312;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 23.802018,34.338732 2.049774,-2.059569 h -4.099549 z" id="arrow-down" inkscape:connector-curvature="0" />
|
||||
<path style="fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.0468913;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 33.328633,32.279163 -2.107805,2.116665 h 4.233333 z" id="arrow-up" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" />
|
||||
<path style="fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.0468312;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 23.812496,34.395828 2.116666,-2.116667 h -4.233332 z" id="arrow-down" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" />
|
||||
<path d="m 11.394294,23.74341 h 4e-6 c 0.0102,-0.0168 0.02435,-0.0308 0.04124,-0.04083 l 9e-6,-2.6e-5 0.353087,-0.209723 2.475253,1.470258 0.01763,0.01048 0.01763,-0.01048 2.475273,-1.470258 0.353093,0.209723 c 0,0 0,0 0,0 0.05689,0.03382 0.07555,0.107108 0.04128,0.163737 -0.01019,0.01679 -0.02442,0.03085 -0.0413,0.04091 0,0 0,0 0,0 l -2.845967,1.690437 -2.845965,-1.690437 c -10e-7,0 -2e-6,0 -3e-6,0 -0.05691,-0.03382 -0.07557,-0.107161 -0.04125,-0.16379 z m 0,1.434967 h 4e-6 c 0.0102,-0.01682 0.02435,-0.03083 0.04124,-0.04086 h 9e-6 l 0.353087,-0.209751 2.475253,1.470286 0.01763,0.01046 0.01763,-0.01046 2.475273,-1.470286 0.353093,0.209751 c 0.05689,0.03379 0.07555,0.107134 0.04125,0.163763 l 0.02915,0.01701 -0.02912,-0.01703 c -0.01019,0.0168 -0.02442,0.03083 -0.0413,0.04091 0,0 0,0 0,0 l -2.70492,1.606643 c -0.08683,0.05158 -0.195264,0.05158 -0.282094,0 l -2.704918,-1.60667 c -10e-7,0 -2e-6,0 -3e-6,0 -0.05691,-0.03382 -0.07557,-0.107134 -0.04125,-0.163763 z m 0.04125,-2.690882 -0.01757,0.02848 0.01757,-0.02848 c -0.05691,-0.0338 -0.07557,-0.107135 -0.04125,-0.163761 l 2e-6,-2e-6 c 0.01019,-0.01679 0.02435,-0.03081 0.04125,-0.04086 h 2e-6 l 2.704921,-1.606703 c 0.08683,-0.05157 0.195264,-0.05157 0.282093,0 l 2.704948,1.6067 c 0.05689,0.0338 0.07555,0.107141 0.04125,0.163771 -0.01019,0.01681 -0.02438,0.03082 -0.04125,0.04086 l -2.845994,1.690461 z" fill="#f2f2f2" stroke="#999999" stroke-width="0.0661458" id="datalayers" />
|
||||
<g id="tilelayers" transform="matrix(1.0024854,0,0,1.0105262,0.44603182,-0.58486809)" style="stroke-width:0.993545">
|
||||
<path d="m 25.978244,7.8843707 h 0.03307 v -0.033073 -3.5463476 -0.033073 h -0.03307 -3.713453 -0.03307 v 0.033073 3.5463476 0.033073 h 0.03307 z m -3.978701,-4.1590643 h 4.243946 c 0.06157,0 0.120623,0.024461 0.164173,0.068001 0.04352,0.04354 0.068,0.1025948 0.068,0.1641713 v 4.2439425 c 0,0.061569 -0.02447,0.1206236 -0.068,0.164174 -0.04355,0.04355 -0.102605,0.067998 -0.164173,0.067998 h -4.243946 c -0.06158,0 -0.120628,-0.024448 -0.164171,-0.067998 -0.04354,-0.04355 -0.068,-0.1026054 -0.068,-0.164174 v -4.2439425 c 0,-0.061577 0.02446,-0.1206315 0.068,-0.1641713 0.04354,-0.04354 0.102595,-0.068001 0.164171,-0.068001 z" fill="#f2f2f2" stroke="#999999" stroke-width="0.0657188" id="path1257" />
|
||||
|
|
@ -79,5 +79,6 @@
|
|||
</g>
|
||||
<path d="m 24.352274,6.3088036 h 0.03307 v -0.033073 -3.5463449 -0.033073 h -0.03307 -3.713451 -0.03307 v 0.033073 3.5463449 0.033073 h 0.03307 z m -3.978696,-4.1590643 h 4.24394 c 0.06157,0 0.120624,0.024461 0.164174,0.068002 0.04355,0.043541 0.068,0.102595 0.068,0.1641723 v 4.2439399 c 0,0.061569 -0.02445,0.1206236 -0.068,0.164174 -0.04355,0.04355 -0.102605,0.067998 -0.164174,0.067998 h -4.24394 c -0.06158,0 -0.120631,-0.024447 -0.164172,-0.067998 -0.04354,-0.04355 -0.068,-0.1026054 -0.068,-0.164174 v -4.2439399 c 0,-0.061577 0.02446,-0.1206315 0.068,-0.1641723 0.04354,-0.043541 0.102595,-0.068002 0.164172,-0.068002 z" fill="#f2f2f2" stroke="#999999" stroke-width="0.0657188" id="path1286" />
|
||||
</g>
|
||||
<path style="fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.0468913;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 43.920826,33.337494 -2.116666,-2.116666 0,4.233333 z" id="arrow-up-3" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
Loading…
Reference in a new issue