fix: set correct classes for icons

sibiraj-s · May 13, 2024 · 2352039 · 2352039
1 parent b4604dd
commit 2352039
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 19 deletions.
diff --git a/projects/ngx-editor/src/lib/editor.component.scss b/projects/ngx-editor/src/lib/editor.component.scss
@@ -104,37 +104,39 @@ $menubar-text-padding: 0 $menu-item-spacing;
   padding: $menubar-padding;
   cursor: default;
   background-color: white;
+  gap: 0.25rem 0.1rem;
 }
 
 .NgxEditor__MenuItem {
-  border-radius: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   flex-shrink: 0;
 
-  &:hover {
-    background-color: $menu-item-hover-bg-color;
+  &.NgxEditor__MenuItem--IconContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  &.NgxEditor__MenuItem--Icon {
+  .NgxEditor__MenuItem--Icon {
+    @include button-reset;
     height: $icon-size;
     width: $icon-size;
-    transition: 0.3s ease-in-out;
+    transition: 0.2s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $menu-item-border-radius;
 
     & + .NgxEditor__MenuItem--Icon {
       margin-left: 2px;
     }
-  }
 
-  .NgxEditor__MenuItem--IconContainer {
-    @include button-reset;
-    display: flex;
-    height: 100%;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
+    &:hover {
+      background-color: $menu-item-hover-bg-color;
+    }
   }
 
   &.NgxEditor__MenuItem--Text {

diff --git a/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.html b/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.html
@@ -1,6 +1,6 @@
 <button
   type="button"
-  class="NgxEditor__MenuItem--IconContainer"
+  class="NgxEditor__MenuItem--Icon"
   [class.NgxEditor__MenuItem--Active]="isActive || showPopup"
   [class.NgxEditor--Disabled]="!canExecute"
   [innerHTML]="icon | sanitizeHtml"

diff --git a/projects/ngx-editor/src/lib/modules/menu/image/image.component.html b/projects/ngx-editor/src/lib/modules/menu/image/image.component.html
@@ -1,6 +1,6 @@
 <button
   type="button"
-  class="NgxEditor__MenuItem--IconContainer"
+  class="NgxEditor__MenuItem--Icon"
   [class.NgxEditor__MenuItem--Active]="isActive || showPopup"
   [innerHTML]="icon | sanitizeHtml"
   (mousedown)="onMouseDown($event)"

diff --git a/projects/ngx-editor/src/lib/modules/menu/insert-command/insert-command.component.html b/projects/ngx-editor/src/lib/modules/menu/insert-command/insert-command.component.html
@@ -1,5 +1,5 @@
 <button
-  class="NgxEditor__MenuItem--IconContainer"
+  class="NgxEditor__MenuItem--Icon"
   [disabled]="disabled"
   [class.NgxEditor--Disabled]="disabled"
   [innerHTML]="html | sanitizeHtml"

diff --git a/projects/ngx-editor/src/lib/modules/menu/link/link.component.html b/projects/ngx-editor/src/lib/modules/menu/link/link.component.html
@@ -1,6 +1,6 @@
 <button
   type="button"
-  class="NgxEditor__MenuItem--IconContainer"
+  class="NgxEditor__MenuItem--Icon"
   [class.NgxEditor__MenuItem--Active]="isActive || showPopup"
   [class.NgxEditor--Disabled]="!canExecute"
   [innerHTML]="icon | sanitizeHtml"

diff --git a/projects/ngx-editor/src/lib/modules/menu/menu.component.ts b/projects/ngx-editor/src/lib/modules/menu/menu.component.ts
@@ -95,7 +95,7 @@ export class MenuComponent implements OnInit {
     'outdent',
   ];
 
-  iconContainerClass = ['NgxEditor__MenuItem', 'NgxEditor__MenuItem--Icon'];
+  iconContainerClass = ['NgxEditor__MenuItem', 'NgxEditor__MenuItem--IconContainer'];
   dropdownContainerClass = ['NgxEditor__Dropdown'];
   seperatorClass = ['NgxEditor__Seperator'];
 

diff --git a/projects/ngx-editor/src/lib/modules/menu/toggle-command/toggle-command.component.html b/projects/ngx-editor/src/lib/modules/menu/toggle-command/toggle-command.component.html
@@ -1,6 +1,6 @@
 <button
   type="button"
-  class="NgxEditor__MenuItem--IconContainer"
+  class="NgxEditor__MenuItem--Icon"
   [class.NgxEditor__MenuItem--Active]="isActive"
   [class.NgxEditor--Disabled]="disabled"
   [disabled]="disabled"