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

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

@ -22,6 +22,13 @@
grid-gap: 1.6rem; grid-gap: 1.6rem;
.buttonWithIcon { .buttonWithIcon {
@apply flex items-center; @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> </span>
</div> </div>
<div className={s.btns}> <div className={s.btns}>
<ButtonCommon type='light'> <ButtonCommon type='light' size='large'>
<span className={s.buttonWithIcon}> <span className={s.buttonWithIcon}>
<IconFacebookColor />&nbsp;Facebook <IconFacebookColor /><span className={s.label}>Facebook</span>
</span> </span>
</ButtonCommon> </ButtonCommon>
<ButtonCommon type='light'> <ButtonCommon type='light' size='large'>
<span className={s.buttonWithIcon}> <span className={s.buttonWithIcon}>
<IconApple />&nbsp;Apple <IconApple />
<span className={s.label}>Apple</span>
</span> </span>
</ButtonCommon> </ButtonCommon>
<ButtonCommon type='light'> <ButtonCommon type='light' size='large'>
<span className={s.buttonWithIcon}> <span className={s.buttonWithIcon}>
<IconGoogleColor />&nbsp;Google <IconGoogleColor />
<span className={s.label}>Google</span>
</span> </span>
</ButtonCommon> </ButtonCommon>
</div> </div>