<div class="o-fancy-form-item o-fancy-input">
<label class="o-fancy-form-item__label">Label</label>
<input class="o-fancy-form-item__input" type="text" />
</div>
<div class="o-fancy-form-item o-fancy-input">
<label class="o-fancy-form-item__label">Label</label>
<input class="o-fancy-form-item__input" type="text"/>
</div>
{
"pageColorTheme": "teal"
}
.o-fancy-form-item {
position: relative;
}
.o-fancy-form-item__label {
color: var(--ct-txt);
@include text--filter-label;
position: absolute;
top: 1.8rem;
left: 0;
transition: all 0.24s ease-in-out;
display: inline-flex;
align-items: center;
.o-fancy-form-item--has-focus &,
.o-fancy-form-item--has-value & {
top: -1.2rem;
}
}
.o-fancy-form-item__icon {
margin-right: 0.8rem;
}
.o-fancy-form-item__input {
min-height: 4.4rem;
border: 0;
border-radius: 0;
background-color: transparent;
border-bottom: 0.1rem var(--ct-txt) solid;
display: block;
width: 100%;
padding: 0 1.2rem;
font-size: 1.8rem;
font-family: $f-sans;
body:not(.u-keyboard-user) &:focus {
outline: 0;
}
}
input[type="search" i]::-webkit-search-cancel-button {
display: none;
}
No notes defined.