diff --git a/public/layout.html b/public/layout.html
index 4117bda..a8c7e76 100644
--- a/public/layout.html
+++ b/public/layout.html
@@ -17,7 +17,7 @@
- Plain UI 0.3
+ Plain UI 0.5
diff --git a/public/plain-ui.css b/public/plain-ui.css
index 2e63a6f..89915a7 100644
--- a/public/plain-ui.css
+++ b/public/plain-ui.css
@@ -2685,6 +2685,7 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
/**
*
+ * table
*
*
*/
@@ -2693,9 +2694,6 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
border: 1px solid var(--border);
background: var(--white);
}
-.table--striped tr:nth-child(even) {
- background-color: #fdfdfd;
-}
.table--scroll {
overflow-x: auto;
}
@@ -2716,11 +2714,12 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
color: white;
background-color: var(--background);
}
-.table--hover .table__tr:hover {
- background-color: #585858;
+.table--striped .table__tr:nth-child(even) .table__td {
+ background-color: #e4e4e4;
}
.table--hover .table__tr:hover .table__td {
color: white;
+ background-color: #585858;
}
/**
diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss
index b8aeaf5..13efabb 100644
--- a/src/scss/components/_table.scss
+++ b/src/scss/components/_table.scss
@@ -1,5 +1,6 @@
/**
*
+ * table
*
*
*/
@@ -8,19 +9,14 @@ $table__padding-breakpoints: (
$breakpoint__md: 0.5em 1.25em
) !default;
+$table__striped-background-color: lighten($color__primary, 65%) !default;
+$table__hover-background-color: lighten($color__primary, 10%) !default;
+
.table {
width: 100%;
border: $border;
background: var(--white);
- &--striped {
- tr {
- &:nth-child(even) {
- background-color: lighten($color__primary, 75%);
- }
- }
- }
-
&--scroll {
overflow-x: auto;
}
@@ -43,12 +39,21 @@ $table__padding-breakpoints: (
background-color: var(--background);
}
+ &--striped {
+ .table__tr {
+ &:nth-child(even) {
+ .table__td {
+ background-color: $table__striped-background-color;
+ }
+ }
+ }
+ }
+
&--hover {
.table__tr:hover {
- background-color: lighten($color__primary, 10%);
-
.table__td {
color: white;
+ background-color: $table__hover-background-color;
}
}
}