Fix stylelint errors

ui/.stylelintrc

@@ -0,0 +1,292 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": ["always", {
+      "except": ["first-nested"],
+      "ignore": ["after-comment"]
+    }],
+    "at-rule-name-space-after": "always",
+    "at-rule-no-vendor-prefix": true,
+    "at-rule-semicolon-space-before": "never",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": null,
+    "block-opening-brace-space-before": null,
+    "color-named": "never",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-empty-line-before": null,
+    "declaration-no-important": null,
+    "font-family-name-quotes": "always-where-recommended",
+    "font-weight-notation": [
+      "numeric", {
+        "ignore": ["relative"]
+    }],
+    "function-url-no-scheme-relative": true,
+    "function-url-quotes": "always",
+    "length-zero-no-unit": true,
+    "max-empty-lines": 2,
+    "max-line-length": null,
+    "media-feature-name-no-vendor-prefix": true,
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "never",
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": true,
+    "number-leading-zero": "never",
+    "media-feature-name-no-unknown": [true, {
+      "ignoreMediaFeatureNames": ["prefers-reduced-motion"]
+    }],
+    "order/properties-order": [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "z-index",
+      "box-sizing",
+      "display",
+      "flex",
+      "flex-align",
+      "flex-basis",
+      "flex-direction",
+      "flex-wrap",
+      "flex-flow",
+      "flex-shrink",
+      "flex-grow",
+      "flex-order",
+      "flex-pack",
+      "align-content",
+      "align-items",
+      "align-self",
+      "justify-content",
+      "order",
+      "float",
+      "width",
+      "min-width",
+      "max-width",
+      "height",
+      "min-height",
+      "max-height",
+      "padding",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "margin",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "overflow",
+      "overflow-x",
+      "overflow-y",
+      "-webkit-overflow-scrolling",
+      "-ms-overflow-x",
+      "-ms-overflow-y",
+      "-ms-overflow-style",
+      "columns",
+      "column-count",
+      "column-fill",
+      "column-gap",
+      "column-rule",
+      "column-rule-width",
+      "column-rule-style",
+      "column-rule-color",
+      "column-span",
+      "column-width",
+      "orphans",
+      "widows",
+      "clip",
+      "clear",
+      "font",
+      "font-family",
+      "font-size",
+      "font-style",
+      "font-weight",
+      "font-variant",
+      "font-size-adjust",
+      "font-stretch",
+      "font-effect",
+      "font-emphasize",
+      "font-emphasize-position",
+      "font-emphasize-style",
+      "font-smooth",
+      "src",
+      "hyphens",
+      "line-height",
+      "color",
+      "text-align",
+      "text-align-last",
+      "text-emphasis",
+      "text-emphasis-color",
+      "text-emphasis-style",
+      "text-emphasis-position",
+      "text-decoration",
+      "text-indent",
+      "text-justify",
+      "text-outline",
+      "-ms-text-overflow",
+      "text-overflow",
+      "text-overflow-ellipsis",
+      "text-overflow-mode",
+      "text-shadow",
+      "text-transform",
+      "text-wrap",
+      "-webkit-text-size-adjust",
+      "-ms-text-size-adjust",
+      "letter-spacing",
+      "-ms-word-break",
+      "word-break",
+      "word-spacing",
+      "-ms-word-wrap",
+      "word-wrap",
+      "overflow-wrap",
+      "tab-size",
+      "white-space",
+      "vertical-align",
+      "direction",
+      "unicode-bidi",
+      "list-style",
+      "list-style-position",
+      "list-style-type",
+      "list-style-image",
+      "pointer-events",
+      "-ms-touch-action",
+      "touch-action",
+      "cursor",
+      "visibility",
+      "zoom",
+      "table-layout",
+      "empty-cells",
+      "caption-side",
+      "border-spacing",
+      "border-collapse",
+      "content",
+      "quotes",
+      "counter-reset",
+      "counter-increment",
+      "resize",
+      "user-select",
+      "nav-index",
+      "nav-up",
+      "nav-right",
+      "nav-down",
+      "nav-left",
+      "background",
+      "background-color",
+      "background-image",
+      "filter",
+      "background-repeat",
+      "background-attachment",
+      "background-position",
+      "background-position-x",
+      "background-position-y",
+      "background-clip",
+      "background-origin",
+      "background-size",
+      "border",
+      "border-color",
+      "border-style",
+      "border-width",
+      "border-top",
+      "border-top-color",
+      "border-top-style",
+      "border-top-width",
+      "border-right",
+      "border-right-color",
+      "border-right-style",
+      "border-right-width",
+      "border-bottom",
+      "border-bottom-color",
+      "border-bottom-style",
+      "border-bottom-width",
+      "border-left",
+      "border-left-color",
+      "border-left-style",
+      "border-left-width",
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "border-image",
+      "border-image-source",
+      "border-image-slice",
+      "border-image-width",
+      "border-image-outset",
+      "border-image-repeat",
+      "outline",
+      "outline-width",
+      "outline-style",
+      "outline-color",
+      "outline-offset",
+      "box-shadow",
+      "opacity",
+      "-ms-interpolation-mode",
+      "page-break-after",
+      "page-break-before",
+      "page-break-inside",
+      "transition",
+      "transition-delay",
+      "transition-timing-function",
+      "transition-duration",
+      "transition-property",
+      "transform",
+      "transform-origin",
+      "perspective",
+      "appearance",
+      "animation",
+      "animation-name",
+      "animation-duration",
+      "animation-play-state",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-iteration-count",
+      "animation-direction",
+      "animation-fill-mode",
+      "fill",
+      "stroke"
+    ],
+    "property-no-vendor-prefix": null,
+    "rule-empty-line-before": ["always", {
+      "except": ["first-nested"],
+      "ignore": ["after-comment"]
+    }],
+    "scss/dollar-variable-default": [true, { "ignore": "local" }],
+    "selector-attribute-quotes": "always",
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-newline-before": "never-multi-line",
+    "selector-list-comma-space-after": "always-single-line",
+    "selector-list-comma-space-before": "never-single-line",
+    "selector-max-attribute": 2,
+    "selector-max-class": 6,
+    "selector-max-combinators": 8,
+    "selector-max-compound-selectors": 9,
+    "selector-max-empty-lines": 1,
+    "selector-max-id": 1,
+    "selector-max-specificity": null,
+    "selector-max-type": 5,
+    "selector-max-universal": 1,
+    "selector-no-qualifying-type": null,
+    "selector-no-vendor-prefix": null,
+    "selector-type-no-unknown": [true, {
+      "ignoreTypes": [
+        "/^md-/",
+        "/^mdp-/",
+        "/^ng-/",
+        "/^tb-/",
+        "/^v-pane/"
+      ]
+    }],
+    "string-quotes": "double",
+    "value-keyword-case": "lower",
+    "value-list-comma-newline-after": "always-multi-line",
+    "value-list-comma-newline-before": "never-multi-line",
+    "value-list-comma-space-after": "always-single-line",
+    "value-no-vendor-prefix": null
+  }
+}

ui/src/app/alarm/alarm-details-dialog.scss

@@ -13,14 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-alarm-details-panel {
-  margin-left: 15px;
-  border: 1px solid #C0C0C0;
   height: 100%;
+  margin-left: 15px;
+  border: 1px solid #c0c0c0;
+
   #tb-alarm-details {
-    min-width: 600px;
-    min-height: 200px;
     width: 100%;
+    min-width: 600px;
     height: 100%;
+    min-height: 200px;
   }
 }

ui/src/app/alarm/alarm.scss

