Clean up styling for framework-* examples (#1970)
This commit is contained in:
parent
e49452325c
commit
ce8f8e06c0
20 changed files with 149 additions and 122 deletions
|
@ -8,12 +8,12 @@ export function PreactCounter({ children }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="counter">
|
<div class="counter">
|
||||||
<button onClick={subtract}>-</button>
|
<button onClick={subtract}>-</button>
|
||||||
<pre>{count}</pre>
|
<pre>{count}</pre>
|
||||||
<button onClick={add}>+</button>
|
<button onClick={add}>+</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="children">{children}</div>
|
<div class="counter-message">{children}</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@ export function Counter({ children }) {
|
||||||
<pre>{count}</pre>
|
<pre>{count}</pre>
|
||||||
<button onClick={add}>+</button>
|
<button onClick={add}>+</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="children">{children}</div>
|
<div className="counter-message">{children}</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@ export default function SolidCounter({ children }) {
|
||||||
<pre>{count()}</pre>
|
<pre>{count()}</pre>
|
||||||
<button onClick={add}>+</button>
|
<button onClick={add}>+</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="children">{children}</div>
|
<div class="counter-message">{children}</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,10 +13,10 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="counter">
|
<div class="counter">
|
||||||
<button on:click={subtract}>-</button>
|
<button on:click={subtract}>-</button>
|
||||||
<pre>{ count }</pre>
|
<pre>{ count }</pre>
|
||||||
<button on:click={add}>+</button>
|
<button on:click={add}>+</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="children">
|
<div class="counter-message">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<pre>{{ count }}</pre>
|
<pre>{{ count }}</pre>
|
||||||
<button @click="add()">+</button>
|
<button @click="add()">+</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="children">
|
<div class="counter-message">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -13,58 +13,39 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
|
||||||
---
|
---
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')}>
|
||||||
|
|
||||||
<style>
|
|
||||||
:global(:root) {
|
|
||||||
font-family: system-ui;
|
|
||||||
padding: 2em 0;
|
|
||||||
}
|
|
||||||
:global(.counter) {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
place-items: center;
|
|
||||||
font-size: 2em;
|
|
||||||
margin-top: 2em;
|
|
||||||
}
|
|
||||||
:global(.children) {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
<react.Counter client:visible>
|
<react.Counter client:visible>
|
||||||
<h1>Hello React!</h1>
|
<h1>Hello React!</h1>
|
||||||
<p>What's up?</p>
|
<p>What's up?</p>
|
||||||
</react.Counter>
|
</react.Counter>
|
||||||
|
|
||||||
<PreactCounter client:visible>
|
<PreactCounter client:visible>
|
||||||
<h1>Hello Preact!</h1>
|
<h1>Hello Preact!</h1>
|
||||||
</PreactCounter>
|
</PreactCounter>
|
||||||
|
|
||||||
<SolidCounter client:visible>
|
<SolidCounter client:visible>
|
||||||
<h1>Hello Solid!</h1>
|
<h1>Hello Solid!</h1>
|
||||||
</SolidCounter>
|
</SolidCounter>
|
||||||
|
|
||||||
<VueCounter client:visible>
|
<VueCounter client:visible>
|
||||||
<h1>Hello Vue!</h1>
|
<h1>Hello Vue!</h1>
|
||||||
</VueCounter>
|
</VueCounter>
|
||||||
|
|
||||||
<SvelteCounter client:visible>
|
<SvelteCounter client:visible>
|
||||||
<h1>Hello Svelte!</h1>
|
<h1>Hello Svelte!</h1>
|
||||||
</SvelteCounter>
|
</SvelteCounter>
|
||||||
|
|
||||||
<A />
|
<A />
|
||||||
|
|
||||||
<Renamed />
|
|
||||||
|
|
||||||
</main>
|
<Renamed />
|
||||||
|
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
21
examples/framework-multiple/src/styles/global.css
Normal file
21
examples/framework-multiple/src/styles/global.css
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-family: system-ui;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter {
|
||||||
|
display: grid;
|
||||||
|
font-size: 2em;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
margin-top: 2em;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter-message {
|
||||||
|
text-align: center;
|
||||||
|
}
|
11
examples/framework-preact/src/components/Counter.css
Normal file
11
examples/framework-preact/src/components/Counter.css
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
.counter {
|
||||||
|
display: grid;
|
||||||
|
font-size: 2em;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
margin-top: 2em;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter-message {
|
||||||
|
text-align: center;
|
||||||
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
import { h, Fragment } from 'preact';
|
import { h, Fragment } from 'preact';
|
||||||
import { useState } from 'preact/hooks';
|
import { useState } from 'preact/hooks';
|
||||||
|
import './Counter.css';
|
||||||
|
|
||||||
export default function Counter({ children }) {
|
export default function Counter({ children }) {
|
||||||
const [count, setCount] = useState(0);
|
const [count, setCount] = useState(0);
|
||||||
|
@ -8,12 +9,12 @@ export default function Counter({ children }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="counter">
|
<div class="counter">
|
||||||
<button onClick={subtract}>-</button>
|
<button onClick={subtract}>-</button>
|
||||||
<pre>{count}</pre>
|
<pre>{count}</pre>
|
||||||
<button onClick={add}>+</button>
|
<button onClick={add}>+</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="children">{children}</div>
|
<div class="counter-message">{children}</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,21 +11,13 @@ import Counter from '../components/Counter.tsx'
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<style>
|
<style>
|
||||||
:global(:root) {
|
html,
|
||||||
|
body {
|
||||||
font-family: system-ui;
|
font-family: system-ui;
|
||||||
padding: 2em 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
:global(.counter) {
|
body {
|
||||||
display: grid;
|
padding: 2rem;
|
||||||
font-size: 2em;
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
margin-top: 2em;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
:global(.children) {
|
|
||||||
display: grid;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
place-items: center;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
11
examples/framework-react/src/components/Counter.css
Normal file
11
examples/framework-react/src/components/Counter.css
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
.counter {
|
||||||
|
display: grid;
|
||||||
|
font-size: 2em;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
margin-top: 2em;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter-message {
|
||||||
|
text-align: center;
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import './Counter.css';
|
||||||
|
|
||||||
export default function Counter({ children, count: initialCount }) {
|
export default function Counter({ children, count: initialCount }) {
|
||||||
const [count, setCount] = useState(initialCount);
|
const [count, setCount] = useState(initialCount);
|
||||||
|
@ -12,7 +13,7 @@ export default function Counter({ children, count: initialCount }) {
|
||||||
<pre>{count}</pre>
|
<pre>{count}</pre>
|
||||||
<button onClick={add}>+</button>
|
<button onClick={add}>+</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="children">{children}</div>
|
<div className="counter-message">{children}</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,21 +14,13 @@ const someProps = {
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<style>
|
<style>
|
||||||
:global(:root) {
|
html,
|
||||||
|
body {
|
||||||
font-family: system-ui;
|
font-family: system-ui;
|
||||||
padding: 2em 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
:global(.counter) {
|
body {
|
||||||
display: grid;
|
padding: 2rem;
|
||||||
font-size: 2em;
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
margin-top: 2em;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
:global(.children) {
|
|
||||||
display: grid;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
place-items: center;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
11
examples/framework-solid/src/components/Counter.css
Normal file
11
examples/framework-solid/src/components/Counter.css
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
.counter {
|
||||||
|
display: grid;
|
||||||
|
font-size: 2em;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
margin-top: 3em;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter-message {
|
||||||
|
text-align: center;
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import { createSignal } from 'solid-js';
|
import { createSignal } from 'solid-js';
|
||||||
|
import './Counter.css';
|
||||||
|
|
||||||
export default function Counter({ children }) {
|
export default function Counter({ children }) {
|
||||||
const [count, setCount] = createSignal(0);
|
const [count, setCount] = createSignal(0);
|
||||||
|
|
|
@ -6,19 +6,14 @@ import Counter from '../components/Counter.jsx';
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<style global>
|
<style>
|
||||||
:root {
|
html,
|
||||||
|
body {
|
||||||
font-family: system-ui;
|
font-family: system-ui;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
.counter {
|
body {
|
||||||
display: grid;
|
padding: 2rem;
|
||||||
font-size: 2em;
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
margin-top: 3em;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
.counter-message {
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -15,6 +15,19 @@
|
||||||
<pre>{ count }</pre>
|
<pre>{ count }</pre>
|
||||||
<button on:click={add}>+</button>
|
<button on:click={add}>+</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="children">
|
<div class="message">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.counter{
|
||||||
|
display: grid;
|
||||||
|
font-size: 2em;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
margin-top: 2em;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
.message {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -12,21 +12,13 @@ import Counter from '../components/Counter.svelte'
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<style>
|
<style>
|
||||||
:global(:root) {
|
html,
|
||||||
|
body {
|
||||||
font-family: system-ui;
|
font-family: system-ui;
|
||||||
padding: 2em 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
:global(.counter) {
|
body {
|
||||||
display: grid;
|
padding: 2rem;
|
||||||
font-size: 2em;
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
margin-top: 2em;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
:global(.children) {
|
|
||||||
display: grid;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
place-items: center;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<pre>{{ count }}</pre>
|
<pre>{{ count }}</pre>
|
||||||
<button @click="add()">+</button>
|
<button @click="add()">+</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="children">
|
<div class="counter-message">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -25,3 +25,16 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.counter {
|
||||||
|
display: grid;
|
||||||
|
font-size: 2em;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
margin-top: 2em;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
.counter-message {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -12,21 +12,13 @@ import Counter from '../components/Counter.vue'
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<style>
|
<style>
|
||||||
:global(:root) {
|
html,
|
||||||
|
body {
|
||||||
font-family: system-ui;
|
font-family: system-ui;
|
||||||
padding: 2em 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
:global(.counter) {
|
body {
|
||||||
display: grid;
|
padding: 2rem;
|
||||||
font-size: 2em;
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
margin-top: 2em;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
:global(.children) {
|
|
||||||
display: grid;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
place-items: center;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
Loading…
Add table
Reference in a new issue