Merge pull request #3674 from relative-ci/enhance-dropdowns

enhance dropdowns
relative-ci · Aug 6, 2023 · 88e7f77 · 88e7f77
2 parents db1ec0a + 3a1ca87
commit 88e7f77
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/packages/ui/src/ui/dropdown/dropdown.module.css b/packages/ui/src/ui/dropdown/dropdown.module.css
@@ -62,6 +62,10 @@
   text-decoration: none;
 }
 
+.item + .item {
+  margin-top: calc(var(--space-xxxsmall) / 2);
+}
+
 .item[data-active-item],
 .item:hover,
 .item:focus,

diff --git a/packages/ui/src/ui/filters/filters.module.css b/packages/ui/src/ui/filters/filters.module.css
@@ -28,20 +28,43 @@
 }
 
 .filterOnlyButton {
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) / 2 - 1px) var(--space-xxxsmall);
   display: none;
   appearance: none;
   border: none;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 30%);
+  border-radius: var(--radius-small);
   cursor: pointer;
   position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  transition: var(--transition-in);
+  background: var(--color-info);
+  color: var(--color-background);
   font-size: var(--size-small);
   line-height: var(--space-xsmall);
 }
 
+.filterOnlyButton:hover,
+.filterOnlyButton:active,
+.filterOnlyButton:focus {
+  transition: var(--transition-out);
+  background: var(--color-info-dark);
+  color: var(--color-background);
+}
+
+/** cover item text */
+.filterOnlyButton::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 100%;
+  bottom: 0;
+  width: var(--space-medium);
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 75%);
+}
+
 /** filter disabled state */
 .filterInput[disabled] + .filterLabel {
   color: var(--color-text-light);