From e5e82af8d62f6d28b1a616a1f9c81432f8c82b97 Mon Sep 17 00:00:00 2001
From: Christoph Wurst <1374172+ChristophWurst@users.noreply.github.com>
Date: Thu, 12 Mar 2026 17:53:17 +0100
Subject: [PATCH 1/3] style: move flat styles to nested SCSS BEM
Signed-off-by: Christoph Wurst <1374172+ChristophWurst@users.noreply.github.com>
---
src/components/AccountForm.vue | 58 ++++++++--------
src/components/Composer.vue | 92 +++++++++++++------------
src/components/Envelope.vue | 111 +++++++++++++++---------------
src/components/SearchMessages.vue | 98 +++++++++++++-------------
4 files changed, 185 insertions(+), 174 deletions(-)
diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue
index daad120cca..4ded45dcc3 100644
--- a/src/components/AccountForm.vue
+++ b/src/components/AccountForm.vue
@@ -793,34 +793,36 @@ input[type='radio'][disabled] + label {
opacity: 0.5;
}
-.account-form__label--required:after {
- content:" *";
-}
-
-.account-form__heading--required:after {
- content:" *";
-}
-
-.account-form__submit-buttons {
- display: flex;
- justify-content: center;
- margin-top: var(--default-grid-baseline);
-}
-
-.account-form__submit-button {
- display: flex;
- align-items: center;
-}
-
-.account-form--feedback {
- color: var(--color-text-maxcontrast);
- margin-top: var(--default-grid-baseline);
- text-align: center;
-}
-
-.account-form--error {
- text-align: start;
- font-size: 14px;
+.account-form {
+ &__label--required:after {
+ content:" *";
+ }
+
+ &__heading--required:after {
+ content:" *";
+ }
+
+ &__submit-buttons {
+ display: flex;
+ justify-content: center;
+ margin-top: var(--default-grid-baseline);
+ }
+
+ &__submit-button {
+ display: flex;
+ align-items: center;
+ }
+
+ &--feedback {
+ color: var(--color-text-maxcontrast);
+ margin-top: var(--default-grid-baseline);
+ text-align: center;
+ }
+
+ &--error {
+ text-align: start;
+ font-size: 14px;
+ }
}
#account-form {
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 51f9420a05..3392126f6a 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -1710,6 +1710,40 @@ export default {
.composer-actions {
position: sticky;
background: linear-gradient(rgba(255, 255, 255, 0), var(--color-main-background-translucent) 50%);
+
+ &-right {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+ bottom: var(--default-grid-baseline);
+ }
+
+ &--primary-actions {
+ display: flex;
+ flex-direction: row;
+ padding-inline-start: calc(var(--default-grid-baseline) * 2);
+ align-items: center;
+
+ .button {
+ padding: 2px;
+ }
+ }
+
+ &--secondary-actions {
+ display: flex;
+ flex-direction: row;
+ padding: 12px;
+ gap: 5px;
+
+ .button {
+ flex-shrink: 0;
+ }
+ }
+
+ &-draft-status {
+ padding-inline-start: 10px;
+ }
}
.composer-fields {
@@ -1740,7 +1774,7 @@ export default {
border-radius: 0;
}
- .composer-fields--custom {
+ &--custom {
display: flex;
align-items: flex-start;
justify-content: space-between;
@@ -1890,55 +1924,23 @@ export default {
margin-top: 0 !important;
}
-.composer-actions-right {
- display: flex;
- align-items: center;
- flex-direction: row;
- justify-content: space-between;
- bottom: var(--default-grid-baseline);
-}
-
-.composer-actions--primary-actions {
- display: flex;
- flex-direction: row;
- padding-inline-start: calc(var(--default-grid-baseline) * 2);
- align-items: center;
-}
-
-.composer-actions--secondary-actions {
- display: flex;
- flex-direction: row;
- padding: 12px;
- gap: 5px;
-}
-
-.composer-actions--primary-actions .button {
- padding: 2px;
-}
-
-.composer-actions--secondary-actions .button{
- flex-shrink: 0;
-}
-
-.composer-actions-draft-status {
- padding-inline-start: 10px;
-}
-
:deep(.vs__selected-options .vs__dropdown-toggle .vs--multiple ){
width: 100%;
}
@media only screen and (max-width: 580px) {
- .composer-actions-right {
- align-items: end;
- flex-direction: column-reverse;
- }
- .composer-actions-draft-status {
- text-align: end;
- padding-inline-end: 15px;
- }
- .composer-actions--primary-actions {
- padding-inline-end: 5px;
+ .composer-actions {
+ &-right {
+ align-items: end;
+ flex-direction: column-reverse;
+ }
+ &-draft-status {
+ text-align: end;
+ padding-inline-end: 15px;
+ }
+ &--primary-actions {
+ padding-inline-end: 5px;
+ }
}
}
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index 67876fe570..f7d9b2150c 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -1480,6 +1480,10 @@ export default {
}
}
}
+ &--compact-wrapper {
+ display: flex;
+ align-items: center;
+ }
}
&__preview-text {
color: var(--color-text-maxcontrast);
@@ -1502,11 +1506,39 @@ export default {
display: inline;
}
}
+
+ &__recipient-row {
+ display: inline-flex;
+ align-items: center;
+ min-width: 0;
+ }
+
+ &__recipient-text {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &--compact.envelope--one-line {
+ .favorite-icon-style,
+ .icon-important {
+ display: none;
+ }
+ }
}
-.list-item__wrapper--active {
- div, :deep(.list-item-content__inner__details__details) {
- color: var(--color-primary-element-text) !important;
+.list-item {
+ &__wrapper {
+ &--active {
+ div, :deep(.list-item-content__inner__details__details) {
+ color: var(--color-primary-element-text) !important;
+ }
+ }
+
+ &:deep() {
+ list-style: none;
+ }
}
}
@@ -1583,24 +1615,6 @@ export default {
}
}
-.tag-group__label {
- margin: 0 7px;
- z-index: 2;
- font-size: calc(var(--default-font-size) * 0.8);
- font-weight: bold;
- padding-inline: 2px;
- white-space: nowrap;
-}
-
-.tag-group__bg {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- inset-inline-start: 0;
- opacity: 15%;
-}
-
.tag-group {
display: inline-block;
border-radius: var(--border-radius-pill);
@@ -1608,10 +1622,24 @@ export default {
margin-inline-end: 1px;
overflow: hidden;
text-overflow: ellipsis;
-}
-.list-item__wrapper:deep() {
- list-style: none;
+ &__label {
+ margin: 0 7px;
+ z-index: 2;
+ font-size: calc(var(--default-font-size) * 0.8);
+ font-weight: bold;
+ padding-inline: 2px;
+ white-space: nowrap;
+ }
+
+ &__bg {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ inset-inline-start: 0;
+ opacity: 15%;
+ }
}
.icon-important.app-content-list-item-star:deep() {
@@ -1743,17 +1771,12 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
-}
-
-.list-item--compact .envelope__subtitle {
- display: flex;
- align-items: center;
- padding-inline-start: 0;
-}
-.envelope__subtitle--compact-wrapper {
- display: flex;
- align-items: center;
+ .envelope__subtitle {
+ display: flex;
+ align-items: center;
+ padding-inline-start: 0;
+ }
}
.compact-subject-icons {
@@ -1764,28 +1787,8 @@ export default {
margin-inline-end: 4px;
}
-.envelope__recipient-row {
- display: inline-flex;
- align-items: center;
- min-width: 0;
-}
-
.recipient-icon {
flex: 0 0 auto;
margin-inline-end: 6px;
}
-
-.envelope__recipient-text {
- min-width: 0;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.envelope--compact.envelope--one-line {
- .favorite-icon-style,
- .icon-important {
- display: none;
- }
-}
diff --git a/src/components/SearchMessages.vue b/src/components/SearchMessages.vue
index c5b8a8cbff..2525a2e49b 100644
--- a/src/components/SearchMessages.vue
+++ b/src/components/SearchMessages.vue
@@ -689,28 +689,30 @@ export default {
margin: 0 !important;
}
-.tag-group__search {
- box-sizing: border-box;
- position: relative;
- margin: 3px 3px;
- padding: 0 6px;
-}
+.tag-group {
+ &__search {
+ box-sizing: border-box;
+ position: relative;
+ margin: 3px 3px;
+ padding: 0 6px;
+ }
-.tag-group__bg {
- position: absolute;
- inset-inline: 0;
- bottom: 0;
- top: 0;
- opacity: 0.4;
- border-radius: 14px;
- z-index: 1;
-}
+ &__bg {
+ position: absolute;
+ inset-inline: 0;
+ bottom: 0;
+ top: 0;
+ opacity: 0.4;
+ border-radius: 14px;
+ z-index: 1;
+ }
-.tag-group__label {
- font-weight: bold;
- font-size: 12px;
- position: relative;
- z-index: 2;
+ &__label {
+ font-weight: bold;
+ font-size: 12px;
+ position: relative;
+ z-index: 2;
+ }
}
.search-modal {
@@ -761,38 +763,40 @@ export default {
flex-wrap: wrap !important;
}
-.modal-inner-field--right {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- padding: 0 33px;
- margin-top: 15px;
-}
-
-.modal-inner--field {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- justify-content: space-between;
- margin-bottom: 15px;
- padding: 0 12px 0 30px;
-
- .checkbox-radio-switch {
- margin: 0 8px 0 0;
- }
-
- & > label {
- font-weight: bold;
- width: 120px;
+.modal-inner {
+ &-field--right {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding: 0 33px;
+ margin-top: 15px;
}
- .modal-inner--container {
- width: calc(100% - 120px);
+ &--field {
display: flex;
+ align-items: center;
flex-wrap: wrap;
+ justify-content: space-between;
+ margin-bottom: 15px;
+ padding: 0 12px 0 30px;
- .select {
- width: 100%;
+ .checkbox-radio-switch {
+ margin: 0 8px 0 0;
+ }
+
+ & > label {
+ font-weight: bold;
+ width: 120px;
+ }
+
+ .modal-inner--container {
+ width: calc(100% - 120px);
+ display: flex;
+ flex-wrap: wrap;
+
+ .select {
+ width: 100%;
+ }
}
}
}
From a5fc12109a27a35ad749f3e0b69b3bdcb22647c4 Mon Sep 17 00:00:00 2001
From: Christoph Wurst <1374172+ChristophWurst@users.noreply.github.com>
Date: Mon, 16 Mar 2026 11:49:11 +0100
Subject: [PATCH 2/3] fixup! style: move flat styles to nested SCSS BEM
Signed-off-by: Christoph Wurst <1374172+ChristophWurst@users.noreply.github.com>
---
src/components/AccountForm.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue
index 4ded45dcc3..227d6df4b6 100644
--- a/src/components/AccountForm.vue
+++ b/src/components/AccountForm.vue
@@ -771,7 +771,7 @@ export default {
}
-
-