style: move flat styles to nested SCSS BEM#12556
style: move flat styles to nested SCSS BEM#12556ChristophWurst wants to merge 3 commits intomainfrom
Conversation
Signed-off-by: Christoph Wurst <1374172+ChristophWurst@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR refactors several Vue SFC style blocks from “flat” BEM selectors into a more typical nested SCSS structure, aiming to keep related styles grouped and easier to maintain.
Changes:
- Convert flat BEM selectors to nested SCSS (
.block { &__element {} }) in multiple components. - Consolidate/relocate envelope list-item and tag-group styles into nested structures.
- Restructure composer action and field selectors into nested SCSS, including responsive overrides.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/components/SearchMessages.vue |
Nests tag-group__* and modal-inner* selectors under SCSS parent blocks for readability. |
src/components/Envelope.vue |
Moves several flat selectors (list-item, tag-group, envelope compact/recipient rules) into nested SCSS structure. |
src/components/Composer.vue |
Nests composer action/field BEM selectors under .composer-actions / .composer-fields, including media query adjustments. |
src/components/AccountForm.vue |
Refactors account-form BEM selectors into a nested block (but currently placed in a non-SCSS style block). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .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; | ||
| } |
This comment was marked as outdated.
This comment was marked as outdated.
Signed-off-by: Christoph Wurst <1374172+ChristophWurst@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR restructures several component styles from flat BEM selectors into nested SCSS blocks to match the project’s usual SCSS organization, aiming to keep styles easier to maintain without changing visuals.
Changes:
- Refactor flat BEM selectors into nested SCSS for tag-group and modal-inner styles in search UI.
- Reorganize Envelope list item/tag-group/compact layout styles into nested SCSS under their blocks.
- Nest Composer action/field modifiers under their parent blocks and adjust responsive overrides accordingly.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/components/SearchMessages.vue | Converts .tag-group__* and .modal-inner* selectors into nested SCSS structure. |
| src/components/Envelope.vue | Nests list-item, tag-group, and envelope compact/recipient styles into SCSS blocks. |
| src/components/Composer.vue | Nests composer action/field modifier selectors under .composer-actions / .composer-fields, including mobile overrides. |
| src/components/AccountForm.vue | Moves account-form BEM selectors into a nested .account-form SCSS block and attempts to enable SCSS on the style tag. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
src/components/AccountForm.vue
Outdated
| </style> | ||
|
|
||
| <style scoped> | ||
| <style lang=scss" scoped> |
Signed-off-by: Christoph Wurst <1374172+ChristophWurst@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR refactors component styles from flat BEM selectors into nested SCSS structure to match the project’s usual style organization, primarily across the search modal, envelope list items, composer actions, and account form styles.
Changes:
- Refactor multiple BEM-style selectors into nested SCSS blocks (
.tag-group,.modal-inner,.list-item,.composer-actions,.account-form). - Move/relocate existing selectors into their logical parent blocks to improve organization and maintainability.
- Update
AccountForm.vueto uselang="scss"for the nested syntax.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/components/SearchMessages.vue | Nests tag-group and modal-inner related rules into SCSS blocks; adjusts modal container styling. |
| src/components/Envelope.vue | Nests list-item, tag-group, and envelope compact/recipient styles into SCSS blocks. |
| src/components/Composer.vue | Nests composer action/field modifiers into SCSS blocks and updates responsive overrides accordingly. |
| src/components/AccountForm.vue | Enables SCSS for nested selectors and nests account-form BEM rules under .account-form. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| .modal-inner--container { | ||
| width: calc(100% - 120px); | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
|
|
||
| .select { | ||
| width: 100%; | ||
| } |
|
The file contains two blocks with |
This moves some existing BEM classes to the usual nested SCSS structure.
Not all classes have great names, but that's for another clean-up …
Smoke test was successful: no visual regressions for the account form, envelopes and searching 🧹