1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/button-icon/button-icon.scss
Garrett Bear 03af17747b
Feat/15088/add button icon (#16277)
* 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>
2022-11-09 13:57:21 -08:00

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;
}
}