Trimble css library documentation

Trimble css library documentation

Source: button.scss, line 1

1.1 Buttons

Buttons styles from trimble css

Example






<div>
<button class="button default">default button</button>
</div>
<br/>
<div>
<button class="button small">small button</button>
</div>
<br/>
<div>
<button class="button expanded">expanded button</button>
</div>
<br/>
<div>
<button class="button small">
    <i class="icon add"></i>icon button
</button>
</div>
<br/>
<div>
<button class="button default" disabled="disabled">Disabled button</button>
</div>
<br/>
<div>
<button class="button secondary">Secondary button</button>
</div>

Source: checkbox.scss, line 1

1.2 Checkbox

Checkbox styles from trimble css

Example

<div class="checkbox">
  <input class="check-input" type="checkbox" id="timezones" /><label for="timezones">Display All Timezones</label>
</div>

Example

<div class="input-group">
    <input class="icon user" type="text" required/>
    <label class="label float">First Name</label>
</div>

Example

<div class="input-group">
    <label>Normal input</label>
    <input class="icon user" type="text" placeholder="First Name">
</div>
<div class="input-group">
    <label>Input with focus</label>
    <input class="icon user focus" type="text" placeholder="First Name">
</div>
<div class="input-group">
    <label>Input with error</label>
    <input class="icon user error" type="text" placeholder="First Name">
</div>
<div class="input-group">
    <label>Input without icon</label>
    <input class="" type="text" placeholder="Without icon">
</div>

Example

<select>
    <option value="">All Users</option>
    <option value="">Pod 3</option>
    <option value="">Architects</option>
    <option value="">Engineers</option>
    <option value="">Surveyors</option>
</select>