#dailyui 007: Settings

dailyui-007-settings.markdown

#dailyui 007: Settings

Fully responsive and animated settings modal - CSS-only, no Javascript. Got a bit of a design-block so it's a little late!

A Pen by omr on CodePen.

License.

index.haml

%div#settings{:ontouchstart => true}
	%input.nav{:type => "radio", :name => "nav", :checked => true}
	%span.nav Profile
	%input.nav{:type => "radio", :name => "nav"}
	%span.nav Account
	%input.nav{:type => "radio", :name => "nav"}
	%span.nav Privacy
	%input.nav{:type => "radio", :name => "nav"}
	%span.nav Advanced
	%main.content
		%section#profile
			%form
				%ul
					%li.large.padding.avatar
						%span{:style => "background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/345377/selca-square.jpg');"}
						%div
							%fieldset.material-checkbox
								%div
									%input{:type => "checkbox", :checked => true}
									%div.check
										%span
											%svg{:viewBox => "0 0 24 24"}
												%g
													%line{:x1 => "4.5", :x2 => "9.24", :y1 => "12.5", :y2 => "17.24"}
													%line{:x1 => "9.24", :x2 => "19.76", :y1 => "17.24", :y2 => "6.73"}
												%g
													%line{:x1 => "4.5", :x2 => "9.24", :y1 => "12.5", :y2 => "17.24"}
													%line{:x1 => "9.24", :x2 => "19.76", :y1 => "17.24", :y2 => "6.73"}
										%label Use Gravatar
							%fieldset.material-button
								%div
									%button Select File
					%li
						%fieldset.material
							%div
								%input{:type => "text", :required => true, :value => "Gabrielle Wee"}
								%label Name
								%hr
					%li
						%fieldset.material
							%div
								%input{:type => "text", :required => true}
								%label Location
								%hr
					%li
						%fieldset.material
							%div
								%input{:type => "text", :required => true}
								%label Title
								%hr
					%li
						%fieldset.material
							%div
								%input{:type => "text", :required => true}
								%label Website
								%hr
					%li.large
						%fieldset.material
							%div
								%input{:type => "text", :required => true}
								%label About
								%hr
					%li.large.padding
						%fieldset.material-button.center
							%div
								%input.save{:type => "submit", :value => "Save"}
		%section#account
			%form
				%ul
					%li
						%fieldset.material
							%div
								%input{:type => "text", :required => true, :value => "email@domain.com"}
								%label Email
								%hr
					%li
						%fieldset.material
							%div
								%input{:type => "text", :required => true}
								%label Username
								%hr
					%li
						%fieldset.material
							%div
								%input{:type => "password", :required => true}
								%label Password
								%hr
					%li
						%fieldset.material
							%div
								%input{:type => "password", :required => true}
								%label Confirm Password
								%hr
					%li.padding
						%fieldset.material-button
							%div
								%button.connect.gh.connected
									%span Unlink Github Account
					%li.padding
						%fieldset.material-button
							%div
								%button.connect.tw
									%span Link Twitter Account
					%li.padding
						%fieldset.material-button
							%div
								%button.connect.fb
									%span Link Facebook Account
					%li.padding
						%fieldset.material-button
							%div
								%button.connect.li
									%span Link LinkedIn Account
					%li.large.padding
						%fieldset.material-button.center
							%div
								%input.save{:type => "submit", :value => "Save"}
		%section#privacy.upcoming
			%h1 Coming soon!
		%section#advanced.upcoming
			%h1 Coming soon!

script.js

// ⟁ \\

style.scss

$mauve: #3f4159;
$heather: #725767;
$blush: #cd908b;
$grey: #343434;

$gh: #4183c4;
$tw: #2daae1;
$li: #069;
$fb: #3b5997;

$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);

$f: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
$p: 12px;

