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
Monalisha Mishra b46501cc0d
migration of button icon to use TS box version (#20227)
* migration of button icon to use TS box version

* fixed lint issues

* Some convention and linting updates

* README fixes

* Updating snapshot

* snapshot updates

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
2023-08-03 12:23:47 -07:00

45 lines
747 B
SCSS

.mm-button-icon {
--button-icon-size: var(--size, 24px);
height: var(--button-icon-size);
width: var(--button-icon-size);
min-width: var(--button-icon-size); // fixes width for flexbox
padding: 0;
cursor: pointer;
// ButtonIcon default states
&:hover {
background-color: var(--color-background-hover);
}
&:active {
background-color: var(--color-background-pressed);
}
&--disabled,
&:disabled {
opacity: var(--opacity-disabled);
cursor: not-allowed;
&:hover,
&:active {
background-color: transparent;
}
}
// ButtonIcon Sizes
&--size-sm {
--button-icon-size: 24px;
}
&--size-md {
--button-icon-size: 28px;
}
&--size-lg {
--button-icon-size: 32px;
}
}