Skip to content

Commit 8e1d242

Browse files
devvaannshabose
devvaannsh
authored and
abose
committed
fix: consistent spacing between live preview toolbar buttons
1 parent 3559c1b commit 8e1d242

2 files changed

Lines changed: 60 additions & 112 deletions

File tree

‎src/extensionsIntegrated/Phoenix-live-preview/images/sprites.svg‎

Lines changed: 4 additions & 4 deletions
Loading

‎src/extensionsIntegrated/Phoenix-live-preview/live-preview.css‎

Lines changed: 56 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
:root {
22
--toolbar-height: 30px;
3+
--lp-toolbar-btn: 24px;
4+
--lp-toolbar-chevron: 14px;
5+
--lp-toolbar-gap: 6px;
6+
--lp-toolbar-inset: 6px;
7+
--lp-toolbar-fg: #a0a0a0;
8+
--lp-toolbar-border: rgba(255, 255, 255, 0.1);
39
}
410

511
.live-preview-browser-btn {
612
opacity: 0;
713
visibility: hidden;
814
transition: opacity 1s, visibility 0s linear 1s;
9-
display: flex;
10-
align-items: center;
11-
justify-content: center;
12-
padding: 0;
1315
}
1416

1517
.live-preview-browser-btn img {
@@ -214,17 +216,21 @@
214216

215217
.plugin-toolbar {
216218
height: var(--toolbar-height);
217-
color: #a0a0a0;
218-
display: flex;
219-
justify-content: center;
220-
align-content: center;
221-
flex-direction: column;
219+
color: var(--lp-toolbar-fg);
222220
}
223221

224222
.toolbar-button {
223+
width: var(--lp-toolbar-btn);
224+
height: var(--lp-toolbar-btn);
225+
padding: 0;
226+
margin: 0;
227+
display: flex;
228+
align-items: center;
229+
justify-content: center;
230+
flex-shrink: 0;
231+
box-sizing: border-box;
225232
background-color: transparent;
226-
width: 28px;
227-
height: 22px;
233+
color: var(--lp-toolbar-fg);
228234
}
229235

230236
#live-preview-plugin-toolbar .btn-alt-quiet:hover,
@@ -248,23 +254,19 @@
248254
}
249255

250256
.open-icon {
251-
background: url("./images/sprites.svg#open-icon") no-repeat 72.5%;
252-
width: 30px;
253-
margin-left: 4px;
257+
background: url("./images/sprites.svg#open-icon") center / 20px no-repeat;
254258
}
255259

256260
.pin-icon {
257-
background: url("./images/sprites.svg#pinned-icon") no-repeat 72.5%;
258-
width: 30px;
261+
background: url("./images/sprites.svg#pinned-icon") center / 20px no-repeat;
259262
}
260263

261264
.unpin-icon {
262-
background: url("./images/sprites.svg#unpinned-icon") no-repeat 72.5%;
263-
width: 30px;
265+
background: url("./images/sprites.svg#unpinned-icon") center / 20px no-repeat;
264266
}
265267

266268
.reload-icon {
267-
background: url("./images/sprites.svg#reload-icon") center no-repeat;
269+
background: url("./images/sprites.svg#reload-icon") center / 20px no-repeat;
268270
}
269271

270272
#live-preview-plugin-toolbar:hover .lp-settings-icon {
@@ -281,42 +283,8 @@
281283

282284
.lp-settings-icon {
283285
opacity: 0;
284-
color: #a0a0a0;
285286
visibility: hidden;
286-
transition: opacity 1s, visibility 0s linear 1s;
287-
width: 30px;
288-
height: 22px;
289-
padding: 1px 6px;
290-
flex-shrink: 0;
291-
margin-top: 0;
292-
}
293-
294-
.lp-device-size-btn-group {
295-
display: flex;
296-
align-items: center;
297-
flex-shrink: 0;
298-
margin: 0 4px 0 3px;
299-
border: 1px solid transparent;
300-
border-radius: 3px;
301-
box-sizing: border-box;
302-
}
303-
304-
.lp-device-size-btn-group:hover {
305-
border-color: rgba(255, 255, 255, 0.1);
306-
}
307-
308-
.lp-device-size-icon {
309-
display: flex;
310-
align-items: center;
311-
justify-content: center;
312-
width: 20px;
313-
cursor: pointer;
314-
background: transparent;
315-
box-shadow: none !important;
316-
border: none;
317-
color: #a0a0a0;
318-
padding: 0;
319-
margin: 0;
287+
transition: opacity 1s, visibility 0s linear 1s;
320288
}
321289

322290
.lp-device-size-icon:hover,
@@ -327,25 +295,8 @@
327295
box-shadow: none !important;
328296
}
329297

