Styling number input types.

mlibrary · Oct 28, 2024 · 5444ca0 · 5444ca0
1 parent 6256db8
commit 5444ca0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/modules/core/components/DateRangeInput/index.js b/src/modules/core/components/DateRangeInput/index.js
@@ -44,9 +44,7 @@ const DateRangeInput = ({ currentFilter = '', datastoreUid, filterGroupUid }) =>
 
   useEffect(() => {
     let filterValue = '';
-    if (years.some((year) => {
-      return year;
-    })) {
+    if (years.some(Boolean)) {
       if (range === 'between') {
         filterValue = years.filter(Number).join(' to ');
       } else {

diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
@@ -329,15 +329,17 @@ input[type="url"],
 input[type="search"],
 input[type="email"],
 input[type="tel"],
-input[type="date"] {
+input[type="date"],
+input[type="number"] {
+  background: white;
+  border: solid 1px var(--search-color-grey-400);
+  border-radius: 4px;
+  box-shadow: inset 0 1px 4px var(--search-color-grey-300);
+  font-size: 1rem;
+  line-height: 1.4;
   margin: 0;
   padding: 0;
-  font-size: 1rem;
-  border: solid 1px rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08);
-  border-radius: 4px;
   padding: 0.5rem 0.75rem;
-  line-height: 1.4;
   width: 100%;
 }
 
@@ -354,9 +356,11 @@ input[type="tel"]:read-only,
 input[type="text"]:disabled,
 input[type="text"]:read-only,
 input[type="url"]:disabled,
-input[type="url"]:read-only {
-  background: #FAFAFA;
-  border-color: #CCC;
+input[type="url"]:read-only,
+input[type="number"]:disabled,
+input[type="number"]:read-only {
+  background: var(--search-color-grey-200);
+  border-color: var(--search-color-grey-400);
   color: var(--search-color-grey-600);
   cursor: not-allowed;
 }