feat(sass): add $swal2-<...>-button-order vars

matvejs16 · Sep 7, 2020 · 8190f31 · 8190f31
1 parent 7385496
commit 8190f31
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/scss/_core.scss b/src/scss/_core.scss
@@ -210,11 +210,13 @@
 .swal2-actions {
   display: flex;
   z-index: 1; // prevent sucess icon from overlapping buttons
+  box-sizing: border-box;
   flex-wrap: $swal2-actions-flex-wrap;
   align-items: $swal2-actions-align-items;
   justify-content: $swal2-actions-justify-content;
   width: $swal2-actions-width;
   margin: $swal2-actions-margin;
+  padding: $swal2-actions-padding;
 
   &:not(.swal2-loading) {
     .swal2-styled {
@@ -256,6 +258,7 @@
   }
 
   &.swal2-confirm {
+    order: $swal2-confirm-button-order;
     border: $swal2-confirm-button-border;
     border-radius: $swal2-confirm-button-border-radius;
     background: initial;
@@ -265,6 +268,7 @@
   }
 
   &.swal2-deny {
+    order: $swal2-deny-button-order;
     border: $swal2-deny-button-border;
     border-radius: $swal2-deny-button-border-radius;
     background: initial;
@@ -274,6 +278,7 @@
   }
 
   &.swal2-cancel {
+    order: $swal2-cancel-button-order;
     border: $swal2-cancel-button-border;
     border-radius: $swal2-cancel-button-border-radius;
     background: initial;

diff --git a/src/variables.scss b/src/variables.scss
@@ -146,22 +146,26 @@ $swal2-actions-align-items: center !default;
 $swal2-actions-justify-content: center !default;
 $swal2-actions-width: 100% !default;
 $swal2-actions-margin: 1.25em auto 0 !default;
+$swal2-actions-padding: 0 1.6em !default;
 
 // CONFIRM BUTTON
+$swal2-confirm-button-order: 1 !default;
 $swal2-confirm-button-border: 0 !default;
 $swal2-confirm-button-border-radius: .25em !default;
 $swal2-confirm-button-background-color: #3085d6 !default;
 $swal2-confirm-button-color: $swal2-white !default;
 $swal2-confirm-button-font-size: 1.0625em !default;
 
 // DENY BUTTON
+$swal2-deny-button-order: 2 !default;
 $swal2-deny-button-border: 0 !default;
 $swal2-deny-button-border-radius: .25em !default;
 $swal2-deny-button-background-color: #dd6b55 !default;
 $swal2-deny-button-color: $swal2-white !default;
 $swal2-deny-button-font-size: 1.0625em !default;
 
 // CANCEL BUTTON
+$swal2-cancel-button-order: 3 !default;
 $swal2-cancel-button-border: 0 !default;
 $swal2-cancel-button-border-radius: .25em !default;
 $swal2-cancel-button-background-color: #aaa !default;