css: Use flexbox for .stream-row and .group-row.

Before this, we were having each direct child div for both the classes
as inline blocks. It is better to just have `display: flex` on the
parent element instead. There is a slight change in appearance which has
been confirmed in
https://chat.zulip.org/#narrow/stream/6-frontend/topic/Subscription.20list.20slight.20look.20change/near/1906254
This commit is contained in:
Shubham Padia 2024-07-31 08:34:34 +00:00 committed by Tim Abbott
parent b619fbb7a7
commit e9d0e1d30d
1 changed files with 4 additions and 7 deletions

View File

@ -533,12 +533,13 @@ h4.user_group_setting_subsection_title {
padding: 15px 10px 11px;
border-bottom: 1px solid hsl(0deg 0% 93%);
cursor: pointer;
display: flex;
.check {
width: 25px;
height: 25px;
position: relative;
margin-right: 8px;
margin-right: 12px;
margin-top: 9px;
background-size: 60% auto;
background-repeat: no-repeat;
@ -584,7 +585,7 @@ h4.user_group_setting_subsection_title {
.icon {
width: 35px;
height: 35px;
margin-right: 8px;
margin-right: 12px;
margin-top: 4px;
background-color: hsl(300deg 100% 25%);
border-radius: 4px;
@ -604,6 +605,7 @@ h4.user_group_setting_subsection_title {
.sub-info-box,
.group-info-box {
width: calc(100% - 90px);
margin-right: 4px;
.top-bar,
.bottom-bar {
@ -648,11 +650,6 @@ h4.user_group_setting_subsection_title {
background-color: hsl(0deg 0% 93%);
}
> div {
display: inline-block;
vertical-align: top;
}
.check:not(.checked, .disabled):hover svg,
&.active .check:not(.checked, .disabled):hover svg {
fill: hsl(0deg 0% 27%);