Use a variable to ensure the margin declaration is applied to components on mx_SettingsTab only (#8877)

This commit is contained in:
Suguru Hirahara 2022-06-25 18:06:08 +00:00 committed by GitHub
parent b391a20434
commit 173d8f33b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 10 additions and 13 deletions

View file

@ -701,10 +701,6 @@ legend {
} }
} }
@define-mixin mx_Settings_fullWidthField {
margin-right: 100px;
}
@define-mixin ProgressBarColour $colour { @define-mixin ProgressBarColour $colour {
color: $colour; color: $colour;
&::-moz-progress-bar { &::-moz-progress-bar {

View file

@ -19,7 +19,7 @@ limitations under the License.
.mx_FontScalingPanel_preview, .mx_FontScalingPanel_preview,
.mx_FontScalingPanel_fontSlider { .mx_FontScalingPanel_fontSlider {
@mixin mx_Settings_fullWidthField; margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
} }
.mx_FontScalingPanel_preview { .mx_FontScalingPanel_preview {

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
.mx_ProfileSettings { .mx_ProfileSettings {
@mixin mx_Settings_fullWidthField; margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
border-bottom: 1px solid $quinary-content; border-bottom: 1px solid $quinary-content;
.mx_ProfileSettings_avatarUpload { .mx_ProfileSettings_avatarUpload {

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
.mx_SetIdServer .mx_Field_input { .mx_SetIdServer .mx_Field_input {
@mixin mx_Settings_fullWidthField; margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
} }
.mx_SetIdServer_tooltip { .mx_SetIdServer_tooltip {

View file

@ -31,5 +31,5 @@ limitations under the License.
} }
.mx_SpellCheckLanguages { .mx_SpellCheckLanguages {
@mixin mx_Settings_fullWidthField; margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
} }

View file

@ -16,6 +16,7 @@ limitations under the License.
.mx_SettingsTab { .mx_SettingsTab {
--SettingsTab_section-margin-bottom-preferences-labs: 30px; --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 --SettingsTab_tooltip-max-width: 120px; // So it fits in the space provided by the page
color: $primary-content; color: $primary-content;

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
.mx_GeneralUserSettingsTab_changePassword .mx_Field { .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 { .mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
@ -40,7 +40,7 @@ limitations under the License.
.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress, .mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,
.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber, .mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,
.mx_GeneralUserSettingsTab_languageInput { .mx_GeneralUserSettingsTab_languageInput {
@mixin mx_Settings_fullWidthField; margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
} }
.mx_GeneralUserSettingsTab_warningIcon { .mx_GeneralUserSettingsTab_warningIcon {

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
.mx_MjolnirUserSettingsTab .mx_Field { .mx_MjolnirUserSettingsTab .mx_Field {
@mixin mx_Settings_fullWidthField; margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
} }
.mx_MjolnirUserSettingsTab_listItem { .mx_MjolnirUserSettingsTab_listItem {

View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_PreferencesUserSettingsTab { .mx_PreferencesUserSettingsTab {
.mx_Field { .mx_Field {
@mixin mx_Settings_fullWidthField; margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
} }
.mx_SettingsTab_section { .mx_SettingsTab_section {

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
.mx_VoiceUserSettingsTab .mx_Field { .mx_VoiceUserSettingsTab .mx_Field {
@mixin mx_Settings_fullWidthField; margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
} }
.mx_VoiceUserSettingsTab_missingMediaPermissions { .mx_VoiceUserSettingsTab_missingMediaPermissions {