Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Use spacing variables on _SpotlightDialog.scss #8871

Merged
merged 1 commit into from
Jun 19, 2022
Merged

Use spacing variables on _SpotlightDialog.scss #8871

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 36 additions & 36 deletions res/css/views/dialogs/_SpotlightDialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
Expand All @@ -58,20 +58,20 @@ 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 {
display: flex;
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;
Expand All @@ -82,7 +82,7 @@ limitations under the License.
width: 18px;
height: 18px;
position: absolute;
left: 8px;
left: $spacing-8;
top: 50%;
transform: translateY(-50%);
}
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
}

Expand All @@ -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;
Expand All @@ -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] {
Expand All @@ -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;
Expand All @@ -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;

Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -295,7 +295,7 @@ limitations under the License.
}

.mx_NotificationBadge {
margin-left: 8px;
margin-left: $spacing-8;
}

&:hover, &[aria-selected=true] {
Expand All @@ -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: "";
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -357,7 +357,7 @@ limitations under the License.
width: 24px;
height: 24px;
position: absolute;
left: 4px;
left: $spacing-4;
top: 50%;
transform: translateY(-50%);
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}

Expand Down Expand Up @@ -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;

Expand All @@ -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;
Expand Down