Login Card component
.c-login-card
scss
.c-login-card {
background-color: use-color(base, true-white);
background-image: url('https://cdn.chattigo.com/assets/img/isotipo-grey.svg');
background-position: -15% 0;
background-repeat: no-repeat;
background-size: 740px;
box-sizing: border-box;
color: use-color('base', 'black');
margin: auto;
min-height: 100vh;
padding: 20px 32px 40px;
@include media-breakpoint-only(tablet) {
background-position: -115% 140%;
background-size: 1100px;
}
@include media-breakpoint-only(tablet-landscape) {
background-position: -120% 120%;
background-size: 1460px;
}
@include media-breakpoint-up(tablet) {
background-image: none;
background-position: bottom left;
background-size: 1460px;
border-radius: 8px;
box-shadow: $box-shadow-card-lvl-2;
margin: 20vh auto 0;
max-width: 456px;
min-height: 544px;
padding: 30px 0;
@include if-block-has-modifier('c-login-card', 'register', true) {
margin: 14vh auto 0;
}
@include if-block-has-modifier('c-login-card', 'reg-msg', true) {
margin: 28vh auto 0;
min-height: initial;
padding: 43px 56px 40px;
text-align: center;
}
}
@include element('logo') {
margin-bottom: 16px;
margin-top: 40px;
@include media-breakpoint-up(tablet) {
margin-top: 32px;
}
// TODO: Add docs
@include if-block-has-modifier('c-login-card', 'register') {
margin-top: 0;
}
}
@include element('logo-isotipo') {
height: 63px;
}
@include element('logo-letters') {
display: inline-block;
height: 23px;
margin-top: 14px;
width: 100%;
}
@include element('header') {
margin: 0 auto 20px;
text-align: center;
width: 100%;
}
@include element('body') {
margin: auto;
padding: 0 18px;
text-align: center;
@include media-breakpoint-up(tablet) {
margin-bottom: 32px;
padding: 0 36px;
width: 360px;
}
@include if-block-has-modifier('c-login-card', 'register') {
text-align: left;
}
}
@include element('error-message') {
@include use-font('body', 'regular');
color: use-color(event, error);
cursor: not-allowed;
display: inline-block;
margin: 0;
padding-top: 4px;
word-break: break-word;
}
@include element('error-block') {
height: 36px;
margin: 0 0 16px;
text-align: center;
}
@include element('h2') {
@include use-font('h3', 'bold');
margin: 0;
margin-bottom: 8px;
padding: 0 15px;
}
@include element('subheading') {
@include use-font('subheading', 'regular');
display: inline-block;
margin: 0;
padding: 0 20px;
}
@include element('footer-message') {
@include use-font('body-alt');
margin: 0;
text-align: center;
width: 100%;
}
// components rewirtes
@include element('input') {
line-height: 24px;
margin-bottom: 16px;
}
.c-button {
margin-bottom: 16px;
}
}
Classes & Estructura para el uso del Login Card
de Chattigo.
Example
html
<div class="c-login-card">
<div class="c-login-card__header">
<div class="c-login-card__logo">
<img class="c-login-card__logo-isotipo" src="https://cdn.chattigo.com/assets/img/isotipo.svg" />
<img class="c-login-card__logo-letters" src="https://cdn.chattigo.com/assets/img/letters-logo.svg" />
</div>
<h2 class="c-login-card__subheading">
Optimiza la relación con tus clientes
</h2>
</div>
<div class="c-login-card__body">
<input type="text" class="c-input c-login-card__input" placeholder="Usuario" />
<input type="password" class="c-input c-login-card__input" placeholder="Contraseña" />
<div class="c-login-card__error-block">
<p class="c-login-card__error-message">
Login incorrecto, intente de nuevo.
</p>
</div>
<button class="c-button">
Ingresar
</button>
<a href="#1" class="c-action-link">
¿Olvidaste su contraseña?
</a>
</div>
</div>
Requires
@mixin element()
@mixin use-font()
@mixin media-breakpoint-up()
@mixin media-breakpoint-only()
@function use-color()
$box-shadow-card-lvl-2 [private]
.c-login-background
scss
.c-login-background {
background-color: use-color(primary);
background-image: url('https://cdn.chattigo.com/assets/img/background-login.svg'), use-color(gradients, balanced-dos);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
height: auto;
left: 0;
min-height: 100vh;
position: absolute;
top: 0;
width: 100%;
}
Esta clase esta hecha para ser usada como el contenedor del elemento .c-login-card
.
Example
html
<div class="u-widget-example-margin"> <!-- div only for example -->
<div class="c-login-background"></div>
</div>