muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-05-01 23:56:41 +07:00
Code Packages Activity Actions

made better profile popups

Browse source
This commit is contained in:
Fedor Katurov 2022-07-20 15:06:29 +07:00
parent 141b9c0d60
commit 0564fe29e2
5 changed files with 94 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/components/menu/MenuButton/styles.module.scss
View file

@ -12,53 +12,44 @@
box-sizing: border-box;
z-index: 12;
border-radius: $radius;
visibility: hidden;
pointer-events: none;
touch-action: none;
&::after {
content: ' ';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent lighten($menu_bg, 6%) transparent;
position: absolute;
}
&.bottom-end::after {
top: -11px;
right: 10px;
}
&.bottom-start::after {
top: -11px;
left: 10px;
}
&.bottom::after {
top: -11px;
left: 50%;
margin-left: -15px;
}
&.top-end::after {
border-width: 10px 10px 0 10px;
border-color: darken($menu_bg, 8%) transparent transparent transparent;
bottom: -11px;
}
&.top-start::after {
border-width: 10px 10px 0 10px;
border-color: darken($menu_bg, 8%) transparent transparent transparent;
top: auto;
bottom: -11px;
left: 10px;
}
&.top::after {
border-width: 10px 10px 0 10px;
border-color: darken($menu_bg, 8%) transparent transparent transparent;
top: auto;
bottom: -11px;
left: 50%;
margin-left: -15px;
&.visible {
visibility: visible;
pointer-events: all;
touch-action: initial;
}
}
.arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
[data-popper-placement*='bottom'] & {
border-width: 0 10px 10px 10px;
border-color: transparent transparent lighten($menu_bg, 6%) transparent;
top: -10px;
}
[data-popper-placement*='top'] & {
border-width: 10px 10px 0 10px;
border-color: lighten($menu_bg, 6%) transparent transparent transparent;
bottom: -10px;
}
[data-popper-placement*='right'] & {
border-width: 10px 10px 10px 0;
border-color: transparent lighten($menu_bg, 6%) transparent transparent;
left: -10px;
}
[data-popper-placement*='left'] & {
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent lighten($menu_bg, 6%);
right: -10px;
}
}