diff --git a/ghost/admin/app/styles/layouts/labs.css b/ghost/admin/app/styles/layouts/labs.css index 10ce518bc8..9ef0138e4e 100644 --- a/ghost/admin/app/styles/layouts/labs.css +++ b/ghost/admin/app/styles/layouts/labs.css @@ -52,6 +52,26 @@ opacity: 0.25; } +.gh-members-stripe-info-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.gh-members-stripe-info-header h4 { + font-weight: 600; + margin: 0; + padding: 0; +} + +.gh-members-stripe-info { + border-radius: 0.9rem; + border: 1px solid var(--whitegrey); + background: var(--whitegrey-l2); + padding: 12px; + width: 380px; +} + .gh-members-stripe-badge { width: 180px; } @@ -60,6 +80,29 @@ color: #555ABF; } +@media (max-width: 500px) { + .gh-members-stripe-info-header { + flex-direction: column; + align-items: stretch; + } + + .gh-members-stripe-info-header h4 { + order: 2; + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid var(--whitegrey); + } + + .gh-members-stripe-badge { + order: 1; + /* margin: -10px 0 0 -10px; */ + } + + .gh-members-stripe-info { + width: 100%; + } +} + .gh-labs-disabled .for-checkbox label, .gh-labs-disabled .for-checkbox .input-toggle-component, .gh-labs-disabled .for-switch label, 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 4f15a25556..fe19df7aa6 100644 --- a/ghost/admin/app/templates/components/gh-members-lab-setting.hbs +++ b/ghost/admin/app/templates/components/gh-members-lab-setting.hbs @@ -12,8 +12,8 @@ {{#liquid-if membersStripeOpen}} -
-
+
+
{{gh-text-input @@ -23,7 +23,7 @@ class="mt1 password" }}
-
+
{{gh-text-input type="password" @@ -36,10 +36,10 @@
-
-
-
-

How you get paid

+
+
+
+

How you get paid

{{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}