Merge pull request #1074 from tagliala/add-autoprefixer

Add autoprefixer

ui/.stylelintrc

@@ -251,7 +251,7 @@
       "fill",
       "stroke"
     ],
-    "property-no-vendor-prefix": null,
+    "property-no-vendor-prefix": true,
     "rule-empty-line-before": ["always", {
       "except": ["first-nested"],
       "ignore": ["after-comment"]
@@ -272,7 +272,7 @@
     "selector-max-type": 5,
     "selector-max-universal": 1,
     "selector-no-qualifying-type": null,
-    "selector-no-vendor-prefix": null,
+    "selector-no-vendor-prefix": true,
     "selector-type-no-unknown": [true, {
       "ignoreTypes": [
         "/^md-/",
@@ -287,6 +287,6 @@
     "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
+    "value-no-vendor-prefix": true
   }
 }

ui/package.json

@@ -119,7 +119,7 @@
     "ng-annotate-loader": "^0.1.1",
     "ngtemplate-loader": "^1.3.1",
     "node-sass": "^4.5.3",
-    "postcss-loader": "^0.13.0",
+    "postcss-loader": "^3.0.0",
     "raw-loader": "^0.5.1",
     "react-hot-loader": "^3.0.0-beta.6",
     "sass-loader": "^4.0.2",
@@ -145,5 +145,19 @@
       "node_modules",
       "target"
     ]
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not ie <= 10",
+    "not ie_mob <= 10",
+    "not bb <= 10",
+    "not op_mob <= 12.1"
+  ],
+  "postcss": {
+    "plugins": {
+      "autoprefixer": true
+    }
   }
 }

ui/src/app/components/dashboard.scss

