Skip to content

Commit e160b5d

Browse files
GVodyanovGVodyanov
authored
Use css variables instead of magic numbers (#10919)
refactor: use css variables instead of magic numbers Signed-off-by: Grigory V <scratchx@gmx.com>
1 parent d07aed4 commit e160b5d

11 files changed

+88
-88
lines changed

‎src/components/AccountForm.vue

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -682,11 +682,11 @@ export default {
682682
flex-grow: 1;
683683
text-align: center;
684684
color: var(--color-text-lighter);
685-
margin-bottom: 10px;
685+
margin-bottom: calc(var(--default-grid-baseline) * 2 + var(--default-grid-baseline) / 2);
686686
}
687687

688688
:deep(.tabs-component-tab.is-active) {
689-
border-bottom: 1px solid black;
689+
border-bottom: var(--border-width-input) solid black;
690690
font-weight: bold;
691691
}
692692

@@ -695,7 +695,7 @@ export default {
695695
}
696696

697697
.tabs-component-panels {
698-
padding-top: 20px;
698+
padding-top: calc(var(--default-grid-baseline) * 5);
699699
}
700700

701701
.tabs-component-panels label {
@@ -706,7 +706,7 @@ export default {
706706

707707
.tabs-component-panels input,
708708
.tabs-component-panels select {
709-
margin-bottom: 10px;
709+
margin-bottom: calc(var(--default-grid-baseline) * 2);
710710
}
711711
</style>
712712

@@ -740,15 +740,15 @@ input[type='radio'][disabled] + label {
740740
.account-form__submit-buttons {
741741
display: flex;
742742
justify-content: center;
743-
margin-top: 5px;
743+
margin-top: var(--default-grid-baseline);
744744
}
745745
.account-form__submit-button {
746746
display: flex;
747747
align-items: center;
748748
}
749749
.account-form--feedback {
750750
color: var(--color-text-maxcontrast);
751-
margin-top: 5px;
751+
margin-top: var(--default-grid-baseline);
752752
text-align: center;
753753
}
754754
.account-form--error {
@@ -759,9 +759,9 @@ input[type='radio'][disabled] + label {
759759
z-index: 1001;
760760
width: 300px;
761761
top: 15%;
762-
padding-bottom: 50px;
762+
padding-bottom: calc(var(--default-grid-baseline) * 12);
763763
margin: 0 auto;
764-
padding-top: 30px;
764+
padding-top: calc(var(--default-grid-baseline) * 7);
765765
}
766766
#account-form input {
767767
width: 100%;

‎src/components/AccountSettings.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -206,19 +206,19 @@ export default {
206206
}
207207
}
208208
.settings-hint {
209-
margin-top: -12px;
210-
margin-bottom: 6px;
209+
margin-top: calc(var(--default-grid-baseline) * -3);
210+
margin-bottom: calc(var(--default-grid-baseline) * 2);
211211
color: var(--color-text-maxcontrast);
212212
}
213213
h2 {
214214
font-weight: bold;
215215
font-size: 20px;
216-
margin-bottom: 12px;
217-
margin-left: -30px;
218-
line-height: 30px;
216+
margin-bottom: calc(var(--default-grid-baseline) * 3);
217+
margin-left: calc(var(--default-grid-baseline) * -7);
218+
line-height: calc(var(--default-grid-baseline) * 7);
219219
color: var(--color-text-light);
220220
}
221221
.app-settings-section {
222-
margin-bottom: 45px;
222+
margin-bottom: calc(var(--default-grid-baseline) * 12);
223223
}
224224
</style>

‎src/components/AppSettingsMenu.vue

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -569,22 +569,22 @@ export default {
569569
p.app-settings span.loading-icon {
570570
display: inline-block;
571571
vertical-align: middle;
572-
padding: 5px 0;
572+
padding: var(--default-grid-baseline) 0;
573573
}
574574
p.app-settings {
575-
padding: 10px 0;
575+
padding: calc(var(--default-grid-baseline) * 2) 0;
576576
}
577577
.app-settings-button {
578578
display: inline-flex;
579579
background-position: 10px center;
580580
text-align: left;
581-
margin-top: 6px;
581+
margin-top: calc(var(--default-grid-baseline) * 2);
582582
}
583583
.app-settings-button.button.primary.new-button {
584584
color: var(--color-primary-element-text);
585585
//this style will be removed after we migrate also the 'add mail account' to material design
586586
padding-left: 34px;
587-
gap: 4px;
587+
gap: var(--default-grid-baseline);
588588
width: fit-content;
589589
}
590590
.app-settings-link {
@@ -598,13 +598,13 @@ p.app-settings {
598598
justify-content: flex-start;
599599
}
600600
.mailvelope-section {
601-
padding-top: 15px;
601+
padding-top: calc(var(--default-grid-baseline) * 4);
602602

603603
a.button {
604604
display: flex;
605605
align-items: center;
606606
line-height: normal;
607-
min-height: 44px;
607+
min-height: calc(var(--default-grid-baseline) * 11);
608608
font-size: unset;
609609

610610
&:focus-visible,
@@ -615,13 +615,13 @@ p.app-settings {
615615
}
616616
.material-design-icon {
617617
&.lock-icon {
618-
margin-right: 10px;
618+
margin-right: calc(var(--default-grid-baseline) * 2);
619619
}
620620

621621
}
622622
.section-title {
623-
margin-top: 20px;
624-
margin-bottom: 10px;
623+
margin-top: calc(var(--default-grid-baseline) * 5);
624+
margin-bottom: calc(var(--default-grid-baseline) * 2);
625625
}
626626
.sorting {
627627
display: flex;
@@ -634,8 +634,8 @@ p.app-settings {
634634
width: 100%;
635635
}
636636
.settings-hint {
637-
margin-top: -12px;
638-
margin-bottom: 6px;
637+
margin-top: calc(var(--default-grid-baseline) * -3);
638+
margin-bottom: calc(var(--default-grid-baseline) * 2);
639639
color: var(--color-text-maxcontrast);
640640
}
641641
.app-settings-section {

‎src/components/CalendarPickerOption.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export default {
4545
height: 12px;
4646
border-radius: 50%;
4747
border: none;
48-
margin-right: 8px;
49-
flex-basis: 12px;
48+
margin-right: calc(var(--default-grid-baseline) * 2);
49+
flex-basis: calc(var(--default-grid-baseline) * 3);
5050
flex-shrink: 0;
5151
}
5252

‎src/components/Composer.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1482,7 +1482,7 @@ export default {
14821482

14831483
&.mail-account {
14841484
border-top: none;
1485-
padding-top: 10px;
1485+
padding-top: calc(var(--default-grid-baseline) * 2);
14861486
}
14871487

14881488
input,
@@ -1497,15 +1497,15 @@ export default {
14971497
display: flex;
14981498
align-items: flex-start;
14991499
justify-content: space-between;
1500-
padding-top: 2px;
1500+
padding-top: calc(var(--default-grid-baseline) * 0.5);
15011501

15021502
button {
15031503
margin-top: 0;
15041504
margin-bottom: 0;
15051505
background-color: transparent;
15061506
border: none;
15071507
opacity: 0.5;
1508-
padding: 10px 16px;
1508+
padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 4);
15091509
}
15101510

15111511
.select {
@@ -1522,7 +1522,7 @@ export default {
15221522
.subject {
15231523
font-size: 15px;
15241524
font-weight: bold;
1525-
margin: 3px 0 !important;
1525+
margin: var(--default-grid-baseline) 0 !important;
15261526
padding: 0 !important;
15271527
width: 100%;
15281528

@@ -1554,7 +1554,7 @@ export default {
15541554
}
15551555

15561556
.draft-status {
1557-
padding: 2px;
1557+
padding: calc(var(--default-grid-baseline) * 0.5);
15581558
opacity: 0.5;
15591559
font-size: small;
15601560
display: block;
@@ -1625,11 +1625,11 @@ export default {
16251625
.send-button {
16261626
display: flex;
16271627
align-items: center;
1628-
padding: 10px 15px;
1629-
margin-left: 5px;
1628+
padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 4);
1629+
margin-left: var(--default-grid-baseline);
16301630
}
16311631
.send-button .send-icon {
1632-
padding-right: 5px;
1632+
padding-right: var(--default-grid-baseline);
16331633
}
16341634
.centered-content {
16351635
margin-top: 0 !important;
@@ -1639,12 +1639,12 @@ export default {
16391639
align-items: center;
16401640
flex-direction: row;
16411641
justify-content: space-between;
1642-
bottom: 5px;
1642+
bottom: var(--default-grid-baseline);
16431643
}
16441644
.composer-actions--primary-actions {
16451645
display: flex;
16461646
flex-direction: row;
1647-
padding-left: 10px;
1647+
padding-left: calc(var(--default-grid-baseline) * 2);
16481648
align-items: center;
16491649
}
16501650
.composer-actions--secondary-actions {

‎src/components/ComposerSessionIndicator.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,10 +97,10 @@ export default {
9797

9898
display: flex;
9999
align-items: center;
100-
gap: 5px;
100+
gap: var(--default-grid-baseline);
101101

102102
width: 360px;
103-
padding: 0 8px;
103+
padding: 0 calc(var(--default-grid-baseline) * 2);
104104

105105
// Retain border radius from outer body container for visual consistency
106106
border-radius: var(--body-container-radius);

‎src/components/MailboxPicker.vue

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -191,12 +191,12 @@ export default {
191191
width: 100%;
192192
height: 100%;
193193
flex-direction: column;
194-
padding: 15px;
194+
padding: calc(var(--default-grid-baseline) * 4);
195195
}
196196

197197
.crumbs {
198198
display: inline-flex;
199-
padding-right: 0px;
199+
padding-right: 0;
200200
flex-wrap: wrap;
201201

202202
.level {
@@ -205,15 +205,15 @@ export default {
205205
min-width: 0px;
206206
flex: 0 0 auto;
207207
order: 1;
208-
padding-right: 7px;
208+
padding-right: calc(var(--default-grid-baseline) * 2);
209209
background-position: right center;
210210
background-size: auto 24px;
211-
margin-top: -10px;
211+
margin-top: calc(var(--default-grid-baseline) * -2.5);
212212
}
213213

214214
a {
215215
position: relative;
216-
padding: 12px;
216+
padding: calc(var(--default-grid-baseline) * 3);
217217
opacity: 0.5;
218218
text-overflow: ellipsis;
219219
white-space: nowrap;
@@ -249,7 +249,7 @@ export default {
249249
}
250250

251251
&:not(:last-child) {
252-
border-bottom: 1px solid var(--color-border);
252+
border-bottom: var(--border-width-input) solid var(--color-border);
253253
}
254254
}
255255

@@ -266,13 +266,13 @@ export default {
266266
.mailbox-icon {
267267
width: 24px;
268268
height: 24px;
269-
padding: 14px;
269+
padding: calc(var(--default-grid-baseline) * 3);
270270
opacity: 0.9;
271271
background-size: 24px;
272272
}
273273

274274
.mailbox-title {
275-
padding: 14px 14px 14px 0;
275+
padding: calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 3) 0;
276276
flex: 1;
277277
overflow: hidden;
278278
white-space: nowrap;
@@ -283,14 +283,14 @@ export default {
283283
.buttons {
284284
display: flex;
285285
justify-content: flex-end;
286-
padding-top: 10px;
286+
padding-top: calc(var(--default-grid-baseline) * 2);
287287

288288
.spinner {
289-
margin-right: 5px;
289+
margin-right: var(--default-grid-baseline);
290290
}
291291
}
292292
.material-design-icon {
293293
opacity: .7;
294-
margin-right: 6px;
294+
margin-right: calc(var(--default-grid-baseline) * 1.5);
295295
}
296296
</style>

‎src/components/NewMessageButtonHeader.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export default {
9393
align-items: center;
9494
justify-content: space-between;
9595
padding: calc(var(--default-grid-baseline, 4px) * 2);
96-
gap: 4px;
96+
gap: var(--default-grid-baseline);
9797
}
9898
.refresh__button {
9999
background-color: transparent;

0 commit comments

Comments
 (0)