Mailspring/static/components/popover.less
Evan Morikawa 9eb36f5813 fix(popover): don't let popover overflow
Summary:
The popover class now will adjust itself until it fits within the window
frame. You don't see the intermediate state in the double render.

Test Plan: edgehill --test

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D1795
2015-07-23 19:42:16 -07:00

44 lines
1.2 KiB
Text

@import "ui-variables";
.popover-container {
display:inline-block;
position:relative;
}
.popover {
display: flex;
flex-direction: column;
max-height:400px;
background-color: @background-color;
border-radius: @border-radius-base;
overflow: hidden;
box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 -0.5px 0 rgba(0, 0, 0, 0.15), 0.5px 0 0 rgba(0, 0, 0, 0.15), -0.5px 0 0 rgba(0, 0, 0, 0.15), 0 4px 7px rgba(0,0,0,0.15), inset 0 0 1px rgba(0,0,0,0.5);
.menu {
z-index:1;
position: relative;
.content-container {
background: none;
}
.header-container {
border-top-left-radius: @border-radius-base;
border-top-right-radius: @border-radius-base;
background: none;
}
.footer-container {
border-bottom-left-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
background: none;
.item:last-child:hover {
border-bottom-left-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
}
}
.popover-pointer {
-webkit-mask-image: url('images/tooltip/tooltip-bg-pointer@2x.png');
background-color: @background-color;
}
}