Merge remote-tracking branch 'upstream/master'

1 files changed, 60 insertions, 0 deletions

diff --git a/library/bootstrap-colorpicker/src/examples.html b/library/bootstrap-colorpicker/src/examples.html
new file mode 100644
index 000000000..cde7cca16
--- /dev/null
+++ b/library/bootstrap-colorpicker/src/examples.html
@@ -0,0 +1,60 @@
+<div class="col-md-6">
+    <h2>Examples</h2>
+    <div class="demo-wrapper">
+        <p>1) Attached to a field with hex format specified via options:</p>
+        <div class="well">
+            <input type="text" class="form-control demo demo-1 demo-auto" value="#5367ce" />
+            <pre class="markup">
+&lt;input type="text" class="demo1" value="#5367ce" /&gt;
+&lt;script&gt;
+    $(function(){
+        $('.demo1').colorpicker();
+    });
+&lt;/script&gt;
+            </pre>
+        </div>
+    </div>
+    <p>As a component:</p>
+    <div class="well">
+        <div class="input-group colorpicker-component demo demo-auto">
+            <input type="text" value="" class="form-control" />
+            <span class="input-group-addon"><i></i></span>
+        </div>
+            <pre class="markup">
+&lt;div class="input-group demo2"&gt;
+    &lt;input type="text" value="" class="form-control" /&gt;
+    &lt;span class="input-group-addon"&gt;&lt;i&gt;&lt;/i&gt;&lt;/span&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    $(function(){
+        $('.demo2').colorpicker();
+    });
+&lt;/script&gt;
+            </pre>
+    </div>
+    <p>Using events to work with the color:</p>
+    <div class="well">
+        <a href="#" class="btn small demo" id="demo_apidemo" data-color="rgb(255, 255, 255)">Change background color</a>
+    </div>
+    <p>Horizonal mode:</p>
+    <div class="well">
+        <input type="text" class="form-control demo" data-horizontal="true" id="demo_forceformat" value="#8fff00" >
+    </div>
+    <p>Inline mode:</p>
+    <div class="well">
+        <div id="demo_cont" class="demo demo-auto inl-bl" data-container="#demo_cont" data-color="rgba(150,216,62,0.55)" data-inline="true"></div>
+        <div class="demo demo-auto inl-bl" data-container="true" data-color="rgb(50,216,62)" data-inline="true"></div>
+    </div>
+    <p>Enabled / disabled</p>
+    <div class="well">
+        <div id="demo_endis" class="input-group demo demo-auto colorpicker-component">
+            <input disabled type="text" value="" class="form-control" />
+            <span class="input-group-addon"><i></i></span>
+        </div>
+        <br>
+        <a class="btn btn-sm btn-default enable-button" href="#">Enable</a>
+        <a class="btn btn-sm btn-default disable-button" href="#">Disable</a>
+    </div>
+    <a class="btn btn-default demo-destroy" href="#"><i class="glyphicon glyphicon-remove"></i> Destroy plugin instances</a>
+    <a class="btn btn-default demo-create" href="#"><i class="glyphicon glyphicon-plus"></i> Create instances again</a>
+</div>
\ No newline at end of file