Button Test Suite

dabblet.css

/**
 * Button Test Suite
 */

html {
	height: 100%;
	background: #333;
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	color: #999;
	user-select: none;
}

body {
	padding: 0;
	margin: 0;
	transform: scale(1);
	transform-origin:0 0;
}

h1 {
	margin: 40px 40px 20px 40px;
}

h2 {
	margin: 0 0 40px 0;
	padding: 0;
	font-size: 24px;
}

.context {
	padding: 40px 40px 20px 40px;
	color: white;
}
.context.library {
	background: #333333;
}
.context.hud .tophud {
	padding-left: 40px;
	margin-left: -40px;
	margin-right: -40px;
	height: 100px;
	padding-top: 12px;
	background-image: url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/background-tophud.png");
	background-size: 100px;
	background-repeat: repeat-x;
}

	.btn {
		display: inline-block;
		margin-right: 30px;
		cursor: pointer;
		border-width: 2px;
		font-size: 14px;
		color: white;
	}
		.btn span {
		display: inline-block;
		padding: 0 16px 0 16px;
		margin: 0;
		height: 26px;
		line-height: 24px;
	}
	
	.regular { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_up.png"); }
	.regular span { background: #525252; }
	.regular:active { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_down.png"); }
	.regular:active span { background: #202020; }
	
	.regular.disabled { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_disabled.png"); }
	.regular.disabled span { background: #424242; color: #999; }

	.dark { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_dark_up.png"); }
	.dark:active { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_dark_down.png"); }
	.dark span { background: #292929; }
		
	.blue { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_blue_up.png"); }
	.blue span { background: #00a8e7; }
	.blue:active { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_blue_down.png"); }
	.blue:active span { background: #0B5F92 }
	
	.blue.disabled { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_blue_disabled.png"); }
	.blue.disabled span { background: #2E91BF; color: #B4CFEC; }
	
	.red { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_red_up.png"); }
	.red span { background: #AD0B1F; }
	.red:active { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_red_down.png"); }
	.red:active span { background: #7F0017; }

	.red.disabled { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_red_disabled.png"); }
	.red.disabled span { background: #BE002A; color: #FF9999; }
	
	.back { 
		border-width: 0;
	 }
	 .back .head {
	 	display: inline-block;
	 	width: 12px;
	 	line-height: 29px;
	 	background-image: url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_backarrow_up.png");
	 	background-position: left;
	 	background-repeat: no-repeat;
	 	background-size: auto 29px;
	 }
	 .back span {
	 	height: inherit;
	 	padding-left: 12px;
	 	line-height: 29px;
	 	background-image: url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_backarrow_up.png");
	 	background-position: right;
	 	background-repeat: no-repeat;
	 	background-size: auto 29px;
	 }
	 .back:active .head, .back:active span {
	 	background-image: url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_backarrow_down.png");
	 }

dabblet.html

<h1>XD Button Test Suite for DPS</h1>

<div class="context library" ontouchstart="">
	<h2>iOS Buttons on Library Background #333</h2>
	<div class="btn regular"><span>Free</span></div>
	<div class="btn regular disabled"><span>Disabled</span></div>
	<div class="btn blue"><span>Read Article</span></div>
	<div class="btn blue disabled"><span>Offline</span></div>
	<div class="btn red"><span>Remove</span></div>
	<div class="btn red disabled"><span>Disabled</span></div>
</div>

<div class="context hud">
	<h2>iOS HUD</h2>
	<div class="tophud">
		<div class="btn back"><em class="head">&nbsp;</em><span>Library</span></div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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