adding #46

public/plain-ui.css

@@ -2302,6 +2302,7 @@ h6, .h6 {
 
 /**
  *
+ *  fields
  *
  *
  *
@@ -2309,13 +2310,13 @@ h6, .h6 {
 .field-group {
   margin: 0 0 1rem;
 }
-.field-group--valid input.field-text, .field-group--valid textarea.field-text {
+.field-group--valid .field-text {
   border-color: var(--success);
 }
 .field-group--valid .icon {
   fill: var(--success);
 }
-.field-group--error input.field-text, .field-group--error textarea.field-text {
+.field-group--error .field-text {
   border-color: var(--danger);
 }
 .field-group--error .icon {
@@ -2333,7 +2334,7 @@ h6, .h6 {
   cursor: pointer;
 }
 
-input.field-text, textarea.field-text, select.field-choice {
+.field-text, .field-choice {
   font-family: var(--font-family);
   font-size: 0.95rem;
   width: 100%;
@@ -2341,12 +2342,12 @@ input.field-text, textarea.field-text, select.field-choice {
   border-radius: 2px;
   margin: 0.7rem 0 0;
 }
-input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active {
+.field-text:focus, .field-text:active, .field-choice:focus, .field-choice:active {
   outline: 0;
   border-color: var(--border);
 }
 
-input.field-text, textarea.field-text {
+.field-text {
   padding: 0.8em 1.1em;
 }
 
@@ -2359,7 +2360,7 @@ textarea.field-text {
  *
  *
  */
-select.field-choice {
+.field-choice {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -2369,7 +2370,7 @@ select.field-choice {
   background-size: 1.5rem 100%;
   background-repeat: no-repeat;
 }
-select.field-choice:active, select.field-choice:focus {
+.field-choice:active, .field-choice:focus {
   background-image: linear-gradient(to right, #3e3e3e, #3e3e3e);
 }
 
@@ -2390,21 +2391,21 @@ select.field-choice:active, select.field-choice:focus {
  * </div>
  *
  */
-input[type=checkbox].field-choice,
+[type=checkbox].field-choice,
-input[type=radio].field-choice {
+[type=radio].field-choice {
   position: relative;
   display: none;
 }
-input[type=checkbox].field-choice ~ .field-choice__checked,
+[type=checkbox].field-choice ~ .field-choice__checked,
-input[type=radio].field-choice ~ .field-choice__checked {
+[type=radio].field-choice ~ .field-choice__checked {
   display: none;
 }
-input[type=checkbox].field-choice:checked ~ .field-choice__checked,
+[type=checkbox].field-choice:checked ~ .field-choice__checked,
-input[type=radio].field-choice:checked ~ .field-choice__checked {
+[type=radio].field-choice:checked ~ .field-choice__checked {
   display: inline-block;
 }
-input[type=checkbox].field-choice:checked ~ .field-choice__unchecked,
+[type=checkbox].field-choice:checked ~ .field-choice__unchecked,
-input[type=radio].field-choice:checked ~ .field-choice__unchecked {
+[type=radio].field-choice:checked ~ .field-choice__unchecked {
   display: none;
 }
 
@@ -2449,13 +2450,13 @@ svg.field-choice__checked {
   transition: transform 0.25s;
 }
 
-input[type=checkbox].field-choice ~ .field-switch:after {
+[type=checkbox].field-choice ~ .field-switch:after {
   left: 0;
 }
-input[type=checkbox].field-choice:checked ~ .field-switch {
+[type=checkbox].field-choice:checked ~ .field-switch {
   border-color: var(--success);
 }
-input[type=checkbox].field-choice:checked ~ .field-switch:after {
+[type=checkbox].field-choice:checked ~ .field-switch:after {
   background-color: var(--success);
   transform: translateX(100%);
 }
@@ -2686,6 +2687,7 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
 /**
  *
  *  table
+ *  
  *
  *
  */

src/scss/components/_field.scss

@@ -1,5 +1,6 @@
 /**
  *
+ *  fields
  *
  *
  *
@@ -9,7 +10,7 @@
     margin: $margin;
 
     &--valid {
-        input.field-text, textarea.field-text {
+        .field-text {
             border-color: var(--success);
         }
 
@@ -19,7 +20,7 @@
     }
 
     &--error {
-        input.field-text, textarea.field-text {
+        .field-text {
             border-color: var(--danger);
         }
 
@@ -42,7 +43,7 @@
     }
 }
 
-input.field-text, textarea.field-text, select.field-choice {
+.field-text, .field-choice {
     font-family: var(--font-family);
     font-size: 0.95rem;
 
@@ -59,7 +60,7 @@ input.field-text, textarea.field-text, select.field-choice {
     }
 }
 
-input.field-text, textarea.field-text {
+.field-text {
     padding: 0.8em 1.1em;
 }
 
@@ -74,21 +75,17 @@ textarea.field-text {
  *
  */
 
-select.field-choice {
+.field-choice {
     appearance: none;
     padding: 0.8em;
 
-    background-image:
+    background-image: linear-gradient(to right, $color__active, $color__active);
-        linear-gradient(to right, $color__active, $color__active);
+    background-position: 100%;
-    background-position:
+    background-size: 1.5rem 100%;
-        100%;
-    background-size:
-        1.5rem 100%;
     background-repeat: no-repeat;
 
     &:active, &:focus {
-        background-image:
+        background-image: linear-gradient(to right, $color__border, $color__border);
-            linear-gradient(to right, $color__border, $color__border);
     }
 }
 
@@ -110,8 +107,8 @@ select.field-choice {
  *
  */
 
-input[type=checkbox].field-choice,
+[type=checkbox].field-choice,
-input[type=radio].field-choice {
+[type=radio].field-choice {
     position: relative;
     display: none;
 
@@ -175,7 +172,7 @@ svg.field-choice__checked {
     }
 }
 
-input[type=checkbox].field-choice {
+[type=checkbox].field-choice {
     ~ .field-switch:after {
         left: 0;
     }

src/scss/components/_table.scss

@@ -1,6 +1,7 @@
 /**
  *
  *  table
+ *  
  *
  *
  */
@@ -39,6 +40,7 @@ $table__hover-background-color: lighten($color__primary, 10%) !default;
         background-color: var(--background);
     }
 
+    // other background-color for even td inside tr
     &--striped {
         .table__tr {
             &:nth-child(even) {
@@ -49,6 +51,7 @@ $table__hover-background-color: lighten($color__primary, 10%) !default;
         }
     }
 
+    // if hover tr change background color for all tr inside
     &--hover {
         .table__tr:hover {
             .table__td {