:: Falcon - Admin Dashboard ::

Material Elements

Welcome to Falcon application

Material Buttons

Colors

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


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

Sizes

Buttons come in all needed sizes:


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

Styles

We added extra classes that can help you better customise the look. You can use regular buttons, raised buttons, rounded corners buttons or plain link buttons. Let's see some examples:

<button class="btn btn-primary btn-raised">Raised</button>
<button class="btn btn-primary btn-raised btn-round">Round</button>
<button class="btn btn-primary btn-raised btn-round">
	<i class="material-icons">favorite</i> With Icon
</button>
<button class="btn btn-primary btn-raised btn-fab btn-fab-mini btn-round">
	<i class="material-icons">favorite</i>
</button>
<button class="btn btn-primary">Default</button>

Button groups, toolbars, and disabled state all work like they are supposed to. We used the Font Awesome icons that can be found here and Material Design Icons that can be found here.

Material Checkboxes

To use the custom checkboxes, you don't need to import any separate Javascript file, everything is inside material.min.js

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>

Material Radio Buttons

To use the custom radio buttons, you don't need to import any separate Javascript file, everything is inside material.min.js.

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>

Material Toggle Buttons

If you want to use something more special than a checkbox, we recomment the toggle buttons.

Toggle is on

Toggle is off


<div class="togglebutton">
	<label>
    	<input type="checkbox" checked="">
		Toggle is on
	</label>
</div>

<div class="togglebutton">
	<label>
    	<input type="checkbox">
		Toggle is off
	</label>
</div>

Material Dropdown

We are very proud to present the dropdown which has a subtle animation. We also thought of another use-case: dropdown with flags. IMPORTANT! The focus state is Purple by default, on the dropdowns from the navbars will take the color of the navbar parent.

<div class="col-md-3 dropdown">
	<a href="#" class="btn btn-simple dropdown-toggle" data-toggle="dropdown">
    	Regular
    	<b class="caret"></b>
	</a>
	<ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
		<li class="divider"></li>
		<li><a href="#">One more separated link</a></li>
	</ul>
</div>

Material 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

Error input


<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>

Material 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>

Material Navbar

The classic Bootstrap Navbar was restyled:

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
    	<div class="navbar-header">
    		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
    		</button>
    		<a class="navbar-brand" href="#">Brand</a>
    	</div>

    	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    		<ul class="nav navbar-nav">
				<li class="active"><a href="#">Link</a></li>
        		<li><a href="#">Link</a></li>
        		<li class="dropdown">
        			<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        			<ul class="dropdown-menu">
					  <li><a href="#">Action</a></li>
					  <li><a href="#">Another action</a></li>
					  <li><a href="#">Something else here</a></li>
					  <li class="divider"></li>
					  <li><a href="#">Separated link</a></li>
					  <li class="divider"></li>
				      <li><a href="#">One more separated link</a></li>
        			</ul>
        		</li>
    		</ul>
    	</div>
	</div>
</nav>

Besides the default navbar, we added 4 new colors: blue, green, orange, red. If you want to use one of them, you have to replace the .navbar-default or navbar-primary with the class for the chosen color .navbar-info, .navbar-success, .navbar-warning, .navbar-danger.

Material Pagination

The Bootstrap pagination elements were customised to fit the overall theme. Besides the classic look, we also added the color classes to offer more customisation like


<ul class="pagination pagination-primary">
	<li><a href="#"><</a></li>
	<li><a href=index.php#">1</a></li>
	<li><a href=index.php#">2</a></li>
	<li class="active"><a href=index.php#">3</a></li>
	<li><a href=index.php#">4</a></li>
	<li><a href=index.php#">5</a></li>
	<li><a href=index.php#">></a></li>
</ul>

Material Progress Bars

The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean. The default line is gray, each bar has a specific color but you can add some colors for the background lines using the next classes .progress-line-primary, .progress-line-info, .progress-line-success, .progress-line-warning, .progress-line-danger,

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
	<span class="sr-only">30% Complete</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	<span class="sr-only">60% Complete</span>
	</div>
