clean up new comp styles

This commit is contained in:
Gerard Burns 2024-04-08 08:58:48 +01:00
parent fbefadc50f
commit fab54188e2
3 changed files with 28 additions and 49 deletions

View File

@ -137,11 +137,12 @@
text="required" text="required"
/> />
<span class="space" /> <span class="space" />
<a target="_blank" rel="noopener noreferrer" href={"https://docs.budibase.com/docs/budibasedb#constraints"} class="chip link topLink"> <DocumentationLink
<Icon size="S" name={"DataUnavailable"} /> icon="DataUnavailable"
<span class="text"> href="https://docs.budibase.com/docs/budibasedb#constraints"
Constraint text="Constraint"
</span></a><span class="comma">,</span> />
<span class="comma">,</span>
<span class="text"> <span class="text">
so values may be missing so values may be missing
</span> </span>
@ -325,6 +326,7 @@
} }
.comma { .comma {
margin-left: 2px;
color: var(--grey-5); color: var(--grey-5);
font-size: 20px; font-size: 20px;
display: inline block; display: inline block;

View File

@ -11,7 +11,7 @@
{href} {href}
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
class="chip link" class="link"
> >
<Icon size="S" name={icon} /> <Icon size="S" name={icon} />
<span class="text"> <span class="text">
@ -22,29 +22,6 @@
</a> </a>
<style> <style>
.chip {
display: inline-flex;
box-sizing: border-box;
padding: 3px 6px;
border-radius: 5px;
vertical-align: sub;
filter: brightness(100%);
background-color: var(--grey-3);
border: 1px solid var(--grey-3);
overflow: hidden;
flex-shrink: 0;
}
.chip:hover {
filter: brightness(120%);
transition: filter 300ms
}
.chip :global(svg) {
color: inherit;
margin-right: 5px;
}
.text { .text {
color: var(--ink); color: var(--ink);
white-space: nowrap; white-space: nowrap;
@ -53,21 +30,21 @@
} }
.link { .link {
border-radius: 0; display: inline-flex;
background-color: transparent;
border: 1px solid red;
border-width: 0 0 1px 0;
box-sizing: border-box; box-sizing: border-box;
border-color: var(--blue); padding: 3px 0 2px;
color: white; vertical-align: sub;
padding-left: 0px; filter: brightness(100%);
padding-right: 0px;
transition: background-color 200ms; overflow: hidden;
flex-shrink: 0;
border-radius: 0;
border-bottom: 1px solid var(--blue);
transition: filter 300ms;
} }
.link:hover { .link:hover {
cursor: pointer; filter: brightness(120%);
background-color: #ffffff0a;
} }
.link :global(svg) { .link :global(svg) {

View File

@ -14,7 +14,7 @@
{href} {href}
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
class="chip" class="infoWord"
style:color={color} style:color={color}
style:border-color={color} style:border-color={color}
on:mouseenter on:mouseenter
@ -32,7 +32,7 @@
{:else} {:else}
<div <div
role="tooltip" role="tooltip"
class="chip" class="infoWord"
style:color={color} style:color={color}
style:border-color={color} style:border-color={color}
on:mouseenter on:mouseenter
@ -50,7 +50,7 @@
{/if} {/if}
<style> <style>
.chip { .infoWord {
display: inline-flex; display: inline-flex;
box-sizing: border-box; box-sizing: border-box;
padding: 3px 6px; padding: 3px 6px;
@ -60,16 +60,16 @@
background-color: var(--grey-3); background-color: var(--grey-3);
border: 1px solid var(--grey-3); border: 1px solid var(--grey-3);
overflow: hidden; overflow: hidden;
}
.chip:hover {
filter: brightness(120%);
transition: filter 300ms transition: filter 300ms
} }
.chip :global(svg) { .infoWord:hover {
filter: brightness(120%);
}
.infoWord :global(svg) {
color: inherit; color: inherit;
margin-right: 5px; margin-right: 4px;
} }
.text { .text {