Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

stream-settings: Use CSS nesting at media breakpoints. 

Avoid writing repeated class name of `#subscription_overlay` and `subscription_settings`
for CSS at media breakpoints.
This commit is contained in:
jai2201 2022-03-02 22:35:33 +05:30 committed by Tim Abbott
parent e374d7ef7d
commit ea65da462e
1 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
static/styles/subscriptions.css
View File

@ -1196,42 +1196,44 @@ h4.stream_setting_subsection_title {
.stream-header .button-group { .stream-header .button-group {
margin-top: -5px; margin-top: -5px;
} }
}
#subscription_overlay .subscription_settings .stream_change_property_info { .stream_change_property_info {
/* For small widths where there is not enough space /* For small widths where there is not enough space
to show alert beside stream name we set its display to show alert beside stream name we set its display
to block so it is shown in new line. But to avoid to block so it is shown in new line. But to avoid
it covering whole screen width we set max-width it covering whole screen width we set max-width
so that it does not losses inline-block appearance. */ so that it does not losses inline-block appearance. */
/* TODO: This will probably be not required once /* TODO: This will probably be not required once
we have tabbed navigation as button group width we have tabbed navigation as button group width
will be smaller. */ will be smaller. */
display: block; display: block;
max-width: max-content; max-width: max-content;
white-space: nowrap; white-space: nowrap;
}
} }
} }
@media (width <= 500px) { @media (width <= 500px) {
#subscription_overlay .stream_settings_header { #subscription_overlay {
display: block; .stream_settings_header {
text-align: center; display: block;
margin-left: 0; text-align: center;
margin-left: 0;
.tab-container { .tab-container {
.ind-tab { .ind-tab {
width: 85px; width: 85px;
}
} }
} }
}
#subscription_overlay .stream_setting_subsection_header { .stream_setting_subsection_header {
display: block; display: block;
.stream_permission_change_info { .stream_permission_change_info {
margin: 12px auto 0 3px; margin: 12px auto 0 3px;
}
} }
} }
} }