/*------------------------------------*\
Transversal Elements
#Styles for tables
\*------------------------------------*/
/**
* Class: .ay-table
* @molecule Block: table
* @section C14 data-table
* @markup
*
* Historial de pagos pick up
*
*
* | No. cuota |
* No. recibo |
* Fecha a pagar |
* Valor cuota |
* Saldo |
* % de procesabilidad |
* Capital |
* Interés |
*
*
*
*
* | 335 |
* T228843 |
* 03/Ago/2018 |
* $ 100,00 USD |
* $ 100,00 USD |
* 10.00 % |
* $ 100,00 USD |
* $ 0,00 USD |
*
*
* | 3 |
* T228845 |
* 01/Ago/2018 |
* $ 100,00 USD |
* $ 100,00 USD |
* 10.00 % |
* $ 100,00 USD |
* $ 0,00 USD |
*
*
* | 2 |
* T228845 |
* 01/Ago/2018 |
* $ 100,00 USD |
* $ 100,00 USD |
* 10.00 % |
* $ 100,00 USD |
* $ 0,00 USD |
*
*
* | 1 |
* T228845 |
* 01/Ago/2018 |
* $ 100,00 USD |
* $ 100,00 USD |
* 10.00 % |
* $ 100,00 USD |
* $ 0,00 USD |
*
*
*
*/
.ay-table {
width: 100%;
&.ay-table_center {
text-align: center;
.ay-table__head-cell {
text-align: center;
}
}
}
.ay-table__head-cell {
text-align: left;
padding: 10px;
text-transform: uppercase;
color: $c-neutro;
@include font-rem(14px);
font-family: $f-bold;
font-weight: normal;
background: $c-primary;
&:first-child {
border-radius: 5px 0 0 0;
}
&:last-child {
border-radius: 0 5px 0 0;
}
}
.ay-table__body {
border: 1px solid $c-bg-light;
}
.ay-table__row {
&:nth-of-type(2n+1) {
background-color: $c-primary-light;
&.ay-table__row_error {
background-color: rgba($c-error, .15);
}
}
}
.ay-table__row_error {
background-color: rgba($c-error, .15);
.ay-signal {
&:before {
background-color: $c-error;
}
}
}
.ay-table__cell {
padding: 10px;
vertical-align: middle;
color: $c-on;
font-family: $f-regular;
@include font-rem(12px);
}
/**
* Class: .ay-signal | Block: table | C14 data-table
* @atom Semáforo de estados
* @section Estados
* @modifiers
* .ay-signal_error Cambia el color de fondo del estado
* .ay-signal_warning Cambia el color de fondo del estado
* @markup
*
* 2
*
*
* 1
*
*
* 3
*
*/
.ay-signal {
@include flexbox;
@include align-items(center);
&:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
margin-right: 12px;
border-radius: 50%;
background-color: $c-secondary;
}
}
.ay-signal_error {
&:before {
background-color: $c-error;
}
}
.ay-signal_warning {
&:before {
background-color: $c-warning;
}
}
.ay-signal_disabled {
&:before {
background-color: $c-disabled;
}
}