This commit is contained in:
Vanessa 2024-12-08 17:04:57 +08:00
parent 92df05ec56
commit 8824e552da
2 changed files with 4 additions and 37 deletions

View File

@ -53,70 +53,37 @@
&--secondary { &--secondary {
background-color: var(--b3-theme-secondary); background-color: var(--b3-theme-secondary);
color: var(--b3-theme-on-secondary); color: var(--b3-theme-on-secondary);
&.b3-chip--current {
box-shadow: 0 0 0 2px var(--b3-theme-secondary) inset;
}
} }
&--primary { &--primary,
&--current {
background-color: var(--b3-theme-primary); background-color: var(--b3-theme-primary);
color: var(--b3-theme-on-primary); color: var(--b3-theme-on-primary);
&.b3-chip--current {
box-shadow: 0 0 0 2px var(--b3-theme-primary) inset;
}
} }
&--pink { &--pink {
color: var(--b3-theme-on-secondary); color: var(--b3-theme-on-secondary);
background-color: #ea4aaa; background-color: #ea4aaa;
&.b3-chip--current {
box-shadow: 0 0 0 2px #ea4aaa inset;
}
} }
&--info { &--info {
color: var(--b3-card-info-color); color: var(--b3-card-info-color);
background-color: var(--b3-card-info-background); background-color: var(--b3-card-info-background);
&.b3-chip--current {
box-shadow: 0 0 0 2px var(--b3-card-info-background) inset;
}
} }
&--warning { &--warning {
color: var(--b3-card-warning-color); color: var(--b3-card-warning-color);
background-color: var(--b3-card-warning-background); background-color: var(--b3-card-warning-background);
&.b3-chip--current {
box-shadow: 0 0 0 2px var(--b3-card-warning-background) inset;
}
} }
&--error { &--error {
color: var(--b3-card-error-color); color: var(--b3-card-error-color);
background-color: var(--b3-card-error-background); background-color: var(--b3-card-error-background);
&.b3-chip--current {
box-shadow: 0 0 0 2px var(--b3-card-error-background) inset;
}
} }
&--success { &--success {
color: var(--b3-card-success-color); color: var(--b3-card-success-color);
background-color: var(--b3-card-success-background); background-color: var(--b3-card-success-background);
&.b3-chip--current {
box-shadow: 0 0 0 2px var(--b3-card-success-background) inset;
}
}
&--current {
background-color: var(--b3-theme-surface);
color: var(--b3-theme-on-surface);
box-shadow: 0 0 0 2px var(--b3-list-hover) inset;
} }
&--pointer { &--pointer {

View File

@ -289,7 +289,7 @@ const saveCriterionData = (config: Config.IUILayoutTabSearchConfig,
const criteriaElement = element.querySelector("#criteria").firstElementChild; const criteriaElement = element.querySelector("#criteria").firstElementChild;
criteriaElement.classList.remove("fn__none"); criteriaElement.classList.remove("fn__none");
criteriaElement.querySelector(".b3-chip--current")?.classList.remove("b3-chip--current"); criteriaElement.querySelector(".b3-chip--current")?.classList.remove("b3-chip--current");
criteriaElement.insertAdjacentHTML("beforeend", `<div data-type="set-criteria" class="b3-chip b3-chip--current b3-chip--middle b3-chip--pointer b3-chip--${["secondary", "primary", "info", "success", "warning", "error", ""][(criteriaElement.childElementCount) % 7]}">${criterion.name}<svg class="b3-chip__close" data-type="remove-criteria"><use xlink:href="#iconCloseRound"></use></svg></div>`); criteriaElement.insertAdjacentHTML("beforeend", `<div data-type="set-criteria" class="b3-chip b3-chip--current b3-chip--middle b3-chip--pointer">${criterion.name}<svg class="b3-chip__close" data-type="remove-criteria"><use xlink:href="#iconCloseRound"></use></svg></div>`);
}); });
}; };
@ -630,7 +630,7 @@ export const initCriteriaMenu = (element: HTMLElement, data: Config.IUILayoutTab
if (configIsSame(item, config)) { if (configIsSame(item, config)) {
isSame = true; isSame = true;
} }
html += `<div data-type="set-criteria" class="${isSame ? "b3-chip--current " : ""}b3-chip b3-chip--middle b3-chip--pointer b3-chip--${["secondary", "primary", "info", "success", "warning", "error", ""][index % 7]}">${escapeHtml(item.name)}<svg class="b3-chip__close" data-type="remove-criteria"><use xlink:href="#iconCloseRound"></use></svg></div>`; html += `<div data-type="set-criteria" class="${isSame ? "b3-chip--current " : ""}b3-chip b3-chip--middle b3-chip--pointer">${escapeHtml(item.name)}<svg class="b3-chip__close" data-type="remove-criteria"><use xlink:href="#iconCloseRound"></use></svg></div>`;
}); });
/// #if MOBILE /// #if MOBILE
element.innerHTML = `<div class="b3-chips${html?"":" fn__none"}"> element.innerHTML = `<div class="b3-chips${html?"":" fn__none"}">