feat(cxl-lumo-styles): add spinner to checkout submit button

https://app.clickup.com/t/86b040y1c
conversionxl · Apr 17, 2024 · 67ed0e7 · 67ed0e7
1 parent af558bb
commit 67ed0e7
Showing 1 changed file with 22 additions and 24 deletions.
diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -327,36 +327,34 @@ ul.courses-list {
   * @see https://app.clickup.com/t/86azbhexr
   * @since 2024.02.20
   */
-vaadin-button {
+form.processing button, vaadin-button[pending] {
   cursor: pointer;
 
-  &[pending] {
-    &::before{
-      background-color: var(--lumo-base-color);
-      opacity: initial;
-    }
+  &::before{
+    background-color: var(--lumo-base-color) !important;
+    opacity: unset !important;
+  }
 
-    &[theme~="primary"] {
-      color: var(--lumo-primary-color);
-      background-color: var(--lumo-primary-color);
+  &[theme~="primary"] {
+    color: var(--lumo-primary-color);
+    background-color: var(--lumo-primary-color);
 
-      &::before {
-        mask: var(--cxl-loading-spinner-url);
-        mask-size: 24px;
-        mask-repeat: no-repeat;
-        mask-position: center;
-      }
+    &::before {
+      mask: var(--cxl-loading-spinner-url);
+      mask-size: 24px;
+      mask-repeat: no-repeat;
+      mask-position: center;
     }
+  }
 
-    &[theme~="secondary"] {
-      &::before {
-        background-color: var(--lumo-base-color);
-        background-image: var(--cxl-loading-spinner-url);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: 24px;
-        border: 1px solid var(--lumo-primary-color);
-      }
+  &[theme~="secondary"] {
+    &::before {
+      background-color: var(--lumo-base-color);
+      background-image: var(--cxl-loading-spinner-url);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 24px;
+      border: 1px solid var(--lumo-primary-color);
     }
   }
 }