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

allow to limit width on form containers

Browse Source
pull/2734/head
Jens Ulferts 10 years ago
parent 6e74704268
commit 3ca62a5d5f
2 changed files with 255 additions and 1 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. 222
      app/assets/stylesheets/content/_forms.md
  2. 34
      app/assets/stylesheets/content/_forms.sass

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

@ -494,6 +494,226 @@
</form>
```
## Forms: Width categories
The modifier classes **-middle**, **-wide**, ... can be applied to the form-[input type]-container to limit the width of the element. Please note, that this only limits the max-width of the element. The fields will become slimmer if less space is available. Also note, that the max-width is specified as an absolute value. Without a modifier, the form field will take the full width available.
```
@full-width
<form class="form">
<section class="form--section">
<h3 class="form--section-title">Input type "text-field"</h3>
<div class="form--field -required">
<label class="form--label">Tiny:</label>
<div class="form--field-container">
<div class="form--text-field-container -tiny">
<input type="text" class="form--text-field">
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">XSlim:</label>
<div class="form--field-container">
<div class="form--text-field-container -xslim">
<input type="text" class="form--text-field">
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">Slim:</label>
<div class="form--field-container">
<div class="form--text-field-container -slim">
<input type="text" class="form--text-field">
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">Middle:</label>
<div class="form--field-container">
<div class="form--text-field-container -middle">
<input type="text" class="form--text-field">
</div>
</div>
</div>
<div class="form--field">
<label class="form--label">Wide:</label>
<div class="form--field-container">
<div class="form--text-field-container -wide">
<input type="text" class="form--text-field">
</div>
</div>
</div>
<div class="form--field">
<label class="form--label">XWide:</label>
<div class="form--field-container">
<div class="form--text-field-container -xwide">
<input type="text" class="form--text-field">
</div>
</div>
</div>
<div class="form--field">
<label class="form--label">XXWide:</label>
<div class="form--field-container">
<div class="form--text-field-container -xxwide">
<input type="text" class="form--text-field">
</div>
</div>
</div>
</section>
<section class="form--section">
<h3 class="form--section-title">Input type "text-area"</h3>
<div class="form--field -required">
<label class="form--label">Tiny:</label>
<div class="form--field-container">
<div class="form--text-area-container -tiny">
<textarea type="text-area" class="form--text-area">
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">XSlim:</label>
<div class="form--field-container">
<div class="form--text-area-container -xslim">
<textarea type="text-area" class="form--text-area">
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">Slim:</label>
<div class="form--field-container">
<div class="form--text-area-container -slim">
<textarea type="text-area" class="form--text-area">
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">Middle:</label>
<div class="form--field-container">
<div class="form--text-area-container -middle">
<textarea type="text-area" class="form--text-area">
</div>
</div>
</div>
<div class="form--field">
<label class="form--label">Wide:</label>
<div class="form--field-container">
<div class="form--text-area-container -wide">
<textarea type="text-area" class="form--text-area">
</div>
</div>
</div>
<div class="form--field">
<label class="form--label">XWide:</label>
<div class="form--field-container">
<div class="form--text-area-container -xwide">
<textarea type="text-area" class="form--text-area">
</div>
</div>
</div>
<div class="form--field">
<label class="form--label">XXWide:</label>
<div class="form--field-container">
<div class="form--text-area-container -xxwide">
<textarea type="text-area" class="form--text-area">
</div>
</div>
</div>
</section>
<section class="form--section">
<h3 class="form--section-title">Input type "select"</h3>
<div class="form--field -required">
<label class="form--label">Tiny:</label>
<div class="form--field-container">
<div class="form--select-container -tiny">
<select class="form--select">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">XSlim:</label>
<div class="form--field-container">
<div class="form--select-container -xslim">
<select class="form--select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">Slim:</label>
<div class="form--field-container">
<div class="form--select-container -slim">
<select class="form--select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">Middle:</label>
<div class="form--field-container">
<div class="form--select-container -middle">
<select class="form--select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">Wide:</label>
<div class="form--field-container">
<div class="form--select-container -wide">
<select class="form--select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">XWide:</label>
<div class="form--field-container">
<div class="form--select-container -xwide">
<select class="form--select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
</div>
</div>
<div class="form--field -required">
<label class="form--label">XXWide:</label>
<div class="form--field-container">
<div class="form--select-container -xxwide">
<select class="form--select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
</div>
</div>
</section>
</form>
```
# Forms: Lists of fields
@ -605,7 +825,7 @@
```
<label>Tiny:<input type="text" class="form--text-field -tiny" value="a tiny value"></label>
<label>Small:<input type="text" class="form--text-field -small" value="a small value"></label>
<label>Small:<input type="text" class="form--text-field -slim" value="a small value"></label>
<label>Large:<input type="text" class="form--text-field -large" value="a large value"></label>
```

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

@ -346,6 +346,40 @@ fieldset.form--fieldset
.form--#{$field-type}-container
@extend %form--field-element-container
&.-tiny
max-width: 50px
&.-xslim
max-width: 110px
&.-slim
max-width: 200px
&.-middle
max-width: 350px
&.-wide
max-width: 500px
&.-xwide
max-width: 800px
&.-xxwide
max-width: 1100px
.form--select-container
&.-tiny,
&.-xslim,
&.-slim,
&.-middle,
&.-wide,
&.-xwide,
&.-xxwide
// overriding hack on select2 by another hack (select2_customizing.css)
// remove once the initial limit on the width is removed
.select2-container
max-width: initial
.form--text-field
@include input-style

Write Preview
Loading…
Cancel
Save