# Components Documentation

- Buttons
- Checkbox/Radio
- Inputs
- Textarea
- Tooltips
- Material Icons

## Buttons

#### Colors

We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:

    <button class="btn btn-default">Default</button>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-danger">Danger</button>

#### Sizes

Buttons come in all needed sizes:

    <button class="btn btn-primary btn-lg">Large</button>
    <button class="btn btn-primary">Normal</button>
    <button class="btn btn-primary btn-sm">Small</button>
    <button class="btn btn-primary btn-xs">Extra Small</button>

## Checkboxes

To use the custom checkboxes, you don't need to import any separate Javascript file, everything is inside material.min.js. The check color will change when data-color = 'purple' attribute of the Wizard is replaced with another color.

Unchecked
Checked
Disabled Unchecked
Disabled Checked

    <div class="checkbox">
    	<label>
    		<input type="checkbox" name="optionsCheckboxes">
    		Unchecked
    	</label>
    </div>
    <div class="checkbox">
    	<label>
    		<input type="checkbox" name="optionsCheckboxes" checked>
    		Checked
    	</label>
    </div>
    <div class="checkbox">
    	<label>
    		<input type="checkbox" name="optionsCheckboxes" disabled>
    		Disabled Unchecked
    	</label>
    </div>
    <div class="checkbox">
    	<label>
    		<input type="checkbox" name="optionsCheckboxes" disabled checked>
    		Disabled Checked
    	</label>
    </div>

## Radio Buttons

To use the custom radio buttons, you don't need to import any separate Javascript file, everything is inside material.min.js.The check color will change when data-color = 'purple' attribute is replaced with another color.

Radio is off
Radio is on
Disabled Radio is off
Disabled Radio is on

    <div class="radio">
    	<label>
    		<input type="radio" name="optionsRadios">
    		Radio is off
    	</label>
    </div>
    <div class="radio">
    	<label>
    		<input type="radio" name="optionsRadios" checked="true">
    		Radio is on
    	</label>
    </div>
    <div class="radio">
    	<label>
    		<input type="radio" name="optionsRadiosDisabled" disabled>
    		Disabled Radio is off
    	</label>
    </div>
    <div class="radio">
    	<label>
    		<input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
    		Disabled Radio is on
    	</label>
    </div>

## Inputs

We restyled the Bootstrap input to give it a more flat, minimal look. You can use them with regular labels, floating labels and states or input groups.

With Floating Label
Success input done
Error input clear
group

    <div class="col-sm-4">
    	<div class="form-group">
        	<input type="text" value="" placeholder="Regular" class="form-control" />
    	</div>
    </div>

    <div class="col-sm-4">
    	<div class="form-group label-floating">
    		<label class="control-label">With Floating Label</label>
    		<input type="email" class="form-control">
    	</div>
    </div>

    <div class="col-sm-4">
    	<div class="form-group label-floating has-success">
    		<label class="control-label">Success input</label>
    		<input type="text" value="Success" class="form-control" />
    		<span class="form-control-feedback">
    			<i class="material-icons">done</i>
    		</span>
    	</div>
    </div>

    <div class="col-sm-4">
    	<div class="form-group label-floating has-error">
    		<label class="control-label">Error input</label>
    		<input type="email" value="Error Input" class="form-control" />
    		<span class="material-icons form-control-feedback">clear</span>
    	</div>
    </div>

    <div class="col-sm-4">
    	<div class="input-group">
    		<span class="input-group-addon">
    			<i class="material-icons">group</i>
    		</span>
    		<input type="text" class="form-control" placeholder="With Material Icons">
    	</div>
    </div>

    <div class="col-sm-4">
    	<div class="input-group">
    		<span class="input-group-addon">
    			<i class="fa fa-group"></i>
    		</span>
    		<input type="text" class="form-control" placeholder="With Font Awesome Icons">
    	</div>
    </div>

## Textarea

The textarea has a new style, so it looks similar to all other inputs.

    <textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>

## Tooltips

We restyled the Bootstrap tooltip.

rounded_corner

###### No Captain

accessibility

###### Includes Captain

    <div class="row">
    	<div class="card wizard-card" data-color="purple">
    		<div class="col-sm-4 col-sm-offset-2">
    			<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="Renters you approve will be able to take this boat">
    				<input type="radio" name="job" value="Design">
    				<div class="icon">
    					<i class="material-icons">rounded_corner</i>
    				</div>
    				<h6>No Captain</h6>
    			</div>
    		</div>

    		<div class="col-sm-4">
    			<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="Select this option if you or a certified captain will be included.">
    				<input type="radio" name="job" value="Code">
    				<div class="icon">
    					<i class="material-icons">accessibility</i>
    				</div>
    				<h6>Includes Captain</h6>
    			</div>
    		</div>
    	</div>
    </div>

    <!-- Javascript -->
    $('[data-toggle="tooltip"]').tooltip();

## Material Icons

We used the default Icons for the Material Design which provided by Google.

face

    	<i class="material-icons">face</i>