jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-04-05 23:59:54 +03:00
parent 8f221d05c4
commit a6cf38dd02
52 changed files with 405 additions and 325 deletions
Download patch file Download diff file Expand all files Collapse all files

16
2-ui/1-document/1-browser-environment/windowObjects.svg
View file

@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="354px" height="308px" viewBox="0 0 354 308" 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.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>windowObjects.svg</title>
<desc>Created with Sketch.</desc>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="windowObjects.svg" sketch:type="MSArtboardGroup">
@ -59,12 +59,12 @@
<text id="DOM" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#CFCE95">
<tspan x="17" y="73">DOM</tspan>
</text>
<path d="M174.5,41.5 L174.5,72.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M174.5,72.5 C175.55,68.72 176.45,65.48 177.5,61.7 C175.4,61.7 173.6,61.7 171.5,61.7 C172.55,65.48 173.45,68.72 174.5,72.5 C174.5,72.5 174.5,72.5 174.5,72.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M132.5,41.5 L86.5,73.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M86.5293087,73.4796113 C90.2319481,72.182938 93.405639,71.0715038 97.1082783,69.7748305 C95.9090429,68.0509295 94.8811268,66.5733002 93.6818914,64.8493993 C91.1784875,67.8699735 89.0327127,70.4590371 86.5293087,73.4796113 C86.5293087,73.4796113 86.5293087,73.4796113 86.5293087,73.4796113 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M263.5,41.5 L217.5,73.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(240.500000, 57.500000) scale(-1, 1) translate(-240.500000, -57.500000) "></path>
<path id="Line-3-decoration-1" d="M217.529309,73.4796113 C221.231948,72.182938 224.405639,71.0715038 228.108278,69.7748305 C226.909043,68.0509295 225.881127,66.5733002 224.681891,64.8493993 C222.178487,67.8699735 220.032713,70.4590371 217.529309,73.4796113 C217.529309,73.4796113 217.529309,73.4796113 217.529309,73.4796113 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M174.5,41.5 L174.5,72.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M174.5,72.5 C175.55,68.72 176.45,65.48 177.5,61.7 C175.4,61.7 173.6,61.7 171.5,61.7 C172.55,65.48 173.45,68.72 174.5,72.5 C174.5,72.5 174.5,72.5 174.5,72.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M132.5,41.5 L86.5,73.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M86.5293087,73.4796113 C90.2319481,72.182938 93.405639,71.0715038 97.1082783,69.7748305 C95.9090429,68.0509295 94.8811268,66.5733002 93.6818914,64.8493993 C91.1784875,67.8699735 89.0327127,70.4590371 86.5293087,73.4796113 C86.5293087,73.4796113 86.5293087,73.4796113 86.5293087,73.4796113 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M263.5,41.5 L217.5,73.5" id="Line-3" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(240.500000, 57.500000) scale(-1, 1) translate(-240.500000, -57.500000) "></path>
<path id="Line-3-decoration-1" d="M217.529309,73.4796113 C221.231948,72.182938 224.405639,71.0715038 228.108278,69.7748305 C226.909043,68.0509295 225.881127,66.5733002 224.681891,64.8493993 C222.178487,67.8699735 220.032713,70.4590371 217.529309,73.4796113 C217.529309,73.4796113 217.529309,73.4796113 217.529309,73.4796113 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="…" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#727155">
<tspan x="50" y="122">…</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Before After
Before After

12
2-ui/1-document/16-metrics-window/document-client-width-height.svg
View file

@ -22,12 +22,12 @@
<text id="document.documentEle" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="229" y="197">document.documentElement.clientWidth</tspan>
</text>
<path d="M457.012291,168.153273 L277.502296,168.153273" id="Line-3" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-3-decoration-1" d="M278.012291,168.153273 C281.792291,169.203273 285.032291,170.103273 288.812291,171.153273 C288.812291,169.053273 288.812291,167.253273 288.812291,165.153273 C285.032291,166.203273 281.792291,167.103273 278.012291,168.153273 C278.012291,168.153273 278.012291,168.153273 278.012291,168.153273 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-3-decoration-2" d="M456.212291,168.153273 C452.432291,169.203273 449.192291,170.103273 445.412291,171.153273 C445.412291,169.053273 445.412291,167.253273 445.412291,165.153273 C449.192291,166.203273 452.432291,167.103273 456.212291,168.153273 C456.212291,168.153273 456.212291,168.153273 456.212291,168.153273 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M257.5,151.012291 L257.5,14.5022964" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M257.5,15.012291 C256.45,18.792291 255.55,22.032291 254.5,25.812291 C256.6,25.812291 258.4,25.812291 260.5,25.812291 C259.45,22.032291 258.55,18.792291 257.5,15.012291 C257.5,15.012291 257.5,15.012291 257.5,15.012291 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-decoration-2" d="M257.5,150.212291 C256.45,146.432291 255.55,143.192291 254.5,139.412291 C256.6,139.412291 258.4,139.412291 260.5,139.412291 C259.45,143.192291 258.55,146.432291 257.5,150.212291 C257.5,150.212291 257.5,150.212291 257.5,150.212291 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M457.012291,168.153273 L277.502296,168.153273" id="Line-3" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-3-decoration-1" d="M278.012291,168.153273 C281.792291,169.203273 285.032291,170.103273 288.812291,171.153273 C288.812291,169.053273 288.812291,167.253273 288.812291,165.153273 C285.032291,166.203273 281.792291,167.103273 278.012291,168.153273 C278.012291,168.153273 278.012291,168.153273 278.012291,168.153273 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-3-decoration-2" d="M456.212291,168.153273 C452.432291,169.203273 449.192291,170.103273 445.412291,171.153273 C445.412291,169.053273 445.412291,167.253273 445.412291,165.153273 C449.192291,166.203273 452.432291,167.103273 456.212291,168.153273 C456.212291,168.153273 456.212291,168.153273 456.212291,168.153273 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M257.5,151.012291 L257.5,14.5022964" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M257.5,15.012291 C256.45,18.792291 255.55,22.032291 254.5,25.812291 C256.6,25.812291 258.4,25.812291 260.5,25.812291 C259.45,22.032291 258.55,18.792291 257.5,15.012291 C257.5,15.012291 257.5,15.012291 257.5,15.012291 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-decoration-2" d="M257.5,150.212291 C256.45,146.432291 255.55,143.192291 254.5,139.412291 C256.6,139.412291 258.4,139.412291 260.5,139.412291 C259.45,143.192291 258.55,146.432291 257.5,150.212291 C257.5,150.212291 257.5,150.212291 257.5,150.212291 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

Before After
Before After

26
2-ui/1-document/17-coordinates/coords.svg
View file

