mirror of https://github.com/vector-im/riot-web
Stop using mx_GroupLayout for styling (#8711)
parent
f9100d5fb6
commit
81c894f2d9
|
@ -116,29 +116,11 @@ limitations under the License.
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
// Override _GroupLayout.scss for the thread panel
|
||||
.mx_GroupLayout {
|
||||
.mx_EventTile {
|
||||
.mx_MessageActionBar {
|
||||
right: 0;
|
||||
top: -36px; // 2px above EventTile
|
||||
z-index: 10; // See _EventTile.scss
|
||||
}
|
||||
|
||||
&[data-shape=ThreadsList] {
|
||||
> .mx_DisambiguatedProfile {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
position: initial;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mx_EventTile_line {
|
||||
padding-bottom: 0; // Override mx_EventTile_line on _GroupLayout.scss
|
||||
}
|
||||
}
|
||||
.mx_EventTile[data-layout=group] {
|
||||
.mx_MessageActionBar {
|
||||
right: 0;
|
||||
top: -36px; // 2px above EventTile
|
||||
z-index: 10; // See _EventTile.scss
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -66,8 +66,25 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
}
|
||||
|
||||
&[data-layout=group] {
|
||||
.mx_EventTile_line {
|
||||
line-height: var(--GroupLayout-EventTile-line-height);
|
||||
> .mx_DisambiguatedProfile {
|
||||
line-height: $font-20px;
|
||||
margin-left: $left-gutter;
|
||||
}
|
||||
|
||||
> .mx_EventTile_avatar {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
position: absolute; // for modern layout
|
||||
}
|
||||
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_reply {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 3px;
|
||||
line-height: $font-22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -128,7 +145,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
display: inline-block;
|
||||
padding-bottom: 0px;
|
||||
padding-top: 0px;
|
||||
margin: 0px;
|
||||
max-width: calc(100% - $left-gutter);
|
||||
}
|
||||
|
||||
|
@ -789,7 +805,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
}
|
||||
|
||||
.mx_DisambiguatedProfile {
|
||||
margin-right: $spacing-12;
|
||||
margin-inline: 0 $spacing-12;
|
||||
display: inline-flex;
|
||||
flex: 1;
|
||||
|
||||
|
@ -813,6 +829,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
.mx_EventTile_line {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0;
|
||||
|
||||
.mx_ThreadPanel_replies {
|
||||
margin-top: $spacing-8;
|
||||
|
@ -835,6 +852,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
.mx_MessageTimestamp {
|
||||
max-width: 80px;
|
||||
width: auto;
|
||||
position: initial;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -15,38 +15,6 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
$left-gutter: 64px;
|
||||
|
||||
.mx_GroupLayout {
|
||||
--GroupLayout-EventTile-line-height: $font-22px;
|
||||
|
||||
.mx_EventTile {
|
||||
> .mx_DisambiguatedProfile {
|
||||
line-height: $font-20px;
|
||||
margin-left: $left-gutter;
|
||||
}
|
||||
|
||||
> .mx_EventTile_avatar {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
position: absolute; // for modern layout
|
||||
}
|
||||
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_reply {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.mx_EventTile_reply {
|
||||
line-height: var(--GroupLayout-EventTile-line-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Compact layout overrides */
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
|
|
|
@ -173,6 +173,7 @@ $irc-line-height: $font-18px;
|
|||
|
||||
.mx_DisambiguatedProfile {
|
||||
width: var(--name-width);
|
||||
margin-inline-end: 0; // override mx_EventTile > *
|
||||
display: flex;
|
||||
order: 2;
|
||||
flex-shrink: 0;
|
||||
|
|
Loading…
Reference in New Issue