radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-10-31 01:00:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor header to use clip-path

Browse Source
This commit is contained in:
Rūdolfs Ošiņš
2024-09-11 17:24:30 +02:00
parent 43ad446dc7
commit 1bb8a806aa
2 changed files with 37 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.svelte
+37 -15
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import Background from "./Header/Background.svelte";
import Border from "./Border.svelte";
import Icon from "./Icon.svelte";
import Popover from "./Popover.svelte";
@@ -7,11 +6,8 @@
</script>
<style>
.flex-item {
display: flex;
align-items: center;
}
header {
.header {
margin: 0 0.5rem;
padding: 0 0.5rem;
gap: 0.25rem;
height: 3rem;
@@ -25,17 +21,44 @@
gap: 0.5rem;
padding: 0 0.5rem;
}
.navigation :global(svg:hover) {
display: flex;
color: var(--color-fill-secondary);
}
.bottom-pixel-corners {
position: absolute;
top: 0;
left: 0.5rem;
right: 0.5rem;
height: 3rem;
z-index: -1;
background-color: var(--color-background-float);
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 6px),
calc(100% - 2px) calc(100% - 6px),
calc(100% - 2px) calc(100% - 4px),
calc(100% - 4px) calc(100% - 4px),
calc(100% - 4px) calc(100% - 2px),
calc(100% - 6px) calc(100% - 2px),
calc(100% - 6px) 100%,
6px 100%,
6px calc(100% - 2px),
4px calc(100% - 2px),
4px calc(100% - 4px),
2px calc(100% - 4px),
2px calc(100% - 6px),
0 calc(100% - 6px)
);
}
</style>
<header class="flex-item">
<div class="wrapper flex-item">
<div class="wrapper-left flex-item">
<div class="flex-item navigation" style:gap="0.5rem">
<div class="header global-flex">
<div class="wrapper global-flex">
<div class="wrapper-left global-flex">
<div class="global-flex navigation" style:gap="0.5rem">
<Icon
name="arrow-left"
onclick={() => {
@@ -52,7 +75,7 @@
<slot name="center" />
<div class="flex-item" style:gap="0.5rem">
<div class="global-flex" style:gap="0.5rem">
<Border variant="ghost" stylePadding="0 0.5rem" styleHeight="32px">
<Icon name="offline" />
<span class="txt-small txt-semibold">Offline</span>
@@ -75,6 +98,5 @@
</Popover>
</div>
</div>
<Background />
</header>
<div class="bottom-pixel-corners"></div>
</div>
src/components/Header/Background.svelte
-52
View File
@@ -1,52 +0,0 @@
<script lang="ts">
</script>
<style>
.container {
height: 3rem;
z-index: -1;
position: absolute;
top: 0;
left: 0.5rem;
right: 0.5rem;
display: grid;
grid-template-columns: repeat(3, 2px) auto repeat(3, 2px);
grid-template-rows: auto repeat(3, 2px);
}
.bg {
background-color: var(--color-background-float);
}
</style>
<div class="container">
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div></div>
<div></div>
<div></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="bg"></div>
<div></div>
<div></div>
<div></div>
</div>