0.0.20

dist-new-version.sh

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 
-version=0.0.21
+version=0.0.20
 
 echo "Version $version"
 

dist/400.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Page 400 - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">

dist/401.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Page 401 - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">

dist/403.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Page 403 - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">

dist/404.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Page 404 - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">

dist/500.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Page 500 - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">

dist/503.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Page 503 - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">

dist/assets/css/dashboard.css

@@ -13327,7 +13327,6 @@ Card alert
 .dropdown-menu {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   min-width: 12rem;
-  max-width: 100%;
 }
 
 .dropdown-menu-arrow:before {
@@ -13370,7 +13369,7 @@ Card alert
 }
 
 .dropdown-icon {
-  color: #6e7687;
+  color: #9aa0ac;
   margin-right: .5rem;
   margin-left: -.5rem;
   width: 1em;

dist/blog.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/cards.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Cards design - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/charts.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Charts - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/crypto-currencies.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Crypto currencies - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/docs/alerts.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Alerts - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/docs/avatars.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Avatars - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/docs/buttons.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Buttons - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/docs/cards.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Cards - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/docs/charts.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Charts - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/docs/colors.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Colors - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/docs/form-components.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Form components - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/docs/grid.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Grid utilities - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/docs/index.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Introduction - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/docs/tags.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Tags - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/docs/typography.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Typography - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/email.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Email - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/empty.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Empty page - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/forgot-password.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Forgot password - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">

dist/form-elements.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/gallery.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/icons.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Icons - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/index.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Homepage - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/invoice.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Invoice - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/login.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Login - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">

dist/lookup.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Lookup company - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/maps.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Maps - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/pagination.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Pagination - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/pricing-cards.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Pricing cards - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/profile.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Profile - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/register.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Register - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">

dist/sample-cards.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Homepage - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/store.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>Store components - tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

dist/users-list.html

@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-04 16:12:58 +0200 -->
     <title>tabler.github.io - a responsive, flat and full featured admin template</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -46,26 +46,47 @@
                 <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
               </a>
               <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+                <div class="nav-item d-none d-md-flex">
                   <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                 </div>
-                <div class="dropdown d-none d-md-flex">
+                <!--<div class="dropdown d-none d-md-flex">-->
-                  <a class="nav-link icon" data-toggle="dropdown">
+                <!--<a class="nav-link icon" data-toggle="dropdown">-->
-                    <i class="fe fe-message-square"></i>
+                <!--<i class="fe fe-message-square"></i>-->
-                  </a>
+                <!--</a>-->
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                <!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                <!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-                  </div>
+                <!--</div>-->
-                </div>
+                <!--</div>-->
                 <div class="dropdown d-none d-md-flex">
                   <a class="nav-link icon" data-toggle="dropdown">
                     <i class="fe fe-bell"></i>
                     <span class="nav-unread"></span>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+                    <a href="#" class="dropdown-item d-flex">
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                   </div>
                 </div>
                 <div class="dropdown">
@@ -78,39 +99,28 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                     <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                     </a>
                     <a class="dropdown-item" href="#">
                       <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                     </a>
                     <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
+                    <a class="dropdown-item" href="#">
-                    <a class="dropdown-item" href="#">Sign out</a>
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                   </div>
                 </div>
               </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
           </div>
         </div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tabler-ui",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI. For Free!",
-  "version": "0.0.21",
+  "version": "0.0.20",
   "keywords": [
     "css",
     "sass",

src/_includes/header.html

@@ -6,26 +6,47 @@
 				<img src="{{ site.base }}/demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
 			</a>
 			<div class="ml-auto d-flex order-lg-2">
-				<div class="nav-item">
+				<div class="nav-item d-none d-md-flex">
 					<a href="{{ site.github_url }}" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
 				</div>
-				<div class="dropdown d-none d-md-flex">
+				<!--<div class="dropdown d-none d-md-flex">-->
-					<a class="nav-link icon" data-toggle="dropdown">
+					<!--<a class="nav-link icon" data-toggle="dropdown">-->
-						<i class="fe fe-message-square"></i>
+						<!--<i class="fe fe-message-square"></i>-->
-					</a>
+					<!--</a>-->
-					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+					<!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
-						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+						<!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
-						delectus dolore dolores maxime nesciunt qui quia totam.
+						<!--delectus dolore dolores maxime nesciunt qui quia totam.-->
-					</div>
+					<!--</div>-->
-				</div>
+				<!--</div>-->
 				<div class="dropdown d-none d-md-flex">
 					<a class="nav-link icon" data-toggle="dropdown">
 						<i class="fe fe-bell"></i>
 						<span class="nav-unread"></span>
 					</a>
-					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
+						<a href="#" class="dropdown-item d-flex">
-						delectus dolore dolores maxime nesciunt qui quia totam.
+							<span class="avatar mr-3 align-self-center" style="background-image: url({{ site.data.users[1].photo }})"></span>
+							<div>
+								<strong>{{ site.data.users[1].name }}</strong> pushed new commit: Fix page load performance issue.
+								<div class="small text-muted">10 minutes ago</div>
+							</div>
+						</a>
+						<a href="#" class="dropdown-item d-flex">
+							<span class="avatar mr-3 align-self-center" style="background-image: url({{ site.data.users[2].photo }})"></span>
+							<div>
+								<strong>{{ site.data.users[2].name }}</strong> started new task: Tabler UI design.
+								<div class="small text-muted">1 hour ago</div>
+							</div>
+						</a>
+						<a href="#" class="dropdown-item d-flex">
+							<span class="avatar mr-3 align-self-center" style="background-image: url({{ site.data.users[3].photo }})"></span>
+							<div>
+								<strong>{{ site.data.users[3].name }}</strong> deployed new version of NodeJS REST Api V3
+								<div class="small text-muted">2 hours ago</div>
+							</div>
+						</a>
+						<div class="dropdown-divider"></div>
+						<a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
 					</div>
 				</div>
 				<div class="dropdown">
@@ -38,39 +59,28 @@
 					</a>
 					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
 						<a class="dropdown-item" href="#">
-							<span>Profile</span>
+							<i class="dropdown-icon fe fe-user"></i> Profile
 						</a>
 						<a class="dropdown-item" href="#">
-							<span>Settings</span>
+							<i class="dropdown-icon fe fe-settings"></i> Settings
 						</a>
 						<a class="dropdown-item" href="#">
 							<span class="float-right"><span class="badge badge-primary">6</span></span>
-							<span>Inbox</span>
+							<i class="dropdown-icon fe fe-mail"></i> Inbox
 						</a>
 						<a class="dropdown-item" href="#">
-							<span>Message</span>
+							<i class="dropdown-icon fe fe-send"></i> Message
 						</a>
 						<div class="dropdown-divider"></div>
-						<a class="dropdown-item" href="#">Need help? </a>
+						<a class="dropdown-item" href="#">
-						<a class="dropdown-item" href="#">Sign out</a>
+							<i class="dropdown-icon fe fe-help-circle"></i> Need help?
+						</a>
+						<a class="dropdown-item" href="#">
+							<i class="dropdown-icon fe fe-log-out"></i> Sign out
+						</a>
 					</div>
 				</div>
 			</div>
-			<div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-				<ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-					<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-					<li class="nav-item dropdown">
-						<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-						<div class="dropdown-menu mt-2 text-color" role="menu">
-							<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-							<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-							<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-							<div class="dropdown-divider"></div>
-							<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-						</div>
-					</li>
-				</ul>
-			</div>
 		</div>
 	</div>
 </div>

src/assets/scss/dashboard/_dropdown.scss

@@ -5,7 +5,7 @@
 .dropdown-menu {
 	box-shadow: $dropdown-box-shadow;
 	min-width: 12rem;
-	max-width: 100%;
+	//max-width: 100%;
 }
 
 .dropdown-menu-arrow {
@@ -47,7 +47,7 @@
 }
 
 .dropdown-icon {
-	color: $text-muted-dark;
+	color: $text-muted;
 	margin-right: .5rem;
 	margin-left: -.5rem;
 	width: 1em;