adding #45

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

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">

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">

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">

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">

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">

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;
 }
 
 /**

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;
             }
         }
     }