Skip to content

Instantly share code, notes, and snippets.

@adeleke5140
Created September 2, 2023 12:59
Show Gist options
  • Save adeleke5140/ced976f01aaee1e8bf3414b769b944fb to your computer and use it in GitHub Desktop.
Save adeleke5140/ced976f01aaee1e8bf3414b769b944fb to your computer and use it in GitHub Desktop.
styling the react date picker
/*
Styles for the React date picker input
*/
/* .react-datepicker-wrapper {
width: 100%;
}
.react-datepicker__input-container {
width: 100%;
}
.react-datepicker__input-container input {
--gradient-color1: #fff;
--gradient-color2: #eeeff2;
--border-color: #e2e4e8;
--border-radius: 0.5rem;
--padding-x: 1rem;
--padding-y: 0.75rem;
--border-width: 1px;
--height: 3rem;
--font-size: 0.875rem;
--line-height: 1.25rem;
padding-top: var(--padding-y);
padding-bottom: var(--padding-y);
padding-left: var(--padding-x);
padding-right: var(--padding-x);
border-radius: var(--border-radius);
border-width: var(--border-width);
border-color: var(--border-color);
width: 100%;
height: var(--height);
font-size: var(--font-size);
line-height: var(--line-height);
font-weight: 600;
background: linear-gradient(to bottom, var(--gradient-color1), var(--gradient-color2));
}
.react-datepicker__input-container input:focus {
--border-color: #22c55d;
--box-shadow1: 0px 0px 0px 3px #CFEDD6;
--box-shadow2: 0px 2px 2px -1px #E4F5E8;
outline: none;
border-color:var(--border-color);
box-shadow: var(--box-shadow1),
var(--box-shadow2);
}
.react-datepicker__input-container input::placeholder{
--placeholder-color: #525C76;
font-weight: 600;
color: var(--placeholder-color);
} */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment