diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css index 57a3f3a632..ba84aaab77 100644 --- a/ghost/admin/app/styles/app-dark.css +++ b/ghost/admin/app/styles/app-dark.css @@ -1102,6 +1102,12 @@ input:focus, border-color: var(--midlightgrey); } +.ember-power-select-trigger:not(.gh-input-x) { + background: var(--lightgrey); + border-color: var(--lightgrey); +} + + kbd { color: #394047; } diff --git a/ghost/admin/app/styles/components/power-select.css b/ghost/admin/app/styles/components/power-select.css index 5cf220442e..25fd30e554 100644 --- a/ghost/admin/app/styles/components/power-select.css +++ b/ghost/admin/app/styles/components/power-select.css @@ -2,7 +2,7 @@ padding: 0 12px; border: var(--input-border); border-radius: var(--border-radius); - background: transparent; + background: var(--main-bg-color); } .ember-power-select-trigger.gh-btn { @@ -245,7 +245,7 @@ background: #fff; padding: 4px; border: var(--input-border); - border-radius: 3px; + border-radius: var(--border-radius); outline: none; } @@ -308,14 +308,26 @@ margin: 2px; } +.ember-power-select-trigger { + position: relative; + display: flex; + align-items: center; + min-height: 33px; +} + .ember-power-select-status-icon { position: absolute; - top: 13px; - right: 13px; + right: 12px; + top: 12px; border: solid var(--midlightgrey); border-width: 0 1px 1px 0; padding: 3px; transform: rotate(45deg); + pointer-events: none; +} + +.ember-power-select-trigger:not(.ember-power-select-multiple-trigger) .ember-power-select-status-icon { + top: calc(50% - 4px); } .ember-basic-dropdown-trigger[aria-expanded="true"] .ember-power-select-status-icon { @@ -524,3 +536,27 @@ width: 1.2rem; height: 1.2rem; } + +.ember-power-select-multiple-trigger { + display: flex; + flex-wrap: wrap; + align-items: center; + padding: 2px 28px 2px 2px !important; + min-height: 33px; +} + +.ember-power-select-multiple-options { + display: flex; + flex-wrap: wrap; + align-items: center; +} + +.ember-power-select-trigger-multiple-input { + width: auto !important; + padding: 0; + margin: 2px; + border: none; + font-size: 1.4rem; + line-height: 1.35em; + background: none; +} diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index 7b1b46a87d..fbcee6f3ba 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -182,7 +182,7 @@ p.gh-members-list-email { .gh-member-actions-menu { top: calc(100% + 6px); left: auto; - right: 10px; + right: 0; } .gh-member-actions-menu.fade-out { diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css index d1d3a81b99..60c3d49ccb 100644 --- a/ghost/admin/app/styles/patterns/forms.css +++ b/ghost/admin/app/styles/patterns/forms.css @@ -307,7 +307,6 @@ textarea.gh-input-x { .ember-power-select-multiple-trigger { padding: 4px; - min-height: 38px; display: grid; grid-template-columns: 1fr 24px; position: relative;