Created
December 3, 2014 04:06
-
-
Save yodasw16/7daad2361911e7afcb40 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2>Default Form</h2> | |
<form class=""> | |
<label for="email">Email</label> | |
<input class="text-input" id="email" type="email" placeholder="Email"> | |
<label for="password">Password</label> | |
<input class="text-input" id="password" type="password" placeholder="Password"> | |
<label for="state">State</label> | |
<select id="state"> | |
<option>AL</option> | |
<option>CA</option> | |
<option>IL</option> | |
</select> | |
<label for="remember" class="pure-checkbox"> | |
<input id="remember" type="checkbox"> Remember me | |
</label> | |
<button type="submit" class="pure-button pure-button-primary">Sign in</button> | |
</form> | |
<br><hr> | |
<h2>Unordered List Form</h2> | |
<form class=""> | |
<ul class="form-list"> | |
<li class="input-container"> | |
<label for="email">Email</label> | |
<input class="text-input" id="email" type="email" placeholder="Email"> | |
</li> | |
<li class="input-container"> | |
<label for="password">Password</label> | |
<input class="text-input" id="password" type="password" placeholder="Password"> | |
</li> | |
<li class="input-container"> | |
<label for="state">State</label> | |
<select id="state"> | |
<option>AL</option> | |
<option>CA</option> | |
<option>IL</option> | |
</select> | |
</li> | |
<li class="input-container"> | |
<label for="remember" class="pure-checkbox"> | |
<input id="remember" type="checkbox"> Remember me | |
</label> | |
</li> | |
</ul> | |
<button type="submit" class="pure-button pure-button-primary">Sign in</button> | |
</form> | |
<br><hr> | |
<h2>Inline Form</h2> | |
<form class="form-inline"> | |
<label for="email">Email</label> | |
<input class="text-input" id="email" type="email" placeholder="Email"> | |
<label for="password">Password</label> | |
<input class="text-input" id="password" type="password" placeholder="Password"> | |
<label for="state">State</label> | |
<select id="state"> | |
<option>AL</option> | |
<option>CA</option> | |
<option>IL</option> | |
</select> | |
<label for="remember" class="pure-checkbox"> | |
<input id="remember" type="checkbox"> Remember me | |
</label> | |
<button type="submit" class="pure-button pure-button-primary">Sign in</button> | |
</form> | |
<br><hr> | |
<h2>Multi Column Form</h2> | |
<form class=""> | |
<ul class="multi-col-list four-columns"> | |
<li class="input-container"> | |
<label for="email">Email</label> | |
<input class="text-input" id="email" type="email" placeholder="Email"> | |
</li> | |
<li class="input-container"> | |
<label for="password">Password</label> | |
<input class="text-input" id="password" type="password" placeholder="Password"> | |
</li> | |
<li class="input-container"> | |
<label for="state">State</label> | |
<select id="state"> | |
<option>AL</option> | |
<option>CA</option> | |
<option>IL</option> | |
</select> | |
</li> | |
<li class="input-container"> | |
<label for="remember" class="pure-checkbox"> | |
<input id="remember" type="checkbox"> Remember me | |
</label> | |
</li> | |
</ul> | |
<button type="submit" class="pure-button pure-button-primary">Sign in</button> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.7) | |
// Compass (v1.0.1) | |
// ---- | |
.text-input, | |
textarea, | |
[type=text], | |
[type=url], | |
[type=week], | |
[type=time], | |
[type=tel], | |
[type=search], | |
[type=password], | |
[type=number], | |
[type=month], | |
[type=email], | |
[type=datetime], | |
[type=date] { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
font-size: 100%; | |
line-height: inherit; | |
padding: 0; | |
margin: 0; | |
background: none; | |
border: 0; | |
} | |
select { | |
background-color: #fff; | |
font-size: 100%; | |
} | |
%clearfix { | |
&:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
} | |
// | |
// Multi Column List classes | |
/// | |
.multi-col-list { | |
@extend %clearfix; | |
list-style: none; | |
margin-left: 0; | |
> li { | |
float: left; | |
} | |
} | |
// | |
// This mixin allows you to change the number of columns at different | |
// breakpoints. | |
/// | |
@mixin columns($columns) { | |
@if $columns == 2 { | |
> li { | |
width: 50%; | |
} | |
} | |
@if $columns == 3 { | |
> li { | |
width: 33.333333333%; | |
} | |
} | |
@if $columns == 4 { | |
> li { | |
width: 25%; | |
} | |
} | |
@if $columns == 5 { | |
> li { | |
width: 20%; | |
} | |
} | |
@if $columns == 6 { | |
> li { | |
width: 16.666666667%; | |
} | |
} | |
} | |
// | |
// Apply these classes alongside the .multi-col-list class to | |
// set the number of columns. Placeholders are available so | |
// these widths can be extended instead. | |
/// | |
.two-columns, | |
%two-columns { | |
@include columns(2); | |
} | |
.three-columns, | |
%three-columns { | |
@include columns(3); | |
} | |
.four-columns, | |
%four-columns { | |
@include columns(4); | |
} | |
.five-columns, | |
%five-columns { | |
@include columns(5); | |
} | |
.six-columns, | |
%six-columns { | |
@include columns(6); | |
} | |
// ========================================================================== | |
// Forms | |
// ========================================================================== | |
// | |
// These are base styles for forms as well as some helpful classes to | |
// make alignment and state easier. | |
/// | |
// | |
// Scales namespace variable | |
/// | |
$scales-namespace: null !default; | |
// | |
// Available Variables | |
/// | |
$fieldset-padding: 1em !default; | |
$text-input-padding: .5em !default; | |
$text-input-border-width: 1px !default; | |
$text-input-border-style: solid !default; | |
$text-input-border-color: #000 !default; | |
$text-input-border-radius: 0 !default; | |
$input-container-margin-bottom: 1em !default; | |
// | |
// Main form styles | |
/// | |
fieldset { | |
padding: $fieldset-padding; | |
} | |
// | |
// Use when marking up a form as an unordered list. e.g. <ul class="form-list"> | |
/// | |
.form-list { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
// | |
// If you wrap your label/input groups in a container, use this class to | |
// apply a margin on the bottom for better vertical spacing control. | |
// | |
// This could be a <div> or <span> or an <li> if you are using a list | |
/// | |
.input-container { | |
margin-bottom: $input-container-margin-bottom; | |
} | |
// | |
// Labels | |
// | |
// The ".label" class can be used to make an element look like a | |
// label if an actual label isn't suitable. | |
// | |
/// | |
label, | |
.label { | |
display: block; | |
} | |
// | |
// Text inputs | |
// | |
// Instead of a `[type]` selector for each kind of form input, | |
// just use a class to target any/every one, e.g.: | |
// <input type="text" class="text-input"> | |
// <input type="email" class="text-input"> | |
// <input type="password" class="text-input"> | |
// | |
/// | |
.text-input, | |
select, | |
textarea { | |
display: block; | |
padding: $text-input-padding; | |
border: $text-input-border-width; | |
border-style: $text-input-border-style; | |
border-color: $text-input-border-color; | |
border-radius: $text-input-border-radius; | |
} | |
// | |
// Force form elements into a single inline row | |
/// | |
.form-inline { | |
.text-input, | |
select, | |
textarea, | |
label, | |
.label { | |
display: inline-block; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.text-input, | |
textarea, | |
[type=text], | |
[type=url], | |
[type=week], | |
[type=time], | |
[type=tel], | |
[type=search], | |
[type=password], | |
[type=number], | |
[type=month], | |
[type=email], | |
[type=datetime], | |
[type=date] { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
font-size: 100%; | |
line-height: inherit; | |
padding: 0; | |
margin: 0; | |
background: none; | |
border: 0; | |
} | |
select { | |
background-color: #fff; | |
font-size: 100%; | |
} | |
.multi-col-list:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
.multi-col-list { | |
list-style: none; | |
margin-left: 0; | |
} | |
.multi-col-list > li { | |
float: left; | |
} | |
.two-columns > li { | |
width: 50%; | |
} | |
.three-columns > li { | |
width: 33.333333333%; | |
} | |
.four-columns > li { | |
width: 25%; | |
} | |
.five-columns > li { | |
width: 20%; | |
} | |
.six-columns > li { | |
width: 16.666666667%; | |
} | |
fieldset { | |
padding: 1em; | |
} | |
.form-list { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
.input-container { | |
margin-bottom: 1em; | |
} | |
label, | |
.label { | |
display: block; | |
} | |
.text-input, | |
select, | |
textarea { | |
display: block; | |
padding: 0.5em; | |
border: 1px; | |
border-style: solid; | |
border-color: #000; | |
border-radius: 0; | |
} | |
.form-inline .text-input, | |
.form-inline select, | |
.form-inline textarea, | |
.form-inline label, | |
.form-inline .label { | |
display: inline-block; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2>Default Form</h2> | |
<form class=""> | |
<label for="email">Email</label> | |
<input class="text-input" id="email" type="email" placeholder="Email"> | |
<label for="password">Password</label> | |
<input class="text-input" id="password" type="password" placeholder="Password"> | |
<label for="state">State</label> | |
<select id="state"> | |
<option>AL</option> | |
<option>CA</option> | |
<option>IL</option> | |
</select> | |
<label for="remember" class="pure-checkbox"> | |
<input id="remember" type="checkbox"> Remember me | |
</label> | |
<button type="submit" class="pure-button pure-button-primary">Sign in</button> | |
</form> | |
<br><hr> | |
<h2>Unordered List Form</h2> | |
<form class=""> | |
<ul class="form-list"> | |
<li class="input-container"> | |
<label for="email">Email</label> | |
<input class="text-input" id="email" type="email" placeholder="Email"> | |
</li> | |
<li class="input-container"> | |
<label for="password">Password</label> | |
<input class="text-input" id="password" type="password" placeholder="Password"> | |
</li> | |
<li class="input-container"> | |
<label for="state">State</label> | |
<select id="state"> | |
<option>AL</option> | |
<option>CA</option> | |
<option>IL</option> | |
</select> | |
</li> | |
<li class="input-container"> | |
<label for="remember" class="pure-checkbox"> | |
<input id="remember" type="checkbox"> Remember me | |
</label> | |
</li> | |
</ul> | |
<button type="submit" class="pure-button pure-button-primary">Sign in</button> | |
</form> | |
<br><hr> | |
<h2>Inline Form</h2> | |
<form class="form-inline"> | |
<label for="email">Email</label> | |
<input class="text-input" id="email" type="email" placeholder="Email"> | |
<label for="password">Password</label> | |
<input class="text-input" id="password" type="password" placeholder="Password"> | |
<label for="state">State</label> | |
<select id="state"> | |
<option>AL</option> | |
<option>CA</option> | |
<option>IL</option> | |
</select> | |
<label for="remember" class="pure-checkbox"> | |
<input id="remember" type="checkbox"> Remember me | |
</label> | |
<button type="submit" class="pure-button pure-button-primary">Sign in</button> | |
</form> | |
<br><hr> | |
<h2>Multi Column Form</h2> | |
<form class=""> | |
<ul class="multi-col-list four-columns"> | |
<li class="input-container"> | |
<label for="email">Email</label> | |
<input class="text-input" id="email" type="email" placeholder="Email"> | |
</li> | |
<li class="input-container"> | |
<label for="password">Password</label> | |
<input class="text-input" id="password" type="password" placeholder="Password"> | |
</li> | |
<li class="input-container"> | |
<label for="state">State</label> | |
<select id="state"> | |
<option>AL</option> | |
<option>CA</option> | |
<option>IL</option> | |
</select> | |
</li> | |
<li class="input-container"> | |
<label for="remember" class="pure-checkbox"> | |
<input id="remember" type="checkbox"> Remember me | |
</label> | |
</li> | |
</ul> | |
<button type="submit" class="pure-button pure-button-primary">Sign in</button> | |
</form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment