mirror of https://github.com/sveltejs/svelte
parent
29e876d147
commit
5aa0ad95e2
@ -0,0 +1,144 @@
|
|||||||
|
<script>
|
||||||
|
export let options;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.options {
|
||||||
|
padding: 0 1rem;
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option {
|
||||||
|
display: block;
|
||||||
|
padding: 0 0 0 1.25em;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: var(--text);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key {
|
||||||
|
display: inline-block;
|
||||||
|
width: 9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.string {
|
||||||
|
color: hsl(41, 37%, 45%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.boolean {
|
||||||
|
color: hsl(45, 7%, 45%);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
label[for] {
|
||||||
|
color: var(--string);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox] {
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=radio] {
|
||||||
|
position: absolute;
|
||||||
|
top: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=radio] + label {
|
||||||
|
padding: 0 0 0 1.6em;
|
||||||
|
margin: 0 0.6em 0 0;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=radio]:checked + label {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* input[type=radio]:focus + label {
|
||||||
|
color: #00f;
|
||||||
|
outline: 1px dotted #00f;
|
||||||
|
} */
|
||||||
|
|
||||||
|
input[type=radio] + label:before {
|
||||||
|
content: '';
|
||||||
|
background: #eee;
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
float: left;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
margin-left: -2.1rem;
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
vertical-align: top;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
transition: box-shadow 0.1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=radio] + label:before {
|
||||||
|
background-color: var(--second);
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: inset 0 0 0 0.5em rgba(255, 255, 255, .95);
|
||||||
|
border: 1px solid var(--second);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=radio]:checked + label:before {
|
||||||
|
background-color: var(--second);
|
||||||
|
box-shadow: inset 0 0 0 .15em rgba(255, 255, 255, .95);
|
||||||
|
border: 1px solid var(--second);
|
||||||
|
transition: box-shadow 0.2s ease-out;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="options">
|
||||||
|
result = svelte.compile(source, {
|
||||||
|
<div class="option">
|
||||||
|
<span class="key">generate:</span>
|
||||||
|
|
||||||
|
<input id="dom-input" type="radio" bind:group={options.generate} value="dom">
|
||||||
|
<label for="dom-input"><span class="string">"dom"</span></label>
|
||||||
|
|
||||||
|
<input id="ssr-input" type="radio" bind:group={options.generate} value="ssr">
|
||||||
|
<label for="ssr-input"><span class="string">"ssr"</span>,</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="option">
|
||||||
|
<span class="key">dev:</span>
|
||||||
|
<input type="checkbox" bind:checked={options.dev}> <span class="boolean">{options.dev}</span>,
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="option">
|
||||||
|
<span class="key">css:</span>
|
||||||
|
<input type="checkbox" bind:checked={options.css}> <span class="boolean">{options.css}</span>,
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="option">
|
||||||
|
<span class="key">hydratable:</span>
|
||||||
|
<input type="checkbox" bind:checked={options.hydratable}> <span class="boolean">{options.hydratable}</span>,
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="option">
|
||||||
|
<span class="key">customElement:</span>
|
||||||
|
<input type="checkbox" bind:checked={options.customElement}> <span class="boolean">{options.customElement}</span>,
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="option">
|
||||||
|
<span class="key">immutable:</span>
|
||||||
|
<input type="checkbox" bind:checked={options.immutable}> <span class="boolean">{options.immutable}</span>,
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="option">
|
||||||
|
<span class="key">legacy:</span>
|
||||||
|
<input type="checkbox" bind:checked={options.legacy}> <span class="boolean">{options.legacy}</span>
|
||||||
|
</label>
|
||||||
|
});
|
||||||
|
</div>
|
Loading…
Reference in new issue