*, *:before, *:after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
body, html { height: 100%; }
body {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: $p;
	background: mix(mix($mauve, $heather), $blush);
	background: linear-gradient(135deg, $mauve 0%, $heather 50%, $blush 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$mauve', endColorstr='$blush',GradientType=1 );
	font-family: $f;
	font-size: 16px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	perspective: 1000px;
}
input, textarea, button {
	appearance: none;
	border: 0;
	font-family: $f;
	resize: none;
}
a, button, input[type="submit"] {
	cursor: pointer;
}
::selection {
	background: rgba($blush, .2);
}

#settings {
	opacity: 0;
	transform-origin: center top;
	will-change: opacity, transform;
	animation: rotateIn 1000ms $easeOutCubic 500ms forwards;
	position: relative;
	display: flex;
	flex-flow: row wrap;
	background: white;
	box-shadow: 0 0 20px rgba(darken($mauve, 20%), .2);
	overflow: hidden;
	color: $mauve;
	border-radius: 2px;
	width: 100%;
	max-width: 600px;
	height: 100%;
	@media only screen and (min-width: 500px) {
		max-height: 420px;
	}
}

span.nav {
	transition: all 150ms ease-out;
	flex-basis: 25%;
	display: block;
	position: relative;
	width: 100%;
	padding: $p*1.5 0;
	text-align: center;
	&:nth-of-type(1) {
		z-index: 5;
	}
	&:nth-of-type(2) {
		z-index: 4;
	}
	&:nth-of-type(3) {
		z-index: 3;
	}
	&:nth-of-type(4) {
		z-index: 2;
	}
	&:nth-of-type(5) {
		z-index: 1;
	}
	&:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: -1px;
		width: 2px;
		height: 100%;
		background: mix($blush, white, 25%);
	}
	&:last-of-type:after {
		display: none;
	}
}
input.nav {
	cursor: pointer;
	appearance: none;
	opacity: 0;
	position: absolute;
	z-index: 6;
	top: 0;
	width: 25%;
	height: 53px;
	&:hover, &:focus {
		+ span {
			background: mix($blush, white, 25%);
		}
	}
	&:active, &:checked {
		+ span {
			background: mix($blush, $mauve);
			color: white;
		}
	}
	&:active {
		+ span {
			transition: all 150ms ease-in;
		}
	}
	~ main {
		section {
			transition: all 450ms ease-out;
			transform: translateY(50%) translateZ(0);
			opacity: 0;
			z-index: -1;
		}
	}
	@for $i from 1 through 5 {
		&:nth-of-type(#{$i}) {
			left: $i*25% - 25%; 
			&:checked {
				~ main {
					section:nth-of-type(#{$i}) {
						transform: translateY(0) translateZ(0);
						opacity: 1;
						z-index: 10;
					}
				}
			}
		}
	}
}

main {
	align-self: flex-end;
	position: relative;
	border-top: 2px solid mix($blush, white, 25%);
	width: 100%;
	height: calc(100% - 52px);
}

section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: white;
	will-change: transform, opacity;
	ul {
		display: flex;
		flex-flow: row wrap;
		padding: $p;
		li {
			opacity: 0;
			transform: translateY(100%) translateZ(0);
			will-change: transform, opacity;
			animation: slideInUp 600ms $easeOutCubic forwards;
			padding: $p/2 $p;
			width: 50%;
			@for $i from 1 through 7 {
				&:nth-child(#{$i}) {
					animation-delay: #{($i*100)+600}ms;
				}
			}
			&.large {
				width: 100%;
			}
			&.padding {
				padding: $p;
			}
		}
	}
	&.upcoming {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		text-align: center;
		h1 {
			font-size: 32px;
			color: mix($grey, white, 25%);
		}
	}
}

.avatar {
	display: flex;
	> span {
		display: block;
		width: 72px;
		height: 72px;
		background-position: center center;
		background-size: cover;
		border-radius: 2px;
	}
	> div {
		padding-left: $p*2;
		.material-button {
			margin-top: #{$p+1};
		}
	}
}

.material {
	width: 100%;
	div {
		position: relative;
		width: 100%;
		padding-top: $p*1.5;
	}
	label {
		transition: all 150ms ease-out;
		will-change: transform;
		transform: translateZ(0);
		display: block;
		position: absolute;
		z-index: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-bottom: 4px;
		font-weight: 500;
		color: $blush;
		line-height: 1.5;
	}
	hr {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		border: 0;
		border-radius: 4px;
		margin: 0;
		background: mix($grey, white, 10%);
		&:after {
			transition: all 150ms ease-out;
			transform: scaleX(0) translateZ(0);
			transform-origin: left top;
			will-change: transform;
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 4px;
			background: $blush;
		}
	}
	input {
		display: block;
		appearance: none;
		position: relative;
		z-index: 1;
		padding: 0 0 4px;
		margin: 0;
		width: 100%;
		background: none;
		color: $mauve;
		font-size: 16px;
		line-height: 1.5;
		&:focus, &:valid {
			+ label {
				transform: translateY(-24px) translateZ(0);
				font-size: 12px;
			}
		}
		&:focus {
			~ hr:after {
				transform: scaleX(1) translateZ(0);
			}
		}
	}
}

