MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Standardise field help text and error icon size and colors

This commit is contained in:
Andrew Kingston 2023-11-29 09:27:15 +00:00
parent f4d2efdaa1
commit 9da641f848
2 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/bbui/src/Form/Field.svelte
View File

@ -51,15 +51,13 @@
margin-top: var(--spectrum-global-dimension-size-75); margin-top: var(--spectrum-global-dimension-size-75);
align-items: center; align-items: center;
} }
.helpText :global(svg) { .helpText :global(svg) {
width: 14px; width: 13px;
color: var(--grey-5); color: var(--spectrum-global-color-gray-600);
margin-right: 6px; margin-right: 6px;
} }
.helpText span { .helpText span {
color: var(--grey-7); color: var(--spectrum-global-color-gray-800);
font-size: var(--spectrum-global-dimension-font-size-75); font-size: var(--spectrum-global-dimension-font-size-75);
} }
</style> </style>

19
packages/client/src/components/app/forms/Field.svelte
View File

@ -137,21 +137,23 @@
width: 100%; width: 100%;
} }
.error :global(svg),
.helpText :global(svg) {
width: 13px;
margin-right: 6px;
}
.error { .error {
display: flex; display: flex;
margin-top: var(--spectrum-global-dimension-size-75); margin-top: var(--spectrum-global-dimension-size-75);
align-items: center; align-items: center;
} }
.error :global(svg) { .error :global(svg) {
width: 14px;
color: var( color: var(
--spectrum-semantic-negative-color-default, --spectrum-semantic-negative-color-default,
var(--spectrum-global-color-red-500) var(--spectrum-global-color-red-500)
); );
margin-right: 4px;
} }
.error span { .error span {
color: var( color: var(
--spectrum-semantic-negative-color-default, --spectrum-semantic-negative-color-default,
@ -165,17 +167,14 @@
margin-top: var(--spectrum-global-dimension-size-75); margin-top: var(--spectrum-global-dimension-size-75);
align-items: center; align-items: center;
} }
.helpText :global(svg) { .helpText :global(svg) {
width: 14px; color: var(--spectrum-global-color-gray-600);
color: var(--grey-7);
margin-right: 6px;
} }
.helpText span { .helpText span {
color: var(--grey-5); color: var(--spectrum-global-color-gray-800);
font-size: var(--spectrum-global-dimension-font-size-75); font-size: var(--spectrum-global-dimension-font-size-75);
} }
.spectrum-FieldLabel--right, .spectrum-FieldLabel--right,
.spectrum-FieldLabel--left { .spectrum-FieldLabel--left {
padding-right: var(--spectrum-global-dimension-size-200); padding-right: var(--spectrum-global-dimension-size-200);