diff --git a/ghost/admin/app/styles/layouts/labs.css b/ghost/admin/app/styles/layouts/labs.css index dae57107db..10ce518bc8 100644 --- a/ghost/admin/app/styles/layouts/labs.css +++ b/ghost/admin/app/styles/layouts/labs.css @@ -1,7 +1,3 @@ -.gh-labs-price-label input { - padding-right: 96px; -} - .gh-labs-price-label input::-webkit-outer-spin-button, .gh-labs-price-label input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; @@ -13,21 +9,6 @@ /* Firefox */ } -.gh-labs-price-label::after { - position: absolute; - top: 8px; - right: 12px; - color: var(--midlightgrey); -} - -.gh-labs-monthly-price::after { - content: "USD/month"; -} - -.gh-labs-yearly-price::after { - content: "USD/year"; -} - .gh-labs-toggle-wrapper { padding-top: 6px; padding-bottom: 6px; diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css index 667467c48b..95f452a538 100644 --- a/ghost/admin/app/styles/patterns/forms.css +++ b/ghost/admin/app/styles/patterns/forms.css @@ -489,6 +489,57 @@ textarea { margin-left: 10px; } +/* Input appends +/* ---------------------------------------------------------- */ +.gh-input-group { + display: flex; + align-items: center; +} + +.gh-input-group .gh-input { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + padding-right: 0; +} + +.gh-input-group .gh-input:focus + .gh-input-append { + border-color: color-mod(var(--blue)); + box-shadow: inset 0 0 0 1px var(--blue); +} + +.gh-input-append { + display: block; + position: relative; + width: 100%; + height: 38px; + padding: 6px 12px; + border: var(--input-border); + background: var(--input-bg-color); + color: var(--darkgrey); + font-size: 1.5rem; + font-weight: 400; + user-select: text; + border-radius: var(--border-radius); + word-wrap: none; + border-left: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + flex: 1; + color: var(--midlightgrey); +} + +.gh-input-append:before { + position: absolute; + content: ""; + top: 1px; + left: -2px; + bottom: 1px; + width: 4px; + background: var(--input-bg-color); +} + + /* FFF: Fucking Firefox Fixes /* ---------------------------------------------------------- */ diff --git a/ghost/admin/app/templates/components/gh-members-lab-setting.hbs b/ghost/admin/app/templates/components/gh-members-lab-setting.hbs index c54e28abdf..4f15a25556 100644 --- a/ghost/admin/app/templates/components/gh-members-lab-setting.hbs +++ b/ghost/admin/app/templates/components/gh-members-lab-setting.hbs @@ -68,24 +68,27 @@