misuzu/assets/less/auth/classes/form.less

94 lines
1.8 KiB
Text
Raw Normal View History

2018-03-22 02:56:41 +00:00
.form {
height: @auth-title-height;
overflow: hidden;
transition: height .3s ease-in-out;
&__wrapper {
&:not(:last-child) {
border-bottom: 1px solid #333;
}
}
&__toggle {
display: none;
&:checked ~ .form {
height: @auth-form-height;
}
&:not(:checked) ~ .form .form__title:hover {
cursor: pointer;
background: #333;
z-index: 100;
box-shadow: 0 2px 5px fade(#111, 80%);
}
}
&__title {
font-size: 1.4em;
display: block;
padding: 10px;
height: @auth-title-height;
transition: background .2s, box-shadow .2s;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
&__content {
display: flex;
flex-direction: column;
margin: 0 5px;
height: @auth-form-height - @auth-title-height;
overflow: hidden;
transition: height .5s ease-in-out;
align-items: center;
flex-grow: 1;
justify-content: center;
&--no-registration {
max-width: 400px;
}
}
&__link {
color: #88c;
text-decoration: none;
&:hover {
text-decoration: underline;
}
&:active {
color: #c88;
}
}
&__row {
margin-bottom: 5px;
width: 100%;
&--columns {
display: flex;
justify-content: space-between;
align-items: center;
}
}
&__column {
&--message {
padding-left: 10px;
color: #aaa;
}
&--error {
color: #a33;
}
}
}