| .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; | |
| } | |
| } |