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;
|
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
|
// Bootstrap 4 Styles
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
@ -701,6 +628,7 @@ core-rich-text-editor .core-rte-editor {
|
||||||
background-color: var(--#{$color-name}-tint);
|
background-color: var(--#{$color-name}-tint);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@import "theme/components/atto.scss";
|
||||||
}
|
}
|
||||||
|
|
||||||
// h1 is too big and ugly, reduce size when loading.
|
// h1 is too big and ugly, reduce size when loading.
|
||||||
|
|
Loading…
Reference in New Issue