BSS is a well known library among Mithril's lovers.
It is simpler way to do CSS in Javascript directly on the elements you're styling.
In fine, I use BSS to style elements and I use wickedElements to create 'custom elements' which does not need any polyfill
The previous buttons are generated with the following code :
<p><btn-orange-100></btn-orange-100></p>
<p><btn-orange-90></btn-orange-90></p>
<p><btn-orange-75></btn-orange-75></p>
<p><btn-orange-50></btn-orange-50></p>
const { define } = wickedElements
const btn_orange = (opacity) => opacity <= 1 && b`
color : red;
background: rgba(255, 130, 0, ${opacity})
color: white;
border: 1px solid rgba(255, 130, 0, 0.4);
padding: 10px;
box-shadow: 3px 4px 8 rgba(255, 130, 0, ${opacity});
letter-spacing: 2px;
cursor: pointer;
`.$hover(b`box-shadow: unset`);
const button = (o) => `
<button class=${btn_orange(o)}>Custom ${o * 100}</button>
`
define("btn-orange-100", {
connected () {
this.element.innerHTML = button(1);
}
})
define("btn-orange-90", {
connected () {
this.element.innerHTML = button(.9);
}
})
define("btn-orange-75", {
connected () {
this.element.innerHTML = button(.75);
}
})
define("btn-orange-50", {
connected () {
this.element.innerHTML = button(.5);
}
})
You can play with it here : CustomButtons
Top comments (0)