typicons

dabblet.css

@import url(http://weloveiconfonts.com/api/?family=typicons);

/* typicons */
[class*="typicons-"]:before {
  font-family: 'Typicons', sans-serif;
}

body {
font: 13px Helvetica Neue, Helvetica, sans-serif;
color:white;
display:inline-block;
}

.control {
background-color: #e1a91a;
border-color: #e5b53a #a07812 #a07812 #e5b53a;
}
.control .start {
border-radius: 4px 4px 4px 0;
-webkit-border-radius: 4px 4px 4px 0;
-moz-border-radius: 4px 4px 4px 0;
min-width: 60px;
}
.motion {
background-color: #4a6cd4;
border-color: #6380da #344d97 #344d97 #6380da;
}

.block {
position:relative;
float:left;
margin-right:10px;
border-top-width: 1px;
border: 1px solid;
padding: 2px 4px;
min-width: 36px;
min-height: 16px;
line-height: 16px;
border-radius: 5px;
}
.block:before {
border-color: #344d97 #6380da #6380da #344d97;
content: "";
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
left: 11px;
width: 15px;
height: 4px;
border: inherit;
border-top: none;
border-width: 1px;
background: #ffffff;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
top: -1px;
}
.block:after {
content: "";
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
left: 12px;
width: 13px;
height: 5px;
border: inherit;
border-top: none;
background: inherit;
border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
bottom: -5px;
z-index: 101;
}
.value {
background: #fff;
color: #000;
border: 1px solid #a59e97;
border-color: #777 #fff #fff #777;
padding: 1px 4px;
border-radius: 10px;
width:23px;
height:14px;
display:inline-block;
}

dabblet.html

<div class="block motion" contenteditable="true">
	Para frente
	<div class="value">10</div>
	Passos
</div>
<div class="block motion">
	Virar a
	<span class="typicons-forward"></span>
	<div class="value">10</div>
	graus
</div>
<div class="block motion">
	Virar a
	<span class="typicons-back"></span>
	<div class="value">10</div>
	esquerda
</div>
<div class="block motion">
	Ir para x:
	<div class="value">234</div>
</div>
<div class="block motion">
	Ir para y:
	<div class="value">161</div>
</div>
<div class="block motion">
	Ir para x:
	<div class="value">10</div>
	Ir para y:
	<div class="value">30</div>
</div>
<div class="block control start">
	Repeat
	<div class="value">4</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}