Modal dialog

dabblet.css

/**
 * Modal dialog
 */


.modal {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
background-color: rgba(0,255,100,.5);
}

.stage {
background-color: rgba(255,0,100,.5);
	width: 80%;
	height: 100%;
}

.panel {
background-color: rgba(100,0,255,.5);
	display: flex;
	flex-direction: column;
	width: 20%;
	min-width: 320px;
	height: 100%;
}

.panel__description,
.panel__preview {
	flex-basis: 25%
}

.panel__description {
background-color: rgba(255,255,0,.5);
	flex-grow: 1;
	flex-shrink: 1;
}

.panel__preview {
	background-color: rgba(255,0,255,.5);
	flex-grow: 3;
	flex-shrink: 1;
}

dabblet.html

<div class="modal">
	<div class="stage"></div>
	<aside class="panel">
		<div class="panel__description"></div>
		<div class="panel__preview"></div>
	</aside>

</div>

dabblet.js

// alert('Hello world!');

settings.json

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