You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
14 KiB
226 lines
14 KiB
<div class="buttons">
|
|
<h2>Buttons</h2>
|
|
<div class="row">
|
|
<div class="col-sm-8 col-md-9">
|
|
<button type="button" class="btn btn-primary btn-sm">{tr}Primary{/tr}</button>
|
|
<button type="button" class="btn btn-primary">{tr}Primary{/tr}</button>
|
|
<button type="button" class="btn btn-primary btn-lg">{tr}Primary{/tr}</button>
|
|
<button type="button" class="btn btn-primary disabled">{tr}Primary{/tr}</button>
|
|
</div>
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".btn-primary" data-element="background-color">
|
|
<label for="tc-btn-primary-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-btn-primary-bg-color" data-selector=".btn-primary" data-element="background-color" data-var="@btn-primary-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-primary" data-element="border-color">
|
|
<label for="tc-btn-primary-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-btn-primary-border-color" data-selector=".btn-primary" data-element="border-color" data-var="@btn-primary-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-primary" data-element="color">
|
|
<label for="tc-btn-primary-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-btn-primary-text-color" data-selector=".btn-primary" data-element="color" data-var="@btn-primary-color" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-8 col-md-9">
|
|
<button type="button" class="btn btn-secondary btn-sm">{tr}Secondary{/tr}</button>
|
|
<button type="button" class="btn btn-secondary">{tr}Secondary{/tr}</button>
|
|
<button type="button" class="btn btn-secondary btn-lg">{tr}Secondary{/tr}</button>
|
|
<button type="button" class="btn btn-secondary disabled">{tr}Secondary{/tr}</button>
|
|
</div>
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".btn-secondary" data-element="background-color">
|
|
<label for="tc-btn-secondary-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-btn-secondary-bg-color" data-selector=".btn-secondary" data-element="background-color" data-var="@btn-secondary-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-secondary" data-element="border-color">
|
|
<label for="tc-btn-secondary-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-btn-secondary-border-color" data-selector=".btn-secondary" data-element="border-color" data-var="@btn-secondary-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-secondary" data-element="color">
|
|
<label for="tc-btn-secondary-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-btn-secondary-text-color" data-selector=".btn-secondary" data-element="color" data-var="@btn-secondary-color" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-8 col-md-9">
|
|
<button type="button" class="btn btn-success btn-sm">{tr}Success{/tr}</button>
|
|
<button type="button" class="btn btn-success">{tr}Success{/tr}</button>
|
|
<button type="button" class="btn btn-success btn-lg">{tr}Success{/tr}</button>
|
|
<button type="button" class="btn btn-success disabled">{tr}Success{/tr}</button>
|
|
</div>
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".btn-success" data-element="background-color">
|
|
<label for="tc-btn-success-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-btn-success-bg-color" data-selector=".btn-success" data-element="background-color" data-var="@btn-success-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-success" data-element="border-color">
|
|
<label for="tc-btn-success-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-btn-success-border-color" data-selector=".btn-success" data-element="border-color" data-var="@btn-success-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-success" data-element="color">
|
|
<label for="tc-btn-success-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-btn-success-text-color" data-selector=".btn-success" data-element="color" data-var="@btn-success-color" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-8 col-md-9">
|
|
<button type="button" class="btn btn-danger btn-sm">{tr}Danger{/tr}</button>
|
|
<button type="button" class="btn btn-danger">{tr}Danger{/tr}</button>
|
|
<button type="button" class="btn btn-danger btn-lg">{tr}Danger{/tr}</button>
|
|
<button type="button" class="btn btn-danger disabled">{tr}Danger{/tr}</button>
|
|
</div>
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".btn-danger" data-element="background-color">
|
|
<label for="tc-btn-danger-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-btn-danger-bg-color" data-selector=".btn-danger" data-element="background-color" data-var="@btn-danger-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-danger" data-element="border-color">
|
|
<label for="tc-btn-danger-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-btn-danger-border-color" data-selector=".btn-danger" data-element="border-color" data-var="@btn-danger-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-danger" data-element="color">
|
|
<label for="tc-btn-danger-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-btn-danger-text-color" data-selector=".btn-danger" data-element="color" data-var="@btn-danger-color" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-8 col-md-9">
|
|
<button type="button" class="btn btn-warning btn-sm">{tr}Warning{/tr}</button>
|
|
<button type="button" class="btn btn-warning">{tr}Warning{/tr}</button>
|
|
<button type="button" class="btn btn-warning btn-lg">{tr}Warning{/tr}</button>
|
|
<button type="button" class="btn btn-warning disabled">{tr}Warning{/tr}</button>
|
|
</div>
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".btn-warning" data-element="background-color">
|
|
<label for="tc-btn-warning-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-btn-warning-bg-color" data-selector=".btn-warning" data-element="background-color" data-var="@btn-warning-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-warning" data-element="border-color">
|
|
<label for="tc-btn-warning-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-btn-warning-border-color" data-selector=".btn-warning" data-element="border-color" data-var="@btn-warning-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-warning" data-element="color">
|
|
<label for="tc-btn-warning-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-btn-warning-text-color" data-selector=".btn-warning" data-element="color" data-var="@btn-warning-color" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-8 col-md-9">
|
|
<button type="button" class="btn btn-info btn-sm">{tr}Info{/tr}</button>
|
|
<button type="button" class="btn btn-info">{tr}Info{/tr}</button>
|
|
<button type="button" class="btn btn-info btn-lg">{tr}Info{/tr}</button>
|
|
<button type="button" class="btn btn-info disabled">{tr}Info{/tr}</button>
|
|
</div>
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".btn-info" data-element="background-color">
|
|
<label for="tc-btn-info-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-btn-info-bg-color" data-selector=".btn-info" data-element="background-color" data-var="@btn-info-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-info" data-element="border-color">
|
|
<label for="tc-btn-info-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-btn-info-border-color" data-selector=".btn-info" data-element="border-color" data-var="@btn-info-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-info" data-element="color">
|
|
<label for="tc-btn-info-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-btn-info-text-color" data-selector=".btn-info" data-element="color" data-var="@btn-info-color" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-8 col-md-9">
|
|
<button type="button" class="btn btn-light btn-sm">{tr}Light{/tr}</button>
|
|
<button type="button" class="btn btn-light">{tr}Light{/tr}</button>
|
|
<button type="button" class="btn btn-light btn-lg">{tr}Light{/tr}</button>
|
|
<button type="button" class="btn btn-light disabled">{tr}Light{/tr}</button>
|
|
</div>
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".btn-light" data-element="background-color">
|
|
<label for="tc-btn-light-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-btn-light-bg-color" data-selector=".btn-light" data-element="background-color" data-var="@btn-light-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-light" data-element="border-color">
|
|
<label for="tc-btn-light-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-btn-light-border-color" data-selector=".btn-light" data-element="border-color" data-var="@btn-light-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-light" data-element="color">
|
|
<label for="tc-btn-light-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-btn-light-text-color" data-selector=".btn-light" data-element="color" data-var="@btn-light-color" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-8 col-md-9">
|
|
<button type="button" class="btn btn-dark btn-sm">{tr}Dark{/tr}</button>
|
|
<button type="button" class="btn btn-dark">{tr}Dark{/tr}</button>
|
|
<button type="button" class="btn btn-dark btn-lg">{tr}Dark{/tr}</button>
|
|
<button type="button" class="btn btn-dark disabled">{tr}Dark{/tr}</button>
|
|
</div>
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".btn-dark" data-element="background-color">
|
|
<label for="tc-btn-dark-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-btn-dark-bg-color" data-selector=".btn-dark" data-element="background-color" data-var="@btn-dark-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-dark" data-element="border-color">
|
|
<label for="tc-btn-dark-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-btn-dark-border-color" data-selector=".btn-dark" data-element="border-color" data-var="@btn-dark-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".btn-dark" data-element="color">
|
|
<label for="tc-btn-dark-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-btn-dark-text-color" data-selector=".btn-dark" data-element="color" data-var="@btn-dark-color" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|