Fix transition glitch

lib/less/modules/inputs.import.less

@@ -13,10 +13,10 @@
   &:-ms-input-placeholder {color: #fff}
 }
 
-.transition() {
+.transition(@property: all) {
-  -webkit-transition: all .3s ease-in-out;
+  -webkit-transition: @property .3s ease-in-out;
-     -moz-transition: all .3s ease-in-out;
+     -moz-transition: @property .3s ease-in-out;
-          transition: all .3s ease-in-out;
+          transition: @property .3s ease-in-out;
 }
 
 /* Main Colors
@@ -51,6 +51,12 @@
   &:checked {background:@pumpkin}
 }
 
+.check, .circles, .radio {
+    outline: none !important;
+    -webkit-appearance: none;
+       -moz-appearance: none !important;
+}
+
 /* Menus
 ===============================*/
 nav {
@@ -105,36 +111,30 @@ nav {
 /* Checkbox
 ===============================*/
 .check, .circles {
+  .transition(background-color);
   &:after {
-    .transition;
     font-family: FontAwesome;
     content:"\f00d";
     color: #fff;
   }
   &:checked:after {
-    .transition;
     content:"\f00c";
   }
 }
 
 .check {
   .square(30px);
-  .transition;
   .border-radius(4px);
   position: relative;
-  -webkit-appearance: none;
-  -moz-appearance: none!important;
   text-align: center;
 
   &:after {
-    .transition;
     position: absolute;
     top: 7px;
     left: 8px;
   }
 
   &:checked:after {
-    .transition;
     position: absolute;
     top: 7px;
     left: 6px;
@@ -145,17 +145,12 @@ nav {
 ===============================*/
 .circles {
   .square(30px);
-  .transition;
   .border-radius(100px);
   position: relative;
-  -webkit-appearance: none;
   margin: 8px;
 
   &:checked {
-    .transition;
-
     &:after {
-      .transition;
       position: absolute;
       left: 6px;
       top: 6px;
@@ -164,7 +159,6 @@ nav {
   }
 
   &:after {
-    .transition;
     position: absolute;
     left: 8px;
     top: 6px;
@@ -179,7 +173,6 @@ nav {
   .border-radius(100px);
   display: inline-block;
   position: relative;
-  -webkit-appearance: none;
   margin: 10px;
   margin-top: 0px;