mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-02-22 08:12:37 +01:00
Code Issues Releases Wiki Activity

Merge pull request #78 from guastallaigor/add-table-is-dark

Browse Source 
feat: add table is-dark class similar to the container
This commit is contained in:
ダーシノ 2018-12-07 23:00:23 +09:00 committed by GitHub
commit 19022ce1da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 89 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
css/nes.css
View File

@ -793,7 +793,6 @@ button,
}
.table.is-bordered {
margin: 4px;
box-shadow: 4px 0 #212529, 0 -4px #212529, -4px 0 #212529, 0 4px #212529;
}
@ -815,6 +814,43 @@ button,
box-shadow: -4px 0 #212529, 0 -4px #212529;
}
.table.is-dark {
position: relative;
color: #fff;
background-color: #212529;
box-shadow: 4px -4px #212529, -4px -4px #212529, -4px 4px #212529, 4px 4px #212529;
}
.table.is-dark::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background: linear-gradient(to left, transparent 4px, #fff 4px) no-repeat, linear-gradient(to bottom, transparent 4px, #fff 4px) no-repeat, linear-gradient(to right, transparent 4px, #fff 4px) no-repeat, linear-gradient(to top, transparent 4px, #fff 4px) no-repeat;
background-position: 100% 0, 100% 0, 0 100%, 0 100%;
background-size: calc(100% - 4px) 4px, 4px calc(100% - 4px);
}
.table.is-dark th,
.table.is-dark td {
padding: 0.5rem;
word-wrap: break-word;
}
.table.is-dark tr th + th {
box-shadow: -4px 0 #fff;
}
.table.is-dark tr td {
box-shadow: 0 -4px #fff;
}
.table.is-dark tr td:not(:first-child) {
box-shadow: -4px 0 #fff, 0 -4px #fff;
}
.input {
max-width: 100%;
padding: 0.5rem 1rem;

2
css/nes.css.map
View File

File diff suppressed because one or more lines are too long

2
css/nes.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
docs/table.stories.js
View File

@ -9,13 +9,14 @@ stories.addDecorator(withKnobs);
stories.add('table', () => {
const isBordered = boolean('is-bordered', true) ? 'is-bordered' : '';
const isCentered = boolean('is-centered', false) ? 'is-centered' : '';
const isDark = boolean('is-dark', false) ? 'is-dark' : '';
const selectedClasses = [isBordered, isCentered];
const selectedClasses = [isBordered, isCentered, isDark];
return `<table class="table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
<thead>
<tr>
<th>Table</th>
<th>Table.is-dark</th>
<th>Table.is-bordered</th>
<th>Table.is-centered</th>
</tr>

17
index.html
View File

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

48
scss/elements/tables.scss
View File

@ -1,14 +1,7 @@
.table {
table-layout: fixed;
background-color: #fff;
&.is-centered th {
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;
background-color: $background-color;
@mixin thsAndTdsBoxShadow($color) {
th,
td {
padding: 0.5rem;
@ -17,14 +10,45 @@
tr {
th + th {
box-shadow: -4px 0 $base-color;
box-shadow: -4px 0 $color;
}
td {
box-shadow: 0 -4px $base-color;
box-shadow: 0 -4px $color;
}
td:not(:first-child) {
box-shadow: -4px 0 $base-color, 0 -4px $base-color;
box-shadow: -4px 0 $color, 0 -4px $color;
}
}
}
&.is-centered th {
text-align: center;
}
&.is-bordered {
box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
@include thsAndTdsBoxShadow($base-color);
}
&.is-dark {
position: relative;
color: $background-color;
background-color: $base-color;
box-shadow: 4px -4px $base-color, -4px -4px $base-color, -4px 4px $base-color,
4px 4px $base-color;
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background: linear-gradient(to left, transparent 4px, $background-color 4px) no-repeat,
linear-gradient(to bottom, transparent 4px, $background-color 4px) no-repeat,
linear-gradient(to right, transparent 4px, $background-color 4px) no-repeat,
linear-gradient(to top, transparent 4px, $background-color 4px) no-repeat;
background-position: 100% 0, 100% 0, 0 100%, 0 100%;
background-size: calc(100% - 4px) 4px, 4px calc(100% - 4px);
}
@include thsAndTdsBoxShadow($background-color);
}
}