@@ -13,26 +13,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-alarm-container {
   overflow-x: auto;
 }
 
 md-list.tb-alarm-table {
-  padding: 0px;
   min-width: 700px;
+  padding: 0;
 
   md-list-item {
-    padding: 0px;
+    padding: 0;
   }
 
   .tb-row {
     height: 48px;
-    padding: 0px;
+    padding: 0;
     overflow: hidden;
   }
 
   .tb-row:hover {
-    background-color: #EEEEEE;
+    background-color: #eee;
   }
 
   .tb-header:hover {
@@ -41,9 +42,9 @@ md-list.tb-alarm-table {
 
   .tb-header {
     .tb-cell {
-      color: rgba(0,0,0,.54);
       font-size: 12px;
       font-weight: 700;
+      color: rgba(0, 0, 0, .54);
       white-space: nowrap;
       background: none;
     }
@@ -52,11 +53,12 @@ md-list.tb-alarm-table {
   .tb-cell {
     padding: 0 24px;
     margin: auto 0;
-    color: rgba(0,0,0,.87);
+    overflow: hidden;
     font-size: 13px;
-    vertical-align: middle;
+    color: rgba(0, 0, 0, .87);
     text-align: left;
-    overflow: hidden;
+    vertical-align: middle;
+
     .md-button {
       padding: 0;
       margin: 0;
@@ -66,12 +68,11 @@ md-list.tb-alarm-table {
   .tb-cell.tb-number {
     text-align: right;
   }
-
 }
 
 #tb-alarm-content {
-  min-width: 400px;
-  min-height: 50px;
   width: 100%;
+  min-width: 400px;
   height: 100%;
+  min-height: 50px;
 }

ui/src/app/audit/audit-log-details-dialog.scss

@@ -13,10 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-#tb-audit-log-action-data, #tb-audit-log-failure-details {
+
-  min-width: 400px;
+#tb-audit-log-action-data,
-  min-height: 50px;
+#tb-audit-log-failure-details {
   width: 100%;
+  min-width: 400px;
   height: 100%;
-  border: 1px solid #C0C0C0;
+  min-height: 50px;
-}
+  border: 1px solid #c0c0c0;
+}

ui/src/app/audit/audit-log.scss

@@ -13,17 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-audit-logs {
   background-color: #fff;
+
   .tb-audit-log-margin-18px {
     margin-bottom: 18px;
   }
+
   .tb-audit-log-toolbar {
     font-size: 20px;
   }
+
   md-input-container.tb-audit-log-search-input {
     .md-errors-spacer {
-      min-height: 0px;
+      min-height: 0;
     }
   }
 }
@@ -32,27 +36,26 @@
   overflow-x: auto;
 }
 
-
-
 md-list.tb-audit-log-table {
-  padding: 0px;
   min-width: 700px;
+  padding: 0;
+
   &.tb-audit-log-table-full {
     min-width: 900px;
   }
 
   md-list-item {
-    padding: 0px;
+    padding: 0;
   }
 
   .tb-row {
     height: 48px;
-    padding: 0px;
+    padding: 0;
     overflow: hidden;
   }
 
   .tb-row:hover {
-    background-color: #EEEEEE;
+    background-color: #eee;
   }
 
   .tb-header:hover {
@@ -61,9 +64,9 @@ md-list.tb-audit-log-table {
 
   .tb-header {
     .tb-cell {
-      color: rgba(0,0,0,.54);
       font-size: 12px;
       font-weight: 700;
+      color: rgba(0, 0, 0, .54);
       white-space: nowrap;
       background: none;
     }
@@ -72,11 +75,12 @@ md-list.tb-audit-log-table {
   .tb-cell {
     padding: 0 24px;
     margin: auto 0;
-    color: rgba(0,0,0,.87);
+    overflow: hidden;
     font-size: 13px;
-    vertical-align: middle;
+    color: rgba(0, 0, 0, .87);
     text-align: left;
-    overflow: hidden;
+    vertical-align: middle;
+
     .md-button {
       padding: 0;
       margin: 0;
@@ -86,5 +90,4 @@ md-list.tb-audit-log-table {
   .tb-cell.tb-number {
     text-align: right;
   }
-
 }

ui/src/app/components/dashboard-autocomplete.scss

@@ -13,16 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-dashboard-autocomplete {
   .tb-not-found {
     display: block;
-    line-height: 1.5;
     height: 48px;
+    line-height: 1.5;
   }
+
   .tb-dashboard-item {
     display: block;
     height: 48px;
   }
+
   li {
     height: auto !important;
     white-space: normal !important;

ui/src/app/components/dashboard-select.scss

@@ -13,18 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../scss/constants';
+@import "../../scss/constants";
 
 tb-dashboard-select {
   min-width: 52px;
+
   md-select {
-    pointer-events: all;
     max-width: 300px;
+    pointer-events: all;
   }
 }
 
 .tb-dashboard-select {
   min-height: 32px;
+
   span {
     pointer-events: all;
     cursor: pointer;
@@ -38,23 +40,27 @@ tb-dashboard-select {
 }
 
 .tb-dashboard-select-panel {
+  min-width: 300px;
+  max-width: 320px;
   max-height: 150px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0 7px 8px -4px rgba(0, 0, 0, .2),
+    0 13px 19px 2px rgba(0, 0, 0, .14),
+    0 5px 24px 4px rgba(0, 0, 0, .12);
+
   @media (min-height: 350px) {
     max-height: 250px;
   }
-  max-width: 320px;
+
   @media (min-width: $layout-breakpoint-xs) {
     max-width: 100%;
   }
-  min-width: 300px;
+
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
-  0 13px 19px 2px rgba(0, 0, 0, 0.14),
-  0 5px 24px 4px rgba(0, 0, 0, 0.12);
-  overflow-x: hidden;
-  overflow-y: auto;
   md-content {
     background-color: #fff;
   }
-}
+}

ui/src/app/components/dashboard.scss

@@ -21,6 +21,7 @@ div.tb-widget {
   margin: 0;
   overflow: hidden;
   outline: none;
+
   @include transition(all .2s ease-in-out);
 
   .tb-widget-title {
@@ -32,7 +33,7 @@ div.tb-widget {
 
     tb-timewindow {
       font-size: 14px;
-      opacity: 0.85;
+      opacity: .85;
     }
   }
 
@@ -44,17 +45,19 @@ div.tb-widget {
     margin: 0;
 
     .md-button.md-icon-button {
-      margin: 0 !important;
-      padding: 0 !important;
-      line-height: 20px;
       width: 32px;
-      height: 32px;
       min-width: 32px;
+      height: 32px;
       min-height: 32px;
-      md-icon, ng-md-icon {
+      padding: 0 !important;
+      margin: 0 !important;
+      line-height: 20px;
+
+      md-icon,
+      ng-md-icon {
         width: 20px;
-        height: 20px;
         min-width: 20px;
+        height: 20px;
         min-height: 20px;
         font-size: 20px;
       }
@@ -63,8 +66,8 @@ div.tb-widget {
 
   .tb-widget-content {
     tb-widget {
-      width: 100%;
       position: relative;
+      width: 100%;
     }
   }
 }
@@ -75,40 +78,41 @@ div.tb-widget.tb-highlighted {
 }
 
 div.tb-widget.tb-not-highlighted {
-  opacity: 0.5;
+  opacity: .5;
 }
 
 tb-dashboard {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
 }
 
 md-content.tb-dashboard-content {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
-  outline: none;
+  left: 0;
   background: none;
+  outline: none;
+
   .gridster-item {
-      @include transition(none);
+    @include transition(none);
   }
 }
 
 .tb-widget-error-container {
   position: absolute;
-  background-color: #fff;
   width: 100%;
   height: 100%;
+  background-color: #fff;
 }
 
 .tb-widget-error-msg {
-  color: red;
+  padding: 5px;
   font-size: 16px;
+  color: #f00;
   word-wrap: break-word;
-  padding: 5px;
 }

ui/src/app/components/datakey-config.scss

@@ -13,9 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-datakey-config {
   min-width: 500px !important;
   min-height: 500px !important;
+
   md-content {
     background-color: #fff;
   }

ui/src/app/components/datasource-entity.scss

@@ -13,17 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../scss/constants';
+@import "../../scss/constants";
 
-.tb-entity-alias-autocomplete, .tb-timeseries-datakey-autocomplete, .tb-attribute-datakey-autocomplete, .tb-alarm-datakey-autocomplete {
+.tb-entity-alias-autocomplete,
+.tb-timeseries-datakey-autocomplete,
+.tb-attribute-datakey-autocomplete,
+.tb-alarm-datakey-autocomplete {
   .tb-not-found {
     display: block;
-    line-height: 1.5;
     height: 48px;
+    line-height: 1.5;
+
     .tb-no-entries {
       line-height: 48px;
     }
   }
+
   li {
     height: auto !important;
     white-space: normal !important;
@@ -32,13 +37,14 @@
 
 tb-datasource-entity {
   @media (min-width: $layout-breakpoint-sm) {
-    padding-left: 4px;
     padding-right: 4px;
+    padding-left: 4px;
   }
+
   tb-entity-alias-select {
     @media (min-width: $layout-breakpoint-sm) {
       width: 200px;
       max-width: 200px;
     }
   }
-}
+}

ui/src/app/components/datasource-func.scss

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../scss/constants';
+@import "../../scss/constants";
 
 .tb-datasource-func {
   @media (min-width: $layout-breakpoint-sm) {
@@ -22,19 +22,22 @@
 
   md-input-container.tb-datasource-name {
     .md-errors-spacer {
-        display: none;
+      display: none;
     }
   }
 
-  .tb-func-datakey-autocomplete, .tb-alarm-datakey-autocomplete {
+  .tb-func-datakey-autocomplete,
+  .tb-alarm-datakey-autocomplete {
     .tb-not-found {
       display: block;
-      line-height: 1.5;
       height: 48px;
+      line-height: 1.5;
+
       .tb-no-entries {
         line-height: 48px;
       }
     }
+
     li {
       height: auto !important;
       white-space: normal !important;

ui/src/app/components/datasource.scss

@@ -13,39 +13,43 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-datasource {
-   #entity-autocomplete {
+  #entity-autocomplete {
-     height: 30px;
+    height: 30px;
-     margin-top: 18px;
+    margin-top: 18px;
-     md-autocomplete-wrap {
+
-       height: 30px;
+    md-autocomplete-wrap {
-     }
+      height: 30px;
-     input, input:not(.md-input) {
+    }
-       height: 30px;
+
-     }
+    input,
-   }
+    input:not(.md-input) {
-   #datasourceType {
+      height: 30px;
+    }
   }
 }
 
 @mixin tb-checkered-bg() {
   background-color: #fff;
-  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd),
+  background-image:
-  linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd);
+    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd),
-  background-size: 8px 8px;
+    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd);
   background-position: 0 0, 4px 4px;
+  background-size: 8px 8px;
 }
 
 .tb-color-preview {
-  content: '';
+  position: relative;
-  min-width: 24px;
   width: 24px;
+  min-width: 24px;
   height: 24px;
+  overflow: hidden;
+  content: "";
   border: 2px solid #fff;
   border-radius: 50%;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .098), 0 1px 5px 0 rgba(0, 0, 0, .084);
-  position: relative;
+
-  overflow: hidden;
   @include tb-checkered-bg();
 
   .tb-color-result {
@@ -60,6 +64,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
   .tb-chip-separator {
     white-space: pre;
   }

ui/src/app/components/datetime-period.scss

@@ -13,13 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 tb-datetime-period {
   md-input-container {
-    margin-bottom: 0px;
+    margin-bottom: 0;
+
     .md-errors-spacer {
-      min-height: 0px;
+      min-height: 0;
     }
   }
+
   mdp-date-picker {
     .md-input {
       width: 150px !important;

ui/src/app/components/details-sidenav.scss

@@ -13,47 +13,51 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../scss/constants';
+@import "../../scss/constants";
 
 .tb-details-title {
-  font-size: 1.000rem;
+  width: inherit;
-  @media (min-width: $layout-breakpoint-gt-sm) {
-    font-size: 1.600rem;
-  }
-  font-weight: 400;
-  text-transform: uppercase;
   margin: 20px 8px 0 0;
   overflow: hidden;
+  font-size: 1rem;
+  font-weight: 400;
   text-overflow: ellipsis;
+  text-transform: uppercase;
   white-space: nowrap;
-  width: inherit;
+
+  @media (min-width: $layout-breakpoint-gt-sm) {
+    font-size: 1.6rem;
+  }
 }
 
 .tb-details-subtitle {
-  font-size: 1.000rem;
+  width: inherit;
   margin: 10px 0;
-  opacity: 0.8;
   overflow: hidden;
+  font-size: 1rem;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: inherit;
+  opacity: .8;
 }
 
 md-sidenav.tb-sidenav-details {
   .md-toolbar-tools {
-      min-height: 100px;
+    height: 100%;
-      max-height: 120px;
+    min-height: 100px;
-      height: 100%;
+    max-height: 120px;
   }
+  z-index: 59 !important;
   width: 100% !important;
   max-width: 100% !important;
-  z-index: 59 !important;
+
   @media (min-width: $layout-breakpoint-gt-sm) {
     width: 80% !important;
   }
+
   @media (min-width: $layout-breakpoint-gt-md) {
     width: 65% !important;
   }
+
   tb-dashboard {
     md-content {
       background-color: $primary-hue-3;

ui/src/app/components/entity-alias-select.scss

@@ -13,15 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-entity-alias-autocomplete {
   .tb-not-found {
     display: block;
-    line-height: 1.5;
     height: 48px;
+    line-height: 1.5;
+
     .tb-no-entries {
       line-height: 48px;
     }
   }
+
   li {
     height: auto !important;
     white-space: normal !important;

ui/src/app/components/expand-fullscreen.scss

@@ -16,37 +16,38 @@
 @import "../../scss/constants";
 
 .tb-fullscreen {
-  section.header-buttons {
-    top: 25px;
-  }
-}
-
-.tb-fullscreen {
-  width: 100% !important;
-  height: 100% !important;
   position: fixed !important;
   top: 0;
   left: 0;
+  width: 100% !important;
+  height: 100% !important;
+
+  section.header-buttons {
+    top: 25px;
+  }
 }
 
 .tb-fullscreen-parent {
-  background-color: $gray;
-  width: 100%;
-  height: 100%;
   position: fixed;
   top: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $gray;
 }
 
-.md-button.tb-fullscreen-button-style, .tb-fullscreen-button-style {
+.md-button.tb-fullscreen-button-style,
+.tb-fullscreen-button-style {
   background: #ccc;
-  opacity: 0.85;
+  opacity: .85;
+
   ng-md-icon {
     color: #666;
   }
 }
 
-.md-button.tb-fullscreen-button-pos, .tb-fullscreen-button-pos {
+.md-button.tb-fullscreen-button-pos,
+.tb-fullscreen-button-pos {
   position: absolute;
   top: 10px;
   right: 10px;

ui/src/app/components/grid.scss

@@ -21,15 +21,19 @@
 
 .tb-card-item {
   @include transition(all .2s ease-in-out);
+
   md-card-content {
-    padding-top: 0px;
     max-height: 53px;
+    padding-top: 0;
   }
+
   md-card-title {
     width: 100%;
+
     md-card-title-text {
-      max-height: 32px;
       min-width: 50%;
+      max-height: 32px;
+
       .md-headline {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -40,14 +44,15 @@
 }
 
 .tb-current-item {
-  opacity: 0.5;
+  opacity: .5;
+
   @include transform(scale(1.05));
 }
 
 #tb-vertical-container {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
 }

ui/src/app/components/js-func.scss

@@ -13,11 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 tb-js-func {
   position: relative;
+
   .tb-disabled {
-    color: rgba(0,0,0,0.38);
+    color: rgba(0, 0, 0, .38);
   }
+
   .fill-height {
     height: 100%;
   }
@@ -25,25 +28,27 @@ tb-js-func {
 
 .tb-js-func-toolbar {
   .md-button.tidy {
-    color: #7B7B7B;
     min-width: 32px;
     min-height: 15px;
-    line-height: 15px;
-    font-size: 0.800rem;
-    margin: 0 5px 0 0;
     padding: 4px;
-    background: rgba(220, 220, 220, 0.35);
+    margin: 0 5px 0 0;
+    font-size: .8rem;
+    line-height: 15px;
+    color: #7b7b7b;
+    background: rgba(220, 220, 220, .35);
   }
 }
 
 .tb-js-func-panel {
-  margin-left: 15px;
-  border: 1px solid #C0C0C0;
   height: calc(100% - 80px);
+  margin-left: 15px;
+  border: 1px solid #c0c0c0;
+
   #tb-javascript-input {
-    min-width: 200px;
     width: 100%;
+    min-width: 200px;
     height: 100%;
+
     &:not(.fill-height) {
       min-height: 200px;
     }

ui/src/app/components/json-content.scss

@@ -13,8 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 tb-json-content {
   position: relative;
+
   .fill-height {
     height: 100%;
   }
@@ -22,25 +24,27 @@ tb-json-content {
 
 .tb-json-content-toolbar {
   .md-button.tidy {
-    color: #7B7B7B;
     min-width: 32px;
     min-height: 15px;
-    line-height: 15px;
-    font-size: 0.800rem;
-    margin: 0 5px 0 0;
     padding: 4px;
-    background: rgba(220, 220, 220, 0.35);
+    margin: 0 5px 0 0;
+    font-size: .8rem;
+    line-height: 15px;
+    color: #7b7b7b;
+    background: rgba(220, 220, 220, .35);
   }
 }
 
 .tb-json-content-panel {
-  margin-left: 15px;
-  border: 1px solid #C0C0C0;
   height: 100%;
+  margin-left: 15px;
+  border: 1px solid #c0c0c0;
+
   #tb-json-input {
-    min-width: 200px;
     width: 100%;
+    min-width: 200px;
     height: 100%;
+
     &:not(.fill-height) {
       min-height: 200px;
     }

ui/src/app/components/json-form.scss

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 tb-json-form {
-  overflow: auto;
   padding-bottom: 14px !important;
-}
+  overflow: auto;
+}

ui/src/app/components/json-object-edit.scss

@@ -13,21 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 tb-json-object-edit {
   position: relative;
+
   .fill-height {
     height: 100%;
   }
 }
 
 .tb-json-object-panel {
-  margin-left: 15px;
-  border: 1px solid #C0C0C0;
   height: 100%;
+  margin-left: 15px;
+  border: 1px solid #c0c0c0;
+
   #tb-json-input {
-    min-width: 200px;
     width: 100%;
+    min-width: 200px;
     height: 100%;
+
     &:not(.fill-height) {
       min-height: 200px;
     }

ui/src/app/components/kv-map.scss

@@ -13,14 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-kv-map {
   span.no-data-found {
     position: relative;
+    display: flex;
     height: 40px;
     text-transform: uppercase;
-    display: flex;
+
     &.disabled {
-      color: rgba(0,0,0,0.38);
+      color: rgba(0, 0, 0, .38);
     }
   }
-}
+}

ui/src/app/components/legend-config.scss

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .md-panel {
   &.tb-legend-config-panel {
     position: absolute;
@@ -20,21 +21,26 @@
 }
 
 .tb-legend-config-panel {
-  max-height: 220px;
   min-width: 220px;
-  background: white;
+  max-height: 220px;
-  border-radius: 4px;
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
-  0 13px 19px 2px rgba(0, 0, 0, 0.14),
-  0 5px 24px 4px rgba(0, 0, 0, 0.12);
   overflow: hidden;
-  form, fieldset {
+  background: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0 7px 8px -4px rgba(0, 0, 0, .2),
+    0 13px 19px 2px rgba(0, 0, 0, .14),
+    0 5px 24px 4px rgba(0, 0, 0, .12);
+
+  form,
+  fieldset {
     height: 100%;
   }
+
   md-content {
-    background-color: #fff;
     overflow: hidden;
+    background-color: #fff;
   }
+
   .md-padding {
     padding: 0 16px;
   }

ui/src/app/components/legend.scss

@@ -13,39 +13,49 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 table.tb-legend {
   width: 100%;
   font-size: 12px;
-  .tb-legend-header, .tb-legend-value {
+
-     text-align: right;
+  .tb-legend-header,
+  .tb-legend-value {
+    text-align: right;
   }
+
   .tb-legend-header {
     th {
-      color: rgb(255,110,64);
-      white-space: nowrap;
       padding: 0 10px 1px 0;
+      color: rgb(255, 110, 64);
+      white-space: nowrap;
     }
   }
+
   .tb-legend-keys {
-    td.tb-legend-label, td.tb-legend-value {
+    td.tb-legend-label,
-      white-space: nowrap;
+    td.tb-legend-value {
       padding: 2px 10px;
+      white-space: nowrap;
     }
+
     .tb-legend-line {
+      display: inline-block;
       width: 15px;
       height: 3px;
-      display: inline-block;
       vertical-align: middle;
     }
+
     .tb-legend-label {
       text-align: left;
       outline: none;
+
       &.tb-horizontal {
         width: 95%;
       }
+
       &.tb-hidden-label {
         text-decoration: line-through;
-        opacity: 0.6;
+        opacity: .6;
       }
     }
   }

ui/src/app/components/material-icon-select.scss

@@ -13,14 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-material-icon-select {
-    md-icon {
+  md-icon {
-        padding: 4px;
+    padding: 4px;
-        margin: 8px 4px 4px;
+    margin: 8px 4px 4px;
-        cursor: pointer;
+    cursor: pointer;
-        border: solid 1px rgba(0,0,0,0.27);
+    border: solid 1px rgba(0, 0, 0, .27);
-    }
+  }
-    md-input-container {
+
-        margin-bottom: 0px;
+  md-input-container {
-    }
+    margin-bottom: 0;
-}
+  }
+}

ui/src/app/components/material-icons-dialog.scss

@@ -13,18 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-material-icons-dialog {
   button.md-icon-button.tb-select-icon-button {
-    border: solid 1px orange;
-    border-radius: 0%;
-    padding: 16px;
-    height: 56px;
     width: 56px;
+    height: 56px;
+    padding: 16px;
     margin: 10px;
+    border: solid 1px #ffa500;
+    border-radius: 0%;
   }
+
   .tb-icons-load {
     top: 64px;
-    background: rgba(255,255,255,0.75);
     z-index: 3;
+    background: rgba(255, 255, 255, .75);
   }
-}
+}

ui/src/app/components/menu-link.scss

@@ -24,9 +24,11 @@
 }
 
 .tb-menu-toggle-list {
-  overflow: hidden;
   position: relative;
   z-index: 1;
-  @include transition(0.75s cubic-bezier(0.35, 0, 0.25, 1));
+  overflow: hidden;
+
+  @include transition(.75s cubic-bezier(.35, 0, .25, 1));
+
   @include transition-property(height);
 }

ui/src/app/components/react/json-form-ace-editor.scss

@@ -13,30 +13,35 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .json-form-ace-editor {
-    position: relative;
+  position: relative;
-    border: 1px solid #C0C0C0;
+  height: 100%;
-    height: 100%;
+  border: 1px solid #c0c0c0;
-    .title-panel {
+
-        position: absolute;
+  .title-panel {
-        font-size: 0.800rem;
+    position: absolute;
-        font-weight: 500;
+    top: 10px;
-        top: 10px;
+    right: 20px;
-        right: 20px;
+    z-index: 5;
-        z-index: 5;
+    font-size: .8rem;
-        label {
+    font-weight: 500;
-          color: #00acc1;
+
-          background: rgba(220, 220, 220, 0.35);
+    label {
-          border-radius: 5px;
+      padding: 4px;
-          padding: 4px;
+      color: #00acc1;
-          text-transform: uppercase;
+      text-transform: uppercase;
-        }
+      background: rgba(220, 220, 220, .35);
-        button.tidy-button {
+      border-radius: 5px;
-          background: rgba(220, 220, 220, 0.35) !important;
-          span {
-             padding: 0px !important;
-             font-size: 12px !important;
-          }
-        }
     }
-}
+
+    button.tidy-button {
+      background: rgba(220, 220, 220, .35) !important;
+
+      span {
+        padding: 0 !important;
+        font-size: 12px !important;
+      }
+    }
+  }
+}

ui/src/app/components/react/json-form-color.scss

@@ -15,21 +15,23 @@
  */
 @mixin tb-checkered-bg() {
   background-color: #fff;
-  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd),
+  background-image:
-  linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd);
+    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd),
-  background-size: 8px 8px;
+    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd);
   background-position: 0 0, 4px 4px;
+  background-size: 8px 8px;
 }
 
 .tb-color-preview {
-  content: '';
+  position: relative;
   width: 24px;
   height: 24px;
+  overflow: hidden;
+  content: "";
   border: 2px solid #fff;
   border-radius: 50%;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .098), 0 1px 5px 0 rgba(0, 0, 0, .084);
-  position: relative;
+
-  overflow: hidden;
   @include tb-checkered-bg();
 
   .tb-color-result {

ui/src/app/components/react/json-form-image.scss

@@ -13,66 +13,69 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-$previewSize: 100px;
+$previewSize: 100px !default;
 
 .tb-image-select-container {
   position: relative;
-  height: $previewSize;
   width: 100%;
+  height: $previewSize;
 }
 
 .tb-image-preview {
-   max-width: $previewSize;
+  width: 100%;
-   max-height: $previewSize;
+  max-width: $previewSize;
-   width: 100%;
+  height: 100%;
-   height: 100%;
+  max-height: $previewSize;
 }
 
 .tb-image-preview-container {
-   position: relative;
+  position: relative;
-   width: $previewSize;
+  float: left;
-   height: $previewSize;
+  width: $previewSize;
-   margin-right: 12px;
+  height: $previewSize;
-   border: solid 1px;
+  margin-right: 12px;
-   vertical-align: top;
+  vertical-align: top;
-   float: left;
+  border: solid 1px;
-   div {
+
-      width: 100%;
+  div {
-      font-size: 18px;
+    position: absolute;
-      text-align: center;
+    top: 50%;
-      position: absolute;
+    left: 50%;
-      top: 50%;
+    width: 100%;
-      left: 50%;
+    font-size: 18px;
-      transform: translate(-50%,-50%);
+    text-align: center;
-   }
+    transform: translate(-50%, -50%);
+  }
 }
 
 .tb-dropzone {
-   position: relative;
+  position: relative;
-   border: dashed 2px;
+  height: $previewSize;
-   height: $previewSize;
+  padding: 0 8px;
-   vertical-align: top;
+  overflow: hidden;
-   padding: 0 8px;
+  vertical-align: top;
-   overflow: hidden;
+  border: dashed 2px;
-   div {
+
-      width: 100%;
+  div {
-      font-size: 24px;
+    position: absolute;
-      text-align: center;
+    top: 50%;
-      position: absolute;
+    left: 50%;
-      top: 50%;
+    width: 100%;
-      left: 50%;
+    font-size: 24px;
-      transform: translate(-50%,-50%);
+    text-align: center;
-   }
+    transform: translate(-50%, -50%);
+  }
 }
 
 .tb-image-clear-container {
-   width: 48px;
+  position: relative;
-   height: $previewSize;
+  float: right;
-   position: relative;
+  width: 48px;
-   float: right;
+  height: $previewSize;
 }
+
 .tb-image-clear-btn {
-   position: absolute !important;
+  position: absolute !important;
-   top: 50%;
+  top: 50%;
-   transform: translate(0%,-50%) !important;
+  transform: translate(0%, -50%) !important;
 }

ui/src/app/components/react/json-form.scss

@@ -15,87 +15,92 @@
  */
 @import "~compass-sass-mixins/lib/compass";
 
-$swift-ease-out-duration: 0.4s !default;
+$swift-ease-out-duration: .4s !default;
-$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
 
 $input-label-float-offset: 6px !default;
-$input-label-float-scale: 0.75 !default;
+$input-label-float-scale: .75 !default;
 
 .json-form-error {
-    position: relative;
+  position: relative;
-    bottom: -5px;
+  bottom: -5px;
-    font-size: 12px;
+  font-size: 12px;
-    line-height: 12px;
+  line-height: 12px;
-    color: rgb(244, 67, 54);
+  color: rgb(244, 67, 54);
-    @include transition(all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms);
+
+  @include transition(all 450ms cubic-bezier(.23, 1, .32, 1) 0ms);
 }
 
 .tb-container {
-    position: relative;
+  position: relative;
-    margin-top: 32px;
+  padding: 10px 0;
-    padding: 10px 0;
+  margin-top: 32px;
 }
 
 .tb-field {
-    &.tb-required {
+  &.tb-required {
-        label:after {
+    label::after {
-            content: ' *';
+      font-size: 13px;
-            font-size: 13px;
+      color: rgba(0, 0, 0, .54);
-            vertical-align: top;
+      vertical-align: top;
-            color: rgba(0,0,0,0.54);
+      content: " *";
-        }
     }
-    &.tb-focused:not(.tb-readonly) {
+  }
-        label:after {
+
-            color: rgb(221,44,0);
+  &.tb-focused:not(.tb-readonly) {
-        }
+    label::after {
+      color: rgb(221, 44, 0);
     }
+  }
 }
 
 .tb-date-field {
-    &.tb-required {
+  &.tb-required {
-        div>div:first-child:after {
+    div > div:first-child::after {
-            content: ' *';
+      font-size: 13px;
-            font-size: 13px;
+      color: rgba(0, 0, 0, .54);
-            vertical-align: top;
+      vertical-align: top;
-            color: rgba(0,0,0,0.54);
+      content: " *";
-        }
     }
-    &.tb-focused:not(.tb-readonly) {
+  }
-        div>div:first-child:after {
+
-            color: rgb(221,44,0);
+  &.tb-focused:not(.tb-readonly) {
-        }
+    div > div:first-child::after {
+      color: rgb(221, 44, 0);
     }
+  }
 }
 
 label.tb-label {
-    color: rgba(0,0,0,0.54);
+  position: absolute;
-    -webkit-font-smoothing: antialiased;
+  right: auto;
-    position: absolute;
+  bottom: 100%;
-    bottom: 100%;
+  left: 0;
-    left: 0;
+  color: rgba(0, 0, 0, .54);
-    right: auto;
+  transform-origin: left top;
-    @include transform(translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale));
+  -webkit-font-smoothing: antialiased;
-    @include transition(transform $swift-ease-out-timing-function $swift-ease-out-duration,
-                          width $swift-ease-out-timing-function $swift-ease-out-duration);
-    transform-origin: left top;
-
-    &.tb-focused {
-        color: rgb(96,125,139);
-    }
 
-    &.tb-required:after {
+  @include transform(translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale));
-        content: ' *';
-        font-size: 13px;
-        vertical-align: top;
-        color: rgba(0,0,0,0.54);
-    }
 
-    &.tb-focused:not(.tb-readonly):after {
+  @include transition(transform $swift-ease-out-timing-function $swift-ease-out-duration,
-        color: rgb(221,44,0);
+  width $swift-ease-out-timing-function $swift-ease-out-duration);
-    }
+
+  &.tb-focused {
+    color: rgb(96, 125, 139);
+  }
+
+  &.tb-required::after {
+    font-size: 13px;
+    color: rgba(0, 0, 0, .54);
+    vertical-align: top;
+    content: " *";
+  }
+
+  &.tb-focused:not(.tb-readonly)::after {
+    color: rgb(221, 44, 0);
+  }
 }
 
 .tb-head-label {
-    color: rgba(0,0,0,0.54);
+  color: rgba(0, 0, 0, .54);
 }

ui/src/app/components/related-entity-autocomplete.scss

@@ -13,16 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-related-entity-autocomplete {
   .tb-not-found {
     display: block;
-    line-height: 1.5;
     height: 48px;
+    line-height: 1.5;
   }
+
   .tb-entity-item {
     display: block;
     height: 48px;
   }
+
   li {
     height: auto !important;
     white-space: normal !important;

ui/src/app/components/side-menu.scss

@@ -16,21 +16,22 @@
 @import "~compass-sass-mixins/lib/compass";
 
 .tb-side-menu .md-button.tb-active {
-  background-color: rgba(255, 255, 255, 0.15);
   font-weight: 500;
+  background-color: rgba(255, 255, 255, .15);
 }
 
-.tb-side-menu, .tb-side-menu ul {
+.tb-side-menu,
-  list-style: none;
+.tb-side-menu ul {
   padding: 0;
   margin-top: 0;
+  list-style: none;
 }
 
 .tb-side-menu .tb-menu-toggle-list a.md-button {
   padding: 0 16px 0 32px;
+  font-weight: 500;
   text-transform: none;
   text-rendering: optimizeLegibility;
-  font-weight: 500;
 }
 
 .tb-side-menu .tb-menu-toggle-list .md-button {
@@ -43,36 +44,38 @@
 }
 
 .tb-side-menu > li {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-bottom: 1px solid rgba(0, 0, 0, .12);
 }
 
 .tb-side-menu .md-button-toggle .md-toggle-icon {
-  background-size: 100% auto;
   display: inline-block;
-  margin: auto 0 auto auto;
   width: 15px;
+  margin: auto 0 auto auto;
+  background-size: 100% auto;
+
   @include transition(transform .3s, ease-in-out);
 }
 
 .tb-side-menu .md-button {
   display: flex;
-  border-radius: 0;
+  width: 100%;
-  color: inherit;
-  cursor: pointer;
-  line-height: 40px;
-  margin: 0;
   max-height: 40px;
+  padding: 0 16px;
+  margin: 0;
   overflow: hidden;
-  padding: 0px 16px;
+  line-height: 40px;
+  color: inherit;
   text-align: left;
   text-decoration: none;
-  white-space: nowrap;
   text-overflow: ellipsis;
-  width: 100%;
+  white-space: nowrap;
+  cursor: pointer;
+  border-radius: 0;
+
   span {
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
@@ -83,10 +86,10 @@
 
 .tb-side-menu ng-md-icon {
   margin-right: 8px;
-  margin-left: 0px;
+  margin-left: 0;
 }
 
 .tb-side-menu md-icon {
   margin-right: 8px;
-  margin-left: 0px;
+  margin-left: 0;
 }

ui/src/app/components/timeinterval.scss

@@ -13,25 +13,32 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 tb-timeinterval {
   min-width: 355px;
+
   md-input-container {
-    margin-bottom: 0px;
+    margin-bottom: 0;
+
     .md-errors-spacer {
-      min-height: 0px;
+      min-height: 0;
     }
   }
+
   mdp-date-picker {
     .md-input {
       width: 150px;
     }
   }
+
   .md-input {
     width: 70px !important;
   }
+
   .advanced-switch {
     margin-top: 0;
   }
+
   .advanced-label {
     margin: 5px 0;
   }

ui/src/app/components/timewindow.scss

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .md-panel {
   &.tb-timewindow-panel {
     position: absolute;
@@ -20,38 +21,48 @@
 }
 
 .tb-timewindow-panel {
-  max-height: 440px;
   min-width: 417px;
-  background: white;
+  max-height: 440px;
-  border-radius: 4px;
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
-  0 13px 19px 2px rgba(0, 0, 0, 0.14),
-  0 5px 24px 4px rgba(0, 0, 0, 0.12);
   overflow: hidden;
-  form, fieldset {
+  background: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0 7px 8px -4px rgba(0, 0, 0, .2),
+    0 13px 19px 2px rgba(0, 0, 0, .14),
+    0 5px 24px 4px rgba(0, 0, 0, .12);
+
+  form,
+  fieldset {
     height: 100%;
   }
+
   md-content {
-    background-color: #fff;
     overflow: hidden;
+    background-color: #fff;
   }
+
   .md-padding {
     padding: 0 16px;
   }
+
   .md-radio-interactive {
-    md-select, md-switch {
+    md-select,
+    md-switch {
       pointer-events: all;
     }
   }
+
   md-radio-button {
     .md-label {
       width: 100%;
     }
+
     tb-timeinterval {
       width: 355px;
+
       .advanced-switch {
-        min-height: 30px;
         max-width: 44px;
+        min-height: 30px;
       }
     }
   }
@@ -59,15 +70,17 @@
 
 tb-timewindow {
   min-width: 52px;
+
   section.tb-timewindow {
     min-height: 32px;
     padding: 0 6px;
+
     span {
-      pointer-events: all;
-      cursor: pointer;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      pointer-events: all;
+      cursor: pointer;
     }
   }
 }

ui/src/app/components/widget/action/manage-widget-actions.scss

@@ -13,18 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-manage-widget-actions {
   table.md-table {
     tbody {
       tr {
         td {
           &.tb-action-cell {
+            width: 100px;
+            min-width: 100px;
+            max-width: 100px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            min-width: 100px;
-            max-width: 100px;
-            width: 100px;
           }
         }
       }

ui/src/app/components/widget/widget-config.scss

@@ -13,11 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-widget-config {
   md-tab-content.md-active > div {
     height: 100%;
   }
+
   .tb-advanced-widget-config {
     height: 100%;
   }
-}
+}

ui/src/app/components/widget/widget.scss

@@ -13,18 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-widget {
   .tb-widget-error {
     display: flex;
-    justify-content: center;
     align-items: center;
-    background: rgba(255,255,255,0.5);
+    justify-content: center;
+    background: rgba(255, 255, 255, .5);
+
     span {
-       color: red;
+      color: #f00;
     }
   }
+
   .tb-widget-loading {
-    background: rgba(255,255,255,0.15);
     z-index: 3;
+    background: rgba(255, 255, 255, .15);
   }
 }

ui/src/app/components/widgets-bundle-select.scss

@@ -17,9 +17,10 @@
 
 tb-widgets-bundle-select {
   md-select {
-    margin: 0;
     padding: 5px 20px;
+    margin: 0;
   }
+
   .tb-bundle-item {
     height: 24px;
     line-height: 24px;
@@ -33,24 +34,29 @@ tb-widgets-bundle-select {
   }
 }
 
-tb-widgets-bundle-select, .tb-widgets-bundle-select {
+tb-widgets-bundle-select,
+.tb-widgets-bundle-select {
   .md-text {
     display: block;
     width: 100%;
   }
+
   .tb-bundle-item {
     display: inline-block;
     width: 100%;
+
     span {
       display: inline-block;
       vertical-align: middle;
     }
+
     .tb-bundle-system {
-      font-size: 0.8rem;
-      opacity: 0.8;
       float: right;
+      font-size: .8rem;
+      opacity: .8;
     }
   }
+
   md-option {
     height: auto !important;
     white-space: normal !important;
@@ -60,19 +66,23 @@ tb-widgets-bundle-select, .tb-widgets-bundle-select {
 md-toolbar {
   tb-widgets-bundle-select {
     md-select {
-      background: rgba(255,255,255,0.2);
+      background: rgba(255, 255, 255, .2);
+
       .md-select-value {
-        color: #fff;
         font-size: 1.2rem;
-        span:first-child:after {
+        color: #fff;
-            color: #fff;
+
+        span:first-child::after {
+          color: #fff;
         }
       }
+
       .md-select-value.md-select-placeholder {
         color: #fff;
-        opacity: 0.8;
+        opacity: .8;
       }
     }
+
     md-select.ng-invalid.ng-touched {
       .md-select-value {
         color: #fff !important;

ui/src/app/dashboard/dashboard-card.scss

@@ -13,14 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-dashboard-assigned-customers {
   display: block;
   display: -webkit-box;
   height: 34px;
+  margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  margin-bottom: 4px;
 }
 

ui/src/app/dashboard/dashboard-settings.scss

@@ -13,50 +13,54 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-$previewSize: 100px;
+$previewSize: 100px !default;
 
 .tb-image-select-container {
   position: relative;
-  height: $previewSize;
   width: 100%;
+  height: $previewSize;
 }
 
 .tb-image-preview {
-  max-width: $previewSize;
-  max-height: $previewSize;
   width: auto;
+  max-width: $previewSize;
   height: auto;
+  max-height: $previewSize;
 }
 
 .tb-image-preview-container {
   position: relative;
+  float: left;
   width: $previewSize;
   height: $previewSize;
   margin-right: 12px;
-  border: solid 1px;
   vertical-align: top;
-  float: left;
+  border: solid 1px;
+
   div {
     width: 100%;
     font-size: 18px;
     text-align: center;
   }
-  div, .tb-image-preview {
+
+  div,
+  .tb-image-preview {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
   }
 }
 
 .tb-image-clear-container {
-  width: 48px;
-  height: $previewSize;
   position: relative;
   float: right;
+  width: 48px;
+  height: $previewSize;
 }
+
 .tb-image-clear-btn {
   position: absolute !important;
   top: 50%;
-  transform: translate(0%,-50%) !important;
+  transform: translate(0%, -50%) !important;
 }

ui/src/app/dashboard/dashboard-toolbar.scss

@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 @import "~compass-sass-mixins/lib/compass";
-@import '../../scss/constants';
 
-$toolbar-height: 50px;
+@import "../../scss/constants";
-$fullscreen-toolbar-height: 64px;
+
-$mobile-toolbar-height: 80px;
+$toolbar-height: 50px !default;
-$half-mobile-toolbar-height: 40px;
+$fullscreen-toolbar-height: 64px !default;
-$mobile-toolbar-height-total: 84px;
+$mobile-toolbar-height: 80px !default;
+$half-mobile-toolbar-height: 40px !default;
+$mobile-toolbar-height-total: 84px !default;
 
 tb-dashboard-toolbar {
   md-fab-toolbar {
@@ -29,126 +30,156 @@ tb-dashboard-toolbar {
         .md-button {
           &.md-fab {
             opacity: 1;
+
             @include transition(opacity .3s cubic-bezier(.55,0,.55,.2));
+
             .md-fab-toolbar-background {
-                background-color: $primary-default !important;
+              background-color: $primary-default !important;
             }
           }
         }
       }
     }
+
     md-fab-trigger {
       .md-button {
         &.md-fab {
-          line-height: 36px;
           width: 36px;
           height: 36px;
           margin: 4px 0 0 4px;
-          opacity: 0.5;
+          line-height: 36px;
+          opacity: .5;
+
           @include transition(opacity .3s cubic-bezier(.55,0,.55,.2) .2s);
+
           md-icon {
             position: absolute;
             top: 25%;
-            margin: 0;
-            line-height: 18px;
-            height: 18px;
             width: 18px;
-            min-height: 18px;
             min-width: 18px;
+            height: 18px;
+            min-height: 18px;
+            margin: 0;
+            line-height: 18px;
           }
         }
       }
     }
+
     &.is-fullscreen {
       &.md-is-open {
         md-fab-trigger {
           .md-button {
             &.md-fab {
               .md-fab-toolbar-background {
-                  transition-delay: 0ms !important;
+                transition-delay: 0ms !important;
-                  transition-duration: 0ms !important;
+                transition-duration: 0ms !important;
               }
             }
           }
         }
       }
+
       .md-fab-toolbar-wrapper {
         height: $mobile-toolbar-height-total;
+
         @media (min-width: $layout-breakpoint-sm) {
           height: $fullscreen-toolbar-height;
         }
+
         md-toolbar {
-          min-height: $mobile-toolbar-height;
           height: $mobile-toolbar-height;
+          min-height: $mobile-toolbar-height;
+
           @media (min-width: $layout-breakpoint-sm) {
-            min-height: $fullscreen-toolbar-height;
             height: $fullscreen-toolbar-height;
+            min-height: $fullscreen-toolbar-height;
           }
         }
       }
     }
+
     .md-fab-toolbar-wrapper {
       height: $mobile-toolbar-height-total;
+
       @media (min-width: $layout-breakpoint-sm) {
         height: $toolbar-height;
       }
+
       md-toolbar {
-        min-height: $mobile-toolbar-height;
         height: $mobile-toolbar-height;
+        min-height: $mobile-toolbar-height;
+
         @media (min-width: $layout-breakpoint-sm) {
-          min-height: $toolbar-height;
           height: $toolbar-height;
+          min-height: $toolbar-height;
         }
+
         md-fab-actions {
+          margin-top: 0;
           font-size: 16px;
-          margin-top: 0px;
+
           @media (max-width: $layout-breakpoint-sm) {
             height: $mobile-toolbar-height;
             max-height: $mobile-toolbar-height;
           }
+
           .close-action {
             margin-right: -18px;
           }
+
           .md-fab-action-item {
             width: 100%;
             height: $mobile-toolbar-height;
+
             @media (min-width: $layout-breakpoint-sm) {
               height: 46px;
             }
+
             .tb-dashboard-action-panels {
+              flex-direction: column-reverse;
               height: $mobile-toolbar-height;
+
               @media (min-width: $layout-breakpoint-sm) {
                 height: 46px;
               }
-              flex-direction: column-reverse;
+
               @media (min-width: $layout-breakpoint-sm) {
                 flex-direction: row-reverse;
               }
+
               .tb-dashboard-action-panel {
-                min-width: 0px;
+                flex-direction: row-reverse;
+                min-width: 0;
                 height: $half-mobile-toolbar-height;
+
                 @media (min-width: $layout-breakpoint-sm) {
                   height: 46px;
                 }
-                flex-direction: row-reverse;
+
                 div {
                   height: $half-mobile-toolbar-height;
+
                   @media (min-width: $layout-breakpoint-sm) {
                     height: 46px;
                   }
                 }
+
                 md-select {
                   pointer-events: all;
                 }
+
                 tb-states-component {
                   pointer-events: all;
                 }
+
                 button.md-icon-button {
                   min-width: 40px;
+
                   @media (max-width: $layout-breakpoint-sm) {
                     min-width: 28px;
-                    margin: 0px;
                     padding: 2px;
+                    margin: 0;
                   }
                 }
               }
@@ -158,4 +189,4 @@ tb-dashboard-toolbar {
       }
     }
   }
-}
+}

ui/src/app/dashboard/dashboard.scss

@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 @import "~compass-sass-mixins/lib/compass";
-@import '../../scss/constants';
 
-$toolbar-height: 50px;
+@import "../../scss/constants";
-$fullscreen-toolbar-height: 64px;
+
-$mobile-toolbar-height: 84px;
+$toolbar-height: 50px !default;
+$fullscreen-toolbar-height: 64px !default;
+$mobile-toolbar-height: 84px !default;
 
 section.tb-dashboard-title {
   position: absolute;
@@ -27,10 +28,10 @@ section.tb-dashboard-title {
 }
 
 input.tb-dashboard-title {
-  font-size: 2.000rem;
-  font-weight: 500;
-  letter-spacing: 0.005em;
   height: 38px;
+  font-size: 2rem;
+  font-weight: 500;
+  letter-spacing: .005em;
 }
 
 div.tb-padded {
@@ -50,9 +51,11 @@ tb-details-sidenav.tb-widget-details-sidenav {
     @media (min-width: $layout-breakpoint-sm) {
       width: 85% !important;
     }
+
     @media (min-width: $layout-breakpoint-md) {
       width: 75% !important;
     }
+
     @media (min-width: $layout-breakpoint-lg) {
       width: 60% !important;
     }
@@ -65,47 +68,55 @@ tb-details-sidenav.tb-widget-details-sidenav {
 
 section.tb-dashboard-toolbar {
   position: absolute;
-  top: 0px;
+  top: 0;
-  left: 0px;
+  left: 0;
   z-index: 13;
   pointer-events: none;
+
   &.tb-dashboard-toolbar-opened {
-    right: 0px;
+    right: 0;
-   // @include transition(right .3s cubic-bezier(.55,0,.55,.2));
+    // @include 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);
   }
 }
 
 .tb-dashboard-container {
-   &.tb-dashboard-toolbar-opened {
+  &.tb-dashboard-toolbar-opened {
-     &.is-fullscreen {
+    &.is-fullscreen {
-       margin-top: $mobile-toolbar-height;
+      margin-top: $mobile-toolbar-height;
-       @media (min-width: $layout-breakpoint-sm) {
+
-         margin-top: $fullscreen-toolbar-height;
+      @media (min-width: $layout-breakpoint-sm) {
-       }
+        margin-top: $fullscreen-toolbar-height;
-     }
+      }
-     &:not(.is-fullscreen) {
+    }
-       margin-top: $mobile-toolbar-height;
+
-       @media (min-width: $layout-breakpoint-sm) {
+    &:not(.is-fullscreen) {
-         margin-top: $toolbar-height;
+      margin-top: $mobile-toolbar-height;
-       }
+
-       @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2));
+      @media (min-width: $layout-breakpoint-sm) {
-     }
+        margin-top: $toolbar-height;
-   }
+      }
-   &.tb-dashboard-toolbar-closed {
+
-     margin-top: 0px;
+      @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2));
-     @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2) .2s);
+    }
+  }
+
+  &.tb-dashboard-toolbar-closed {
+    margin-top: 0;
+
+    @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2) .2s);
   }
+
   .tb-dashboard-layouts {
     md-backdrop {
       z-index: 1;
     }
-    #tb-main-layout {
 
-    }
     #tb-right-layout {
       md-sidenav {
         z-index: 1;
@@ -124,13 +135,15 @@ section.tb-powered-by-footer {
   bottom: 5px;
   z-index: 3;
   pointer-events: none;
+
   span {
     font-size: 12px;
+
     a {
-      font-weight: bold;
+      font-weight: 700;
       text-decoration: none;
-      border: none;
       pointer-events: all;
+      border: none;
     }
   }
 }

ui/src/app/dashboard/states/default-state-controller.scss

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 md-select.default-state-controller {
-  margin: 0px;
+  margin: 0;
-}
+}

ui/src/app/dashboard/states/entity-state-controller.scss

@@ -13,34 +13,37 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../../scss/constants';
+@import "../../../scss/constants";
 
 tb-states-component {
-    min-width: 0px;
+  min-width: 0;
 }
 
 .entity-state-controller {
-    .state-divider {
+  .state-divider {
-        font-size: 18px;
+    padding-right: 15px;
-        padding-left: 15px;
+    padding-left: 15px;
-        padding-right: 15px;
+    overflow: hidden;
-        overflow: hidden;
+    font-size: 18px;
-        text-overflow: ellipsis;
+    text-overflow: ellipsis;
-        white-space: nowrap;
+    white-space: nowrap;
-        pointer-events: none;
+    pointer-events: none;
-    }
+  }
-    .state-entry {
+
-        font-size: 18px;
+  .state-entry {
-        overflow: hidden;
+    overflow: hidden;
-        text-overflow: ellipsis;
+    font-size: 18px;
-        white-space: nowrap;
+    text-overflow: ellipsis;
-        outline: none;
+    white-space: nowrap;
-    }
+    outline: none;
-    md-select {
+  }
-        margin: 0px;
+
-        .md-text {
+  md-select {
-            font-size: 18px;
+    margin: 0;
-            font-weight: bold;
+
-        }
+    .md-text {
+      font-size: 18px;
+      font-weight: 700;
     }
-}
+  }
+}

ui/src/app/dashboard/states/manage-dashboard-states.scss

@@ -13,21 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .manage-dashboard-states {
   table.md-table {
     tbody {
       tr {
         td {
           &.tb-action-cell {
+            width: 100px;
+            min-width: 100px;
+            max-width: 100px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            min-width: 100px;
-            max-width: 100px;
-            width: 100px;
           }
         }
       }
     }
   }
-}
+}

ui/src/app/entity/alias/aliases-entity-select.scss

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../../scss/constants';
+@import "../../../scss/constants";
 
 tb-aliases-entity-select {
   min-width: 52px;
@@ -26,18 +26,21 @@ tb-aliases-entity-select {
 }
 
 .tb-aliases-entity-select-panel {
+  min-width: 300px;
   max-height: 150px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0 7px 8px -4px rgba(0, 0, 0, .2),
+    0 13px 19px 2px rgba(0, 0, 0, .14),
+    0 5px 24px 4px rgba(0, 0, 0, .12);
+
   @media (min-height: 350px) {
     max-height: 250px;
   }
-  min-width: 300px;
+
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
-  0 13px 19px 2px rgba(0, 0, 0, 0.14),
-  0 5px 24px 4px rgba(0, 0, 0, 0.12);
-  overflow-x: hidden;
-  overflow-y: auto;
   md-content {
     background-color: #fff;
   }
@@ -46,15 +49,17 @@ tb-aliases-entity-select {
 section.tb-aliases-entity-select {
   min-height: 32px;
   padding: 0 6px;
+
   @media (max-width: $layout-breakpoint-sm) {
-    padding: 0px;
+    padding: 0;
   }
+
   span {
     max-width: 200px;
-    pointer-events: all;
-    cursor: pointer;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    pointer-events: all;
+    cursor: pointer;
   }
 }

ui/src/app/entity/alias/entity-alias-dialog.scss

@@ -13,14 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-entity-alias-dialog {
   .tb-resolve-multiple-switch {
     padding-left: 10px;
+
     .resolve-multiple-switch {
       margin: 0;
     }
+
     .resolve-multiple-label {
       margin: 5px 0;
     }
   }
-}
+}

ui/src/app/entity/alias/entity-aliases.scss

@@ -13,35 +13,43 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-aliases-dialog {
   .md-dialog-content {
-    padding-bottom: 0px;
+    padding-top: 0;
-    padding-top: 0px;
+    padding-bottom: 0;
   }
+
   .tb-aliases-header {
     min-height: 40px;
     padding: 0 34px 0 34px;
     margin: 5px;
+
     .tb-header-label {
       font-size: 14px;
-      color: rgba(0, 0, 0, 0.570588);
+      color: rgba(0, 0, 0, .570588);
     }
   }
+
   .tb-alias {
     padding: 0 0 0 10px;
     margin: 5px;
+
     md-input-container {
-      margin: 0px;
+      margin: 0;
     }
+
     .tb-resolve-multiple-switch {
       padding-left: 10px;
+
       .resolve-multiple-switch {
         margin: 0;
       }
     }
+
     .md-button {
       &.md-icon-button {
-        margin: 0px;
+        margin: 0;
       }
     }
   }

ui/src/app/entity/attribute/attribute-table.scss

@@ -13,46 +13,48 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../../scss/constants';
+@import "../../../scss/constants";
 
-$md-light: rgba(255, 255, 255, 100%);
+$md-light: rgba(255, 255, 255, 100%) !default;
-$md-edit-icon-fill: #757575;
+$md-edit-icon-fill: #757575 !default;
 
 md-toolbar.md-table-toolbar.alternate {
   .md-toolbar-tools {
-      md-icon {
+    md-icon {
-        color: $md-light;
+      color: $md-light;
-      }
+    }
   }
 }
 
 .md-table {
   &.tb-attribute-table {
-      table-layout: fixed;
+    table-layout: fixed;
-      td.md-cell {
+
-          &.tb-value-cell {
+    td.md-cell {
-            overflow: auto;
+      &.tb-value-cell {
-          }
+        overflow: auto;
       }
+    }
   }
+
   .md-cell {
     ng-md-icon {
-      fill: $md-edit-icon-fill;
       float: right;
       height: 16px;
+      fill: $md-edit-icon-fill;
     }
   }
 }
 
 .widgets-carousel {
   position: relative;
-  margin: 0px;
   height: calc(100% - 100px);
   min-height: 150px !important;
+  margin: 0;
 
   tb-dashboard {
     #gridster-parent {
       padding: 0 7px;
     }
   }
-}
+}

ui/src/app/entity/entity-autocomplete.scss

@@ -13,11 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-entity-autocomplete {
   .tb-entity-item {
     display: block;
     height: 48px;
   }
+
   li {
     height: auto !important;
     white-space: normal !important;

ui/src/app/entity/entity-filter-view.scss

@@ -13,20 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-entity-filter-view {
   .entity-filter-empty {
-    color: rgba(221, 44, 0, 0.87);
     font-size: 14px;
     line-height: 16px;
+    color: rgba(221, 44, 0, .87);
   }
+
   .entity-filter-type {
     font-size: 14px;
     line-height: 16px;
-    color: rgba(0, 0, 0, 0.570588);
+    color: rgba(0, 0, 0, .570588);
   }
+
   .entity-filter-value {
     font-size: 14px;
     line-height: 16px;
-    color: rgba(0, 0, 0, 0.570588);
+    color: rgba(0, 0, 0, .570588);
   }
-}
+}

ui/src/app/entity/entity-filter.scss

@@ -13,10 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.tb-entity-filter {
 
+.tb-entity-filter {
   #relationsQueryFilter {
     padding-top: 20px;
+
     tb-entity-select {
       min-height: 92px;
     }
@@ -24,12 +25,13 @@
 
   .tb-root-state-entity-switch {
     padding-left: 10px;
+
     .root-state-entity-switch {
       margin: 0;
     }
+
     .root-state-entity-label {
       margin: 5px 0;
     }
   }
-
+}
-}

ui/src/app/entity/entity-list.scss

@@ -13,7 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/*.tb-entity-list {
+
+/*
+.tb-entity-list {
   #entity_list_chips {
     .md-chips {
       padding-bottom: 1px;
@@ -26,4 +28,5 @@
       padding-left: 1px;
     }
   }
-}*/
+}
+*/

ui/src/app/entity/entity-select.scss

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.tb-entity-select {
 
-}
+/*
+.tb-entity-select {
+}
+*/

ui/src/app/entity/entity-subtype-autocomplete.scss

@@ -13,11 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-entity-subtype-autocomplete {
   .tb-entity-subtype-item {
     display: block;
     height: 48px;
   }
+
   li {
     height: auto !important;
     white-space: normal !important;

ui/src/app/entity/entity-subtype-list.scss

@@ -13,7 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/*.tb-entity-subtype-list {
+
+/*
+.tb-entity-subtype-list {
   #entity_subtype_list_chips {
     .md-chips {
       padding-bottom: 1px;
@@ -26,4 +28,5 @@
       padding-left: 1px;
     }
   }
-}*/
+}
+*/

ui/src/app/entity/entity-subtype-select.scss

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 md-select.tb-entity-subtype-select {
   min-width: 200px;
 }

ui/src/app/entity/entity-type-list.scss

@@ -13,7 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/*.tb-entity-type-list {
+
+/*
+.tb-entity-type-list {
   #entity_type_list_chips {
     .md-chips {
       padding-bottom: 1px;
@@ -26,4 +28,5 @@
       padding-left: 1px;
     }
   }
-}*/
+}
+*/

ui/src/app/entity/entity-type-select.scss

@@ -13,5 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+/*
 md-select.tb-entity-type-select {
 }
+*/

ui/src/app/entity/relation/relation-dialog.scss

@@ -13,14 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-relation-additional-info-panel {
-  margin-left: 15px;
-  border: 1px solid #C0C0C0;
   height: 100%;
+  margin-left: 15px;
+  border: 1px solid #c0c0c0;
+
   #tb-relation-additional-info {
-    min-width: 200px;
-    min-height: 200px;
     width: 100%;
+    min-width: 200px;
     height: 100%;
+    min-height: 200px;
   }
 }

ui/src/app/entity/relation/relation-filters.scss

@@ -13,32 +13,37 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-relation-filters {
   .header {
-    padding-left: 5px;
     padding-right: 5px;
     padding-bottom: 5px;
+    padding-left: 5px;
+
     .cell {
-      padding-left: 5px;
       padding-right: 5px;
-      color: rgba(0,0,0,.54);
+      padding-left: 5px;
       font-size: 12px;
       font-weight: 700;
+      color: rgba(0, 0, 0, .54);
       white-space: nowrap;
     }
   }
+
   .body {
-    padding-left: 5px;
-    padding-right: 5px;
     max-height: 300px;
-    overflow: auto;
+    padding-right: 5px;
     padding-bottom: 20px;
+    padding-left: 5px;
+    overflow: auto;
+
     .row {
       padding-top: 5px;
     }
+
     .cell {
-      padding-left: 5px;
       padding-right: 5px;
+      padding-left: 5px;
 
       md-select {
         margin: 0 0 24px;
@@ -49,25 +54,27 @@
       }
 
       md-chips-wrap {
-        padding: 0px;
+        padding: 0;
         margin: 0 0 24px;
+
         md-autocomplete {
           height: 30px;
+
           md-autocomplete-wrap {
             height: 30px;
           }
         }
       }
+
       .md-chips .md-chip-input-container input {
-        padding: 2px 2px 2px;
         height: 26px;
+        padding: 2px 2px 2px;
         line-height: 26px;
       }
-
     }
 
     .md-button {
       margin: 0;
     }
   }
-}
+}

ui/src/app/entity/relation/relation-table.scss

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../../scss/constants';
+@import "../../../scss/constants";
 
-$md-light: rgba(255, 255, 255, 100%);
+$md-light: rgba(255, 255, 255, 100%) !default;
 
 .tb-relation-table {
   md-toolbar.md-table-toolbar.alternate {

ui/src/app/entity/relation/relation-type-autocomplete.scss

@@ -13,11 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-relation-type-autocomplete {
   .tb-relation-type-item {
     display: block;
     height: 48px;
   }
+
   li {
     height: auto !important;
     white-space: normal !important;

ui/src/app/event/event.scss

@@ -13,24 +13,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 md-list.tb-event-table {
-    padding: 0px;
+  padding: 0;
 
-    md-list-item {
+  md-list-item {
-      padding: 0px;
+    padding: 0;
-    }
+  }
 
   .tb-row {
     height: 48px;
-    padding: 0px;
+    padding: 0;
     overflow: hidden;
+
     .tb-cell {
       text-overflow: ellipsis;
+
       &.tb-scroll {
-        white-space: nowrap;
-        overflow-y: hidden;
         overflow-x: auto;
+        overflow-y: hidden;
+        white-space: nowrap;
       }
+
       &.tb-nowrap {
         white-space: nowrap;
       }
@@ -38,7 +42,7 @@ md-list.tb-event-table {
   }
 
   .tb-row:hover {
-    background-color: #EEEEEE;
+    background-color: #eee;
   }
 
   .tb-header:hover {
@@ -46,44 +50,45 @@ md-list.tb-event-table {
   }
 
   .tb-header {
-      .tb-cell {
+    .tb-cell {
-        color: rgba(0,0,0,.54);
+      font-size: 12px;
-        font-size: 12px;
+      font-weight: 700;
-        font-weight: 700;
+      color: rgba(0, 0, 0, .54);
-        background: none;
+      white-space: nowrap;
-        white-space: nowrap;
+      background: none;
-      }
+    }
   }
 
   .tb-cell {
-      &:first-child {
+    &:first-child {
-        padding-left: 14px;
+      padding-left: 14px;
-      }
+    }
-      &:last-child {
+
-        padding-right: 14px;
+    &:last-child {
-      }
+      padding-right: 14px;
-      padding: 0 6px;
+    }
-      margin: auto 0;
+    padding: 0 6px;
-      color: rgba(0,0,0,.87);
+    margin: auto 0;
-      font-size: 13px;
+    overflow: hidden;
-      vertical-align: middle;
+    font-size: 13px;
-      text-align: left;
+    color: rgba(0, 0, 0, .87);
-      overflow: hidden;
+    text-align: left;
-      .md-button {
+    vertical-align: middle;
-          padding: 0;
+
-          margin: 0;
+    .md-button {
-      }
+      padding: 0;
+      margin: 0;
+    }
   }
 
   .tb-cell.tb-number {
     text-align: right;
   }
-
 }
 
 #tb-event-content {
-  min-width: 400px;
-  min-height: 50px;
   width: 100%;
+  min-width: 400px;
   height: 100%;
+  min-height: 50px;
 }

ui/src/app/extension/extension-table.scss

@@ -13,23 +13,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../scss/constants';
+@import "../../scss/constants";
 
 
 .extension-table {
-
   md-input-container .md-errors-spacer {
     min-height: 0;
   }
 
-  /*&.tb-data-table table.md-table tbody tr td.tb-action-cell,
+  /*
+  &.tb-data-table table.md-table tbody tr td.tb-action-cell,
   &.tb-data-table table.md-table.md-row-select tbody tr td.tb-action-cell {
     width: 114px;
-  }*/
+  }
+  */
+
   .sync-widget {
     max-height: 90px;
     overflow: hidden;
   }
+
   .toolbar-widget {
     min-height: 39px;
     max-height: 39px;
@@ -37,11 +40,13 @@
 }
 
 .extension__syncStatus--black {
-  color: #000000!important;
+  color: #000 !important;
 }
+
 .extension__syncStatus--green {
-  color: #228634!important;
+  color: #228634 !important;
 }
+
 .extension__syncStatus--red {
-  color: #862222!important;
+  color: #862222 !important;
-}
+}

ui/src/app/extension/extensions-forms/extension-form.scss

@@ -13,28 +13,34 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .extension-form {
   li > .md-button {
-    color: rgba(0, 0, 0, 0.7);
     margin: 0;
+    color: rgba(0, 0, 0, .7);
   }
+
   .vAccordion--default {
-    margin-top: 0;
     padding-left: 3px;
+    margin-top: 0;
   }
+
   .tb-container {
-    width:100%;
+    width: 100%;
   }
+
   .dropdown-messages {
     .tb-error-message {
       padding: 5px 0 0 0;
     }
   }
+
   .dropdown-section {
     margin-bottom: 30px;
   }
+
   v-pane.inner-invalid > v-pane-header {
-    border-bottom: 2px solid rgb(221,44,0);
+    border-bottom: 2px solid rgb(221, 44, 0);
   }
 }
 
@@ -45,17 +51,19 @@
 }
 
 .tb-extension-custom-transformer-panel {
-  margin-left: 15px;
-  border: 1px solid #C0C0C0;
   height: 100%;
+  margin-left: 15px;
+  border: 1px solid #c0c0c0;
+
   .tb-extension-custom-transformer {
-    min-width: 600px;
-    min-height: 200px;
     width: 100%;
+    min-width: 600px;
     height: 100%;
+    min-height: 200px;
   }
+
   .ace_text-input {
-    position:absolute!important
+    position: absolute !important;
   }
 }
 
@@ -68,9 +76,9 @@
 }
 
 .tb-drop-file-input-hide {
-  height: 200%;
-  display: block;
   position: absolute;
   bottom: 0;
+  display: block;
   width: 100%;
-}
+  height: 200%;
+}

ui/src/app/help/help.scss

@@ -15,8 +15,12 @@
  */
 @import "../../scss/constants";
 
-.md-button.tb-help-button-style, .tb-help-button-style {
+/*
+.md-button.tb-help-button-style,
+.tb-help-button-style {
 }
 
-.md-button.tb-help-button-pos, .tb-help-button-pos {
+.md-button.tb-help-button-pos,
+.tb-help-button-pos {
 }
+*/

ui/src/app/home/home-links.scss

@@ -16,10 +16,11 @@
 @import "../../scss/constants";
 
 .tb-home-links {
-    .md-headline {
+  .md-headline {
-      font-size: 20px;
+    font-size: 20px;
-      @media (min-width: $layout-breakpoint-xmd) {
+
-        font-size: 24px;
+    @media (min-width: $layout-breakpoint-xmd) {
-      }
+      font-size: 24px;
     }
-}
+  }
+}

ui/src/app/import-export/import-dialog.scss

@@ -13,29 +13,30 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-$previewSize: 100px;
+$previewSize: 100px !default;
 
 .tb-file-select-container {
   position: relative;
-  height: $previewSize;
   width: 100%;
+  height: $previewSize;
 }
 
 .tb-file-preview {
-  max-width: $previewSize;
-  max-height: $previewSize;
   width: auto;
+  max-width: $previewSize;
   height: auto;
+  max-height: $previewSize;
 }
 
 .tb-file-clear-container {
-  width: 48px;
-  height: $previewSize;
   position: relative;
   float: right;
+  width: 48px;
+  height: $previewSize;
 }
+
 .tb-file-clear-btn {
   position: absolute !important;
   top: 50%;
-  transform: translate(0%,-50%) !important;
+  transform: translate(0%, -50%) !important;
 }

ui/src/app/jsonform/jsonform.scss

@@ -13,5 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.form {  height: 400px;  }
+
-.schema {  height: 800px;  }
+.form { height: 400px; }
+
+.schema { height: 800px; }

ui/src/app/layout/home.scss

@@ -29,23 +29,31 @@
 .tb-breadcrumb {
   font-size: 18px !important;
   font-weight: 400 !important;
-  h1, a, span {
+
+  h1,
+  a,
+  span {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
   a {
     border: none;
-    opacity: 0.75;
+    opacity: .75;
-    @include transition(opacity 0.35s);
+
+    @include transition(opacity .35s);
   }
-  a:hover, a:focus {
+
-    opacity: 1;
+  a:hover,
+  a:focus {
     text-decoration: none !important;
     border: none;
+    opacity: 1;
   }
+
   .divider {
-    padding: 0px 30px;
+    padding: 0 30px;
   }
 }
 
@@ -54,21 +62,22 @@ md-sidenav.tb-site-sidenav {
 }
 
 md-icon.tb-logo-title {
-  height: 36px;
   width: 200px;
+  height: 36px;
 }
 
 .tb-nav-header {
-  flex-shrink: 0;
   z-index: 2;
+  flex-shrink: 0;
   white-space: nowrap;
 }
 
 .tb-nav-header-toolbar {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  flex-shrink: 0;
   z-index: 2;
+  flex-shrink: 0;
   white-space: nowrap;
+  border-bottom: 1px solid rgba(0, 0, 0, .12);
+
   .md-toolbar-tools {
     flex-basis: auto;
   }

ui/src/app/layout/user-menu.scss

@@ -13,28 +13,32 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 div.tb-user-info {
   line-height: 1.5;
+
   span {
-    text-transform: none;
     text-align: left;
+    text-transform: none;
   }
+
   span.tb-user-display-name {
-    font-size: 0.800rem;
+    font-size: .8rem;
     font-weight: 300;
-    letter-spacing: 0.008em;
+    letter-spacing: .008em;
   }
+
   span.tb-user-authority {
-    font-size: 0.800rem;
+    font-size: .8rem;
     font-weight: 300;
-    letter-spacing: 0.005em;
+    letter-spacing: .005em;
-    opacity: 0.8;
+    opacity: .8;
   }
 }
 
 md-icon.tb-mini-avatar {
+  width: 36px;
+  height: 36px;
   margin: auto 8px;
   font-size: 36px;
-  height: 36px;
-  width: 36px;
 }

ui/src/app/login/login.scss

@@ -13,18 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../scss/constants';
+@import "../../scss/constants";
 
 md-card.tb-login-card {
   width: 330px !important;
+
   @media (min-width: $layout-breakpoint-sm) {
     width: 450px !important;
   }
+
   md-card-title {
     img.tb-login-logo {
       height: 50px;
     }
   }
+
   md-card-content {
     margin-top: -50px;
   }

ui/src/app/rulechain/link.scss

@@ -17,12 +17,14 @@
 .tb-link-label-autocomplete {
   .tb-not-found {
     display: block;
-    line-height: 1.5;
     height: 48px;
+    line-height: 1.5;
+
     .tb-no-entries {
       line-height: 48px;
     }
   }
+
   li {
     height: auto !important;
     white-space: normal !important;

ui/src/app/rulechain/message-type-autocomplete.scss

@@ -13,11 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-message-type-autocomplete {
   .tb-message-type-item {
     display: block;
     height: 48px;
   }
+
   li {
     height: auto !important;
     white-space: normal !important;

ui/src/app/rulechain/rulechain.scss

@@ -18,88 +18,106 @@
   .tb-fullscreen-button-style {
     z-index: 1;
   }
+
   section.tb-header-buttons.tb-library-open {
-    pointer-events: none;
     position: absolute;
-    left: 0px;
+    top: 0;
-    top: 0px;
+    left: 0;
     z-index: 1;
+    pointer-events: none;
+
     .md-button.tb-btn-open-library {
-      left: 0px;
+      top: 0;
-      top: 0px;
+      left: 0;
-      line-height: 36px;
       width: 36px;
       height: 36px;
       margin: 4px 0 0 4px;
-      opacity: 0.5;
+      line-height: 36px;
+      opacity: .5;
     }
   }
+
   .tb-rulechain-library {
+    z-index: 1;
     width: 250px;
     min-width: 250px;
-    z-index: 1;
+
     md-toolbar {
-      min-height: 48px;
       height: 48px;
-      .md-toolbar-tools>.md-button:last-child {
+      min-height: 48px;
-        margin-right: 0px;
+
+      .md-toolbar-tools > .md-button:last-child {
+        margin-right: 0;
       }
+
       .md-toolbar-tools {
-        font-size: 14px;
-        padding: 0px 6px;
         height: 48px;
+        padding: 0 6px;
+        font-size: 14px;
+
         .md-button.md-icon-button {
-          margin: 0px;
+          margin: 0;
+
           &.tb-small {
+            width: 32px;
             height: 32px;
             min-height: 32px;
-            line-height: 20px;
             padding: 6px;
-            width: 32px;
+            line-height: 20px;
+
             md-icon {
-              line-height: 20px;
-              font-size: 20px;
-              height: 20px;
               width: 20px;
-              min-height: 20px;
               min-width: 20px;
+              height: 20px;
+              min-height: 20px;
+              font-size: 20px;
+              line-height: 20px;
             }
           }
         }
       }
     }
+
     .tb-rulechain-library-panel-group {
-      overflow-y: auto;
       overflow-x: hidden;
+      overflow-y: auto;
+
       .tb-panel-title {
+        min-width: 150px;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-        min-width: 150px;
       }
+
       .fc-canvas {
         background: #f9f9f9;
       }
+
       md-icon.md-expansion-panel-icon {
-        margin-right: 0px;
+        margin-right: 0;
       }
-      md-expansion-panel-collapsed, .md-expansion-panel-header-container {
+
+      md-expansion-panel-collapsed,
+      .md-expansion-panel-header-container {
+        position: static;
         background: #e6e6e6;
         border-color: #909090;
-        position: static;
       }
+
       md-expansion-panel {
         &.md-open {
           margin-top: 0;
           margin-bottom: 0;
         }
       }
+
       md-expansion-panel-content {
-        padding: 0px;
+        padding: 0;
       }
     }
   }
+
   .tb-rulechain-graph {
     z-index: 0;
     overflow: auto;
@@ -107,29 +125,35 @@
 }
 
 #tb-rule-chain-context-menu {
-  padding-top: 0px;
-  border-radius: 8px;
   max-height: 404px;
+  padding-top: 0;
+  border-radius: 8px;
+
   .tb-context-menu-header {
-    padding: 8px 5px 5px;
-    font-size: 14px;
     display: flex;
     flex-direction: row;
     height: 36px;
     min-height: 36px;
+    padding: 8px 5px 5px;
+    font-size: 14px;
+
     &.tb-rulechain {
       background-color: #aac7e4;
     }
+
     &.tb-link {
       background-color: #aac7e4;
     }
+
     md-icon {
-      padding-left: 2px;
       padding-right: 10px;
+      padding-left: 2px;
     }
+
     .tb-context-menu-title {
       font-weight: 500;
     }
+
     .tb-context-menu-subtitle {
       font-size: 12px;
     }
@@ -139,37 +163,45 @@
 .fc-canvas {
   min-width: 100%;
   min-height: 100%;
-  outline: none;
-  -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  outline: none;
+  -webkit-touch-callout: none;
+
   svg {
     display: block;
   }
 }
 
-.tb-rule-node, #tb-rule-chain-context-menu .tb-context-menu-header {
+.tb-rule-node,
+#tb-rule-chain-context-menu .tb-context-menu-header {
   &.tb-filter-type {
     background-color: #f1e861;
   }
+
   &.tb-enrichment-type {
     background-color: #cdf14e;
   }
+
   &.tb-transformation-type {
     background-color: #79cef1;
   }
+
   &.tb-action-type {
     background-color: #f1928f;
   }
+
   &.tb-external-type {
     background-color: #fbc766;
   }
+
   &.tb-rule-chain-type {
     background-color: #d6c4f1;
   }
+
   &.tb-unknown-type {
     background-color: #f16c29;
   }
@@ -180,102 +212,112 @@
   flex-direction: row;
   min-width: 150px;
   max-width: 150px;
+  height: 32px;
   min-height: 32px;
   max-height: 32px;
-  height: 32px;
   padding: 5px 10px;
-  border-radius: 5px;
-  background-color: #F15B26;
-  pointer-events: none;
-  color: #333;
-  border: solid 1px #777;
   font-size: 12px;
   line-height: 16px;
+  color: #333;
+  pointer-events: none;
+  background-color: #f15b26;
+  border: solid 1px #777;
+  border-radius: 5px;
+
   &.tb-rule-node-highlighted:not(.tb-rule-node-invalid) {
     box-shadow: 0 0 10px 6px #51cbee;
+
     .tb-node-title {
+      font-weight: 700;
       text-decoration: underline;
-      font-weight: bold;
     }
   }
+
   &.tb-rule-node-invalid {
     box-shadow: 0 0 10px 6px #ff5c50;
   }
+
   &.tb-input-type {
-    background-color: #a3eaa9;
     user-select: none;
+    background-color: #a3eaa9;
   }
 
   md-icon {
-    font-size: 20px;
     width: 20px;
+    min-width: 20px;
     height: 20px;
     min-height: 20px;
-    min-width: 20px;
     padding-right: 4px;
+    font-size: 20px;
   }
-  .tb-node-type {
 
-  }
   .tb-node-title {
     font-weight: 500;
   }
-  .tb-node-type, .tb-node-title {
+
+  .tb-node-type,
+  .tb-node-title {
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
 .fc-node {
   z-index: 1;
-  outline: none;
   border-radius: 8px;
+  outline: none;
+
   &.fc-dragging {
     z-index: 10;
   }
+
   p {
     padding: 0 15px;
     text-align: center;
   }
+
   .fc-node-overlay {
     position: absolute;
-    pointer-events: none;
-    left: 0;
     top: 0;
     right: 0;
     bottom: 0;
+    left: 0;
+    pointer-events: none;
     background-color: #000;
-    opacity: 0;
     border-radius: 5px;
+    opacity: 0;
   }
+
   &.fc-hover {
     .fc-node-overlay {
-      opacity: 0.25;
+      opacity: .25;
     }
   }
+
   &.fc-selected {
     .fc-node-overlay {
-      opacity: 0.25;
+      opacity: .25;
     }
-  }
+
-  &.fc-selected {
     &:not(.fc-edit) {
-      border: solid 3px red;
       margin: -3px;
+      border: solid 3px #f00;
     }
   }
 }
 
-.fc-leftConnectors, .fc-rightConnectors {
+.fc-leftConnectors,
+.fc-rightConnectors {
   position: absolute;
   top: 0;
-  height: 100%;
+
+  z-index: 0;
 
   display: flex;
   flex-direction: column;
+  height: 100%;
 
-  z-index: 0;
   .fc-magnet {
     align-items: center;
   }
@@ -292,18 +334,18 @@
 .fc-magnet {
   display: flex;
   flex-grow: 1;
-  height: 60px;
   justify-content: center;
+  height: 60px;
 }
 
 .fc-connector {
   width: 14px;
   height: 14px;
-  border: 1px solid #333;
   margin: 10px;
-  border-radius: 5px;
-  background-color: #ccc;
   pointer-events: all;
+  background-color: #ccc;
+  border: 1px solid #333;
+  border-radius: 5px;
 }
 
 .fc-connector.fc-hover {
@@ -312,45 +354,49 @@
 
 .fc-arrow-marker {
   polygon {
-    stroke: gray;
+    fill: #808080;
-    fill: gray;
+    stroke: #808080;
   }
 }
 
 .fc-arrow-marker-selected {
   polygon {
-    stroke: red;
+    fill: #f00;
-    fill: red;
+    stroke: #f00;
   }
 }
 
 .fc-edge {
   outline: none;
-  stroke: gray;
-  stroke-width: 4;
-  fill: transparent;
   transition: stroke-width .2s;
+  fill: transparent;
+  stroke: #808080;
+  stroke-width: 4;
+
   &.fc-selected {
-    stroke: red;
-    stroke-width: 4;
     fill: transparent;
+    stroke: #f00;
+    stroke-width: 4;
   }
+
   &.fc-active {
     animation: dash 3s linear infinite;
     stroke-dasharray: 20;
   }
+
   &.fc-hover {
-    stroke: gray;
-    stroke-width: 6;
     fill: transparent;
+    stroke: #808080;
+    stroke-width: 6;
   }
+
   &.fc-dragging {
     pointer-events: none;
   }
 }
 
 .edge-endpoint {
-  fill: gray;
+  fill: #808080;
 }
 
 .fc-nodedelete {
@@ -364,22 +410,23 @@
 }
 
 .fc-edit {
-  .fc-nodedelete, .fc-nodeedit {
+  .fc-nodedelete,
-    outline: none;
+  .fc-nodeedit {
-    display: block;
     position: absolute;
-    border: solid 2px white;
+    display: block;
-    border-radius: 50%;
+    width: 22px;
-    font-weight: 600;
-    line-height: 20px;
     height: 20px;
     padding-top: 2px;
-    width: 22px;
+    font-weight: 600;
-    background: #f83e05;
+    line-height: 20px;
     color: #fff;
     text-align: center;
     vertical-align: bottom;
     cursor: pointer;
+    background: #f83e05;
+    border: solid 2px #fff;
+    border-radius: 50%;
+    outline: none;
   }
 
   .fc-nodeedit {
@@ -391,7 +438,6 @@
     top: -24px;
     right: -13px;
   }
-
 }
 
 .fc-noselect {
@@ -407,31 +453,37 @@
 .fc-edge-label {
   position: absolute;
   transition: transform .2s;
-//  opacity: 0.8;
+  //  opacity: 0.8;
+
   &.ng-leave {
     transition: 0s none;
   }
+
   &.fc-hover {
     transform: scale(1.25);
   }
+
   &.fc-selected {
     .fc-edge-label-text {
       span {
-        border: solid red;
-        color: #fff;
         font-weight: 600;
-        background-color: red;
+        color: #fff;
+        background-color: #f00;
+        border: solid #f00;
       }
     }
   }
+
   .fc-nodeedit {
     top: -30px;
     right: 14px;
   }
+
   .fc-nodedelete {
     top: -30px;
     right: -13px;
   }
+
   &:focus {
     outline: 0;
   }
@@ -439,27 +491,28 @@
 
 .fc-edge-label-text {
   position: absolute;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-  white-space: nowrap;
-  text-align: center;
   font-size: 14px;
   font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+
   span {
+    padding: 3px 5px;
+    color: #003a79;
     cursor: default;
+    background-color: #fff;
     border: solid 2px #003a79;
     border-radius: 10px;
-    color: #003a79;
-    background-color: #fff;
-    padding: 3px 5px;
   }
 }
 
 .fc-select-rectangle {
-  border: 2px dashed #5262ff;
   position: absolute;
-  background: rgba(20,125,255,0.1);
   z-index: 2;
+  background: rgba(20, 125, 255, .1);
+  border: 2px dashed #5262ff;
 }
 
 @keyframes dash {
@@ -468,13 +521,15 @@
   }
 }
 
-.tb-rule-node-tooltip, .tb-rule-node-help {
+.tb-rule-node-tooltip,
+.tb-rule-node-help {
   color: #333;
 }
 
 .tb-rule-node-tooltip {
-  font-size: 14px;
   max-width: 300px;
+  font-size: 14px;
+
   &.tb-lib-tooltip {
     width: 300px;
   }
@@ -489,28 +544,33 @@
   color: #ea0d0d;
 }
 
-.tb-rule-node-tooltip, .tb-rule-node-error-tooltip, .tb-rule-node-help {
+.tb-rule-node-tooltip,
+.tb-rule-node-error-tooltip,
+.tb-rule-node-help {
   #tb-node-content {
     .tb-node-title {
       font-weight: 600;
     }
+
     .tb-node-description {
       font-style: italic;
       color: #555;
     }
+
     .tb-node-details {
       padding-top: 10px;
       padding-bottom: 10px;
     }
+
     code {
-      padding: 0px 3px 2px 3px;
+      padding: 0 3px 2px 3px;
       margin: 1px;
-      color: #AD1625;
+      font-size: 12px;
+      color: #ad1625;
       white-space: nowrap;
       background-color: #f7f7f9;
       border: 1px solid #e1e1e8;
       border-radius: 2px;
-      font-size: 12px;
     }
   }
-}
+}

ui/src/app/rulechain/rulenode.scss

@@ -16,13 +16,13 @@
 
 .tb-rulenode {
   tb-json-object-edit.tb-rule-node-configuration-json {
-    height: 300px;
     display: block;
+    height: 300px;
   }
 }
 
 .tb-rulenode-directive-error {
-  color: rgb(221,44,0);
   font-size: 13px;
   font-weight: 400;
-}
+  color: rgb(221, 44, 0);
+}

ui/src/app/rulechain/script/node-script-test.scss

@@ -13,24 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../../scss/constants';
+@import "../../../scss/constants";
+
 @import "~compass-sass-mixins/lib/compass";
 
 md-dialog.tb-node-script-test-dialog {
   &.md-dialog-fullscreen {
-    min-height: 100%;
+    width: 100%;
     min-width: 100%;
-    max-height: 100%;
     max-width: 100%;
-    width: 100%;
     height: 100%;
+    min-height: 100%;
+    max-height: 100%;
     border-radius: 0;
   }
 
   .tb-split {
     @include box-sizing(border-box);
-    overflow-y: auto;
     overflow-x: hidden;
+    overflow-y: auto;
   }
 
   .ace_editor {
@@ -38,13 +39,13 @@ md-dialog.tb-node-script-test-dialog {
   }
 
   .tb-content {
-    border: 1px solid #C0C0C0;
     padding-top: 5px;
     padding-left: 5px;
+    border: 1px solid #c0c0c0;
   }
 
   .gutter {
-    background-color: #eeeeee;
+    background-color: #eee;
 
     background-repeat: no-repeat;
     background-position: 50%;
@@ -52,21 +53,23 @@ md-dialog.tb-node-script-test-dialog {
 
   .gutter.gutter-horizontal {
     cursor: col-resize;
-    background-image: url('../../../../node_modules/split.js/grips/vertical.png');
+    background-image: url("../../../../node_modules/split.js/grips/vertical.png");
   }
 
   .gutter.gutter-vertical {
     cursor: row-resize;
-    background-image: url('../../../../node_modules/split.js/grips/horizontal.png');
+    background-image: url("../../../../node_modules/split.js/grips/horizontal.png");
   }
 
-  .tb-split.tb-split-horizontal, .gutter.gutter-horizontal {
+  .tb-split.tb-split-horizontal,
-    height: 100%;
+  .gutter.gutter-horizontal {
     float: left;
+    height: 100%;
   }
 
   .tb-split.tb-split-vertical {
     display: flex;
+
     .tb-split.tb-content {
       height: 100%;
     }
@@ -74,42 +77,44 @@ md-dialog.tb-node-script-test-dialog {
 
   div.tb-editor-area-title-panel {
     position: absolute;
-    font-size: 0.800rem;
-    font-weight: 500;
     top: 13px;
     right: 40px;
     z-index: 5;
+    font-size: .8rem;
+    font-weight: 500;
+
     &.tb-js-function {
       right: 80px;
     }
+
     label {
-      color: #00acc1;
-      background: rgba(220, 220, 220, 0.35);
-      border-radius: 5px;
       padding: 4px;
+      color: #00acc1;
       text-transform: uppercase;
+      background: rgba(220, 220, 220, .35);
+      border-radius: 5px;
     }
+
     .md-button {
-      color: #7B7B7B;
       min-width: 32px;
       min-height: 15px;
-      line-height: 15px;
-      font-size: 0.800rem;
-      margin: 0;
       padding: 4px;
-      background: rgba(220, 220, 220, 0.35);
+      margin: 0;
+      font-size: .8rem;
+      line-height: 15px;
+      color: #7b7b7b;
+      background: rgba(220, 220, 220, .35);
     }
   }
 
   .tb-resize-container {
-    overflow-y: auto;
-    height: 100%;
-    width: 100%;
     position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
 
     .ace_editor {
       height: 100%;
     }
   }
-
 }

ui/src/app/services/toast.scss

@@ -13,20 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 md-toast.tb-info-toast .md-toast-content {
-  font-size: 18px;
-  padding: 18px;
   height: 100%;
+  padding: 18px;
+  font-size: 18px;
 }
 
 md-toast.tb-success-toast .md-toast-content {
-  font-size: 18px !important;
-  background-color: green;
   height: 100%;
+  font-size: 18px !important;
+  background-color: #008000;
 }
 
 md-toast.tb-error-toast .md-toast-content {
-  font-size: 18px !important;
-  background-color: maroon;
   height: 100%;
+  font-size: 18px !important;
+  background-color: #800000;
 }

ui/src/app/user/user-fieldset.scss

@@ -13,18 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../scss/constants';
+@import "../../scss/constants";
 
 .tb-default-dashboard {
   .tb-default-dashboard-label {
     padding-bottom: 8px;
   }
+
   tb-dashboard-autocomplete {
     @media (min-width: $layout-breakpoint-sm) {
       padding-right: 12px;
     }
+
     @media (max-width: $layout-breakpoint-sm) {
       padding-bottom: 12px;
     }
   }
-}
+}

ui/src/app/widget/lib/alarms-table-widget.scss

@@ -13,11 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-has-timewindow {
   .tb-alarms-table {
     md-toolbar {
       min-height: 60px;
       max-height: 60px;
+
       &.md-table-toolbar {
         .md-toolbar-tools {
           max-height: 60px;
@@ -28,10 +30,10 @@
 }
 
 .tb-alarms-table {
-
   md-toolbar {
     min-height: 39px;
     max-height: 39px;
+
     &.md-table-toolbar {
       .md-toolbar-tools {
         max-height: 39px;
@@ -40,14 +42,15 @@
   }
 
   &.tb-data-table {
-    table.md-table, table.md-table.md-row-select {
+    table.md-table,
+    table.md-table.md-row-select {
       tbody {
         tr {
           td {
             &.tb-action-cell {
+              width: 36px;
               min-width: 36px;
               max-width: 36px;
-              width: 36px;
             }
           }
         }

ui/src/app/widget/lib/entities-table-widget.scss

@@ -13,11 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 .tb-has-timewindow {
   .tb-entities-table {
     md-toolbar {
       min-height: 60px;
       max-height: 60px;
+
       &.md-table-toolbar {
         .md-toolbar-tools {
           max-height: 60px;
@@ -28,10 +30,10 @@
 }
 
 .tb-entities-table {
-
   md-toolbar {
     min-height: 39px;
     max-height: 39px;
+
     &.md-table-toolbar {
       .md-toolbar-tools {
         max-height: 39px;
@@ -40,14 +42,15 @@
   }
 
   &.tb-data-table {
-    table.md-table, table.md-table.md-row-select {
+    table.md-table,
+    table.md-table.md-row-select {
       tbody {
         tr {
           td {
             &.tb-action-cell {
+              width: 36px;
               min-width: 36px;
               max-width: 36px;
-              width: 36px;
             }
           }
         }

ui/src/app/widget/lib/extensions-table-widget.scss

@@ -13,16 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 tb-extension-table {
   md-content {
     background-color: #fff;
   }
 }
+
 md-tabs.hide-tabs-menu {
   md-tabs-wrapper {
     display: none;
   }
+
   md-tabs-content-wrapper {
     top: 0 !important;
   }
-}
+}

ui/src/app/widget/lib/rpc/knob.scss

@@ -13,141 +13,156 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-$knob-img: url('./svg/knob.svg');
+$knob-img: url("./svg/knob.svg") !default;
 
-$bars-margin-pct: percentage(0.033);
+$bars-margin-pct: percentage(.033) !default;
-$background-margin-pct: percentage(0.05);
+$background-margin-pct: percentage(.05) !default;
-$value-container-margin-pct: percentage(0.35);
+$value-container-margin-pct: percentage(.35) !default;
-$error-height: percentage(0.05);
+$error-height: percentage(.05) !default;
-$title-height: percentage(0.066);
+$title-height: percentage(.066) !default;
-$title-container-margin-pct: percentage(0.2);
+$title-container-margin-pct: percentage(.2) !default;
-$title-container-margin-bottom-pct: percentage(0.05);
+$title-container-margin-bottom-pct: percentage(.05) !default;
-$minmax-height: percentage(0.04);
+$minmax-height: percentage(.04) !default;
-$minmax-container-margin-pct: percentage(0.18);
+$minmax-container-margin-pct: percentage(.18) !default;
-$minmax-container-margin-bottom-pct: percentage(0.12);
+$minmax-container-margin-bottom-pct: percentage(.12) !default;
 
-$background-color: #e6e7e8;
+$background-color: #e6e7e8 !default;
 
 .tb-knob {
-  width:100%;
+  width: 100%;
-  height:100%;
+  height: 100%;
   background: $background-color;
 
   .knob {
     position: relative;
+
     &[draggable] {
       -moz-user-select: none;
       -webkit-user-select: none;
       user-select: none;
     }
+
     #canvasBar {
-      position:absolute;
+      position: absolute;
-      top:0;
+      top: 0;
-      left:0;
-      bottom: 0;
       right: 0;
+      bottom: 0;
+      left: 0;
       z-index: 2;
     }
+
     .canvas-background {
-      position:absolute;
+      position: absolute;
       top: $background-margin-pct;
-      left: $background-margin-pct;
-      bottom: $background-margin-pct;
       right: $background-margin-pct;
-      border-radius: 50%;
+      bottom: $background-margin-pct;
+      left: $background-margin-pct;
+      z-index: 2;
       background: #3f4346;
-      z-index:2;
+      border-radius: 50%;
     }
+
     .value-container {
-      position:absolute;
+      position: absolute;
       top: $value-container-margin-pct;
-      left: $value-container-margin-pct;
-      bottom: $value-container-margin-pct;
       right: $value-container-margin-pct;
-      z-index:4;
+      bottom: $value-container-margin-pct;
+      left: $value-container-margin-pct;
+      z-index: 4;
+
       .knob-value {
-        color: #fff;
         font-weight: 500;
+        color: #fff;
         white-space: nowrap;
       }
     }
+
     .error-container {
-      position:absolute;
+      position: absolute;
       top: 1%;
-      left: 0;
       right: 0;
-      z-index:4;
+      left: 0;
+      z-index: 4;
       height: $error-height;
+
       .knob-error {
         color: #ff3315;
         white-space: nowrap;
       }
     }
+
     .title-container {
-      position:absolute;
+      position: absolute;
-      left: $title-container-margin-pct;
-      bottom: $title-container-margin-bottom-pct;
       right: $title-container-margin-pct;
-      z-index:4;
+      bottom: $title-container-margin-bottom-pct;
+      left: $title-container-margin-pct;
+      z-index: 4;
       height: $title-height;
+
       .knob-title {
-        color: #757575;
         font-weight: 500;
+        color: #757575;
         white-space: nowrap;
       }
     }
+
     .minmax-container {
-      position:absolute;
+      position: absolute;
-      left: $minmax-container-margin-pct;
-      bottom: $minmax-container-margin-bottom-pct;
       right: $minmax-container-margin-pct;
-      z-index:4;
+      bottom: $minmax-container-margin-bottom-pct;
+      left: $minmax-container-margin-pct;
+      z-index: 4;
       height: $minmax-height;
+
       .minmax-label {
-        color: #757575;
         font-weight: 500;
+        color: #757575;
         white-space: nowrap;
       }
     }
+
     .top-pointer-container {
-      position:absolute;
+      position: absolute;
       top: $bars-margin-pct;
-      left: $bars-margin-pct;
-      bottom: $bars-margin-pct;
       right: $bars-margin-pct;
-      z-index:3;
+      bottom: $bars-margin-pct;
-      cursor:pointer !important;
+      left: $bars-margin-pct;
+      z-index: 3;
+      cursor: pointer !important;
+
       .top-pointer {
-        content:'';
+        position: absolute;
-        width:5%;
+        top: 50%;
-        height:5%;
+        left: 22%;
-        background-color:#b5b5b5;
+        width: 5%;
-        position:absolute;
+        height: 5%;
-        top:50%;
+        margin-top: -2.5%;
-        left:22%;
+        cursor: pointer !important;
-        margin-top:-2.5%;
+        content: "";
+        background-color: #b5b5b5;
         border-radius: 50%;
-        cursor:pointer !important;
         box-shadow: 1px 0 2px #040404;
       }
     }
+
     .top{
-      position:absolute;
+      position: absolute;
       top: $bars-margin-pct;
-      left: $bars-margin-pct;
-      bottom: $bars-margin-pct;
       right: $bars-margin-pct;
-      background:$knob-img no-repeat;
+      bottom: $bars-margin-pct;
+      left: $bars-margin-pct;
+      z-index: 2;
+      cursor: pointer !important;
+      background: $knob-img no-repeat;
       background-size: contain;
-      z-index:2;
-      cursor:pointer !important;
     }
+
     #text-measure {
       position: absolute;
-      visibility: hidden;
-      height: auto;
       width: auto;
+      height: auto;
       white-space: nowrap;
+      visibility: hidden;
     }
   }
 }

ui/src/app/widget/lib/rpc/led-indicator.scss

@@ -15,61 +15,65 @@
  */
 @import "~compass-sass-mixins/lib/compass";
 
-$error-height: 14px;
+$error-height: 14px !default;
 
-$background-color: #e6e7e8;
+$background-color: #e6e7e8 !default;
 
 .tb-led-indicator {
-  width:100%;
+  width: 100%;
-  height:100%;
+  height: 100%;
   background: $background-color;
 
   .title-container {
     .led-title {
-      color: #757575;
       font-weight: 500;
+      color: #757575;
       white-space: nowrap;
     }
   }
 
   .error-container {
-    position:absolute;
+    position: absolute;
     top: 1%;
-    left: 0;
     right: 0;
-    z-index:4;
+    left: 0;
+    z-index: 4;
     height: $error-height;
+
     .led-error {
       color: #ff3315;
       white-space: nowrap;
     }
   }
+
   #text-measure {
     position: absolute;
-    visibility: hidden;
-    height: auto;
     width: auto;
+    height: auto;
     white-space: nowrap;
+    visibility: hidden;
   }
 
   #led-container {
     padding: 10px;
+
     .led {
-      cursor: pointer;
       position: relative;
+      cursor: pointer;
+      background-image: -owg-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
+      background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
+      background-image: -moz-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
+      background-image: -o-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
+      background-image: radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, .25));
       border-radius: 50%;
-      background-image: -owg-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25));
+      transition: background-color .5s, box-shadow .5s;
-      background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25));
+
-      background-image: -moz-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25));
-      background-image: -o-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25));
-      background-image: radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25));
-      transition: background-color 0.5s, box-shadow 0.5s;
       &.disabled {
-        background-image: -owg-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1));
+        background-image: -owg-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
-        background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1));
+        background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
-        background-image: -moz-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1));
+        background-image: -moz-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
-        background-image: -o-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1));
+        background-image: -o-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
-        background-image: radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1));
+        background-image: radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
       }
     }
   }

ui/src/app/widget/lib/rpc/round-switch.scss

@@ -15,179 +15,201 @@
  */
 @import "~compass-sass-mixins/lib/compass";
 
-$error-height: 14px;
+$error-height: 14px !default;
 
-$background-color: #e6e7e8;
+$background-color: #e6e7e8 !default;
 
 .tb-round-switch {
-  width:100%;
+  width: 100%;
-  height:100%;
+  height: 100%;
   background: $background-color;
 
   .title-container {
     .switch-title {
-      color: #757575;
       font-weight: 500;
+      color: #757575;
       white-space: nowrap;
     }
   }
 
   .error-container {
-    position:absolute;
+    position: absolute;
     top: 1%;
-    left: 0;
     right: 0;
-    z-index:4;
+    left: 0;
+    z-index: 4;
     height: $error-height;
+
     .switch-error {
       color: #ff3315;
       white-space: nowrap;
     }
   }
+
   #text-measure {
     position: absolute;
-    visibility: hidden;
-    height: auto;
     width: auto;
+    height: auto;
     white-space: nowrap;
+    visibility: hidden;
   }
 
   #switch-container {
     padding: 10px;
+
     .switch {
-      cursor: pointer;
       position: relative;
-      background:#ddd;
+      width: 260px;
+      min-width: 260px;
+      height: 260px;
+      min-height: 260px;
+      padding: 25px;
+      font-family: sans-serif;
+      font-size: 48px;
+
+      color: #424242;
+      cursor: pointer;
+      -pie-background: -pie-linear-gradient(270deg, #bbb, #ddd);
+      background: #ddd;
       background: -owg-linear-gradient(270deg, #bbb, #ddd);
       background: -webkit-linear-gradient(270deg, #bbb, #ddd);
       background: -moz-linear-gradient(270deg, #bbb, #ddd);
       background: -o-linear-gradient(270deg, #bbb, #ddd);
-      -pie-background: -pie-linear-gradient(270deg, #bbb, #ddd);
       background: linear-gradient(180deg, #bbb, #ddd);
-      border-radius:130px;
+      border-radius: 130px;
+
       @include box-sizing(border-box);
-      @include box-shadow(
-              0px 0px 0px 8px rgba(0,0,0,.1)
-              ,0px 0px 3px 1px rgba(0,0,0,.1)
-              ,inset 0 8px  3px -8px rgba(255,255,255,.4));
-      height: 260px;
-      min-height: 260px;
-      padding: 25px;
-      width: 260px;
-      min-width: 260px;
 
-      color: #424242;
+      @include box-shadow(
-      font-family:sans-serif;
+        0 0 0 8px rgba(0,0,0,.1)
-      font-size:48px;
+        ,0 0 3px 1px rgba(0,0,0,.1)
+        ,inset 0 8px  3px -8px rgba(255,255,255,.4));
 
       input {
-        display:none
+        display: none;
       }
 
-      .on,.off {
+      .on,
-        position:absolute;
+      .off {
-        text-align:center;
+        position: absolute;
+        width: 100%;
+        text-align: center;
+
         @include text-shadow(1px 1px 4px #4a4a4a);
-        width:100%;
       }
 
       .on {
-        color:#444;
+        top: 10px;
-        top:10px;
+        font-family: sans-serif;
-        @include transition(all 0.1s);
+        color: #444;
-        font-family:sans-serif
+
+        @include transition(all .1s);
       }
 
       .off {
-        bottom:5px;
+        bottom: 5px;
-        @include transition(all 0.1s);
+
-        @include transform(scaleY(0.85));
+        @include transition(all .1s);
+
+        @include transform(scaleY(.85));
       }
 
       .but {
+        position: relative;
+        display: block;
+        width: 200px;
+        height: 178px;
+        font-size: 48px;
         cursor: pointer;
-        background-color:#d8d8d8;
+        background-color: #d8d8d8;
+        border-bottom-width: 0;
         border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;
-        border-bottom-width:0px;
+
         @include box-shadow(inset 8px 6px 5px -7px #a2a2a2,
-                inset -8px 6px 5px -7px #a2a2a2,
+        inset -8px 6px 5px -7px #a2a2a2,
-                inset 0 -3px 2px -2px rgba(200, 200, 200, 0.5),
+        inset 0 -3px 2px -2px rgba(200, 200, 200, .5),
-                0 3px 3px -2px #ffffff,
+        0 3px 3px -2px #fff,
-                inset 0 -230px 60px -200px rgba(255, 255, 255, 0.2),
+        inset 0 -230px 60px -200px rgba(255, 255, 255, .2),
-                inset 0 220px 40px -200px rgba(0, 0, 0, 0.3));
+        inset 0 220px 40px -200px rgba(0, 0, 0, .3));
-        display:block;
+
-        font-size:48px;
+        @include transition(all .2s);
-        height:178px;
-        position:relative;
-        @include transition(all 0.2s);
-        width:200px;
       }
 
       .back {
+        width: 210px;
+        height: 210px;
+        padding: 4px 4px;
         cursor: pointer;
         background-color: #888787;
-        background-image: -owg-linear-gradient(0deg, transparent 30%, transparent 70%), -owg-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
+        background-image: -owg-linear-gradient(0deg, transparent 30%, transparent 70%), -owg-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
-        background-image: -webkit-linear-gradient(0deg, transparent 30%, transparent 70%), -webkit-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
+        background-image: -webkit-linear-gradient(0deg, transparent 30%, transparent 70%), -webkit-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
-        background-image: -moz-linear-gradient(0deg, transparent 30%, transparent 70%), -moz-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
+        background-image: -moz-linear-gradient(0deg, transparent 30%, transparent 70%), -moz-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
-        background-image: -o-linear-gradient(0deg, transparent 30%, transparent 70%), -o-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
+        background-image: -o-linear-gradient(0deg, transparent 30%, transparent 70%), -o-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
-        background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
+        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;
+        border-radius: 105px;
-        @include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, 0.3),
+
-                -30px 30px 30px -20px rgba(58, 58, 58, 0.3),
+        @include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, .3),
-                0 30px 30px 0px rgba(16, 16, 16, 0.3),
+        -30px 30px 30px -20px rgba(58, 58, 58, .3),
-                inset 0 -1px 0 0 #484848);
+        0 30px 30px 0 rgba(16, 16, 16, .3),
+        inset 0 -1px 0 0 #484848);
+
         @include box-sizing(border-box);
-        height:210px;
+
-        padding:4px 4px;
+        @include transition(all .2s);
-        @include transition(all 0.2s);
-        width:210px;
       }
 
 
-      input:checked + .back .on,input:checked + .back .off{
+      input:checked + .back .on,
+      input:checked + .back .off{
         @include text-shadow(1px 1px 4px #4a4a4a);
       }
+
       input:checked + .back .on{
-        color:#4c4c4c;
+        top: 10px;
-        top:10px;
+        color: #4c4c4c;
-        @include transform(scaleY(0.85));
+
+        @include transform(scaleY(.85));
       }
+
       input:checked + .back .off{
-        color:#444;
+        bottom: 5px;
-        bottom:5px;
+        color: #444;
+
         @include transform(scaleY(1));
       }
+
       input:checked + .back .but{
-        background:#dcdcdc;
+        margin-top: 20px;
-        background-image: -owg-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
+        background: #dcdcdc;
-        background-image: -webkit-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
+        background-image: -owg-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
-        background-image: -moz-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
+        background-image: -webkit-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
-        background-image: -o-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
+        background-image: -moz-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
-        background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
+        background-image: -o-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
+        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,
+        inset -8px -4px 5px -7px #808080,
-                0 -3px 8px -4px rgba(50, 50, 50, 0.4),
+        0 -3px 8px -4px rgba(50, 50, 50, .4),
-                inset 0 3px 4px -2px #9c9c9c,
+        inset 0 3px 4px -2px #9c9c9c,
-                inset 0 280px 40px -200px rgba(0, 0, 0, 0.2),
+        inset 0 280px 40px -200px rgba(0, 0, 0, .2),
-                inset 0 -200px 40px -200px rgba(180, 180, 180, 0.2));
+        inset 0 -200px 40px -200px rgba(180, 180, 180, .2));
-        margin-top:20px;
       }
-      input:checked + .back{
 
-        background-image: -owg-linear-gradient(90deg, #868686 30%, transparent 70%), -owg-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
+      input:checked + .back{
-        background-image: -webkit-linear-gradient(90deg, #868686 30%, transparent 70%), -webkit-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
+        padding: 2px 4px;
-        background-image: -moz-linear-gradient(90deg, #868686 30%, transparent 70%), -moz-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
+
-        background-image: -o-linear-gradient(90deg, #868686 30%, transparent 70%), -o-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
+        background-image: -owg-linear-gradient(90deg, #868686 30%, transparent 70%), -owg-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);
-        background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
+        background-image: -webkit-linear-gradient(90deg, #868686 30%, transparent 70%), -webkit-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);
-
+        background-image: -moz-linear-gradient(90deg, #868686 30%, transparent 70%), -moz-linear-gradient(180deg, 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, 0.1),
+        background-image: -o-linear-gradient(90deg, #868686 30%, transparent 70%), -o-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);
-                -30px 30px 30px -20px rgba(111, 111, 111, 0.1),
+        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%);
-                0 30px 30px 0px rgba(0, 0, 0, 0.2),
+
-                inset 0 1px 2px 0 rgba(167, 167, 167, 0.6));
+        @include box-shadow(30px 30px 30px -20px rgba(49, 49, 49, .1),
-        padding:2px 4px;
+        -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));
       }
-
     }
   }
 }

ui/src/app/widget/lib/rpc/switch.scss

@@ -13,27 +13,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-$thumb-img: url('./svg/thumb.svg');
+$thumb-img: url("./svg/thumb.svg") !default;
-$thumb-checked-img: url('./svg/thumb-checked.svg');
+$thumb-checked-img: url("./svg/thumb-checked.svg") !default;
-$thumb-bar-img: url('./svg/thumb-bar.svg');
+$thumb-bar-img: url("./svg/thumb-bar.svg") !default;
-$thumb-bar-checked-img: url('./svg/thumb-bar-checked.svg');
+$thumb-bar-checked-img: url("./svg/thumb-bar-checked.svg") !default;
 
-$background-color: #e6e7e8;
+$background-color: #e6e7e8 !default;
 
-$error-height: 14px;
+$error-height: 14px !default;
 
 .tb-switch {
-  width:100%;
+  width: 100%;
-  height:100%;
+  height: 100%;
   background: $background-color;
 
   .error-container {
-    position:absolute;
+    position: absolute;
     top: 1%;
-    left: 0;
     right: 0;
-    z-index:4;
+    left: 0;
+    z-index: 4;
     height: $error-height;
+
     .switch-error {
       color: #ff3315;
       white-space: nowrap;
@@ -42,62 +43,71 @@ $error-height: 14px;
 
   .onoff-container {
     height: 100%;
-    color: #757575;
     font-weight: 500;
+    color: #757575;
     white-space: nowrap;
+
     .off-label {
       color: #b7b5b5;
     }
+
     .on-label {
       color: #ff7e57;
       text-shadow: #ff6e4a 1px 1px 10px, #ffd1c3 1px 1px 10px;
     }
   }
+
   .title-container {
     .switch-title {
-      color: #757575;
       font-weight: 500;
+      color: #757575;
       white-space: nowrap;
     }
   }
 
   #switch-container {
-     padding-left: 10px;
+    padding-right: 10px;
-     padding-right: 10px;
+    padding-left: 10px;
   }
+
   .switch {
     position: relative;
+
     md-switch {
-      margin: 0;
+      position: absolute;
-      position:absolute;
       top: 0;
-      left: 0;
-      bottom: 0;
       right: 0;
+      bottom: 0;
+      left: 0;
+      margin: 0;
+
       .md-container {
         margin: 0;
       }
+
       .md-bar {
+        top: 0;
         left: 0;
         width: 100%;
-        top: 0;
         height: 100%;
-        border-radius: 0;
+        background: $thumb-bar-img no-repeat;
-        background:$thumb-bar-img no-repeat;
         background-size: contain;
+        border-radius: 0;
       }
+
       .md-thumb-container {
-        left: 0.25%;
-        width: 50%;
         top: 5%;
+        left: .25%;
+        width: 50%;
         height: 90%;
       }
+
       .md-thumb {
         top: 0;
         left: 0;
-        height: 100%;
         width: 100%;
-        background:$thumb-img no-repeat;
+        height: 100%;
+        background: $thumb-img no-repeat;
         background-size: contain;
         border-radius: 0;
         box-shadow: none;
@@ -105,22 +115,23 @@ $error-height: 14px;
 
       &.md-checked {
         .md-bar {
-          background:$thumb-bar-checked-img no-repeat;
+          background: $thumb-bar-checked-img no-repeat;
           background-size: contain;
         }
+
         .md-thumb {
-          background:$thumb-checked-img no-repeat;
+          background: $thumb-checked-img no-repeat;
           background-size: contain;
         }
       }
-
     }
   }
+
   #text-measure {
     position: absolute;
-    visibility: hidden;
-    height: auto;
     width: auto;
+    height: auto;
     white-space: nowrap;
+    visibility: hidden;
   }
 }

ui/src/app/widget/lib/timeseries-table-widget.scss

@@ -13,20 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 tb-timeseries-table-widget {
-    table.md-table thead.md-head>tr.md-row {
+  table.md-table thead.md-head > tr.md-row {
-        height: 40px;
+    height: 40px;
-    }
+  }
 
-    table.md-table tbody.md-body>tr.md-row, table.md-table tfoot.md-foot>tr.md-row {
+  table.md-table tbody.md-body > tr.md-row,
-        height: 38px;
+  table.md-table tfoot.md-foot > tr.md-row {
-    }
+    height: 38px;
+  }
 
-    .md-table-pagination>* {
+  .md-table-pagination > * {
-        height: 46px;
+    height: 46px;
-    }
+  }
 
-    .tb-data-table md-toolbar {
+  .tb-data-table md-toolbar {
-        z-index: 10;
+    z-index: 10;
-    }
+  }
 }

ui/src/app/widget/widget-editor.scss

@@ -15,13 +15,13 @@
  */
 @import "~compass-sass-mixins/lib/compass";
 
-$edit-toolbar-height: 40px;
+$edit-toolbar-height: 40px !default;
 
 .tb-editor {
   .tb-split {
     @include box-sizing(border-box);
-    overflow-y: auto;
     overflow-x: hidden;
+    overflow-y: auto;
   }
 
   .ace_editor {
@@ -29,7 +29,7 @@ $edit-toolbar-height: 40px;
   }
 
   .tb-content {
-    border: 1px solid #C0C0C0;
+    border: 1px solid #c0c0c0;
   }
 
   .gutter {
@@ -41,21 +41,23 @@ $edit-toolbar-height: 40px;
 
   .gutter.gutter-horizontal {
     cursor: col-resize;
-    background-image: url('../../../node_modules/split.js/grips/vertical.png');
+    background-image: url("../../../node_modules/split.js/grips/vertical.png");
   }
 
   .gutter.gutter-vertical {
     cursor: row-resize;
-    background-image: url('../../../node_modules/split.js/grips/horizontal.png');
+    background-image: url("../../../node_modules/split.js/grips/horizontal.png");
   }
 
-  .tb-split.tb-split-horizontal, .gutter.gutter-horizontal {
+  .tb-split.tb-split-horizontal,
-    height: 100%;
+  .gutter.gutter-horizontal {
     float: left;
+    height: 100%;
   }
 
   .tb-split.tb-split-vertical {
     display: flex;
+
     .tb-split.tb-content {
       height: 100%;
     }
@@ -64,7 +66,6 @@ $edit-toolbar-height: 40px;
 
 .tb-split-vertical {
   md-tabs {
-
     md-tabs-content-wrapper {
       height: calc(100% - 49px);
 
@@ -74,45 +75,44 @@ $edit-toolbar-height: 40px;
         & > div {
           height: 100%;
         }
-
       }
-
     }
-
   }
 }
 
 div.tb-editor-area-title-panel {
   position: absolute;
-  font-size: 0.800rem;
-  font-weight: 500;
   top: 5px;
   right: 20px;
   z-index: 5;
+  font-size: .8rem;
+  font-weight: 500;
+
   label {
-    color: #00acc1;
-    background: rgba(220, 220, 220, 0.35);
-    border-radius: 5px;
     padding: 4px;
+    color: #00acc1;
     text-transform: uppercase;
+    background: rgba(220, 220, 220, .35);
+    border-radius: 5px;
   }
+
   .md-button {
-    color: #7B7B7B;
     min-width: 32px;
     min-height: 15px;
-    line-height: 15px;
-    font-size: 0.800rem;
-    margin: 0;
     padding: 4px;
-    background: rgba(220, 220, 220, 0.35);
+    margin: 0;
+    font-size: .8rem;
+    line-height: 15px;
+    color: #7b7b7b;
+    background: rgba(220, 220, 220, .35);
   }
 }
 
 .tb-resize-container {
-  overflow-y: auto;
-  height: 100%;
-  width: 100%;
   position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
 
   .ace_editor {
     height: 100%;
@@ -127,24 +127,28 @@ md-toolbar.tb-edit-toolbar {
   .md-toolbar-tools {
     min-height: $edit-toolbar-height !important;
     max-height: $edit-toolbar-height !important;
+
     .md-button {
       min-width: 65px;
       min-height: 30px;
-      line-height: 30px;
       font-size: 12px;
+      line-height: 30px;
+
       md-icon {
         font-size: 20px;
       }
+
       span {
         padding-right: 6px;
       }
     }
+
     md-input-container {
       input {
-        font-size: 1.200rem;
-        font-weight: 400;
-        letter-spacing: 0.005em;
         height: 28px;
+        font-size: 1.2rem;
+        font-weight: 400;
+        letter-spacing: .005em;
       }
     }
   }

ui/src/scss/animations.scss

@@ -18,6 +18,7 @@
 @include keyframes(tbMoveFromTopFade) {
   from {
     opacity: 0;
+
     @include transform(translate(0, -100%));
   }
 }
@@ -25,6 +26,7 @@
 @include keyframes(tbMoveToTopFade) {
   to {
     opacity: 0;
+
     @include transform(translate(0, -100%));
   }
 }
@@ -32,6 +34,7 @@
 @include keyframes(tbMoveFromBottomFade) {
   from {
     opacity: 0;
+
     @include transform(translate(0, 100%));
   }
 }
@@ -39,6 +42,7 @@
 @include keyframes(tbMoveToBottomFade) {
   to {
     opacity: 0;
+
     @include transform(translate(0, 150%));
   }
-}
+}

ui/src/scss/constants.scss

@@ -17,18 +17,18 @@
 
 // Colors
 
-$gray: #eee;
+$gray: #eee !default;
 
-$primary-palette-color: 'indigo';
+$primary-palette-color: "indigo" !default;
-$default: '500';
+$default: "500" !default;
-$hue-1: '300';
+$hue-1: "300" !default;
-$hue-2: '800';
+$hue-2: "800" !default;
-$hue-3: 'a100';
+$hue-3: "a100" !default;
 
-$primary-default: #305680; //material-color($primary-palette-color, $default);
+$primary-default: #305680 !default; //material-color($primary-palette-color, $default);
-$primary-hue-1: material-color($primary-palette-color, $hue-1);
+$primary-hue-1: material-color($primary-palette-color, $hue-1) !default;
-$primary-hue-2: material-color($primary-palette-color, $hue-2);
+$primary-hue-2: material-color($primary-palette-color, $hue-2) !default;
-$primary-hue-3: rgb(207, 216, 220);
+$primary-hue-3: rgb(207, 216, 220) !default;
 
 // Layout
 

ui/src/scss/main.scss

@@ -14,77 +14,92 @@
  * limitations under the License.
  */
 @import "~compass-sass-mixins/lib/compass";
+
 @import "constants";
+
 @import "animations";
+
 @import "mixins";
+
 @import "fonts";
 
 /***************
  * TYPE DEFAULTS
  ***************/
 
-button, html, input, select, textarea {
+button,
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
+html,
+input,
+select,
+textarea {
+  font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
 .mdi-set {
   line-height: 1;
-  letter-spacing: normal;
   text-transform: none;
-  white-space: nowrap;
+  letter-spacing: normal;
   word-wrap: normal;
+  white-space: nowrap;
   direction: ltr;
-  -webkit-font-feature-settings: 'liga';
+  -webkit-font-feature-settings: "liga";
 }
 
 a {
-  color: #106CC8;
-  text-decoration: none;
   font-weight: 400;
-  border-bottom: 1px solid rgba(64, 84, 178, 0.25);
+  color: #106cc8;
-  @include transition(border-bottom 0.35s);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(64, 84, 178, .25);
+
+  @include transition(border-bottom .35s);
 }
 
-a:hover, a:focus {
+a:hover,
-  border-bottom: 1px solid #4054B2;
+a:focus {
+  border-bottom: 1px solid #4054b2;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
-  margin-bottom: 1rem;
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 h1 {
-  font-size: 3.400rem;
+  font-size: 3.4rem;
   font-weight: 400;
   line-height: 4rem;
 }
 
 h2 {
-  font-size: 2.400rem;
+  font-size: 2.4rem;
   font-weight: 400;
   line-height: 3.2rem;
 }
 
 h3 {
-  font-size: 2.000rem;
+  font-size: 2rem;
   font-weight: 500;
-  letter-spacing: 0.005em;
+  letter-spacing: .005em;
 }
 
 h4 {
-  font-size: 1.600rem;
+  font-size: 1.6rem;
   font-weight: 400;
-  letter-spacing: 0.010em;
   line-height: 2.4rem;
+  letter-spacing: .01em;
 }
 
 p {
+  margin: .8em 0 1.6em;
   font-size: 1.6rem;
   font-weight: 400;
-  letter-spacing: 0.010em;
   line-height: 1.6em;
-  margin: 0.8em 0 1.6em;
+  letter-spacing: .01em;
 }
 
 strong {
@@ -92,16 +107,16 @@ strong {
 }
 
 blockquote {
-  border-left: 3px solid rgba(0, 0, 0, 0.12);
-  font-style: italic;
-  margin-left: 0;
   padding-left: 16px;
+  margin-left: 0;
+  font-style: italic;
+  border-left: 3px solid rgba(0, 0, 0, .12);
 }
 
 fieldset {
-  border: none;
   padding: 0;
   margin: 0;
+  border: none;
 }
 
 /*********************************
@@ -119,26 +134,28 @@ form {
 }
 
 md-bottom-sheet .md-subheader {
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
 .md-chips {
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-md-content.md-default-theme, md-content {
+md-content.md-default-theme,
+md-content {
   background-color: $gray;
 }
 
 md-card {
   background-color: #fff;
+
   h2:first-of-type {
     margin-top: 0;
   }
 }
 
 .md-button:not([disabled]).md-icon-button:hover {
-  background-color: rgba(158, 158, 158, 0.2);
+  background-color: rgba(158, 158, 158, .2);
 }
 
 md-toolbar:not(.md-hue-1),
@@ -147,11 +164,12 @@ md-toolbar:not(.md-hue-1),
 }
 
 md-toolbar md-input-container .md-errors-spacer {
-  min-height: 0px;
+  min-height: 0;
 }
 
 md-toolbar {
-  md-select.md-default-theme:not([disabled]):focus .md-select-value, md-select:not([disabled]):focus .md-select-value {
+  md-select.md-default-theme:not([disabled]):focus .md-select-value,
+  md-select:not([disabled]):focus .md-select-value {
     color: #fff;
   }
 }
@@ -159,11 +177,10 @@ md-toolbar {
 md-menu-item {
   overflow: hidden;
   fill: #737373;
-}
 
-md-menu-item {
   .md-button {
     display: block;
+
     .tb-alt-text {
       float: right;
     }
@@ -190,13 +207,14 @@ md-sidenav {
   overflow-y: auto;
 }
 
-.md-radio-interactive input, button {
+.md-radio-interactive input,
+button {
   pointer-events: all;
 }
 
 .md-color-picker-input-container {
   md-input-container {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
 }
 
@@ -204,32 +222,36 @@ md-sidenav {
  * THINGSBOARD SPECIFIC
  ***********************/
 
-$swift-ease-out-duration: 0.4s !default;
+$swift-ease-out-duration: .4s !default;
-$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
 
 $input-label-float-offset: 6px !default;
-$input-label-float-scale: 0.75 !default;
+$input-label-float-scale: .75 !default;
 
 label {
   &.tb-title {
-    pointer-events: none;
+    padding-bottom: 15px;
-    color: #666;
     font-size: 13px;
     font-weight: 400;
-    padding-bottom: 15px;
+    color: #666;
+    pointer-events: none;
+
     &.no-padding {
-      padding-bottom: 0px;
+      padding-bottom: 0;
     }
-    &.tb-required:after {
+
-      content: ' *';
+    &.tb-required::after {
       font-size: 13px;
+      color: rgba(0, 0, 0, .54);
       vertical-align: top;
-      color: rgba(0,0,0,0.54);
+      content: " *";
     }
+
     &.tb-error {
-      color: rgb(221,44,0);
+      color: rgb(221, 44, 0);
-      &.tb-required:after {
+
-        color: rgb(221,44,0);
+      &.tb-required::after {
+        color: rgb(221, 44, 0);
       }
     }
   }
@@ -246,96 +268,107 @@ label {
 }
 
 .tb-readonly-label {
-  color: rgba(0,0,0,0.54);
+  color: rgba(0, 0, 0, .54);
 }
 
 .tb-disabled-label {
-  color: rgba(0,0,0,0.44);
+  color: rgba(0, 0, 0, .44);
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors */
 label {
   &.tb-small {
-    pointer-events: none;
-    color: rgba(0,0,0,0.54);
     font-size: 12px;
+    color: rgba(0, 0, 0, .54);
+    pointer-events: none;
   }
 }
 
 div {
   &.tb-small {
-    color: rgba(0,0,0,0.54);
     font-size: 14px;
+    color: rgba(0, 0, 0, .54);
   }
 }
 
 .tb-hint {
+  padding-bottom: 15px;
   font-size: 12px;
   line-height: 14px;
-  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+  color: #808080;
-  color: grey;
+  transition: all .3s cubic-bezier(.55, 0, .55, .2);
-  padding-bottom: 15px;
+
-  &.ng-hide, &.ng-enter, &.ng-leave.ng-leave-active {
+  &.ng-hide,
+  &.ng-enter,
+  &.ng-leave.ng-leave-active {
     bottom: 26px;
     opacity: 0;
   }
-  &.ng-leave, &.ng-enter.ng-enter-active {
+
+  &.ng-leave,
+  &.ng-enter.ng-enter-active {
     bottom: 7px;
     opacity: 1;
   }
 }
 
 .md-caption {
-  &.tb-required:after {
+  &.tb-required::after {
-    content: ' *';
     font-size: 10px;
+    color: rgba(0, 0, 0, .54);
     vertical-align: top;
-    color: rgba(0,0,0,0.54);
+    content: " *";
   }
 }
 
 pre.tb-highlight {
-  background-color: #f7f7f7;
   display: block;
-  margin: 20px 0;
   padding: 15px;
+  margin: 20px 0;
   overflow-x: auto;
+  background-color: #f7f7f7;
+
   code {
+    box-sizing: border-box;
+    display: inline-block;
     padding: 0;
-    color: #303030;
     font-family: monospace;
-    display: inline-block;
-    box-sizing: border-box;
-    vertical-align: bottom;
     font-size: 16px;
-    font-weight: bold;
+    font-weight: 700;
+    color: #303030;
+    vertical-align: bottom;
   }
 }
 
 .tb-notice {
-  background-color: #f7f7f7;
   padding: 15px;
-  border: 1px solid #ccc;
   font-size: 16px;
+  background-color: #f7f7f7;
+  border: 1px solid #ccc;
 }
 
 .tb-data-table {
   md-toolbar {
     z-index: 0;
   }
+
   md-toolbar.md-table-toolbar.md-default-theme:not(.md-menu-toolbar).md-default .md-button[disabled],
   md-toolbar.md-table-toolbar:not(.md-menu-toolbar).md-default .md-button[disabled] {
-    color: rgba(0,0,0,0.38);
+    color: rgba(0, 0, 0, .38);
   }
+
   md-toolbar.md-default-theme:not(.md-menu-toolbar) .md-button[disabled] md-icon,
   md-toolbar:not(.md-menu-toolbar) .md-button[disabled] md-icon {
-    color: rgba(0,0,0,.28);
+    color: rgba(0, 0, 0, .28);
   }
+
   span.no-data-found {
     position: relative;
+    display: flex;
     height: calc(100% - 57px);
     text-transform: uppercase;
-    display: flex;
   }
+
   table.md-table {
     &.md-row-select td.md-cell,
     &.md-row-select th.md-column {
@@ -366,49 +399,55 @@ pre.tb-highlight {
 
     td.md-cell,
     th.md-column {
-
       &:last-child {
         padding: 0 12px 0 0;
       }
-
     }
   }
 
-  table.md-table, table.md-table.md-row-select {
+  table.md-table,
+  table.md-table.md-row-select {
     tbody {
       &.md-body {
         tr {
           &.md-row:not([disabled]) {
             outline: none;
+
             &:hover {
-              background-color: rgba(221, 221, 221, 0.3) !important;
+              background-color: rgba(221, 221, 221, .3) !important;
             }
+
             &.md-selected {
-              background-color: rgba(221, 221, 221, 0.5) !important;
+              background-color: rgba(221, 221, 221, .5) !important;
             }
-            &.tb-current, &.tb-current:hover{
+
-              background-color: rgba(221, 221, 221, 0.65) !important;
+            &.tb-current,
+            &.tb-current:hover{
+              background-color: rgba(221, 221, 221, .65) !important;
             }
           }
         }
       }
+
       tr {
         td {
           &.tb-action-cell {
+            width: 72px;
+            min-width: 72px;
+            max-width: 72px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            min-width: 72px;
+
-            max-width: 72px;
-            width: 72px;
             .md-button {
               &.md-icon-button {
-                margin: 0;
-                padding: 6px;
                 width: 36px;
                 height: 36px;
+                padding: 6px;
+                margin: 0;
               }
             }
+
             .tb-spacer {
               padding-left: 38px;
             }
@@ -420,34 +459,40 @@ pre.tb-highlight {
 }
 
 .tb-severity {
-  font-weight: bold;
+  font-weight: 700;
+
   &.tb-critical {
-    color: red !important;
+    color: #f00 !important;
   }
+
   &.tb-major {
-    color: orange !important;
+    color: #ffa500 !important;
   }
+
   &.tb-minor {
     color: #ffca3d !important;
   }
+
   &.tb-warning {
     color: #abab00 !important;
   }
+
   &.tb-indeterminate {
-    color: green !important;
+    color: #008000 !important;
   }
 }
 
 .tb-card-description {
-  color: rgba(0,0,0,0.54);
   font-size: 13px;
+  color: rgba(0, 0, 0, .54);
+
   @include line-clamp(2, 1.1);
 }
 
 /***********************
  * Flow
  ***********************/
-$previewSize: 100px;
+$previewSize: 100px !default;
 
 .file-input {
   display: none;
@@ -455,17 +500,19 @@ $previewSize: 100px;
 
 .tb-flow-drop {
   position: relative;
-  border: dashed 2px;
   height: $previewSize;
   overflow: hidden;
+  border: dashed 2px;
+
   label {
-    width: 100%;
-    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    width: 100%;
+    height: 100%;
     font-size: 16px;
     text-align: center;
+
     @media (min-width: $layout-breakpoint-sm) {
       font-size: 24px;
     }
@@ -474,8 +521,8 @@ $previewSize: 100px;
 
 .tb-container {
   position: relative;
-  margin-top: 32px;
   padding: 10px 0;
+  margin-top: 32px;
 }
 
 /***********************
@@ -483,12 +530,12 @@ $previewSize: 100px;
  ***********************/
 
 .tb-prompt {
-  color: rgba(0,0,0,0.38);
-  text-transform: uppercase;
   display: flex;
   font-size: 18px;
   font-weight: 400;
   line-height: 18px;
+  color: rgba(0, 0, 0, .38);
+  text-transform: uppercase;
 }
 
 /***********************
@@ -500,35 +547,37 @@ $previewSize: 100px;
 }
 
 .tb-error-message {
+  padding: 10px 0 0 10px;
+  margin-top: -6px;
+  overflow: hidden;
   font-size: 12px;
   line-height: 14px;
-  overflow: hidden;
+  color: rgb(221, 44, 0);
-  padding: 10px 0px 0px 10px;
-  color: rgb(221,44,0);
-  margin-top: -6px;
 }
 
 .tb-error-message.ng-animate {
-  @include transition(all .3s cubic-bezier(.55,0,.55,.2));
+  @include transition(all .3s cubic-bezier(.55, 0, .55, .2));
 }
 
-.tb-error-message.ng-enter-prepare, .tb-error-message.ng-enter {
+.tb-error-message.ng-enter-prepare,
-  opacity:0;
+.tb-error-message.ng-enter {
   margin-top: -24px;
+  opacity: 0;
 }
 
 .tb-error-message.ng-enter.ng-enter-active {
-  opacity:1;
   margin-top: -6px;
+  opacity: 1;
 }
 
 .tb-error-message.ng-leave {
-  opacity:1;
   margin-top: -6px;
+  opacity: 1;
 }
+
 .tb-error-message.ng-leave.ng-leave-active {
-  opacity:0;
   margin-top: -24px;
+  opacity: 0;
 }
 
 /***********************
@@ -545,39 +594,41 @@ md-tabs.tb-headless {
 
 .md-button.tb-card-button {
   width: 100%;
-  height: 100%;
   max-width: 240px;
+  height: 100%;
+
   span {
+    height: 18px;
+    min-height: 18px;
+    max-height: 18px;
     padding: 0 0 20px 0;
+    margin: auto;
     font-size: 18px;
     font-weight: 400;
-    white-space: normal;
     line-height: 18px;
-    max-height: 18px;
+    white-space: normal;
-    min-height: 18px;
-    height: 18px;
-    margin: auto;
   }
 }
 
 .md-button.tb-layout-button {
   width: 100%;
-  height: 100%;
   max-width: 240px;
+  height: 100%;
+
   span {
     padding: 40px;
     font-size: 18px;
     font-weight: 400;
-    white-space: normal;
     line-height: 18px;
+    white-space: normal;
   }
 }
 
 .md-button.tb-add-new-widget {
+  padding-right: 12px;
+  font-size: 24px;
   border-style: dashed;
   border-width: 2px;
-  font-size: 24px;
-  padding-right: 12px;
 }
 
 /***********************
@@ -585,11 +636,12 @@ md-tabs.tb-headless {
  ***********************/
 
 section.tb-header-buttons {
-  pointer-events: none;
   position: absolute;
-  right: 0px;
   top: 86px;
+  right: 0;
   z-index: 3;
+  pointer-events: none;
+
   @media (min-width: $layout-breakpoint-sm) {
     top: 86px;
   }
@@ -633,6 +685,7 @@ section.tb-footer-buttons {
 
 ._md-toast-open-bottom .tb-footer-buttons {
   @include transition(all .4s cubic-bezier(.25, .8, .25, 1));
+
   @include transform(translate3d(0, -42px, 0));
 }
 
@@ -641,27 +694,27 @@ section.tb-footer-buttons {
  ***********************/
 
 .md-icon-button.tb-md-32 {
-  vertical-align: middle;
   width: 32px;
-  height: 32px;
   min-width: 32px;
+  height: 32px;
   min-height: 32px;
-  margin: 0px !important;
+  padding: 0 !important;
-  padding: 0px !important;
+  margin: 0 !important;
+  vertical-align: middle;
 }
 
 .material-icons.tb-md-20 {
-  font-size: 20px;
   width: 20px;
-  height: 20px;
   min-width: 20px;
+  height: 20px;
   min-height: 20px;
+  font-size: 20px;
 }
 
 .material-icons.tb-md-96 {
-  font-size: 96px;
   width: 96px;
   height: 96px;
+  font-size: 96px;
 }
 
 /***********************
@@ -671,17 +724,17 @@ section.tb-footer-buttons {
 .tb-absolute-fill {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
 }
 
 .tb-progress-cover {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   z-index: 6;
   opacity: 1;
 }

ui/src/scss/mixins.scss

@@ -17,43 +17,49 @@
 
 @mixin input-placeholder {
   // replaces compass/css/user-interface/input-placeholder()
+
   &::-webkit-input-placeholder  {
     @content;
   }
+
   &:-moz-placeholder {
     @content;
     opacity: 1;
   }
+
   &::-moz-placeholder {
     @content;
     opacity: 1;
   }
+
   &:-ms-input-placeholder {
     @content;
   }
 }
 
 @mixin line-clamp($numLines: 1, $lineHeight: 1.412) {
-  overflow: hidden;
   position: relative;
+  max-height: ($numLines * $lineHeight * 1em);
+  padding-right: 2em;
+  margin-right: -1em;
+  overflow: hidden;
   line-height: $lineHeight;
   text-align: justify;
-  margin-right: -1em;
+
-  padding-right: 2em;
+  &::before {
-  max-height: ($numLines*$lineHeight)+em;
-  &:before {
-    content: '...';
     position: absolute;
     right: 1em;
     bottom: 0;
+    content: "...";
   }
-  &:after {
+
-    content: '';
+  &::after {
     position: absolute;
     right: 1em;
     width: 1em;
     height: 1em;
-    margin-top: 0.2em;
+    margin-top: .2em;
-    background: white;
+    content: "";
+    background: #fff;
   }
 }