MOBILE-4600 styles: Move atto css to a component

main
Pau Ferrer Ocaña 2024-05-24 10:45:08 +02:00
parent 671bb39807
commit 9d8d1f0929
2 changed files with 74 additions and 73 deletions

View File

@ -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);
}

View File

@ -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.