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.
170 lines
9.9 KiB
170 lines
9.9 KiB
<div class="alerts">
|
|
<h2>{tr}Alerts{/tr}</h2>
|
|
<div class="row">
|
|
<div class="col-sm-8 col-md-9">
|
|
<div class="alert alert-primary" role="alert">
|
|
<a class="close">×</a> <strong>{tr}Primary Alert{/tr}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".alert-primary" data-element="background-color">
|
|
<label for="tc-alert-primary-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-alert-primary-bg-color" data-selector=".alert-primary" data-element="background-color" data-var="@alert-success-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-primary" data-element="border-color">
|
|
<label for="tc-alert-primary-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-alert-primary-border-color" data-selector=".alert-primary" data-element="border-color" data-var="@alert-success-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-primary" data-element="color">
|
|
<label for="tc-alert-primary-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-alert-primary-text-color" data-selector=".alert-primary" data-element="color" data-var="@alert-success-text" 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">
|
|
<div class="alert alert-secondary" role="alert">
|
|
<a class="close">×</a> <strong>{tr}Secondary Alert{/tr}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".alert-secondary" data-element="background-color">
|
|
<label for="tc-alert-secondary-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-alert-secondary-bg-color" data-selector=".alert-secondary" data-element="background-color" data-var="@alert-success-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-secondary" data-element="border-color">
|
|
<label for="tc-alert-secondary-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-alert-secondary-border-color" data-selector=".alert-secondary" data-element="border-color" data-var="@alert-success-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-secondary" data-element="color">
|
|
<label for="tc-alert-secondary-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-alert-secondary-text-color" data-selector=".alert-secondary" data-element="color" data-var="@alert-success-text" 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">
|
|
<div class="alert alert-success" role="alert">
|
|
<a class="close">×</a> <strong>{tr}Success{/tr}</strong>{tr}You successfully read this important alert message.{/tr}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".alert-success" data-element="background-color">
|
|
<label for="tc-alert-success-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-alert-success-bg-color" data-selector=".alert-success" data-element="background-color" data-var="@alert-success-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-success" data-element="border-color">
|
|
<label for="tc-alert-success-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-alert-success-border-color" data-selector=".alert-success" data-element="border-color" data-var="@alert-success-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-success" data-element="color">
|
|
<label for="tc-alert-success-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-alert-success-text-color" data-selector=".alert-success" data-element="color" data-var="@alert-success-text" 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">
|
|
<div class="alert alert-danger" role="alert">
|
|
<a class="close">×</a> <strong>{tr}Error{/tr}</strong> {tr}Change a few things up and try submitting again.{/tr}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".alert-danger" data-element="background-color">
|
|
<label for="tc-alert-danger-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-alert-danger-bg-color" data-selector=".alert-danger" data-element="background-color" data-var="@alert-danger-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-danger" data-element="border-color">
|
|
<label for="tc-alert-danger-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-alert-danger-border-color" data-selector=".alert-danger" data-element="border-color" data-var="@alert-danger-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-danger" data-element="color">
|
|
<label for="tc-alert-danger-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-alert-danger-text-color" data-selector=".alert-danger" data-element="color" data-var="@alert-danger-text" 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">
|
|
<div class="alert alert-warning" role="alert">
|
|
<a class="close">×</a> <strong>{tr}Warning{/tr}</strong> {tr}Better check yourself, you're not looking too good.{/tr}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".alert-warning" data-element="background-color">
|
|
<label for="tc-alert-warning-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-alert-warning-bg-color" data-selector=".alert-warning" data-element="background-color" data-var="@alert-warning-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-warning" data-element="border-color">
|
|
<label for="tc-alert-warning-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-alert-warning-border-color" data-selector=".alert-warning" data-element="border-color" data-var="@alert-warning-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-warning" data-element="color">
|
|
<label for="tc-alert-warning-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-alert-warning-text-color" data-selector=".alert-warning" data-element="color" data-var="@alert-warning-text" 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">
|
|
<div class="alert alert-info" role="alert">
|
|
<a class="close">×</a> <strong>{tr}Information{/tr}</strong> {tr}This alert needs your attention, but it's not super important.{/tr}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="input">
|
|
<p class="picker" data-selector=".alert-info" data-element="background-color">
|
|
<label for="tc-alert-info-bg-color">{tr}Background:{/tr}</label>
|
|
<input id="tc-alert-info-bg-color" data-selector=".alert-info" data-element="background-color" data-var="@alert-info-bg" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-info" data-element="border-color">
|
|
<label for="tc-alert-info-border-color">{tr}Border:{/tr}</label>
|
|
<input id="tc-alert-info-border-color" data-selector=".alert-info" data-element="border-color" data-var="@alert-info-border" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
<p class="picker" data-selector=".alert-info" data-element="color">
|
|
<label for="tc-alert-info-text-color">{tr}Text:{/tr}</label>
|
|
<input id="tc-alert-info-text-color" data-selector=".alert-info" data-element="color" data-var="@alert-info-text" type="text">
|
|
<span class="input-group-addon"><i></i></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|