Skip to content

Instantly share code, notes, and snippets.

@JanMiksovsky

JanMiksovsky/index.html

Created December 3, 2018 21:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JanMiksovsky/910f4909fe9c936fa178760e428ba350 to your computer and use it in GitHub Desktop.
Save JanMiksovsky/910f4909fe9c936fa178760e428ba350 to your computer and use it in GitHub Desktop.
Download ZIP
Styling sugar example
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Custom styling example</title>
<style id="customButtonStyle">
#inner {
background: white;
border-radius: 0.5em;
border: 2px solid rgba(255, 0, 0, 0.2);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
padding: 0.5em 1em;
}
#inner:hover {
background: pink;
}
#inner:active {
background: red;
color: white;
}
</style>
<script type="module">
import Button from 'https://unpkg.com/elix@3.4.0/src/Button.js';
import { defineWithStyles } from './customize.js';
defineWithStyles('custom-button', Button, customButtonStyle);
</script>
</head>
<body>
<elix-button>Normal</elix-button>
<custom-button>Custom</custom-button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment