Skip to content

Instantly share code, notes, and snippets.

@issunboshi

issunboshi/app.css

Created February 7, 2014 10:29
Show Gist options
  • Save issunboshi/8860346 to your computer and use it in GitHub Desktop.
Save issunboshi/8860346 to your computer and use it in GitHub Desktop.
Download ZIP
Base form Sass
Raw
app.css
@import "compass/css3/transition";
*, *:before, *:after {
box-sizing: border-box;
box-sizing: -moz-border-box;
box-sizing: -webkit-border-box;
}
// General
$label_width: 125px;
$input_width: 200px; //To be used unless overridden for particular field type e.g. radio/check boxes
$form_width: 500px;
// color scheme
$color_1: black;
$color_2: grey;
$text_color: #333;
$form_bg_color: whitesmoke;
$form_border_color: #999;
%rad_chk_styles {
content: '';
display: inline-block;
width: 16px;
height: 16px;
line-height: 17px;
margin: 0 10px 0 0;
background: $color_1;
}
%checked_styles {
content: "\2022";
background-color: $color_2;
font-size: 30px;
text-align: center;
line-height: 17px;
width: 16px;
height: 16px;
margin: 0 10px 0 0;
}
%button_styles {
font-size: 15px;
width: 100px;
background: #000;
color: white;
border: 0;
border-radius: 3px;
}
// Block
.form {
max-width: $form_width;
margin: 0 auto;
background: $form_bg_color;
border: 1px solid $form_border_color;
}
// Elements
.form__label {
display: inline-block;
vertical-align: top;
margin: 10px 0;
width: 100%;
max-width: $label_width;
color: $color_1;
}
.form__section_wrapper {
border: 0;
margin: auto;
padding: 1em;
.form__header {
margin: 0;
}
}
.form__header {
padding: 0;
margin: 1em;
font-weight: normal;
font-size: 15px;
color: $color_1;
}
.form__input {
margin: 2px 0;
vertical-align: top;
width: 100%;
max-width: $input_width;
&:focus {
outline-color: $color_1;
outline-width: 3px;
@include transition(all 0.5s ease-in-out);
}
}
.form__input__textfield {
height: 30px;
margin: 0.5em 0 0.5em 0;
padding: 0.5em;
border-radius: 3px;
}
.form__input__select {
line-height: 1;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
margin: 0 0 0.5em 0;
width: 225px;
max-width: 225px;
height: 26px;
color: $color_1;
}
.form__select__container {
background: url('img/select-background.png') 0 0 no-repeat;
border-radius: 5px;
overflow: hidden;
max-width: 210px;
height: 26px;
margin: 0.5em 0 0.5em 0;
}
.form__input__chk {
width: auto;
display: inline-block;
label:before {
@extend %rad_chk_styles;
}
}
.form__chk {
&:checked + label:before {
@extend %checked_styles;
}
}
.form__input__radio {
width: auto;
display: inline-block;
label:before {
@extend %rad_chk_styles;
border-radius: 50%;
}
&:checked + label:before {
@extend %checked_styles;
}
}
.form__input__submit {
@extend %button_styles;
}
// Modifiers
.form__label--short {
max-width: 114px;
margin-right: 10px;
}
.form__input__textfield--textarea {
height: 50px;
display: inline-block;
resize: none;
}
.form__label--hidden {
display: none;
}
.form__input--hidden {
display: none;
}
Raw
form.html
{!-- <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 desktop"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 desktop"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 desktop"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js desktop"><!--<![endif]-->
<head>
<link rel="stylesheet" href="css/app.css">
<title>Sample form page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="form1_contact-response"></div>
<form data-error-message="There was a problem sending the form, please try again." data-success-message="Thank you, your form has been sent!" data-behaviour="validation" method="post" action="/contact.php" class="form-base form" id="form1_contact" novalidate="novalidate">
<h3 class="form__header">Lorem ipsum.</h3>
<fieldset class="form__section_wrapper">
<div class="input-wrapper">
<div class="form__input form__input__radio">
<input type="radio" value="Get in touch" data-placement="before" class="form__chk form__input--hidden" name="rad_type" id="form1_rad_getintouch1" checked="checked">
<label for="form1_rad_getintouch1" class="form__label form__label--short">Get in touch</label>
</div>
<div class="form__input form__input__radio">
<input type="radio" value="Request a call" data-placement="before" class="form__chk form__input--hidden" name="rad_type" id="form1_rad_getintouch2">
<label for="form1_rad_getintouch2" class="form__label form__label--short">Request a call</label>
</div>
</div>
<div class="input-wrapper">
<div class="form__input form__input__chk">
<input type="checkbox" value="Sample checkbox 1" data-placement="before" class="form__chk form__input--hidden" name="rad_type" id="form1_chk_sample1" checked="checked">
<label for="form1_chk_sample1" class="form__label form__label--short">Get in touch</label>
</div>
<div class="form__input form__input__chk">
<input type="checkbox" value="Sample checkbox 2" data-placement="before" class="form__chk form__input--hidden" name="rad_type" id="form1_chk_sample2">
<label for="form1_chk_sample2" class="form__label form__label--short">Request a call</label>
</div>
</div>
<div data-behaviour="placeholders" class="input">
<label for="form1_txt_name" class="form__label">Name*</label>
<input placeholder="Name" type="text" data-validation-message="required:Please enter your name" data-validation-attr="notlabeltext:true" class="form__input-item form__input form__input__textfield" name="txt_name" id="form1_txt_name">
</div>
<div data-behaviour="placeholders" class="input">
<label for="form1_txt_company" class="form__label">Company*</label>
<input placeholder="Company" type="text" data-validation-message="required:Please enter your name" data-validation-attr="required:true|notlabeltext:true" class="form__input-item form__input form__input__textfield" name="txt_company" id="form1_txt_company">
</div>
<div data-behaviour="placeholders" class="input">
<label for="form1_txt_email" class="form__label">Email*</label>
<input placeholder="Email" type="email" data-validation-message="required:Please enter your email address|email:Please enter a valid email address" data-validation-attr="required:true|type: email" class="form__input-item form__input form__input__textfield" name="txt_email" id="form1_txt_email">
</div>
<div data-behaviour="placeholders" class="input">
<label for="form1_txt_telephone" class="form__label">Telephone*</label>
<input placeholder="Telephone" type="tel" data-validation-message="required:Please enter your name" data-validation-attr="required:true|notlabeltext:true|type:tel" class="form__input-item form__input form__input__textfield" name="txt_telephone" id="form1_txt_telephone">
</div>
<div class="form__input additional form__input--hidden">
<label for="form1_txt_fax">Please leave blank*</label>
<input type="tel" class="form__input-item form__input form__input__textfield" name="txt_fax" id="form1_txt_fax">
</div>
<div class="input">
<label for="form1_txt_message" class="form__label">Message*</label>
<textarea placeholder="Message" data-validation-message="required:Please enter your message" data-validation-attr="required:true" class="form__input__textfield--textarea form__input" name="txt_message" id="form1_txt_message"></textarea>
</div>
<div class="form__input form__select__container">
<select class="form__input form__input__select" name="txt_select" id="form1_slt">
<option value="Technical Enquiry">Technical Enquiry</option>
<option value="Pricing">Pricing</option>
<option value="Tech Support">Tech Support</option>
<option value="Customer Service">Customer Service</option>
<option value="Press">Press</option>
<option value="Careers">Careers</option>
<option value="Other">Other</option>
</select>
</div>
<div class="input-wrapper">
<div class="form__input form__input__chk">
<input required type="checkbox" value="Sample checkbox 1" data-placement="before" class="form__chk form__input--hidden" name="rad_type" id="form1_chk_sample1b" checked="checked">
<label for="form1_chk_sample1b" class="form__label form__label--short">Get in touch</label>
</div>
<div class="form__input form__input__chk">
<input type="checkbox" value="Sample checkbox 2" data-placement="before" class="form__chk form__input--hidden" name="rad_type" id="form1_chk_sample2b">
<label for="form1_chk_sample2b" class="form__label form__label--short">Request a call</label>
</div>
</div>
<div class="input">
<label for="form1_submit_btnb" class="form__label form__label--hidden">Submit</label>
<input type="submit" value="Submit" class="input__submit transition-all" name="submit_btn" id="form1_submit_btnb">
</div>
</fieldset>
</form>
</body>
</html> --}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment