Skip to content
This repository has been archived by the owner on Oct 9, 2024. It is now read-only.

Commit

Permalink
Moved Input field into Label.
Browse files Browse the repository at this point in the history
  • Loading branch information
@dc-andysign
dc-andysign committed Jan 24, 2024
1 parent 67fd667 commit 93fc78f
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 32 deletions.
8 changes: 6 additions & 2 deletions src/pages/components/CertificateInputFields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,8 +178,12 @@ const InputWrap = styled.div`

const InputHalfWrap = styled.div`
width: 50%;
display: block;
// display: block;
// float: left;
height: 52px;
line-height: 52px;
float: left;
display: flex;
flex-direction: column;
padding-left: 15px;
`
103 changes: 88 additions & 15 deletions src/pages/components/InputFieldDate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,48 +6,79 @@ import BgIconDateSVG from '../../assets/images/icon-date.svg'
export default function InputFieldDate({ val, onChangeVal, name, id }) {
return (
<>
<Label2>
<BgSpan2>Date</BgSpan2>
<Input2
name={name}
id={id} // DELETE
value={val}
onChange={(e) => onChangeVal(e)}
placeholder="01/01/2024"
/>
</Label2>
{/*
<Label htmlFor={id}>
<BgDateSpan>&nbsp;</BgDateSpan>Date
</Label>
{/* <Input defaultValue={defaultVal} type="date" /> */}
<Input
name={name}
id={id}
value={val}
onChange={(e) => onChangeVal(e)}
placeholder="01/01/2024"
/>
*/}
{/* <Input defaultValue={defaultVal} type="date" /> */}
</>
)
}

const Label = styled.label`
display: flex;
width: calc(100% - 15px);
height: 26px;
line-height: 26px;
margin-left: 15px;
const Label2 = styled.label`
display: grid;
width: 100%;
color: #7b9390;
font: 500 14px/26px Roboto;
`

const BgDateSpan = styled.span`
width: 26px;
height: 26px;
background: transparent url(${BgIconDateSVG}) no-repeat;
`
// const Label = styled.label`
// display: flex;
// width: calc(100% - 0px);
// height: 26px;
// // line-height: 26px;
// // margin-left: 15px;
// color: #7b9390;
// font: 500 14px/26px Roboto;
// `

const Input = styled.input.attrs({ type: 'date' })`
const BgSpan2 = styled.span`
width: 100%;
display: flex;
width: calc(100% - 15px);
&::before {
content: '';
display: grid;
width: 26px;
height: 26px;
background: transparent url(${BgIconDateSVG}) no-repeat;
}
`

// const BgDateSpan = styled.span`
// width: 26px;
// height: 26px;
// background: transparent url(${BgIconDateSVG}) no-repeat;
// `

const Input2 = styled.input.attrs({ type: 'date' })`
width: 100%;
height: 26px;
min-width: 110px;
font: 500 18px/26px Roboto;
color: #aebcbb;
margin-left: 15px;
background: transparent;
outline: 0;
border: none;
position: relative;
z-index: 0;
&::-webkit-calendar-picker-indicator {
position: absolute;
top: unset;
Expand All @@ -56,6 +87,7 @@ const Input = styled.input.attrs({ type: 'date' })`
height: 100%;
background: transparent;
color: transparent;
z-index: 1;
}
&::-webkit-inner-spin-button {
z-index: 1;
Expand All @@ -76,3 +108,44 @@ const Input = styled.input.attrs({ type: 'date' })`
color: #000000;
}
`

// const Input = styled.input.attrs({ type: 'date' })`
// display: flex;
// width: calc(100% - 0px);
// height: 26px;
// min-width: 90px;
// font: 500 18px/26px Roboto;
// color: #aebcbb;
// // margin-left: 15px;
// background: transparent;
// outline: 0;
// border: none;
// position: relative;
// &::-webkit-calendar-picker-indicator {
// position: absolute;
// top: unset;
// left: unset;
// width: 100%;
// height: 100%;
// background: transparent;
// color: transparent;
// }
// &::-webkit-inner-spin-button {
// z-index: 1;
// }
// &::-webkit-clear-button {
// z-index: 1;
// }
// &::-webkit-input-placeholder {
// color: #aebcbb;
// }
// &::placeholder {
// color: #aebcbb;
// }
// &:active {
// color: #000000;
// }
// &:hover {
// color: #000000;
// }
// `
103 changes: 88 additions & 15 deletions src/pages/components/InputFieldTime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,48 +6,79 @@ import BgIconTimeSVG from '../../assets/images/icon-time.svg'
export default function InputFieldTime({ val, onChangeVal, name, id }) {
return (
<>
<Label2>
<BgSpan2>Time</BgSpan2>
<Input2
name={name}
id={id} // DELETE
value={val}
onChange={(e) => onChangeVal(e)}
placeholder="00:00"
/>
</Label2>
{/*
<Label htmlFor={id}>
<BgTimeSpan>&nbsp;</BgTimeSpan>Time
</Label>
{/* <Input defaultValue="00:00" type="time" /> */}
<Input
name={name}
id={id}
value={val}
onChange={(e) => onChangeVal(e)}
placeholder="00:00"
/>
*/}
{/* <Input defaultValue="00:00" type="time" /> */}
</>
)
}