.material-checkbox {
	div {
		position: relative;
	}
	.check {
		z-index: 0;
		display: flex;
		align-items: center;
		align-content: center;
	}
	span {
		display: block;
		width: 24px;
		height: 24px;
		border-radius: 2px;
		background: mix($grey, white, 10%);
	}
	svg {
		display: block;
		width: 100%;
		height: 100%;
	}
	line {
		fill: none;
		stroke: rgba(white, .5);
		stroke-width: 2px;
		stroke-linecap: round;
	}
	g:last-child {
		line {
			stroke: white;
			opacity: 0;
			&:first-child {
				transition: stroke-dashoffset 100ms ease-out;
				stroke-dasharray: 6.708;
				stroke-dashoffset: 6.708;
			}
			&:last-child {
				transition: stroke-dashoffset 200ms ease-out 100ms;
				stroke-dasharray: 14.873;
				stroke-dashoffset: 14.873;
			}
		}
	}
	label {
		margin-left: $p/2;
	}
	input {
		cursor: pointer;
		opacity: 0;
		appearance: none;
		display: block;
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		&:checked {
			+ div {
				span {
					background: $blush;
				}
				g:last-child {
					line {
						opacity: 1;
						&:first-child {
							stroke-dashoffset: 0;
						}
						&:last-child {
							stroke-dashoffset: 0;
						}
					}
				}
			}
		}
	}
}

.material-button {
	width: 100%;
	div {
		width: 100%;
	}
	button, input[type="submit"] {
		margin: 0;
		border: 0;
		border-radius: 2px;
		padding: $p/2 $p;
		background: mix($grey, white, 10%);
		color: $mauve;
		font-size: 16px;
		transition: all 150ms ease-out;
		&:hover, &:focus {
			background: $blush;
			color: white;
		}
		&:active {
			transition: all 150ms ease-in;
			background: $mauve;
		}
		&.save {
			width: 100%;
			max-width: 256px;
			padding: $p $p*2;
			background: mix($blush, $mauve);
			color: white;
			font-size: 18px;
			&:hover, &:focus {
				background: $blush;
			}
			&:active {
				background: $mauve;
			}
			@media only screen and (max-height: 444px) {
				display: none;
			}
		}
		&.connect {
			display: block;
			width: 100%;
			border-radius: 1000px;
			color: white;
		}
		&.gh {
			background: $gh;
			&:hover, &:focus {
				background: lighten($gh, 15%);
			}
			&.connected {
				background: mix($grey, white, 10%);
				color: $grey;
				&:hover, &:focus {
					background: $gh;
					color: white;
				}
			}
			&:active {
				background: darken($gh, 15%)!important;
			}
		}
		&.tw {
			background: $tw;
			&:hover, &:focus {
				background: lighten($tw, 15%);
			}
			&.connected {
				background: mix($grey, white, 10%);
				color: $grey;
				&:hover, &:focus {
					background: $tw;
					color: white;
				}
			}
			&:active {
				background: darken($tw, 15%)!important;
			}
		}
		&.fb {
			background: $fb;
			&:hover, &:focus {
				background: lighten($fb, 15%);
			}
			&.connected {
				background: mix($grey, white, 10%);
				color: $grey;
				&:hover, &:focus {
					background: $fb;
					color: white;
				}
			}
			&:active {
				background: darken($fb, 15%)!important;
			}
		}
		&.li {
			background: $li;
			&:hover, &:focus {
				background: lighten($li, 15%);
			}
			&.connected {
				background: mix($grey, white, 10%);
				color: $grey;
				&:hover, &:focus {
					background: $li;
					color: white;
				}
			}
			&:active {
				background: darken($li, 15%)!important;
			}
		}
	}
	&.center {
		div {
			display: flex;
			justify-content: center;
		}
	}
}

@keyframes rotateIn {
	0% {
		opacity: 0;
		transform: rotateX(30deg) rotateY(30deg) translateY(300px) translateZ(200px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes slideInUp {
	0% {
		opacity: 0;
		transform: translateY(100%) translateZ(0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}