jiti-meet/css/_jitsi_popover.scss

93 lines
2.2 KiB
SCSS
Raw Normal View History

.jitsipopover {
position: absolute;
top: 0;
left: 0;
z-index: $jitsipopoverZ;
display: table;
visibility: hidden;
max-width: 300px;
min-width: 100px;
text-align: left;
2016-10-18 09:41:35 +00:00
color: $popoverFontColor;
background-color: $popoverBg;
background-clip: padding-box;
2017-01-26 23:04:29 +00:00
border-radius: $borderRadius;
/*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
/*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/
white-space: normal;
2016-11-23 10:32:59 +00:00
margin-top: -$popoverMenuPadding;
&__menu-padding,
&__menu-padding-top {
2016-10-13 13:16:44 +00:00
position: absolute;
width: 100px;
}
/**
* Invisible padding is added to the bottom of the popover to extend its
* height so it does not close when moving the mouse from the trigger
* element towards the popover itself.
*/
&__menu-padding {
2016-11-23 10:32:59 +00:00
bottom: -$popoverMenuPadding;
height: $popoverMenuPadding;
}
/**
* Invisible padding is added to the top of the popover to extend its height
* so it does not close automatically when its height is shrunk from showing
* less video statistics.
*/
&__menu-padding-top {
height: 20px;
top: -20px;
2016-10-13 13:16:44 +00:00
}
2016-10-19 14:57:16 +00:00
&__showmore {
2016-10-13 13:16:44 +00:00
display: block;
text-align: center;
width: 90px;
margin: 10px auto;
}
2016-10-20 10:43:05 +00:00
> .arrow {
2016-10-13 13:16:44 +00:00
position: absolute;
display: block;
2016-10-20 10:43:05 +00:00
left: 50%;
bottom: -5px;
margin-left: -5px;
2016-10-13 13:16:44 +00:00
width: 0;
height: 0;
border-color: transparent;
2016-10-20 10:43:05 +00:00
border-top-color: $popoverBg;
2016-10-13 13:16:44 +00:00
border-style: solid;
2016-10-20 10:43:05 +00:00
border-width: 5px;
2016-10-13 13:16:44 +00:00
border-bottom-width: 0;
}
/**
* Override default "top" styles to support popovers appearing from the
* left of the popover trigger element.
*/
&.left {
margin-left: -$popoverMenuPadding;
margin-top: 0;
.arrow {
border-color: transparent transparent transparent $popoverBg;
border-width: 5px 0px 5px 5px;
margin-left: 0;
margin-top: -5px;
}
.jitsipopover {
&__menu-padding {
bottom: 0;
height: 100%;
width: $popoverMenuPadding;
}
}
}
}