@ -13,7 +13,7 @@
<path d="M72.2916667,32 C72.2916667,35.536 69.0566146,38.4 65.0625,38.4 C61.0683854,38.4 57.8333333,35.536 57.8333333,32 C57.8333333,28.464 61.0683854,25.6 65.0625,25.6 C69.0566146,25.6 72.2916667,28.464 72.2916667,32 L72.2916667,32 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M101.208333,32 C101.208333,35.536 97.9732812,38.4 93.9791667,38.4 C89.9850521,38.4 86.75,35.536 86.75,32 C86.75,28.464 89.9850521,25.6 93.9791667,25.6 C97.9732812,25.6 101.208333,28.464 101.208333,32 L101.208333,32 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="151" y="145.957" width="75" height="29.043"></rect>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="151" y="145.957" width="75" height="29.043"></rect>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="169.051859" y="165.543917">&lt;DIV&gt;</tspan>
</text>
@ -33,18 +33,18 @@
<text id="right" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="106" y="217">right</tspan>
</text>
<path d="M246.5,145 L246.5,78.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M246.5,79 C245.45,82.78 244.55,86.02 243.5,89.8 C245.6,89.8 247.4,89.8 249.5,89.8 C248.45,86.02 247.55,82.78 246.5,79 C246.5,79 246.5,79 246.5,79 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-decoration-2" d="M246.5,144.2 C245.45,140.42 244.55,137.18 243.5,133.4 C245.6,133.4 247.4,133.4 249.5,133.4 C248.45,137.18 247.55,140.42 246.5,144.2 C246.5,144.2 246.5,144.2 246.5,144.2 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M275.5,170.012291 L275.5,78.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M275.5,79.012291 C274.45,82.792291 273.55,86.032291 272.5,89.812291 C274.6,89.812291 276.4,89.812291 278.5,89.812291 C277.45,86.032291 276.55,82.792291 275.5,79.012291 C275.5,79.012291 275.5,79.012291 275.5,79.012291 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-decoration-2" d="M275.5,169.212291 C274.45,165.432291 273.55,162.192291 272.5,158.412291 C274.6,158.412291 276.4,158.412291 278.5,158.412291 C277.45,162.192291 276.55,165.432291 275.5,169.212291 C275.5,169.212291 275.5,169.212291 275.5,169.212291 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M222.012291,224.5 L29.5022964,224.5" id="Line-2" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M30.012291,224.5 C33.792291,225.55 37.032291,226.45 40.812291,227.5 C40.812291,225.4 40.812291,223.6 40.812291,221.5 C37.032291,222.55 33.792291,223.45 30.012291,224.5 C30.012291,224.5 30.012291,224.5 30.012291,224.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-2-decoration-2" d="M221.212291,224.5 C217.432291,225.55 214.192291,226.45 210.412291,227.5 C210.412291,225.4 210.412291,223.6 210.412291,221.5 C214.192291,222.55 217.432291,223.45 221.212291,224.5 C221.212291,224.5 221.212291,224.5 221.212291,224.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M149.012291,188.5 L29.5022888,188.5" id="Line-3" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-3-decoration-1" d="M30.012291,188.5 C33.792291,189.55 37.032291,190.45 40.812291,191.5 C40.812291,189.4 40.812291,187.6 40.812291,185.5 C37.032291,186.55 33.792291,187.45 30.012291,188.5 C30.012291,188.5 30.012291,188.5 30.012291,188.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-3-decoration-2" d="M148.212291,188.5 C144.432291,189.55 141.192291,190.45 137.412291,191.5 C137.412291,189.4 137.412291,187.6 137.412291,185.5 C141.192291,186.55 144.432291,187.45 148.212291,188.5 C148.212291,188.5 148.212291,188.5 148.212291,188.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M246.5,145 L246.5,78.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M246.5,79 C245.45,82.78 244.55,86.02 243.5,89.8 C245.6,89.8 247.4,89.8 249.5,89.8 C248.45,86.02 247.55,82.78 246.5,79 C246.5,79 246.5,79 246.5,79 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-decoration-2" d="M246.5,144.2 C245.45,140.42 244.55,137.18 243.5,133.4 C245.6,133.4 247.4,133.4 249.5,133.4 C248.45,137.18 247.55,140.42 246.5,144.2 C246.5,144.2 246.5,144.2 246.5,144.2 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M275.5,170.012291 L275.5,78.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M275.5,79.012291 C274.45,82.792291 273.55,86.032291 272.5,89.812291 C274.6,89.812291 276.4,89.812291 278.5,89.812291 C277.45,86.032291 276.55,82.792291 275.5,79.012291 C275.5,79.012291 275.5,79.012291 275.5,79.012291 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-decoration-2" d="M275.5,169.212291 C274.45,165.432291 273.55,162.192291 272.5,158.412291 C274.6,158.412291 276.4,158.412291 278.5,158.412291 C277.45,162.192291 276.55,165.432291 275.5,169.212291 C275.5,169.212291 275.5,169.212291 275.5,169.212291 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M222.012291,224.5 L29.5022964,224.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M30.012291,224.5 C33.792291,225.55 37.032291,226.45 40.812291,227.5 C40.812291,225.4 40.812291,223.6 40.812291,221.5 C37.032291,222.55 33.792291,223.45 30.012291,224.5 C30.012291,224.5 30.012291,224.5 30.012291,224.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-2-decoration-2" d="M221.212291,224.5 C217.432291,225.55 214.192291,226.45 210.412291,227.5 C210.412291,225.4 210.412291,223.6 210.412291,221.5 C214.192291,222.55 217.432291,223.45 221.212291,224.5 C221.212291,224.5 221.212291,224.5 221.212291,224.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M149.012291,188.5 L29.5022888,188.5" id="Line-3" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-3-decoration-1" d="M30.012291,188.5 C33.792291,189.55 37.032291,190.45 40.812291,191.5 C40.812291,189.4 40.812291,187.6 40.812291,185.5 C37.032291,186.55 33.792291,187.45 30.012291,188.5 C30.012291,188.5 30.012291,188.5 30.012291,188.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-3-decoration-2" d="M148.212291,188.5 C144.432291,189.55 141.192291,190.45 137.412291,191.5 C137.412291,189.4 137.412291,187.6 137.412291,185.5 C141.192291,186.55 144.432291,187.45 148.212291,188.5 C148.212291,188.5 148.212291,188.5 148.212291,188.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Before After
Before After

