/* переключалка */ [data-switch]:not(.butt):not(.show) { display: none; } /* ---- инпуты ---- */ input[type="text"], input[type="email"], input[type="password"] { font-size: inherit; font-family: inherit; width: 100%; background: none; outline: none; border: none; color: inherit; } select { padding: 0; font-family: inherit; font-size: 1em; background-color: transparent; width: 100%; border: none; color: inherit; } select:focus { outline: none; } textarea { font-size: inherit; font-family: inherit; width: 100%; resize: none; background: none; outline: none; border: none; } /* обычный инпут */ .input-normal { font-size: 1em; padding: 0.75em; display: flex; } .input-normal > *:not(:first-child) { margin-left: 0.75em; } .input-normal svg { height: 1em; } /* лэйбл-инпут */ .input-label { display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; flex-direction: column; justify-content: center; font-size: 1em; height: 4em; cursor: text; } .input-label .combo { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; } .input-label .combo > * { width: 100%; text-align: center; transition: 0.3s; } .input-label .placeholder { position: absolute; top: 0; left: 0; height: 100%; } .input-label.focused .placeholder { transform: translateY(-100%); } .input-label input { transform: scale(1, 0); } .input-label.focused input { transform: scale(1, 1); } .input-label .underline { width: 0; opacity: 0; border-bottom: 1px solid; transform: translateY(0.5em); } .input-label.focused .underline { width: 100%; opacity: 1; } /* чекбокс-инпут */ label.input-checkbox { cursor: pointer; margin-left: auto; } label.input-checkbox .switcher { position: relative; width: 2em; height: 1em; border-radius: 1em; padding: 0; background: #d3d3d3; -webkit-transition: .4s; transition: .4s; } label.input-checkbox .switcher::before { content: ''; position: absolute; height: 1em; width: 1em; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -webkit-transition: .4s; transition: .4s; } .input-checkbox input[type="checkbox"]:checked ~ .switcher::before { right: 0; } .input-checkbox input[type="checkbox"]:checked ~ .switcher { background: #3F51B5; } .input-checkbox input[type="checkbox"] { display: none; }