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

Commit ee4484f

Browse files
luixxiulluixxiul
authored
Use spacing variables on _SpotlightDialog.scss (#8871)
1 parent da9f2f6 commit ee4484f

File tree

1 file changed

+36
-36
lines changed

1 file changed

+36
-36
lines changed

‎res/css/views/dialogs/_SpotlightDialog.scss‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ limitations under the License.
2424

2525
#mx_SpotlightDialog_keyboardPrompt {
2626
position: absolute;
27-
padding: 8px;
27+
padding: $spacing-8;
2828
border-radius: 8px;
2929
background-color: $background;
3030
top: -60px; // relative to the top of the modal
@@ -36,8 +36,8 @@ limitations under the License.
3636

3737
> span > div {
3838
display: inline-block;
39-
padding: 2px 4px;
40-
margin: 0 4px;
39+
padding: 2px $spacing-4; // TODO: Use a spacing variable
40+
margin: 0 $spacing-4;
4141
border-radius: 6px;
4242
background-color: $quinary-content;
4343
vertical-align: middle;
@@ -58,20 +58,20 @@ limitations under the License.
5858
.mx_SpotlightDialog_searchBox {
5959
margin: 0;
6060
border: none;
61-
padding: 12px 16px;
61+
padding: $spacing-12 $spacing-16;
6262
border-bottom: 1px solid $system;
6363

6464
> .mx_SpotlightDialog_filter {
6565
display: flex;
6666
align-content: center;
6767
align-items: center;
6868
border-radius: 8px;
69-
margin-right: 8px;
69+
margin-right: $spacing-8;
7070
background-color: $quinary-content;
7171
vertical-align: middle;
7272
color: $primary-content;
7373
position: relative;
74-
padding: 4px 8px 4px 37px;
74+
padding: $spacing-4 $spacing-8 $spacing-4 37px; // TODO: Use a spacing variable
7575

7676
&::before {
7777
background-color: $secondary-content;
@@ -82,7 +82,7 @@ limitations under the License.
8282
width: 18px;
8383
height: 18px;
8484
position: absolute;
85-
left: 8px;
85+
left: $spacing-8;
8686
top: 50%;
8787
transform: translateY(-50%);
8888
}
@@ -102,7 +102,7 @@ limitations under the License.
102102
height: 16px;
103103
background: $system;
104104
border-radius: 8px;
105-
margin-left: 8px;
105+
margin-left: $spacing-8;
106106
text-align: center;
107107
line-height: 16px;
108108
color: $secondary-content;
@@ -141,14 +141,14 @@ limitations under the License.
141141
flex-grow: 0;
142142
width: unset;
143143
height: unset;
144-
margin-left: 16px;
144+
margin-left: $spacing-16;
145145
}
146146
}
147147

148148
#mx_SpotlightDialog_content {
149149
height: 100%;
150150
overflow-y: auto;
151-
padding: 16px;
151+
padding: $spacing-16;
152152

153153
.mx_SpotlightDialog_section {
154154
> h4, > .mx_SpotlightDialog_sectionHeader > h4 {
@@ -160,18 +160,18 @@ limitations under the License.
160160
}
161161

162162
> h4 {
163-
margin-bottom: 8px;
163+
margin-bottom: $spacing-8;
164164
}
165165

166166
.mx_SpotlightDialog_sectionHeader {
167167
display: flex;
168168
justify-content: space-between;
169169
align-items: center;
170-
margin-bottom: 8px;
170+
margin-bottom: $spacing-8;
171171
}
172172

173173
& + .mx_SpotlightDialog_section {
174-
margin-top: 24px;
174+
margin-top: $spacing-24;
175175
}
176176
}
177177

@@ -185,7 +185,7 @@ limitations under the License.
185185

186186
.mx_SpotlightDialog_option {
187187
border-radius: 8px;
188-
padding: 4px;
188+
padding: $spacing-4;
189189
color: $primary-content;
190190
font-size: $font-12px;
191191
line-height: $font-15px;
@@ -199,11 +199,11 @@ limitations under the License.
199199
text-overflow: ellipsis;
200200

201201
.mx_DecoratedRoomAvatar {
202-
margin: 0 9px 4px; // maintain centering
202+
margin: 0 9px $spacing-4; // maintain centering
203203
}
204204

205205
& + .mx_SpotlightDialog_option {
206-
margin-left: 16px;
206+
margin-left: $spacing-16;
207207
}
208208

209209
&:hover, &[aria-selected=true] {
@@ -217,7 +217,7 @@ limitations under the License.
217217
.mx_SpotlightDialog_otherSearches,
218218
.mx_SpotlightDialog_hiddenResults {
219219
.mx_SpotlightDialog_option {
220-
padding: 6px 4px;
220+
padding: 6px $spacing-4; // TODO: Use a spacing variable
221221
border-radius: 8px;
222222
font-size: $font-15px;
223223
line-height: $font-24px;
@@ -233,20 +233,20 @@ limitations under the License.
233233
align-items: start;
234234

235235
.mx_AccessibleButton {
236-
padding: 4px 20px;
237-
margin: 2px 4px;
236+
padding: $spacing-4 $spacing-20;
237+
margin: 2px $spacing-4; // TODO: Use a spacing variable
238238
}
239239

240240
.mx_SpotlightDialog_enterPrompt {
241-
margin-top: 9px;
242-
margin-right: 8px;
241+
margin-top: 9px; // TODO: Use a spacing variable
242+
margin-right: $spacing-8;
243243
}
244244
}
245245

246246
> .mx_SpotlightDialog_metaspaceResult,
247247
> .mx_DecoratedRoomAvatar,
248248
> .mx_BaseAvatar {
249-
margin-right: 8px;
249+
margin-right: $spacing-8;
250250
width: 24px;
251251
height: 24px;
252252

@@ -266,7 +266,7 @@ limitations under the License.
266266
display: flex;
267267
flex-direction: row;
268268
line-height: $font-24px;
269-
margin-right: 8px;
269+
margin-right: $spacing-8;
270270

271271
.mx_SpotlightDialog_result_publicRoomName {
272272
color: $primary-content;
@@ -277,7 +277,7 @@ limitations under the License.
277277
.mx_SpotlightDialog_result_publicRoomAlias {
278278
color: $tertiary-content;
279279
font-size: $font-12px;
280-
margin-left: 8px;
280+
margin-left: $spacing-8;
281281
overflow: hidden;
282282
text-overflow: ellipsis;
283283
}
@@ -295,7 +295,7 @@ limitations under the License.
295295
}
296296

297297
.mx_NotificationBadge {
298-
margin-left: 8px;
298+
margin-left: $spacing-8;
299299
}
300300

301301
&:hover, &[aria-selected=true] {
@@ -310,12 +310,12 @@ limitations under the License.
310310

311311
.mx_SpotlightDialog_inviteLink,
312312
.mx_SpotlightDialog_createRoom {
313-
margin-top: 8px;
313+
margin-top: $spacing-8;
314314

315315
.mx_AccessibleButton {
316316
position: relative;
317317
margin: 0;
318-
padding: 3px 8px 3px 28px;
318+
padding: 3px $spacing-8 3px $spacing-28; // TODO: Use a spacing variable
319319

320320
&::before {
321321
content: "";
@@ -324,7 +324,7 @@ limitations under the License.
324324
mask-repeat: no-repeat;
325325
mask-position: center;
326326
mask-size: contain;
327-
left: 8px;
327+
left: $spacing-8;
328328
width: 16px;
329329
height: 16px;
330330
background: $accent;
@@ -345,7 +345,7 @@ limitations under the License.
345345
.mx_SpotlightDialog_joinRoomAlias,
346346
.mx_SpotlightDialog_explorePublicRooms,
347347
.mx_SpotlightDialog_startGroupChat {
348-
padding-left: 32px;
348+
padding-left: $spacing-32;
349349
position: relative;
350350

351351
&::before {
@@ -357,7 +357,7 @@ limitations under the License.
357357
width: 24px;
358358
height: 24px;
359359
position: absolute;
360-
left: 4px;
360+
left: $spacing-4;
361361
top: 50%;
362362
transform: translateY(-50%);
363363
}
@@ -398,8 +398,8 @@ limitations under the License.
398398
}
399399

400400
.mx_SpotlightDialog_result_details {
401-
margin-left: 8px;
402-
margin-right: 8px;
401+
margin-left: $spacing-8;
402+
margin-right: $spacing-8;
403403
color: $tertiary-content;
404404
font-size: $font-12px;
405405
line-height: $font-15px;
@@ -417,13 +417,13 @@ limitations under the License.
417417
}
418418

419419
.mx_SpotlightDialog_enterPrompt {
420-
padding: 2px 4px;
420+
padding: 2px $spacing-4; // TODO: Use a spacing variable
421421
font-size: $font-12px;
422422
line-height: $font-15px;
423423
color: $tertiary-content;
424424
border-radius: 6px;
425425
background-color: $quinary-content;
426-
margin: 0 4px 0 auto;
426+
margin: 0 $spacing-4 0 auto;
427427
display: none;
428428
}
429429

@@ -455,7 +455,7 @@ limitations under the License.
455455
font-size: $font-12px;
456456
line-height: $font-15px;
457457
color: $secondary-content;
458-
padding: 12px 16px 16px;
458+
padding: $spacing-12 $spacing-16 $spacing-16;
459459
display: flex;
460460
border-top: 1px solid $quinary-content;
461461

@@ -474,7 +474,7 @@ limitations under the License.
474474
}
475475

476476
.mx_AccessibleButton_kind_primary_outline {
477-
padding: 4px 8px;
477+
padding: $spacing-4 $spacing-8;
478478
border-color: $secondary-content;
479479
color: $secondary-content;
480480
margin-left: auto;

0 commit comments

Comments
 (0)