fix(editor): Tag styling issues (#15336)

This commit is contained in:
Robert Squires
2025-05-13 08:52:17 +01:00
committed by GitHub
parent a0a4476175
commit 807084e75d
5 changed files with 5 additions and 8 deletions

View File

@@ -20,7 +20,7 @@ withDefaults(defineProps<TagProps>(), {
.tag { .tag {
min-width: max-content; min-width: max-content;
padding: 1px var(--spacing-4xs); padding: 1px var(--spacing-4xs);
color: var(--color-text-dark); color: var(--color-text-base);
background-color: var(--color-background-base); background-color: var(--color-background-base);
border-radius: var(--border-radius-base); border-radius: var(--border-radius-base);
font-size: var(--font-size-2xs); font-size: var(--font-size-2xs);

View File

@@ -77,6 +77,7 @@ const onExpand = () => {
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
overflow-x: scroll; overflow-x: scroll;
gap: var(--spacing-4xs);
/* Hide scrollbar for Chrome, Safari and Opera */ /* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar { &::-webkit-scrollbar {
@@ -88,9 +89,5 @@ const onExpand = () => {
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
margin-top: calc(var(--spacing-4xs) * -1); // Cancel out top margin of first tags row margin-top: calc(var(--spacing-4xs) * -1); // Cancel out top margin of first tags row
* {
margin: var(--spacing-4xs) var(--spacing-4xs) 0 0;
}
} }
</style> </style>

View File

@@ -175,7 +175,7 @@
@include mixins.m(mini) { @include mixins.m(mini) {
height: 20px; height: 20px;
padding: 0 5px; padding: 0 5px;
line-height: 18px; line-height: 16px;
.el-icon.el-tag__close { .el-icon.el-tag__close {
margin-left: -3px; margin-left: -3px;

View File

@@ -156,7 +156,7 @@ onBeforeUnmount(() => {
<el-tag <el-tag
:title="tag.name" :title="tag.name"
type="info" type="info"
size="small" size="mini"
:class="{ hoverable }" :class="{ hoverable }"
:disable-transitions="true" :disable-transitions="true"
> >

View File

@@ -282,7 +282,7 @@ onClickOutside(
.el-tag { .el-tag {
padding: var(--spacing-5xs) var(--spacing-4xs); padding: var(--spacing-5xs) var(--spacing-4xs);
color: var(--color-text-dark); color: var(--color-text-base);
background-color: var(--color-background-base); background-color: var(--color-background-base);
border-radius: var(--border-radius-base); border-radius: var(--border-radius-base);
font-size: var(--font-size-2xs); font-size: var(--font-size-2xs);