@digital-b2c/coreui-kit 0.10.1 → 0.10.2

package/dist/index.css

@@ -724,6 +724,11 @@ a:hover.Card_module_card {
   white-space: nowrap;
   animation: FilterBar_module_searchExpand 0.25s ease forwards;
 }
+@media (max-width: 768px) {
+  .FilterBar_module_searchExpanded {
+    max-width: calc(100vw - 150px);
+  }
+}
 .FilterBar_module_searchCollapsing {
   animation: FilterBar_module_searchCollapse 0.25s ease forwards;
 }
@@ -808,24 +813,33 @@ a:hover.Card_module_card {
   flex-direction: column;
   gap: 4px;
 }
-.FilterBar_module_searchPanel {
-  position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: min(240px, 100vw - 32px);
-  padding: 8px 16px;
-  background: white;
-  border: 1px solid #4d4d4d;
-  border-radius: 16px;
-  box-shadow:
-    0 0 3px rgba(54, 54, 54, 0.1),
-    0 0 6px rgba(54, 54, 54, 0.09),
-    0 0 8px rgba(54, 54, 54, 0.05),
-    0 0 9px rgba(54, 54, 54, 0.01);
+.FilterBar_module_filterFaded {
+  animation: FilterBar_module_filterFadeOut 0.25s ease forwards;
+  pointer-events: none;
+}
+.FilterBar_module_filterFading {
+  animation: FilterBar_module_filterFadeIn 0.25s ease forwards;
+}
+@keyframes FilterBar_module_filterFadeOut {
+  from {
+    opacity: 1;
+    max-width: 120px;
+  }
+  to {
+    opacity: 0;
+    max-width: 0;
+    overflow: hidden;
+  }
+}
+@keyframes FilterBar_module_filterFadeIn {
+  from {
+    opacity: 0;
+    max-width: 0;
+  }
+  to {
+    opacity: 1;
+    max-width: 120px;
+  }
 }
 .FilterBar_module_dropdownOption {
   display: flex;
@@ -845,6 +859,9 @@ a:hover.Card_module_card {
   width: 100%;
   text-align: left;
 }
+.FilterBar_module_dropdownOption:hover:not(.FilterBar_module_selected) {
+  background: var(--neutral-50, #ededed);
+}
 .FilterBar_module_dropdownOption.FilterBar_module_selected {
   background: var(--base-black, #080808);
   color: white;