feat: add inner glow effect in some components

This commit is contained in:
hakadao
2024-06-14 01:02:25 +08:00
parent 8d26246f04
commit 8d7f8174cf
3 changed files with 8 additions and 7 deletions

View File

@@ -16,15 +16,16 @@ const { reachTop } = useBewlyApp()
<Button
size="small"
center
round
style="
--b-button-width: 45px;
--b-button-height: 45px;
--b-button-border-width: 1px;
--b-button-color: var(--bew-elevated-1);
--b-button-color-hover: var(--bew-elevated-1-hover);
--b-button-shadow: var(--bew-shadow-1);
--b-button-shadow-hover: var(--bew-shadow-2);
--b-button-shadow-active: var(--bew-shadow-1);
--b-button-shadow: var(--bew-shadow-1), var(--bew-shadow-edge-glow-1);
--b-button-shadow-hover: var(--bew-shadow-2), var(--bew-shadow-edge-glow-1);
--b-button-shadow-active: var(--bew-shadow-1), var(--bew-shadow-edge-glow-1);
backdrop-filter: var(--bew-filter-glass-1);
"
transform-gpu

View File

@@ -258,8 +258,8 @@ function handleBackToTopOrRefresh() {
--uno: "duration-300 ease-in-out transform-gpu";
--uno: "p-2 m-2 bg-$bew-content-2 dark:bg-$bew-elevated-1";
--uno: "flex flex-col gap-2 shrink-0";
--uno: "rounded-full border-$bew-border-color";
--uno: "shadow-$bew-shadow-2";
--uno: "rounded-full border-1 border-$bew-border-color";
box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
backdrop-filter: var(--bew-filter-glass-1);
}
@@ -274,7 +274,7 @@ function handleBackToTopOrRefresh() {
--uno: "grid place-items-center";
--uno: "filter-$bew-filter-glass-1";
--uno: "bg-$bew-elevated-1 hover:bg-$bew-content-1-hover";
--uno: "rounded-full shadow-$bew-shadow-2";
--uno: "rounded-full shadow-$bew-shadow-2 border-1 border-$bew-border-color";
backdrop-filter: var(--bew-filter-glass-1);
transition:

View File

@@ -348,7 +348,7 @@ async function handleClearSearchHistory() {
--b-search-bar-color-focus: var(--b-search-bar-color);
@mixin card-content {
--uno: "text-base outline-none w-full bg-$b-search-bar-color transform-gpu";
--uno: "text-base outline-none w-full bg-$b-search-bar-color transform-gpu border-1 border-$bew-border-color";
backdrop-filter: var(--bew-filter-glass-1);
box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
}