18
2-ui/1-document/4-traversing-dom/dom-links-elements.svg
View file

@ -6,11 +6,11 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="dom-links-elements.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="131" y="5" width="194" height="24"></rect>
<rect id="Rectangle-8" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="131" y="5" width="194" height="24"></rect>
<text id="document.documentEle" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="137.692383" y="22">document.documentElement &lt;HTML&gt;</tspan>
</text>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="165" y="73" width="113" height="24"></rect>
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="165" y="73" width="113" height="24"></rect>
<text id="document.body-(если-" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="172.84375" y="90">document.body (если внутри body)</tspan>
</text>
@ -22,21 +22,21 @@
<tspan x="175" y="165" fill="#8A704D">parent</tspan>
<tspan x="221.183594" y="165" fill="#EE6B47">Element</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="183" y="208" width="75" height="24"></rect>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="183" y="208" width="75" height="24"></rect>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="201.051859" y="225">&lt;DIV&gt;</tspan>
</text>
<path d="M220.5,200.5 L220.5,174.5" id="Line-6" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-6-decoration-1" d="M220.5,174.5 C219.45,178.28 218.55,181.52 217.5,185.3 C219.6,185.3 221.4,185.3 223.5,185.3 C222.45,181.52 221.55,178.28 220.5,174.5 C220.5,174.5 220.5,174.5 220.5,174.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M267.5,219.5 L427,219.5" id="Line-7" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-7-decoration-1" d="M426.5,219.5 C422.72,218.45 419.48,217.55 415.7,216.5 C415.7,218.6 415.7,220.4 415.7,222.5 C419.48,221.45 422.72,220.55 426.5,219.5 C426.5,219.5 426.5,219.5 426.5,219.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M220.5,200.5 L220.5,174.5" id="Line-6" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-6-decoration-1" d="M220.5,174.5 C219.45,178.28 218.55,181.52 217.5,185.3 C219.6,185.3 221.4,185.3 223.5,185.3 C222.45,181.52 221.55,178.28 220.5,174.5 C220.5,174.5 220.5,174.5 220.5,174.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M267.5,219.5 L427,219.5" id="Line-7" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-7-decoration-1" d="M426.5,219.5 C422.72,218.45 419.48,217.55 415.7,216.5 C415.7,218.6 415.7,220.4 415.7,222.5 C419.48,221.45 422.72,220.55 426.5,219.5 C426.5,219.5 426.5,219.5 426.5,219.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="nextElementSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="276" y="205" fill="#8A704D">next</tspan>
<tspan x="306.789062" y="205" fill="#EE6B47">Element</tspan>
<tspan x="360.669922" y="205" fill="#8A704D">Sibling</tspan>
</text>
<path d="M168,219.5 L12,219.5" id="Line-8" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-8-decoration-1" d="M12,219.5 C15.78,220.55 19.02,221.45 22.8,222.5 C22.8,220.4 22.8,218.6 22.8,216.5 C19.02,217.55 15.78,218.45 12,219.5 C12,219.5 12,219.5 12,219.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M168,219.5 L12,219.5" id="Line-8" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-8-decoration-1" d="M12,219.5 C15.78,220.55 19.02,221.45 22.8,222.5 C22.8,220.4 22.8,218.6 22.8,216.5 C19.02,217.55 15.78,218.45 12,219.5 C12,219.5 12,219.5 12,219.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="previousElementSibli" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="6" y="205" fill="#8A704D">previous</tspan>
<tspan x="67.578125" y="205" fill="#EE6B47">Element</tspan>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.7 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

