Avoid calc() in CSS

* Use `margin: A` with `padding: B` rather than `padding: calc(A + B)`.
* Remove a `display: inline-block` which necessitated `width: 100%`.

I think this results in the same rendering, but please test carefully,
as I didn't check it for all the possible notifications.

(There is one more calc() in mw.echo.badge.less that can't be avoided.)

Bug: T135936
Change-Id: Ic01f16c8469c3b9d45d2885108ec6260e967731a
This commit is contained in:
Bartosz Dziewoński 2016-05-22 12:29:42 +02:00 committed by Mooeypoo
parent 3fc46a639d
commit cc9e667c49
2 changed files with 8 additions and 5 deletions

View file

@ -14,8 +14,11 @@
&-content {
margin-bottom: 1em;
// The icon is 30px
margin-left: 30px;
// 0.8em from ItemWidget, plus 0.8em
padding-left: 1.6em;
padding-right: 0.8em;
padding-left: ~"calc(30px + 1.6em)"; // 30px+0.8em from ItemWidget, plus 0.8em
}
}

View file

@ -27,11 +27,11 @@
}
&-content {
display: inline-block;
// The icon is 30px and has a 0.8em right margin
padding-left: ~"calc(30px + 0.8em)";
display: block;
// The icon is 30px
margin-left: 30px;
padding-left: 0.8em;
box-sizing: border-box;
width: 100%;
&-message {
line-height: 16px;