uhd #360

client/imports/views/layouts/main/main.js

@@ -3,54 +3,90 @@ import "/client/imports/views/layouts/navigation/navigation";
 import "/client/imports/views/layouts/top_navbar/top_navbar";
 import "/client/imports/views/layouts/footer/footer.html";
 import {Settings} from "/lib/imports/collections/settings";
+import Enums from "/lib/imports/enums";
 import "./main.html";
 
 const toastr = require('toastr');
 
-Template.mainLayout.rendered = function () {
+const fixHeight = function () {
+    const body = $("body");
+    if (!body.hasClass('body-small')) {
+        const pageWrapper = $('#page-wrapper');
+        const navbarHeigh = $('nav.navbar-default').height();
+        const wrapperHeigh = pageWrapper.height();
 
-    $(document).idleTimer(30 * 60 * 1000);
-    $(document).on("idle.idleTimer", function () {
-        //toastr.info('You are idle for 30 minutes :(', 'Idle');
-    });
-    $(document).on("active.idleTimer", function () {
-        toastr.success('Welcome back !', 'We missed you');
-    });
+        if (navbarHeigh > wrapperHeigh) {
+            pageWrapper.css("min-height", navbarHeigh + "px");
+        }
+
+        if (navbarHeigh < wrapperHeigh) {
+            pageWrapper.css("min-height", $(window).height() + "px");
+        }
+
+        if (body.hasClass('fixed-nav')) {
+            if (navbarHeigh > wrapperHeigh) {
+                pageWrapper.css("min-height", navbarHeigh + "px");
+            } else {
+                pageWrapper.css("min-height", $(window).height() - 60 + "px");
+            }
+        }
+    }
+};
+
+const doUIStuff = function () {
+    let body = $("body");
 
     // Minimalize menu when screen is less than 768px
     $(window).bind("resize load", function () {
         if ($(this).width() < 769) {
-            $('body').addClass('body-small')
+            body.addClass('body-small')
         } else {
-            $('body').removeClass('body-small')
+            body.removeClass('body-small')
         }
+
+        fixHeight();
     });
 
     // Fix height of layout when resize, scroll and load
-    $(window).bind("load resize scroll", function () {
-        const body = $("body");
-        if (!body.hasClass('body-small')) {
-            const pageWrapper = $('#page-wrapper');
-            const navbarHeigh = $('nav.navbar-default').height();
-            const wrapperHeigh = pageWrapper.height();
+    $(window).bind("scroll", function () {
+        fixHeight();
+    });
 
-            if (navbarHeigh > wrapperHeigh) {
-                pageWrapper.css("min-height", navbarHeigh + "px");
-            }
+    // set skin
+    let skin = localStorage.getItem(Enums.LOCAL_STORAGE_KEYS.MONGOCLIENT_SKIN);
+    if (skin && skin !== 'skin-default') body.addClass(skin);
 
-            if (navbarHeigh < wrapperHeigh) {
-                pageWrapper.css("min-height", $(window).height() + "px");
-            }
+    // set fixed-sidebar
+    body.addClass('fixed-sidebar');
+    $('.sidebar-collapse').slimScroll({
+        height: '100%',
+        railOpacity: 0.9
+    });
 
-            if (body.hasClass('fixed-nav')) {
-                if (navbarHeigh > wrapperHeigh) {
-                    pageWrapper.css("min-height", navbarHeigh - 60 + "px");
-                } else {
-                    pageWrapper.css("min-height", $(window).height() - 60 + "px");
-                }
-            }
+    // make nav resizable
+    const nav = $('.navbar-static-side');
+    const pageWrapper = $('#page-wrapper');
+
+    nav.resizable();
+    nav.on('resize', function () {
+        if (!window.matchMedia('(max-width: 768px)').matches) {
+            pageWrapper.css('margin', '0 0 0 ' + nav.width() + 'px');
+        } else {
+            pageWrapper.css('margin', '0');
         }
     });
+};
+
+Template.mainLayout.rendered = function () {
+    $(document).idleTimer(30 * 60 * 1000);
+    $(document).on("idle.idleTimer", function () {
+        //toastr.info('You are idle for 30 minutes :(', 'Idle');
+    });
+    $(document).on("active.idleTimer", function () {
+        toastr.success('Welcome back !', 'We missed you');
+    });
+
+    doUIStuff();
 
     let settings = this.subscribe('settings');
 

client/imports/views/layouts/navigation/navigation.js

@@ -252,22 +252,6 @@ Template.navigation.events({
 });
 
 Template.navigation.onRendered(function () {
-    $('.sidebar-collapse').slimScroll({
-        height: '100%',
-        railOpacity: 0.9
-    });
-    const nav = $('.navbar-static-side');
-    const pageWrapper = $('#page-wrapper');
-
-    nav.resizable();
-    nav.on('resize', function () {
-        if (!window.matchMedia('(max-width: 768px)').matches) {
-            pageWrapper.css('margin', '0 0 0 ' + nav.width() + 'px');
-        } else {
-            pageWrapper.css('margin', '0');
-        }
-    });
-
     const filterModal = $('#collectionFilterModal');
     filterModal.on('shown.bs.modal', function () {
         initializeFilterTable();

client/imports/views/layouts/top_navbar/top_navbar.js

@@ -49,12 +49,6 @@ const init = function () {
             $('#inputDatabaseNameToSwitch').val(table.row(this).data().name);
         }
     });
-
-    let body = $("body");
-    let skin = localStorage.getItem(Enums.LOCAL_STORAGE_KEYS.MONGOCLIENT_SKIN);
-    body.addClass('fixed-sidebar');
-    if (skin && skin !== 'skin-default') body.addClass(skin);
-
 };
 
 const populateSwitchDatabaseTable = function (data) {
@@ -193,33 +187,35 @@ Template.topNavbar.events({
     },
 
     // Toggle left navigation
-    /*'click #navbar-minimalize' (event) {
-     event.preventDefault();
-
-     let body = $('body');
-     let sideMenu = $('#side-menu');
-     // Toggle special class
-     body.toggleClass("mini-navbar");
-
-     // Enable smoothly hide/show menu
-     if (!body.hasClass('mini-navbar') || body.hasClass('body-small')) {
-     // Hide menu in order to smoothly turn on when maximize menu
-     sideMenu.hide();
-     // For smoothly turn on menu
-     setTimeout(function () {
-     sideMenu.fadeIn(400);
-     }, 200);
-     } else if (body.hasClass('fixed-sidebar')) {
-     sideMenu.hide();
-     setTimeout(
-     function () {
-     sideMenu.fadeIn(400);
-     }, 100);
-     } else {
-     // Remove all inline style from jquery fadeIn  to reset menu state
-     sideMenu.removeAttr('style');
-     }
-     },*/
+    'click #navbar-minimalize' (event) {
+        event.preventDefault();
+
+        let body = $('body');
+        let sideMenu = $('#side-menu');
+        // Toggle special class
+        body.toggleClass("mini-navbar");
+
+        // Enable smoothly hide/show menu
+        if (!body.hasClass('mini-navbar') || body.hasClass('body-small')) {
+            // Hide menu in order to smoothly turn on when maximize menu
+            console.log('1');
+            sideMenu.hide();
+            // For smoothly turn on menu
+            setTimeout(function () {
+                sideMenu.fadeIn(400);
+            }, 200);
+        } else if (body.hasClass('fixed-sidebar')) {
+            console.log('2');
+            sideMenu.hide();
+            setTimeout(
+                function () {
+                    sideMenu.fadeIn(400);
+                }, 100);
+        } else {
+            // Remove all inline style from jquery fadeIn  to reset menu state
+            sideMenu.removeAttr('style');
+        }
+    },
 
     'click #btnConnect' () {
         // loading button

client/imports/views/pages/mc_shell/mc_shell.js

@@ -234,7 +234,6 @@ Template.mcShell.onRendered(function () {
     Meteor.call("connectToShell", Session.get(Helper.strSessionConnection), Meteor.default_connection._lastSessionId, (err, result) => {
         if (err || result.error) Helper.showMeteorFuncError(err, result, "Couldn't connect via shell");
         else addCommandToHistory(result);
-        console.log(result);
     });
 });
 

client/stylesheets/globals/badgets_labels.import.less

+
+.label {
+  background-color: @light-gray;
+  color: @label-badge-color;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 600;
+  padding: 3px 8px;
+  text-shadow: none;
+}
+
+.nav .label, .ibox .label {
+  font-size: 10px;
+}
+
+.badge {
+  background-color: @light-gray;
+  color: @label-badge-color;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  padding-bottom: 4px;
+  padding-left: 6px;
+  padding-right: 6px;
+  text-shadow: none;
+}
+
+.label-primary, .badge-primary {
+  background-color: @navy;
+  color: #FFFFFF;
+}
+
+.label-success, .badge-success {
+  background-color: @blue;
+  color: #FFFFFF;
+}
+
+.label-warning, .badge-warning {
+  background-color: @yellow;
+  color: #FFFFFF;
+}
+
+.label-warning-light, .badge-warning-light {
+  background-color: @yellow;
+  color: #ffffff;
+}
+
+.label-danger, .badge-danger {
+  background-color: @red;
+  color: #FFFFFF;
+}
+
+.label-info, .badge-info {
+  background-color: @lazur;
+  color: #FFFFFF;
+}
+
+.label-inverse, .badge-inverse {
+  background-color: #262626;
+  color: #FFFFFF;
+}
+
+.label-white, .badge-white {
+  background-color: #FFFFFF;
+  color: #5E5E5E;
+}
+
+.label-white, .badge-disable {
+  background-color: #2A2E36;
+  color: #8B91A0;
+}

client/stylesheets/globals/base.import.less

+body {
+  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background-color: #2f4050;
+  font-size: 13px;
+  color: @text-color;
+  overflow-x: hidden;
+
+}
+
+html, body {
+  height: 100%;
+
+}
+
+body.full-height-layout #wrapper,
+body.full-height-layout #page-wrapper {
+  height: 100%;
+}
+
+#page-wrapper {
+  min-height: auto;
+}
+
+body.boxed-layout {
+  background: @boxed-background;
+}
+
+body.boxed-layout #wrapper {
+  background-color: #2f4050;
+  max-width: @boxed-width;
+  margin: 0 auto;
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
+}
+
+.top-navigation.boxed-layout #wrapper,
+.boxed-layout #wrapper.top-navigation {
+  max-width: 1300px !important;
+}
+
+.block {
+  display: block;
+}
+
+.clear {
+  display: block;
+  overflow: hidden;
+}
+
+a {
+  cursor: pointer;
+}
+
+a:hover, a:focus {
+  text-decoration: none;
+}
+
+.border-bottom {
+  border-bottom: 1px solid @border-color !important;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.font-italic {
+  font-style: italic;
+}
+
+.b-r {
+  border-right: 1px solid @border-color;
+}
+
+.hr-line-dashed {
+  border-top: 1px dashed @border-color;
+  color: #ffffff;
+  background-color: #ffffff;
+  height: 1px;
+  margin: 20px 0;
+}
+
+.hr-line-solid {
+  border-bottom: 1px solid @border-color;
+  background-color: rgba(0, 0, 0, 0);
+  border-style: solid !important;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+video {
+  width: 100% !important;
+  height: auto !important;
+}
+
+/* GALLERY */
+.gallery > .row > div {
+  margin-bottom: 15px;
+}
+
+.fancybox img {
+  margin-bottom: 5px;
+  /* Only for demo */
+  width: 24%;
+}
+
+/* Summernote text editor  */
+.note-editor {
+  height: auto !important;
+  //min-height: 300px;
+}
+
+.note-editor.fullscreen { z-index: 2050; }
+.note-editor.note-frame.fullscreen { z-index: 2020; }
+
+.note-editor.note-frame .note-editing-area .note-editable {
+  color: @text-color;
+  padding: 15px;
+}
+
+.note-editor.note-frame {
+  border: none;
+}
+
+.note-editor.panel {
+  margin-bottom: 0;
+}
+
+/* MODAL */
+.modal-content {
+  background-clip: padding-box;
+  background-color: #FFFFFF;
+  border: 1px solid rgba(0, 0, 0, 0);
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  outline: 0 none;
+  position: relative;
+}
+
+.modal-dialog {
+  z-index: 2200;
+}
+
+.modal-body {
+  padding: 20px 30px 30px 30px;
+}
+
+.inmodal .modal-body {
+  background: #f8fafb;
+}
+
+.inmodal .modal-header {
+  padding: 30px 15px;
+  text-align: center;
+}
+
+.animated.modal.fade .modal-dialog {
+  -webkit-transform: none;
+  -ms-transform: none;
+  -o-transform: none;
+  transform: none;
+}
+
+.inmodal .modal-title {
+  font-size: 26px;
+}
+
+.inmodal .modal-icon {
+  font-size: 84px;
+  color: #e2e3e3;
+}
+
+.modal-footer {
+  margin-top: 0;
+}
+
+/* WRAPPERS */
+
+#wrapper {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.wrapper {
+  padding: 0 20px;
+}
+
+.wrapper-content {
+  padding: 20px 10px 40px;
+}
+
+#page-wrapper {
+  padding: 0 15px;
+  min-height: 568px;
+  position: relative !important;
+}
+
+@media (min-width: 768px) {
+  #page-wrapper {
+    position: inherit;
+    margin: 0 0 0 240px;
+    min-height: 2002px;
+  }
+}
+
+.title-action {
+  text-align: right;
+  padding-top: 30px;
+}
+
+.ibox-content h1, .ibox-content h2, .ibox-content h3, .ibox-content h4, .ibox-content h5,
+.ibox-title h1, .ibox-title h2, .ibox-title h3, .ibox-title h4, .ibox-title h5 {
+  margin-top: 5px;
+}
+
+ul.unstyled, ol.unstyled {
+  list-style: none outside none;
+  margin-left: 0;
+}
+
+.big-icon {
+  font-size: 160px !important;
+  color: #e5e6e7;
+}
+
+/* FOOTER */
+
+.footer {
+
+  background: none repeat scroll 0 0 white;
+  border-top: 1px solid @border-color;
+  bottom: 0;
+  left: 0;
+  padding: 10px 20px;
+  position: absolute;
+  right: 0;
+}
+
+.footer.fixed_full {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  padding: 10px 20px;
+  background: white;
+  border-top: 1px solid @border-color;
+}
+
+.footer.fixed {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  padding: 10px 20px;
+  background: white;
+  border-top: 1px solid @border-color;
+  margin-left: @sidebar-width;
+}
+
+body.mini-navbar .footer.fixed,
+body.body-small.mini-navbar .footer.fixed {
+  margin: 0 0 0 70px;
+}
+
+body.mini-navbar.canvas-menu .footer.fixed,
+body.canvas-menu .footer.fixed {
+  margin: 0 !important;
+}
+
+body.fixed-sidebar.body-small.mini-navbar .footer.fixed {
+  margin: 0 0 0 @sidebar-width;
+}
+
+body.body-small .footer.fixed {
+  margin-left: 0;
+}
+
+/* PANELS */
+
+.page-heading {
+  border-top: 0;
+  padding: 0 10px 20px 10px;
+}
+
+.panel-heading h1, .panel-heading h2 {
+  margin-bottom: 5px;
+}
+
+/* TABLES */
+
+.table-bordered {
+  border: 1px solid #EBEBEB;
+}
+
+.table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
+  background-color: #F5F5F6;
+  border-bottom-width: 1px;
+}
+
+.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
+  border: 1px solid #e7e7e7;
+}
+
+.table > thead > tr > th {
+  border-bottom: 1px solid #DDDDDD;
+  vertical-align: bottom;
+}
+
+.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
+  border-top: 1px solid @border-color;
+  line-height: 1.42857;
+  padding: 8px;
+  vertical-align: top;
+}
+
+/* PANELS */
+
+.panel.blank-panel {
+  background: none;
+  margin: 0;
+}
+
+.blank-panel .panel-heading {
+  padding-bottom: 0;
+}
+
+.nav-tabs > li > a {
+  color: #A7B1C2;
+  font-weight: 600;
+  padding: 10px 20px 10px 25px;
+}
+
+.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
+  background-color: #e6e6e6;
+  color: @text-color;
+}
+
+.ui-tab .tab-content {
+  padding: 20px 0;
+}
+
+/* GLOBAL  */
+
+.no-padding {
+  padding: 0 !important;
+}
+
+.no-borders {
+  border: none !important;
+}
+
+.no-margins {
+  margin: 0 !important;
+}
+
+.no-top-border {
+  border-top: 0 !important;
+}
+
+.ibox-content.text-box {
+  padding-bottom: 0;
+  padding-top: 15px;
+}
+
+.border-left-right {
+  border-left: 1px solid @border-color;
+  border-right: 1px solid @border-color;
+}
+
+.border-top-bottom {
+  border-top: 1px solid @border-color;
+  border-bottom: 1px solid @border-color;
+}
+
+.border-left {
+  border-left: 1px solid @border-color;
+}
+
+.border-right {
+  border-right: 1px solid @border-color;
+}
+
+.border-top {
+  border-top: 1px solid @border-color;
+}
+
+.border-bottom {
+  border-bottom: 1px solid @border-color;
+}
+
+.border-size-sm {
+  border-width: 3px;
+}
+
+.border-size-md {
+  border-width: 6px;
+}
+
+.border-size-lg {
+  border-width: 9px;
+}
+
+.border-size-xl {
+  border-width: 12px;
+}
+
+.full-width {
+  width: 100% !important;
+}
+
+.link-block {
+  font-size: 12px;
+  padding: 10px;
+}
+
+.nav.navbar-top-links .link-block a {
+  font-size: 12px;
+}
+
+.link-block a {
+  font-size: 10px;
+  color: inherit;
+
+}
+
+body.mini-navbar .branding {
+  display: none;
+}
+
+img.circle-border {
+  border: 6px solid #FFFFFF;
+  border-radius: 50%;
+}
+
+.branding {
+  float: left;
+  color: #FFFFFF;
+  font-size: 18px;
+  font-weight: 600;
+  padding: 17px 20px;
+  text-align: center;
+  background-color: @navy;
+}
+
+.login-panel {
+  margin-top: 25%;
+}
+
+.icons-box h3 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.icons-box .infont a i {
+  font-size: 25px;
+  display: block;
+  color: @text-color;
+}
+
+.icons-box .infont a {
+  color: #a6a8a9;
+}
+
+.icons-box .infont a {
+  padding: 10px;
+
+  margin: 1px;
+  display: block;
+}
+
+.ui-draggable .ibox-title {
+  cursor: move;
+}
+
+.breadcrumb {
+  background-color: #ffffff;
+  padding: 0;
+  margin-bottom: 0;
+}
+
+.breadcrumb > li a {
+  color: inherit;
+}
+
+.breadcrumb > .active {
+  color: inherit;
+}
+
+code {
+  background-color: #F9F2F4;
+  border-radius: 4px;
+  color: #ca4440;
+  font-size: 90%;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+
+.ibox {
+  clear: both;
+  margin-bottom: 25px;
+  margin-top: 0;
+  padding: 0;
+}
+
+.ibox.collapsed .ibox-content {
+  display: none;
+}
+
+.ibox.collapsed .fa.fa-chevron-up:before {
+  content: "\f078";
+}
+
+.ibox.collapsed .fa.fa-chevron-down:before {
+  content: "\f077";
+}
+
+.ibox:after, .ibox:before {
+  display: table;
+}
+
+.ibox-title {
+  -moz-border-bottom-colors: none;
+  -moz-border-left-colors: none;
+  -moz-border-right-colors: none;
+  -moz-border-top-colors: none;
+  background-color: @ibox-title-bg;
+  border-color: @border-color;
+  border-image: none;
+  border-style: solid solid none;
+  border-width: 2px 0 0;
+  color: inherit;
+  margin-bottom: 0;
+  padding: 15px 15px 7px;
+  min-height: 48px;
+}
+
+.ibox-content {
+  background-color: @ibox-content-bg;
+  color: inherit;
+  padding: 15px 20px 20px 20px;
+
+  border-color: @border-color;
+  border-image: none;
+  border-style: solid solid none;
+  border-width: 1px 0;
+}
+
+.ibox-footer {
+  color: inherit;
+  border-top: 1px solid @border-color;
+  font-size: 90%;
+  background: #ffffff;
+  padding: 10px 15px;
+}
+
+table.table-mail tr td {
+  padding: 12px;
+}
+
+.table-mail .check-mail {
+  padding-left: 20px;
+}
+
+.table-mail .mail-date {
+  padding-right: 20px;
+}
+
+.star-mail, .check-mail {
+  width: 40px;
+}
+
+.unread td a, .unread td {
+  font-weight: 600;
+  color: inherit;
+}
+
+.read td a, .read td {
+  font-weight: normal;
+  color: inherit;
+}
+
+.unread td {
+  background-color: #f9f8f8;
+}
+
+.ibox-content {
+  clear: both;
+}
+
+.ibox-heading {
+  background-color: #f3f6fb;
+  border-bottom: none;
+}
+
+.ibox-heading h3 {
+  font-weight: 200;
+  font-size: 24px;
+}
+
+.ibox-title h5 {
+  display: inline-block;
+  font-size: 14px;
+  margin: 0 0 7px;
+  padding: 0;
+  text-overflow: ellipsis;
+  float: left;
+}
+
+.ibox-title .label {
+  float: left;
+  margin-left: 4px;
+}
+
+.ibox-tools {
+  display: block;
+  float: none;
+  margin-top: 0;
+  position: relative;
+  padding: 0;
+  text-align: right;
+}
+
+.ibox-tools a {
+  cursor: pointer;
+  margin-left: 5px;
+  color: #c4c4c4;
+}
+
+.ibox-tools a.btn-primary {
+  color: #fff;
+}
+
+.ibox-tools .dropdown-menu > li > a {
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
+.ibox .ibox-tools.open > .dropdown-menu {
+  left: auto;
+  right: 0;
+}
+
+/* BACKGROUNDS */
+
+.gray-bg, .bg-muted {
+  background-color: @gray;
+}
+
+.white-bg {
+  background-color: #ffffff;
+}
+
+.blue-bg, .bg-success {
+  background-color: @blue;
+  color: #ffffff;
+}
+
+.navy-bg, .bg-primary {
+  background-color: @navy;
+  color: #ffffff;
+}
+
+.lazur-bg, .bg-info {
+  background-color: @lazur;
+  color: #ffffff;
+}
+
+.yellow-bg, .bg-warning {
+  background-color: @yellow;
+  color: #ffffff;
+}
+
+.red-bg, .bg-danger {
+  background-color: @red;
+  color: #ffffff;
+}
+
+.black-bg {
+  background-color: #262626;
+}
+
+.panel-primary {
+  border-color: @navy;
+}
+
+.panel-primary > .panel-heading {
+  background-color: @navy;
+  border-color: @navy;
+}
+
+.panel-success {
+  border-color: @blue;
+}
+
+.panel-success > .panel-heading {
+  background-color: @blue;
+  border-color: @blue;
+  color: #ffffff;
+}
+
+.panel-info {
+  border-color: @lazur;
+}
+
+.panel-info > .panel-heading {
+  background-color: @lazur;
+  border-color: @lazur;
+  color: #ffffff;
+}
+
+.panel-warning {
+  border-color: @yellow;
+}
+
+.panel-warning > .panel-heading {
+  background-color: @yellow;
+  border-color: @yellow;
+  color: #ffffff;
+}
+
+.panel-danger {
+  border-color: @red;
+}
+
+.panel-danger > .panel-heading {
+  background-color: @red;
+  border-color: @red;
+  color: #ffffff;
+}
+
+.progress-bar {
+  background-color: @navy;
+}
+
+.progress-small, .progress-small .progress-bar {
+  height: 10px;
+}
+
+.progress-small, .progress-mini {
+  margin-top: 5px;
+}
+
+.progress-mini, .progress-mini .progress-bar {
+  height: 5px;
+  margin-bottom: 0;
+}
+
+.progress-bar-navy-light {
+  background-color: #3dc7ab;
+}
+
+.progress-bar-success {
+  background-color: @blue;
+}
+
+.progress-bar-info {
+  background-color: @lazur;
+}
+
+.progress-bar-warning {
+  background-color: @yellow;
+}
+
+.progress-bar-danger {
+  background-color: @red;
+}
+
+.panel-title {
+  font-size: inherit;
+}
+
+.jumbotron {
+  border-radius: 6px;
+  padding: 40px;
+}
+
+.jumbotron h1 {
+  margin-top: 0;
+}
+
+/* COLORS */
+
+.text-navy {
+  color: @navy;
+}
+
+.text-primary {
+  color: inherit;
+}
+
+.text-success {
+  color: @blue;
+}
+
+.text-info {
+  color: @lazur;
+}
+
+.text-warning {
+  color: @yellow;
+}
+
+.text-danger {
+  color: @red;
+}
+
+.text-muted {
+  color: #888888;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.simple_tag {
+  background-color: #f3f3f4;
+  border: 1px solid #e7eaec;
+  border-radius: 2px;
+  color: inherit;
+  font-size: 10px;
+  margin-right: 5px;
+  margin-top: 5px;
+  padding: 5px 12px;
+  display: inline-block;
+}
+
+.img-shadow {
+  -webkit-box-shadow: 0 0 3px 0 rgba(145, 145, 145, 1);
+  -moz-box-shadow: 0 0 3px 0 rgba(145, 145, 145, 1);
+  box-shadow: 0 0 3px 0 rgba(145, 145, 145, 1);
+}
+
+/* For handle diferent bg color in AngularJS version */
+.dashboards\.dashboard_2 nav.navbar,
+.dashboards\.dashboard_3 nav.navbar,
+.mailbox\.inbox nav.navbar,
+.mailbox\.email_view nav.navbar,
+.mailbox\.email_compose nav.navbar,
+.dashboards\.dashboard_4_1 nav.navbar,
+.metrics nav.navbar, .metrics\.index nav.navbar,
+.dashboards\.dashboard_5 nav.navbar {
+  background: #fff;
+}
+
+/* For handle diferent bg color in MVC version */
+.Dashboard_2 .navbar.navbar-static-top,
+.Dashboard_3 .navbar.navbar-static-top,
+.Dashboard_4_1 .navbar.navbar-static-top,
+.ComposeEmail .navbar.navbar-static-top,
+.EmailView .navbar.navbar-static-top,
+.Inbox .navbar.navbar-static-top,
+.Metrics .navbar.navbar-static-top,
+.Dashboard_5 .navbar.navbar-static-top {
+  background: #fff;
+}
+
+a.close-canvas-menu {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  z-index: 1011;
+  color: #a7b1c2;
+}
+
+a.close-canvas-menu:hover {
+  color: #fff;
+}
+
+.close-canvas-menu {
+  display: none;
+}
+
+.canvas-menu .close-canvas-menu {
+  display: block
+}
+
+.light-navbar .navbar.navbar-static-top {
+  background-color: #fff
+}
+
+/* FULL HEIGHT */
+
+.full-height {
+  height: 100%;
+}
+
+.fh-breadcrumb {
+  height: calc(~"100% - 196px");
+  margin: 0 -15px;
+  position: relative
+}
+
+.fh-no-breadcrumb {
+  height: calc(~"100% - 99px");
+  margin: 0 -15px;
+  position: relative
+}
+
+.fh-column {
+  background: #fff;
+  height: 100%;
+  width: 240px;
+  float: left
+}
+
+.modal-backdrop {
+  z-index: 2040 !important;
+}
+
+.modal {
+  z-index: 2050 !important;
+}
+
+.spiner-example {
+  height: 200px;
+  padding-top: 70px;
+}
+
+/* MARGINS & PADDINGS */
+
+.p-xxs {
+  padding: 5px;
+}
+
+.p-xs {
+  padding: 10px;
+}
+
+.p-sm {
+  padding: 15px;
+}
+
+.p-m {
+  padding: 20px;
+}
+
+.p-md {
+  padding: 25px;
+}
+
+.p-lg {
+  padding: 30px;
+}
+
+.p-xl {
+  padding: 40px;
+}
+
+.p-w-xs {
+  padding: 0 10px;
+}
+
+.p-w-sm {
+  padding: 0 15px;
+
+}
+
+.p-w-m {
+  padding: 0 20px;
+
+}
+
+.p-w-md {
+  padding: 0 25px;
+
+}
+
+.p-w-lg {
+  padding: 0 30px;
+
+}
+
+.p-w-xl {
+  padding: 0 40px;
+
+}
+
+.p-h-xs {
+  padding: 10px 0;
+}
+
+.p-h-sm {
+  padding: 15px 0;
+
+}
+
+.p-h-m {
+  padding: 20px 0;
+
+}
+
+.p-h-md {
+  padding: 25px 0;
+
+}
+
+.p-h-lg {
+  padding: 30px 0;
+
+}
+
+.p-h-xl {
+  padding: 40px 0;
+
+}
+
+.m-xxs {
+  margin: 2px 4px;
+}
+
+.m {
+  margin: 15px;
+}
+
+.m-xs {
+  margin: 5px;
+}
+
+.m-sm {
+  margin: 10px;
+}
+
+.m-md {
+  margin: 20px;
+}
+
+.m-lg {
+  margin: 30px;
+}
+
+.m-xl {
+  margin: 50px;
+}
+
+.m-n {
+  margin: 0 !important;
+}
+
+.m-l-none {
+  margin-left: 0;
+}
+
+.m-l-xs {
+  margin-left: 5px;
+}
+
+.m-l-sm {
+  margin-left: 10px;
+}
+
+.m-l {
+  margin-left: 15px;
+}
+
+.m-l-md {
+  margin-left: 20px;
+}
+
+.m-l-lg {
+  margin-left: 30px;
+}
+
+.m-l-xl {
+  margin-left: 40px;
+}
+
+.m-l-n-xxs {
+  margin-left: -1px;
+}
+
+.m-l-n-xs {
+  margin-left: -5px;
+}
+
+.m-l-n-sm {
+  margin-left: -10px;
+}
+
+.m-l-n {
+  margin-left: -15px;
+}
+
+.m-l-n-md {
+  margin-left: -20px;
+}
+
+.m-l-n-lg {
+  margin-left: -30px;
+}
+
+.m-l-n-xl {
+  margin-left: -40px;
+}
+
+.m-t-none {
+  margin-top: 0;
+}
+
+.m-t-xxs {
+  margin-top: 1px;
+}
+
+.m-t-xs {
+  margin-top: 5px;
+}
+
+.m-t-sm {
+  margin-top: 10px;
+}
+
+.m-t {
+  margin-top: 15px;
+}
+
+.m-t-md {
+  margin-top: 20px;
+}
+
+.m-t-lg {
+  margin-top: 30px;
+}
+
+.m-t-xl {
+  margin-top: 40px;
+}
+
+.m-t-n-xxs {
+  margin-top: -1px;
+}
+
+.m-t-n-xs {
+  margin-top: -5px;
+}
+
+.m-t-n-sm {
+  margin-top: -10px;
+}
+
+.m-t-n {
+  margin-top: -15px;
+}
+
+.m-t-n-md {
+  margin-top: -20px;
+}
+
+.m-t-n-lg {
+  margin-top: -30px;
+}
+
+.m-t-n-xl {
+  margin-top: -40px;
+}
+
+.m-r-none {
+  margin-right: 0;
+}
+
+.m-r-xxs {
+  margin-right: 1px;
+}
+
+.m-r-xs {
+  margin-right: 5px;
+}
+
+.m-r-sm {
+  margin-right: 10px;
+}
+
+.m-r {
+  margin-right: 15px;
+}
+
+.m-r-md {
+  margin-right: 20px;
+}
+
+.m-r-lg {
+  margin-right: 30px;
+}
+
+.m-r-xl {
+  margin-right: 40px;
+}
+
+.m-r-n-xxs {
+  margin-right: -1px;
+}
+
+.m-r-n-xs {
+  margin-right: -5px;
+}
+
+.m-r-n-sm {
+  margin-right: -10px;
+}
+
+.m-r-n {
+  margin-right: -15px;
+}
+
+.m-r-n-md {
+  margin-right: -20px;
+}
+
+.m-r-n-lg {
+  margin-right: -30px;
+}
+
+.m-r-n-xl {
+  margin-right: -40px;
+}
+
+.m-b-none {
+  margin-bottom: 0;
+}
+
+.m-b-xxs {
+  margin-bottom: 1px;
+}
+
+.m-b-xs {
+  margin-bottom: 5px;
+}
+
+.m-b-sm {
+  margin-bottom: 10px;
+}
+
+.m-b {
+  margin-bottom: 15px;
+}
+
+.m-b-md {
+  margin-bottom: 20px;
+}
+
+.m-b-lg {
+  margin-bottom: 30px;
+}
+
+.m-b-xl {
+  margin-bottom: 40px;
+}
+
+.m-b-n-xxs {
+  margin-bottom: -1px;
+}
+
+.m-b-n-xs {
+  margin-bottom: -5px;
+}
+
+.m-b-n-sm {
+  margin-bottom: -10px;
+}
+
+.m-b-n {
+  margin-bottom: -15px;
+}
+
+.m-b-n-md {
+  margin-bottom: -20px;
+}
+
+.m-b-n-lg {
+  margin-bottom: -30px;
+}
+
+.m-b-n-xl {
+  margin-bottom: -40px;
+}
+
+.space-15 {
+  margin: 15px 0;
+}
+
+.space-20 {
+  margin: 20px 0;
+}
+
+.space-25 {
+  margin: 25px 0;
+}
+
+.space-30 {
+  margin: 30px 0;
+}
+
+// IMAGES SIZE
+
+.img-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.img-md {
+  width: 64px;
+  height: 64px;
+}
+
+.img-lg {
+  width: 96px;
+  height: 96px;
+}
+
+// BORDER RADIUS
+
+.b-r-xs {
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+
+.b-r-sm {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+
+.b-r-md {
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+}
+
+.b-r-lg {
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
+
+.b-r-xl {
+  -webkit-border-radius: 24px;
+  -moz-border-radius: 24px;
+  border-radius: 24px;
+}
+
+// Fullscreen functions
+
+.fullscreen-ibox-mode .animated {
+  animation: none;
+}
+
+body.fullscreen-ibox-mode {
+  overflow-y: hidden;
+}
+
+.ibox.fullscreen {
+  z-index: 2030;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  margin-bottom: 0;
+}
+
+.ibox.fullscreen .collapse-link {
+  display: none;
+}
+
+.ibox.fullscreen .ibox-content {
+  min-height: calc(~"100% - 48px");
+}
+
+// Bootstrap issue in 3.3.0 with modal https://github.com/twbs/bootstrap/issues/9855
+// Fix
+body.modal-open {
+  padding-right: inherit !important;
+}
+
+// Fix modal in Safari browser
+body.modal-open .wrapper-content.animated {
+  -webkit-animation: none;
+}
+
+// Fix for modal backdrop with animate.css
+body.modal-open .animated {
+  animation-fill-mode: initial;
+  z-index: inherit
+}
+
+/* Show profile dropdown on fixed sidebar */
+body.mini-navbar.fixed-sidebar .profile-element, .block {
+  display: block !important;
+}
+
+body.mini-navbar.fixed-sidebar .nav-header {
+  padding: 33px 25px;
+}
+
+body.mini-navbar.fixed-sidebar .logo-element {
+  display: none;
+}
+
+// Remove animation on fullscreen video
+
+.fullscreen-video .animated {
+  animation: none;
+}
\ No newline at end of file

client/stylesheets/globals/buttons.import.less

+
+.btn {
+  border-radius: @btn-border-radius;
+}
+
+.float-e-margins .btn {
+  margin-bottom: 5px;
+}
+
+.btn-w-m {
+  min-width: 120px;
+}
+
+.btn-primary.btn-outline {
+  color: @navy;
+}
+
+.btn-success.btn-outline {
+  color: @blue;
+}
+
+.btn-info.btn-outline {
+  color: @lazur;
+}
+
+.btn-warning.btn-outline {
+  color: @yellow;
+}
+
+.btn-danger.btn-outline {
+  color: @red;
+}
+
+.btn-primary.btn-outline:hover,
+.btn-success.btn-outline:hover,
+.btn-info.btn-outline:hover,
+.btn-warning.btn-outline:hover,
+.btn-danger.btn-outline:hover {
+  color: #fff;
+}
+
+.btn-primary {
+  background-color: @navy;
+  border-color: @navy;
+  color: #FFFFFF;
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary.active:hover, .btn-primary.active:focus {
+  background-color: darken(@navy, 3%);
+  border-color: darken(@navy, 3%);
+  color: #FFFFFF;
+}
+
+.btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
+  background-image: none;
+}
+
+.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary.active[disabled], fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active {
+  background-color: lighten(@navy, 4%);
+  border-color: lighten(@navy, 4%);
+}
+
+.btn-success {
+  background-color: @blue;
+  border-color: @blue;
+  color: #FFFFFF;
+}
+
+.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success, .btn-success:active:focus, .btn-success:active:hover, .btn-success.active:hover, .btn-success.active:focus {
+  background-color: darken(@blue, 3%);
+  border-color: darken(@blue, 3%);
+  color: #FFFFFF;
+}
+
+.btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
+  background-image: none;
+}
+
+.btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled]:active, .btn-success.active[disabled], fieldset[disabled] .btn-success, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success.active {
+  background-color: lighten(@blue, 4%);
+  border-color: lighten(@blue, 4%);
+}
+
+.btn-info {
+  background-color: @lazur;
+  border-color: @lazur;
+  color: #FFFFFF;
+}
+
+.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info, .btn-info:active:focus, .btn-info:active:hover, .btn-info.active:hover, .btn-info.active:focus {
+  background-color: darken(@lazur, 3%);
+  border-color: darken(@lazur, 3%);
+  color: #FFFFFF;
+}
+
+.btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
+  background-image: none;
+}
+
+.btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled]:active, .btn-info.active[disabled], fieldset[disabled] .btn-info, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:active, fieldset[disabled] .btn-info.active {
+  background-color: lighten(@lazur, 4%);
+  border-color: lighten(@lazur, 4%);
+}
+
+.btn-default {
+  color: inherit;
+  background: white;
+  border: 1px solid @border-color;
+}
+
+.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default, .btn-default:active:focus, .btn-default:active:hover, .btn-default.active:hover, .btn-default.active:focus {
+  color: inherit;
+  border: 1px solid #d2d2d2;
+}
+
+.btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
+}
+
+.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default.active[disabled], fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
+  color: #cacaca;
+}
+
+.btn-warning {
+  background-color: @yellow;
+  border-color: @yellow;
+  color: #FFFFFF;
+}
+
+.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning, .btn-warning:active:focus, .btn-warning:active:hover, .btn-warning.active:hover, .btn-warning.active:focus {
+  background-color: darken(@yellow, 3%);
+  border-color: darken(@yellow, 3%);
+  color: #FFFFFF;
+}
+
+.btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {
+  background-image: none;
+}
+
+.btn-warning.disabled, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled]:active, .btn-warning.active[disabled], fieldset[disabled] .btn-warning, fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:active, fieldset[disabled] .btn-warning.active {
+  background-color: lighten(@yellow, 4%);
+  border-color: lighten(@yellow, 4%);
+}
+
+.btn-danger {
+  background-color: @red;
+  border-color: @red;
+  color: #FFFFFF;
+}
+
+.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger, .btn-danger:active:focus, .btn-danger:active:hover, .btn-danger.active:hover, .btn-danger.active:focus {
+  background-color: darken(@red, 3%);
+  border-color: darken(@red, 3%);
+  color: #FFFFFF;
+}
+
+.btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
+  background-image: none;
+}
+
+.btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled]:active, .btn-danger.active[disabled], fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active {
+  background-color: lighten(@red, 4%);
+  border-color: lighten(@red, 4%);
+}
+
+.btn-link {
+  color: inherit;
+}
+
+.btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.active, .open .dropdown-toggle.btn-link {
+  color: @navy;
+  text-decoration: none;
+}
+
+.btn-link:active, .btn-link.active, .open .dropdown-toggle.btn-link {
+  background-image: none;
+}
+
+.btn-link.disabled, .btn-link.disabled:hover, .btn-link.disabled:focus, .btn-link.disabled:active, .btn-link.disabled.active, .btn-link[disabled], .btn-link[disabled]:hover, .btn-link[disabled]:focus, .btn-link[disabled]:active, .btn-link.active[disabled], fieldset[disabled] .btn-link, fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:focus, fieldset[disabled] .btn-link:active, fieldset[disabled] .btn-link.active {
+  color: #cacaca;
+}
+
+.btn-white {
+  color: inherit;
+  background: white;
+  border: 1px solid @border-color;
+}
+
+.btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active, .open .dropdown-toggle.btn-white, .btn-white:active:focus, .btn-white:active:hover, .btn-white.active:hover, .btn-white.active:focus {
+  color: inherit;
+  border: 1px solid #d2d2d2;
+}
+
+.btn-white:active, .btn-white.active {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
+}
+
+.btn-white:active, .btn-white.active, .open .dropdown-toggle.btn-white {
+  background-image: none;
+}
+
+.btn-white.disabled, .btn-white.disabled:hover, .btn-white.disabled:focus, .btn-white.disabled:active, .btn-white.disabled.active, .btn-white[disabled], .btn-white[disabled]:hover, .btn-white[disabled]:focus, .btn-white[disabled]:active, .btn-white.active[disabled], fieldset[disabled] .btn-white, fieldset[disabled] .btn-white:hover, fieldset[disabled] .btn-white:focus, fieldset[disabled] .btn-white:active, fieldset[disabled] .btn-white.active {
+  color: #cacaca;
+}
+
+.form-control, .form-control:focus, .has-error .form-control:focus, .has-success .form-control:focus, .has-warning .form-control:focus, .navbar-collapse, .navbar-form, .navbar-form-custom .form-control:focus, .navbar-form-custom .form-control:hover, .open .btn.dropdown-toggle, .panel, .popover, .progress, .progress-bar {
+  box-shadow: none;
+}
+
+.btn-outline {
+  color: inherit;
+  background-color: transparent;
+  transition: all .5s;
+}
+
+.btn-rounded {
+  border-radius: 50px;
+}
+
+.btn-large-dim {
+  width: 90px;
+  height: 90px;
+  font-size: 42px;
+}
+
+button.dim {
+  display: inline-block;
+  text-decoration: none;
+  text-transform: uppercase;
+  text-align: center;
+  padding-top: 6px;
+  margin-right: 10px;
+  position: relative;
+  cursor: pointer;
+  border-radius: 5px;
+  font-weight: 600;
+  margin-bottom: 20px !important;
+}
+
+button.dim:active {
+  top: 3px;
+}
+
+button.btn-primary.dim {
+  box-shadow: inset 0 0 0 darken(@navy, 6%), 0 5px 0 0 darken(@navy, 6%), 0 10px 5px #999;
+}
+
+button.btn-primary.dim:active {
+  box-shadow: inset 0 0 0 darken(@navy, 6%), 0 2px 0 0 darken(@navy, 6%), 0 5px 3px #999;
+}
+
+button.btn-default.dim {
+  box-shadow: inset 0 0 0 darken(@dark-gray, 6%), 0 5px 0 0 darken(@dark-gray, 6%), 0 10px 5px #999;
+}
+
+button.btn-default.dim:active {
+  box-shadow: inset 0 0 0 darken(@dark-gray, 6%), 0 2px 0 0 darken(@dark-gray, 6%), 0 5px 3px #999;
+}
+
+button.btn-warning.dim {
+  box-shadow: inset 0 0 0 darken(@yellow, 6%), 0 5px 0 0 darken(@yellow, 6%), 0 10px 5px #999;
+}
+
+button.btn-warning.dim:active {
+  box-shadow: inset 0 0 0 darken(@yellow, 6%), 0 2px 0 0 darken(@yellow, 6%), 0 5px 3px #999;
+}
+
+button.btn-info.dim {
+  box-shadow: inset 0 0 0 darken(@lazur, 6%), 0 5px 0 0 darken(@lazur, 6%), 0 10px 5px #999;
+}
+
+button.btn-info.dim:active {
+  box-shadow: inset 0 0 0 darken(@lazur, 6%), 0 2px 0 0 darken(@lazur, 6%), 0 5px 3px #999;
+}
+
+button.btn-success.dim {
+  box-shadow: inset 0 0 0 darken(@blue, 6%), 0 5px 0 0 darken(@blue, 6%), 0 10px 5px #999;
+}
+
+button.btn-success.dim:active {
+  box-shadow: inset 0 0 0 darken(@blue, 6%), 0 2px 0 0 darken(@blue, 6%), 0 5px 3px #999;
+}
+
+button.btn-danger.dim {
+  box-shadow: inset 0 0 0 darken(@red, 6%), 0 5px 0 0 darken(@red, 6%), 0 10px 5px #999;
+}
+
+button.btn-danger.dim:active {
+  box-shadow: inset 0 0 0 darken(@red, 6%), 0 2px 0 0 darken(@red, 6%), 0 5px 3px #999;
+}
+
+button.dim:before {
+  font-size: 50px;
+  line-height: 1em;
+  font-weight: normal;
+  color: #fff;
+  display: block;
+  padding-top: 10px;
+
+}
+
+button.dim:active:before {
+  top: 7px;
+  font-size: 50px;
+}
+
+.btn:focus {
+  outline: none !important;
+}

