From ad0ae360d75c6fc6b4228ce4d31b2369f8465f27 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 23 Apr 2017 00:11:10 +0800 Subject: Add Form icons --- docs/elements.html | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 89 insertions(+), 4 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index 1ccbbd3..c672613 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -713,6 +713,9 @@

For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.

+
+ +
@@ -724,11 +727,11 @@
-
- -
+
+ +
@@ -740,11 +743,93 @@
+ + +

Form icons

+
+

Add a wrapper with the has-icon-left/has-icon-right class to <input> element. And add the icon with form-icon class next to the <input>.

+
+
+
+
+ + +
+
- +
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + +
<!-- form input with Spectre icon -->
+<div class="has-icon-left">
+  <input type="text" class="form-input" placeholder="..." />
+  <i class="form-icon icon icon-check"></i>
+</div>
+
+ +
+

You can use the loading class for loading or posting state.

+
+ +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
<!-- form input with loading icon -->
+<div class="has-icon-right">
+  <input type="text" class="form-input" placeholder="..." />
+  <i class="form-icon loading"></i>
+</div>
+
+

Input types

-- cgit v1.3.1-23-gd82d