Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                //- https://dribbble.com/shots/2342992-007-Settings

- var sidebarIcons = ['ion-person-stalker', 'ion-music-note', 'ion-image', 'ion-android-film', 'ion-social-dribbble-outline', 'ion-levels'];
- var navigationItems = ['Profile', 'Password', 'Notifications', 'Sync', 'Advanced'];

- var detailOptionItems = [{src: 'https://upload.wikimedia.org/wikipedia/commons/9/9b/Logo_of_Google_Drive.png', title: 'Google Drive', body: 'Configure to sync design and code files from Google Drive', }, {src: '', title: 'Dropbox Sync', body: 'Configure to sync design and code files from Dropbox', }, {src: 'https://upload.wikimedia.org/wikipedia/en/8/88/Adobe_Creative_Cloud_Logo.png', title: 'Adobe Creative Cloud', body: 'Configure to sync design and code files from Adobe Creative Cloud', }, {src: 'https://upload.wikimedia.org/wikipedia/commons/0/00/Box_cyan.png', title: 'Box', body: 'Configure to sync design and code files from Box', }, {src: 'https://upload.wikimedia.org/wikipedia/en/f/f0/ICloud_logo_%28new%29.png', title: 'iCloud', body: 'Configure to sync design and code files from iCloud', }, ];

- var checkboxId = 0;
- var checked = false;

mixin detailsOption(src, title, body)
	li.Details__options-list__item
		.Media
			.Media__side.Media__side--left
				- var id = title.toLowerCase().replace(/\s+/, '-');
				img.Media__image(id=id, src=src, alt="")

			.Media__body.Media.u-flex-center--v
			
				div
					h3=title
					p=body
					
				div.Media__side.Media__side--right
					- checkboxId++

					if checkboxId == 1 || checkboxId == 4
						- checked = true
					else
						- checked = false;
						
					input.checkbox-input(id="DetailsOptionCheckbox" + checkboxId, checked=checked, type="checkbox")
					label.checkbox.ion-ios-checkmark-empty(for="DetailsOptionCheckbox" + checkboxId)


.wrapper
	aside.Sidebar
		nav.Sidebar__nav(role="navigation")
			ul.Sidebar__nav-list
				each icon, index in sidebarIcons
					if index < sidebarIcons.length - 1
						li(class="Sidebar__nav-list__item " + icon)
					else
						li(class="Sidebar__nav-list__item Sidebar__nav-list__item--active " + icon) 

	section.Details
		header.Details__header
			h1.Details__title Settings
		
		nav.Details__nav(role="navigation")
			ul.Details__nav-list
				each item in navigationItems
					if item == 'Sync'
						li.Details__nav-list__item.Details__nav-list__item--active=item
					else						
						li.Details__nav-list__item=item
						
		.Details__body
			ul.Details__options-list
				each item in detailOptionItems
					+detailsOption(item.src, item.title, item.body)
				
		button#sync.Button.Button--sync
			span.a-spin.ion-loop
              
            
!

CSS

              
                @import "bourbon"

$sidebar-background: #2D3139 // sidebar menu background 

$blue: #00BAFF // checkmark blue

$body-background: #0B9FED   // blue

$foreground: rgba(black, 0.7)
$foreground--light: #B0B0B2 // light gray

$link-color--active: #0674D7 // blue
$link-color--hover: $link-color--active // blue

$checkmark-gray: #E6E6E6 // checkmark untoggled 

$details-pane-background: #F7F9FA
$details-body-gutter: 60px

$headings: (h1, h2, h3, h4, h5, h6)

$checkbox-expand: 4px



body
	color: $foreground
	background-color: $body-background
	font-family: Open Sans
	line-heihgt: 1.5
	margin: 0

ul
	padding: 0
	margin: 0
	list-style-type: none

a
	text-decoration: none

	&:link, &:visited
		color: $foreground--light

	&:hover, &:active
		color: $link-color--hover

p
	font-size: 14px
	margin-bottom: 0

#{$headings}
	font-weight: 300
	margin: 0
	padding: 0



.wrapper
	$width: 810px
	display: flex
	padding: 80px 20px
	max-width: $width
	min-width: $width
	margin: 0 auto



// Sidebar to the left 
.Sidebar
	align-items: center
	background-color: $sidebar-background
	border: 1px solid rgba(black, 0.1)
	border-radius: 4px
	box-shadow: -5px 0px 60px 0 rgba(black, 0.6), inset 0 0 40px rgba(black, 0.1)
	display: flex
	margin: 60px 0

.Sidebar__nav-list
	align-items: center
	display: flex
	flex-direction: column
	justify-content: center