Before After
Before After

20
2-ui/1-document/4-traversing-dom/dom-links.svg
View file

@ -6,9 +6,9 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="dom-links.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-9" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="153" y="2" width="113" height="24"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="153" y="136" width="113" height="24"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="119" y="68" width="194" height="24"></rect>
<rect id="Rectangle-9" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="153" y="2" width="113" height="24"></rect>
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="153" y="136" width="113" height="24"></rect>
<rect id="Rectangle-8" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="119" y="68" width="194" height="24"></rect>
<text id="document" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="177.710938" y="18">document</tspan>
</text>
@ -27,19 +27,19 @@
<text id="parentNode" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="172" y="228">parentNode</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="171" y="271" width="75" height="24"></rect>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="171" y="271" width="75" height="24"></rect>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="189.051859" y="288">&lt;DIV&gt;</tspan>
</text>
<path d="M208.5,263.5 L208.5,237.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,237.5 C207.45,241.28 206.55,244.52 205.5,248.3 C207.6,248.3 209.4,248.3 211.5,248.3 C210.45,244.52 209.55,241.28 208.5,237.5 C208.5,237.5 208.5,237.5 208.5,237.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M255.5,282.5 L368,282.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M367.5,282.5 C363.72,281.45 360.48,280.55 356.7,279.5 C356.7,281.6 356.7,283.4 356.7,285.5 C360.48,284.45 363.72,283.55 367.5,282.5 C367.5,282.5 367.5,282.5 367.5,282.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M208.5,263.5 L208.5,237.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,237.5 C207.45,241.28 206.55,244.52 205.5,248.3 C207.6,248.3 209.4,248.3 211.5,248.3 C210.45,244.52 209.55,241.28 208.5,237.5 C208.5,237.5 208.5,237.5 208.5,237.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M255.5,282.5 L368,282.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M367.5,282.5 C363.72,281.45 360.48,280.55 356.7,279.5 C356.7,281.6 356.7,283.4 356.7,285.5 C360.48,284.45 363.72,283.55 367.5,282.5 C367.5,282.5 367.5,282.5 367.5,282.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="nextSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="264" y="268">nextSibling</tspan>
</text>
<path d="M164.5,282.5 L50,282.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M50.5,282.5 C54.28,283.55 57.52,284.45 61.3,285.5 C61.3,283.4 61.3,281.6 61.3,279.5 C57.52,280.55 54.28,281.45 50.5,282.5 C50.5,282.5 50.5,282.5 50.5,282.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M164.5,282.5 L50,282.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M50.5,282.5 C54.28,283.55 57.52,284.45 61.3,285.5 C61.3,283.4 61.3,281.6 61.3,279.5 C57.52,280.55 54.28,281.45 50.5,282.5 C50.5,282.5 50.5,282.5 50.5,282.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="previousSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="50" y="268">previousSibling</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

Before After
Before After

4
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.svg
View file

@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="488px" height="246px" viewBox="0 0 488 246" 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.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>carousel1.svg</title>
<desc>Created with Sketch.</desc>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="carousel1.svg" sketch:type="MSArtboardGroup">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Before After
Before After

4
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.svg
View file

@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="639px" height="246px" viewBox="0 0 639 246" 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.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>carousel2.svg</title>
<desc>Created with Sketch.</desc>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="carousel2.svg" sketch:type="MSArtboardGroup">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Before After
Before After

4
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg
View file

