src/resources/scss/basicauth.scss
$logo-width: 100px;
$logo-height: $logo-width / 1.111111111;
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: normal;
src: url('fonts/roboto/regular.woff2') format('woff2'),
url('fonts/roboto/regular.woff') format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('fonts/roboto/light.woff2') format('woff2'),
url('fonts/roboto/light.woff') format('woff');
}
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
height: 100%;
margin: 0;
}
.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
flex-wrap: wrap;
}
.basicauth {
display: block;
margin: 25px auto;
max-width: 320px;
padding: 15px;
position: relative;
width: 100%;
@media (min-height: 350px) {
display: block;
padding: ($logo-height + 20px) 15px 15px;
}
}
.basicauth-logo {
display: block;
display: none;
left: 50%;
opacity: 0;
position: absolute;
top: 40px;
transform: translate(-50%, ($logo-height / 2));
@media (min-height: 350px) {
display: block;
}
@media (min-height: 400px) {
top: 20px;
}
@media (min-height: 450px) {
top: 0;
}
.js-basicauth-ready &,
.nojs & {
animation: logo-fadein 1s ease-in-out 0s 1 normal forwards;
}
}
.basicauth-logo-svg {
display: block;
height: $logo-height;
width: $logo-width;
}
.basicauth-lead {
font-size: 16px;
line-height: 20px;
margin: 0 0 5px;
@media (min-height: 350px) {
margin: 40px 0 5px;
}
}
.form-group {
margin: 0 0 30px;
padding: 30px 0 0;
position: relative;
}
.basicauth-password {
border: solid 1px #dee2e6;
display: block;
font-size: 16px;
line-height: 24px;
margin: 0;
padding: 10px;
width: 100%;
&:focus {
border-bottom-color: #e50060;
outline: 0;
}
}
.basicauth-label {
color: #343a40;
cursor: text;
display: inline-block;
font-size: 16px;
left: 10px;
margin-bottom: 0;
position: absolute;
top: 45px;
transition: top .25s ease-in-out,color .25s ease-in-out,font-size .25s ease-in-out,left .25s ease-in-out;
width: auto;
.nojs &,
&.js-filled,
.basicauth-password:focus + & {
cursor: default;
font-size: 13px;
left: 0;
top: 5px;
}
}
.hint-block {
color: #666;
border-radius: 5px;
font-size: 13px;
line-height: 20px;
margin: 10px 0 0;
}
.help-block {
background-color: #dee2e6;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
border-radius: 5px;
color: #721c24;
font-size: 13px;
line-height: 20px;
margin: 10px 0 0;
padding: 10px;
&:empty {
display: none;
}
}
.basicauth-buttons {
display: block;
text-align: right;
}
.basicauth-submit {
background-color: #e50060;
border: 1px solid #e50060;
border-radius: 5px;
box-shadow: none;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: 300;
line-height: 20px;
max-width: 50%;
min-height: 38px;
padding: 6px 10px;
position: relative;
text-align: center;
transition: .25s background ease-in-out;
width: 100%;
}
.basicauth-info {
bottom: 0;
display: inline-block;
left: 0;
opacity: 1;
padding: 25px;
position: absolute;
text-align: center;
width: 100%;
@media (min-width: 576px) {
text-align: left;
}
@media screen and (max-height: 650px) {
position: relative;
left: auto;
width: 100%;
text-align: center;
}
}
.basicauth-ssl-icon {
display: inline-block;
vertical-align: middle;
svg {
display: block;
}
& + span {
vertical-align: middle;
}
}
@keyframes logo-fadein {
0% {
opacity: 0;
transform: translate(-50%, ($logo-height / 2));
}
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}