animate borders

client/assets/styles/colours.less

@@ -61,3 +61,67 @@ svg {
     color: @white;
     stroke: @white;
 }
+
+.red-border {
+    border-color: @red;
+}
+.blue-border {
+    border-color: @blue;
+}
+.green-border {
+    border-color: @green;
+}
+
+.red-blue-border {
+    animation: rb 3s ease-in-out 0s infinite alternate;
+}
+.red-green-border {
+    animation: rg 3s ease-in-out 0s infinite alternate;
+}
+.blue-green-border {
+    animation: bg 3s ease-in-out 0s infinite alternate;
+}
+
+@keyframes rg {
+    from {
+        border-color: @red;
+    }
+
+    to {
+        border-color: @green;
+    }
+}
+
+@keyframes rb {
+    from {
+        border-color: @red;
+    }
+
+    to {
+        border-color: @blue;
+    }
+}
+
+@keyframes bg {
+    from {
+        border-color: @blue;
+    }
+
+    to {
+        border-color: @green;
+    }
+}
+
+button {
+    &.blue {
+        border-color: @blue;
+    }
+    &.red {
+        border-color: @red;
+    }
+    &.green {
+        border-color: @green;
+    }
+
+
+}

client/assets/styles/styles.less

@@ -139,24 +139,6 @@ button, input {
         color: @gray-focus;
         border-color: @gray-focus;
     }
-    &.red-border {
-        font-z-color: @red;
-    }
-    &.blue-border {
-        border-color: @blue;
-    }
-    &.green-border {
-        border-color: @green;
-    }
-    &.red-blue-border {
-        border-image: linear-gradient(to right, @red 50%, @blue 50%) 5;
-    }
-    &.red-green-border {
-        border-image: linear-gradient(to right, @red 50%, @green 50%) 5;
-    }
-    &.blue-green-border {
-        border-image: linear-gradient(to right, @blue 50%, @green 50%) 5;
-    }
 }
 
 a {

client/src/components/vbox.component.jsx

@@ -174,7 +174,7 @@ function Vbox(args) {
             return setVboxSelected([group, index]);
         }
 
-        const classes = `${selected ? 'highlight' : ''}`;
+        const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''}`;
 
         if (shapes[v]) {
             return (