UNPKG

causeway-standard-theme

Version:

50 lines (48 loc) 2.38 kB
<div> <a id="forms-color"></a> <header class="content-header"> <h1 class="title"> Color </h1> </header> <p>A color component allows user to select a color within the application.</p> <h3 class="title">Default</h3> <form> <div class="form-group color"> <label for="color1">Select a color: </label> <div class="input-group"> <input type="text" id="color1" class="form-control" value='#cc3333'/> <span class="color-drop"></span> <span class="add-on"><span class="color-picker"></span></span> </div> </div> <div class="form-group color"> <label for="color2">Select a color: </label> <div class="input-group"> <input type="text" id="color2" class="form-control" value='red' data-color-set='{"colors":"ffffff, ebebeb, e1e1e1, d7d7d7, cccccc, c2c2c2, b7b7b7, acacac, a0a0a0, 959595, 898989, 7d7d7d, 707070, 626262, 555555, 464646, 363636, 262626, 111111, 000000"}'/> <span class="color-drop"></span> <span class="add-on"><span class="color-picker"></span></span> </div> </div> </form> <pre><code> &lt;form&gt; &lt;div class=&quot;form-group color&quot;&gt; &lt;label for=&quot;color1&quot;&gt;Select a color: &lt;/label&gt; &lt;div class=&quot;input-group&quot;&gt; &lt;input type=&quot;text&quot; id=&quot;color1&quot; class=&quot;form-control&quot; value='#cc3333'/&gt; &lt;span class=&quot;color-drop&quot;&gt;&lt;/span&gt; &lt;span class=&quot;add-on&quot;&gt;&lt;span class=&quot;color-picker&quot;&gt;&lt;/span&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;form-group color&quot;&gt; &lt;label for=&quot;color2&quot;&gt;Select a color: &lt;/label&gt; &lt;div class=&quot;input-group&quot;&gt; &lt;input type=&quot;text&quot; id=&quot;color2&quot; class=&quot;form-control&quot; value='red' data-color-set='{&quot;colors&quot;:&quot;ffffff, ebebeb, e1e1e1, d7d7d7, cccccc, c2c2c2, b7b7b7, acacac, a0a0a0, 959595, 898989, 7d7d7d, 707070, 626262, 555555, 464646, 363636, 262626, 111111, 000000&quot;}'/&gt; &lt;span class=&quot;color-drop&quot;&gt;&lt;/span&gt; &lt;span class=&quot;add-on&quot;&gt;&lt;span class=&quot;color-picker&quot;&gt;&lt;/span&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> </div>