Created
April 14, 2020 06:28
-
-
Save marioloncarek/6ab3a13296f6a760925245c79c12fab8 to your computer and use it in GitHub Desktop.
form reset + structure
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
<form method="POST" name="contactform" action="contact-form-handler.php"> | |
<div class="row-full-width"> | |
<div class="span-6 padding-all"> | |
<fieldset> | |
<label for="NameInput">Your Name:</label> | |
<input type="text" placeholder="Name..." id="NameInput" name="name"> | |
</fieldset> | |
</div> | |
<div class="span-6 padding-all"> | |
<fieldset> | |
<label for="EmailInput">Your Email:</label> | |
<input type="email" placeholder="Email..." id="EmailInput" name="email" | |
required> | |
</fieldset> | |
</div> | |
<div class="span-6 padding-all"> | |
<fieldset> | |
<label for="DateInput">Date:</label> | |
<input type="date" id="DateInput" name="date" required> | |
</fieldset> | |
</div> | |
<div class="span-6 padding-all"> | |
<fieldset> | |
<label for="RangeInput">Range:</label> | |
<input type="range" id="RangeInput" name="range" min="0" max="100" value="50"> | |
</fieldset> | |
</div> | |
<div class="span-12 padding-all"> | |
<fieldset> | |
<label for="FileInput">File upload:</label> | |
<input type="file" id="FileInput" name="file" required> | |
</fieldset> | |
</div> | |
<div class="span-12 padding-all"> | |
<fieldset> | |
<label for="GroupedInputLabels">Label groups:</label> | |
<div class="form-group-label"> | |
<div class="form-group-label_label"> | |
<span class="add-on">Label</span> | |
</div> | |
<div class="form-group-label_input"> | |
<input type="text" placeholder="I have labels left and right..." id="GroupedInputLabels" | |
name="groupedlabels"> | |
</div> | |
<div class="form-group-label_label"> | |
<span class="add-on">Also label</span> | |
</div> | |
</div> | |
</fieldset> | |
</div> | |
<div class="span-12 padding-all"> | |
<fieldset> | |
<label for="SelectOption">Reason for contacting:</label> | |
<select id="SelectOption" name="select"> | |
<option value="Option 1">Questions</option> | |
<option value="Option 2">Admiration</option> | |
<option value="Option 3">Can I get your number?</option> | |
<optgroup label="Option Group"> | |
<option value="Option 4">Questions</option> | |
<option value="Option 5">Admiration</option> | |
<option value="Option 6">Can I get your number?</option> | |
</optgroup> | |
</select> | |
</fieldset> | |
</div> | |
<div class="span-6 padding-all"> | |
<fieldset> | |
<legend>Select Services:</legend> | |
<div> | |
<input type="checkbox" id="checkbox1"/> | |
<label for="checkbox1">Red</label> | |
</div> | |
<div> | |
<input type="checkbox" id="checkbox2" checked="checked"/> | |
<label for="checkbox2">Yellow</label> | |
</div> | |
<div> | |
<input type="checkbox" id="checkbox3" checked="checked" disabled="disabled"/> | |
<label for="checkbox3">Green</label> | |
</div> | |
<div> | |
<input type="checkbox" id="checkbox4" disabled="disabled"/> | |
<label for="checkbox4">Brown</label> | |
</div> | |
</fieldset> | |
</div> | |
<div class="span-6 padding-all"> | |
<fieldset> | |
<legend>Select Services:</legend> | |
<div> | |
<input id="radio1" name="radio" type="radio"> | |
<label for="radio1">Option 1</label> | |
</div> | |
<div> | |
<input id="radio2" name="radio" type="radio" checked="checked"> | |
<label for="radio2">Option 2</label> | |
</div> | |
<div> | |
<input id="radio3" name="radio" type="radio" disabled="disabled"> | |
<label for="radio3">Option 2</label> | |
</div> | |
</fieldset> | |
</div> | |
<div class="span-12 padding-all"> | |
<fieldset> | |
<label for="exampleMessage">Message</label> | |
<textarea rows="5" placeholder="Hi Rio..." id="exampleMessage" name="message"></textarea> | |
</fieldset> | |
</div> | |
<div class="span-12 padding-all"> | |
<fieldset> | |
<input type="submit" value="Submit" class="bg-tertiary"> | |
</fieldset> | |
</div> | |
</div> | |
</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
.form { | |
width: 100%; | |
} | |
textarea { | |
resize: none; | |
} | |
label, | |
legend { | |
display: block; | |
margin-bottom: $baseline; | |
} | |
fieldset { | |
padding: 0; | |
border-width: 0; | |
} | |
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ | |
color: $placeholder-color; | |
} | |
::-moz-placeholder { /* Firefox 19+ */ | |
color: $placeholder-color; | |
opacity: 1; | |
} | |
:-ms-input-placeholder { /* IE 10+ */ | |
color: $placeholder-color; | |
} | |
:-moz-placeholder { /* Firefox 18- */ | |
color: $placeholder-color; | |
} | |
input[type='email'], | |
input[type='number'], | |
input[type='search'], | |
input[type='text'], | |
input[type='tel'], | |
input[type='url'], | |
input[type='date'], | |
input[type='password'], | |
input[type='file'], | |
input[type='range'], | |
input[type='datetime'], | |
input[type='datetime-local'], | |
input[type='month'], | |
input[type='week'], | |
input[type='time'], | |
textarea, | |
select, | |
optgroup { | |
@include transitions; | |
padding: ($baseline/2); | |
width: 100%; | |
border: 1px solid $input-border-color; | |
background-color: $white; | |
box-shadow: none; | |
-webkit-appearance: none; | |
border-radius: 0; | |
font-family: $base-font; | |
&:focus { | |
outline: 0; | |
border: 1px solid $input-focus-color; | |
} | |
&.primary { | |
border: 1px solid $primary; | |
&:focus { | |
border: 1px solid tint($primary, 20%); | |
} | |
} | |
&.secondary { | |
border: 1px solid $secondary; | |
&:focus { | |
border: 1px solid tint($secondary, 20%); | |
} | |
} | |
&.tertiary { | |
border: 1px solid $tertiary; | |
&:focus { | |
border: 1px solid tint($tertiary, 20%); | |
} | |
} | |
&.error { | |
border: 1px solid $error; | |
&:focus { | |
border: 1px solid tint($error, 20%); | |
} | |
} | |
&.warning { | |
border: 1px solid $warning; | |
&:focus { | |
border: 1px solid tint($warning, 20%); | |
} | |
} | |
&.success { | |
border: 1px solid $success; | |
&:focus { | |
border: 1px solid tint($success, 20%); | |
} | |
} | |
&.neutral { | |
border: 1px solid $neutral; | |
&:focus { | |
border: 1px solid tint($neutral, 20%); | |
} | |
} | |
&.white { | |
border: 1px solid $white; | |
&:focus { | |
border: 1px solid tint($white, 20%); | |
} | |
} | |
} | |
input[type="file"] { | |
cursor: pointer; | |
border-radius: 0; | |
font-family: $base-font; | |
&::-webkit-file-upload-button { | |
background: $file-upload-button-background; | |
padding: .6em 2em; | |
border: 0; | |
color: $white; | |
cursor: pointer; | |
} | |
&::-ms-browse { | |
background: $file-upload-button-background; | |
padding: .6em 2em; | |
border: 0; | |
color: $white; | |
cursor: pointer; | |
float: left; | |
} | |
} | |
input[type='checkbox'], | |
input[type='radio'] { | |
position: absolute; | |
opacity: 0; | |
z-index: -1; | |
& + label { | |
position: relative; | |
display: inline-block; | |
padding-left: ($baseline*1.5); | |
cursor: pointer; | |
&:before, &:after { | |
@include transitions; | |
position: absolute; | |
top: 0; | |
left: 0; | |
display: block; | |
width: $baseline; | |
height: $baseline; | |
} | |
&:before { | |
content: ""; | |
border: 1px solid $checkbox-radio-border-color; | |
} | |
&:after { | |
transform: scale(0); | |
} | |
} | |
&:disabled { | |
& + label { | |
color: $disabled; | |
} | |
&:not(:checked), &:checked { | |
& + label { | |
&:before { | |
background-color: $disabled; | |
} | |
} | |
} | |
&:checked { | |
& + label { | |
&:after { | |
color: $disabled; | |
} | |
} | |
} | |
} | |
&:focus { | |
&:not(:checked), &:checked { | |
& + label { | |
&:before { | |
outline: 0; | |
border: 1px solid $checkbox-radio-focus-border-color; | |
} | |
} | |
} | |
} | |
} | |
input[type='checkbox'] { | |
& + label { | |
&:after { | |
content: "\2714"; | |
color: $checkbox-icon-color; | |
text-align: center; | |
line-height: 1.2; | |
top: 2px; | |
} | |
} | |
&:checked { | |
& + label { | |
&:after { | |
transform: scale(1); | |
} | |
} | |
} | |
} | |
input[type='radio'] { | |
& + label { | |
&:before { | |
border-radius: 100%; | |
} | |
&:after { | |
content: " "; | |
background: $radio-icon-color; | |
border-radius: 100%; | |
} | |
} | |
&:checked { | |
& + label { | |
&:after { | |
transform: scale(.5); | |
} | |
} | |
} | |
} | |
input[type='range'] { | |
-webkit-appearance: none; | |
display: block; | |
margin: 1em auto; | |
padding: 0 ($baseline/2); | |
width: 100%; | |
min-height: 3.25em; | |
/* IE */ | |
font-size: 1em; | |
cursor: pointer; | |
/* CHROME, OPERA, SAFARI */ | |
&::-webkit-slider-runnable-track { | |
-webkit-appearance: none; | |
height: 0.5em; | |
background: $range-slider-runnable-track-background; | |
} | |
&::-webkit-slider-thumb { | |
@include border-radius-round; | |
-webkit-appearance: none; | |
position: relative; | |
margin: -0.4em 0; | |
border: none; | |
width: 1.2em; | |
height: 1.2em; | |
background: $range-slider-thumb; | |
} | |
/* FIREFOX */ | |
&::-moz-range-track { | |
border: none; | |
height: 0.5em; | |
background: $range-slider-runnable-track-background; | |
} | |
&::-moz-range-thumb { | |
@include border-radius-round; | |
border: none; | |
width: 1.2em; | |
height: 1.2em; | |
cursor: ew-resize; | |
background: $range-slider-thumb; | |
} | |
&::-moz-range-progress { | |
background: none; | |
} | |
/* IE */ | |
&::-ms-track { | |
border: none; | |
height: 0.5em; | |
background: $range-slider-runnable-track-background; | |
color: transparent; | |
} | |
&::-ms-thumb { | |
@include border-radius-round; | |
border: none; | |
width: 1.2em; | |
height: 1.2em; | |
background: $range-slider-thumb; | |
} | |
&::-ms-fill-lower, &::-ms-fill-upper { | |
background: none; | |
} | |
&::-ms-tooltip { | |
display: none; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment