From fd775175470bdd5a22768f3be76ae4b39bd1072e Mon Sep 17 00:00:00 2001 From: Grigory V Date: Sat, 22 Mar 2025 11:35:23 +0100 Subject: [PATCH] chore: use css variables instead of magic numbers Signed-off-by: Grigory V --- src/components/AccountForm.vue | 16 ++++---- src/components/AccountSettings.vue | 12 +++--- src/components/AppSettingsMenu.vue | 22 +++++------ src/components/CalendarPickerOption.vue | 4 +- src/components/Composer.vue | 20 +++++----- src/components/ComposerSessionIndicator.vue | 4 +- src/components/MailboxPicker.vue | 22 +++++------ src/components/NewMessageButtonHeader.vue | 2 +- src/components/Thread.vue | 22 +++++------ src/components/ThreadEnvelope.vue | 38 +++++++++---------- .../smime/SmimeCertificateModal.vue | 14 +++---- 11 files changed, 88 insertions(+), 88 deletions(-) diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue index 8cad0c3454..33884f16bd 100644 --- a/src/components/AccountForm.vue +++ b/src/components/AccountForm.vue @@ -682,11 +682,11 @@ export default { flex-grow: 1; text-align: center; color: var(--color-text-lighter); - margin-bottom: 10px; + margin-bottom: calc(var(--default-grid-baseline) * 2); } :deep(.tabs-component-tab.is-active) { - border-bottom: 1px solid black; + border-bottom: var(--border-width-input) solid black; font-weight: bold; } @@ -695,7 +695,7 @@ export default { } .tabs-component-panels { - padding-top: 20px; + padding-top: calc(var(--default-grid-baseline) * 5); } .tabs-component-panels label { @@ -706,7 +706,7 @@ export default { .tabs-component-panels input, .tabs-component-panels select { - margin-bottom: 10px; + margin-bottom: calc(var(--default-grid-baseline) * 2); } @@ -740,7 +740,7 @@ input[type='radio'][disabled] + label { .account-form__submit-buttons { display: flex; justify-content: center; - margin-top: 5px; + margin-top: var(--default-grid-baseline); } .account-form__submit-button { display: flex; @@ -748,7 +748,7 @@ input[type='radio'][disabled] + label { } .account-form--feedback { color: var(--color-text-maxcontrast); - margin-top: 5px; + margin-top: var(--default-grid-baseline); text-align: center; } .account-form--error { @@ -759,9 +759,9 @@ input[type='radio'][disabled] + label { z-index: 1001; width: 300px; top: 15%; - padding-bottom: 50px; + padding-bottom: calc(var(--default-grid-baseline) * 12); margin: 0 auto; - padding-top: 30px; + padding-top: calc(var(--default-grid-baseline) * 7); } #account-form input { width: 100%; diff --git a/src/components/AccountSettings.vue b/src/components/AccountSettings.vue index 0e6c8fdb6a..bf68e8dc6d 100644 --- a/src/components/AccountSettings.vue +++ b/src/components/AccountSettings.vue @@ -206,19 +206,19 @@ export default { } } .settings-hint { - margin-top: -12px; - margin-bottom: 6px; + margin-top: calc(var(--default-grid-baseline) * -3); + margin-bottom: calc(var(--default-grid-baseline) * 2); color: var(--color-text-maxcontrast); } h2 { font-weight: bold; font-size: 20px; - margin-bottom: 12px; - margin-left: -30px; - line-height: 30px; + margin-bottom: calc(var(--default-grid-baseline) * 3); + margin-left: calc(var(--default-grid-baseline) * -7); + line-height: calc(var(--default-grid-baseline) * 7); color: var(--color-text-light); } .app-settings-section { -margin-bottom: 45px; + margin-bottom: calc(var(--default-grid-baseline) * 12); } diff --git a/src/components/AppSettingsMenu.vue b/src/components/AppSettingsMenu.vue index f85290b924..0d08c79fa6 100755 --- a/src/components/AppSettingsMenu.vue +++ b/src/components/AppSettingsMenu.vue @@ -569,22 +569,22 @@ export default { p.app-settings span.loading-icon { display: inline-block; vertical-align: middle; - padding: 5px 0; + padding: var(--default-grid-baseline) 0; } p.app-settings { - padding: 10px 0; + padding: calc(var(--default-grid-baseline) * 2) 0; } .app-settings-button { display: inline-flex; background-position: 10px center; text-align: left; - margin-top: 6px; + margin-top: calc(var(--default-grid-baseline) * 2); } .app-settings-button.button.primary.new-button { color: var(--color-primary-element-text); //this style will be removed after we migrate also the 'add mail account' to material design padding-left: 34px; - gap: 4px; + gap: var(--default-grid-baseline); width: fit-content; } .app-settings-link { @@ -598,13 +598,13 @@ p.app-settings { justify-content: flex-start; } .mailvelope-section { - padding-top: 15px; + padding-top: calc(var(--default-grid-baseline) * 4); a.button { display: flex; align-items: center; line-height: normal; - min-height: 44px; + min-height: calc(var(--default-grid-baseline) * 11); font-size: unset; &:focus-visible, @@ -615,13 +615,13 @@ p.app-settings { } .material-design-icon { &.lock-icon { - margin-right: 10px; + margin-right: calc(var(--default-grid-baseline) * 2); } } .section-title { - margin-top: 20px; - margin-bottom: 10px; + margin-top: calc(var(--default-grid-baseline) * 5); + margin-bottom: calc(var(--default-grid-baseline) * 2); } .sorting { display: flex; @@ -634,8 +634,8 @@ p.app-settings { width: 100%; } .settings-hint { - margin-top: -12px; - margin-bottom: 6px; + margin-top: calc(var(--default-grid-baseline) * -3); + margin-bottom: calc(var(--default-grid-baseline) * 2); color: var(--color-text-maxcontrast); } .app-settings-section { diff --git a/src/components/CalendarPickerOption.vue b/src/components/CalendarPickerOption.vue index 2a6ac35a22..585f7b28a9 100644 --- a/src/components/CalendarPickerOption.vue +++ b/src/components/CalendarPickerOption.vue @@ -45,8 +45,8 @@ export default { height: 12px; border-radius: 50%; border: none; - margin-right: 8px; - flex-basis: 12px; + margin-right: calc(var(--default-grid-baseline) * 2); + flex-basis: calc(var(--default-grid-baseline) * 3); flex-shrink: 0; } diff --git a/src/components/Composer.vue b/src/components/Composer.vue index 7548a063fa..ee229f0179 100644 --- a/src/components/Composer.vue +++ b/src/components/Composer.vue @@ -1475,7 +1475,7 @@ export default { &.mail-account { border-top: none; - padding-top: 10px; + padding-top: calc(var(--default-grid-baseline) * 2); } input, @@ -1490,7 +1490,7 @@ export default { display: flex; align-items: flex-start; justify-content: space-between; - padding-top: 2px; + padding-top: calc(var(--default-grid-baseline) * 0.5); button { margin-top: 0; @@ -1498,7 +1498,7 @@ export default { background-color: transparent; border: none; opacity: 0.5; - padding: 10px 16px; + padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 4); } .select { @@ -1515,7 +1515,7 @@ export default { .subject { font-size: 15px; font-weight: bold; - margin: 3px 0 !important; + margin: var(--default-grid-baseline) 0 !important; padding: 0 !important; width: 100%; @@ -1547,7 +1547,7 @@ export default { } .draft-status { - padding: 2px; + padding: calc(var(--default-grid-baseline) * 0.5); opacity: 0.5; font-size: small; display: block; @@ -1618,11 +1618,11 @@ export default { .send-button { display: flex; align-items: center; - padding: 10px 15px; - margin-left: 5px; + padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 4); + margin-left: var(--default-grid-baseline); } .send-button .send-icon { - padding-right: 5px; + padding-right: var(--default-grid-baseline); } .centered-content { margin-top: 0 !important; @@ -1632,12 +1632,12 @@ export default { align-items: center; flex-direction: row; justify-content: space-between; - bottom: 5px; + bottom: var(--default-grid-baseline); } .composer-actions--primary-actions { display: flex; flex-direction: row; - padding-left: 10px; + padding-left: calc(var(--default-grid-baseline) * 2); align-items: center; } .composer-actions--secondary-actions { diff --git a/src/components/ComposerSessionIndicator.vue b/src/components/ComposerSessionIndicator.vue index 52342b7114..5ae69714f3 100644 --- a/src/components/ComposerSessionIndicator.vue +++ b/src/components/ComposerSessionIndicator.vue @@ -97,10 +97,10 @@ export default { display: flex; align-items: center; - gap: 5px; + gap: var(--default-grid-baseline); width: 360px; - padding: 0 8px; + padding: 0 calc(var(--default-grid-baseline) * 2); // Retain border radius from outer body container for visual consistency border-radius: var(--body-container-radius); diff --git a/src/components/MailboxPicker.vue b/src/components/MailboxPicker.vue index abd9978c30..e84bd15db8 100644 --- a/src/components/MailboxPicker.vue +++ b/src/components/MailboxPicker.vue @@ -191,12 +191,12 @@ export default { width: 100%; height: 100%; flex-direction: column; - padding: 15px; + padding: calc(var(--default-grid-baseline) * 4); } .crumbs { display: inline-flex; - padding-right: 0px; + padding-right: 0; flex-wrap: wrap; .level { @@ -205,15 +205,15 @@ export default { min-width: 0px; flex: 0 0 auto; order: 1; - padding-right: 7px; + padding-right: calc(var(--default-grid-baseline) * 2); background-position: right center; background-size: auto 24px; - margin-top: -10px; + margin-top: calc(var(--default-grid-baseline) * -2.5); } a { position: relative; - padding: 12px; + padding: calc(var(--default-grid-baseline) * 3); opacity: 0.5; text-overflow: ellipsis; white-space: nowrap; @@ -249,7 +249,7 @@ export default { } &:not(:last-child) { - border-bottom: 1px solid var(--color-border); + border-bottom: var(--border-width-input) solid var(--color-border); } } @@ -266,13 +266,13 @@ export default { .mailbox-icon { width: 24px; height: 24px; - padding: 14px; + padding: calc(var(--default-grid-baseline) * 3); opacity: 0.9; background-size: 24px; } .mailbox-title { - padding: 14px 14px 14px 0; + padding: calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 3) 0; flex: 1; overflow: hidden; white-space: nowrap; @@ -283,14 +283,14 @@ export default { .buttons { display: flex; justify-content: flex-end; - padding-top: 10px; + padding-top: calc(var(--default-grid-baseline) * 2); .spinner { - margin-right: 5px; + margin-right: var(--default-grid-baseline); } } .material-design-icon { opacity: .7; - margin-right: 6px; + margin-right: calc(var(--default-grid-baseline) * 1.5); } diff --git a/src/components/NewMessageButtonHeader.vue b/src/components/NewMessageButtonHeader.vue index bebe3ec121..fd7e8cbc31 100644 --- a/src/components/NewMessageButtonHeader.vue +++ b/src/components/NewMessageButtonHeader.vue @@ -93,7 +93,7 @@ export default { align-items: center; justify-content: space-between; padding: calc(var(--default-grid-baseline, 4px) * 2); - gap: 4px; + gap: var(--default-grid-baseline); } .refresh__button { background-color: transparent; diff --git a/src/components/Thread.vue b/src/components/Thread.vue index 7c6e17a4ca..f424461e9e 100644 --- a/src/components/Thread.vue +++ b/src/components/Thread.vue @@ -330,14 +330,14 @@ export default { .icon-loading { &:only-child:after { - margin-top: 20px; + margin-top: calc(var(--default-line-height) - var(--default-grid-baseline)); } } } .mail-message-body { flex: 1; - margin-bottom: 30px; + margin-bottom: calc(var(--default-grid-baseline) * 7); position: relative; } @@ -346,7 +346,7 @@ export default { flex-direction: row; justify-content: space-between; align-items: center; - padding: 0 0 10px 0; + padding: 0 0 calc(var(--default-grid-baseline) * 2) 0; // somehow ios doesn't care about this !important rule // so we have to manually set left/right padding to chidren // for 100% to be used @@ -368,15 +368,15 @@ export default { // initial width width: 0; // while scrolling, the back button overlaps with subject on small screen - padding-left: 86px; + padding-left: calc(var(--default-grid-baseline) * 21); // grow and try to fill 100% flex: 1 1 auto; h2, p { - padding-bottom: 7px; + padding-bottom: calc(var(--default-grid-baseline) * 2); margin-bottom: 0; // some h2 styling coming from server add some space on top - margin-top: 5px; + margin-top: var(--default-grid-baseline); } p { @@ -401,7 +401,7 @@ export default { .attachment-popover { position: sticky; - bottom: 12px; + bottom: calc(var(--default-grid-baseline) * 3); text-align: center; } @@ -410,7 +410,7 @@ export default { } #mail-content { - margin: 10px 38px 0 59px; + margin: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 10) 0 calc(var(--default-grid-baseline) * 15); } #mail-content iframe { @@ -424,7 +424,7 @@ export default { #mail-content a, .mail-signature a { color: #07d; - border-bottom: 1px dotted #07d; + border-bottom: var(--border-width-input) dotted #07d; text-decoration: none; word-wrap: break-word; } @@ -439,7 +439,7 @@ export default { @media only screen and (min-width: 600px) { .icon-reply-white, .icon-reply-all-white { - background-position: 12px center; + background-position: calc(var(--default-grid-baseline) * 3) center; } } @@ -506,7 +506,7 @@ export default { } .v-popper.avatar-more { - padding: 6px; + padding: calc(var(--default-grid-baseline) * 2); } .avatar-hidden { diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue index bd8375ca50..2e05319c26 100644 --- a/src/components/ThreadEnvelope.vue +++ b/src/components/ThreadEnvelope.vue @@ -940,7 +940,7 @@ export default {