Skip to content

Commit

Permalink
Flexible width for palette
Browse files Browse the repository at this point in the history
  • Loading branch information
cagataycivici committed Jan 3, 2025
1 parent 84673ed commit 64316a1
Show file tree
Hide file tree
Showing 4 changed files with 5 additions and 5 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="flex border border-surface rounded-l-lg rounded-r-lg overflow-hidden">
<div v-for="color of value" :key="color" class="w-8 h-8" :style="{ backgroundColor: color }" :title="color"></div>
<div class="flex flex-1 border border-surface rounded-l-lg rounded-r-lg overflow-hidden">
<div v-for="color of value" :key="color" class="flex-1 h-8" :style="{ backgroundColor: color }" :title="color"></div>
</div>
</template>

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<Fieldset legend="Colors" :toggleable="true">
<template v-for="(value, key) of $appState.designer.theme.preset.primitive" :key="key">
<section v-if="key !== 'borderRadius'" class="flex justify-between items-center mb-4">
<section v-if="key !== 'borderRadius'" class="flex justify-between items-center mb-4 gap-8">
<div class="flex gap-2 items-center">
<span class="text-sm capitalize block w-20">{{ key }}</span>
<input :value="$appState.designer.theme.preset.primitive[key]['500']" @input="onColorChange($event, key)" type="color" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<Fieldset legend="General" :toggleable="true">
<section class="flex justify-between items-center mb-5">
<section class="flex justify-between items-center mb-5 gap-8">
<div class="flex gap-2 items-center">
<span class="text-sm">Primary</span>
<input :value="$appState.designer.theme.preset.semantic.primary['500']" @input="onPrimaryColorChange($event)" type="color" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<Fieldset legend="Common" :toggleable="true">
<section class="flex justify-between items-center mb-4">
<section class="flex justify-between items-center mb-5 gap-8">
<div class="flex gap-2 items-center">
<span class="text-sm">Surface</span>
<input :value="$colorScheme.surface['500']" @input="onSurfaceColorChange($event)" type="color" />
Expand Down

0 comments on commit 64316a1

Please sign in to comment.