PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Tidy _SettingsTab.scss (#8819)

Browse source 
* Include descedants of mx_SettingsTab_section

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include descedants of mx_SettingsFlag

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use logical properties and variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include a descedant of mx_SettingsTab_heading

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove redundant declarations specified by default with _SettingsFlag.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use not logical properties

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include a in mx_SettingsTab

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-17 09:04:52 +00:00 committed by GitHub
parent c5bc91291d
commit 239b59d4a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
res/css/views/settings/tabs/_SettingsTab.scss
View file

@ -17,6 +17,10 @@ limitations under the License.
.mx_SettingsTab { .mx_SettingsTab {
--SettingsTab_section-margin-bottom-preferences-labs: 30px; --SettingsTab_section-margin-bottom-preferences-labs: 30px;
color: $primary-content; color: $primary-content;
a {
color: $links;
}
} }
.mx_SettingsTab_warningText { .mx_SettingsTab_warningText {
@ -27,12 +31,12 @@ limitations under the License.
font-size: $font-20px; font-size: $font-20px;
font-weight: 600; font-weight: 600;
color: $primary-content; color: $primary-content;
margin-bottom: 10px; margin-top: 10px; // TODO: Use a spacing variable
margin-top: 10px; margin-bottom: 10px; // TODO: Use a spacing variable
}
.mx_SettingsTab_heading:nth-child(n + 2) { &:nth-child(n + 2) {
margin-top: 30px; margin-top: 30px; // TODO: Use a spacing variable
}
} }
.mx_SettingsTab_subheading { .mx_SettingsTab_subheading {
@ -40,67 +44,56 @@ limitations under the License.
display: block; display: block;
font-weight: 600; font-weight: 600;
color: $primary-content; color: $primary-content;
margin-bottom: 10px; margin-top: $spacing-12;
margin-top: 12px; margin-bottom: 10px; // TODO: Use a spacing variable
} }
.mx_SettingsTab_subsectionText { .mx_SettingsTab_subsectionText {
color: $secondary-content; color: $secondary-content;
font-size: $font-14px; font-size: $font-14px;
display: block; display: block;
margin: 10px 80px 10px 0; // Align with the rest of the view margin-top: 10px; // TODO: Use a spacing variable
margin-inline-end: 80px; // Align with the rest of the view
margin-bottom: 10px; // TODO: Use a spacing variable
margin-inline-start: 0;
} }
.mx_SettingsTab_section { .mx_SettingsTab_section {
$right-gutter: 80px; $end-gutter: 80px;
margin-bottom: 24px; margin-bottom: $spacing-24;
.mx_SettingsFlag { .mx_SettingsFlag {
margin-right: $right-gutter; margin-inline-end: $end-gutter;
margin-bottom: 10px; margin-bottom: 10px; // TODO: Use a spacing variable
.mx_SettingsFlag_label {
vertical-align: middle;
display: inline-block;
max-width: calc(100% - $font-48px); // Force word wrap instead of colliding with the switch
box-sizing: border-box;
}
.mx_ToggleSwitch {
float: inline-end;
}
} }
> p { > p {
margin-right: $right-gutter; margin-inline-end: $end-gutter;
} }
&.mx_SettingsTab_subsectionText .mx_SettingsFlag { &.mx_SettingsTab_subsectionText .mx_SettingsFlag {
margin-right: 0 !important; margin-inline-end: 0 !important;
} }
} }
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
vertical-align: middle;
display: inline-block;
font-size: $font-14px;
color: $primary-content;
max-width: calc(100% - $font-48px); // Force word wrap instead of colliding with the switch
box-sizing: border-box;
padding-right: 10px;
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_microcopy {
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
float: right;
}
.mx_SettingsTab_linkBtn { .mx_SettingsTab_linkBtn {
cursor: pointer; cursor: pointer;
color: $accent; color: $accent;
word-break: break-all; word-break: break-all;
} }
.mx_SettingsTab a {
color: $links;
}
.mx_SettingsTab_toggleWithDescription { .mx_SettingsTab_toggleWithDescription {
margin-top: 24px; margin-top: $spacing-24;
} }