Merge pull request #89 from qld-gov-au/QOL-7591-update-button-loading…

…-spinner-style update button spinner style
qld-gov-au · Aug 3, 2022 · c5f8dc5 · c5f8dc5
2 parents 39bd311 + 4221fd2
commit c5f8dc5
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/src/components/Button/sass/button.swe.scss b/src/components/Button/sass/button.swe.scss
@@ -0,0 +1,39 @@
+.btn {
+  // customise the loading spinner
+  .fa.fa-spin {
+    float: left;
+    vertical-align: middle;
+    margin-right: 0.5rem;
+    width: 22px;
+    height: 22px;
+    margin: 0;
+    margin-right: 0.5rem;
+    border: 4px solid currentColor;
+    border-radius: 50%;
+    border-right-color: transparent;
+
+    &::before {
+      content: "";
+    }
+  }
+  &.btn-lg {
+    .fa.fa-spin {
+      width: 26px;
+      height: 26px;
+    }
+  }
+  &.btn-sm {
+    .fa.fa-spin {
+      width: 18px;
+      height: 18px;
+      margin-top: 1px;
+    }
+  }
+  &.btn-xs {
+    .fa.fa-spin {
+      width: 14px;
+      height: 14px;
+      margin-top: 3px;
+    }
+  }
+}
diff --git a/src/sass/formio.form.swe.scss b/src/sass/formio.form.swe.scss
@@ -2,4 +2,5 @@
 // SWE theme
 
 @import '../components/PlsPlusAddress/sass/plsPlusAddress.swe.scss';
+@import '../components/Button/sass/button.swe.scss';
 @import '../components/Radio/sass/radio.swe.scss';
diff --git a/src/templates/bootstrap/boilerplateButton/form.ejs b/src/templates/bootstrap/boilerplateButton/form.ejs
@@ -19,7 +19,7 @@
   <i ref="tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{ctx.component.tooltip}}"></i>
 {% } %}
 {% if (ctx.component.rightIcon) { %}&nbsp;<span class="{{ctx.component.rightIcon}}"></span>{% } %}
-</div{{ctx.input.type}}>
+</{{ctx.input.type}}>
 <div ref="buttonMessageContainer">
   <span class="help-block" ref="buttonMessage"></span>
 </div>