</div>

<div class="progress progress-line-primary">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
	<span class="sr-only">30% Complete</span>
	</div>
</div>
<div class="progress progress-line-info">
	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	<span class="sr-only">60% Complete</span>
	</div>
</div>

<div class="progress">
	<div class="progress-bar progress-bar-success" style="width: 35%">
	<span class="sr-only">35% Complete (success)</span>
	</div>
	<div class="progress-bar progress-bar-warning" style="width: 20%">
	<span class="sr-only">20% Complete (warning)</span>
	</div>
	<div class="progress-bar progress-bar-danger" style="width: 10%">
	<span class="sr-only">10% Complete (danger)</span>
	</div>
</div>

Material Labels

We restyled the default options for labels and we added the filled class, that can be used in any combination.

Default Primary Success Info Warning Danger


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

Material Tables

All Boostrap classes for tables are supported and improved.

Simple Table with Actions

#	Name	Job Position	Since	Salary
1	Andrew Mike	Develop	2013	€ 99,225
2	John Doe	Design	2012	€ 89,241
3	Alex Mike	Design	2010	€ 92,144


<table class="table">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th>Name</th>
            <th>Job Position</th>
            <th>Since</th>
            <th class="text-right">Salary</th>
            <th class="text-right">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">1</td>
            <td>Andrew Mike</td>
            <td>Develop</td>
            <td>2013</td>
            <td class="text-right">&euro; 99,225</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">2</td>
            <td>John Doe</td>
            <td>Design</td>
            <td>2012</td>
            <td class="text-right">&euro; 89,241</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">3</td>
            <td>Alex Mike</td>
            <td>Design</td>
            <td>2010</td>
            <td class="text-right">&euro; 92,144</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
    </tbody>
</table>

Material Modals

We restyled the classic Bootstrap Modal and gave it a more simple look.
IMPORTANT! Please make sure you place the modal body outside of the div.wrapper tag.


<!-- Button trigger modal -->
<button class="btn btn-primary btn-raised" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal Core -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-info ">Save</button>
      </div>
    </div>
  </div>
</div>

Material Tooltips

We restyled the Bootstrap tooltip.

<!-- Markup -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Button with Tooltip</button>

<!-- Javascript -->
$('.btn-tooltip').tooltip();

Material Popovers

We restyled the Bootstrap popover to align with the Material Design Concept.
See the following example:

<!-- markup -->

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Here will be some very useful information about his popover.">On top</button>


<!-- javascript -->

$('[data-toggle="popover"]').popover();

Material Notifications

The new notifications are looking fresh and clean. They go great with the navbar. For these notifications examples we used the .container-fluid class, so they will be fluid, please use the class .container when you use them outside of the .wrapper so they will be alignd with the general page container.

Info alert: You've got some friends nearby, stop looking at your phone and find them...

Success Alert: Yuhuuu! You've got your $11.99 album from The Weeknd

Error Alert: Damn man! You screwed up the server this time. You should find a good excuse for your Boss...

<div class="alert alert-info">
    <div class="container-fluid">	 
	  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true"><i class="material-icons">clear</i></span>
	  </button>
	  <b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find them...
    </div>
</div>

<div class="alert alert-success">
    <div class="container-fluid">	 
	  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true"><i class="material-icons">clear</i></span>
	  </button>
      <b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd
    </div>
</div>

<div class="alert alert-warning">
    <div class="container-fluid">	 
	  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true"><i class="material-icons">clear</i></span>
	  </button>
      <b>Warning Alert:</b> Hey, it looks like you still have the "copyright &copy;  2015" in your footer. Please update it!
    </div>
</div>

<div class="alert alert-danger">
    <div class="container-fluid">	 
	  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true"><i class="material-icons">clear</i></span>
	  </button>
      <b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
    </div>
</div>