From 9d8d1f09297a0fe1a8651e73b3e1ad6a4fbae900 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 24 May 2024 10:45:08 +0200
Subject: [PATCH] MOBILE-4600 styles: Move atto css to a component

---
 src/theme/components/atto.scss        | 73 ++++++++++++++++++++++++++
 src/theme/components/format-text.scss | 74 +--------------------------
 2 files changed, 74 insertions(+), 73 deletions(-)
 create mode 100644 src/theme/components/atto.scss

diff --git a/src/theme/components/atto.scss b/src/theme/components/atto.scss
new file mode 100644
index 000000000..f52e4cbbe
--- /dev/null
+++ b/src/theme/components/atto.scss
@@ -0,0 +1,73 @@
+ // Atto styles
+// -------------------------
+.atto_image_preview {
+    width: 100%;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.atto_image_preview_box {
+    max-height: 200px;
+    margin-bottom: 1em;
+    overflow: auto;
+}
+
+.editor_atto_content img {
+    cursor: pointer;
+}
+
+.atto_image_size {
+    display: inline-block;
+}
+
+.atto_image_size input[type=checkbox] {
+    @include margin(null, 1em, null, 1em);
+}
+
+.atto_image_size input[type=text] {
+    width: 3em;
+}
+
+.atto_image_size label {
+    display: inline-block;
+}
+
+.atto_image_button_text-top,
+.atto_image_button_middle,
+.atto_image_button_text-bottom,
+.atto_image_button_left,
+.atto_image_button_right {
+    vertical-align: middle;
+    max-width: 100%;
+    display: inline-block;
+    margin: 0 0.5em;
+
+    &.img-responsive {
+        /* If the image is display: block then linking the image to URLs won't work. */
+        /*display: inline-block;*/
+        max-width: 100%;
+    }
+}
+
+.atto_image_button_text-top {
+    vertical-align: text-top;
+}
+
+.atto_image_button_middle {
+    vertical-align: middle;
+}
+
+.atto_image_button_text-bottom {
+    vertical-align: text-bottom;
+}
+
+.atto_image_button_left {
+    @include float(start);
+    @include margin(0, 0.5em, 0, 0);
+}
+
+.atto_image_button_right {
+    @include float(end);
+    @include margin(0, 0, 0, 0.5em);
+}
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 6c315f262..69080473e 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -364,79 +364,6 @@ core-rich-text-editor .core-rte-editor {
         flex-shrink: 0;
     }
 
-    // Atto styles
-    // -------------------------
-    .atto_image_preview {
-        width: 100%;
-        height: 100%;
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    .atto_image_preview_box {
-        max-height: 200px;
-        margin-bottom: 1em;
-        overflow: auto;
-    }
-
-    .editor_atto_content img {
-        cursor: pointer;
-    }
-
-    .atto_image_size {
-        display: inline-block;
-    }
-
-    .atto_image_size input[type=checkbox] {
-        @include margin(null, 1em, null, 1em);
-    }
-
-    .atto_image_size input[type=text] {
-        width: 3em;
-    }
-
-    .atto_image_size label {
-        display: inline-block;
-    }
-
-    .atto_image_button_text-top,
-    .atto_image_button_middle,
-    .atto_image_button_text-bottom,
-    .atto_image_button_left,
-    .atto_image_button_right {
-        vertical-align: middle;
-        max-width: 100%;
-        display: inline-block;
-        margin: 0 0.5em;
-
-        &.img-responsive {
-            /* If the image is display: block then linking the image to URLs won't work. */
-            /*display: inline-block;*/
-            max-width: 100%;
-        }
-    }
-
-    .atto_image_button_text-top {
-        vertical-align: text-top;
-    }
-
-    .atto_image_button_middle {
-        vertical-align: middle;
-    }
-
-    .atto_image_button_text-bottom {
-        vertical-align: text-bottom;
-    }
-
-    .atto_image_button_left {
-        @include float(start);
-        @include margin(0, 0.5em, 0, 0);
-    }
-
-    .atto_image_button_right {
-        @include float(end);
-        @include margin(0, 0, 0, 0.5em);
-    }
 
     // Bootstrap 4 Styles
     // -------------------------
@@ -701,6 +628,7 @@ core-rich-text-editor .core-rte-editor {
             background-color: var(--#{$color-name}-tint);
         }
     }
+    @import "theme/components/atto.scss";
 }
 
 // h1 is too big and ugly, reduce size when loading.