Source code
Revision control
Copy as Markdown
Other Tools
.input-container {
display: flex;
flex-direction: column;
font-family: var(--font-family-default);
max-width: 400px;
position: relative;
height: 40px;
}
.input-container .label {
font-size: var(--font-size-small);
padding: var(--content-spacing-medium);
}
.input-container .input {
outline: 0;
padding: 0 var(--content-spacing-medium);
border-radius: var(--border-radius-small);
border: var(--border-width-small) solid var(--color-utils-gray-light);
color: var(--color-utils-gray-light);
transition: var(--transition-default);
width: 100%;
height: 100%;
}
.input-container .input[type="submit"] {
cursor: pointer;
border-color: var(--theme-button-dark-background);
background-color: var(--theme-button-dark-background);
color: var(--theme-button-dark-text);
}
.input-container .input[type="submit"]:hover,
.input-container .input[type="submit"]:focus {
border-color: var(--theme-button-dark-background-hover);
background-color: var(--theme-button-dark-background-hover);
color: var(--theme-button-dark-text-hover);
}
.input-container .input[type="date"] {
/* hide default calendar icon */
appearance: none;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%43000" fill-opacity="1" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1em;
}
.input-container .input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
}
.input-container .input-type-password {
padding-right: calc(24px + var(--content-spacing-medium) * 2);
}
.input-container .input:hover {
border-color: var(--color-utils-gray-dark);
color: var(--color-utils-gray-dark);
}
.input-container .input:focus {
border-color: var(--color-utils-gray-darker);
color: var(--color-utils-gray-darker);
}
.input-container .input::placeholder {
color: var(--color-utils-gray);
opacity: 0.5;
}
.input-container .toggle {
margin: 0;
padding: 0;
background-color: transparent;
position: absolute;
right: var(--content-spacing-medium);
bottom: calc((40px - 24px) / 2);
}