From 173d8f33b7dfe8796357d82e7326a90464eac74f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 25 Jun 2022 18:06:08 +0000 Subject: [PATCH] Use a variable to ensure the margin declaration is applied to components on mx_SettingsTab only (#8877) --- res/css/_common.scss | 4 ---- res/css/views/settings/_FontScalingPanel.scss | 2 +- res/css/views/settings/_ProfileSettings.scss | 2 +- res/css/views/settings/_SetIdServer.scss | 2 +- res/css/views/settings/_SpellCheckLanguages.scss | 2 +- res/css/views/settings/tabs/_SettingsTab.scss | 1 + res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss | 4 ++-- res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.scss | 2 +- .../views/settings/tabs/user/_PreferencesUserSettingsTab.scss | 2 +- res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss | 2 +- 10 files changed, 10 insertions(+), 13 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index f3c172bafa..1e8daf3ba3 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -701,10 +701,6 @@ legend { } } -@define-mixin mx_Settings_fullWidthField { - margin-right: 100px; -} - @define-mixin ProgressBarColour $colour { color: $colour; &::-moz-progress-bar { diff --git a/res/css/views/settings/_FontScalingPanel.scss b/res/css/views/settings/_FontScalingPanel.scss index 3efae3a7a1..a4f58a0004 100644 --- a/res/css/views/settings/_FontScalingPanel.scss +++ b/res/css/views/settings/_FontScalingPanel.scss @@ -19,7 +19,7 @@ limitations under the License. .mx_FontScalingPanel_preview, .mx_FontScalingPanel_fontSlider { - @mixin mx_Settings_fullWidthField; + margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); } .mx_FontScalingPanel_preview { diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss index c3849d16d3..a9e80880aa 100644 --- a/res/css/views/settings/_ProfileSettings.scss +++ b/res/css/views/settings/_ProfileSettings.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_ProfileSettings { - @mixin mx_Settings_fullWidthField; + margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); border-bottom: 1px solid $quinary-content; .mx_ProfileSettings_avatarUpload { diff --git a/res/css/views/settings/_SetIdServer.scss b/res/css/views/settings/_SetIdServer.scss index 3296dfee96..8dc634400c 100644 --- a/res/css/views/settings/_SetIdServer.scss +++ b/res/css/views/settings/_SetIdServer.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_SetIdServer .mx_Field_input { - @mixin mx_Settings_fullWidthField; + margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); } .mx_SetIdServer_tooltip { diff --git a/res/css/views/settings/_SpellCheckLanguages.scss b/res/css/views/settings/_SpellCheckLanguages.scss index bb322c983f..0b5e140bd2 100644 --- a/res/css/views/settings/_SpellCheckLanguages.scss +++ b/res/css/views/settings/_SpellCheckLanguages.scss @@ -31,5 +31,5 @@ limitations under the License. } .mx_SpellCheckLanguages { - @mixin mx_Settings_fullWidthField; + margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); } diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 1f8186d45b..583e0374f4 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -16,6 +16,7 @@ limitations under the License. .mx_SettingsTab { --SettingsTab_section-margin-bottom-preferences-labs: 30px; + --SettingsTab_fullWidthField-margin-inline-end: 100px; --SettingsTab_tooltip-max-width: 120px; // So it fits in the space provided by the page color: $primary-content; diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss index 8b73e69031..0c0e13d691 100644 --- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_GeneralUserSettingsTab_changePassword .mx_Field { - @mixin mx_Settings_fullWidthField; + margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); } .mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child { @@ -40,7 +40,7 @@ limitations under the License. .mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress, .mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber, .mx_GeneralUserSettingsTab_languageInput { - @mixin mx_Settings_fullWidthField; + margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); } .mx_GeneralUserSettingsTab_warningIcon { diff --git a/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.scss b/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.scss index 2a3fd12f31..26d0b00080 100644 --- a/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_MjolnirUserSettingsTab .mx_Field { - @mixin mx_Settings_fullWidthField; + margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); } .mx_MjolnirUserSettingsTab_listItem { diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss index 089b3bb0f1..c7eb699d4c 100644 --- a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss @@ -16,7 +16,7 @@ limitations under the License. .mx_PreferencesUserSettingsTab { .mx_Field { - @mixin mx_Settings_fullWidthField; + margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); } .mx_SettingsTab_section { diff --git a/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss index 69d57bdba1..138ca6f9de 100644 --- a/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_VoiceUserSettingsTab .mx_Field { - @mixin mx_Settings_fullWidthField; + margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); } .mx_VoiceUserSettingsTab_missingMediaPermissions {