TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add, document support for multiple fields per row

Browse Source 
This change necessitates an additional container element in the DOM
hierarchy.

Signed-off-by: Alex Coles <alex@alexbcoles.com>
pull/2612/head
Alex Coles 10 years ago
parent 80ca9a6258
commit 2c3bccc1c5
2 changed files with 107 additions and 19 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 80
      app/assets/stylesheets/content/_forms.md
  2. 10
      app/assets/stylesheets/content/_forms.sass

80
app/assets/stylesheets/content/_forms.md
Unescape View File

@ -17,8 +17,10 @@
<div class="form--field -required">
<label class="form--label">Text:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<input type="text" class="form--text-field">
</div>
</div>
<div class="form--field-instructions">
Write anything you like.
</div>
@ -26,8 +28,10 @@
<div class="form--field">
<label class="form--label">Email:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<input type="email" class="form--text-field" placeholder="a valid email">
</div>
</div>
<div class="form--field-extra-actions">
<a href="#">Request new email</a>
</div>
@ -35,8 +39,10 @@
<div class="form--field -required">
<label class="form--label">Number:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<input type="number" class="form--text-field">
</div>
</div>
<div class="form--field-instructions">
Any number from 1 to 10!
</div>
@ -44,8 +50,10 @@
<div class="form--field -required">
<label class="form--label">Long text:</label>
<div class="form--field-container">
<div class="form--text-area-container">
<textarea class="form--text-area">El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino.</textarea>
</div>
</div>
<div class="form--field-instructions">
Write more about anything.
</div>
@ -62,14 +70,18 @@
<div class="form--field -required">
<label class="form--label">Text:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<input type="text" class="form--text-field">
</div>
</div>
</div>
<div class="form--field">
<label class="form--label">Email:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<input type="email" class="form--text-field" placeholder="a valid email">
</div>
</div>
<div class="form--field-instructions">
Your personal email address.
</div>
@ -77,8 +89,10 @@
<div class="form--field -required">
<label class="form--label">Number:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<input type="number" class="form--text-field">
</div>
</div>
<div class="form--field-instructions">
Any number from 1 to 10!
</div>
@ -86,8 +100,10 @@
<div class="form--field -required">
<label class="form--label">Long text:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<textarea class="form--text-area">El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino.</textarea>
</div>
</div>
<div class="form--field-instructions">
Write more about anything.
</div>
@ -95,6 +111,66 @@
</form>
```
## Forms: Multiple fields per row
```
@full-width
<form class="form">
<div class="form--field -required">
<label class="form--label">Lieblingsstädte:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<input type="text" class="form--text-field" value="Leipzig">
</div>
<div class="form--text-field-container">
<input type="text" class="form--text-field" placeholder="Berlin">
</div>
<div class="form--text-field-container">
<input type="text" class="form--text-field" placeholder="Zürich">
</div>
<div class="form--text-field-container">
<input type="text" class="form--text-field" placeholder="Paris">
</div>
<div class="form--text-field-container">
<input type="text" class="form--text-field" placeholder="Rom">
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">Geburtsdatum:</label>
<div class="form--field-container">
<div class="form--select-container">
<select class="form--select">
<option>01</option><option>02</option><option>03</option>
</select>
</div>
<div class="form--select-container">
<select class="form--select">
<option>Januar</option>
<option selected>Februar</option>
<option>März</option>
<option>April</option>
<option>Mai</option>
<option>Juni</option>
<option>Juli</option>
<option>August</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Dezember</option>
</select>
</div>
<div class="form--text-field-container">
<input type="number" class="form--text-field" placeholder="1984">
</div>
</div>
<div class="form--field-instructions">
One never lies about one's age.
</div>
</div>
</form>
```
# Forms: Text fields
@ -219,12 +295,14 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
<div class="form--field">
<label class="form--label">Oranges:</label>
<div class="form--field-container">
<div class="form--select-container">
<select class="form--select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
</div>
<div class="form--field-instructions">
Oranges are rich in Vitamin C. Eat more than two!
</div>
@ -232,6 +310,7 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
<div class="form--field">
<label class="form--label">Apples:</label>
<div class="form--field-container">
<div class="form--select-container">
<select class="form--select" multiple>
<option>one</option>
<option>two</option>
@ -239,6 +318,7 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
</select>
</div>
</div>
</div>
</form>
```

10
app/assets/stylesheets/content/_forms.sass
Unescape View File

@ -188,7 +188,8 @@ fieldset
color: smartscale(#008BD0, 30%)
.form--field-container
@include grid-content(10)
@include grid-content(8)
display: flex
.form.-wide-labels &
@include grid-size(8)
@ -209,6 +210,13 @@ fieldset
.form--field-extra-actions
@extend %form--field-after-container
.form--text-field-container,
.form--text-area-container,
.form--select-container
display: block
padding-right: $block-padding
flex: 1 1
.form--text-field
@include input-style

Write Preview
Loading…
Cancel
Save