mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 03:05:51 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improve _InviteDialog.scss by applying spacing variables (#8869)

Browse source
This commit is contained in:
Suguru Hirahara 2022-06-19 08:17:05 +00:00 committed by GitHub
parent edf071acae
commit da9f2f6caa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
res/css/views/dialogs/_InviteDialog.scss
View file

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