app/views/styleguide/05 Forms/_forms.html
<section class="sg-body">
<section class="sg-example" id="5.1.1">
<h3>
<a href="#5.1.1">5.1.1</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_forms.scss</span>
<h2>Sample rowed form <code>form</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<form>
<div class="form-head">
<div class="ui-alerts">
<div class="ui-alert error">There's an error in this form.</div>
<div class="ui-alert warning">There's also a warning/highlight.</div>
</div>
</div>
<div class="form-body">
<div class="ui-form-group rowed">
<label class="form-label">
Checkboxes
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<label class="col2of6"><input type="checkbox"> Checkbox</label>
<label class="col2of6"><input type="checkbox"> Checkbox</label>
<label class="col2of6"><input type="checkbox"> Checkbox</label>
</div>
</div>
<div class="ui-form-group rowed">
<label class="form-label">
Radios
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<label class="col2of6"><input type="radio"> Radio button</label>
<label class="col2of6"><input type="radio"> Radio button</label>
<label class="col2of6"><input type="radio"> Radio button</label>
</div>
</div>
<div class="ui-form-group rowed">
<label class="form-label">
Date
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block ui-datepicker">
</div>
</div>
<div class="ui-form-group rowed">
<label class="form-label">
Text
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
<div class="ui-form-group rowed">
<label class="form-label">
Text
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small class="clear">Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
<div class="ui-form-group rowed highlight">
<label class="form-label">
Textarea
<small>Comment if needed</small>
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Personen, die zum Werk beigetragen haben, z.B. Bühnenbildner oder die Regieassistenz. Die entsprechende Funktion sollte ebenfalls genannt werden.">
<i class="icon-question"></i>
</span>
</label>
<div class="form-item">
<textarea class="block"></textarea>
</div>
</div>
<div class="ui-form-group rowed">
<label class="form-label">
Select
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<select class="block"><option>Option 1</option><option>Option 2</option></select>
</div>
</div>
<div class="ui-form-group rowed error">
<label class="form-label">
Text
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
</div>
<div class="form-footer">
<div class="ui-actions">
<a class="link weak">Secondary Action</a>
<button class="primary-button large">Primary Action</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<section class="sg-example" id="5.1.2">
<h3>
<a href="#5.1.2">5.1.2</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_forms.scss</span>
<h2>Sample columned form <code>form</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<form>
<div class="form-head">
<div class="ui-alerts">
<div class="ui-alert success">Success message for this form has been provided.</div>
</div>
</div>
<div class="form-body">
<div class="ui-form-group columned">
<label class="form-label">
Checkboxes
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<label class="col2of6"><input type="checkbox"> Checkbox</label>
<label class="col2of6"><input type="checkbox"> Checkbox</label>
<label class="col2of6"><input type="checkbox"> Checkbox</label>
</div>
</div>
<div class="ui-form-group columned">
<label class="form-label">
Radios
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<label class="col2of6"><input type="radio"> Radio button</label>
<label class="col2of6"><input type="radio"> Radio button</label>
<label class="col2of6"><input type="radio"> Radio button</label>
</div>
</div>
<div class="ui-form-group columned">
<label class="form-label">
Date
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block ui-datepicker">
</div>
</div>
<div class="ui-form-group columned">
<label class="form-label">
Text
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
<div class="ui-form-group columned">
<label class="form-label">
Textarea
<small>Comment if needed</small>
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Personen, die zum Werk beigetragen haben, z.B. Bühnenbildner oder die Regieassistenz. Die entsprechende Funktion sollte ebenfalls genannt werden.">
<i class="icon-question"></i>
</span>
</label>
<div class="form-item">
<textarea class="block"></textarea>
</div>
</div>
<div class="ui-form-group columned">
<label class="form-label">
Select
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<select class="block"><option>Option 1</option><option>Option 2</option></select>
</div>
</div>
<div class="ui-form-group columned">
<label class="form-label">
Text
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
</div>
<div class="form-footer">
<div class="ui-actions">
<a class="link weak">Secondary Action</a>
<button class="primary-button">Primary Action</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<section class="sg-example" id="5.2">
<h3>
<a href="#5.2">5.2</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-form-group.scss</span>
<h2>Form group <code>ui-form-group</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.rowed</strong>
-
Rowed form group
</li>
<li>
<strong>.columned</strong>
-
Columned
</li>
<li>
<strong>.rowed.highlight</strong>
-
Highlight variation
</li>
<li>
<strong>.rowed.error</strong>
-
Error variation
</li>
<li>
<strong>.rowed.compact</strong>
-
Compact mode
</li>
<li>
<strong>.columned.highlight</strong>
-
Highlight variation
</li>
<li>
<strong>.columned.error</strong>
-
Error variation
</li>
<li>
<strong>.columned.compact</strong>
-
Compact mode
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.rowed</span>
<div style="">
<div class="ui-form-group rowed">
<label class="form-label">
Form label
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.columned</span>
<div style="">
<div class="ui-form-group columned">
<label class="form-label">
Form label
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.rowed.highlight</span>
<div style="">
<div class="ui-form-group rowed highlight">
<label class="form-label">
Form label
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.rowed.error</span>
<div style="">
<div class="ui-form-group rowed error">
<label class="form-label">
Form label
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.rowed.compact</span>
<div style="">
<div class="ui-form-group rowed compact">
<label class="form-label">
Form label
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.columned.highlight</span>
<div style="">
<div class="ui-form-group columned highlight">
<label class="form-label">
Form label
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.columned.error</span>
<div style="">
<div class="ui-form-group columned error">
<label class="form-label">
Form label
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.columned.compact</span>
<div style="">
<div class="ui-form-group columned compact">
<label class="form-label">
Form label
<span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-placement="left" rel="tooltip" data-original-title="Tooltip Text">
<i class="icon-question"></i>
</span>
<small>Comment if needed</small>
</label>
<div class="form-item">
<input type="text" class="block">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="5.3">
<h3>
<a href="#5.3">5.3</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-search-field.scss</span>
<h2>Search input <code>.ui-search</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.large</strong>
-
Large variation
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-search $modifier-class">
<input type="text" class="block ui-search-input">
<button class="primary-button ui-search-button">Search</button>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.large</span>
<div style="">
<div class="ui-search large">
<input type="text" class="block ui-search-input">
<button class="primary-button ui-search-button">Search</button>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="5.4">
<h3>
<a href="#5.4">5.4</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_multi-select.scss</span>
<h2>Multi-select form element <code>.multi-select</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="multi-select $modifier-class">
<ul class="multi-select-holder">
<li class="multi-select-tag">
Tusche und Airbrush auf Karton <a class="multi-select-tag-remove" href="#"></a>
</li>
<li class="multi-select-tag">
Rendering <a class="multi-select-tag-remove" href="#"></a>
</li>
<li class="multi-select-input-holder">
<input type="text" class="multi-select-input">
<a class="multi-select-input-toggle" href="#"><i class="icon-arrow-down"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</section>