Neill Magill
b9143c7883
When an image was added via Atto and it was set to resize automatically if the alignment was set to Top, Middle or Bottom when it was made smaller then a vertical scroll bar would be displayed. This was caused by the interaction of the margin settings on the image and the 100% width set via the img-responsive css class. The width of an element only includes the content area and not any borders, padding or margins. This change stops atto hardcoding the styles for image alignment into the images style tag, it instead adds a class that defines the alignment the image should have. This change has the benefit that themers will now be able to adjust how atto image alignments work if they wish. Images added before this patch will continue to have the issue until they are edited by the plugin, at which time their legacy style will be removed and the new alignment method will be added. Thanks to Andrew Nicols who provided a refactor for the Alignment and style detection code.
63 lines
1.1 KiB
CSS
63 lines
1.1 KiB
CSS
.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] {
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
}
|
|
.atto_image_size input[type=text] {
|
|
width: 3em;
|
|
}
|
|
.atto_image_size label {
|
|
display: inline-block;
|
|
}
|
|
|
|
.atto_image_button_text-top {
|
|
vertical-align: text-top;
|
|
margin: 0 0.5em;
|
|
}
|
|
|
|
.atto_image_button_middle {
|
|
vertical-align: middle;
|
|
margin: 0 0.5em;
|
|
}
|
|
|
|
.atto_image_button_text-bottom {
|
|
vertical-align: text-bottom;
|
|
margin: 0 0.5em;
|
|
}
|
|
|
|
.atto_image_button_text-top.img-responsive,
|
|
.atto_image_button_middle.img-responsive,
|
|
.atto_image_button_text-bottom.img-responsive {
|
|
max-width: calc(100% - 1em);
|
|
}
|
|
|
|
.atto_image_button_left {
|
|
float: left;
|
|
margin: 0 0.5em 0 0;
|
|
max-width: calc(100% - 1em);
|
|
}
|
|
|
|
.atto_image_button_right {
|
|
float: right;
|
|
margin: 0 0 0 0.5em;
|
|
max-width: calc(100% - 1em);
|
|
}
|