fix: use css variables for bubble menu

sibiraj-s · May 13, 2024 · ad9e68e · ad9e68e
1 parent 6ed7575
commit ad9e68e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/projects/ngx-editor/src/lib/editor.component.scss b/projects/ngx-editor/src/lib/editor.component.scss
@@ -11,6 +11,11 @@
   --ngx-editor-menu-item-active-bg-color: #e8f0fe;
   --ngx-editor-seperator-color: #ccc;
 
+  --ngx-editor-bubble-bg-color: #000;
+  --ngx-editor-bubble-text-color: #fff;
+  --ngx-editor-bubble-item-hover-color: #636262;
+  --ngx-editor-bubble-seperator-color: #fff;
+
   --ngx-editor-focus-ring-color: #5e9ed6;
 }
 

diff --git a/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.scss b/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.scss
@@ -7,39 +7,39 @@
 :host {
   display: flex;
   flex-wrap: wrap;
-  background-color: #000;
-  color: white;
+  background-color: var(--ngx-editor-bubble-bg-color);
+  color: var(--ngx-editor-bubble-text-color);
   padding: 5px;
   border-radius: 4px;
 }
 
 .NgxBubbleMenu__Icon {
   all: unset;
   appearance: none;
-  height: 30px;
-  width: 30px;
-  transition: 0.3s ease-in-out;
-  border-radius: 2px;
+  height: var(--ngx-editor-icon-size);
+  width: var(--ngx-editor-icon-size);
+  transition: 0.2s ease-in-out;
+  border-radius: var(--ngx-editor-menu-item-border-radius);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
 
   &:hover {
-    background-color: #636262;
+    background-color: var(--ngx-editor-bubble-item-hover-color);
   }
 
   + .NgxBubbleMenu__Icon {
     margin-left: 5px;
   }
 
   &.NgxBubbleMenu__Icon--Active {
-    background-color: white;
-    color: black;
+    background-color: var(--ngx-editor-bubble-text-color);
+    color: var(--ngx-editor-bubble-bg-color);
   }
 }
 
 .NgxBubbleMenu__Seperator {
-  border-left: 1px solid white;
+  border-left: 1px solid var(--ngx-editor-seperator-color);
   margin: 0 5px;
 }