enhance(ui): Filters dropdown - improve only button

relative-ci · Aug 6, 2023 · 3a1ca87 · 3a1ca87
1 parent fa8e98b
commit 3a1ca87
Showing 1 changed file with 28 additions and 5 deletions.
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);