Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

Commit

Permalink
Merge pull request #179 from GusBaamonde/new_table_component
Browse files Browse the repository at this point in the history 
feat(table component): table component ajustments
  • Loading branch information
@GusBaamonde
GusBaamonde committed Sep 13, 2019
2 parents 30ceb99 + 4106467 commit 4b6fc32
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 114 deletions.
1 change: 1 addition & 0 deletions assets/scss/core/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ $dp-spaces--lv16: 96px;
$dp-sizing--lvl0: 0;
$dp-sizing--lvl1: 11px;
$dp-sizing--lvl2: 13px;
$dp-sizing--lvl2-14: 14px;
$dp-sizing--lvl3: 15px;
$dp-sizing--lvl4: 18px;
$dp-sizing--lvl5: 22px;
Expand Down
40 changes: 31 additions & 9 deletions assets/scss/templates/_guidelines.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1441,6 +1441,15 @@ body {
}
}

.dpsg-code {
background: $dp-color-white;
border-radius: 3px;
padding: 2px 5px;
font-size: $dp-sizing--lvl2-14;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.1), 0 1.5px 6px rgba(0, 0, 0, 0.1);
margin: $dp-spaces--lv2 auto;
}

/* Layout Color Card */

.dpsg-wrap-colors {
Expand Down Expand Up @@ -1482,15 +1491,6 @@ body {
text-align: center;
padding: $dp-spaces--lv0;
}

.dpsg-code {
background: $dp-color-white;
border-radius: 3px;
padding: 2px 5px;
font-size: $dp-sizing--lvl3;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.1), 0 1.5px 6px rgba(0, 0, 0, 0.1);
margin: $dp-spaces--lv2 auto;
}
}

.dpsg-color-card {
Expand Down Expand Up @@ -1852,6 +1852,28 @@ body {
max-width: 90%;
text-align: left;
}

.dpsg-break {
width: 100%;
margin: 45px auto;
border-top: 1px solid $dp-color-ghostwhite;
border-bottom: 0;
border-left: 0;
position: relative;

&:before {
content: 'Ejemplo';
position: absolute;
left: 0;
top: -15px;
background: $dp-color-white;
border-radius: 3px;
padding: $dp-spaces--lv1 $dp-spaces--lv2;
font-size: $dp-sizing--lvl2;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.1), 0 1.5px 6px rgba(0, 0, 0, 0.1);
color: $dp-color-silver;
}
}
}

/* Layout Modals */
Expand Down
213 changes: 108 additions & 105 deletions assets/templates/table-component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,111 +69,114 @@
This will be replaced by the content of navigation.html
<!-- /build -->
<div class="dpsg-content-wrap">
<h3>Tablas</h3>
<p>
Nuestro componente de tablas esta en desarrollo. Hasta el momento
tenemos un solo ejemplo de tabla cebra y su estado
<span class="dpsg-code">:hover</span> + una pequeña animación de
sincronización
</p>
<table class="dp-c-table">
<caption></caption>
<thead>
<tr>
<th>
<a href="#">Estado</a>
</th>
<th>
<a href="#">Tipo</a>
</th>
<th>
<a href="#">Nombre</a>
</th>
<th>
<a href="#">Fecha de creación</a>
</th>
<th>
<a href="#">Acciones</a>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Single column for footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<span>Content 1</span>
</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr class="sync">
<td colspan="1">Enderec (dplrvetex)</td>
<td colspan="1">Lista nueva</td>
<td colspan="3">
<span class="text-sync">
<i class="ms-icon icon-clock"></i> Synchronizing...
</span>
</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr class="sync">
<td colspan="1">Enderec (dplrvetex)</td>
<td colspan="1">Lista nueva</td>
<td colspan="3">
<span class="text-sync">
<i class="ms-icon icon-clock"></i> Synchronizing...
</span>
</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
<article class="dpsg-content">
<h3>Tablas</h3>
<p>
Nuestro componente de tablas esta en desarrollo. Hasta el momento
tenemos un solo ejemplo de tabla cebra y su estado
<span class="dpsg-code">hover</span> más una pequeña animación de
sincronización.
</p>
<hr class="dpsg-break" />
<table class="dp-c-table">
<caption></caption>
<thead>
<tr>
<th>
<a href="#">Estado</a>
</th>
<th>
<a href="#">Tipo</a>
</th>
<th>
<a href="#">Nombre</a>
</th>
<th>
<a href="#">Fecha de creación</a>
</th>
<th>
<a href="#">Acciones</a>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Single column for footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<span>Content 1</span>
</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr class="sync">
<td colspan="1">Enderec (dplrvetex)</td>
<td colspan="1">Lista nueva</td>
<td colspan="3">
<span class="text-sync">
<i class="ms-icon icon-clock"></i> Synchronizing...
</span>
</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr class="sync">
<td colspan="1">Enderec (dplrvetex)</td>
<td colspan="1">Lista nueva</td>
<td colspan="3">
<span class="text-sync">
<i class="ms-icon icon-clock"></i> Synchronizing...
</span>
</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
</article>
</div>
</div>
<!-- wrapper-container -->
Expand Down

0 comments on commit 4b6fc32

Please sign in to comment.