forked from github-starred/komodo
148 lines
2.1 KiB
SCSS
148 lines
2.1 KiB
SCSS
@use "../../../style/colors.scss" as c;
|
|
|
|
.MenuContainer {
|
|
position: relative;
|
|
height: fit-content;
|
|
width: fit-content;
|
|
}
|
|
|
|
.MenuBackground {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 20;
|
|
}
|
|
|
|
.Menu {
|
|
white-space: nowrap;
|
|
padding: 0.5rem 1rem;
|
|
position: absolute;
|
|
display: grid;
|
|
width: fit-content;
|
|
/* border: solid 1px rgba(2, 107, 121, 0.25); */
|
|
background-color: c.$grey;
|
|
z-index: 21;
|
|
border-radius: 0.25rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
$anim-time: 350ms;
|
|
|
|
.Enter {
|
|
animation-name: enter;
|
|
animation-duration: $anim-time;
|
|
animation-timing-function: ease;
|
|
}
|
|
|
|
.Exit {
|
|
animation-name: exit;
|
|
animation-duration: $anim-time;
|
|
animation-timing-function: ease;
|
|
}
|
|
|
|
.ShortEnter {
|
|
animation-name: enter;
|
|
animation-duration: $anim-time;
|
|
animation-timing-function: ease;
|
|
}
|
|
|
|
.ShortExit {
|
|
animation-name: exit;
|
|
animation-duration: $anim-time;
|
|
animation-timing-function: ease;
|
|
}
|
|
|
|
@keyframes enter {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes exit {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.Left {
|
|
right: 100%;
|
|
top: 0px;
|
|
/* margin-right: 0.5rem; */
|
|
}
|
|
|
|
.LeftCenter {
|
|
left: 0px;
|
|
top: 50%;
|
|
transform: translate(-100%, -50%);
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.Right {
|
|
left: 100%;
|
|
top: 0px;
|
|
/* margin-left: 0.5rem; */
|
|
}
|
|
|
|
.RightCenter {
|
|
left: 100%;
|
|
top: 50%;
|
|
margin-left: 0.25rem;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.Bottom {
|
|
top: 100%;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.BottomRight {
|
|
right: 0px;
|
|
top: 100%;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.BottomCenter {
|
|
top: 100%;
|
|
left: 50%;
|
|
margin-top: 0.25rem;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.HoverMenuTarget {
|
|
position: relative;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
}
|
|
|
|
.HoverMenu {
|
|
position: absolute;
|
|
padding: 0rem 0.5rem;
|
|
background-color: c.$grey;
|
|
border-radius: 0.25rem;
|
|
z-index: 30;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.CenterMenuContainer {
|
|
position: fixed;
|
|
z-index: 200;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
// place-items: start center;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.SelectorItem:hover {
|
|
background-color: c.$lightgrey;
|
|
}
|