const Label = styled.label`
display: flex;
width: calc(100% - 15px);
height: 26px;
line-height: 26px;
margin-left: 15px;
const Label2 = styled.label`
display: grid;
width: 100%;
color: #7b9390;
font: 500 14px/26px Roboto;
`

const BgTimeSpan = styled.span`
width: 26px;
height: 26px;
background: transparent url(${BgIconTimeSVG}) no-repeat;
`
// const Label = styled.label`
// display: flex;
// width: calc(100% - 0px);
// height: 26px;
// // line-height: 26px;
// // margin-left: 15px;
// color: #7b9390;
// font: 500 14px/26px Roboto;
// `

const Input = styled.input.attrs({ type: 'time' })`
const BgSpan2 = styled.span`
width: 100%;
display: flex;
width: calc(100% - 15px);
&::before {
content: '';
display: grid;
width: 26px;
height: 26px;
background: transparent url(${BgIconTimeSVG}) no-repeat;
}
`

// const BgTimeSpan = styled.span`
// width: 26px;
// height: 26px;
// background: transparent url(${BgIconTimeSVG}) no-repeat;
// `

const Input2 = styled.input.attrs({ type: 'time' })`
width: 100%;
height: 26px;
min-width: 110px;
font: 500 18px/26px Roboto;
color: #aebcbb;
margin-left: 15px;
background: transparent;
outline: 0;
border: none;
position: relative;
z-index: 0;
&::-webkit-calendar-picker-indicator {
position: absolute;
top: unset;
Expand All @@ -56,6 +87,7 @@ const Input = styled.input.attrs({ type: 'time' })`
height: 100%;
background: transparent;
color: transparent;
z-index: 1;
}
&::-webkit-inner-spin-button {
z-index: 1;
Expand All @@ -76,3 +108,44 @@ const Input = styled.input.attrs({ type: 'time' })`
color: #000000;
}
`

// const Input = styled.input.attrs({ type: 'time' })`
// display: flex;
// width: calc(100% - 0px);
// height: 26px;
// min-width: 90px;
// font: 500 18px/26px Roboto;
// color: #aebcbb;
// // margin-left: 15px;
// background: transparent;
// outline: 0;
// border: none;
// position: relative;
// &::-webkit-calendar-picker-indicator {
// position: absolute;
// top: unset;
// left: unset;
// width: 100%;
// height: 100%;
// background: transparent;
// color: transparent;
// }
// &::-webkit-inner-spin-button {
// z-index: 1;
// }
// &::-webkit-clear-button {
// z-index: 1;
// }
// &::-webkit-input-placeholder {
// color: #aebcbb;
// }
// &::placeholder {
// color: #aebcbb;
// }
// &:active {
// color: #000000;
// }
// &:hover {
// color: #000000;
// }
// `

0 comments on commit 93fc78f

Please sign in to comment.