330-
.lp-device-size-dropdown-chevron {
331-
display: flex;
332-
align-items: center;
333-
justify-content: center;
334-
cursor: pointer;
335-
background: transparent;
336-
box-shadow: none !important;
337-
border: none;
338-
border-left: 1px solid transparent;
339-
border-radius: 0 3px 3px 0;
340-
color: #a0a0a0;
341-
padding: 0 4px;
342-
margin: 0;
343-
height: 22px;
344-
font-size: 10px;
345-
}
346-
347298
.lp-device-size-btn-group:hover .lp-device-size-dropdown-chevron {
348-
border-left-color: rgba(255, 255, 255, 0.1);
299+
border-left-color: var(--lp-toolbar-border);
349300
}
350301

351302
.lp-device-size-dropdown-chevron:hover,
@@ -391,46 +342,37 @@
391342
flex-direction: row;
392343
}
393344

394-
.lp-toolbar-left {
345+
.lp-toolbar-left,
346+
.lp-toolbar-centre,
347+
.lp-toolbar-right {
395348
display: flex;
396349
align-items: center;
397-
gap: 6px;
398-
padding-left: 6px;
350+
gap: var(--lp-toolbar-gap);
399351
box-sizing: border-box;
400-
flex-shrink: 0;
352+
}
353+
354+
.lp-toolbar-left {
355+
flex: 1 1 0;
356+
padding-left: var(--lp-toolbar-inset);
401357
}
402358

403359
.lp-toolbar-centre {
404-
flex: 1;
360+
flex: 0 1 auto;
405361
min-width: 0;
406-
display: flex;
407362
justify-content: center;
408-
align-items: center;
409363
overflow: hidden;
410364
}
411365

412366
.lp-toolbar-right {
413-
display: flex;
414-
align-items: center;
367+
flex: 1 1 0;
368+
padding-right: var(--lp-toolbar-inset);
415369
justify-content: flex-end;
416-
flex-shrink: 0;
417370
}
418371

419372
#reloadLivePreviewButton,
420373
#designModeToggleLivePreviewButton {
421-
width: 28px;
422-
height: 24px;
423-
margin: 0;
424-
padding: 0;
425-
display: flex;
426-
align-items: center;
427-
justify-content: center;
428-
background: transparent;
429-
color: #a0a0a0;
430374
border: 1px solid transparent;
431375
border-radius: 3px;
432-
box-sizing: border-box;
433-
flex-shrink: 0;
434376
}
435377

436378
#live-preview-plugin-toolbar #reloadLivePreviewButton:hover,
@@ -440,34 +382,38 @@
440382
box-shadow: none !important;
441383
}
442384

443-
.lp-mode-btn-group {
385+
.lp-mode-btn-group,
386+
.lp-device-size-btn-group {
444387
display: flex;
445388
align-items: stretch;
446-
height: 24px;
389+
height: var(--lp-toolbar-btn);
447390
margin: 0;
448391
border: 1px solid transparent;
449392
border-radius: 3px;
450393
box-sizing: border-box;
451394
flex-shrink: 0;
452395
}
453396

454-
.lp-mode-btn-group:hover {
455-
border-color: rgba(255, 255, 255, 0.1);
397+
.lp-mode-btn-group:hover,
398+
.lp-device-size-btn-group:hover {
399+
border-color: var(--lp-toolbar-border);
456400
}
457401

458-
.lp-mode-icon {
402+
.lp-mode-icon,
403+
.lp-device-size-icon {
459404
display: flex;
460405
align-items: center;
461406
justify-content: center;
462-
width: 24px;
407+
width: var(--lp-toolbar-btn);
463408
height: 100%;
409+
padding: 0;
410+
margin: 0;
411+
flex-shrink: 0;
464412
cursor: pointer;
465413
background: transparent;
466414
box-shadow: none !important;
467415
border: none;
468-
color: #a0a0a0;
469-
padding: 0;
470-
margin: 0;
416+
color: var(--lp-toolbar-fg);
471417
}
472418

473419
#live-preview-plugin-toolbar .lp-mode-icon:hover,
@@ -482,26 +428,28 @@
482428
color: #FBB03B;
483429
}
484430

485-
.lp-mode-dropdown-chevron {
431+
.lp-mode-dropdown-chevron,
432+
.lp-device-size-dropdown-chevron {
486433
display: flex;
487434
align-items: center;
488435
justify-content: center;
489-
width: 14px;
436+
width: var(--lp-toolbar-chevron);
490437
height: 100%;
438+
padding: 0;
439+
margin: 0;
440+
flex-shrink: 0;
491441
cursor: pointer;
492442
background: transparent;
493443
box-shadow: none !important;
494444
border: none;
495445
border-left: 1px solid transparent;
496446
border-radius: 0;
497-
color: #a0a0a0;
498-
padding: 0;
499-
margin: 0;
447+
color: var(--lp-toolbar-fg);
500448
font-size: 10px;
501449
}
502450

503451
.lp-mode-btn-group:hover .lp-mode-dropdown-chevron {
504-
border-left-color: rgba(255, 255, 255, 0.1);
452+
border-left-color: var(--lp-toolbar-border);
505453
}
506454

507455
#live-preview-plugin-toolbar .lp-mode-dropdown-chevron:hover,

0 commit comments

Comments
 (0)