crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-06 13:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 styles: form login responsive

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-08-27 16:37:15 +07:00
parent 3f70dc7346
commit 6aed5f2618
3 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss
View File

@ -1,8 +1,11 @@
.login {
margin: auto;
@screen md {
max-width: 52rem;
}
.inner {
max-width: 100%;
overflow: hidden;
.body {
> div {
&:not(:last-child) {
@ -12,7 +15,7 @@
}
.bottom {
@apply flex justify-between items-center;
margin-top: 4rem;
margin: 4rem auto;
.forgotPassword {
@apply font-bold;
color: var(--primary);

7
src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss
View File

@ -22,6 +22,13 @@
grid-gap: 1.6rem;
.buttonWithIcon {
@apply flex items-center;
.label {
@apply hidden;
@screen md {
@apply inline-block;
margin-left: .8rem;
}
}
}
}
}

14
src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx
View File

@ -12,19 +12,21 @@ const SocialAuthen = () => {
</span>
</div>
<div className={s.btns}>
<ButtonCommon type='light'>
<ButtonCommon type='light' size='large'>
<span className={s.buttonWithIcon}>
<IconFacebookColor />&nbsp;Facebook
<IconFacebookColor /><span className={s.label}>Facebook</span>
</span>
</ButtonCommon>
<ButtonCommon type='light'>
<ButtonCommon type='light' size='large'>
<span className={s.buttonWithIcon}>
<IconApple />&nbsp;Apple
<IconApple />
<span className={s.label}>Apple</span>
</span>
</ButtonCommon>
<ButtonCommon type='light'>
<ButtonCommon type='light' size='large'>
<span className={s.buttonWithIcon}>
<IconGoogleColor />&nbsp;Google
<IconGoogleColor />
<span className={s.label}>Google</span>
</span>
</ButtonCommon>
</div>