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

feat(table): add dark theme to tables

Browse Source
This commit is contained in:
Igor Guastalla de Lima
2018-12-06 20:41:58 -02:00
parent c5dcd3f226
commit ff2b78b01b
6 changed files with 106 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
scss/elements/tables.scss
View File

@@ -1,13 +1,8 @@
.table {
display: block;
table-layout: fixed;
background-color: #fff;
&.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;
@mixin thsAndTdsBoxShadow($color) {
th,
td {
padding: 0.5rem;
@@ -16,14 +11,51 @@
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;
&::before,
&::after {
position: absolute;
z-index: -1;
content: "";
}
&::before {
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
background-color: $base-color;
}
&::after {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border: 4px solid #fff;
}
@include thsAndTdsBoxShadow(#fff);
}
}