Files
scratch-gui/src/components/menu/menu.css
T
Ray Schamp f116363403 Add dividers
It's a cleaner API IMO but ended up being a messy implementation...
2018-04-12 15:13:43 -04:00

65 lines
1.1 KiB
CSS

@import "../../css/colors.css";
.menu {
position: absolute;
border: 1px solid $ui-black-transparent;
border-radius: 0 0 4px 4px;
background-color: $motion-primary;
padding: 0;
margin: 0;
max-width: 260px;
overflow: visible;
color: $ui-white;
font-weight: normal;
}
.menu.left {
right: 0;
}
.menu.right {
left: 0;
}
.menu-item {
display: block;
line-height: 34px;
white-space: nowrap;
padding: 0 10px;
}
.menu-item.active,
.menu-item:hover {
background-color: $ui-black-transparent;
}
.menu-section {
border-top: 1px solid $ui-black-transparent;
}
$arrow-border-width: 14px;
.with-arrow {
margin-top: $arrow-border-width;
border-radius: 5px;
overflow: visible;
}
.with-arrow:before {
display: block;
position: absolute;
top: -$arrow-border-width / 2;
right: 10%;
transform: rotate(45deg);
border-top: 1px solid $ui-black-transparent;
border-left: 1px solid $ui-black-transparent;
border-radius: 5px;
background-color: $motion-primary;
width: $arrow-border-width;
height: $arrow-border-width;
content: "";
}