mirror of
https://github.com/ipdb/website.git
synced 2024-11-13 16:54:50 +01:00
input group component, use for newsletter form
This commit is contained in:
parent
ea2213d171
commit
f22be5802d
@ -110,11 +110,25 @@
|
||||
margin-top: $spacer / 4;
|
||||
|
||||
input + & {
|
||||
padding-left: $spacer / 2;
|
||||
padding-right: $spacer / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
|
||||
.form__control {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Size modifiers
|
||||
//
|
||||
|
@ -1,10 +1,12 @@
|
||||
<form class="form" action="{{ config.site.forms.newsletter }}">
|
||||
<div class="form__group required">
|
||||
<label class="form__label" for="email">Your Email</label>
|
||||
<input class="form__control" type="email" id="email" name="email" required placeholder=" ">
|
||||
|
||||
<div class="input-group">
|
||||
<input class="form__control" type="email" id="email" name="email" required placeholder=" ">
|
||||
<input class="button button-primary button--small" type="submit" value="Subscribe">
|
||||
</div>
|
||||
|
||||
<span class="form__help">We will never use the contact information you submit for anything except delivering our newsletter.</span>
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<input class="button button-primary button--small" type="submit" value="Subscribe">
|
||||
</div>
|
||||
</form>
|
||||
|
@ -132,6 +132,19 @@ All `form__control` elements require an empty placeholder to make browser valida
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<br>
|
||||
|
||||
<form class="form" action="#">
|
||||
<p>Combined form control & button input group.</p>
|
||||
<div class="form__group required">
|
||||
<label class="form__label" for="email2">Your Email</label>
|
||||
<div class="input-group">
|
||||
<input class="form__control" type="email" id="email2" name="email2" required placeholder=" ">
|
||||
<input class="button button-primary button--small" type="submit" value="Subscribe">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
## Section header
|
||||
|
||||
<header class="section__header">
|
||||
|
Loading…
Reference in New Issue
Block a user