ui_migration lint(STYLE) Use --fix to solve 110 problems 3 left

webapp/src/App.vue

@@ -325,7 +325,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "./assets/less/theme.less";
+@import url("./assets/less/theme.less");
 // We override the custom-electron-titlebar z-index
 // UIKit lightbox must be able to draw over the titlebar
 // as it currently always spawns at the root of the DOM
@@ -353,8 +353,7 @@ html {
 }
 
 .control-component {
-  overflow-y: auto;
+  overflow: hidden auto;
-  overflow-x: hidden;
   scrollbar-gutter: stable;
   width: 300px;
   height: 100%;
@@ -366,8 +365,7 @@ html {
 }
 
 .view-component {
-  overflow-y: auto;
+  overflow: hidden auto;
-  overflow-x: hidden;
   height: 100%;
   padding: 0;
 }

webapp/src/assets/less/theme.less

@@ -52,7 +52,7 @@ h4, .uk-h4 {
 }
 
 .uk-card-body {
-    padding: 20px 16px 8px 16px;
+    padding: 20px 16px 8px;
     width: 240px;
 }
 
@@ -172,8 +172,8 @@ a:hover {
 }
 
 .uk-button-disabled {
-    border: 1px solid #999999 !important;
+    border: 1px solid #999 !important;
-    background-color: #cccccc !important;
+    background-color: #ccc !important;
     color: #919191 !important;
 }
 

webapp/src/assets/less/variables.less

@@ -49,7 +49,7 @@
 .hook-base-body() {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
+    text-rendering: optimizelegibility;
 }
 
 //
@@ -187,6 +187,7 @@
         color: @inverse-global-color;
         border-color: @inverse-global-color;
     }
