add custom styles for contact-form7

solidbunch · Jun 26, 2024 · a9ddd27 · a9ddd27
1 parent 39207f7
commit a9ddd27
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/assets/src/custom-form7.txt b/assets/src/custom-form7.txt
@@ -14,7 +14,10 @@
 <div class="container-full">
   <div class="row justify-content-center">
     <div class="col-12 col-md-6">
-      [submit class:btn class:btn-primary class:mb-3 class:w-100 class:py-3 "Get a Quote"]
+      <button class="btn btn-primary mb-3 w-100 py-3" type="submit">
+         <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+         <span>Get a Quote test</span>
+      </button>
     </div>
   </div>
 </div>
diff --git a/assets/src/styles/layout/_contact-forms-7.scss b/assets/src/styles/layout/_contact-forms-7.scss
@@ -56,7 +56,14 @@
 
       max-width: 700px;
     }
-
+    .btn[type="submit"] {
+      .spinner-border {
+        visibility: hidden;
+        // display: none;
+        @extend .me-2;
+        margin-left: calc((1rem + (.2em * 2)) * -1);
+      }
+    }
     &.spam {
       .wpcf7-response-output {
         // border: 1px solid orange;
@@ -100,6 +107,12 @@
       .wpcf7-spinner {
         visibility: visible;
       }
+      .btn[type="submit"] {
+        .spinner-border {
+          visibility: visible;
+          // display: inline-block;
+        }
+      }
     }
   }
 }

diff --git a/assets/src/styles/layout/_single-doc-pages.scss b/assets/src/styles/layout/_single-doc-pages.scss
@@ -77,7 +77,7 @@
       border-top: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
       top: 0;
-      z-index: 1;
+      z-index: 7;
     }
 
     &.admin-bar {

diff --git a/assets/src/styles/theme.scss b/assets/src/styles/theme.scss
@@ -15,6 +15,7 @@
 @import "~bootstrap/scss/card";
 //add Forms
 @import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/spinners";
 //add alerts
 @import "~bootstrap/scss/alert";
 // Layout