0.0.5 • Published 4 years ago

@unc-dsi/unc-push-button v0.0.5

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
4 years ago

<unc-push-button>

<unc-push-button> is a button with a pushed state.

<unc-push-button>Click Me!</unc-push-button>
<unc-push-button pushed>Already pushed</unc-push-button>

screenshot

Attributes / Properties

NameDescription
pushedState of the button
disabledTo disabled the button

Events

NameDescription
pushFire when the button is pushed : {detail: { pushed }}

Styling

NameDefault Lumo valueDefault valueDescription
--unc-push-button-border-color--lumo-shade-10pcthsla(214, 57%, 24%, 0.1)Border color around the button
--unc-push-button-border-radius--lumo-border-radius-l0.5remBorder radius around the button
--unc-push-button-hover-shadow--lumo-box-shadow-s"0 2px 4px -1px hsla(214, 53%, 23%, 0.16), 0 3px 12px -1px hsla(214, 50%, 22%, 0.26"Shadow when the button is hover
--unc-push-button-padding--lumo-space-m1remPadding inside the button
--unc-push-button-font-size--lumo-font-size-l1.125remFont size of the text inside the button
--unc-push-button-color--lumo-body-text-colorhsla(214, 40%, 16%, 0.94)Color of the text inside the button when is not pushed
--unc-push-button-bg-color--lumo-base-color#fffBackground color of the text inside the button when is not pushed
--unc-push-button-pushed-color--lumo-base-color#fffColor of the text inside the button when is pushed
--unc-push-button-pushed-bg-color--lumo-primary-colorhsla(214, 100%, 49%, 0.76)Background color of the text inside the button when is pushed
--unc-push-button-pushed-shadowN/Ainset 0px 0px var(--lumo-space-s, 0.5rem) var(--pushed-color)Shadow of the button when is pushed

License

Apache License 2.0