You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
CoreID/app/assets/less/form.less

193 lines
2.4 KiB

@keyframes loading-bar {
0% {
left: 0;
width: 0;
}
5% {
left: 0;
width: 12.5%;
}
10% {
left: 0;
width: 25%;
}
15% {
left: 0;
width: 37.5%;
}
20% {
left: 0;
width: 50%;
}
25% {
left: 0;
width: 62.5%;
}
30% {
left: 0;
width: 75%;
}
35% {
left: 0;
width: 87.5%;
}
40% {
left: 0;
width: 100%;
}
50% {
left: 0;
width: 100%;
}
55% {
left: 12.5%;
width: 87.5%;
}
60% {
left: 25%;
width: 75%;
}
65% {
left: 37.5%;
width: 62.5%;
}
70% {
left: 50%;
width: 50%;
}
75% {
left: 62.5%;
width: 37.5%;
}
80% {
left: 75%;
width: 25%;
}
85% {
left: 87.5%;
width: 12.5%;
}
90% {
left: 100%;
width: 0;
}
100% {
left: 0;
width: 0;
}
}
.coreid-form input {
border-radius: 0;
border: none;
border-bottom: 2px solid #aaa;
font-size: 1.2em;
background: none;
box-shadow: none;
&:focus {
box-shadow: none;
border-bottom: 2px solid #666;
}
}
.coreid-login-form, .coreid-auth-page {
border: 2px solid #ddd;
border-radius: 7px;
display: flex;
align-items: center;
min-height: 70vh;
background-color: #f8f8f8;
.coreid-login-form-inner, .coreid-auth-page-inner {
padding: 30px;
width: 100%;
}
.coreid-login-form-header, .coreid-header {
font-size: 2.5em;
margin-bottom: 10px;
}
.coreid-login-form-message, .coreid-message {
margin-bottom: 40px;
}
.buttons {
margin-top: 40px;
margin-bottom: 0;
&.pad-top {
padding-top: 20px;
}
button {
margin-right: 5px;
}
.btn {
background: #666;
border-color: #444;
&:hover {
background: #777;
}
&:focus {
background: #888;
box-shadow: #333;
}
}
}
.coreid-loading-spinner {
overflow: hidden;
background-color: rgba(0,0,0,0);
height: 7px;
margin: 0;
padding: 0;
width: calc(100% + 30px);
margin-left: -15px;
margin-top: 70px;
.inner {
height: 7px;
width: 50px;
background-color: #bbb;
position: absolute;
left: 0;
animation-name: loading-bar;
animation-duration: 1.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
}
.error-message {
color: darkred;
font-size: 0.8em;
}
.other-message {
font-size: 0.8em;
}
}