chore: tweak styles

UCLALibrary · Dec 19, 2024 · 8ca6d8c · 8ca6d8c
1 parent 472f10e
commit 8ca6d8c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/src/lib-components/DateFilter.vue b/src/lib-components/DateFilter.vue
@@ -482,6 +482,9 @@ onMounted(() => {
       font-size: 18px;
       color: $medium-grey;
       border-radius: 8px;
+      &:hover, &:focus {
+        border-color: #ddd;
+      }
 
       @media #{$small} {
         padding-inline-start: 57px;
@@ -819,7 +822,7 @@ onMounted(() => {
     .mobile-button {
       width: 166px;
       padding: 6px;
-      border: none;
+      // border: none;
 
       &:active {
         color: white;

diff --git a/src/styles/default/_filters-dropdown.scss b/src/styles/default/_filters-dropdown.scss
@@ -133,7 +133,7 @@
             width: 166px;
             min-width: unset;
             padding: 6px; 
-            border: none;
+            // border: none;
             .button-inner-wrapper {
                 flex-direction: row-reverse;
                 justify-content: center;

diff --git a/src/styles/ftva/_filters-dropdown.scss b/src/styles/ftva/_filters-dropdown.scss
@@ -1,6 +1,9 @@
 .ftva.filters-dropdown {
     :deep(.mobile-button) {
         border-color: #ddd;
+        &:hover, &:focus {
+            border-color: #ddd;
+        }
     }
     // Done / Clear Buttons
     .action-row {
@@ -46,6 +49,21 @@
 
     @media #{$small} { 
         // Input field / Button on Mobile
+        :deep(.mobile-button) {
+            border-color: $medium-grey;
+            &:hover,
+                &:focus {
+                    border-color: $medium-grey;
+                }
+            &.is-expanded {
+                    color: $accent-blue;
+                    border: 2px solid $accent-blue;
+
+                    path.svg__fill--accent-blue {
+                        fill: $accent-blue;
+                    }
+                }
+        }
         .icon-svg {
             :deep(svg) {
                 path.svg__fill--accent-blue {