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-base/button-base.scss
Garrett Bear 46d970e362
15087: Add Button Base (#15998)
* 15087: Add Button Base
2022-10-04 09:55:51 -07:00

80 lines
1.2 KiB
SCSS

.mm-button {
position: relative;
height: 40px;
padding: 0;
border-radius: 999px;
cursor: pointer;
color: var(--color-text-default);
background-color: var(--brand-colors-grey-grey100);
vertical-align: middle;
user-select: none;
&:active,
&:hover {
color: var(--color-text-default);
}
&--block {
display: block;
width: 100%;
}
&__content {
height: 100%;
}
&--size-sm {
height: 32px;
}
&--size-md {
height: 40px;
}
&--size-lg {
height: 48px;
}
&--size-auto {
height: auto;
background-color: transparent;
border-radius: 0;
vertical-align: top;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
}
&--loading {
cursor: not-allowed;
}
&--loading &__content {
color: transparent;
}
&--disabled,
&:disabled {
opacity: 0.3;
cursor: not-allowed;
}
&__icon-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: spinner 1.2s linear infinite;
}
}
@keyframes spinner {
to { transform: translate(-50%, -50%) rotate(360deg); }
}