diff --git a/docs/.vitepress/theme/components/base/ColorPicker.vue b/docs/.vitepress/theme/components/base/ColorPicker.vue index 5f3ad3015..db0c86633 100644 --- a/docs/.vitepress/theme/components/base/ColorPicker.vue +++ b/docs/.vitepress/theme/components/base/ColorPicker.vue @@ -85,4 +85,8 @@ const value = computed({ border-color: var(--vp-c-brand); background: var(--vp-c-bg-alt); } + +.color-input[value="currentColor"] { + +} diff --git a/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue b/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue index fd31cc650..fd3eb07fe 100644 --- a/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue +++ b/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue @@ -6,6 +6,7 @@ import createLucideIcon from 'lucide-vue-next/src/createLucideIcon' import RangeSlider from '../base/RangeSlider.vue' import InputField from '../base/InputField.vue' import ColorPicker from '../base/ColorPicker.vue' +import IconButton from '../base/IconButton.vue' import HomeIconCustomizerIcons from './HomeIconCustomizerIcons.vue' import { ref } from 'vue' @@ -43,14 +44,13 @@ syncRef(color, colorCssVar) syncRef(strokeWidth, strokeWidthCssVar) syncRef(size, sizeCssVar) -// TODO Add Reset button -// const RotateIcon = createLucideIcon('RotateIcon', rotateCw) +const RotateIcon = createLucideIcon('RotateIcon', rotateCw) -// function resetStyle () { -// color.value = 'currentColor' -// strokeWidth.value = 2 -// size.value = 24 -// } +function resetStyle () { + color.value = 'currentColor' + strokeWidth.value = 2 + size.value = 24 +} @@ -60,6 +60,9 @@ syncRef(size, sizeCssVar)
Lucide has a lot of customization options to match the icons with you UI. @@ -89,7 +92,7 @@ syncRef(size, sizeCssVar) v-model="strokeWidth" :min="1" :max="3" - :steps="0.25" + :step="0.25" /> @@ -134,6 +137,10 @@ syncRef(size, sizeCssVar) line-height: 32px; font-size: 24px; font-weight: 600; + display: flex; + flex-direction: row; + gap: 8px; + justify-content: space-between; } .copy { @@ -170,6 +177,6 @@ syncRef(size, sizeCssVar) } .color-picker-field:deep(.display-value) { - width: 130px; + width: 138px; }