From 2bcf9c4dc659da670e462e015bb9fd732bf8bc9c Mon Sep 17 00:00:00 2001 From: Peter Shih Date: Mon, 1 May 2023 19:29:16 -0700 Subject: [PATCH] button style (#1090) --- .../common/PermissionBlock/LoginToUnlock.js | 2 +- .../PermissionBlock.module.css | 20 ++++++++++++++++--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/components/common/PermissionBlock/LoginToUnlock.js b/src/components/common/PermissionBlock/LoginToUnlock.js index 7d9298f68..8779812d5 100644 --- a/src/components/common/PermissionBlock/LoginToUnlock.js +++ b/src/components/common/PermissionBlock/LoginToUnlock.js @@ -45,7 +45,7 @@ const LoginToUnlock = ({ to, onAuthenticatedClick }) => {
- + 留下一筆資料,馬上{unlockedDescription}
diff --git a/src/components/common/PermissionBlock/PermissionBlock.module.css b/src/components/common/PermissionBlock/PermissionBlock.module.css index 9c3e5cae6..57dea9963 100644 --- a/src/components/common/PermissionBlock/PermissionBlock.module.css +++ b/src/components/common/PermissionBlock/PermissionBlock.module.css @@ -1,4 +1,4 @@ -@value link-blue from "common/variables.module.css"; +@value above-small, below-small, link-blue from "common/variables.module.css"; .permissionBlock { display: inline-block; @@ -92,12 +92,26 @@ } .authenticatedGroup { + @media (max-width: below-small) { + display: flex; + flex-direction: column; + align-items: center; + } + .button { font-size: 1em; font-weight: 700; - & + .button { - margin-left: 10px; + @media (min-width: above-small) { + & + .button { + margin-left: 10px; + } + } + + @media (max-width: below-small) { + & + .button { + margin-top: 16px; + } } } }