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