mirror of https://github.com/sveltejs/svelte
parent
517f5443b4
commit
46589493a0
@ -1,70 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
|
||||||
|
|
||||||
export let examples;
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class='select-wrapper'>
|
|
||||||
<select on:change="{e => dispatch('select', { slug: e.target.value })}">
|
|
||||||
<option value={null} disabled>Select an example</option>
|
|
||||||
|
|
||||||
{#each examples as group}
|
|
||||||
<optgroup label={group.name}>
|
|
||||||
{#each group.examples as example}
|
|
||||||
<option value={example.slug}>{example.title}</option>
|
|
||||||
{/each}
|
|
||||||
</optgroup>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.select-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
margin: 0 0 0 -4rem;
|
|
||||||
padding: 0 0 0 4.8rem;
|
|
||||||
font-family: var(--font-ui);
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
/* debug only */
|
|
||||||
/* background-color: rgba(221, 255, 205, .377); */
|
|
||||||
/* opacity: .5; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.visible {
|
|
||||||
position: relative;
|
|
||||||
padding: .5rem 1.6rem .5rem .4em;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
position: absolute;
|
|
||||||
paddding: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: .4em;
|
|
||||||
font-size: inherit;
|
|
||||||
font-family: inherit;
|
|
||||||
color: inherit;
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
opacity: .7;
|
|
||||||
}
|
|
||||||
</style>
|
|
Loading…
Reference in new issue