Add active styling to existing bangs while editing.
This commit is contained in:
parent
06a1ee5550
commit
d66b43e9fd
|
@ -118,6 +118,7 @@ export class PageMain extends Component<Props, State> {
|
|||
const {bangs, editorError} = this.state;
|
||||
|
||||
const availableBangs = bangs.map((bang) => {
|
||||
const active = bang.id === this.state.editorBang.id ? 'active' : '';
|
||||
const onClick = () => {
|
||||
this.setState({
|
||||
editorBang: {...bang},
|
||||
|
@ -126,7 +127,7 @@ export class PageMain extends Component<Props, State> {
|
|||
|
||||
return html`
|
||||
<li>
|
||||
<button onClick=${onClick}>
|
||||
<button class="${active}" onClick=${onClick}>
|
||||
${bang.name}<span class="bang-id">${bang.id}</span>
|
||||
</button>
|
||||
</li>
|
||||
|
|
|
@ -123,6 +123,11 @@
|
|||
padding: 16px;
|
||||
width: 100%;
|
||||
|
||||
&.active {
|
||||
border-color: var(--da-3);
|
||||
color: var(--da-3);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--da-3);
|
||||
border-color: var(--da-3);
|
||||
|
|
Loading…
Reference in New Issue