From be6dc3a3c9ac75e9f0a730348dd960922d7aea46 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Mon, 5 Jan 2015 16:19:56 -0800
Subject: [PATCH] Add example of using feedback icons with .input-group ; fixes
#15332
---
docs/_includes/css/forms.html | 81 +++++++++++++++++++++++++++++++++++
1 file changed, 81 insertions(+)
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index 054922703f..d3b882672a 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -701,6 +701,15 @@
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
+ <div class="form-group has-success has-feedback">
+ <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
+ </div>
</form>
</div>
{% highlight html %}
@@ -722,6 +731,15 @@
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
+<div class="form-group has-success has-feedback">
+ <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
+</div>
{% endhighlight %}
<h4>Optional icons in horizontal and inline forms</h4>
@@ -735,6 +753,17 @@
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
+ <div class="form-group has-success has-feedback">
+ <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
+ <div class="col-sm-9">
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
+ </div>
+ </div>
</form>
</div>
{% highlight html %}
@@ -747,6 +776,17 @@
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
+ <div class="form-group has-success has-feedback">
+ <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
+ <div class="col-sm-9">
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
+ </div>
+ </div>
</form>
{% endhighlight %}
@@ -759,6 +799,18 @@
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
+ <br>
+ <form class="form-inline">
+ <div class="form-group has-success has-feedback">
+ <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
+ </div>
+ </form>
</div>
{% highlight html %}
<form class="form-inline">
@@ -769,6 +821,17 @@
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
+<form class="form-inline">
+ <div class="form-group has-success has-feedback">
+ <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
+ </div>
+</form>
{% endhighlight %}
<h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
@@ -780,6 +843,15 @@
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
+ <div class="form-group has-success has-feedback">
+ <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
+ </div>
</div>
{% highlight html %}
<div class="form-group has-success has-feedback">
@@ -788,6 +860,15 @@
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
+<div class="form-group has-success has-feedback">
+ <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
+ <div class="input-group">
+ <span class="input-group-addon">@</span>
+ <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
+ </div>
+ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+ <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
+</div>
{% endhighlight %}
--
GitLab