client/stylesheets/globals/chat.import.less

+#small-chat {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 100;
+}
+
+#small-chat .badge {
+  position: absolute;
+  top: -3px;
+  right: -4px;
+}
+
+.open-small-chat {
+  height: 38px;
+  width: 38px;
+  display: block;
+  background: #1ab394;
+  padding: 9px 8px;
+  text-align: center;
+  color: #fff;
+  border-radius: 50%;
+}
+
+.open-small-chat:hover {
+  color: white;
+  background: #1ab394;
+}
+
+.small-chat-box {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 75px;
+  background: #fff;
+  border: 1px solid @border-color;
+  width: 230px;
+  height: 320px;
+  border-radius: 4px;
+}
+
+.small-chat-box.ng-small-chat {
+  display: block;
+}
+
+.body-small {
+  .small-chat-box {
+    bottom: 70px;
+    right: 20px;
+  }
+}
+
+.small-chat-box.active {
+  display: block;
+}
+
+.small-chat-box {
+
+  .heading {
+    background: @nav-bg;
+    padding: 8px 15px;
+    font-weight: bold;
+    color: #fff;
+  }
+
+  .chat-date {
+    opacity: 0.6;
+    font-size: 10px;
+    font-weight: normal;
+  }
+
+  .content {
+    padding: 15px 15px;
+
+    .author-name {
+      font-weight: bold;
+      margin-bottom: 3px;
+      font-size: 11px;
+    }
+
+    > div {
+      padding-bottom: 20px;
+    }
+
+    .chat-message {
+      padding: 5px 10px;
+      border-radius: 6px;
+      font-size: 11px;
+      line-height: 14px;
+      max-width: 80%;
+      background: #f3f3f4;
+      margin-bottom: 10px;
+    }
+
+    .chat-message.active {
+      background: #1ab394;
+      color: #fff;
+    }
+
+    .left {
+      text-align: left;
+      clear: both;
+
+      .chat-message {
+        float: left;
+      }
+    }
+
+    .right {
+      text-align: right;
+      clear: both;
+
+      .chat-message {
+        float: right;
+      }
+
+    }
+
+  }
+
+  .form-chat {
+    padding: 10px 10px;
+  }
+
+}
\ No newline at end of file

