<style>
/* Sass Document */
@import "_reset";
$font-stack:'Roboto', sans-serif;
$reset:0;
$center:center;
$full-width:100%;
$float:left;
$text-transform:capitalize;
$border-zero:0;
$color:#000;
$border:1px solid #000;
@mixin border-radius($radius){
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
border-radius:$radius;
}
@mixin transition{
-moz-transition:all 0.26s ease-out;
-webkit-transition:all 0.26s ease-out;
transition:all 0.26s ease-out;
}
body{font-family:$font-stack; padding:$reset; margin:$reset; }
h1,h2,h3,h4,h5,h6,p{margin:$reset; padding:$reset;}
fieldset{border:$border-zero;}
.message {border:1px solid #000;}
.form-sec{
h3{text-align:$center; width:$full-width; text-transform:$text-transform; padding:15px 0; font-weight:500; border-bottom:1px solid #C3C3C3; margin:0 0 20px;}
li{float:$float; width:$full-width; position:relative; margin:0 0 11px;
@at-root {
.form-sec {max-width:700px;
margin: 0 auto;
width:$full-width;
}
}
label{float:$float; width:100px; text-transform:$text-transform;}
input[type="text"]{background:#fff; float:$float; width:80%;@include transition; @include border-radius(4px); @extend .message;border-color: #c3c3c3; color:$color; text-transform:$text-transform; font:14px $font-stack; padding:7px 10px;
&:focus{@include border-radius(0); border-color:#000;@include transition;}
}
input[type="submit"]{float:$float; text-transform:$text-transform;color:#fff; cursor:pointer; background:#2daed8; @include border-radius(4px); padding:4px 10px; border:$border-zero; font-family:$font-stack;@include transition;
&:hover{background:red;@include transition;}
}
}
}
</style>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sass Test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</head>
<body>
<section id="page-wrapper">
<div class="wrapper">
<div class="form-sec">
<h3 class="text-center">Simple <small>🙂</small> web form using SCSS</h3>
<form>
<fieldset>
<ul>
<li>
<label>name</label>
<input type="text" placeholder="Your Name" />
</li>
<li>
<label>Email</label>
<input type="text" placeholder="your email address" />
</li>
<li>
<label>subject</label>
<input type="text" placeholder="business inquiry" />
</li>
<li>
<label>message</label>
<input type="text" placeholder="how can we help you ?" />
</li>
<li>
<label>send</label>
<input type="submit" value="send" />
</li>
</ul>
</fieldset>
</form>
</div>
</div>
</section>
</body>
</html>
Hello,
No comments:
Post a Comment