fix(frontend): improve default select styling for apps (#3656)

* fix(frontend): improve select

* fix(frontend): update border-radius

* fix(frontend): update border-radius
This commit is contained in:
Faton Ramadani
2024-05-01 13:25:34 +02:00
committed by GitHub
parent 3aeb27bcb1
commit 2b3473093a
5 changed files with 13 additions and 13 deletions
+2 -2
View File
@@ -152,9 +152,9 @@
/* Components */
.component-wrapper {
@apply rounded-md border overflow-hidden border-gray-300 dark:border-gray-600;
@apply rounded-component border overflow-hidden border-gray-300 dark:border-gray-600;
}
.app-editor-input {
@apply rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
@apply rounded-component border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
}
@@ -21,6 +21,7 @@
import { Bug } from 'lucide-svelte'
import Popover from '$lib/components/Popover.svelte'
import ResolveStyle from '../helpers/ResolveStyle.svelte'
import { twMerge } from 'tailwind-merge'
export let id: string
export let configuration: RichConfigurations
@@ -219,8 +220,7 @@
{#if Array.isArray(listItems) && listItems.every((x) => x && typeof x == 'object' && typeof x['label'] == 'string' && `value` in x)}
<Select
inAppEditor={true}
--border-radius="0"
--border-color="#999"
--border-radius="0.250rem"
bind:filterText
on:filter={handleFilter}
on:clear={onClear}
@@ -228,13 +228,11 @@
items={listItems}
listAutoWidth={resolvedConfig.fullWidth}
inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
containerStyles={'border-color: #999;' +
($darkMode
? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
: SELECT_INPUT_DEFAULT_STYLE.containerStyles) +
css?.input?.style}
containerStyles={($darkMode
? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
{value}
class={css?.input?.class}
class={twMerge($darkMode ? '!border-gray-500' : '!border-gray-300', css?.input?.class)}
placeholder={resolvedConfig.placeholder}
disabled={resolvedConfig.disabled}
on:focus={() => {
@@ -74,9 +74,9 @@
$: classInput = twMerge(
'windmillapp w-full py-1.5 px-2 text-sm',
'app-editor-input',
css?.input?.class ?? '',
resolvedConfig.disabled ? 'placeholder:text-gray-400 dark:placeholder:text-gray-600' : '',
'app-editor-input',
'wm-text-input'
)
@@ -97,9 +97,8 @@
<CurrencyInput
inputClasses={{
formatted: twMerge(
'px-2 w-full py-1.5 windmillapp',
'px-2 w-full py-1.5 windmillapp app-editor-input h-8',
css?.input?.class,
'app-editor-input h-8',
'wm-currency-input'
),
wrapper: 'w-full windmillapp',
+3
View File
@@ -429,6 +429,9 @@ const config = {
border: {
color: 'red'
},
borderRadius: {
component: '0.250rem'
},
maxHeight: {
'1/2': '50vh',
'2/3': '66vh',