@@ -22,7 +22,7 @@ div.tb-widget {
   overflow: hidden;
   outline: none;
 
-  @include transition(all .2s ease-in-out);
+  transition: all .2s ease-in-out;
 
   .tb-widget-title {
     max-height: 60px;
@@ -99,7 +99,7 @@ md-content.tb-dashboard-content {
   outline: none;
 
   .gridster-item {
-    @include transition(none);
+    transition: none;
   }
 }
 

ui/src/app/components/grid.scss

@@ -20,7 +20,7 @@
 }
 
 .tb-card-item {
-  @include transition(all .2s ease-in-out);
+  transition: all .2s ease-in-out;
 
   md-card-content {
     max-height: 53px;
@@ -46,7 +46,7 @@
 .tb-current-item {
   opacity: .5;
 
-  @include transform(scale(1.05));
+  transform: scale(1.05);
 }
 
 #tb-vertical-container {

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

@@ -16,7 +16,7 @@
 @import "~compass-sass-mixins/lib/compass";
 
 .md-button-toggle .md-toggle-icon.tb-toggled {
-  @include transform(rotateZ(180deg));
+  transform: rotateZ(180deg);
 }
 
 .tb-menu-toggle-list.ng-hide {
@@ -28,7 +28,7 @@
   z-index: 1;
   overflow: hidden;
 
-  @include transition(.75s cubic-bezier(.35, 0, .25, 1));
+  transition: .75s cubic-bezier(.35, 0, .25, 1);
 
-  @include transition-property(height);
+  transition-property: height;
 }

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

@@ -28,7 +28,7 @@ $input-label-float-scale: .75 !default;
   line-height: 12px;
   color: rgb(244, 67, 54);
 
-  @include transition(all 450ms cubic-bezier(.23, 1, .32, 1) 0ms);
+  transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms;
 }
 
 .tb-container {
@@ -77,14 +77,13 @@ label.tb-label {
   bottom: 100%;
   left: 0;
   color: rgba(0, 0, 0, .54);
+
+  transition: transform $swift-ease-out-timing-function $swift-ease-out-duration, width $swift-ease-out-timing-function $swift-ease-out-duration;
+
+  transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
   transform-origin: left top;
   -webkit-font-smoothing: antialiased;
 
-  @include transform(translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale));
-
-  @include transition(transform $swift-ease-out-timing-function $swift-ease-out-duration,
-  width $swift-ease-out-timing-function $swift-ease-out-duration);
-
   &.tb-focused {
     color: rgb(96, 125, 139);
   }

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

@@ -53,7 +53,7 @@
   margin: auto 0 auto auto;
   background-size: 100% auto;
 
-  @include transition(transform .3s, ease-in-out);
+  transition: transform .3s, ease-in-out;
 }
 
 .tb-side-menu .md-button {

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

@@ -16,12 +16,12 @@
 
 .tb-dashboard-assigned-customers {
   display: block;
-  display: -webkit-box;
+  display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
   height: 34px;
   margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  -webkit-box-orient: vertical; /* stylelint-disable-line property-no-vendor-prefix */
 }
 

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

@@ -31,7 +31,7 @@ tb-dashboard-toolbar {
           &.md-fab {
             opacity: 1;
 
-            @include transition(opacity .3s cubic-bezier(.55,0,.55,.2));
+            transition: opacity .3s cubic-bezier(.55, 0, .55, .2);
 
             .md-fab-toolbar-background {
               background-color: $primary-default !important;
@@ -50,7 +50,7 @@ tb-dashboard-toolbar {
           line-height: 36px;
           opacity: .5;
 
-          @include transition(opacity .3s cubic-bezier(.55,0,.55,.2) .2s);
+          transition: opacity .3s cubic-bezier(.55, 0, .55, .2) .2s;
 
           md-icon {
             position: absolute;

ui/src/app/dashboard/dashboard.scss

@@ -75,13 +75,13 @@ section.tb-dashboard-toolbar {
 
   &.tb-dashboard-toolbar-opened {
     right: 0;
-    // @include transition(right .3s cubic-bezier(.55,0,.55,.2));
+    // transition: right .3s cubic-bezier(.55, 0, .55, .2);
   }
 
   &.tb-dashboard-toolbar-closed {
     right: 18px;
 
-    @include transition(right .3s cubic-bezier(.55,0,.55,.2) .2s);
+    transition: right .3s cubic-bezier(.55, 0, .55, .2) .2s;
   }
 }
 
@@ -102,14 +102,14 @@ section.tb-dashboard-toolbar {
         margin-top: $toolbar-height;
       }
 
-      @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2));
+      transition: margin-top .3s cubic-bezier(.55, 0, .55, .2);
     }
   }
 
   &.tb-dashboard-toolbar-closed {
     margin-top: 0;
 
-    @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2) .2s);
+    transition: margin-top .3s cubic-bezier(.55, 0, .55, .2) .2s;
   }
 
   .tb-dashboard-layouts {

ui/src/app/layout/home.scss

@@ -42,7 +42,7 @@
     border: none;
     opacity: .75;
 
-    @include transition(opacity .35s);
+    transition: opacity .35s;
   }
 
   a:hover,

ui/src/app/rulechain/rulechain.scss

@@ -84,9 +84,6 @@
 
       .tb-panel-title {
         min-width: 150px;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
         user-select: none;
       }
 
@@ -163,10 +160,6 @@
 .fc-canvas {
   min-width: 100%;
   min-height: 100%;
-  -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;
@@ -441,13 +434,7 @@
 }
 
 .fc-noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
+  user-select: none;
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome and Opera */
 }
 
 .fc-edge-label {
@@ -495,7 +482,6 @@
   font-weight: 600;
   text-align: center;
   white-space: nowrap;
-  -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 
   span {

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

@@ -29,7 +29,7 @@ md-dialog.tb-node-script-test-dialog {
   }
 
   .tb-split {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     overflow-x: hidden;
     overflow-y: auto;
   }

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

@@ -37,8 +37,6 @@ $background-color: #e6e7e8 !default;
     position: relative;
 
     &[draggable] {
-      -moz-user-select: none;
-      -webkit-user-select: none;
       user-select: none;
     }
 

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

@@ -60,19 +60,11 @@ $background-color: #e6e7e8 !default;
     .led {
       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%;
       transition: background-color .5s, box-shadow .5s;
 
       &.disabled {
-        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, .5), rgba(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, .5), rgba(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

@@ -59,6 +59,8 @@ $background-color: #e6e7e8 !default;
 
     .switch {
       position: relative;
+
+      box-sizing: border-box;
       width: 260px;
       min-width: 260px;
       height: 260px;
@@ -69,21 +71,14 @@ $background-color: #e6e7e8 !default;
 
       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);
       background: linear-gradient(180deg, #bbb, #ddd);
       border-radius: 130px;
 
-      @include box-sizing(border-box);
+      box-shadow:
-
+        0 0 0 8px rgba(0, 0, 0, .1),
-      @include box-shadow(
+        0 0 3px 1px rgba(0, 0, 0, .1),
-        0 0 0 8px rgba(0,0,0,.1)
+        inset 0 8px  3px -8px rgba(255, 255, 255, .4);
-        ,0 0 3px 1px rgba(0,0,0,.1)
-        ,inset 0 8px  3px -8px rgba(255,255,255,.4));
 
       input {
         display: none;
@@ -95,7 +90,7 @@ $background-color: #e6e7e8 !default;
         width: 100%;
         text-align: center;
 
-        @include text-shadow(1px 1px 4px #4a4a4a);
+        text-shadow: 1px 1px 4px #4a4a4a;
       }
 
       .on {
@@ -103,15 +98,15 @@ $background-color: #e6e7e8 !default;
         font-family: sans-serif;
         color: #444;
 
-        @include transition(all .1s);
+        transition: all .1s;
       }
 
       .off {
         bottom: 5px;
 
-        @include transition(all .1s);
+        transition: all .1s;
 
-        @include transform(scaleY(.85));
+        transform: scaleY(.85);
       }
 
       .but {
@@ -125,90 +120,82 @@ $background-color: #e6e7e8 !default;
         border-bottom-width: 0;
         border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;
 
-        @include box-shadow(inset 8px 6px 5px -7px #a2a2a2,
+        box-shadow:
+          inset 8px 6px 5px -7px #a2a2a2,
           inset -8px 6px 5px -7px #a2a2a2,
           inset 0 -3px 2px -2px rgba(200, 200, 200, .5),
           0 3px 3px -2px #fff,
           inset 0 -230px 60px -200px rgba(255, 255, 255, .2),
-        inset 0 220px 40px -200px rgba(0, 0, 0, .3));
+          inset 0 220px 40px -200px rgba(0, 0, 0, .3);
 
-        @include transition(all .2s);
+        transition: all .2s;
       }
 
       .back {
+
+        box-sizing: border-box;
         width: 210px;
         height: 210px;
         padding: 4px 4px;
         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, .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, .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, .2) 50%, rgba(150, 150, 150, 0) 70%);
         border-radius: 105px;
 
-        @include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, .3),
+        box-shadow:
+          30px 30px 30px -20px rgba(58, 58, 58, .3),
           -30px 30px 30px -20px rgba(58, 58, 58, .3),
           0 30px 30px 0 rgba(16, 16, 16, .3),
-        inset 0 -1px 0 0 #484848);
+          inset 0 -1px 0 0 #484848;
 
-        @include box-sizing(border-box);
+        transition: all .2s;
-
-        @include transition(all .2s);
       }
 
 
       input:checked + .back .on,
       input:checked + .back .off{
-        @include text-shadow(1px 1px 4px #4a4a4a);
+        text-shadow: 1px 1px 4px #4a4a4a;
       }
 
       input:checked + .back .on{
         top: 10px;
         color: #4c4c4c;
 
-        @include transform(scaleY(.85));
+        transform: scaleY(.85);
       }
 
       input:checked + .back .off{
         bottom: 5px;
         color: #444;
 
-        @include transform(scaleY(1));
+        transform: scaleY(1);
       }
 
       input:checked + .back .but{
         margin-top: 20px;
         background: #dcdcdc;
-        background-image: -owg-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
-        background-image: -webkit-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, .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,
+        box-shadow:
+          inset 8px -4px 5px -7px #a9a9a9,
           inset -8px -4px 5px -7px #808080,
           0 -3px 8px -4px rgba(50, 50, 50, .4),
           inset 0 3px 4px -2px #9c9c9c,
           inset 0 280px 40px -200px rgba(0, 0, 0, .2),
-        inset 0 -200px 40px -200px rgba(180, 180, 180, .2));
+          inset 0 -200px 40px -200px rgba(180, 180, 180, .2);
       }
 
       input:checked + .back{
         padding: 2px 4px;
 
-        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: -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%);
-        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%);
         background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);
 
-        @include box-shadow(30px 30px 30px -20px rgba(49, 49, 49, .1),
+        box-shadow:
+          30px 30px 30px -20px rgba(49, 49, 49, .1),
           -30px 30px 30px -20px rgba(111, 111, 111, .1),
           0 30px 30px 0 rgba(0, 0, 0, .2),
-        inset 0 1px 2px 0 rgba(167, 167, 167, .6));
+          inset 0 1px 2px 0 rgba(167, 167, 167, .6);
       }
     }
   }

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