+
     .uk-alert-danger {
         color: @notification-message-danger-color;
         border-color: @notification-message-danger-color
@@ -202,7 +203,6 @@
  * Links
  */
 .hook-inverse() {
-
     .uk-link:hover,
     .uk-button-link:hover,
     a:hover {
@@ -224,6 +224,7 @@
         color: @inverse-primary-muted-color;
         border-color: @inverse-primary-muted-color;
     }
+
     .uk-button:hover {
         background-color: @inverse-primary-muted-color;
         color: #fff;
@@ -244,8 +245,8 @@
 
     .uk-button-disabled {
         border: 1px solid @darkened-primary-color !important;
-        background-color: #333333 !important;
+        background-color: #333 !important;
-        color: #777777 !important;
+        color: #777 !important;
     }
 }
 

webapp/src/components/appContent.vue

@@ -246,6 +246,7 @@ export default {
   width: 100%;
   height: 100%;
 }
+
 #component-left {
   width: 100%;
   height: 100%;
@@ -266,8 +267,7 @@ export default {
 #switcher-left-container {
   margin: 0;
   padding: 0;
-  overflow-x: hidden;
+  overflow: hidden auto;
-  overflow-y: auto;
   height: 100%;
   background-color: rgba(180, 180, 180, 0.1);
   border-width: 0 1px 0 0;

webapp/src/components/genericComponents/progressBar.vue

@@ -39,7 +39,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .progress {
   position: relative;
@@ -49,7 +49,7 @@ export default {
   background-color: rgba(180, 180, 180, 0.15);
   border-radius: 2px;
   background-clip: padding-box;
-  margin: 0.5rem 0 1rem 0;
+  margin: 0.5rem 0 1rem;
   overflow: hidden;
 }
 
@@ -73,7 +73,7 @@ export default {
   }
 }
 
-.progress .indeterminate:before {
+.progress .indeterminate::before {
   content: "";
   position: absolute;
   background-color: inherit;
@@ -81,11 +81,11 @@ export default {
   left: 0;
   bottom: 0;
   will-change: left, right;
-  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
 }
 
-.progress .indeterminate:after {
+.progress .indeterminate::after {
   content: "";
   position: absolute;
   background-color: inherit;
@@ -93,63 +93,74 @@ export default {
   left: 0;
   bottom: 0;
   will-change: left, right;
-  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
   animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-  -webkit-animation-delay: 1.15s;
+  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  animation-delay: 1.15s;
   animation-delay: 1.15s;
 }
 
-@-webkit-keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
 @keyframes indeterminate {
   0% {
     left: -35%;
     right: 100%;
   }
+
   60% {
     left: 100%;
     right: -90%;
   }
+
   100% {
     left: 100%;
     right: -90%;
   }
 }
-@-webkit-keyframes indeterminate-short {
+
+@keyframes indeterminate {
   0% {
-    left: -200%;
+    left: -35%;
     right: 100%;
   }
+
   60% {
-    left: 107%;
+    left: 100%;
-    right: -8%;
+    right: -90%;
   }
+
   100% {
-    left: 107%;
+    left: 100%;
-    right: -8%;
+    right: -90%;
   }
 }
+
 @keyframes indeterminate-short {
   0% {
     left: -200%;
     right: 100%;
   }
+
   60% {
     left: 107%;
     right: -8%;
   }
+
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+
   100% {
     left: 107%;
     right: -8%;

webapp/src/components/genericComponents/tabIcon.vue

@@ -96,7 +96,7 @@ export default {
 
 <style lang="less" scoped>
 // Custom UIkit CSS modifications
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .tabicon-active {
   color: #fff !important;

webapp/src/components/labThingsComponents/actionLogDisplay.vue

@@ -105,8 +105,7 @@ export default {
 
 .log-container {
   height: 100%;
-  overflow-y: auto;
+  overflow: auto;
-  overflow-x: auto;
   background-color: white;
   color: black;
   padding: 0.5em;

webapp/src/components/labThingsComponents/actionProgressBar.vue

@@ -44,7 +44,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .in-button {
   position: absolute;
@@ -67,7 +67,7 @@ export default {
   background-color: rgba(180, 180, 180, 0.15);
   border-radius: 2px;
   background-clip: padding-box;
-  margin: 0.5rem 0 1rem 0;
+  margin: 0.5rem 0 1rem;
   overflow: hidden;
 }
 
@@ -91,7 +91,7 @@ export default {
   }
 }
 
-.progress .indeterminate:before {
+.progress .indeterminate::before {
   content: "";
   position: absolute;
   background-color: inherit;
@@ -99,11 +99,11 @@ export default {
   left: 0;
   bottom: 0;
   will-change: left, right;
-  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
 }
 
-.progress .indeterminate:after {
+.progress .indeterminate::after {
   content: "";
   position: absolute;
   background-color: inherit;
@@ -111,63 +111,74 @@ export default {
   left: 0;
   bottom: 0;
   will-change: left, right;
-  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
   animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-  -webkit-animation-delay: 1.15s;
+  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  animation-delay: 1.15s;
   animation-delay: 1.15s;
 }
 
-@-webkit-keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
 @keyframes indeterminate {
   0% {
     left: -35%;
     right: 100%;
   }
+
   60% {
     left: 100%;
     right: -90%;
   }
+
   100% {
     left: 100%;
     right: -90%;
   }
 }
-@-webkit-keyframes indeterminate-short {
+
+@keyframes indeterminate {
   0% {
-    left: -200%;
+    left: -35%;
     right: 100%;
   }
+
   60% {
-    left: 107%;
+    left: 100%;
-    right: -8%;
+    right: -90%;
   }
+
   100% {
-    left: 107%;
+    left: 100%;
-    right: -8%;
+    right: -90%;
   }
 }
+
 @keyframes indeterminate-short {
   0% {
     left: -200%;
     right: 100%;
   }
+
   60% {
     left: 107%;
     right: -8%;
   }
+
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+
   100% {
     left: 107%;
     right: -8%;

webapp/src/components/labThingsComponents/actionStatusModal.vue

@@ -91,13 +91,12 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 #progress-and-cancel-row {
   display: flex;
   flex-flow: row wrap;
-  justify-content: flex-start;
+  place-content: stretch flex-start;
-  align-content: stretch;
   align-items: center;
   width: 100%;
 }
@@ -107,16 +106,19 @@ export default {
   margin-left: 5px;
   margin-right: 5px;
 }
+
 #progress-and-cancel-row .not-stretchy {
   flex-grow: 0;
   margin-left: 5px;
   margin-right: 5px;
 }
+
 #status-modal {
   max-height: 90vh; // never exceed 90% of viewport height
   display: flex;
   flex-direction: column;
 }
+
 #status-modal .log-container {
   height: 10em;
 }

webapp/src/components/labThingsComponents/endpointButton.vue

@@ -46,7 +46,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
+
 a.uk-button-disabled {
   pointer-events: none;
 }

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -425,31 +425,32 @@ export default {
 .input-and-buttons-container {
   display: flex;
   flex-flow: row wrap;
-  justify-content: flex-start;
+  place-content: stretch flex-start;
-  align-content: stretch;
   align-items: center;
   width: 100%;
 }
+
 .property-input {
   flex-grow: 1;
   margin-left: 5px;
   margin-right: 5px;
   width: 6em;
 }
-/*Hide standard spinners as it isn't possible to customise the browser ones.*/
+
+/* Hide standard spinners as it isn't possible to customise the browser ones. */
 .numeric-property {
-  -moz-appearance: textfield;
+  appearance: textfield;
 }
+
 .numeric-property::-webkit-outer-spin-button,
 .numeric-property::-webkit-inner-spin-button {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 .number-wrapper {
   display: flex;
   flex-flow: row wrap;
-  justify-content: flex-start;
+  place-content: stretch flex-start;
-  align-content: stretch;
   align-items: center;
   flex-grow: 1;
 }
@@ -474,25 +475,31 @@ export default {
   cursor: pointer;
   color: #888;
 }
+
 .dropdown {
   background-color: #fff;
   border: 1px solid #ccc;
   opacity: 1;
 }
+
 .edited {
   background-color: #fff3cd;
 }
+
 @keyframes green-flash {
   0% {
     background-color: #3fda63;
   }
+
   100% {
     background-color: white;
   }
 }
+
 .flash {
   animation: green-flash 0.7s ease;
-  /*Without this background-colour chrome will ignore the animation colour.*/
+
+  /* Without this background-colour chrome will ignore the animation colour. */
   background-color: white;
 }
 </style>

webapp/src/components/tabContentComponents/actionTab.vue

@@ -218,6 +218,7 @@ export default {
 .control-component {
   width: 33%;
 }
+
 #log-display {
   height: 20em;
 }

webapp/src/components/tabContentComponents/controlComponents/positionControl.vue

@@ -176,22 +176,24 @@ export default {
 .input-and-buttons-container {
   display: flex;
   flex-flow: column wrap;
-  justify-content: flex-start;
+  place-content: stretch flex-start;
-  align-content: stretch;
   align-items: center;
   width: 100%;
 }
+
 .numeric-setting-line-input {
   flex-grow: 1;
-  margin: 5px 0px;
+  margin: 5px 0;
   width: 5em;
+
   /* Stop Firefox showing input spinners, other
   browsers set with block below */
-  -moz-appearance: textfield;
+  appearance: textfield;
 }
+
 /* Chrome, Safari, Edge, Opera */
 .numeric-setting-line-input::-webkit-outer-spin-button,
 .numeric-setting-line-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
+  appearance: none;
 }
 </style>

webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue

@@ -177,14 +177,17 @@ export default {
   grid-column: 2;
   grid-row: 1;
 }
+
 .dpad-grid #left-button {
   grid-column: 1;
   grid-row: 2;
 }
+
 .dpad-grid #right-button {
   grid-column: 3;
   grid-row: 2;
 }
+
 .dpad-grid #down-button {
   grid-column: 2;
   grid-row: 3;
@@ -194,6 +197,7 @@ export default {
   grid-column: 1;
   grid-row: 5;
 }
+
 .both-controls #focus-in-button {
   grid-column: 3;
   grid-row: 5;
@@ -203,6 +207,7 @@ export default {
   grid-column: 1;
   grid-row: 1;
 }
+
 .focus-only #focus-in-button {
   grid-column: 3;
   grid-row: 1;

webapp/src/components/tabContentComponents/loggingContent.vue

@@ -241,12 +241,13 @@ export default {
 @error-bg-color: #fef4f6;
 
 .logging-navbar {
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   border-style: solid;
   border-color: rgba(180, 180, 180, 0.25);
   margin-bottom: 30px;
   height: 80px;
 }
+
 .logging-entry {
   white-space: break-spaces;
   padding: 0;
@@ -313,9 +314,11 @@ export default {
   background: #888;
   border-radius: 6px;
 }
+
 .more-info-container {
   display: flex;
 }
+
 .more-info {
   color: inherit;
   text-decoration: underline;

webapp/src/components/tabContentComponents/powerContent.vue

@@ -80,7 +80,7 @@ export default {
 
 <style lang="less" scoped>
 // Custom UIkit CSS modifications
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .container {
   display: flex;
@@ -109,6 +109,6 @@ export default {
 .shutdown-button {
   display: inline;
   text-align: center;
-  margin: 30px 30px 30px 30px;
+  margin: 30px;
 }
 </style>

webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue

@@ -173,7 +173,7 @@ ul {
   display: block;
   text-align: center;
   list-style-type: none;
-  margin: 5px 0px 10px 0px;
+  margin: 5px 0 10px;
   padding: 0;
 }
 

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -230,7 +230,7 @@ export default {
 
 <style lang="less" scoped>
 .gallery-navbar {
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   border-style: solid;
   border-color: rgba(180, 180, 180, 0.25);
 }

webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue

@@ -36,6 +36,7 @@ export default {
   margin-left: auto;
   margin-right: auto;
 }
+
 #mini-stream {
   min-width: 300px;
   max-width: 600px;

webapp/src/components/tabContentComponents/settingsContent.vue

@@ -159,11 +159,10 @@ export default {
 
 <style lang="less" scoped>
 // Custom UIkit CSS modifications
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .settings-nav {
-  overflow-y: auto;
+  overflow: hidden auto;
-  overflow-x: hidden;
   width: 250px;
   padding: 10px;
   background-color: rgba(180, 180, 180, 0.03);

webapp/src/components/ui/matrixDisplay.vue

@@ -94,7 +94,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .matrix-container {
   display: inline-block;