feat(popover): Make the popover menus customizable.

This commit is contained in:
Hristo Terezov 2019-03-11 11:43:33 +00:00
parent 81d4f694b7
commit f439ad2999
3 changed files with 34 additions and 9 deletions

View File

@ -41,3 +41,10 @@
top: -25px; top: -25px;
width: 100%; width: 100%;
} }
.popover {
background-color: $popoverBg;
border-radius: 3px;
margin: -16px -24px;
padding: 16px 24px;
}

View File

@ -5,16 +5,13 @@
.popupmenu { .popupmenu {
min-width: 75px; min-width: 75px;
text-align: left; text-align: left;
padding: 0; padding: 0px;
width: 150px;
white-space: nowrap; white-space: nowrap;
&__item { &__item {
list-style-type: none; list-style-type: none;
height: 35px; height: 35px;
&:hover {
background-color: rgba(9, 30, 66, 0.04);
}
} }
// Link Appearance // Link Appearance
@ -28,6 +25,12 @@
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
padding: 0 5px; padding: 0 5px;
color: $popupMenuColor;
&:hover {
background-color: $popupMenuHoverBackground;
color: $popupMenuHoverColor;
}
&.disabled { &.disabled {
pointer-events: none; pointer-events: none;
@ -62,6 +65,18 @@
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
width: 100%; width: 100%;
&::-webkit-slider-runnable-track {
background-color: $popupSliderColor;
}
&::-moz-range-track {
background-color: $popupSliderColor;
}
&::-ms-fill-lower {
background-color: $popupSliderColor;
}
} }
} }
} }
@ -91,7 +106,7 @@
* InlineDialogs. * InlineDialogs.
*/ */
ul.popupmenu { ul.popupmenu {
margin: -15px; margin: -16px -24px;
} }
span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover { span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {

View File

@ -80,9 +80,12 @@ $errorColor: #c61600;
$feedbackCancelFontColor: #333; $feedbackCancelFontColor: #333;
// Popover colors // Popover colors
$popoverBg: #000; $popoverBg: initial;
$popoverFontColor: #ffffff; $popoverFontColor: #ffffff !important;
$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2); $popupMenuColor: #ffffff !important;
$popupMenuHoverColor: #ffffff !important;
$popupMenuHoverBackground: rgba(255, 255, 255, 0.1);
$popupSliderColor: #0376da;
// Toolbar // Toolbar
$secondaryToolbarBg: rgba(0, 0, 0, 0.5); $secondaryToolbarBg: rgba(0, 0, 0, 0.5);