ipdb/website
1
0
Fork 0
mirror of https://github.com/ipdb/website.git synced 2024-11-22 09:36:52 +01:00
Code Releases Activity

input group component, use for newsletter form

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-08-30 18:53:46 +02:00
parent ea2213d171
commit f22be5802d
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
_src/_assets/scss/_forms.scss
View File

@ -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
//

10
_src/_includes/form-newsletter.html
View File

@ -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>

13
_src/styleguide.md
View File

@ -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">