client/stylesheets/globals/custom.import.less

+/* Only demo */
+@media (max-width: 1000px) {
+  .welcome-message {
+    display: none;
+  }
+}
\ No newline at end of file

client/stylesheets/globals/media.import.less

+@media (min-width: 768px) {
+  #page-wrapper {
+    position: inherit;
+    margin: 0 0 0 @sidebar-width;
+    min-height: 100vh;
+  }
+
+  .navbar-static-side {
+    z-index: 2001;
+    position: absolute;
+    width: @sidebar-width;
+  }
+
+  .navbar-top-links .dropdown-messages,
+  .navbar-top-links .dropdown-tasks,
+  .navbar-top-links .dropdown-alerts {
+    margin-left: auto;
+  }
+}
+
+@media (max-width: 768px) {
+
+  #page-wrapper {
+    position: inherit;
+    margin: 0 0 0 0;
+    min-height: 100vh;
+  }
+
+  .body-small .navbar-static-side {
+    display: none;
+    z-index: 2001;
+    position: absolute;
+    width: 70px;
+  }
+
+  .body-small.mini-navbar .navbar-static-side {
+    display: block;
+  }
+
+  .lock-word {
+    display: none;
+  }
+
+  .navbar-form-custom {
+    display: none;
+  }
+
+  .navbar-header {
+    display: inline;
+    float: left;
+  }
+
+  .sidebar-panel {
+    z-index: 2;
+    position: relative;
+    width: auto;
+    min-height: 100% !important;
+  }
+
+  .sidebar-content .wrapper {
+    padding-right: 0;
+    z-index: 1;
+  }
+
+  .fixed-sidebar.body-small .navbar-static-side {
+    display: none;
+    z-index: 2001;
+    position: fixed;
+    width: @sidebar-width;
+  }
+
+  .fixed-sidebar.body-small.mini-navbar .navbar-static-side {
+    display: block;
+  }
+
+  .ibox-tools {
+    float: none;
+    text-align: right;
+    display: block;
+  }
+
+  .navbar-static-side { display: none; }
+
+  body:not(.mini-navbar) {
+    -webkit-transition: background-color 500ms linear;
+    -moz-transition: background-color 500ms linear;
+    -o-transition: background-color 500ms linear;
+    -ms-transition: background-color 500ms linear;
+    transition: background-color 500ms linear;
+    background-color: #f3f3f4
+  }
+
+}
+
+@media (max-width: 350px) {
+
+  .timeline-item .date {
+    text-align: left;
+    width: 110px;
+    position: relative;
+    padding-top: 30px;
+  }
+
+  .timeline-item .date i {
+    position: absolute;
+    top: 0;
+    left: 15px;
+    padding: 5px;
+    width: 30px;
+    text-align: center;
+    border: 1px solid @border-color;
+    background: #f8f8f8;
+  }
+
+  .timeline-item .content {
+    border-left: none;
+    border-top: 1px solid @border-color;
+    padding-top: 10px;
+    min-height: 100px;
+  }
+
+  .nav.navbar-top-links li.dropdown {
+    display: none;
+  }
+
+  .ibox-tools {
+    float: none;
+    text-align: left;
+    display: inline-block;
+  }
+
+}

