164 lines
2.4 KiB
CSS
164 lines
2.4 KiB
CSS
/* переключалка */
|
|
|
|
[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;
|
|
} |