Tweak the position of the clear and close buttons

mdbassit · Jan 14, 2023 · c03607d · c03607d
1 parent 7b85295
commit c03607d
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/src/coloris.css b/src/coloris.css
@@ -6,7 +6,7 @@
   z-index: 1000;
   border-radius: 10px;
   background-color: #fff;
-  justify-content: space-between;
+  justify-content: flex-end;
   box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -232,7 +232,7 @@ input.clr-color {
   order: 1;
   width: calc(100% - 80px);
   height: 32px;
-  margin: 15px 20px 20px 0;
+  margin: 15px 20px 20px auto;
   padding: 0 10px;
   border: 1px solid #ddd;
   border-radius: 16px;
@@ -252,9 +252,9 @@ input.clr-color:focus {
 .clr-close,
 .clr-clear {
   display: none;
-  order: 3;
+  order: 2;
   height: 24px;
-  margin: 0 20px 20px auto;
+  margin: 0 20px 20px;
   padding: 0 20px;
   border: 0;
   border-radius: 12px;
@@ -268,8 +268,7 @@ input.clr-color:focus {
 
 .clr-close {
   display: block;
-  order: 2;
-  margin: 0 auto 20px 20px;
+  margin: 0 20px 20px auto;
 }
 
 .clr-preview {
@@ -515,11 +514,11 @@ input.clr-color:focus {
 }
 
 .clr-polaroid .clr-clear {
-  margin: 0 10px 15px auto;
+  margin: 0 10px 15px 10px;
 }
 
 .clr-polaroid .clr-close {
-  margin: 0 auto 15px 10px;
+  margin: 0 10px 15px auto;
 }
 
 .clr-polaroid .clr-preview {