Use horizontal tabs for tinymce dialog navigation

Suits our dialog navigation layout
AlchemyCMS · Jan 4, 2024 · d92b97e · d92b97e
1 parent 7a88450
commit d92b97e
Showing 1 changed file with 13 additions and 24 deletions.
diff --git a/app/assets/stylesheets/tinymce/skins/ui/alchemy/skin.min.scss b/app/assets/stylesheets/tinymce/skins/ui/alchemy/skin.min.scss
@@ -1590,6 +1590,7 @@ button::-moz-focus-inner {
   color: #000;
   display: flex;
   flex: 1;
+  flex-direction: column;
   -ms-flex-preferred-size: auto;
   font-size: 13px;
   font-style: normal;
@@ -1600,47 +1601,35 @@ button::-moz-focus-inner {
   text-transform: none;
 }
 
-@media only screen and (max-width: 767px) {
-  body:not(.tox-force-desktop) .tox .tox-dialog__body {
-    flex-direction: column;
-  }
-}
-
 .tox .tox-dialog__body-nav {
   align-items: flex-start;
   display: flex;
-  flex-direction: column;
-  padding: 13px 13px;
-}
-
-@media only screen and (max-width: 767px) {
-  body:not(.tox-force-desktop) .tox .tox-dialog__body-nav {
-    flex-direction: row;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: auto;
-    padding-bottom: 0;
-  }
+  flex-direction: row;
+  padding: 0;
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  box-shadow: inset 0 -2px 0 var(--tabs_track-color);
 }
 
 .tox .tox-dialog__body-nav-item {
   border-bottom: 2px solid transparent;
-  color: rgba(0, 0, 0, 0.7);
+  color: var(--sl-color-neutral-600);
   display: inline-block;
   font-size: $base-font-size;
   line-height: 1.3;
-  margin-bottom: 2 * $default-margin;
-  padding: $default-padding;
+  padding: 16px 15px;
   text-decoration: none;
   white-space: nowrap;
+  border-bottom: 2px solid var(--tabs_track-color);
 }
 
-.tox .tox-dialog__body-nav-item:focus {
-  background-color: rgba(45, 90, 141, 0.1);
+.tox .tox-dialog__body-nav-item:hover {
+  color: var(--sl-color-primary-600);
 }
 
 .tox .tox-dialog__body-nav-item--active {
-  border-bottom: 2px solid #2d5a8d;
-  color: #2d5a8d;
+  border-bottom-color: var(--tabs_indicator-color);
+  color: var(--sl-color-primary-600);
 }
 
 .tox .tox-dialog__body-content {