1<div class="buttons"> 2 <h2>Buttons</h2> 3 <div class="row"> 4 <div class="col-sm-8 col-md-9"> 5 <button type="button" class="btn btn-primary btn-sm">Primary</button> 6 <button type="button" class="btn btn-primary">Primary</button> 7 <button type="button" class="btn btn-primary btn-lg">Primary</button> 8 <button type="button" class="btn btn-primary disabled">Primary</button> 9 </div> 10 <div class="col-sm-4 col-md-3"> 11 <div class="input"> 12 <p class="picker" data-selector=".btn-primary" data-element="background-color"> 13 <label for="tc-btn-primary-bg-color">Background:</label> 14 <input id="tc-btn-primary-bg-color" data-selector=".btn-primary" data-element="background-color" data-var="@btn-primary-bg" type="text"> 15 <span class="input-group-addon"><i></i></span> 16 </p> 17 <p class="picker" data-selector=".btn-primary" data-element="border-color"> 18 <label for="tc-btn-primary-border-color">Border:</label> 19 <input id="tc-btn-primary-border-color" data-selector=".btn-primary" data-element="border-color" data-var="@btn-primary-border" type="text"> 20 <span class="input-group-addon"><i></i></span> 21 </p> 22 <p class="picker" data-selector=".btn-primary" data-element="color"> 23 <label for="tc-btn-primary-text-color">Text:</label> 24 <input id="tc-btn-primary-text-color" data-selector=".btn-primary" data-element="color" data-var="@btn-primary-color" type="text"> 25 <span class="input-group-addon"><i></i></span> 26 </p> 27 </div> 28 </div> 29 </div> 30 31 <div class="row"> 32 <div class="col-sm-8 col-md-9"> 33 <button type="button" class="btn btn-secondary btn-sm">Secondary</button> 34 <button type="button" class="btn btn-secondary">Secondary</button> 35 <button type="button" class="btn btn-secondary btn-lg">Secondary</button> 36 <button type="button" class="btn btn-secondary disabled">Secondary</button> 37 </div> 38 <div class="col-sm-4 col-md-3"> 39 <div class="input"> 40 <p class="picker" data-selector=".btn-secondary" data-element="background-color"> 41 <label for="tc-btn-secondary-bg-color">Background:</label> 42 <input id="tc-btn-secondary-bg-color" data-selector=".btn-secondary" data-element="background-color" data-var="@btn-secondary-bg" type="text"> 43 <span class="input-group-addon"><i></i></span> 44 </p> 45 <p class="picker" data-selector=".btn-secondary" data-element="border-color"> 46 <label for="tc-btn-secondary-border-color">Border:</label> 47 <input id="tc-btn-secondary-border-color" data-selector=".btn-secondary" data-element="border-color" data-var="@btn-secondary-border" type="text"> 48 <span class="input-group-addon"><i></i></span> 49 </p> 50 <p class="picker" data-selector=".btn-secondary" data-element="color"> 51 <label for="tc-btn-secondary-text-color">Text:</label> 52 <input id="tc-btn-secondary-text-color" data-selector=".btn-secondary" data-element="color" data-var="@btn-secondary-color" type="text"> 53 <span class="input-group-addon"><i></i></span> 54 </p> 55 </div> 56 </div> 57 </div> 58 59 <div class="row"> 60 <div class="col-sm-8 col-md-9"> 61 <button type="button" class="btn btn-success btn-sm">Success</button> 62 <button type="button" class="btn btn-success">Success</button> 63 <button type="button" class="btn btn-success btn-lg">Success</button> 64 <button type="button" class="btn btn-success disabled">Success</button> 65 </div> 66 <div class="col-sm-4 col-md-3"> 67 <div class="input"> 68 <p class="picker" data-selector=".btn-success" data-element="background-color"> 69 <label for="tc-btn-success-bg-color">Background:</label> 70 <input id="tc-btn-success-bg-color" data-selector=".btn-success" data-element="background-color" data-var="@btn-success-bg" type="text"> 71 <span class="input-group-addon"><i></i></span> 72 </p> 73 <p class="picker" data-selector=".btn-success" data-element="border-color"> 74 <label for="tc-btn-success-border-color">Border:</label> 75 <input id="tc-btn-success-border-color" data-selector=".btn-success" data-element="border-color" data-var="@btn-success-border" type="text"> 76 <span class="input-group-addon"><i></i></span> 77 </p> 78 <p class="picker" data-selector=".btn-success" data-element="color"> 79 <label for="tc-btn-success-text-color">Text:</label> 80 <input id="tc-btn-success-text-color" data-selector=".btn-success" data-element="color" data-var="@btn-success-color" type="text"> 81 <span class="input-group-addon"><i></i></span> 82 </p> 83 </div> 84 </div> 85 </div> 86 87 <div class="row"> 88 <div class="col-sm-8 col-md-9"> 89 <button type="button" class="btn btn-danger btn-sm">Danger</button> 90 <button type="button" class="btn btn-danger">Danger</button> 91 <button type="button" class="btn btn-danger btn-lg">Danger</button> 92 <button type="button" class="btn btn-danger disabled">Danger</button> 93 </div> 94 <div class="col-sm-4 col-md-3"> 95 <div class="input"> 96 <p class="picker" data-selector=".btn-danger" data-element="background-color"> 97 <label for="tc-btn-danger-bg-color">Background:</label> 98 <input id="tc-btn-danger-bg-color" data-selector=".btn-danger" data-element="background-color" data-var="@btn-danger-bg" type="text"> 99 <span class="input-group-addon"><i></i></span> 100 </p> 101 <p class="picker" data-selector=".btn-danger" data-element="border-color"> 102 <label for="tc-btn-danger-border-color">Border:</label> 103 <input id="tc-btn-danger-border-color" data-selector=".btn-danger" data-element="border-color" data-var="@btn-danger-border" type="text"> 104 <span class="input-group-addon"><i></i></span> 105 </p> 106 <p class="picker" data-selector=".btn-danger" data-element="color"> 107 <label for="tc-btn-danger-text-color">Text:</label> 108 <input id="tc-btn-danger-text-color" data-selector=".btn-danger" data-element="color" data-var="@btn-danger-color" type="text"> 109 <span class="input-group-addon"><i></i></span> 110 </p> 111 </div> 112 </div> 113 </div> 114 115 <div class="row"> 116 <div class="col-sm-8 col-md-9"> 117 <button type="button" class="btn btn-warning btn-sm">Warning</button> 118 <button type="button" class="btn btn-warning">Warning</button> 119 <button type="button" class="btn btn-warning btn-lg">Warning</button> 120 <button type="button" class="btn btn-warning disabled">Warning</button> 121 </div> 122 <div class="col-sm-4 col-md-3"> 123 <div class="input"> 124 <p class="picker" data-selector=".btn-warning" data-element="background-color"> 125 <label for="tc-btn-warning-bg-color">Background:</label> 126 <input id="tc-btn-warning-bg-color" data-selector=".btn-warning" data-element="background-color" data-var="@btn-warning-bg" type="text"> 127 <span class="input-group-addon"><i></i></span> 128 </p> 129 <p class="picker" data-selector=".btn-warning" data-element="border-color"> 130 <label for="tc-btn-warning-border-color">Border:</label> 131 <input id="tc-btn-warning-border-color" data-selector=".btn-warning" data-element="border-color" data-var="@btn-warning-border" type="text"> 132 <span class="input-group-addon"><i></i></span> 133 </p> 134 <p class="picker" data-selector=".btn-warning" data-element="color"> 135 <label for="tc-btn-warning-text-color">Text:</label> 136 <input id="tc-btn-warning-text-color" data-selector=".btn-warning" data-element="color" data-var="@btn-warning-color" type="text"> 137 <span class="input-group-addon"><i></i></span> 138 </p> 139 </div> 140 </div> 141 </div> 142 143 <div class="row"> 144 <div class="col-sm-8 col-md-9"> 145 <button type="button" class="btn btn-info btn-sm">Info</button> 146 <button type="button" class="btn btn-info">Info</button> 147 <button type="button" class="btn btn-info btn-lg">Info</button> 148 <button type="button" class="btn btn-info disabled">Info</button> 149 </div> 150 <div class="col-sm-4 col-md-3"> 151 <div class="input"> 152 <p class="picker" data-selector=".btn-info" data-element="background-color"> 153 <label for="tc-btn-info-bg-color">Background:</label> 154 <input id="tc-btn-info-bg-color" data-selector=".btn-info" data-element="background-color" data-var="@btn-info-bg" type="text"> 155 <span class="input-group-addon"><i></i></span> 156 </p> 157 <p class="picker" data-selector=".btn-info" data-element="border-color"> 158 <label for="tc-btn-info-border-color">Border:</label> 159 <input id="tc-btn-info-border-color" data-selector=".btn-info" data-element="border-color" data-var="@btn-info-border" type="text"> 160 <span class="input-group-addon"><i></i></span> 161 </p> 162 <p class="picker" data-selector=".btn-info" data-element="color"> 163 <label for="tc-btn-info-text-color">Text:</label> 164 <input id="tc-btn-info-text-color" data-selector=".btn-info" data-element="color" data-var="@btn-info-color" type="text"> 165 <span class="input-group-addon"><i></i></span> 166 </p> 167 </div> 168 </div> 169 </div> 170 171 <div class="row"> 172 <div class="col-sm-8 col-md-9"> 173 <button type="button" class="btn btn-light btn-sm">Light</button> 174 <button type="button" class="btn btn-light">Light</button> 175 <button type="button" class="btn btn-light btn-lg">Light</button> 176 <button type="button" class="btn btn-light disabled">Light</button> 177 </div> 178 <div class="col-sm-4 col-md-3"> 179 <div class="input"> 180 <p class="picker" data-selector=".btn-light" data-element="background-color"> 181 <label for="tc-btn-light-bg-color">Background:</label> 182 <input id="tc-btn-light-bg-color" data-selector=".btn-light" data-element="background-color" data-var="@btn-light-bg" type="text"> 183 <span class="input-group-addon"><i></i></span> 184 </p> 185 <p class="picker" data-selector=".btn-light" data-element="border-color"> 186 <label for="tc-btn-light-border-color">Border:</label> 187 <input id="tc-btn-light-border-color" data-selector=".btn-light" data-element="border-color" data-var="@btn-light-border" type="text"> 188 <span class="input-group-addon"><i></i></span> 189 </p> 190 <p class="picker" data-selector=".btn-light" data-element="color"> 191 <label for="tc-btn-light-text-color">Text:</label> 192 <input id="tc-btn-light-text-color" data-selector=".btn-light" data-element="color" data-var="@btn-light-color" type="text"> 193 <span class="input-group-addon"><i></i></span> 194 </p> 195 </div> 196 </div> 197 </div> 198 199 <div class="row"> 200 <div class="col-sm-8 col-md-9"> 201 <button type="button" class="btn btn-dark btn-sm">Dark</button> 202 <button type="button" class="btn btn-dark">Dark</button> 203 <button type="button" class="btn btn-dark btn-lg">Dark</button> 204 <button type="button" class="btn btn-dark disabled">Dark</button> 205 </div> 206 <div class="col-sm-4 col-md-3"> 207 <div class="input"> 208 <p class="picker" data-selector=".btn-dark" data-element="background-color"> 209 <label for="tc-btn-dark-bg-color">Background:</label> 210 <input id="tc-btn-dark-bg-color" data-selector=".btn-dark" data-element="background-color" data-var="@btn-dark-bg" type="text"> 211 <span class="input-group-addon"><i></i></span> 212 </p> 213 <p class="picker" data-selector=".btn-dark" data-element="border-color"> 214 <label for="tc-btn-dark-border-color">Border:</label> 215 <input id="tc-btn-dark-border-color" data-selector=".btn-dark" data-element="border-color" data-var="@btn-dark-border" type="text"> 216 <span class="input-group-addon"><i></i></span> 217 </p> 218 <p class="picker" data-selector=".btn-dark" data-element="color"> 219 <label for="tc-btn-dark-text-color">Text:</label> 220 <input id="tc-btn-dark-text-color" data-selector=".btn-dark" data-element="color" data-var="@btn-dark-color" type="text"> 221 <span class="input-group-addon"><i></i></span> 222 </p> 223 </div> 224 </div> 225 </div> 226</div> 227