client/stylesheets/globals/metismenu.import.less

+/*
+ * metismenu - v2.0.2
+ * A jQuery menu plugin
+ * https://github.com/onokumus/metisMenu
+ *
+ * Made by Osman Nuri Okumus
+ * Under MIT License
+ */
+
+.metismenu .plus-minus, .metismenu .plus-times {
+  float: right
+}
+
+.metismenu .arrow {
+  float: right;
+  line-height: 1.42857
+}
+
+.metismenu .glyphicon.arrow:before {
+  content: "\e079"
+}
+
+.metismenu .active > a > .glyphicon.arrow:before {
+  content: "\e114"
+}
+
+.metismenu .fa.arrow:before {
+  content: "\f104"
+}
+
+.metismenu .active > a > .fa.arrow:before {
+  content: "\f107"
+}
+
+.metismenu .ion.arrow:before {
+  content: "\f3d2"
+}
+
+.metismenu .active > a > .ion.arrow:before {
+  content: "\f3d0"
+}
+
+.metismenu .fa.plus-minus:before, .metismenu .fa.plus-times:before {
+  content: "\f067"
+}
+
+.metismenu .active > a > .fa.plus-times {
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg)
+}
+
+.metismenu .active > a > .fa.plus-minus:before {
+  content: "\f068"
+}
+
+.metismenu .collapse {
+  display: none
+}
+
+.metismenu .collapse.in {
+  display: block
+}
+
+.metismenu .collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  -webkit-transition-timing-function: ease;
+  transition-timing-function: ease;
+  -webkit-transition-duration: .35s;
+  transition-duration: .35s;
+  -webkit-transition-property: height, visibility;
+  transition-property: height, visibility
+}
+
+.mini-navbar {
+  .metismenu .collapse { opacity: 0; }
+  .metismenu .collapse.in { opacity: 1; }
+  .metismenu .collapse a { display: none }
+  .metismenu .collapse.in a { display: block }
+}
+
+
+
+
+
+
+
+