Skip to content

Commit

Permalink
Fix opacity of submit button for guest name
Browse files Browse the repository at this point in the history
The guest name now behaves like the room name regarding the opacity of
its submit button.

Both the room name and the guest name are editable text labels, so the
CSS rules were moved from the room name to the editable text label.
However, although the guest name uses the default server rules for the
input and the submit button the room name does not (they are adjusted to
better fit a header); the rules set for the editable text label are
based on the default server rules, and the room name inherits the rules
for the editable text label customizing them as needed.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
  • Loading branch information
danxuliu committed Dec 14, 2018
1 parent 4a104f3 commit 1518e7d
Showing 1 changed file with 35 additions and 18 deletions.
53 changes: 35 additions & 18 deletions css/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -686,12 +686,40 @@
}
}
.input-wrapper {
display: flex;
align-items: center;
position: relative;

/* Pull up the wrapper slightly to prevent elements below it from
* moving when it is shown. */
margin-top: -2px;

input[type="text"] {
padding-right: 34px;

&:focus + .icon-confirm {
opacity: .6;
}

& + .icon-confirm {
position: absolute;
top: 0;
/* Compensate for right margin of inputs set in the
* server. */
right: 3px;

border: none;
/* Needed to override an important rule set in the
* server. */
background-color: transparent !important;

opacity: .3;

&:hover,
&:focus,
&:active {
opacity: 1;
}
}
}
}
.label {
margin-left: 5px;
Expand Down Expand Up @@ -759,31 +787,20 @@
margin: 4px 0 4px 0 !important;
font-size: 15px;
font-weight: 300;
padding-right: 44px;
text-overflow: ellipsis;
}

.icon-confirm.confirm-button {
position: absolute;
right: 0;
top: 1px;
padding: 12px 21px;
margin: 0;
background-color: transparent !important;
border: none;
}

.username:focus + .icon-confirm.confirm-button {
opacity: .6;
}

.username + .icon-confirm.confirm-button {
opacity: .3;
input[type="text"] {
padding-right: 44px;

&:hover,
&:focus,
&:active {
opacity: 1;
& + .icon-confirm {
top: 1px;
right: 0;
}
}
}
Expand Down

0 comments on commit 1518e7d

Please sign in to comment.