Fix working icon position when sending a message

When a message is being sent the submit icon is hidden and the working
icon is shown instead. However, the working icon was not placed at the
same position as the icon it replaced; the CSS rules for the submit icon
were modified in some previous commit, but the CSS rules for the working
icon were not appropriately updated. Now the CSS rules were rewritten so
both elements use the same placement rules; this fixes the issue and
should make it less likely to happen in the future if the placement is
modified again.

Also, now the size is explicitly set to ensure that both elements have
the same size; before it depended on other rules, and which rules
affected the size were different for each element due to being of
different types.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
This commit is contained in:
Daniel Calviño Sánchez 2018-04-26 21:57:31 +02:00
Родитель dad8c1fdf8
Коммит d609fa064b
1 изменённых файлов: 9 добавлений и 16 удалений

Просмотреть файл

@ -28,12 +28,19 @@
display: block;
}
#commentsTabView .newCommentForm .submit {
#commentsTabView .newCommentForm .submit,
#commentsTabView .newCommentForm .submitLoading {
position: absolute;
width: 44px;
height: 44px;
bottom: -4px;
right: -8px;
margin: 0;
padding: 13px 22px;;
}
#commentsTabView .newCommentForm .submit {
background-color: transparent;
border: none;
opacity: .3;
@ -45,20 +52,6 @@
#commentsTabView .newCommentForm .submitLoading {
background-position: left;
/* Match rules for '#commentsTabView .newCommentForm .submit' to place the
loading icon at the same position as the confirm icon */
position: absolute;
bottom: 0px;
right: 8px;
width: 30px;
margin: 0;
padding: 7px 9px;
/* Match rules for 'input[type="submit"]' to place the loading icon at the
same position as the confirm icon */
min-height: 34px;
box-sizing: border-box;
}
#commentsTabView .newCommentForm .cancel {