thingsboard-aplcache

diff --git a/ui/src/app/components/dashboard.scss b/ui/src/app/components/dashboard.scss
index e0a9afd..b4a696a 100644
--- a/ui/src/app/components/dashboard.scss
+++ b/ui/src/app/components/dashboard.scss
@@ -22,7 +22,7 @@ div.tb-widget {
   overflow: hidden;
   outline: none;
 
-  @include transition(all .2s ease-in-out);
+  transition: all .2s ease-in-out;
 
   .tb-widget-title {
     max-height: 60px;
@@ -99,7 +99,7 @@ md-content.tb-dashboard-content {
   outline: none;
 
   .gridster-item {
-    @include transition(none);
+    transition: none;
   }
 }
 

diff --git a/ui/src/app/components/grid.scss b/ui/src/app/components/grid.scss
index 4313848..50e110b 100644
--- a/ui/src/app/components/grid.scss
+++ b/ui/src/app/components/grid.scss
@@ -20,7 +20,7 @@
 }
 
 .tb-card-item {
-  @include transition(all .2s ease-in-out);
+  transition: all .2s ease-in-out;
 
   md-card-content {
     max-height: 53px;
@@ -46,7 +46,7 @@
 .tb-current-item {
   opacity: .5;
 
-  @include transform(scale(1.05));
+  transform: scale(1.05);
 }
 
 #tb-vertical-container {

diff --git a/ui/src/app/components/menu-link.scss b/ui/src/app/components/menu-link.scss
index 299797c..be274d3 100644
--- a/ui/src/app/components/menu-link.scss
+++ b/ui/src/app/components/menu-link.scss
@@ -16,7 +16,7 @@
 @import "~compass-sass-mixins/lib/compass";
 
 .md-button-toggle .md-toggle-icon.tb-toggled {
-  @include transform(rotateZ(180deg));
+  transform: rotateZ(180deg);
 }
 
 .tb-menu-toggle-list.ng-hide {
@@ -28,7 +28,7 @@
   z-index: 1;
   overflow: hidden;
 
-  @include transition(.75s cubic-bezier(.35, 0, .25, 1));
+  transition: .75s cubic-bezier(.35, 0, .25, 1);
 
-  @include transition-property(height);
+  transition-property: height;
 }

diff --git a/ui/src/app/components/react/json-form.scss b/ui/src/app/components/react/json-form.scss
index cca9d07..d324abe 100644
--- a/ui/src/app/components/react/json-form.scss
+++ b/ui/src/app/components/react/json-form.scss
@@ -28,7 +28,7 @@ $input-label-float-scale: .75 !default;
   line-height: 12px;
   color: rgb(244, 67, 54);
 
-  @include transition(all 450ms cubic-bezier(.23, 1, .32, 1) 0ms);
+  transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms;
 }
 
 .tb-container {
@@ -77,13 +77,12 @@ label.tb-label {
   bottom: 100%;
   left: 0;
   color: rgba(0, 0, 0, .54);
-  transform-origin: left top;
-  -webkit-font-smoothing: antialiased;
 
-  @include transform(translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale));
+  transition: transform $swift-ease-out-timing-function $swift-ease-out-duration, width $swift-ease-out-timing-function $swift-ease-out-duration;
 
-  @include transition(transform $swift-ease-out-timing-function $swift-ease-out-duration,
-  width $swift-ease-out-timing-function $swift-ease-out-duration);
+  transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
+  transform-origin: left top;
+  -webkit-font-smoothing: antialiased;
 
   &.tb-focused {
     color: rgb(96, 125, 139);

diff --git a/ui/src/app/components/side-menu.scss b/ui/src/app/components/side-menu.scss
index 46da8db..f6efcb9 100644
--- a/ui/src/app/components/side-menu.scss
+++ b/ui/src/app/components/side-menu.scss
@@ -53,7 +53,7 @@
   margin: auto 0 auto auto;
   background-size: 100% auto;
 
-  @include transition(transform .3s, ease-in-out);
+  transition: transform .3s, ease-in-out;
 }
 
 .tb-side-menu .md-button {

diff --git a/ui/src/app/dashboard/dashboard.scss b/ui/src/app/dashboard/dashboard.scss
index 00a0653..8ba4401 100644
--- a/ui/src/app/dashboard/dashboard.scss
+++ b/ui/src/app/dashboard/dashboard.scss
@@ -75,13 +75,13 @@ section.tb-dashboard-toolbar {
 
   &.tb-dashboard-toolbar-opened {
     right: 0;
-    // @include transition(right .3s cubic-bezier(.55,0,.55,.2));
+    // transition: right .3s cubic-bezier(.55, 0, .55, .2);
   }
 
   &.tb-dashboard-toolbar-closed {
     right: 18px;
 
-    @include transition(right .3s cubic-bezier(.55,0,.55,.2) .2s);
+    transition: right .3s cubic-bezier(.55, 0, .55, .2) .2s;
   }
 }
 
@@ -102,14 +102,14 @@ section.tb-dashboard-toolbar {
         margin-top: $toolbar-height;
       }
 
-      @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2));
+      transition: margin-top .3s cubic-bezier(.55, 0, .55, .2);
     }
   }
 
   &.tb-dashboard-toolbar-closed {
     margin-top: 0;
 
-    @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2) .2s);
+    transition: margin-top .3s cubic-bezier(.55, 0, .55, .2) .2s;
   }
 
   .tb-dashboard-layouts {

diff --git a/ui/src/app/dashboard/dashboard-toolbar.scss b/ui/src/app/dashboard/dashboard-toolbar.scss
index 80fd876..c247634 100644
--- a/ui/src/app/dashboard/dashboard-toolbar.scss
+++ b/ui/src/app/dashboard/dashboard-toolbar.scss
@@ -31,7 +31,7 @@ tb-dashboard-toolbar {
           &.md-fab {
             opacity: 1;
 
-            @include transition(opacity .3s cubic-bezier(.55,0,.55,.2));
+            transition: opacity .3s cubic-bezier(.55, 0, .55, .2);
 
             .md-fab-toolbar-background {
               background-color: $primary-default !important;
@@ -50,7 +50,7 @@ tb-dashboard-toolbar {
           line-height: 36px;
           opacity: .5;
 
-          @include transition(opacity .3s cubic-bezier(.55,0,.55,.2) .2s);
+          transition: opacity .3s cubic-bezier(.55, 0, .55, .2) .2s;
 
           md-icon {
             position: absolute;

diff --git a/ui/src/app/layout/home.scss b/ui/src/app/layout/home.scss
index 48c1553..43b8329 100644
--- a/ui/src/app/layout/home.scss
+++ b/ui/src/app/layout/home.scss
@@ -42,7 +42,7 @@
     border: none;
     opacity: .75;
 
-    @include transition(opacity .35s);
+    transition: opacity .35s;
   }
 
   a:hover,

diff --git a/ui/src/app/rulechain/script/node-script-test.scss b/ui/src/app/rulechain/script/node-script-test.scss
index 1dd174d..e68691d 100644
--- a/ui/src/app/rulechain/script/node-script-test.scss
+++ b/ui/src/app/rulechain/script/node-script-test.scss
@@ -29,7 +29,7 @@ md-dialog.tb-node-script-test-dialog {
   }
 
   .tb-split {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     overflow-x: hidden;
     overflow-y: auto;
   }

diff --git a/ui/src/app/widget/lib/rpc/round-switch.scss b/ui/src/app/widget/lib/rpc/round-switch.scss
index 342c995..c89b26b 100644
--- a/ui/src/app/widget/lib/rpc/round-switch.scss
+++ b/ui/src/app/widget/lib/rpc/round-switch.scss
@@ -59,6 +59,8 @@ $background-color: #e6e7e8 !default;
 
     .switch {
       position: relative;
+
+      box-sizing: border-box;
       width: 260px;
       min-width: 260px;
       height: 260px;
@@ -73,12 +75,10 @@ $background-color: #e6e7e8 !default;
       background: linear-gradient(180deg, #bbb, #ddd);
       border-radius: 130px;
 
-      @include box-sizing(border-box);
-
-      @include box-shadow(
-        0 0 0 8px rgba(0,0,0,.1)
-        ,0 0 3px 1px rgba(0,0,0,.1)
-        ,inset 0 8px  3px -8px rgba(255,255,255,.4));
+      box-shadow:
+        0 0 0 8px rgba(0, 0, 0, .1),
+        0 0 3px 1px rgba(0, 0, 0, .1),
+        inset 0 8px  3px -8px rgba(255, 255, 255, .4);
 
       input {
         display: none;
@@ -90,7 +90,7 @@ $background-color: #e6e7e8 !default;
         width: 100%;
         text-align: center;
 
-        @include text-shadow(1px 1px 4px #4a4a4a);
+        text-shadow: 1px 1px 4px #4a4a4a;
       }
 
       .on {
@@ -98,15 +98,15 @@ $background-color: #e6e7e8 !default;
         font-family: sans-serif;
         color: #444;
 
-        @include transition(all .1s);
+        transition: all .1s;
       }
 
       .off {
         bottom: 5px;
 
-        @include transition(all .1s);
+        transition: all .1s;
 
-        @include transform(scaleY(.85));
+        transform: scaleY(.85);
       }
 
       .but {
@@ -120,17 +120,20 @@ $background-color: #e6e7e8 !default;
         border-bottom-width: 0;
         border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;
 
-        @include box-shadow(inset 8px 6px 5px -7px #a2a2a2,
-        inset -8px 6px 5px -7px #a2a2a2,
-        inset 0 -3px 2px -2px rgba(200, 200, 200, .5),
-        0 3px 3px -2px #fff,
-        inset 0 -230px 60px -200px rgba(255, 255, 255, .2),
-        inset 0 220px 40px -200px rgba(0, 0, 0, .3));
+        box-shadow:
+          inset 8px 6px 5px -7px #a2a2a2,
+          inset -8px 6px 5px -7px #a2a2a2,
+          inset 0 -3px 2px -2px rgba(200, 200, 200, .5),
+          0 3px 3px -2px #fff,
+          inset 0 -230px 60px -200px rgba(255, 255, 255, .2),
+          inset 0 220px 40px -200px rgba(0, 0, 0, .3);
 
-        @include transition(all .2s);
+        transition: all .2s;
       }
 
       .back {
+
+        box-sizing: border-box;
         width: 210px;
         height: 210px;
         padding: 4px 4px;
@@ -139,34 +142,33 @@ $background-color: #e6e7e8 !default;
         background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
         border-radius: 105px;
 
-        @include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, .3),
-        -30px 30px 30px -20px rgba(58, 58, 58, .3),
-        0 30px 30px 0 rgba(16, 16, 16, .3),
-        inset 0 -1px 0 0 #484848);
-
-        @include box-sizing(border-box);
+        box-shadow:
+          30px 30px 30px -20px rgba(58, 58, 58, .3),
+          -30px 30px 30px -20px rgba(58, 58, 58, .3),
+          0 30px 30px 0 rgba(16, 16, 16, .3),
+          inset 0 -1px 0 0 #484848;
 
-        @include transition(all .2s);
+        transition: all .2s;
       }
 
 
       input:checked + .back .on,
       input:checked + .back .off{
-        @include text-shadow(1px 1px 4px #4a4a4a);
+        text-shadow: 1px 1px 4px #4a4a4a;
       }
 
       input:checked + .back .on{
         top: 10px;
         color: #4c4c4c;
 
-        @include transform(scaleY(.85));
+        transform: scaleY(.85);
       }
 
       input:checked + .back .off{
         bottom: 5px;
         color: #444;
 
-        @include transform(scaleY(1));
+        transform: scaleY(1);
       }
 
       input:checked + .back .but{
@@ -175,12 +177,13 @@ $background-color: #e6e7e8 !default;
         background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
         border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px;
 
-        @include box-shadow(inset 8px -4px 5px -7px #a9a9a9,
-        inset -8px -4px 5px -7px #808080,
-        0 -3px 8px -4px rgba(50, 50, 50, .4),
-        inset 0 3px 4px -2px #9c9c9c,
-        inset 0 280px 40px -200px rgba(0, 0, 0, .2),
-        inset 0 -200px 40px -200px rgba(180, 180, 180, .2));
+        box-shadow:
+          inset 8px -4px 5px -7px #a9a9a9,
+          inset -8px -4px 5px -7px #808080,
+          0 -3px 8px -4px rgba(50, 50, 50, .4),
+          inset 0 3px 4px -2px #9c9c9c,
+          inset 0 280px 40px -200px rgba(0, 0, 0, .2),
+          inset 0 -200px 40px -200px rgba(180, 180, 180, .2);
       }
 
       input:checked + .back{
@@ -188,10 +191,11 @@ $background-color: #e6e7e8 !default;
 
         background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);
 
-        @include box-shadow(30px 30px 30px -20px rgba(49, 49, 49, .1),
-        -30px 30px 30px -20px rgba(111, 111, 111, .1),
-        0 30px 30px 0 rgba(0, 0, 0, .2),
-        inset 0 1px 2px 0 rgba(167, 167, 167, .6));
+        box-shadow:
+          30px 30px 30px -20px rgba(49, 49, 49, .1),
+          -30px 30px 30px -20px rgba(111, 111, 111, .1),
+          0 30px 30px 0 rgba(0, 0, 0, .2),
+          inset 0 1px 2px 0 rgba(167, 167, 167, .6);
       }
     }
   }

diff --git a/ui/src/app/widget/widget-editor.scss b/ui/src/app/widget/widget-editor.scss
index cd374e3..0eb37af 100644
--- a/ui/src/app/widget/widget-editor.scss
+++ b/ui/src/app/widget/widget-editor.scss
@@ -19,7 +19,7 @@ $edit-toolbar-height: 40px !default;
 
 .tb-editor {
   .tb-split {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     overflow-x: hidden;
     overflow-y: auto;
   }

diff --git a/ui/src/scss/animations.scss b/ui/src/scss/animations.scss
index 4ecfc34..61b9bac 100644
--- a/ui/src/scss/animations.scss
+++ b/ui/src/scss/animations.scss
@@ -15,34 +15,34 @@
  */
 @import "~compass-sass-mixins/lib/animate";
 
-@include keyframes(tbMoveFromTopFade) {
+@keyframes tbMoveFromTopFade {
   from {
     opacity: 0;
 
-    @include transform(translate(0, -100%));
+    transform: translate(0, -100%);
   }
 }
 
-@include keyframes(tbMoveToTopFade) {
+@keyframes tbMoveToTopFade {
   to {
     opacity: 0;
 
-    @include transform(translate(0, -100%));
+    transform: translate(0, -100%);
   }
 }
 
-@include keyframes(tbMoveFromBottomFade) {
+@keyframes tbMoveFromBottomFade {
   from {
     opacity: 0;
 
-    @include transform(translate(0, 100%));
+    transform: translate(0, 100%);
   }
 }
 
-@include keyframes(tbMoveToBottomFade) {
+@keyframes tbMoveToBottomFade {
   to {
     opacity: 0;
 
-    @include transform(translate(0, 150%));
+    transform: translate(0, 150%);
   }
 }

diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index a32f76b..f35ea9d 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -51,7 +51,7 @@ a {
   text-decoration: none;
   border-bottom: 1px solid rgba(64, 84, 178, .25);
 
-  @include transition(border-bottom .35s);
+  transition: border-bottom .35s;
 }
 
 a:hover,
@@ -550,7 +550,7 @@ $previewSize: 100px !default;
 }
 
 .tb-error-message.ng-animate {
-  @include transition(all .3s cubic-bezier(.55, 0, .55, .2));
+  transition: all .3s cubic-bezier(.55, 0, .55, .2);
 }
 
 .tb-error-message.ng-enter-prepare,
@@ -646,13 +646,13 @@ section.tb-top-header-buttons {
 }
 
 .tb-header-buttons .tb-btn-header {
-  @include animation(tbMoveFromTopFade .3s ease both);
   position: relative !important;
   display: inline-block !important;
+  animation: tbMoveFromTopFade .3s ease both;
 }
 
 .tb-header-buttons .tb-btn-header.ng-hide {
-  @include animation(tbMoveToTopFade .3s ease both);
+  animation: tbMoveToTopFade .3s ease both;
 }
 
 /***********************
@@ -668,19 +668,19 @@ section.tb-footer-buttons {
 }
 
 .tb-footer-buttons .tb-btn-footer {
-  @include animation(tbMoveFromBottomFade .3s ease both);
   position: relative !important;
   display: inline-block !important;
+  animation: tbMoveFromBottomFade .3s ease both;
 }
 
 .tb-footer-buttons .tb-btn-footer.ng-hide {
-  @include animation(tbMoveToBottomFade .3s ease both);
+  animation: tbMoveToBottomFade .3s ease both;
 }
 
 ._md-toast-open-bottom .tb-footer-buttons {
-  @include transition(all .4s cubic-bezier(.25, .8, .25, 1));
+  transition: all .4s cubic-bezier(.25, .8, .25, 1);
 
-  @include transform(translate3d(0, -42px, 0));
+  transform: translate3d(0, -42px, 0);
 }
 
 /***********************