@@ -19,7 +19,7 @@ $edit-toolbar-height: 40px !default;
 
 .tb-editor {
   .tb-split {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     overflow-x: hidden;
     overflow-y: auto;
   }

ui/src/scss/animations.scss

@@ -15,34 +15,34 @@
  */
 @import "~compass-sass-mixins/lib/animate";
 
-@include keyframes(tbMoveFromTopFade) {
+@keyframes tbMoveFromTopFade {
   from {
     opacity: 0;
 
-    @include transform(translate(0, -100%));
+    transform: translate(0, -100%);
   }
 }
 
-@include keyframes(tbMoveToTopFade) {
+@keyframes tbMoveToTopFade {
   to {
     opacity: 0;
 
-    @include transform(translate(0, -100%));
+    transform: translate(0, -100%);
   }
 }
 
-@include keyframes(tbMoveFromBottomFade) {
+@keyframes tbMoveFromBottomFade {
   from {
     opacity: 0;
 
-    @include transform(translate(0, 100%));
+    transform: translate(0, 100%);
   }
 }
 
-@include keyframes(tbMoveToBottomFade) {
+@keyframes tbMoveToBottomFade {
   to {
     opacity: 0;
 
-    @include transform(translate(0, 150%));
+    transform: translate(0, 150%);
   }
 }

ui/src/scss/main.scss

@@ -42,7 +42,7 @@ textarea {
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
-  -webkit-font-feature-settings: "liga";
+  -webkit-font-feature-settings: "liga"; /* stylelint-disable-line property-no-vendor-prefix */
 }
 
 a {
@@ -51,7 +51,7 @@ a {
   text-decoration: none;
   border-bottom: 1px solid rgba(64, 84, 178, .25);
 
-  @include transition(border-bottom .35s);
+  transition: border-bottom .35s;
 }
 
 a:hover,
@@ -258,13 +258,7 @@ label {
 }
 
 .tb-noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
+  user-select: none;
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome and Opera */
 }
 
 .tb-readonly-label {
@@ -556,7 +550,7 @@ $previewSize: 100px !default;
 }
 
 .tb-error-message.ng-animate {
-  @include transition(all .3s cubic-bezier(.55, 0, .55, .2));
+  transition: all .3s cubic-bezier(.55, 0, .55, .2);
 }
 
 .tb-error-message.ng-enter-prepare,
@@ -652,13 +646,13 @@ section.tb-top-header-buttons {
 }
 
 .tb-header-buttons .tb-btn-header {
-  @include animation(tbMoveFromTopFade .3s ease both);
   position: relative !important;
   display: inline-block !important;
+  animation: tbMoveFromTopFade .3s ease both;
 }
 
 .tb-header-buttons .tb-btn-header.ng-hide {
-  @include animation(tbMoveToTopFade .3s ease both);
+  animation: tbMoveToTopFade .3s ease both;
 }
 
 /***********************
@@ -674,19 +668,19 @@ section.tb-footer-buttons {
 }
 
 .tb-footer-buttons .tb-btn-footer {
-  @include animation(tbMoveFromBottomFade .3s ease both);
   position: relative !important;
   display: inline-block !important;
+  animation: tbMoveFromBottomFade .3s ease both;
 }
 
 .tb-footer-buttons .tb-btn-footer.ng-hide {
-  @include animation(tbMoveToBottomFade .3s ease both);
+  animation: tbMoveToBottomFade .3s ease both;
 }
 
 ._md-toast-open-bottom .tb-footer-buttons {
-  @include transition(all .4s cubic-bezier(.25, .8, .25, 1));
+  transition: all .4s cubic-bezier(.25, .8, .25, 1);
 
-  @include transform(translate3d(0, -42px, 0));
+  transform: translate3d(0, -42px, 0);
 }
 
 /***********************

ui/src/scss/mixins.scss

@@ -15,6 +15,7 @@
  */
 @import "~compass-sass-mixins/lib/compass";
 
+/* stylelint-disable selector-no-vendor-prefix */
 @mixin input-placeholder {
   // replaces compass/css/user-interface/input-placeholder()
 
@@ -36,6 +37,7 @@
     @content;
   }
 }
+/* stylelint-enable selector-no-vendor-prefix */
 
 @mixin line-clamp($numLines: 1, $lineHeight: 1.412) {
   position: relative;