kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 22:42:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix alignment issues caused by line-height on safari

Browse Source 
style: format code styles
This commit is contained in:
unix
2020-04-02 07:41:13 +08:00
parent e915790c65
commit e76b1b2255
2 changed files with 77 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/dot/dot.tsx
View File

@@ -56,7 +56,6 @@ const Dot: React.FC<React.PropsWithChildren<DotProps>> = React.memo(({
.label {
margin-left: 8px;
line-height: 1rem;
font-size: 1rem;
text-transform: capitalize;
}

155
components/input/input.tsx
View File

@@ -120,85 +120,84 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
{iconRight && <InputIcon icon={iconRight} ratio={heightRatio} />}
</div>
{labelRight && <InputLabel fontSize={fontSize} isRight={true}>{labelRight}</InputLabel>}
<style jsx>{`
.with-label {
display: flex;
flex-direction: column;
}
.input-container {
display: inline-flex;
align-items: center;
box-sizing: border-box;
width: ${width};
height: calc(${heightRatio} * ${theme.layout.gap});
}
.input-wrapper {
display: inline-flex;
vertical-align: middle;
align-items: center;
height: 100%;
flex: 1;
user-select: none;
border-radius: ${theme.layout.radius};
border: 1px solid ${borderColor};
transition: border 0.2s ease 0s, color 0.2s ease 0s;
}
.input-wrapper.left-label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-wrapper.right-label {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-wrapper.disabled {
background-color: ${theme.palette.accents_1};
border-color: ${theme.palette.accents_2};
cursor: not-allowed;
}
input.disabled {
cursor: not-allowed;
}
.input-wrapper.hover {
border-color: ${hoverBorder};
}
input {
margin: 4px 10px;
padding: 0;
box-shadow: none;
line-height: 1.625rem;
font-size: ${fontSize};
background-color: transparent;
border: none;
color: ${color};
outline: none;
border-radius: 0;
width: 100%;
-webkit-appearance: none;
}
input.left-icon {
margin-left: 0;
}
input.right-icon {
margin-right: 0;
}
input::placeholder {
color: ${theme.palette.accents_3};
}
`}</style>
</div>
<style jsx>{`
.with-label {
display: inline-block;
width: ${width};
box-sizing: border-box;
-webkit-box-align: center;
}
.input-container {
display: inline-flex;
align-items: center;
width: ${width};
height: calc(${heightRatio} * ${theme.layout.gap});
}
.input-wrapper {
display: inline-flex;
vertical-align: middle;
align-items: center;
height: 100%;
flex: 1;
user-select: none;
border-radius: ${theme.layout.radius};
border: 1px solid ${borderColor};
transition: border 0.2s ease 0s, color 0.2s ease 0s;
}
.input-wrapper.left-label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-wrapper.right-label {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-wrapper.disabled {
background-color: ${theme.palette.accents_1};
border-color: ${theme.palette.accents_2};
cursor: not-allowed;
}
input.disabled {
cursor: not-allowed;
}
.input-wrapper.hover {
border-color: ${hoverBorder};
}
input {
margin: 4px 10px;
padding: 0;
box-shadow: none;
font-size: ${fontSize};
background-color: transparent;
border: none;
color: ${color};
outline: none;
border-radius: 0;
width: 100%;
-webkit-appearance: none;
}
input.left-icon {
margin-left: 0;
}
input.right-icon {
margin-right: 0;
}
::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
color: ${theme.palette.accents_3};
}
`}</style>
</div>
)
}