Reduce height of toggle on expanded view source event (#10283)
* Reduce height of toggle on expanded view source event Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add a test to check size and position of toggle on expanded view source event Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
parent
4f5a65f548
commit
94950c6987
2 changed files with 30 additions and 22 deletions
|
@ -29,32 +29,34 @@ limitations under the License.
|
|||
|
||||
pre {
|
||||
line-height: 1.2;
|
||||
margin: 3.5px 0;
|
||||
margin: 3.5px 0; /* TODO: use a variable */
|
||||
}
|
||||
|
||||
.mx_ViewSourceEvent_toggle {
|
||||
--ViewSourceEvent_toggle-size: 12px;
|
||||
|
||||
visibility: hidden;
|
||||
/* override styles from AccessibleButton */
|
||||
border-radius: 0;
|
||||
/* icon */
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: 0 center;
|
||||
mask-size: auto 12px;
|
||||
width: 12px;
|
||||
min-width: 12px;
|
||||
mask-size: auto var(--ViewSourceEvent_toggle-size);
|
||||
width: var(--ViewSourceEvent_toggle-size);
|
||||
min-width: var(--ViewSourceEvent_toggle-size);
|
||||
background-color: $accent;
|
||||
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
|
||||
|
||||
.mx_EventTile:hover & {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
|
||||
align-self: flex-end;
|
||||
height: var(--ViewSourceEvent_toggle-size);
|
||||
mask-position: 0 bottom;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 5px; /* TODO: use a variable */
|
||||
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile:hover {
|
||||
.mx_ViewSourceEvent_toggle {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue