LukeParke/sveltesociety.dev
1
0
Fork 0
mirror of https://github.com/LukeHagar/sveltesociety.dev.git synced 2025-12-09 04:21:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove unused ArrowButton.svelte (#492)

Browse Source
This commit is contained in:
Lachlan Collins
2023-11-19 23:44:54 +11:00
committed by GitHub
parent f3c9859c18
commit b758d71846
1 changed files with 0 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/lib/components/ComponentIndex/ArrowButton.svelte
View File

@@ -1,83 +0,0 @@
<script>
export const primary = false;
export let active = false;
export let small = false;
</script>
<span>
Package Manager
<div on:click class:small>
<span>
<slot />
</span>
<div class="arrow" class:active />
<section class="popin"><slot name="menu" /></section>
</div>
</span>
<style>
div {
font-size: 1rem;
border: 2px solid var(--dark-gray);
border-radius: 3px;
background-color: white;
color: var(--dark-gray);
display: flex;
align-items: center;
justify-content: space-between;
padding: 13.5px var(--s-2);
position: relative;
}
div.small {
font-size: var(--font-100);
}
div:hover {
cursor: pointer;
border-color: var(--secondary);
color: var(--secondary);
}
.arrow {
margin-left: 25px;
height: 16px;
-webkit-mask: url(/images/right-arrow.svg) no-repeat center;
mask: url(/images/right-arrow.svg) no-repeat center;
background-color: var(--dark-gray);
}
div:hover .arrow {
background-color: var(--secondary);
}
.arrow.active {
background-color: var(--dark-gray);
}
.popin {
min-width: 250px;
width: 100%;
font-size: var(--font-100);
display: none;
position: absolute;
left: var(--s-4);
top: 100%;
z-index: 100;
margin: 0;
padding: 0;
border: 2px solid var(--secondary);
border-radius: 5px;
background: white;
}
div:hover .popin:not(:empty) {
display: block;
}
span {
font-size: 0.875rem;
}
@media screen and (min-width: 700px) {
.popin {
left: 95%;
top: var(--s-4);
}
}
</style>