webui: add vendor prefixes to "experimental" css features

one/static/style/base.less

@@ -447,3 +447,10 @@ body > footer {
         font-size: 1.1em;
         font-size: 1.1em;
     }
     }
 }
 }
+
+.vendor (@prop, @val) {
+    -foo: ~"bar; -webkit-@{prop}: @{val}; -moz-@{prop}: @{val}; -ms-@{prop}: @{val}; -o-@{prop}: @{val}; @{prop}: @{val};";
+}
+.vendorVal (@prop, @val, @arg) {
+    -foo: ~"bar; @{prop}: -webkit-@{val}(@{arg}); @{prop}: -moz-@{val}(@{arg}); @{prop}: -ms-@{val}(@{arg}); @{prop}: -o-@{val}(@{arg}); @{prop}: @{val}(@{arg});";
+}

one/static/style/box.less

@@ -72,10 +72,10 @@
             display: block !important;
             display: block !important;
         }
         }
         .summary .name {
         .summary .name {
-            width: calc(~"100% - 200px");
+            .vendorVal(width, calc, "100% - 200px");
             span {
             span {
-                width: calc(~"60% + 95px");
-                max-width: calc(~"100% - 95px");
+                .vendorVal(width, calc, "60% + 95px");
+                .vendorVal(max-width, calc, "100% - 95px");
             }
             }
         }
         }
         .summary .name .details {
         .summary .name .details {
@@ -180,10 +180,10 @@
                 display: block;
                 display: block;
             }
             }
             .name {
             .name {
-                width: calc(~"100% - 200px");
+                .vendorVal(width, calc, "100% - 200px");
                 span {
                 span {
-                    width: calc(~"60% + 95px");
-                    max-width: calc(~"100% - 95px");
+                    .vendorVal(width, calc, "60% + 95px");
+                    .vendorVal(max-width, calc, "100% - 95px");
                 }
                 }
                 .details {
                 .details {
                     display: block;
                     display: block;
@@ -204,7 +204,7 @@
             z-index: 2;
             z-index: 2;
             position: relative;
             position: relative;
             height: 24px;
             height: 24px;
-            width: calc(~"100% - 90px");
+            .vendorVal(width, calc, "100% - 90px");
             span {
             span {
                 float: left;
                 float: left;
                 text-overflow: ellipsis;
                 text-overflow: ellipsis;
@@ -564,7 +564,7 @@ table {
         .summary {
         .summary {
             .name {
             .name {
                 background-image: url(/static/icons/users.png);
                 background-image: url(/static/icons/users.png);
-                width: calc(~"100% - 70px");
+                .vendorVal(width, calc, "100% - 70px");
             }
             }
         }
         }
         li.owner {
         li.owner {