mixin getCheckbox(id, title, checked, disabled)
	input.android-checkbox(type="checkbox", id="#{id}" checked!=checked disabled!=disabled)
mixin getLinkOption(label, description)
	li.setting.link-container
		a.setting-link(href="#")!= label
		if description
			.setting-detail
				p.setting-detail-text!= description
			
mixin getOption(label, icon, description, checked, disabled)
	li.setting
		- var slugifiedLabel = label.split(" ").concat("-");
		- var additionalClassNames = disabled ? "disabled" : null;
		.setting-control(class=additionalClassNames)
			label.setting-label(for=slugifiedLabel)!= label
			+getCheckbox(slugifiedLabel, description, checked, disabled)
		if description
			.setting-detail
				p.setting-detail-text!= description
mixin getButton(icon, title)
	button.android-button(title=title)
		if block
			block
		if icon
			span(class="android-icon material-icons")!= icon
mixin getFieldset(title)
	fieldset.settings-container-section
		legend.settings-container-heading!= title
		if block
			block
.phone.g5
	.phone-head
		.phone-camera
			.phone-camera-lense
		.phone-camera2
			.phone-camera-lense
		.phone-speaker
	.phone-screen
		form.settings-container
			header.settings-header
				+getButton("keyboard_backspace", "Go back")
				ul.settings-header-options
					+getOption("Developer options", null, null, true)
				+getButton("more_vert", "More options")
			ul.settings
				+getLinkOption("Take bug report")
				+getLinkOption("Desktop backup password", "No password set for device backup to desktop")
				+getOption("Stay awake", null, "Screen will never timeout without charging")
				+getOption("Enable Bluetooth HCI snoop log", null, "Capture all bluetooth HCI packets in a file")
				+getOption("Enable OEM unlock", null, "Allow the device to be OEM unlocked", true)
				+getLinkOption("Running Services", "View and control currently running services")
			+getFieldset("Debugging")
				ul.settings
					+getOption("USB debugging", null, "Debug mode when USB is connected", true)
					+getLinkOption("Revoke USB debugging authorizations")
					+getOption("Power menu bug reports", null, "Include option in power menu for taking a bug report", true)
					+getLinkOption("Select mock location app", "No mock location app set up")
					+getOption("Enable view attribute inspection")
					+getLinkOption("Select debug app", "No debug application set")
					+getOption("Wait for debugger", null, "Debugged application waits for debugger to attatch before executing", false, true)
					+getOption("Verify apps over USB", null, "Check apps installed via ADB/ADT for harmful behavior")
					+getLinkOption("Logger buffer sizes", "256k per log buffer")
				+getFieldset("Networking")
					ul.settings
						+getOption("Wireless display certification", null, "Show options for wireless display certification")
	.phone-foot
		.phone-logo
View Compiled
// demo purposes
/* -- import Roboto Font -- */
@import url("//fonts.googleapis.com/css?family=Roboto400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic")
@import url("https://fonts.googleapis.com/icon?family=Material+Icons")
body
	background radial-gradient(#333, hsl(200,30%,6%))
	font-family "RobotoDraft", "Roboto", "Helvetica Neue, Helvetica, Arial", sans-serif
.phone
	&-camera, &-camera2, &-speaker
		display inline-block
		vertical-align middle
	&-camera
		width 1.3em
		height 1.3em
		background radial-gradient(#333, #000, #555, #ddd)
		border-radius 50%
		margin 0 2em 0 1em
	&-camera2
		border-radius 30%
		background radial-gradient(#333, hsl(200,30%,6%))
		width 2em
		height 1em
		margin-right 0.2em
	&-speaker
		border-radius 4em
		width 4em
		height 0.5em
		background radial-gradient(#333, hsl(200,30%,6%))
	&-head
		height 2.3em
		padding 0.75em
	&-foot
		height 2.5em
		background linear-gradient(#ddd, hsl(200,60%,5%))
		margin-top 1em
		border-bottom-right-radius 2.5em
		border-bottom-left-radius 2.5em
	&.g5
		width 20em
		// position relative
		height 35em
		border-top-right-radius 2.5em
		border-top-left-radius 2.5em
		margin 5% auto
		background #000
	&-screen
		//position absolute
		//max-height 80%
		// overflow-y scroll
		//width 100%
		margin 0 0.75em
		background white
		overflow-y scroll
		height 86%
.android
	&-checkbox
		float right
	&-button
		border 0
		cursor pointer
		display inline-block
		background transparent
		padding 0.4em 0
.setting
	padding 1em 0
	& + &
		border-top 0.1em solid #ccc
	&-label
		font-weight 500
		font-size 1.07em
		display inline-block
		cursor pointer
	&-detail
		&-text
			margin-top 0.5em
			font-size 0.8em
			opacity 0.6
	&s
		padding 0 0.5em
		&-container
			background white - 15
			&-heading
				background #ddd
				display block
				text-transform uppercase
				font-size 0.7em
				width 100%
				padding 1em 1em 0.5em 1em
				box-sizing border-box
				font-weight bold
		&-header
			border-bottom 0.1em solid #ccc
			.setting
				border-bottom 0
				padding 0
			.setting-control
				width 13em
			*
				display inline-block
				vertical-align middle
				font-weight bold

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.