mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-01 13:47:06 +01:00
2326195324
* Add DS Popover component * Update to Popover story * make role a prop with PopoverRole enum * update to Hiro design changes * fix snapshot * Update ui/components/component-library/popover/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/popover/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * small story changes and removal of unused forwardRef * add more test coverage * add more story demos * add more popover demos * if escKeyClose is passed then it will add event listener * isPortal story * add if statement * replace Text with Box for now * add esc test coverage * add README docs * fix readme and onEscKeyClose * onEscKeyClose to onPressEscKey * Update ui/components/component-library/popover/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * change conditional on useEffect --------- Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> Co-authored-by: George Marshall <george.marshall@consensys.net>
71 lines
1.3 KiB
SCSS
71 lines
1.3 KiB
SCSS
|
|
.mm-popover {
|
|
box-shadow: var(--shadow-size-md) var(--color-shadow-default);
|
|
|
|
/* Hide the popper when the reference is hidden */
|
|
&--reference-hidden[data-popper-reference-hidden="true"] {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
|
|
> .mm-popover__arrow::before {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mm-popover__arrow,
|
|
.mm-popover__arrow::before {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: inherit;
|
|
}
|
|
|
|
.mm-popover__arrow {
|
|
width: 40px;
|
|
height: 40px;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.mm-popover__arrow::before {
|
|
display: block;
|
|
background-color: inherit;
|
|
border: 1px solid;
|
|
border-left-color: inherit;
|
|
border-top-color: inherit;
|
|
border-bottom-color: transparent;
|
|
border-right-color: transparent;
|
|
visibility: visible;
|
|
content: '';
|
|
transform: rotate(45deg);
|
|
border-radius: 2px 0 0 0;
|
|
}
|
|
|
|
.mm-popover[data-popper-placement^='top'] > .mm-popover__arrow {
|
|
bottom: -20px;
|
|
|
|
&::before {
|
|
transform: rotate(-135deg);
|
|
}
|
|
}
|
|
|
|
.mm-popover[data-popper-placement^='bottom'] > .mm-popover__arrow {
|
|
top: -20px;
|
|
}
|
|
|
|
.mm-popover[data-popper-placement^='left'] > .mm-popover__arrow {
|
|
right: -20px;
|
|
|
|
&::before {
|
|
transform: rotate(135deg);
|
|
}
|
|
}
|
|
|
|
.mm-popover[data-popper-placement^='right'] > .mm-popover__arrow {
|
|
left: -20px;
|
|
|
|
&::before {
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|