From b446fa59cf13fa4c4a921583285ccba135d05916 Mon Sep 17 00:00:00 2001
From: HerrHase <me@herr-hase.wtf>
Date: Fri, 25 Feb 2022 14:20:29 +0100
Subject: [PATCH] adding #45

---
 public/components.html          |  3 +--
 public/helpers.html             |  2 +-
 public/impressum.html           |  2 +-
 public/imprint.html             |  2 +-
 public/index.html               |  2 +-
 public/layout.html              |  2 +-
 public/plain-ui.css             |  9 ++++-----
 src/scss/components/_table.scss | 25 +++++++++++++++----------
 8 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/public/components.html b/public/components.html
index e3492c7..b2b3d09 100644
--- a/public/components.html
+++ b/public/components.html
@@ -19,7 +19,7 @@
         <div class="bar">
             <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.3
+                    Plain UI 0.5
                 </h1>
             </div>
             <div class="bar__main justify-end">
@@ -820,7 +820,6 @@
                     </tbody>
                 </table>
 
-
                 <!--- tabs -->
                 <h2 class="m-top-5">
                     Tabs
diff --git a/public/helpers.html b/public/helpers.html
index 546d70d..633b992 100644
--- a/public/helpers.html
+++ b/public/helpers.html
@@ -16,7 +16,7 @@
         <div class="bar">
             <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.3
+                    Plain UI 0.5
                 </h1>
             </div>
             <div class="bar__main justify-end">
diff --git a/public/impressum.html b/public/impressum.html
index 314f88f..a5927b9 100644
--- a/public/impressum.html
+++ b/public/impressum.html
@@ -19,7 +19,7 @@
         <div class="bar">
             <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.3
+                    Plain UI 0.5
                 </h1>
             </div>
             <div class="bar__main justify-end">
diff --git a/public/imprint.html b/public/imprint.html
index 314f88f..a5927b9 100644
--- a/public/imprint.html
+++ b/public/imprint.html
@@ -19,7 +19,7 @@
         <div class="bar">
             <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.3
+                    Plain UI 0.5
                 </h1>
             </div>
             <div class="bar__main justify-end">
diff --git a/public/index.html b/public/index.html
index def1859..6974469 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,7 +17,7 @@
         <div class="bar">
             <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.3
+                    Plain UI 0.5
                 </h1>
             </div>
             <div class="bar__main justify-end">
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 @@
         <div class="bar">
             <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.3
+                    Plain UI 0.5
                 </h1>
             </div>
             <div class="bar__main justify-end">
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;
             }
         }
     }