2022-11-09 22:57:21 +01:00
|
|
|
.mm-button-icon {
|
|
|
|
--button-icon-size: var(--size, 24px);
|
|
|
|
|
|
|
|
height: var(--button-icon-size);
|
|
|
|
width: var(--button-icon-size);
|
|
|
|
padding: 0;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
// ButtonIcon default states
|
2023-07-13 22:22:40 +02:00
|
|
|
|
2022-11-09 22:57:21 +01:00
|
|
|
&:hover {
|
2023-07-13 22:22:40 +02:00
|
|
|
background-color: var(--color-background-hover);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
background-color: var(--color-background-pressed);
|
2022-11-09 22:57:21 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
&--disabled,
|
|
|
|
&:disabled {
|
2023-07-13 22:22:40 +02:00
|
|
|
opacity: var(--opacity-disabled);
|
2022-11-09 22:57:21 +01:00
|
|
|
cursor: not-allowed;
|
2023-07-13 22:22:40 +02:00
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:active {
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
2022-11-09 22:57:21 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// ButtonIcon Sizes
|
|
|
|
&--size-sm {
|
|
|
|
--button-icon-size: 24px;
|
|
|
|
}
|
|
|
|
|
2023-07-13 22:22:40 +02:00
|
|
|
&--size-md {
|
|
|
|
--button-icon-size: 28px;
|
|
|
|
}
|
|
|
|
|
2022-11-09 22:57:21 +01:00
|
|
|
&--size-lg {
|
|
|
|
--button-icon-size: 32px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|