diff options
author | Greta <gretadoci@gmail.com> | 2022-09-15 15:40:14 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-09-15 15:40:14 +0300 |
commit | 35b7d413036af3f3d27b1fbba80d8bc46720ce0e (patch) | |
tree | 3c4fd137c0b5548c36705dacdfcfbe1a551681c6 | |
parent | b878b1b5732c6048a1101286ab2152851e91ae93 (diff) | |
parent | 7b7c49c725ef492c25c467196e20160f28c93824 (diff) |
Merge pull request #7240 from sazanof/fix/composer-modal-multiselects
Improving the appearance of the Composer window
-rw-r--r-- | src/components/Composer.vue | 58 |
1 files changed, 50 insertions, 8 deletions
diff --git a/src/components/Composer.vue b/src/components/Composer.vue index e2487c5ad..2d49165b9 100644 --- a/src/components/Composer.vue +++ b/src/components/Composer.vue @@ -1265,15 +1265,54 @@ export default { border-top: 1px solid var(--color-border); align-items: flex-start; + label { + padding: 11px 20px 11px 0; + } + + ::v-deep(.multiselect--multiple .multiselect__tags) { + display: grid; + grid-template-columns: calc(100% - 18px) 18px 100%; + + .multiselect__limit { + margin-right: 0; + margin-left: 8px + } + } + + ::v-deep(.multiselect__content-wrapper) { + border-bottom: 1px solid var(--color-border); + margin-top: 0; + + & li > span::before { + display: none + } + } + + ::v-deep(.multiselect__input) { + position: relative !important; + top: 0; + grid-column-start: 1; + grid-column-end: 3; + } + + ::v-deep(.multiselect--active input:focus-visible) { + box-shadow: none; + } + + ::v-deep(.multiselect__tags) { + box-sizing: border-box; + height: auto; + } + &__from { margin-right: 50px; /* for the modal close button */ } .multiselect.multiselect--multiple::after { - position:absolute; + position: absolute; right: 0; top: auto; - bottom:8px + bottom: 8px } .multiselect__tag { @@ -1303,18 +1342,19 @@ export default { display: flex; align-items: flex-start; flex-wrap: wrap; - padding-top:2px; + padding-top: 2px; width: calc(100% - 120px); button { margin-top: 0; + margin-bottom: 0; background-color: transparent; - border:none; + border: none; opacity: 0.5; padding: 10px 16px; } - button.active,button:active { + button.active, button:active { opacity: 1; } @@ -1328,9 +1368,14 @@ export default { } .subject { + font-size: 15px; font-weight: bold; margin: 3px 0 !important; padding: 0 12px !important; + + &:focus-visible { + box-shadow: none !important; + } } .message-body { @@ -1408,9 +1453,6 @@ export default { ::v-deep .multiselect .multiselect__tags, .subject { border: none !important; } -::v-deep .multiselect .multiselect__input { - height: auto !important; -} ::v-deep [data-select="create"] .avatardiv--unknown { background: var(--color-text-maxcontrast) !important; } |