Make cancel button consistent across browsers.

stadiamaps · Jun 27, 2023 · 422b519 · 422b519
1 parent c23f70d
commit 422b519
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stadiamaps/maplibre-search-box",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "homepage": "https://docs.stadiamaps.com/",
   "repository": "https://github.com/stadiamaps/maplibre-search-box",
   "license": "BSD-3-Clause",

diff --git a/src/index.scss b/src/index.scss
@@ -36,21 +36,37 @@
     .cancel {
       background: #aaa;
       border-radius: 50%;
-      color: #fff;
       cursor: pointer;
       display: block;
       font-size: 1.5rem;
       height: 20px;
+      opacity: 0.5;
       position: absolute;
       right: 5px;
       top: 9px;
       width: 20px;
 
+      &:hover {
+        opacity: 1;
+      }
+
+      &::before,
+      &::after {
+        background-color: #fff;
+        content: " ";
+        height: 10px;
+        left: 9px;
+        position: absolute;
+        top: 5px;
+        width: 2px;
+      }
+
       &::before {
-        content: "\02a2f";
-        display: block;
-        margin-left: 4.5px;
-        margin-top: -4.5px;
+        transform: rotate(45deg);
+      }
+
+      &::after {
+        transform: rotate(-45deg);
       }
     }
 
@@ -123,6 +139,8 @@
     padding: 5px;
 
     a {
+      color: #000;
+
       &:visited {
         color: #000;
       }

diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,6 @@
-import { IControl, Map } from "maplibre-gl";
+import type { IControl, Map } from "maplibre-gl";
 import {
-  AutocompleteRequest,
+  type AutocompleteRequest,
   GeocodingApi,
   PeliasGeoJSONFeature,
   PeliasLayer,