1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-29 15:50:28 +01:00
metamask-extension/ui/components/component-library/button-base/button-base.scss
Garrett Bear de4cf0a7e5
Fix/button base ellipsis support (#18205)
* ButtonBase ellipsis update

Update ui/components/multichain/account-picker/index.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

Update ui/components/multichain/account-picker/index.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

Update ui/components/multichain/account-picker/index.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

Update ui/components/multichain/account-picker/index.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* buttonbase updates to fix ellipsis

* multichain support

* remove multichain

* code cleanup

* clean up

* component clean up

* span update

* fix snapshots

* fix snapshot

* Updating ButtonBase to reduce html to a minimum but ensure all functionality still works (#18210)

* fix color and disable

* remove unused css

* Update ui/components/component-library/button-base/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* fix e2e test from button update

* update e2e test from button base update

---------

Co-authored-by: David Walsh <davidwalsh83@gmail.com>
Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-03-21 19:19:49 -07:00

55 lines
807 B
SCSS

.mm-button-base {
position: relative;
height: 40px;
padding: 0; // TODO: remove once https://github.com/MetaMask/metamask-extension/pull/17006 is merged
cursor: pointer;
vertical-align: middle;
user-select: none;
&--block {
display: block;
width: 100%;
}
&--ellipsis {
max-width: 100%;
}
&--size-sm {
height: 32px;
}
&--size-md {
height: 40px;
}
&--size-lg {
height: 48px;
}
&--loading {
cursor: not-allowed;
}
&--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); }
}