settings: Present modal sidebars as gridded rows.

This commit is contained in:
Karl Stolley 2024-06-11 13:50:29 -05:00 committed by Tim Abbott
parent a4aa8d48ca
commit 47c3903ce0
1 changed files with 20 additions and 33 deletions

View File

@ -1303,7 +1303,15 @@ $option_title_width: 180px;
} }
& li { & li {
padding: 5px 0; display: grid;
/* 3.5714em is 50px at 14px/1em -- the legacy height of these rows. */
grid-template:
"starting-anchor-element row-content ending-anchor-element" 3.5714em / 40px minmax(
0,
1fr
)
minmax(34px, auto);
align-items: center;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition: transition:
@ -1320,46 +1328,25 @@ $option_title_width: 180px;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }
.text, .icon {
.icon, font-size: 1.4em;
.locked { text-align: center;
display: inline-block; color: hsl(0deg 0% 53%);
vertical-align: top;
} }
.text { .text {
width: calc(100% - 90px); /* Hyphenate for internationalization */
padding: 10px 12px 10px 0; hyphens: auto;
}
.icon {
width: 18px;
height: 18px;
margin: 10px;
text-align: center;
font-size: 1.4em;
color: hsl(0deg 0% 53%);
background-size: cover;
background-repeat: no-repeat;
} }
.zulip-icon-smart-toy { .zulip-icon-smart-toy {
font-size: 1.6em; font-size: 1.6em;
margin: 8px 11px 10px 9px;
} }
.locked { .locked {
width: 18px;
height: 18px;
margin: 14px 8px 6px;
font-size: 1em; font-size: 1em;
text-align: center;
color: hsl(0deg 0% 62%); color: hsl(0deg 0% 62%);
background-size: cover;
background-repeat: no-repeat;
} }
} }
@ -1367,6 +1354,10 @@ $option_title_width: 180px;
display: none; display: none;
} }
.hide-org-settings {
display: none;
}
.normal-settings-list, .normal-settings-list,
.org-settings-list { .org-settings-list {
position: relative; position: relative;
@ -1660,10 +1651,6 @@ $option_title_width: 180px;
display: inline-block; display: inline-block;
} }
.hide-org-settings {
display: none;
}
.collapse-settings-btn { .collapse-settings-btn {
margin: 10px 0 0 10px; margin: 10px 0 0 10px;
color: hsl(200deg 100% 40%); color: hsl(200deg 100% 40%);