Merge pull request #3380 from AlchemyCMS/dialog-close-button

Fix Dialog close button styles

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -233,7 +233,7 @@ export class Dialog {
     this.dialog_header = $('<div class="alchemy-dialog-header" />')
     this.dialog_title = $('<div class="alchemy-dialog-title" />')
     this.close_button = $(
-      '<a class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></a>'
+      '<button class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></button>'
     )
     this.dialog_title.text(this.options.title)
     this.dialog_header.append(this.dialog_title)

app/assets/builds/tinymce/skins/ui/alchemy-dark/skin.min.css

@@ -156,6 +156,23 @@
   }
 }
 
+.alchemy-dialog-close {
+  display: inline-flex;
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: var(--border-radius_medium);
+  color: var(--color-white);
+  padding: 0;
+
+  &:hover {
+    background-color: var(--color-blue_medium);
+  }
+}
+
 .alchemy-dialog-body {
   position: relative;
   color: var(--text-color);

app/assets/builds/tinymce/skins/ui/alchemy/skin.min.css

@@ -1534,8 +1534,15 @@ button::-moz-focus-inner {
 .tox .tox-dialog__header .tox-button {
   z-index: 1;
   color: var(--color-white);
+  height: var(--spacing-6);
   background-image: none; // If used in Solidus we need to override the background image
-  border: none; // If used in Solidus we need to override the border
+  border-color: transparent; // If used in Solidus we need to override the border
+
+  &:active:not(:disabled),
+  &:hover:not(:disabled) {
+    background-color: var(--color-blue_medium);
+    color: var(--color-white);
+  }
 }
 
 .tox .tox-dialog__draghandle {
@@ -2076,11 +2083,8 @@ body.tox-dialog__disable-scroll {
 }
 
 .tox .tox-color-input span::before {
-  background-image: linear-gradient(
-      45deg,
-      rgba(0, 0, 0, 0.25) 25%,
-      transparent 25%
-    ),
+  background-image:
+    linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%),
     linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%),
     linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%);

app/javascript/alchemy_admin/dialog.js

@@ -1534,8 +1534,15 @@ button::-moz-focus-inner {
 .tox .tox-dialog__header .tox-button {
   z-index: 1;
   color: var(--color-white);
+  height: var(--spacing-6);
   background-image: none; // If used in Solidus we need to override the background image
-  border: none; // If used in Solidus we need to override the border
+  border-color: transparent; // If used in Solidus we need to override the border
+
+  &:active:not(:disabled),
+  &:hover:not(:disabled) {
+    background-color: var(--color-blue_medium);
+    color: var(--color-white);
+  }
 }
 
 .tox .tox-dialog__draghandle {
@@ -2076,11 +2083,8 @@ body.tox-dialog__disable-scroll {
 }
 
 .tox .tox-color-input span::before {
-  background-image: linear-gradient(
-      45deg,
-      rgba(0, 0, 0, 0.25) 25%,
-      transparent 25%
-    ),
+  background-image:
+    linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%),
     linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%),
     linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%);