-
@@ -45,19 +54,21 @@ const value = computed({
top: -5px;
left: -5px;
}
+
.color-input-wrapper {
height: 24px;
width: 24px;
overflow: hidden;
position: relative;
- border-radius: 12px;
+ border-radius: 4px;
flex-shrink: 0;
}
+
.color-picker {
background: var(--color-picker-bg, var(--vp-c-bg-alt));
border-radius: 8px;
color: var(--vp-c-text-2);
- padding: 4px 8px;
+ padding: 3px 8px 3px 3px;
height: auto;
font-size: 14px;
text-align: left;
@@ -66,6 +77,10 @@ const value = computed({
display: flex;
align-items: center;
gap: 2px;
+ transition:
+ color 0.25s,
+ border-color 0.25s,
+ background-color 0.25s;
}
.color-input-text {
@@ -79,15 +94,18 @@ const value = computed({
text-align: left;
border-radius: 8px;
cursor: text;
- transition: border-color 0.25s, background 0.4s ease;
+ transition:
+ border-color 0.25s,
+ background 0.4s ease;
+ letter-spacing: 1px;
}
-.color-picker:hover, .color-picker:focus {
+.color-picker:hover,
+.color-picker:focus {
border-color: var(--vp-c-brand);
background: var(--vp-c-bg-alt);
}
-.color-input[value="currentColor"] {
-
+.color-input[value='currentColor'] {
}
diff --git a/docs/.vitepress/theme/components/base/FakeInput.vue b/docs/.vitepress/theme/components/base/FakeInput.vue
index 613a48aca..d86621d65 100644
--- a/docs/.vitepress/theme/components/base/FakeInput.vue
+++ b/docs/.vitepress/theme/components/base/FakeInput.vue
@@ -1,14 +1,27 @@
@@ -26,11 +39,34 @@ const SearchIcon = createLucideIcon('search', search)
cursor: text;
display: flex;
gap: 12px;
- transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+ transition:
+ color 0.25s,
+ border-color 0.25s,
+ background-color 0.25s;
}
-.fake-input:hover, .fake-input:focus {
+.fake-input:hover,
+.fake-input:focus {
border-color: var(--vp-c-brand);
background: var(--vp-c-bg-alt);
}
+
+.shortcut {
+ margin-left: auto;
+ padding: 2px 6px;
+ font-size: 12px;
+ font-family: inherit;
+ font-weight: 500;
+ line-height: 1.5;
+ color: var(--vp-c-text-3);
+ background: var(--vp-c-default-soft);
+ border: 1px solid var(--vp-c-divider);
+ border-radius: 4px;
+}
+
+@media (hover: none) {
+ .shortcut {
+ display: none;
+ }
+}
diff --git a/docs/.vitepress/theme/components/base/IconButton.vue b/docs/.vitepress/theme/components/base/IconButton.vue
index f3ac32b1f..7006803ff 100644
--- a/docs/.vitepress/theme/components/base/IconButton.vue
+++ b/docs/.vitepress/theme/components/base/IconButton.vue
@@ -5,7 +5,6 @@
diff --git a/docs/.vitepress/theme/components/base/ResetButton.vue b/docs/.vitepress/theme/components/base/ResetButton.vue
index 5b94aa669..7709ae985 100644
--- a/docs/.vitepress/theme/components/base/ResetButton.vue
+++ b/docs/.vitepress/theme/components/base/ResetButton.vue
@@ -1,14 +1,15 @@
-
+
@@ -32,6 +33,7 @@ const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
0% {
transform: rotate(0deg);
}
+
100% {
transform: rotate(359deg);
}
diff --git a/docs/.vitepress/theme/components/base/Switch.vue b/docs/.vitepress/theme/components/base/Switch.vue
index c327fcf9a..7902ef396 100644
--- a/docs/.vitepress/theme/components/base/Switch.vue
+++ b/docs/.vitepress/theme/components/base/Switch.vue
@@ -1,15 +1,22 @@
diff --git a/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue b/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue
index 9471e815f..b3acb5f03 100644
--- a/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue
+++ b/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue
@@ -5,10 +5,15 @@ import LucideIcon from '../base/LucideIcon.vue'
import { useRouter } from 'vitepress';
import { random } from 'lodash-es'
import FakeInput from '../base/FakeInput.vue'
+import useSearchShortcut from '../../utils/useSearchShortcut'
const { go } = useRouter()
const intervalTime = shallowRef()
+const { shortcutText: kbdSearchShortcut } = useSearchShortcut(() => {
+ go('/icons/?focus')
+})
+
const getInitialItems = () => data.icons.slice(0, 48)
const items = ref(getInitialItems())
let id = items.value.length + 1
@@ -64,7 +69,11 @@ onBeforeUnmount(() => {
-