mirror of https://github.com/vector-im/riot-web
Improve _GenericEventListSummary.scss (#9005)
* Include mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include style blocks of mx_MatrixChat_useCompactLayout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set top padding to avatars on group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration for bubble layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set the same margin value to mx_GenericEventListSummary_avatars on every layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove margin-top from mx_GenericEventListSummary_toggle on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove block margin from mx_GenericEventListSummary_toggle on both IRC layout and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set spacing to mx_GenericEventListSummary instead of its child elements Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the margin to every layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move general rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply block margin to mx_GenericEventListSummary_toggle of every layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply top margin to modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_MatrixChat_useCompactLayout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set top margin to mx_GenericEventListSummary insted of toggle Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a spacing variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add a comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply display flex as a default value Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>t3chguy/dedup-icons-17oct
Suguru Hirahara
GitHub
parent
b1fb609ab3
commit
56258bcdb6
|
|
@ -17,31 +17,45 @@ limitations under the License.
|
|||
.mx_GenericEventListSummary {
|
||||
position: relative;
|
||||
|
||||
.mx_GenericEventListSummary_avatars {
|
||||
margin-right: $spacing-8;
|
||||
}
|
||||
|
||||
&[data-layout=irc],
|
||||
&[data-layout=group] {
|
||||
.mx_GenericEventListSummary_toggle {
|
||||
float: right;
|
||||
margin: 8px 10px 0 0;
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary_avatars {
|
||||
padding-top: $spacing-8;
|
||||
margin-inline: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout=irc] {
|
||||
.mx_GenericEventListSummary_avatars {
|
||||
padding: 0;
|
||||
margin: 0 9px 0 0;
|
||||
}
|
||||
&[data-layout=group] {
|
||||
margin-top: $spacing-8;
|
||||
}
|
||||
|
||||
&[data-layout=bubble] {
|
||||
--maxWidth: 70%;
|
||||
display: flex;
|
||||
margin-left: calc(var(--avatarSize) + var(--gutterSize));
|
||||
|
||||
.mx_GenericEventListSummary_toggle {
|
||||
margin-block: 0;
|
||||
|
||||
&[aria-expanded=false] {
|
||||
order: 9; // TODO: Remove
|
||||
}
|
||||
|
||||
&[aria-expanded=true] {
|
||||
margin-inline-start: auto; // reduce clickable area
|
||||
margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
|
||||
}
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary_line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[data-expanded=false] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
column-gap: 5px;
|
||||
|
|
@ -50,7 +64,6 @@ limitations under the License.
|
|||
// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
|
||||
// that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
|
||||
&[data-expanded=true] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -65,26 +78,22 @@ limitations under the License.
|
|||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary_toggle {
|
||||
margin-block: 0;
|
||||
.mx_MatrixChat_useCompactLayout & {
|
||||
font-size: $font-13px;
|
||||
margin-top: $spacing-4;
|
||||
|
||||
&[aria-expanded=false] {
|
||||
order: 9;
|
||||
}
|
||||
|
||||
&[aria-expanded=true] {
|
||||
margin-inline-start: auto; // reduce clickable area
|
||||
margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
|
||||
}
|
||||
.mx_EventTile_line {
|
||||
line-height: $font-20px;
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary_line {
|
||||
display: none;
|
||||
line-height: $font-22px;
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary_avatars {
|
||||
padding-top: 0;
|
||||
.mx_TextualEvent.mx_GenericEventListSummary_summary {
|
||||
font-size: $font-13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,13 +110,12 @@ limitations under the License.
|
|||
|
||||
.mx_GenericEventListSummary_avatars {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
line-height: $font-12px;
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary_avatars .mx_BaseAvatar {
|
||||
margin-right: -4px;
|
||||
cursor: pointer;
|
||||
.mx_BaseAvatar {
|
||||
margin-right: -4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary_line {
|
||||
|
|
@ -115,24 +123,3 @@ limitations under the License.
|
|||
margin-left: 63px;
|
||||
line-height: $font-30px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_GenericEventListSummary {
|
||||
font-size: $font-13px;
|
||||
.mx_EventTile_line {
|
||||
line-height: $font-20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary_line {
|
||||
line-height: $font-22px;
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary_toggle {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.mx_TextualEvent.mx_GenericEventListSummary_summary {
|
||||
font-size: $font-13px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue