index.tailwind.css in refine-rails-2.11.2

- old
+ new

@@ -406,11 +406,13 @@
   flex-wrap: wrap;
 }
 
 .refine--filter-control-group {
   text-wrap: nowrap;
+  flex-wrap: wrap;
   display: flex;
+  align-items: center;
 }
 
 .refine--group-join, .refine--condition-join {
   position: relative;
   padding: 5px 0;
@@ -498,114 +500,70 @@
   align-items: center;
   gap: 5px;
   position: relative;
 }
 
-.refine--condition-pill-start {
-  padding: 0 0 0 10px;
-  &:before {
-    content: "";
-    position: absolute;
-    left: -10px;
-    top: -2px;
-    bottom: -2px;
-    border: 2px solid #eee;
-    width: 3px;
-  }
-  &:hover {
-    &:before{
-      border-color: #aaa;
-    }
-  }
-  &:before {
-    border-radius: 6px 0 0 6px;
-    left: 0;
-    border-right: none;
-  }
-  
-}
-
-.refine--condition-pill-end {
-  padding: 0 10px 0 0;
-  &:after {
-    content: "";
-    position: absolute;
-    right: -10px;
-    top: -6px;
-    bottom: -6px;
-    border: 2px solid #eee;
-    width: 3px;
-  }
-  &:hover {
-    &:after {
-      border-color: #aaa;
-    }
-  }
-  &:after {
-    border-radius: 0 6px 6px 0;
-    border-left: none;
-  }
-}
-
 .refine--condition-pill {
-  background-color: #fff;
-  border: 1px solid #bbb;
-  border-bottom-color: #999;
-  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+  display: flex;
+  align-items: center;
+  background-color: #F2F4F7;
+  border: 1px solid #EBEBEB;
   border-radius: 6px;
   font-size: 14px;
   cursor: pointer;
   position: relative;
   white-space: nowrap;
+  padding: 4px 8px;
   &:hover {
-    border-color: #999;
+    border-color: #D1D5DB;
+    background-color: #E5E7EB;
     .refine--remove-condition {
       display: block;
     }
   }
+  &:active {
+    border-color: #E5E7EB;
+  }
   &:not(:hover){
     .refine--condition-value-wrapper {
       display: none;
     }
   }
 }
 
+.refine--condition-pill-button {
+  display: flex;
+}
+
 .refine--filter-condition {
   display: flex;
   align-items: center;
   font-size: 14px;
   position: relative;
   background-color: #efeff2;
   border-radius: 6px;
   padding: 4px;
 }
 
-.refine--condition-pill-name {
-  padding: 4px 8px;
-  display: block;
-}
-
 .refine--remove-condition {
   display: none;
-  border: 2px solid #fff;
-  padding: 6px 4px;
+  color: #fff;
+  padding: 0px 2px 0px 2px;
   border-radius: 50%;
   position: absolute;
   top: -8px;
   right:-8px;
-  background-color: #aaa;
+  background-color: #ee3f3f;
   z-index: 999;
-  &:hover {
-    background-color: #ee3f3f;
+  line-height: 1;
+  border: 1.5px solid #fff;
+  .material-icons-outlined.refine--icon-sm,
+  .material-icons.refine--icon-sm,
+  .icon.refine--icon-sm {
+    padding: 2px 0 ;
   }
-  &:before {
-    display: block;
-    content: "";
-    width: 6px;
-    height: 2px;
-    background-color: #fff;
-  }
+
 }
 &:hover {
   border-color: #999;
   .remove-applied-condition {
     display: block;
@@ -628,14 +586,24 @@
   transform: translate3d(-50%, 4px, 0);
   animation: 0.25s cubic-bezier(.45,1.1,.7,1) 0s pillValueTooltip;
   animation-fill-mode: both;
 }
 
-.refine--condition-value-clause {
-  color: rgba(255,255,255,0.7);
+.refine--condition-value-clause, .refine--condition-value-self  {
+  padding-left: 4px;
 }
 
+.refine--condition-pill-name, .refine--condition-value-self  {
+  font-weight: 600;
+}
+
+.refine--condition-value-self {
+  max-width: 150px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 /* Form widgets */
 .refine--select {
   line-height: 1.125;
   color: #111;
   border: 1px solid #ddd;
@@ -868,46 +836,40 @@
 .refine--filter-label {
   white-space: nowrap;
   color: #767676;
 }
 
-
-.refine--add-condition-button.refine--add-first-condition-button,
-.refine--add-condition-group-button.refine--add-first-condition-button {
-  border: 1px dotted #aaa;
-  padding-right: 8px;
-  line-height: 16px;
-  &:hover {
-    background-color: #fff;
-    border-style: solid;
-    color: #111;
-  }
-}
-
 .refine--add-condition-button, .refine--add-group-button {
   display: flex;
   gap: 5px;
   color: #767676;
   font-size: 14px;
   border-radius: 6px;
-  padding: 5px;
   align-items: center;
-  background-color: #fff;
+  background-color: #F2F4F7;
+  border: 1px solid #EBEBEB;
+  cursor: pointer;
   position: relative;
+  white-space: nowrap;
+  padding: 4px 8px;
+  font-weight: 600;
+  &:hover {
+    border-color: #D1D5DB;
+    background-color: #E5E7EB;
+  }
+  &:active {
+    border-color: #E5E7EB;
+  }
   &:disabled {
-    color: #111;
-    background-color: #f8f8f8;
+    opacity: 0.5;
     cursor: not-allowed;
   }
-  &:not([disabled]):hover {
-    color: #111;
-    background-color: #f8f8f8;
-  }
 }
 
-.refine--add-group-button {
-  margin-left: 10px;
+.refine--add-group-wrapper {
+  padding-left: 10px;
+  border-left: 1px solid #E5E7EB;
 }
 
 .refine--has-many-groups .refine--add-button-label {
   display: none;
 }
@@ -1021,11 +983,13 @@
   border: 1px solid transparent;
   border-radius: 6px;
 }
 
 .refine--save-filter-link-label, .refine--clear-filter-link-label {
-  border-bottom: 1px dotted #111;
+  &:hover {
+    border-bottom: 1px dotted #111;
+  }
 }
 .refine--save-filter-input-wrapper {
   display: flex;
   gap: 5px;
   align-items: center;
@@ -1058,10 +1022,14 @@
   padding: 4px 8px;
   font-size: 12px;
   z-index: 9999;
 }
 
+.refine--save-filter-form {
+  margin-left: 8px;
+}
+
 .refine--hotkey {
   border-radius: 4px;
   background-color: rgba(255,255,255,.3);
   display: inline-block;
   padding: 0 4px;
@@ -1077,9 +1045,10 @@
 
 .material-icons-outlined.refine--icon-sm,
 .material-icons.refine--icon-sm,
 .icon.refine--icon-sm {
   font-size: 14px;
+  padding: 3px 0;
 }
 
 .refine--search-box {
   position: relative;
   padding: 10px;