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

🎨 styles: border radius input common default

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-09-14 14:01:19 +07:00
parent faf0bc1e35
commit 0eb8ade730
5 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/InputCommon/InputCommon.module.scss
View File

@ -17,7 +17,8 @@
} }
.inputCommon { .inputCommon {
@apply block w-full transition-all duration-200 rounded bg-white; @apply block w-full transition-all duration-200 bg-white;
border-radius: .8rem;
padding: 1.6rem; padding: 1.6rem;
border: 1px solid var(--border-line); border: 1px solid var(--border-line);
&:hover, &:hover,

3
src/components/common/MenuDropdown/MenuDropdown.module.scss
View File

@ -71,7 +71,8 @@
@apply block shadow-md; @apply block shadow-md;
} }
.menuIner { .menuIner {
@apply rounded list-none bg-white; @apply list-none bg-white;
border-radius: 0.8rem;
border: 1px solid var(--text-active); border: 1px solid var(--text-active);
margin-top: 0.4rem; margin-top: 0.4rem;
> li { > li {

9
src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
View File

@ -1,9 +1,7 @@
import classNames from 'classnames';
import Link from 'next/link';
import React, { useRef } from 'react'; import React, { useRef } from 'react';
import { useModalCommon } from 'src/components/hooks/useModalCommon'; import { STATE_OPTIONS } from 'src/utils/constanst.utils';
import { CustomInputCommon } from 'src/utils/type.utils'; import { CustomInputCommon } from 'src/utils/type.utils';
import { Inputcommon } from '..'; import { Inputcommon, SelectCommon } from '..';
import ButtonCommon from '../ButtonCommon/ButtonCommon'; import ButtonCommon from '../ButtonCommon/ButtonCommon';
import ModalCommon from '../ModalCommon/ModalCommon'; import ModalCommon from '../ModalCommon/ModalCommon';
import s from './ModalCreateUserInfo.module.scss'; import s from './ModalCreateUserInfo.module.scss';
@ -27,8 +25,7 @@ const ModalCreateUserInfo = ({ demoVisible: visible, demoCloseModal: closeModal
<Inputcommon placeholder='Street Address' ref={firstInputRef} /> <Inputcommon placeholder='Street Address' ref={firstInputRef} />
<Inputcommon placeholder='City' /> <Inputcommon placeholder='City' />
<div className={s.line}> <div className={s.line}>
{/* todo: select, not input */} <SelectCommon option={STATE_OPTIONS} type="custom" size="large" placeholder='State'/>
<Inputcommon placeholder='State' />
<Inputcommon placeholder='Zip code' /> <Inputcommon placeholder='Zip code' />
</div> </div>
<Inputcommon placeholder='Phone (delivery contact)' /> <Inputcommon placeholder='Phone (delivery contact)' />

11
src/utils/constanst.utils.ts
View File

@ -119,3 +119,14 @@ export const FEATURED = [
] ]
export const DEFAULT_BLOG_PAGE_SIZE=6; export const DEFAULT_BLOG_PAGE_SIZE=6;
export const STATE_OPTIONS = [
{
name: 'Hồ Chí Minh',
value: 'Hồ Chí Minh',
},
{
name: 'Hà Nội',
value: 'Hà Nội',
},
]

3
tailwind.config.js
View File

@ -106,9 +106,6 @@ module.exports = {
fontSize: { fontSize: {
base: ['16px', '24px'], base: ['16px', '24px'],
}, },
borderRadius: {
rounded: '.8rem',
},
screens: { screens: {
'sm-only': {'min': '0', 'max': '767px'}, 'sm-only': {'min': '0', 'max': '767px'},
'sm': '640px', 'sm': '640px',