mirror of https://github.com/sveltejs/svelte
Richard Harris
7 years ago
parent
c5f569f3c7
commit
ec42d26622
@ -1,28 +0,0 @@
|
||||
<!--
|
||||
-----------------------------------------------
|
||||
svg svelte-logo 1.0
|
||||
- style doesn't like var(--xxx)???
|
||||
-----------------------------------------------
|
||||
-->
|
||||
|
||||
<script>
|
||||
export let outer = '';
|
||||
export let inner = '';
|
||||
export let size;
|
||||
</script>
|
||||
|
||||
<svg class='logo' viewBox='0 0 103 124' width={size} height={size}>
|
||||
<path style='{outer === "none" ? "fill:none; stroke:none;" : outer || "fill:var(--prime)"}' d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41' />
|
||||
<path style='{(inner === "none") ? "fill:none; stroke:none;" : inner || "fill:white"}' d='M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: 3.5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
</style>
|
||||
@ -1,68 +0,0 @@
|
||||
<script>
|
||||
export let style;
|
||||
let show = false;
|
||||
|
||||
$: if (typeof document !== 'undefined') {
|
||||
if (show) document.body.classList.add('css-debug')
|
||||
else document.body.classList.remove('css-debug')
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--
|
||||
-----------------------------------------------
|
||||
simple css-debug
|
||||
-----------------------------------------------
|
||||
-->
|
||||
|
||||
<label {style}>
|
||||
<input type="checkbox" bind:checked={show}> grid
|
||||
</label>
|
||||
|
||||
{#if show}
|
||||
<div class='guide horizontal' style='top: calc(var(--nav-h) + var(--top-offset))' />
|
||||
<div class='guide vertical' style='left: var(--side-page)' />
|
||||
<div class='guide vertical' style='right: var(--side-page)' />
|
||||
<div class='guide vertical' style='left: var(--side-nav)' />
|
||||
<div class='guide vertical' style='right: var(--side-nav)' />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
label {
|
||||
position: fixed;
|
||||
padding: 0.3rem 1rem;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
opacity: 0.5;
|
||||
font: 300 1rem/1.7 var(--font-ui);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
input {
|
||||
display: none
|
||||
}
|
||||
|
||||
.guide {
|
||||
position: fixed;
|
||||
opacity: .5;
|
||||
z-index: 30
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
width: 100%;
|
||||
height: 0
|
||||
}
|
||||
|
||||
.vertical {
|
||||
width: 0;
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
:global(.css-debug *) {
|
||||
outline: 1px solid rgba(73, 177, 238, 0.25);
|
||||
}
|
||||
</style>
|
||||
@ -1,28 +0,0 @@
|
||||
<!--
|
||||
-----------------------------------------------
|
||||
svg svelte-isometry 1.0
|
||||
- first simple try to simplify iso-grafics
|
||||
-----------------------------------------------
|
||||
-->
|
||||
|
||||
<script>
|
||||
export let style = '';
|
||||
export let size = '';
|
||||
</script>
|
||||
|
||||
<svg class='svelte-iso' viewBox='0 0 128 128' width={size} height={size}>
|
||||
<polygon {style} points="107.94 92 107.94 36 64.01 8 20.06 35.99 20.06 92.01 64 120 107.94 92" />
|
||||
<polyline {style} points="107.94 36 64.01 64 64 120" />
|
||||
<line {style} x1="64.01" y1="64" x2="20.06" y2="35.99" />
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
.svelte-iso {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
</style>
|
||||
@ -1,81 +0,0 @@
|
||||
<!--
|
||||
NOTE
|
||||
from time to time <input type="color"> is crashing on chrome!
|
||||
no idea why?
|
||||
even with all extensions off
|
||||
-->
|
||||
{#if color}
|
||||
<input ref:prop class="color" on:input="change(this)" type="color" name={color} /> {/if}
|
||||
|
||||
{#if text}
|
||||
<input ref:prop on:input="change(this)" type="text" name={text} />
|
||||
{/if}
|
||||
|
||||
|
||||
<style>
|
||||
input,
|
||||
input:active,
|
||||
input:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
border: .1rem solid var(--text);
|
||||
padding: .8rem 1.4rem;
|
||||
font: 300 var(--code-fs)/1.7 var(--font-mono);
|
||||
color: var(--second);
|
||||
text-indent: 0;
|
||||
transition: all .2s var(--out-back);
|
||||
}
|
||||
|
||||
input[type=text]:focus {
|
||||
border-color: var(--flash);
|
||||
color: var(--flash);
|
||||
text-indent: .8rem;
|
||||
}
|
||||
|
||||
.color {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* input-color-reset */
|
||||
::-webkit-color-swatch {
|
||||
border: none
|
||||
}
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
::-moz-color-swatch,
|
||||
::-moz-focus-inner {
|
||||
border: none
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import CustomProps from '../utils/css-custom-properties.js';
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
this.cssprop = new CustomProps();
|
||||
let prop = this.refs.prop;
|
||||
prop.value = this.cssprop.get(prop.name);
|
||||
},
|
||||
|
||||
methods: {
|
||||
change(prop) {
|
||||
return this.cssprop.set(prop.name, prop.value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,49 +0,0 @@
|
||||
<button class='toast' on:click='reload()'>
|
||||
Site has been updated — tap to reload
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
background-color: var(--prime);
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
padding: 3.2rem 4rem;
|
||||
text-align: left;
|
||||
font: 300 var(--h6) var(--font-ui);
|
||||
z-index: 99;
|
||||
animation: slide-up 0.4s ease-out;
|
||||
}
|
||||
@keyframes slide-up {
|
||||
0% {
|
||||
transform: translate(0, 100%);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
reload() {
|
||||
window.location.reload();
|
||||
}
|
||||
},
|
||||
setup(Toast) {
|
||||
Toast.show = () => {
|
||||
const target = document.createDocumentFragment();
|
||||
new Toast({ target });
|
||||
|
||||
document.body.appendChild(target);
|
||||
Toast.show = () => {};
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in new issue