.wrapper { | |
position: relative; | |
margin-bottom: 0.9375rem | |
} | |
.icon { | |
position: absolute; | |
top: .625rem; | |
left: .625rem; | |
font-size: 1.125rem; | |
line-height: 1em; | |
z-index: 1; | |
} | |
.input { | |
display: block; | |
position: relative; | |
width: 100%; | |
//padding: 0.4375rem 0.75rem; | |
//font-size: 0.9375rem; | |
font-weight: 400; | |
line-height: 1.5; | |
color: var(--input-text-color); | |
background-color: var(--input-bg-color); | |
background-clip: padding-box; | |
border: 0.0625rem solid var(--input-border-color); | |
-webkit-appearance: none; | |
appearance: none; | |
border-radius: 0.25rem; | |
box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, .075); | |
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; | |
padding-top: 0; | |
padding-right: .3125rem; | |
//padding-left: 0.4375rem; | |
padding-left: 2.5rem; | |
padding-bottom: 0; | |
//font-weight: 700; | |
height: 2.5rem; | |
font-size: 1rem; | |
&::placeholder { | |
color: var(--input-placeholder-color); | |
font-weight: 400; | |
} | |
} | |
.disabled { | |
&:before { | |
content: ''; | |
position: absolute; | |
cursor: not-allowed; | |
z-index: 2; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
background-color: var(--filters-bg-color); | |
opacity: .25; | |
} | |
} |