MOBILE-4600 styles: Move atto css to a component
parent
671bb39807
commit
9d8d1f0929
|
@ -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);
|
||||
}
|
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue