mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
03af17747b
* 15088: add button icon * button icon story updates * add primary type * update button icon docs * add test * button icon updates * button icon and test updates * button icon border radius and test update * remove padding prop * button icon updates * Update ui/components/component-library/button-icon/button-icon.stories.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/button-icon/button-icon.stories.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/button-icon/button-icon.stories.js Co-authored-by: George Marshall <george.marshall@consensys.net> * add aria label for storybook demo Co-authored-by: George Marshall <george.marshall@consensys.net>
33 lines
651 B
SCSS
33 lines
651 B
SCSS
.mm-button-icon {
|
|
--button-icon-size: var(--size, 24px);
|
|
--button-icon-opacity-hover: 0.5; // TODO: replace with design tokens
|
|
--button-icon-opacity-disabled: 0.3; // TODO: replace with design tokens
|
|
|
|
height: var(--button-icon-size);
|
|
width: var(--button-icon-size);
|
|
padding: 0;
|
|
cursor: pointer;
|
|
|
|
// ButtonIcon default states
|
|
&:active,
|
|
&:hover {
|
|
opacity: var(--button-icon-opacity-hover);
|
|
}
|
|
|
|
&--disabled,
|
|
&:disabled {
|
|
opacity: var(--button-icon-opacity-disabled);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// ButtonIcon Sizes
|
|
&--size-sm {
|
|
--button-icon-size: 24px;
|
|
}
|
|
|
|
&--size-lg {
|
|
--button-icon-size: 32px;
|
|
}
|
|
}
|
|
|