add button component and some basic styling
This commit is contained in:
parent
19f4f303eb
commit
8124d2c066
|
@ -8,8 +8,8 @@ function createWindow() {
|
||||||
|
|
||||||
// Create the browser window.
|
// Create the browser window.
|
||||||
mainWindow = new BrowserWindow({
|
mainWindow = new BrowserWindow({
|
||||||
height: 600,
|
height: 900,
|
||||||
width: 800,
|
width: 1600,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
nodeIntegration: false,
|
nodeIntegration: false,
|
||||||
},
|
},
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
// be executed in the renderer process for that window.
|
// be executed in the renderer process for that window.
|
||||||
// All of the Node.js APIs are available in this process.
|
// All of the Node.js APIs are available in this process.
|
||||||
|
|
||||||
import App from './renderer/view/App.svelte';
|
import App from './renderer/App.svelte';
|
||||||
|
|
||||||
(() =>
|
(() =>
|
||||||
new App({
|
new App({
|
||||||
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
<script>
|
||||||
|
import Button from 'atoms/Button.svelte';
|
||||||
|
|
||||||
|
let text = 'tach';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--color-white: #fff;
|
||||||
|
--color-black: #000;
|
||||||
|
|
||||||
|
--color-background: #242424;
|
||||||
|
--color-foreground: #3a3a3a;
|
||||||
|
--color-accent: #454585;
|
||||||
|
--color-accent-light: #6969ac;
|
||||||
|
|
||||||
|
--color-text: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(*) {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(body) {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--color-text);
|
||||||
|
background-color: var(--color-background);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>Hello World</h1>
|
||||||
|
<p>{ text }</p>
|
||||||
|
<Button>inhalt</Button>
|
||||||
|
</main>
|
|
@ -0,0 +1,15 @@
|
||||||
|
<button class="button">
|
||||||
|
<slot></slot>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.button {
|
||||||
|
border: none;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:focus {
|
||||||
|
outline-color: var(--color-accent-light);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,14 +0,0 @@
|
||||||
<main>
|
|
||||||
<h1>Hello World</h1>
|
|
||||||
<p>{ text }</p>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
let text = 'tach';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
h1 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -8,7 +8,5 @@ module.exports = {
|
||||||
module: {
|
module: {
|
||||||
rules: require('./webpack.rules'),
|
rules: require('./webpack.rules'),
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: require('./webpack.resolve'),
|
||||||
extensions: ['.js', '.ts', '.html'],
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,4 +3,5 @@ module.exports = {
|
||||||
module: {
|
module: {
|
||||||
rules: require('./webpack.rules'),
|
rules: require('./webpack.rules'),
|
||||||
},
|
},
|
||||||
|
resolve: require('./webpack.resolve'),
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
extensions: ['.js', '.ts', '.svelte'],
|
||||||
|
alias: {
|
||||||
|
atoms: path.resolve(__dirname, 'src/renderer/components/1-atoms'),
|
||||||
|
molecules: path.resolve(__dirname, 'src/renderer/components/2-molecules'),
|
||||||
|
},
|
||||||
|
};
|
Loading…
Reference in New Issue