Opacify the spinner in a disabled input

Author: tkrotoff

example/index.html

@@ -25,6 +25,15 @@ <h1>bootstrap-input-spinner</h1>
         <span class="spinner-border spinner-border-sm"></span>
       </div>
 
+      <div class="form-group">
+        <input
+          class="form-control is-loading is-loading-sm"
+          placeholder="spinner-border spinner-border-sm :disabled"
+          disabled
+        />
+        <span class="spinner-border spinner-border-sm"></span>
+      </div>
+
       <div class="form-group">
         <input
           class="form-control is-loading is-loading-sm"
@@ -33,11 +42,25 @@ <h1>bootstrap-input-spinner</h1>
         <span class="spinner-border spinner-border-sm text-warning"></span>
       </div>
 
+      <div class="form-group">
+        <input
+          class="form-control is-loading is-loading-sm"
+          placeholder="spinner-border spinner-border-sm text-warning :disabled"
+          disabled
+        />
+        <span class="spinner-border spinner-border-sm text-warning"></span>
+      </div>
+
       <div class="form-group">
         <input class="form-control is-loading" placeholder="spinner-border" />
         <span class="spinner-border"></span>
       </div>
 
+      <div class="form-group">
+        <input class="form-control is-loading" placeholder="spinner-border :disabled" disabled />
+        <span class="spinner-border"></span>
+      </div>
+
       <div class="form-group">
         <input
           class="form-control is-loading is-loading-sm"
@@ -51,6 +74,11 @@ <h1>bootstrap-input-spinner</h1>
         <span class="spinner-grow"></span>
       </div>
 
+      <div class="form-group">
+        <input class="form-control is-loading" placeholder="spinner-grow :disabled" disabled />
+        <span class="spinner-grow"></span>
+      </div>
+
       <div class="form-group">
         <input class="form-control is-loading" placeholder="spinner-grow text-warning" />
         <span class="spinner-grow text-warning"></span>
@@ -66,6 +94,15 @@ <h1>bootstrap-input-spinner</h1>
         <span class="spinner-border spinner-border-sm"></span>
       </div>
 
+      <div class="form-group">
+        <input
+          class="form-control is-loading is-loading-sm is-valid"
+          placeholder="is-valid spinner-border spinner-border-sm :disabled"
+          disabled
+        />
+        <span class="spinner-border spinner-border-sm"></span>
+      </div>
+
       <div class="form-group">
         <input class="form-control is-invalid" placeholder="is-invalid" />
       </div>

src/bootstrap4-input-spinner.scss

@@ -63,6 +63,15 @@ input.is-loading {
   }
 }
 
+// Make the spinner in a disabled input look like a spinner in a disabled button (https://getbootstrap.com/docs/4.5/components/spinners/#buttons)
+// Note: is-valid and is-invalid images don't change their opacity when the input is disabled
+input.is-loading:disabled {
+  ~ .spinner-border,
+  ~ .spinner-grow {
+    opacity: $btn-disabled-opacity;
+  }
+}
+
 // Handle <input class="form-control is-loading is-valid">
 //
 // https://github.com/twbs/bootstrap/blob/v4.3.1/scss/_forms.scss#L245