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

View File

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