acid-info
/
lsd
mirror of https://github.com/acid-info/lsd.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add individual styles for year month and day

This commit is contained in:
jongomez 2023-09-28 12:03:05 +01:00 committed by Jon
parent 1249d98ac0
commit e37221761d
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/lsd-react/src/components/DateField/DateField.styles.ts
View File

@ -54,16 +54,6 @@ export const DateFieldStyles = css`
outline: none; outline: none;
} }
.${dateFieldClasses.input}:focus::-webkit-datetime-edit {
color: rgb(var(--lsd-text-primary));
opacity: 0.3;
}
.${dateFieldClasses.error}
.${dateFieldClasses.input}::-webkit-datetime-edit-fields-wrapper {
text-decoration: line-through;
}
.${dateFieldClasses.supportingText} { .${dateFieldClasses.supportingText} {
position: absolute; position: absolute;
} }
@ -125,4 +115,20 @@ export const DateFieldStyles = css`
margin: 6px 12px 0 12px; margin: 6px 12px 0 12px;
} }
} }
.${dateFieldClasses.input}::-webkit-datetime-edit-month-field:focus,
.${dateFieldClasses.input}::-webkit-datetime-edit-day-field:focus,
.${dateFieldClasses.input}::-webkit-datetime-edit-year-field:focus {
color: rgb(var(--lsd-text-primary));
opacity: 0.4;
}
.${dateFieldClasses.error}
.${dateFieldClasses.input}::-webkit-datetime-edit-year-field,
.${dateFieldClasses.error}
.${dateFieldClasses.input}::-webkit-datetime-edit-month-field,
.${dateFieldClasses.error}
.${dateFieldClasses.input}::-webkit-datetime-edit-day-field {
text-decoration: line-through;
}
` `

1
packages/lsd-react/src/components/DateField/DateField.tsx
View File

@ -93,6 +93,7 @@ export const DateField: React.FC<DateFieldProps> & {
value={input.value} value={input.value}
onChange={input.onChange} onChange={input.onChange}
className={clsx(inputProps.className, dateFieldClasses.input)} className={clsx(inputProps.className, dateFieldClasses.input)}
max={inputProps.max || '9999-12-31'}
/> />
{icon ? ( {icon ? (
<span <span