Hark template v2 - forms

by PhilQ

HTML

<div class="test">
	<input type="text" name="" value="XxxxxXXxx" />
</div>
<div class="test">
	<input type="password" name="" value="XxxxxXXxx" />
</div>
<div class="test">
	<textarea>XxxxxXXxx</textarea>
</div>
<div class="test">
	<select name="sel">
		<option value="val1">Option 1</option>
		<option value="val2">Option 2</option>
		<option value="val3">Option 3</option>
	</select>
</div>
<div class="test">
	<input type="radio" id="rad1" name="r" value="1" /><label for="rad1">Radio button 1</label>
	<input type="radio" id="rad2" name="r" value="2" /><label for="rad2">Radio button 2</label>
	<input type="radio" id="rad3" name="r" value="3" /><label for="rad3">Radio button 3</label>
	<input type="radio" id="rad4" name="r" value="4" /><label for="rad4">Radio button 4</label>
</div>
<div class="test">
	<input type="checkbox" id="check1" name="c" value="1" /><label for="check1">Checkbox 1</label>
	<input type="checkbox" id="check2" name="c" value="2" /><label for="check2">Checkbox 2</label>
	<input type="checkbox" id="check3" name="c" value="3" /><label for="check3">Checkbox 3</label>
	<input type="checkbox" id="check4" name="c" value="4" /><label for="check4">Checkbox 4</label>
</div>
<div class="test">
	<input type="radio" class="vertical" id="radb1" name="rb" value="1" /><label for="radb1">Radio button 1</label>
	<input type="radio" class="vertical" id="radb2" name="rb" value="2" /><label for="radb2">Radio button 2</label>
	<input type="radio" class="vertical" id="radb3" name="rb" value="3" /><label for="radb3">Radio button 3</label>
</div>
<div class="test">
	<input type="checkbox" class="vertical" id="checkb1" name="cb" value="1" /><label for="checkb1">Checkbox 1</label>
	<input type="checkbox" class="vertical" id="checkb2" name="cb" value="2" /><label for="checkb2">Checkbox 2</label>
	<input type="checkbox" class="vertical" id="checkb3" name="cb" value="3" /><label for="checkb3">Checkbox 3</label>
</div>
<div class="test">
	<input type="button" name=""...

SCSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&subset=latin-ext);
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }

$md-depth-1: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
$md-depth-2: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
$md-depth-3: rgba(0, 0, 0, 0.188235) 0px 10px 30px, rgba(0, 0, 0, 0.227451) 0px 6px 10px;
$md-depth-4: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;
$md-depth-5: rgba(0, 0, 0, 0.298039) 0px 19px 60px, rgba(0, 0, 0, 0.219608) 0px 15px 20px;

.test {
	display: block;
	width: 300px;
	margin: 20px auto 0px;
}

$dark-blue: #13063B;
$blue: #260A66;
$light-blue: #7FA2BA;
$bordeaux: #8C001C;
$light-bordeaux: #E8C5CC;
$green: #0A6621;

body {
	font-family: 'Roboto', sans-serif;
	background-color: #FAFAFA; //#f2f2f2; //f8f8f8;
  color: rgba(0,0,0, 0.87);
}

.hide {
	position: absolute;
	z-index: -1;
	opacity: 0;
	visiblity: hidden;
	pointer-events: none;
}

$input-normal-border: 0px;
$input-hover-border: 0px;
$input-focus-border: 0px;

$input-normal-color: #3F51B5; //$dark-blue; //rgba(0,0,0, 0.6);
$input-hover-color: #2196F3; //$blue; //rgba(0,0,0, 0.8);
$input-focus-color: #2196F3; //$bordeaux; //rgba(0,0,0, 1);

$input-normal-bgcolor: #fff; //#e6e6e6;
$input-hover-bgcolor: #fff; //#eee;
$input-focus-bgcolor: #fff; //#fff;

$input-normal-boxshadow: inset 0px 1px 2px 0px rgba(0,0,0, 0.2);
$input-hover-boxshadow: inset 0px 1px 2px 0px rgba(0,0,0, 0.2);
$input-focus-boxshadow: $md-depth-1;

input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
	display: inline-block;
	width: 100%;
	min-height: 40px;
	font-family: 'Roboto', sans-serif;
	// font-size: 18px;
  font-size: 1rem;
	padding-left: 10px;
	border: $input-normal-border;
	//...