Переглянути джерело

feat(popover): Make the popover menus customizable.

j8
Hristo Terezov 6 роки тому
джерело
коміт
f439ad2999
3 змінених файлів з 34 додано та 9 видалено
  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 Переглянути файл

41
     top: -25px;
41
     top: -25px;
42
     width: 100%;
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 Переглянути файл

5
 .popupmenu {
5
 .popupmenu {
6
     min-width: 75px;
6
     min-width: 75px;
7
     text-align: left;
7
     text-align: left;
8
-    padding: 0;
8
+    padding: 0px;
9
+    width: 150px;
9
     white-space: nowrap;
10
     white-space: nowrap;
10
 
11
 
11
     &__item {
12
     &__item {
12
         list-style-type: none;
13
         list-style-type: none;
13
         height: 35px;
14
         height: 35px;
14
-
15
-        &:hover {
16
-            background-color: rgba(9, 30, 66, 0.04);
17
-        }
18
     }
15
     }
19
 
16
 
20
     // Link Appearance
17
     // Link Appearance
28
         width: 100%;
25
         width: 100%;
29
         cursor: pointer;
26
         cursor: pointer;
30
         padding: 0 5px;
27
         padding: 0 5px;
28
+        color: $popupMenuColor;
29
+
30
+        &:hover {
31
+            background-color: $popupMenuHoverBackground;
32
+            color: $popupMenuHoverColor;
33
+        }
31
 
34
 
32
         &.disabled {
35
         &.disabled {
33
             pointer-events: none;
36
             pointer-events: none;
62
                 top: 50%;
65
                 top: 50%;
63
                 transform: translate(0, -50%);
66
                 transform: translate(0, -50%);
64
                 width: 100%;
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
  * InlineDialogs.
106
  * InlineDialogs.
92
  */
107
  */
93
 ul.popupmenu {
108
 ul.popupmenu {
94
-    margin: -15px;
109
+    margin: -16px -24px;
95
 }
110
 }
96
 
111
 
97
 span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
112
 span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {

+ 6
- 3
css/themes/_light.scss Переглянути файл

80
 $feedbackCancelFontColor: #333;
80
 $feedbackCancelFontColor: #333;
81
 
81
 
82
 // Popover colors
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
 // Toolbar
90
 // Toolbar
88
 $secondaryToolbarBg: rgba(0, 0, 0, 0.5);
91
 $secondaryToolbarBg: rgba(0, 0, 0, 0.5);

Завантаження…
Відмінити
Зберегти