@ -14,11 +14,11 @@
<path d="M49.7916667,21.125 C49.7916667,23.4593125 47.5634896,25.35 44.8125,25.35 C42.0615104,25.35 39.8333333,23.4593125 39.8333333,21.125 C39.8333333,18.7906875 42.0615104,16.9 44.8125,16.9 C47.5634896,16.9 49.7916667,18.7906875 49.7916667,21.125 L49.7916667,21.125 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M69.7083333,21.125 C69.7083333,23.4593125 67.4801563,25.35 64.7291667,25.35 C61.9781771,25.35 59.75,23.4593125 59.75,21.125 C59.75,18.7906875 61.9781771,16.9 64.7291667,16.9 C67.4801563,16.9 69.7083333,18.7906875 69.7083333,21.125 L69.7083333,21.125 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="231" y="85" width="69" height="36"></rect>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="231" y="85" width="69" height="36"></rect>
<text id="#TO" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="251.150618" y="109">#TO</tspan>
</text>
<path d="M236,94.6353921 L223.12832,94.6353921 L217.344468,101.853926 L105.198001,101.853926 L108.348404,94.146 L82,103.645409 L108.348404,113.146 L105.235092,105.438074 L217.204218,105.438074 L223.12832,112.830378 L236,112.830378 L228.709332,103.733476 L236,94.6353921" id="Fill-21" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(159.000000, 103.646000) scale(-1, 1) translate(-159.000000, -103.646000) "></path>
<path d="M236,94.6353921 L223.12832,94.6353921 L217.344468,101.853926 L105.198001,101.853926 L108.348404,94.146 L82,103.645409 L108.348404,113.146 L105.235092,105.438074 L217.204218,105.438074 L223.12832,112.830378 L236,112.830378 L228.709332,103.733476 L236,94.6353921" id="Fill-21" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(159.000000, 103.646000) scale(-1, 1) translate(-159.000000, -103.646000) "></path>
<text id="target" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="240" y="80">target</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

6
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg
View file

@ -6,11 +6,11 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="mouseover-mouseout-over-elems.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="374" y="21" width="90.0136719" height="52.4511719"></rect>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="374" y="21" width="90.0136719" height="52.4511719"></rect>
<text id="#TO" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="405.150618" y="53">#TO</tspan>
</text>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="16" y="21" width="90.0136719" height="52.4511719"></rect>
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="16" y="21" width="90.0136719" height="52.4511719"></rect>
<text id="#FROM" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="36.8122396" y="53">#FROM</tspan>
</text>
@ -26,7 +26,7 @@
<text id="&lt;DIV&gt;-3" opacity="0.6" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="306.384505" y="63">&lt;DIV&gt;</tspan>
</text>
<path d="M401,38.6353921 L375.340223,38.6353921 L363.810075,45.8539263 L140.245366,45.8539263 L146.525714,38.146 L94,47.6454089 L146.525714,57.146 L140.319306,49.4380737 L363.530486,49.4380737 L375.340223,56.8303775 L401,56.8303775 L386.466006,47.7334759 L401,38.6353921" id="Fill-21" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(247.500000, 47.646000) scale(-1, 1) translate(-247.500000, -47.646000) "></path>
<path d="M401,38.6353921 L375.340223,38.6353921 L363.810075,45.8539263 L140.245366,45.8539263 L146.525714,38.146 L94,47.6454089 L146.525714,57.146 L140.319306,49.4380737 L363.530486,49.4380737 L375.340223,56.8303775 L401,56.8303775 L386.466006,47.7334759 L401,38.6353921" id="Fill-21" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(247.500000, 47.646000) scale(-1, 1) translate(-247.500000, -47.646000) "></path>
<text id="mouseover" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="340" y="17">mouseover</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

6
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.svg
View file

