pinafore/routes/_components/IconButton.html

62 lines
1.3 KiB
HTML
Raw Normal View History

2018-01-28 20:51:48 +00:00
{{#if pressable}}
<button type="button"
aria-label="{{label}}"
aria-pressed="{{!!pressed}}"
class="icon-button {{pressed ? 'pressed' : ''}} {{big ? 'big-icon' : ''}}"
2018-02-19 18:34:36 +00:00
disabled="{{disabled}}"
on:click
>
2018-01-28 20:51:48 +00:00
<svg>
<use xlink:href="{{href}}" />
</svg>
</button>
{{else}}
<button type="button"
aria-label="{{label}}"
class="icon-button {{big ? 'big-icon' : ''}}"
2018-02-19 18:34:36 +00:00
disabled="{{disabled}}"
on:click
>
2018-01-28 20:51:48 +00:00
<svg>
<use xlink:href="{{href}}" />
</svg>
</button>
{{/if}}
<style>
button.icon-button {
padding: 6px 10px;
background: none;
border: none;
}
button.icon-button svg {
width: 24px;
height: 24px;
fill: var(--action-button-fill-color);
}
button.icon-button.big-icon svg {
width: 32px;
height: 32px;
}
button.icon-button:hover svg {
fill: var(--action-button-fill-color-hover);
}
button.icon-button:active svg {
fill: var(--action-button-fill-color-active);
}
button.icon-button.pressed svg {
fill: var(--action-button-fill-color-pressed)
}
button.icon-button.pressed:hover svg {
fill: var(--action-button-fill-color-pressed-hover);
}
button.icon-button.pressed:active svg {
fill: var(--action-button-fill-color-pressed-active);
}
</style>