Browse Source

feat(popover): Make the popover menus customizable.

master
Hristo Terezov 5 years ago
parent
commit
f439ad2999
3 changed files with 34 additions and 9 deletions
  1. 7
    0
      css/_popover.scss
  2. 21
    6
      css/_popup_menu.scss
  3. 6
    3
      css/themes/_light.scss

+ 7
- 0
css/_popover.scss View File

@@ -41,3 +41,10 @@
41 41
     top: -25px;
42 42
     width: 100%;
43 43
 }
44
+
45
+.popover {
46
+    background-color: $popoverBg;
47
+    border-radius: 3px;
48
+    margin: -16px -24px;
49
+    padding: 16px 24px;
50
+}

+ 21
- 6
css/_popup_menu.scss View File

@@ -5,16 +5,13 @@
5 5
 .popupmenu {
6 6
     min-width: 75px;
7 7
     text-align: left;
8
-    padding: 0;
8
+    padding: 0px;
9
+    width: 150px;
9 10
     white-space: nowrap;
10 11
 
11 12
     &__item {
12 13
         list-style-type: none;
13 14
         height: 35px;
14
-
15
-        &:hover {
16
-            background-color: rgba(9, 30, 66, 0.04);
17
-        }
18 15
     }
19 16
 
20 17
     // Link Appearance
@@ -28,6 +25,12 @@
28 25
         width: 100%;
29 26
         cursor: pointer;
30 27
         padding: 0 5px;
28
+        color: $popupMenuColor;
29
+
30
+        &:hover {
31
+            background-color: $popupMenuHoverBackground;
32
+            color: $popupMenuHoverColor;
33
+        }
31 34
 
32 35
         &.disabled {
33 36
             pointer-events: none;
@@ -62,6 +65,18 @@
62 65
                 top: 50%;
63 66
                 transform: translate(0, -50%);
64 67
                 width: 100%;
68
+
69
+                &::-webkit-slider-runnable-track {
70
+                    background-color: $popupSliderColor;
71
+                }
72
+
73
+                &::-moz-range-track {
74
+                    background-color: $popupSliderColor;
75
+                }
76
+
77
+                &::-ms-fill-lower {
78
+                    background-color: $popupSliderColor;
79
+                }
65 80
             }
66 81
         }
67 82
     }
@@ -91,7 +106,7 @@
91 106
  * InlineDialogs.
92 107
  */
93 108
 ul.popupmenu {
94
-    margin: -15px;
109
+    margin: -16px -24px;
95 110
 }
96 111
 
97 112
 span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {

+ 6
- 3
css/themes/_light.scss View File

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

Loading…
Cancel
Save