Repair DevTools button padding by centralizing styles

This moves the padding styles for dialog content to the .mx_Dialog rule. In
addition, it fixes vector-im/riot-web#7548 where the DevTools buttons had double
padding.

Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
This commit is contained in:
J. Ryan Stinnett 2018-10-26 14:15:16 +02:00
parent e799b30b89
commit 2dc335798d
5 changed files with 5 additions and 19 deletions

View file

@ -170,8 +170,7 @@ textarea {
font-weight: 300;
font-size: 15px;
position: relative;
padding-left: 58px;
padding-bottom: 36px;
padding: 0 58px 36px;
width: 60%;
max-width: 704px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
@ -216,14 +215,13 @@ textarea {
}
.mx_Dialog_content {
margin: 24px 58px 68px 0;
margin: 24px 0 68px;
font-size: 14px;
color: $primary-fg-color;
word-wrap: break-word;
}
.mx_Dialog_buttons {
padding-right: 58px;
text-align: right;
}

View file

@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_DevTools_dialog {
padding-right: 58px;
}
.mx_DevTools_content {
margin: 10px 0;
}

View file

@ -14,11 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ShareDialog {
// this is to center the content
padding-right: 58px;
}
.mx_ShareDialog hr {
margin-top: 25px;
margin-bottom: 25px;

View file

@ -20,9 +20,6 @@ limitations under the License.
// is a pain in the ass. plus might as well make the dialog big given how
// important it is.
height: 100%;
// position the gemini scrollbar nicely
padding-right: 58px;
}
.mx_UnknownDeviceDialog {
@ -51,4 +48,4 @@ limitations under the License.
.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li {
height: 40px;
border-bottom: 1px solid $primary-hairline-color;
}
}

View file

@ -625,7 +625,7 @@ export default class DevtoolsDialog extends React.Component {
let body;
if (this.state.mode) {
body = <div className="mx_DevTools_dialog">
body = <div>
<div className="mx_DevTools_label_left">{ this.state.mode.getLabel() }</div>
<div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
<div className="mx_DevTools_label_bottom" />
@ -634,7 +634,7 @@ export default class DevtoolsDialog extends React.Component {
} else {
const classes = "mx_DevTools_RoomStateExplorer_button";
body = <div>
<div className="mx_DevTools_dialog">
<div>
<div className="mx_DevTools_label_left">{ _t('Toolbox') }</div>
<div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
<div className="mx_DevTools_label_bottom" />