@nomios/web-uikit
Version:
Nomios' living web UIKit
76 lines (65 loc) • 1.76 kB
CSS
/*
Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/
.menu {
box-sizing: border-box;
position: absolute;
top: 100%;
width: 100%;
z-index: 1;
margin-top: 0.5rem;
background-color: #fff;
box-shadow: 0 1.2rem 1.4rem 0 rgba(75, 69, 61, 0.22)
}
.menu.left {
margin-top: calc(0.5rem * 2 + calc(1.2rem / 2))
}
.menu.right {
margin-top: calc(0.5rem * 2 + calc(1.2rem / 2))
}
.menu.center {
margin-top: calc(0.5rem * 2 + calc(1.2rem / 2))
}
.menu.left::before {
content: "";
position: absolute;
top: calc(1.2rem / 2 * -1);
width: 1.2rem;
height: 1.2rem;
z-index: -1;
transform: rotateZ(45deg);
border: 1px solid rgba(75, 69, 61, 0.08);
background-color: #fff;
}
.menu.right::before {
content: "";
position: absolute;
top: calc(1.2rem / 2 * -1);
width: 1.2rem;
height: 1.2rem;
z-index: -1;
transform: rotateZ(45deg);
border: 1px solid rgba(75, 69, 61, 0.08);
background-color: #fff;
}
.menu.center::before {
content: "";
position: absolute;
top: calc(1.2rem / 2 * -1);
width: 1.2rem;
height: 1.2rem;
z-index: -1;
transform: rotateZ(45deg);
border: 1px solid rgba(75, 69, 61, 0.08);
background-color: #fff;
}
.menu.left::before {
left: 1.5rem;
}
.menu.right::before {
right: 1.5rem;
}
.menu.center::before {
left: 50%;
transform: translateX(-50%) rotateZ(45deg);
}