From da9f2f6caa3e0db2a42e9ef7a4ce1b49eb862f53 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 08:17:05 +0000 Subject: [PATCH] Improve _InviteDialog.scss by applying spacing variables (#8869) --- res/css/views/dialogs/_InviteDialog.scss | 59 +++++++++++------------- 1 file changed, 28 insertions(+), 31 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index c70b166715..6fd3d0510f 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -20,7 +20,7 @@ limitations under the License. } .mx_InviteDialog_transferWrapper .mx_Dialog { - padding-bottom: 16px; + padding-bottom: $spacing-16; } .mx_InviteDialog_addressBar { @@ -28,7 +28,7 @@ limitations under the License. flex-direction: row; // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar // for the user section gets weird. - margin: 8px 45px 0 0; + margin: $spacing-8 45px 0 0; // TODO: Use a spacing variable .mx_InviteDialog_editor { flex: 1; @@ -36,25 +36,25 @@ limitations under the License. background-color: $header-panel-bg-color; border-radius: 4px; min-height: 25px; - padding-left: 8px; + padding-inline-start: $spacing-8; overflow-x: hidden; overflow-y: auto; display: flex; flex-wrap: wrap; .mx_InviteDialog_userTile { - margin: 6px 6px 0 0; + margin: 6px 6px 0 0; // TODO: Use a spacing variable display: inline-block; min-width: max-content; // prevent manipulation by flexbox } // overrides bunch of our default text input styles > input[type="text"] { - margin: 6px 0 !important; + margin: 6px 0 !important; // TODO: Use a spacing variable height: 24px; line-height: $font-24px; font-size: $font-14px; - padding-left: 12px; + padding-inline-start: $spacing-12; border: 0 !important; outline: 0 !important; resize: none; @@ -67,7 +67,7 @@ limitations under the License. .mx_InviteDialog_goButton { min-width: 48px; - margin-left: 10px; + margin-inline-start: 10px; // TODO: Use a spacing variable height: 25px; line-height: $font-25px; } @@ -77,7 +77,7 @@ limitations under the License. // Width and height are required to trick the layout engine. width: 20px; height: 20px; - margin-left: 5px; + margin-inline-start: 5px; // TODO: Use a spacing variable display: inline-block; vertical-align: middle; } @@ -85,7 +85,7 @@ limitations under the License. } .mx_InviteDialog_section { - padding-bottom: 4px; + padding-bottom: $spacing-4; h3 { font-size: $font-12px; @@ -103,13 +103,13 @@ limitations under the License. } .mx_InviteDialog_section_showMore { - margin: 7px 18px; + margin: 7px 18px; // TODO: Use a spacing variable display: block; } } .mx_InviteDialog_section_hidden_suggestions_disclaimer { - padding: 8px 0 16px 0; + padding: $spacing-8 0 $spacing-16 0; font-size: $font-14px; > span { @@ -126,7 +126,7 @@ limitations under the License. border-top: 1px solid $input-border-color; > h3 { - margin: 12px 0; + margin: $spacing-12 0; font-size: $font-12px; color: $muted-fg-color; font-weight: bold; @@ -148,7 +148,7 @@ limitations under the License. // Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. .mx_InviteDialog_userTile { - margin-right: 8px; + margin-inline-end: $spacing-8; .mx_InviteDialog_userTile_pill { background-color: $username-variant1-color; @@ -156,8 +156,7 @@ limitations under the License. display: inline-block; height: 24px; line-height: $font-24px; - padding-left: 8px; - padding-right: 8px; + padding-inline: $spacing-8; color: #ffffff; // this is fine without a var because it's for both themes .mx_SearchResultAvatar { @@ -182,7 +181,7 @@ limitations under the License. .mx_InviteDialog_userTile_remove { display: inline-block; - margin-left: 4px; + margin-inline-start: $spacing-4; } } @@ -194,15 +193,15 @@ limitations under the License. overflow: hidden; .mx_InviteDialog_addressBar { - margin-right: 0; + margin-inline-end: 0; } .mx_InviteDialog_userSections { - padding-right: 0; + padding-inline-end: 0; .mx_InviteDialog_section { padding-bottom: 0; - margin-top: 12px; + margin-top: $spacing-12; } } } @@ -220,6 +219,7 @@ limitations under the License. .mx_InviteDialog_content { width: 496px; height: 430px; + overflow: visible; .mx_TabbedView { display: flex; @@ -237,22 +237,21 @@ limitations under the License. } } } - overflow: visible; } .mx_InviteDialog_addressBar { - margin-top: 8px; + margin-top: $spacing-8; } input[type="checkbox"] { - margin-right: 8px; + margin-inline-end: $spacing-8; } } .mx_InviteDialog_userSections { - margin-top: 4px; + margin-top: $spacing-4; overflow-y: auto; - padding: 0 45px 4px 0; + padding: 0 45px $spacing-4 0; // TODO: Use a spacing variable } .mx_InviteDialog_helpText { @@ -299,14 +298,12 @@ limitations under the License. } .mx_InviteDialog_transferConsultConnect { - padding-top: 16px; + padding-top: $spacing-16; /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width, * then compensate with padding */ - padding-left: 24px; - padding-right: 24px; - margin-left: -24px; - margin-right: -24px; + padding-inline: $spacing-24; + margin-inline: calc(-1 * $spacing-24); border-top: 1px solid $quinary-content; display: flex; @@ -315,7 +312,7 @@ limitations under the License. } .mx_InviteDialog_transferConsultConnect_pushRight { - margin-left: auto; + margin-inline-start: auto; } .mx_InviteDialog_userDirectoryIcon::before { @@ -455,5 +452,5 @@ limitations under the License. } .mx_InviteDialog_identityServer { - margin-top: 1em; + margin-top: 1em; // TODO: Use a spacing variable }