scss 纯CSS材料设计表单

Posted 2021-05-18

Pure CSS Material Design form
-----------------------------
A web form including material design inspired animations and UX improvements.

Includes transitions, pseudo icons on validation and awesome colours.

A [Pen](https://codepen.io/jamesa91/pen/qNqLYy) by [James Thomas Almond](http://codepen.io/jamesa91) on [CodePen](http://codepen.io/).

[License](https://codepen.io/jamesa91/pen/qNqLYy/license).

<div class="flex-cont">
	<div class="form-cont">
		<form action="" class="form">
			<h1 class="form-heading">Pure CSS Material Design form</h1>
			<div class="form-content">
				<div class="form-row">
					<label for="first-name" class="form-label">First name:</label>
					<input type="text" placeholder="Example: John" id="first-name" class="form-textbox input-animate-target" required>
					<div class="input-animate"></div>
					<div class="form-check-icon"></div>
				</div>
				<div class="form-row">
					<label for="last-name" class="form-label">Last name:</label>
					<input type="text" placeholder="Example: Smith" id="last-name" class="form-textbox input-animate-target" required>
					<div class="input-animate"></div>
					<div class="form-check-icon"></div>
				</div>
				<div class="form-row">
					<label for="email-address" class="form-label">Email address:</label>
					<input type="email" placeholder="Example: [e-mail]" id="email-address" class="form-textbox input-animate-target" required>
					<div class="input-animate"></div>
					<div class="form-check-icon"></div>
				</div>
				<div>
					<input type="submit" value="Sign me up, Scotty!" class="form-submit">
				</div>
			</div>
		</form>
	</div>
</div>

// j

<script src="//use.fontawesome.com/0a5f10fda5.js"></script>

// variables
$font-stack-sans-serif: Roboto, Helvetica, Arial, sans-serif;
$font-stack-serif: "Roboto Slab", Times, "Times New Roman", serif;
$color: #333;
$inputstylecolor: mediumspringgreen;



// mixins
@mixin box-sizing {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



// resets
html, body {
	height: 100%;
	font-size: 20px;
}

html {
	@include box-sizing;
}

*, *:before, *:after {
	@include box-sizing;
}

body {
	padding: 1em;
	margin: 0;
	line-height: 1.5;
	background-color: #444;
	font-family: $font-stack-sans-serif;
	color: $color;
}


/* main ie fix */

main {
	display: block;
}


/* headers */

h1, h2, h3, h4, h5, h6 {
	line-height: 1.25;
	font-family: $font-stack-serif;
}


/* anchor links */

a {
	text-decoration: none;
	&:hover,
	&:active {
		text-decoration: underline;
	}
	&:visited {
		color: purple;
	}
}


/* form elements */

label {
	display: inline-block;
	font-weight: 700;
}

select, textarea, input {
	width: 100%;
	padding: .5em;
	margin: 0;
	font-family: $font-stack-sans-serif;
	font-weight: 400;
	font-size: 1rem;
	color: $color;
}

input[type=submit] {
	cursor: pointer;
}


/* input border bottom animation on focus */

.input-animate {
	position: relative;
	-webkit-transition: color 200ms ease-in-out;
	-o-transition: color 200ms ease-in-out;
	transition: color 200ms ease-in-out;
	&:before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		border-bottom: solid 3px;
		color: $inputstylecolor;
		-webkit-transition: width 200ms ease-in-out;
		-o-transition: width 200ms ease-in-out;
		transition: width 200ms ease-in-out;
	}
}

.input-animate-target {
	border: none;
	&:focus, &:valid {
		outline: none;
	}
	&:focus ~ .input-animate:before, &:valid ~ .input-animate:before {
		width: 100%;
	}
}


/* font awesome */

.fa {
	font-family: FontAwesome;
	font-style: normal;
}



// modules


/* flex */

.flex-cont {
	display: flex;
	align-items: center;
	height: 100%;
}


/* form */

.form-cont {
	max-width: 100%;
	padding: 2em;
	border-radius: 3px;
	margin: auto;
	background-color: #eee;
	box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .5);
}

.form-heading {
	margin-top: 0;
	text-align: center;
}

.form-row {
	position: relative;
	margin-top: 1em;
}

.form-label {
	margin-bottom: .2em;
}

.form-textbox:valid ~ .form-check-icon:after {
	content: "\f00c";
	position: absolute;
	right: .5em;
	bottom: .4em;
	font-family: FontAwesome;
	font-style: normal;
	color: $inputstylecolor;
}

.form-submit {
	display: block;
	width: 75%;
	padding: 1em;
	border: none;
	margin: 2em auto 0;
	background-color: $inputstylecolor;
	font-weight: 700;
	color: white;
	transition: opacity 200ms ease-in-out;
	&:hover, &:focus {
		opacity: .6;
	}
}



// media queries

@media only screen and (max-width:768px){
	html, body {
		font-size: 18px;
	}
}
@media only screen and (max-width:640px){
	html, body {
		font-size: 16px;
	}
}