.Sidebar__nav-list__item
	color: rgba(white, 0.3)
	cursor: pointer
	font-size: rem(28px)
	padding: 20px 30px
	text-align: center
	
	&:hover
		color: white

	&--active
		color: white



// The the content area 
/**
 * 1. z-indexed over the sidebar so the sidebar's shadow 
 *    doesn't show over the main content area  
 */
.Details
	background-color: white
	border-radius: 4px
	box-shadow: -5px 0px 70px 0 rgba(black, 0.4)
	flex: 1
	position: relative
	z-index: 1 /* [1] */

.Details__header
	padding: 30px

.Details__title
	color: rgba(black, 0.8)
	font-size: 28px
	font-weight: 300
	letter-spacing: 1px
	text-align: center
	text-transform: uppercase

.Details__nav
	padding: 0 $details-body-gutter

.Details__nav-list
	display: flex
	justify-content: space-between

.Details__nav-list__item
	border-bottom: 2px solid transparent
	color: $foreground--light	
	cursor: pointer	
	padding-bottom: 30px
	position: relative
	text-align: center
	user-select: none

	&:hover
		border-color: $link-color--hover

	&--active
		border-color: $link-color--active

.Details__body
	background: $details-pane-background
	padding: 50px $details-body-gutter
	border-radius: 4px



.Media
	display: flex
	justify-content: space-between
	margin-bottom: 25px

.Media__side
	vertical-align: middle

	&--left
		margin-right: 30px

	&--right
		margin-left: 30px

.Media__image
	$width: 55px
	width: 100%
	max-width: $width

.Media__body
	flex: 1



.checkbox
	$width: 20px
	$height: 20px
	background-color: $checkmark-gray
	border-radius: 50%
	display: inline-block
	position: relative
	text-align: center
	vertical-align: middle
	+size($width $height)

	&:before
		background-color: $blue
		border-radius: 50%
		color: white
		font-size: 32px
		line-height: $height + ($checkbox-expand * 2) 
		opacity: 0
		transition: all 0.1s ease-in
		+position(absolute, 0)

// Hide the checkboxes 
.checkbox-input
	display: none
	
.checkbox-input:checked + .checkbox:before
	opacity: 1
	+position(absolute, -$checkbox-expand)

	

	
// Base button style 
.Button
	border-radius: 3px
	border: 0
	box-shadow: 0 2px 4px 0 rgba(black, 0.1), 0 10px 20px 0 rgba(black, 0.1)
	color: white
	cursor: pointer
	display: inline-block
	font-weight: 500
	font-size: 13px
	letter-spacing: 1px
	outline: 0
	padding: 16px 36px
	position: relative
	text-align: center
	text-transform: uppercase
	transition: box-shadow 0.15s, background-color 0.15s
	user-select: none
	vertical-align: middle
	will-change: box-shadow, background-color, color
	
	// Sync button 
	&--sync
		$width: 70px
		$height: $width
		background-color: $blue
		border-radius: 50%
		color: white
		font-size: 32px
		line-height: $height
		text-align: center
		padding: 0
		+size($width $height)

		> span
			line-height: $height



#sync
	bottom: 0
	position: absolute
	right: 0
	transform: translate(-50%, 50%)



	
// Helpers
.u-flex
	display: flex
	flex-wrap: wrap

.u-flex-center--v
	display: flex
	align-items: center

              
            
!

JS

              
                
/*
 * https://dribbble.com/shots/2342992-007-Settings
 */

const dropboxURI = `data:image/png;base64,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`;

document.querySelector('#dropbox-sync').src = dropboxURI;




















[
	{
		src: 'https://upload.wikimedia.org/wikipedia/commons/9/9b/Logo_of_Google_Drive.png',
		title: 'Google Drive',
		body: 'Configure to sync design and code files from Google Drive',
	},
	{
		icon: 'ion-social-dropbox',
		title: 'Dropbox Sync',
		body: 'Configure to sync design and code files from Dropbox',
	},
	{
		src: 'https://upload.wikimedia.org/wikipedia/en/8/88/Adobe_Creative_Cloud_Logo.png',
		title: 'Adobe Creative Cloud',
		body: 'Configure to sync design and code files from Adobe Creative Cloud',
	},
	{
		src: 'https://upload.wikimedia.org/wikipedia/commons/0/00/Box_cyan.png',
		title: 'Box',
		body: 'Configure to sync design and code files from Box',
	},
	{
		src: 'https://upload.wikimedia.org/wikipedia/en/f/f0/ICloud_logo_%28new%29.png',
		title: 'iCloud',
		body: 'Configure to sync design and code files from iCloud',
	},
]
              
            
!
999px

Console