Skip to content

Instantly share code, notes, and snippets.

/index.html
Created Jan 5, 2017

Embed
What would you like to do?
nice forms // source http://jsbin.com/yutabo
<style id="jsbin-css">
.form {
font-size: 1em;
color: #4C4C35;
box-sizing: border-box;
}
.form, .form * {
box-sizing: border-box;
}
/* clearfix */
.form:before,
.form:after {
content: ' ';
display: table;
}
.form:after {
clear: both;
}
.form fieldset {
padding: 0;
border: none;
background: none;
margin: 0;
}
.form input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #F7F7F7 inset;
}
.form.submitting input[type="submit"] {
pointer-events: none;
color: #C7C7C7;
background: #ebebeb;
border: 1px solid #C7C7C7;
}
.form.submitting .focused {
z-index: 0;
}
.form fieldset + fieldset {
margin-top: 1em;
}
.form label.form-label {
display: block;
border-top: 0.0625em solid #E1E0E3; /* 1/16 */
border-left: 0.0625em solid #E1E0E3; /* 1/16 */
background-color: white;
padding: 2.1em .8em .8em .8em;
position: relative;
float: left;
width: 100%;
/* border-collapse trick */
box-shadow:
1px 0 0 0 #E1E0E3,
0 1px 0 0 #E1E0E3,
1px 1px 0 0 #E1E0E3; /* Just to fix the corner */
}
.form .form-label > i {
position: absolute;
right: 10px;
top: 10px;
color: #E1E0E3;
}
.form label.form-label[valid]:after,
.form label.form-label.focused:after,
.form label.form-label[invalid]:after {
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}
.form label.form-label[valid]:after {
outline: 1px solid #6CCC50;
z-index: 1;
}
.form label.form-label[valid] .label,
.form label.form-label[valid] i {
color: #6CCC50;
}
.form label.form-label[invalid]:after {
outline: 1px solid #FF654E;
z-index: 2;
}
.form label.form-label[invalid] .label,
.form label.form-label[invalid] i {
color: #FF654E;
}
.form label.form-label.focused:after {
outline: 1px solid #00A0FF;
z-index: 3;
}
.form label.form-label.focused .label,
.form label.form-label.focused i {
color: #00A0FF;
}
.form .label {
position: absolute;
top: 1.075em;
left: 1.3em;
font-size: 0.7em;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'efra', 'Helvetica Neue', Helvetica, sans-serif;
}
.form input[type=text],
.form input[type=password],
.form textarea {
outline: none;
background: none;
width: 100%;
font-size: 1em;
letter-spacing: 1px;
position: relative;
border: 1px solid #EBEBEB;
}
.form label input[type=text],
.form label input[type=password],
.form label textarea {
height: 1.8em;
border: none;
font-family: 'San Francisco', 'Helvetica Neue', Helvetica;
}
.form .form-label[checkbox] {
padding: .8em;
padding-left: 2.75em;
user-select: none;
}
.form input[type='checkbox'] {
display: none;
}
.form .checkmark-label {
vertical-align: middle;
position: relative;
font-size: .85em;
}
.form .checkmark-visible {
margin-left: -2.125em;
float: left;
position: relative;
width: 1.5em;
height: 1.5em;
border: 2px solid #E1E0E3;
border-radius: 50%;
}
.checkmark-visible:before {
content: '';
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: -3px 0 0 -5px;
height: 3px;
width: 9px;
border: solid #00A0FF;
border-width: 0 0 2px 2px;
transform: rotate(-45deg);
}
.form input[type='checkbox']:checked ~ .checkmark-visible {
border-color: #00A0FF;
}
.form input[type='checkbox']:checked ~ .checkmark-visible:before {
display: block;
}
.form .form-label[checkbox] {
padding-top: .625em;
padding-bottom: .625em;
}
.form .form-label[disabled] {
cursor: not-allowed;
}
.form .form-label[disabled]:after {
display: none;
}
.form .form-label[disabled] .label,
.form .form-label[disabled] i {
color: #E1E0E3 !important;
}
.form .form-label[disabled] input,
.form .form-label[disabled] textarea {
cursor: not-allowed;
resize: none;
}
.form .form-label[checkbox][disabled] .checkmark-visible,
.form .form-label[checkbox][disabled] .checkmark-label {
color: #E1E0E3;
border-color: #FAFAFA;
}
.form textarea {
min-height: 6.25em;
resize: vertical;
}
.form .form-label.focused > i {
color: #00A0FF;
}
.form input::placeholder,
.form textarea::placeholder {
font-weight: 200;
color: #c8c8c8;
}
/**
* App specific
*/
.icon-markdown {
display: block;
padding: 10px;
background: whiteSmoke;
position: absolute;
top: 10px;
right: 10px;
}
/**
* Positioning (with lemonade)
*/
.form .bit-75 {
display: inline-block;
width: 75%;
float: left;
}
.form .bit-25 {
display: inline-block;
width: 25%;
float: left;
}
/**
* Validation Errors
*/
.form .validation-error-list {
list-style-type: none;
}
.form .validation-error {
border-bottom: 1px white solid;
margin-right: -1px;
}
.form .validation-error h3 {
text-align: left;
color: white;
background: #FF6447;
line-height: 1.5;
padding: 5px 20px;
}
.form .validation-message {
font-weight: 300;
}
.Task-Create-container {
max-width: 500px;
width: 100%;
margin: 50px auto;
padding: 0 20px;
}
.Task-Create-create-button {
margin-top: 40px;
float: right;
}
.search-results-list li:first-of-type {
padding-top: 80px;
}
.Task-Create-undecided > label[disabled] {
display: block;
}
.Task-Create-undecided > label {
display: block;
}
.Task-Create-undecided-checkbox:checked ~ .Task-Create-undecided-note {
display: block;
}
.Task-Create-undecided-note {
display: none;
padding-top: 5px;
font-size: .85em;
/*color: #f7ba00;*/
color: #00A0FF
}
</style>
<meta name="description" content="nice forms">
<form class="form Task-Create-form" action="/tasks" method="post" id="task-create-form">
<div class="validation-errors"></div>
<fieldset>
<h3>What do you need done?</h3>
<div class="bit-75">
<label validate="validate" class="form-label"><span class="label">Task title</span>
<input name="title" placeholder="I need a jQuery autocomplete plugin" class="Task-Create-title" type="text"/><span class="validation"></span>
</label>
</div>
<div class="bit-25">
<label validate="validate" class="form-label"><span class="label">Amount</span><i class="gt usd"></i>
<input name="price" placeholder="150" type="text"/><span class="validation"></span>
</label>
</div>
</fieldset>
<fieldset>
<h3>How should it be done?</h3>
<label validate="validate" class="form-label"><span class="label">Task description</span><i class="gt markdown"></i>
<textarea name="description" placeholder="description..."></textarea>
</label>
</fieldset>
<fieldset>
<h3>What library does it use?</h3>
<div class="Task-Create-repositories">
<label validate="validate" class="form-label"><span class="label">github repository</span><i class="gt github"></i>
<input name="repositories" placeholder="jquery/jquery" id="task-create-repo" autocomplete="off" class="Task-Create-repository-input" type="text"/><span class="validation"></span>
</label>
<ul id="search-results"></ul>
</div>
<div class="Task-Create-undecided">
<label validate="validate" checkbox="checkbox" class="form-label">
<input name="undecided" class="Task-Create-undecided-checkbox" type="checkbox"/><span class="checkmark-visible"></span><span class="checkmark-label">I'm not sure, let the applicant suggest a repository for me.</span>
<div class="Task-Create-undecided-note">Note: this may make your task harder to find</div>
</label>
</div>
</fieldset>
<button Create Task="Create Task" type="submit" class="Task-Create-create-button success"></button>
</form>
<script id="jsbin-source-html" type="text/html"><meta name="description" content="nice forms">
//- TODO: Classes should be top-level, the rest of the attributes
//- should be passed to the input.
mixin form()
- var method = attributes.method && attributes.method.toLowerCase()
- method = method && method != 'post' && method != 'get' && method
- attributes.method = method ? 'post' : attributes.method
form.form&attributes(attributes)
.validation-errors
if (csrf && attributes.method != 'get')
input(type='hidden', name='_csrf', value= csrf)
if (method)
input(type='hidden', name='_method', value= method)
block
mixin form-input(label)
- attributes.type = attributes.type || 'text';
label.form-label(disabled=attributes.disabled validate=attributes.validate)
span.label= label
block
- attributes.validate = null;
input&attributes(attributes)
span.validation
mixin form-textarea(label)
label.form-label(disabled=attributes.disabled validate=attributes.validate)
span.label= label
i.gt.markdown
- attributes.validate = null;
textarea&attributes(attributes)!= attributes.value && attributes.value.trim()
mixin form-checkbox(label)
- attributes.type = 'checkbox'
label.form-label(disabled=attributes.disabled validate=attributes.validate checkbox)
- attributes.validate = null;
input&attributes(attributes)
span.checkmark-visible
span.checkmark-label= label
block
mixin form-errors(errors)
ul.validation-error-list
each error in errors
li.validation-error
h3
span.validation-field= error.field
span.validation-message= error.message
+form.Task-Create-form(action='/tasks', method='post' id='task-create-form')
//- Task Title & Amount
fieldset
h3 What do you need done?
.bit-75
+form-input('Task title')(
name = 'title'
placeholder = 'I need a jQuery autocomplete plugin'
validate
).Task-Create-title
.bit-25
+form-input('Amount')(name = 'price', placeholder ='150' validate)
i.gt.usd
//- Task description
fieldset
h3 How should it be done?
+form-textarea('Task description')(
name = 'description'
placeholder='description...'
validate
) We need a jQuery plugin for an autocomplete component
//- Choose a repository
fieldset
h3 What library does it use?
.Task-Create-repositories
+form-input('github repository')(
name='repositories'
placeholder='jquery/jquery'
id='task-create-repo'
autocomplete='off'
validate
).Task-Create-repository-input
i.gt.github
ul#search-results
//- Cannot Decide
.Task-Create-undecided
+form-checkbox('I\'m not sure, let the applicant suggest a repository for me.')(
name = 'undecided'
checked = false
validate
).Task-Create-undecided-checkbox
.Task-Create-undecided-note Note: this may make your task harder to find
button('Create Task')(type='submit').Task-Create-create-button.success</script>
<script id="jsbin-source-css" type="text/css">.form {
font-size: 1em;
color: #4C4C35;
box-sizing: border-box;
}
.form, .form * {
box-sizing: border-box;
}
/* clearfix */
.form:before,
.form:after {
content: ' ';
display: table;
}
.form:after {
clear: both;
}
.form fieldset {
padding: 0;
border: none;
background: none;
margin: 0;
}
.form input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #F7F7F7 inset;
}
.form.submitting input[type="submit"] {
pointer-events: none;
color: #C7C7C7;
background: #ebebeb;
border: 1px solid #C7C7C7;
}
.form.submitting .focused {
z-index: 0;
}
.form fieldset + fieldset {
margin-top: 1em;
}
.form label.form-label {
display: block;
border-top: 0.0625em solid #E1E0E3; /* 1/16 */
border-left: 0.0625em solid #E1E0E3; /* 1/16 */
background-color: white;
padding: 2.1em .8em .8em .8em;
position: relative;
float: left;
width: 100%;
/* border-collapse trick */
box-shadow:
1px 0 0 0 #E1E0E3,
0 1px 0 0 #E1E0E3,
1px 1px 0 0 #E1E0E3; /* Just to fix the corner */
}
.form .form-label > i {
position: absolute;
right: 10px;
top: 10px;
color: #E1E0E3;
}
.form label.form-label[valid]:after,
.form label.form-label.focused:after,
.form label.form-label[invalid]:after {
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}
.form label.form-label[valid]:after {
outline: 1px solid #6CCC50;
z-index: 1;
}
.form label.form-label[valid] .label,
.form label.form-label[valid] i {
color: #6CCC50;
}
.form label.form-label[invalid]:after {
outline: 1px solid #FF654E;
z-index: 2;
}
.form label.form-label[invalid] .label,
.form label.form-label[invalid] i {
color: #FF654E;
}
.form label.form-label.focused:after {
outline: 1px solid #00A0FF;
z-index: 3;
}
.form label.form-label.focused .label,
.form label.form-label.focused i {
color: #00A0FF;
}
.form .label {
position: absolute;
top: 1.075em;
left: 1.3em;
font-size: 0.7em;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'efra', 'Helvetica Neue', Helvetica, sans-serif;
}
.form input[type=text],
.form input[type=password],
.form textarea {
outline: none;
background: none;
width: 100%;
font-size: 1em;
letter-spacing: 1px;
position: relative;
border: 1px solid #EBEBEB;
}
.form label input[type=text],
.form label input[type=password],
.form label textarea {
height: 1.8em;
border: none;
font-family: 'San Francisco', 'Helvetica Neue', Helvetica;
}
.form .form-label[checkbox] {
padding: .8em;
padding-left: 2.75em;
user-select: none;
}
.form input[type='checkbox'] {
display: none;
}
.form .checkmark-label {
vertical-align: middle;
position: relative;
font-size: .85em;
}
.form .checkmark-visible {
margin-left: -2.125em;
float: left;
position: relative;
width: 1.5em;
height: 1.5em;
border: 2px solid #E1E0E3;
border-radius: 50%;
}
.checkmark-visible:before {
content: '';
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: -3px 0 0 -5px;
height: 3px;
width: 9px;
border: solid #00A0FF;
border-width: 0 0 2px 2px;
transform: rotate(-45deg);
}
.form input[type='checkbox']:checked ~ .checkmark-visible {
border-color: #00A0FF;
}
.form input[type='checkbox']:checked ~ .checkmark-visible:before {
display: block;
}
.form .form-label[checkbox] {
padding-top: .625em;
padding-bottom: .625em;
}
.form .form-label[disabled] {
cursor: not-allowed;
}
.form .form-label[disabled]:after {
display: none;
}
.form .form-label[disabled] .label,
.form .form-label[disabled] i {
color: #E1E0E3 !important;
}
.form .form-label[disabled] input,
.form .form-label[disabled] textarea {
cursor: not-allowed;
resize: none;
}
.form .form-label[checkbox][disabled] .checkmark-visible,
.form .form-label[checkbox][disabled] .checkmark-label {
color: #E1E0E3;
border-color: #FAFAFA;
}
.form textarea {
min-height: 6.25em;
resize: vertical;
}
.form .form-label.focused > i {
color: #00A0FF;
}
.form input::placeholder,
.form textarea::placeholder {
font-weight: 200;
color: #c8c8c8;
}
/**
* App specific
*/
.icon-markdown {
display: block;
padding: 10px;
background: whiteSmoke;
position: absolute;
top: 10px;
right: 10px;
}
/**
* Positioning (with lemonade)
*/
.form .bit-75 {
display: inline-block;
width: 75%;
float: left;
}
.form .bit-25 {
display: inline-block;
width: 25%;
float: left;
}
/**
* Validation Errors
*/
.form .validation-error-list {
list-style-type: none;
}
.form .validation-error {
border-bottom: 1px white solid;
margin-right: -1px;
}
.form .validation-error h3 {
text-align: left;
color: white;
background: #FF6447;
line-height: 1.5;
padding: 5px 20px;
}
.form .validation-message {
font-weight: 300;
}
.Task-Create-container {
max-width: 500px;
width: 100%;
margin: 50px auto;
padding: 0 20px;
}
.Task-Create-create-button {
margin-top: 40px;
float: right;
}
.search-results-list li:first-of-type {
padding-top: 80px;
}
.Task-Create-undecided > label[disabled] {
display: block;
}
.Task-Create-undecided > label {
display: block;
}
.Task-Create-undecided-checkbox:checked ~ .Task-Create-undecided-note {
display: block;
}
.Task-Create-undecided-note {
display: none;
padding-top: 5px;
font-size: .85em;
/*color: #f7ba00;*/
color: #00A0FF
}</script>
.form {
font-size: 1em;
color: #4C4C35;
box-sizing: border-box;
}
.form, .form * {
box-sizing: border-box;
}
/* clearfix */
.form:before,
.form:after {
content: ' ';
display: table;
}
.form:after {
clear: both;
}
.form fieldset {
padding: 0;
border: none;
background: none;
margin: 0;
}
.form input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #F7F7F7 inset;
}
.form.submitting input[type="submit"] {
pointer-events: none;
color: #C7C7C7;
background: #ebebeb;
border: 1px solid #C7C7C7;
}
.form.submitting .focused {
z-index: 0;
}
.form fieldset + fieldset {
margin-top: 1em;
}
.form label.form-label {
display: block;
border-top: 0.0625em solid #E1E0E3; /* 1/16 */
border-left: 0.0625em solid #E1E0E3; /* 1/16 */
background-color: white;
padding: 2.1em .8em .8em .8em;
position: relative;
float: left;
width: 100%;
/* border-collapse trick */
box-shadow:
1px 0 0 0 #E1E0E3,
0 1px 0 0 #E1E0E3,
1px 1px 0 0 #E1E0E3; /* Just to fix the corner */
}
.form .form-label > i {
position: absolute;
right: 10px;
top: 10px;
color: #E1E0E3;
}
.form label.form-label[valid]:after,
.form label.form-label.focused:after,
.form label.form-label[invalid]:after {
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}
.form label.form-label[valid]:after {
outline: 1px solid #6CCC50;
z-index: 1;
}
.form label.form-label[valid] .label,
.form label.form-label[valid] i {
color: #6CCC50;
}
.form label.form-label[invalid]:after {
outline: 1px solid #FF654E;
z-index: 2;
}
.form label.form-label[invalid] .label,
.form label.form-label[invalid] i {
color: #FF654E;
}
.form label.form-label.focused:after {
outline: 1px solid #00A0FF;
z-index: 3;
}
.form label.form-label.focused .label,
.form label.form-label.focused i {
color: #00A0FF;
}
.form .label {
position: absolute;
top: 1.075em;
left: 1.3em;
font-size: 0.7em;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'efra', 'Helvetica Neue', Helvetica, sans-serif;
}
.form input[type=text],
.form input[type=password],
.form textarea {
outline: none;
background: none;
width: 100%;
font-size: 1em;
letter-spacing: 1px;
position: relative;
border: 1px solid #EBEBEB;
}
.form label input[type=text],
.form label input[type=password],
.form label textarea {
height: 1.8em;
border: none;
font-family: 'San Francisco', 'Helvetica Neue', Helvetica;
}
.form .form-label[checkbox] {
padding: .8em;
padding-left: 2.75em;
user-select: none;
}
.form input[type='checkbox'] {
display: none;
}
.form .checkmark-label {
vertical-align: middle;
position: relative;
font-size: .85em;
}
.form .checkmark-visible {
margin-left: -2.125em;
float: left;
position: relative;
width: 1.5em;
height: 1.5em;
border: 2px solid #E1E0E3;
border-radius: 50%;
}
.checkmark-visible:before {
content: '';
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: -3px 0 0 -5px;
height: 3px;
width: 9px;
border: solid #00A0FF;
border-width: 0 0 2px 2px;
transform: rotate(-45deg);
}
.form input[type='checkbox']:checked ~ .checkmark-visible {
border-color: #00A0FF;
}
.form input[type='checkbox']:checked ~ .checkmark-visible:before {
display: block;
}
.form .form-label[checkbox] {
padding-top: .625em;
padding-bottom: .625em;
}
.form .form-label[disabled] {
cursor: not-allowed;
}
.form .form-label[disabled]:after {
display: none;
}
.form .form-label[disabled] .label,
.form .form-label[disabled] i {
color: #E1E0E3 !important;
}
.form .form-label[disabled] input,
.form .form-label[disabled] textarea {
cursor: not-allowed;
resize: none;
}
.form .form-label[checkbox][disabled] .checkmark-visible,
.form .form-label[checkbox][disabled] .checkmark-label {
color: #E1E0E3;
border-color: #FAFAFA;
}
.form textarea {
min-height: 6.25em;
resize: vertical;
}
.form .form-label.focused > i {
color: #00A0FF;
}
.form input::placeholder,
.form textarea::placeholder {
font-weight: 200;
color: #c8c8c8;
}
/**
* App specific
*/
.icon-markdown {
display: block;
padding: 10px;
background: whiteSmoke;
position: absolute;
top: 10px;
right: 10px;
}
/**
* Positioning (with lemonade)
*/
.form .bit-75 {
display: inline-block;
width: 75%;
float: left;
}
.form .bit-25 {
display: inline-block;
width: 25%;
float: left;
}
/**
* Validation Errors
*/
.form .validation-error-list {
list-style-type: none;
}
.form .validation-error {
border-bottom: 1px white solid;
margin-right: -1px;
}
.form .validation-error h3 {
text-align: left;
color: white;
background: #FF6447;
line-height: 1.5;
padding: 5px 20px;
}
.form .validation-message {
font-weight: 300;
}
.Task-Create-container {
max-width: 500px;
width: 100%;
margin: 50px auto;
padding: 0 20px;
}
.Task-Create-create-button {
margin-top: 40px;
float: right;
}
.search-results-list li:first-of-type {
padding-top: 80px;
}
.Task-Create-undecided > label[disabled] {
display: block;
}
.Task-Create-undecided > label {
display: block;
}
.Task-Create-undecided-checkbox:checked ~ .Task-Create-undecided-note {
display: block;
}
.Task-Create-undecided-note {
display: none;
padding-top: 5px;
font-size: .85em;
/*color: #f7ba00;*/
color: #00A0FF
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.