mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +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 {
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
}