mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-09-02 18:42:47 +02:00
Code Issues Releases Wiki Activity

Merge pull request #133 from nostalgic-css/table-margin

Browse Source 
fix(tables.scss): add margin to table is-border class
This commit is contained in:
Trezy
2018-12-09 10:19:08 -06:00
committed by GitHub
parent bb1ec3e2cf 21eae829b8
commit 99011b1226
3 changed files with 61 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
index.html
View File

@@ -136,44 +136,46 @@
</div>
</section>
<section class="container with-title" style="display:flex">
<section class="container with-title">
<h2 class="title">Table</h2>
<table class="table is-bordered is-centered" style="margin:15px 15px 5px 0;">
<thead>
<tr>
<th>Table.is-bordered</th>
<th>Table.is-centered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
</tbody>
</table>
<table class="table is-bordered is-dark" style="margin:15px 4px 5px 15px">
<thead>
<tr>
<th>Table.is-dark</th>
<th>Table.is-bordered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
</tbody>
</table>
<div class="tables">
<table class="table is-bordered is-centered">
<thead>
<tr>
<th>Table.is-bordered</th>
<th>Table.is-centered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
</tbody>
</table>
<table class="table is-bordered is-dark">
<thead>
<tr>
<th>Table.is-dark</th>
<th>Table.is-bordered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="container with-title">

1
scss/elements/tables.scss
View File

@@ -24,6 +24,7 @@
text-align: center;
}
&.is-bordered {
margin: 4px;
box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
@include thsAndTdsBoxShadow($base-color);
}

21
style.css
View File

@@ -16,6 +16,27 @@ div.containers > .container {
max-width: 400px;
}
div.tables {
display: flex;
flex-wrap: wrap;
}
div.tables > .table {
min-width: 350px;
max-width: calc(50% - 2rem);
}
div.tables > .table:first-child {
margin-right: 2rem;
margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
div.tables > .table {
max-width: 100%;
margin-right: 0;
}
}
.balloon.container .balloon {
max-width: 600px;
margin: 2rem 2rem;