Make loading spinner color uninverted on is-outlined buttons

css/bulma.css

@@ -748,6 +748,10 @@ a.box:active {
   color: #0a0a0a;
 }
 
+.button.is-white.is-outlined.is-loading:after {
+  border-color: transparent transparent white white !important;
+}
+
 .button.is-white.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #0a0a0a;
@@ -809,6 +813,10 @@ a.box:active {
   color: white;
 }
 
+.button.is-black.is-outlined.is-loading:after {
+  border-color: transparent transparent #0a0a0a #0a0a0a !important;
+}
+
 .button.is-black.is-inverted.is-outlined {
   background-color: transparent;
   border-color: white;
@@ -870,6 +878,10 @@ a.box:active {
   color: #363636;
 }
 
+.button.is-light.is-outlined.is-loading:after {
+  border-color: transparent transparent whitesmoke whitesmoke !important;
+}
+
 .button.is-light.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #363636;
@@ -931,6 +943,10 @@ a.box:active {
   color: whitesmoke;
 }
 
+.button.is-dark.is-outlined.is-loading:after {
+  border-color: transparent transparent #363636 #363636 !important;
+}
+
 .button.is-dark.is-inverted.is-outlined {
   background-color: transparent;
   border-color: whitesmoke;
@@ -992,6 +1008,10 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-primary.is-outlined.is-loading:after {
+  border-color: transparent transparent #00d1b2 #00d1b2 !important;
+}
+
 .button.is-primary.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #fff;
@@ -1053,6 +1073,10 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-info.is-outlined.is-loading:after {
+  border-color: transparent transparent #3273dc #3273dc !important;
+}
+
 .button.is-info.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #fff;
@@ -1114,6 +1138,10 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-success.is-outlined.is-loading:after {
+  border-color: transparent transparent #23d160 #23d160 !important;
+}
+
 .button.is-success.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #fff;
@@ -1175,6 +1203,10 @@ a.box:active {
   color: rgba(0, 0, 0, 0.7);
 }
 
+.button.is-warning.is-outlined.is-loading:after {
+  border-color: transparent transparent #ffdd57 #ffdd57 !important;
+}
+
 .button.is-warning.is-inverted.is-outlined {
   background-color: transparent;
   border-color: rgba(0, 0, 0, 0.7);
@@ -1236,6 +1268,10 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-danger.is-outlined.is-loading:after {
+  border-color: transparent transparent #ff3860 #ff3860 !important;
+}
+
 .button.is-danger.is-inverted.is-outlined {
   background-color: transparent;
   border-color: #fff;

sass/elements/button.sass

@@ -164,6 +164,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
           background-color: $color
           border-color: $color
           color: $color-invert
+        &.is-loading
+          &:after
+            border-color: transparent transparent $color $color !important
       &.is-inverted.is-outlined
         background-color: transparent
         border-color: $color-invert