Skip to content

Instantly share code, notes, and snippets.

@emanoelqueiroz

emanoelqueiroz/login.hbs

Created July 13, 2017 12:29
Show Gist options
  • Save emanoelqueiroz/95d5d09dd9ce96747afd0778cdbd578f to your computer and use it in GitHub Desktop.
Save emanoelqueiroz/95d5d09dd9ce96747afd0778cdbd578f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
login.hbs
<div class="login-background">
<div class="login-content">
<div class="login-container login-portal">
<div class="login-logo">
<div class="talentrh-loading">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 293.23 60.96" width="293.23" height="60.96">
<title>talentrh</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Design">
<path class="cls-1" d="M288.77,60.82a4.31,4.31,0,0,1-3.07-1.26,4,4,0,0,1-1.29-3V45H270.25V56.54a4.07,4.07,0,0,1-1.31,3,4.23,4.23,0,0,1-3.05,1.24h-.1a4.31,4.31,0,0,1-3.07-1.26c-.89-.84-1.29-2.2-1.29-4.39V24.56a4.34,4.34,0,0,1,4.36-4.74h.1A4.37,4.37,0,0,1,268.94,21a4.19,4.19,0,0,1,1.31,3.07V36.53H284.4V24.1A4.19,4.19,0,0,1,285.7,21a4.39,4.39,0,0,1,3.07-1.23h.1A4.37,4.37,0,0,1,291.92,21c.87.85,1.31,1.84,1.31,4.86V56.76a3.9,3.9,0,0,1-1.31,2.82,4.24,4.24,0,0,1-3.05,1.24Z"
/>
<path class="cls-1" d="M252.47,60.9a4.32,4.32,0,0,1-3-1.2,3.87,3.87,0,0,1-1.28-2.92V50.26c0-1.26-1.11-3.65-5.31-3.65h-7.23V56.78a3.94,3.94,0,0,1-1.25,2.92,4.34,4.34,0,0,1-3,1.2,4.26,4.26,0,0,1-3.1-1.23A3.83,3.83,0,0,1,227,56.78V31.11a10.46,10.46,0,0,1,3.41-7.84A11.59,11.59,0,0,1,238.62,20h3.55a14.49,14.49,0,0,1,10.34,4.08A13.2,13.2,0,0,1,256.83,34a10.07,10.07,0,0,1-3.62,8.19,11.11,11.11,0,0,1,3.62,8.09v6.52a3.89,3.89,0,0,1-1.31,2.94,4.28,4.28,0,0,1-3,1.18Zm-10.3-22.61c6,0,6-2.59,6-4.31a5.22,5.22,0,0,0-1.75-4,5.87,5.87,0,0,0-4.25-1.65H239a3.52,3.52,0,0,0-2.51.81,2.6,2.6,0,0,0-.84,1.47,3.76,3.76,0,0,0-.05.74v7Z"
/>
<path class="cls-1" d="M114.28,60.84A20.52,20.52,0,0,1,93.77,40.33a19.84,19.84,0,0,1,6-14.5,20.46,20.46,0,0,1,25.7-2.67,22.08,22.08,0,0,1,7.8,9,4.14,4.14,0,0,1,.14,3.27c-.41,1.1-1.54,1.51-2.62,2L117.67,43.4,105.8,48.77a11.08,11.08,0,0,0,8.48,3.54,11.88,11.88,0,0,0,11.21-8,4.06,4.06,0,0,1,4.11-2.9,4.12,4.12,0,0,1,3.51,1.82,4.06,4.06,0,0,1,.53,3.9A19.85,19.85,0,0,1,126.26,57,20.12,20.12,0,0,1,114.28,60.84Zm0-32.31a11.87,11.87,0,0,0-11.66,9.58,13,13,0,0,0-.2,2.32c0,.1,0,.19,0,.29v.08l20-9A11.09,11.09,0,0,0,114.28,28.54Z"
/>
<path class="cls-1" d="M66.38,60.69a4.2,4.2,0,0,1-3-1.27,4.84,4.84,0,0,1-1.24-3.1c-2.56,2.64-7.41,4.37-11.78,4.37a19.91,19.91,0,0,1-14.49-6,19.6,19.6,0,0,1-6-14.38,19.61,19.61,0,0,1,6-14.38,19.91,19.91,0,0,1,14.49-6,19.92,19.92,0,0,1,14.49,6,19.61,19.61,0,0,1,6,14.38v16a4,4,0,0,1-1.3,3,4.17,4.17,0,0,1-3,1.25Zm-16.07-32A11.29,11.29,0,0,0,42,32.12a11.13,11.13,0,0,0-3.41,8.23A11.18,11.18,0,0,0,42,48.62,11.34,11.34,0,0,0,50.32,52,11.67,11.67,0,0,0,62.05,40.35,11.73,11.73,0,0,0,50.32,28.7Z"
/>
<path class="cls-1" d="M82.32.1a4.16,4.16,0,0,1,3.06,1.31,4.58,4.58,0,0,1,1.29,3.27V56.33a4.4,4.4,0,0,1-1.29,3.22,4.08,4.08,0,0,1-3.06,1.36h-.14a4.07,4.07,0,0,1-3.06-1.36,4.4,4.4,0,0,1-1.29-3.22V4.68a4.57,4.57,0,0,1,1.29-3.27A4.15,4.15,0,0,1,82.18.1Z"
/>
<path class="cls-1" d="M212.74,60.82c-5.2-.25-8.34-1.57-12-5.08A17.39,17.39,0,0,1,195.3,42.6V4.5a4.29,4.29,0,0,1,1.35-3.23A4.4,4.4,0,0,1,199.83,0H200a4.39,4.39,0,0,1,3.2,1.3,4.32,4.32,0,0,1,1.32,3.2V19.91h12a4.25,4.25,0,0,1,3.17,1.34,4.3,4.3,0,0,1,1.36,3.23v.15a4.06,4.06,0,0,1-1.32,3.13,4.3,4.3,0,0,1-3.21,1.37H199.51l5.06,3.32V42.6a8.54,8.54,0,0,0,2.76,6.61,11,11,0,0,0,6.36,2.38,4.26,4.26,0,0,1,3.17,1.34,4.3,4.3,0,0,1,1.35,3.23v.14a4.07,4.07,0,0,1-1.32,3.13,4.3,4.3,0,0,1-3.21,1.37Z"
/>
<path class="cls-1" d="M17.44,60.76c-5.2-.25-8.34-1.56-12-5.08A17.36,17.36,0,0,1,0,42.56V4.5A4.29,4.29,0,0,1,1.35,1.27,4.4,4.4,0,0,1,4.53,0h.22A4.39,4.39,0,0,1,8,1.3,4.31,4.31,0,0,1,9.27,4.5v15.4h12a4.6,4.6,0,0,1,4.53,4.57v.15a4.06,4.06,0,0,1-1.32,3.12,4.3,4.3,0,0,1-3.21,1.37H4.22l5.06,3.32V42.56A8.52,8.52,0,0,0,12,49.17a11.05,11.05,0,0,0,6.36,2.38,4.6,4.6,0,0,1,4.53,4.57v.14a4.06,4.06,0,0,1-1.32,3.13,4.3,4.3,0,0,1-3.21,1.37Z"
/>
<circle class="cls-1" cx="187.21" cy="24.69" r="4.74" />
<path class="cls-1" d="M180.2,61A4.43,4.43,0,0,1,177,59.63a4.19,4.19,0,0,1-1.34-3.14V41.86a12.33,12.33,0,0,0-3.73-9,13,13,0,0,0-18.21,0,12.33,12.33,0,0,0-3.73,9V56.49a4.18,4.18,0,0,1-1.34,3.14A4.37,4.37,0,0,1,145.46,61h-.14a4.36,4.36,0,0,1-3.17-1.33,4.17,4.17,0,0,1-1.34-3.14V41.86a21,21,0,0,1,6.45-15.41,22.12,22.12,0,0,1,31.1,0,21,21,0,0,1,6.45,15.41V56.49a4.18,4.18,0,0,1-1.34,3.14A4.27,4.27,0,0,1,180.3,61Z"
/>
</g>
</g>
</svg>
</div>
{{!--<small>app-version</small>--}}
<span>Benefícios</span>
</div>
<form id="loginForm" {{action 'authenticate' on='submit' }} class="form-signin form floating-label">
<div class="form-group">
{{input type="text" class="form-control" value=identification required=true autofocus=true}}
<label id="usernameLabel" for="username">{{t "login.username"}}</label>
</div>
<div class="form-group">
{{input type="password" class="form-control" value=password required=true}}
<label id="passwordLabel" for="password">{{t "login.password"}}</label>
</div>
<div class="row">
{{!--
<div class="col-xs-12">
<div class="checkbox checkbox-inline checkbox-styled checkbox-info">
<label>
<input type="checkbox" name="manterConectado" >
<span>{{t "login.keep.connected"}}</span>
</label>
</div>
</div>--}}
<div class="col-xs-12">
<button type="submit" class="btn btn-block btn-primary btn-loading-state" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Efetuando Login">Login</button>
</div>
{{!--
<div class="col-xs-12">
<a>{{t "login.password.recover"}}</a>
</div>--}}
</div>
</form>
<div class="login-bottom">
<span>{{t "login.a.solution"}}</span>
<img src="img/via_logo.png">
</div>
</div>
</div>
</div>
Raw
login.less
.login-background {
background-image: url("/images/login_background2.jpg");
background-color: rgb(69, 126, 191) !important;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*background-size: 100% 100%;*/
width: 100%;
height: 100%;
position: absolute;
}
.background-image {
background-repeat: no-repeat;
background-position-x: 49.1%;
background-position-y: 82%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
height: 100%;
width: 100%;
position: absolute;
opacity: 0.9;
}
.checkbox.checkbox-inline.checkbox-styled {
margin-top: 3px;
}
.login-content {
z-index: 1;
left: 50%;
position: absolute;
margin-left: -174px;
height: 100%;
/*background: rgba(255, 255, 255, 0.9);*/
}
.login-container {
width: 348px;
padding: 20px;
position: relative;
top: 50%;
margin-top: -338px;
background-color: white;
-webkit-box-shadow: 0px 0px 39px 1px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 39px 1px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 39px 1px rgba(0, 0, 0, 0.8);
}
.login-container.login-portal {
margin-top: -270px;
}
.login-container.portal {
margin-top: -268px;
}
.fa-lg {
font-size: 26px !important;
}
img.img-logo-login, img.img-logo-login:hover, img.img-logo-login:active, img.img-logo-login:focus {
width: 280px !important;
opacity: 1;
}
.login-logo {
padding: 30px 0;
text-align: center;
span {
font-size: 18px;
}
}
.login-bottom {
width: 100%;
text-align: center;
display: block;
padding-top: 30px;
}
.login-bottom img {
width: 120px;
}
.login-bottom span {
display: block;
margin-bottom: -5px;
}
button.btn.ink-reaction.btn-primary.btn-loading-state {
width: 100%;
}
.form-group .form-control~label:after, .form-group .form-control~.form-control-line:after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
height: 2px;
width: 10px;
visibility: hidden;
-webkit-transition: 0.2s ease all;
-o-transition: 0.2s ease all;
transition: 0.2s ease all;
}
.checkbox.checkbox-inline.checkbox-styled.checkbox-info {
margin-bottom: 20px;
}
a.btn.btn-block.ink-reaction.btn-default {
margin-top: 5px;
}
.login2background {
background-image: url(https://s13.postimg.org/8xs7irifb/education2.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
}
.loginbox {
background: rgba(253, 255, 255, 0.69);
color: black;
margin-top: 25%;
/*left: 25%;*/
padding: 20px;
box-shadow: 0 8px 50px -2px #000;
border-radius: 5px;
}
.logo {
width: 130px;
height: 55px;
margin-left: 10%;
}
@media (max-width:767px) {
.loginbox {
margin-top: 10%;
}
}
.loginbox_content {
padding: 5% 11% 5% 11%;
}
.singtext {
font-family: "Open Sans", sans-serif;
font-size: 27px;
color: #82C226;
float: right;
padding-right: 25%;
}
.submit-btn {
float: right;
margin-right: 28%;
}
.forgotpassword {
padding-left: 10%;
}
.login-container.login-portal {
border-radius: 2px;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.login-background {
background-image: url("/img/login_background2.jpg");
}
@media (max-width:800px) {
.submit-btn {
margin-right: 23%;
}
}
// Animation Duration
@duration: 3s;
// Colors
@primary-color: #599FEE;
@secondary-color: #FFF;
.talentrh-loading {
margin: 0 auto;
svg {
width: 100%;
padding: 2px;
}
.cls-1{
fill: transparent;
stroke-width: 2px;
stroke: @primary-color;
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: stroke @duration linear forwards;
}
}
@keyframes stroke {
50% {
stroke-dashoffset: 0;
fill: @secondary-color;
}
75% {
stroke-width: 2px;
stroke-dashoffset: 0;
fill: @secondary-color;
}
100% {
fill: @primary-color;
stroke-width: 0;
stroke-dashoffset: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment