PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use spacing variables on _SpotlightDialog.scss (#8871)

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

72
res/css/views/dialogs/_SpotlightDialog.scss
View file

@ -24,7 +24,7 @@ limitations under the License.
#mx_SpotlightDialog_keyboardPrompt {
position: absolute;
padding: 8px;
padding: $spacing-8;
border-radius: 8px;
background-color: $background;
top: -60px; // relative to the top of the modal
@ -36,8 +36,8 @@ limitations under the License.
> span > div {
display: inline-block;
padding: 2px 4px;
margin: 0 4px;
padding: 2px $spacing-4; // TODO: Use a spacing variable
margin: 0 $spacing-4;
border-radius: 6px;
background-color: $quinary-content;
vertical-align: middle;
@ -58,7 +58,7 @@ limitations under the License.
.mx_SpotlightDialog_searchBox {
margin: 0;
border: none;
padding: 12px 16px;
padding: $spacing-12 $spacing-16;
border-bottom: 1px solid $system;
> .mx_SpotlightDialog_filter {
@ -66,12 +66,12 @@ limitations under the License.
align-content: center;
align-items: center;
border-radius: 8px;
margin-right: 8px;
margin-right: $spacing-8;
background-color: $quinary-content;
vertical-align: middle;
color: $primary-content;
position: relative;
padding: 4px 8px 4px 37px;
padding: $spacing-4 $spacing-8 $spacing-4 37px; // TODO: Use a spacing variable
&::before {
background-color: $secondary-content;
@ -82,7 +82,7 @@ limitations under the License.
width: 18px;
height: 18px;
position: absolute;
left: 8px;
left: $spacing-8;
top: 50%;
transform: translateY(-50%);
}
@ -102,7 +102,7 @@ limitations under the License.
height: 16px;
background: $system;
border-radius: 8px;
margin-left: 8px;
margin-left: $spacing-8;
text-align: center;
line-height: 16px;
color: $secondary-content;
@ -141,14 +141,14 @@ limitations under the License.
flex-grow: 0;
width: unset;
height: unset;
margin-left: 16px;
margin-left: $spacing-16;
}
}
#mx_SpotlightDialog_content {
height: 100%;
overflow-y: auto;
padding: 16px;
padding: $spacing-16;
.mx_SpotlightDialog_section {
> h4, > .mx_SpotlightDialog_sectionHeader > h4 {
@ -160,18 +160,18 @@ limitations under the License.
}
> h4 {
margin-bottom: 8px;
margin-bottom: $spacing-8;
}
.mx_SpotlightDialog_sectionHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
margin-bottom: $spacing-8;
}
& + .mx_SpotlightDialog_section {
margin-top: 24px;
margin-top: $spacing-24;
}
}
@ -185,7 +185,7 @@ limitations under the License.
.mx_SpotlightDialog_option {
border-radius: 8px;
padding: 4px;
padding: $spacing-4;
color: $primary-content;
font-size: $font-12px;
line-height: $font-15px;
@ -199,11 +199,11 @@ limitations under the License.
text-overflow: ellipsis;
.mx_DecoratedRoomAvatar {
margin: 0 9px 4px; // maintain centering
margin: 0 9px $spacing-4; // maintain centering
}
& + .mx_SpotlightDialog_option {
margin-left: 16px;
margin-left: $spacing-16;
}
&:hover, &[aria-selected=true] {
@ -217,7 +217,7 @@ limitations under the License.
.mx_SpotlightDialog_otherSearches,
.mx_SpotlightDialog_hiddenResults {
.mx_SpotlightDialog_option {
padding: 6px 4px;
padding: 6px $spacing-4; // TODO: Use a spacing variable
border-radius: 8px;
font-size: $font-15px;
line-height: $font-24px;
@ -233,20 +233,20 @@ limitations under the License.
align-items: start;
.mx_AccessibleButton {
padding: 4px 20px;
margin: 2px 4px;
padding: $spacing-4 $spacing-20;
margin: 2px $spacing-4; // TODO: Use a spacing variable
}
.mx_SpotlightDialog_enterPrompt {
margin-top: 9px;
margin-right: 8px;
margin-top: 9px; // TODO: Use a spacing variable
margin-right: $spacing-8;
}
}
> .mx_SpotlightDialog_metaspaceResult,
> .mx_DecoratedRoomAvatar,
> .mx_BaseAvatar {
margin-right: 8px;
margin-right: $spacing-8;
width: 24px;
height: 24px;
@ -266,7 +266,7 @@ limitations under the License.
display: flex;
flex-direction: row;
line-height: $font-24px;
margin-right: 8px;
margin-right: $spacing-8;
.mx_SpotlightDialog_result_publicRoomName {
color: $primary-content;
@ -277,7 +277,7 @@ limitations under the License.
.mx_SpotlightDialog_result_publicRoomAlias {
color: $tertiary-content;
font-size: $font-12px;
margin-left: 8px;
margin-left: $spacing-8;
overflow: hidden;
text-overflow: ellipsis;
}
@ -295,7 +295,7 @@ limitations under the License.
}
.mx_NotificationBadge {
margin-left: 8px;
margin-left: $spacing-8;
}
&:hover, &[aria-selected=true] {
@ -310,12 +310,12 @@ limitations under the License.
.mx_SpotlightDialog_inviteLink,
.mx_SpotlightDialog_createRoom {
margin-top: 8px;
margin-top: $spacing-8;
.mx_AccessibleButton {
position: relative;
margin: 0;
padding: 3px 8px 3px 28px;
padding: 3px $spacing-8 3px $spacing-28; // TODO: Use a spacing variable
&::before {
content: "";
@ -324,7 +324,7 @@ limitations under the License.
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
left: 8px;
left: $spacing-8;
width: 16px;
height: 16px;
background: $accent;
@ -345,7 +345,7 @@ limitations under the License.
.mx_SpotlightDialog_joinRoomAlias,
.mx_SpotlightDialog_explorePublicRooms,
.mx_SpotlightDialog_startGroupChat {
padding-left: 32px;
padding-left: $spacing-32;
position: relative;
&::before {
@ -357,7 +357,7 @@ limitations under the License.
width: 24px;
height: 24px;
position: absolute;
left: 4px;
left: $spacing-4;
top: 50%;
transform: translateY(-50%);
}
@ -398,8 +398,8 @@ limitations under the License.
}
.mx_SpotlightDialog_result_details {
margin-left: 8px;
margin-right: 8px;
margin-left: $spacing-8;
margin-right: $spacing-8;
color: $tertiary-content;
font-size: $font-12px;
line-height: $font-15px;
@ -417,13 +417,13 @@ limitations under the License.
}
.mx_SpotlightDialog_enterPrompt {
padding: 2px 4px;
padding: 2px $spacing-4; // TODO: Use a spacing variable
font-size: $font-12px;
line-height: $font-15px;
color: $tertiary-content;
border-radius: 6px;
background-color: $quinary-content;
margin: 0 4px 0 auto;
margin: 0 $spacing-4 0 auto;
display: none;
}
@ -455,7 +455,7 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
padding: 12px 16px 16px;
padding: $spacing-12 $spacing-16 $spacing-16;
display: flex;
border-top: 1px solid $quinary-content;
@ -474,7 +474,7 @@ limitations under the License.
}
.mx_AccessibleButton_kind_primary_outline {
padding: 4px 8px;
padding: $spacing-4 $spacing-8;
border-color: $secondary-content;
color: $secondary-content;
margin-left: auto;