@ -6,15 +6,15 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="mouseover-mouseout.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="94" y="24" width="90.0136719" height="52.4511719"></rect>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="94" y="24" width="90.0136719" height="52.4511719"></rect>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="119.384505" y="56">&lt;DIV&gt;</tspan>
</text>
<path d="M109,51.8276766 C109,51.8276766 88.1589755,39.0886766 74.3265137,34 C73.990849,36.1044846 73.6561461,38.2078702 73.3204815,40.3112558 C50.6491708,39.1326345 27.6239215,40.8772137 6,45.5449934 C8.76995481,49.733632 11.5399096,53.9217211 14.3098644,58.1098102 C32.5800247,54.1662369 52.0341482,52.6925483 71.1891551,53.6881948 C70.8534905,55.7926793 70.5178258,57.8960649 70.1831229,60 C81.3091081,56.2091804 109,51.8276766 109,51.8276766" id="Fill-55" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M109,51.8276766 C109,51.8276766 88.1589755,39.0886766 74.3265137,34 C73.990849,36.1044846 73.6561461,38.2078702 73.3204815,40.3112558 C50.6491708,39.1326345 27.6239215,40.8772137 6,45.5449934 C8.76995481,49.733632 11.5399096,53.9217211 14.3098644,58.1098102 C32.5800247,54.1662369 52.0341482,52.6925483 71.1891551,53.6881948 C70.8534905,55.7926793 70.5178258,57.8960649 70.1831229,60 C81.3091081,56.2091804 109,51.8276766 109,51.8276766" id="Fill-55" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<text id="mouseover" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="21">mouseover</tspan>
</text>
<path d="M268,51.8276766 C268,51.8276766 247.158975,39.0886766 233.326514,34 C232.990849,36.1044846 232.656146,38.2078702 232.320481,40.3112558 C209.649171,39.1326345 186.623921,40.8772137 165,45.5449934 C167.769955,49.733632 170.53991,53.9217211 173.309864,58.1098102 C191.580025,54.1662369 211.034148,52.6925483 230.189155,53.6881948 C229.85349,55.7926793 229.517826,57.8960649 229.183123,60 C240.309108,56.2091804 268,51.8276766 268,51.8276766" id="Fill-56" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M268,51.8276766 C268,51.8276766 247.158975,39.0886766 233.326514,34 C232.990849,36.1044846 232.656146,38.2078702 232.320481,40.3112558 C209.649171,39.1326345 186.623921,40.8772137 165,45.5449934 C167.769955,49.733632 170.53991,53.9217211 173.309864,58.1098102 C191.580025,54.1662369 211.034148,52.6925483 230.189155,53.6881948 C229.85349,55.7926793 229.517826,57.8960649 229.183123,60 C240.309108,56.2091804 268,51.8276766 268,51.8276766" id="Fill-56" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<text id="mouseoout" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="176" y="21">mouseoout</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After

6
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg
View file

@ -6,15 +6,15 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="mouseover-to-child.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="12" y="14" width="212" height="117"></rect>
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="12" y="14" width="212" height="117"></rect>
<text id="#FROM" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="18.9784745" y="31">#FROM</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="140" y="64" width="69" height="36"></rect>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="140" y="64" width="69" height="36"></rect>
<text id="#TO" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="160.150618" y="88">#TO</tspan>
</text>
<path d="M151,83.0279175 C151,83.0279175 135.824497,73.7186483 125.752316,70 C125.5079,71.5378926 125.264184,73.074982 125.019768,74.6120715 C108.511532,73.7507714 91.7455739,75.0256562 76,78.436726 C78.0169574,81.4976542 80.0339148,84.5581808 82.0508721,87.6187075 C95.3543869,84.7368655 109.520011,83.6599391 123.467831,84.3875269 C123.223415,85.9254195 122.978999,87.462509 122.735284,89 C130.836729,86.2297857 151,83.0279175 151,83.0279175" id="Fill-54" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M151,83.0279175 C151,83.0279175 135.824497,73.7186483 125.752316,70 C125.5079,71.5378926 125.264184,73.074982 125.019768,74.6120715 C108.511532,73.7507714 91.7455739,75.0256562 76,78.436726 C78.0169574,81.4976542 80.0339148,84.5581808 82.0508721,87.6187075 C95.3543869,84.7368655 109.520011,83.6599391 123.467831,84.3875269 C123.223415,85.9254195 122.978999,87.462509 122.735284,89 C130.836729,86.2297857 151,83.0279175 151,83.0279175" id="Fill-54" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<text id="mouseover" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="113" y="59">mouseover</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After