mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-10 00:05:27 +00:00
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:
@@ -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',
|
||||
|
||||
@@ -429,6 +429,9 @@ const config = {
|
||||
border: {
|
||||
color: 'red'
|
||||
},
|
||||
borderRadius: {
|
||||
component: '0.250rem'
|
||||
},
|
||||
maxHeight: {
|
||||
'1/2': '50vh',
|
||||
'2/3': '66vh',
|
||||
|
||||
Reference in New Issue
Block a user