docs(demo): improve button/select/checkbox styles

docs/.vitepress/theme/demo.css

@@ -0,0 +1,95 @@
+main input:focus-visible,
+main textarea:focus-visible,
+main select:focus-visible,
+main input:focus,
+main textarea:focus,
+main select:focus {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+main button.btn-default,
+main select.select-default {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+  border: 1px solid var(--vp-c-border);
+  padding: 4px 12px;
+  border-radius: 8px;
+  margin: 0 1rem 0.5rem 0;
+}
+
+main select.select-default {
+  padding: 6px 26px 6px 12px;
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' viewBox='0 0 24 24' class='icon'><path d='M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z'></path></svg>");
+  background-repeat: no-repeat;
+  background-size: 14px;
+  background-position: 95%;
+}
+
+main button.btn-default:hover,
+main select.select-default:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+main button.btn-default:focus:not(:focus-visible),
+main select.select-default:focus:not(:focus-visible) {
+  outline: none !important;
+}
+
+main form {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+}
+
+main form fieldset {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+  border: none;
+}
+
+main input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  margin: 0;
+  font: inherit;
+  color: currentColor;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 8px;
+  transform: translateY(-0.075em);
+  display: grid;
+  place-content: center;
+}
+
+main input[type="checkbox"]::before {
+  content: "";
+  width: 0.8rem;
+  height: 0.8rem;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--vp-c-brand);
+  transform-origin: bottom left;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+
+main input[type="checkbox"]:checked::before {
+  transform: scale(1);
+  background-color: var(--vp-c-brand);
+}
+
+main ul > li:has(> input[type="checkbox"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}

docs/.vitepress/theme/index.ts

@@ -1,6 +1,7 @@
 import DefaultTheme from "vitepress/theme";
 
 import "@/assets/style.css";
+import "./demo.css";
 
 export default {
   ...DefaultTheme,

src/demos/BingMapsDemo.vue

@@ -1,11 +1,9 @@
 <template>
-  <select v-model="selected">
+  <select v-model="selected" class="select-default">
     <option value="AerialWithLabels">AerialWithLabels</option>
     <option value="RoadOnDemand">RoadOnDemand</option>
     <option value="CanvasDark">CanvasDark</option>
   </select>
-  {{ selected }}
-
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"

src/demos/DrawDemo.vue

@@ -1,13 +1,19 @@
 <template>
-  <input type="checkbox" id="checkbox" v-model="drawEnable" />
-  <label for="checkbox">Draw Enable</label>
-
-  <select id="type" v-model="drawType">
-    <option value="Point">Point</option>
-    <option value="LineString">LineString</option>
-    <option value="Polygon">Polygon</option>
-    <option value="Circle">Circle</option>
-  </select>
+  <form>
+    <fieldset>
+      <label for="checkbox">Draw Mode Enabled</label>
+      <input type="checkbox" id="checkbox" v-model="drawEnable" />
+    </fieldset>
+    <fieldset>
+      <label for="type">Geometry Type</label>
+      <select id="type" class="select-default" v-model="drawType">
+        <option value="Point">Point</option>
+        <option value="LineString">LineString</option>
+        <option value="Polygon">Polygon</option>
+        <option value="Circle">Circle</option>
+      </select>
+    </fieldset>
+  </form>
 
   <ol-map
     :loadTilesWhileAnimating="true"

src/demos/GeomPoint.vue

@@ -1,5 +1,6 @@
 <template>
   <button
+    class="btn-default"
     @click="() => (coordinate = coordinate.map((a) => a + 0.01))"
     type="button"
   >

src/demos/OverlayDemo.vue

@@ -1,5 +1,7 @@
 <template>
-  <button type="button" @click="moveToEast">Move to the right</button>
+  <button class="btn-default" type="button" @click="moveToEast">
+    Move to the right
+  </button>
   <ol-map style="height: 400px">
     <ol-view
       ref="view"

src/demos/SnapModifyDemo.vue

@@ -1,6 +1,7 @@
 <template>
-  <button @click="drawEnabled = !drawEnabled">Draw</button>
-  {{ drawEnabled }}
+  <button class="btn-default" @click="drawEnabled = !drawEnabled">
+    Draw: {{ drawEnabled }}
+  </button>
   <ol-map
     ref="map"
     :load-tiles-while-animating="true"

src/demos/TransformDemo.vue

@@ -1,6 +1,8 @@
 <template>
-  <button @click="drawEnabled = !drawEnabled">Draw</button>
-  {{ drawEnabled }}
+  <button class="btn-default" @click="drawEnabled = !drawEnabled">
+    Draw: {{ drawEnabled }}
+  </button>
+
   <ol-map
     ref="map"
     :load-tiles-while-animating="true"

src/demos/XYZSourceDemo.vue

@@ -1,13 +1,14 @@
 <template>
-  <select v-model="selected">
-    <option value="https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png">
-      OSM
-    </option>
-    <option value="https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}">
-      GOOGLE
-    </option>
-  </select>
-  {{ selected }}
+  <form>
+    <select v-model="selected" class="select-default">
+      <option value="https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png">
+        OSM
+      </option>
+      <option value="https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}">
+        GOOGLE
+      </option>
+    </select>
+  </form>
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"