many fixes and expands and module expansions

button.scss

@@ -4,7 +4,7 @@
     cursor: pointer;
 }
 
-button, input[type="submit"], input[type="button"], a.button {
+button, input[type="submit"], input[type="button"], label.button, a.button {
     cursor: pointer;
     display: inline-flex;
     min-width: 70px;
@@ -36,7 +36,11 @@ button.save, .button.save {
 }
 
 button.cancel, .button.cancel {
+    background: #ee5649;
 
+    &:hover, &:focus {
+        background: #ff7d79;
+    }
 }
 
 button.delete, .button.delete {

debug.css

@@ -58,6 +58,7 @@ meta[name="viewport"][content*="minimum-scale"] {
 }
 
 input:not([id]),
+input[type="text"]:not([autocomplete]),
 input[type=""],
 select:not([id]),
 textarea:not([id]) {

input.scss

@@ -127,17 +127,108 @@ input[type="datetime-local"] {
     }
 }
 
-.advancedInput {
+.advancedInput, .clickPopup {
+    position: relative;
     /* position: relative; uncomment! otherwise the drop down inside would not be able to overflow and add a scroll bar to the container which is not desired in this case! */
 }
 
-input ~ .dropdown {
+.clickPopup {
-    position: absolute;
+    label + input {
+        display: none;
+    }
+
+    .popup {
+        box-sizing: border-box;
+        padding: .5rem 1rem .5rem 1rem;
+        background: #fff;
+        box-shadow: 0 0 3px 1px rgba(72, 71, 114, 0.3);
+        position: absolute;
+        right: 0;
+
+        ul {
+            width: 100%;
+        }
+
+        > ul {
+            display: flex;
+            flex-direction: column;
+
+            & > li {
+                display: flex;
+                align-items: center;
+                margin: .5rem 0 .5rem 0;
+                white-space: nowrap;
+
+            }
+        }
+
+        .button {
+            margin-right: 1rem;
+        }
+
+        span {
+            flex-grow: 1;
+        }
+
+        input {
+            display: none;
+
+            &:checked + ul {
+                .expand {
+                    transition: all .3s ease;
+                    display: inherit;
+                    transform: rotateZ(90deg);
+                }
+
+                > li:nth-child(n+2) {
+                    display: inherit;
+                }
+            }
+        }
+
+        input + ul {
+            .expand {
+                font-size: .9rem;
+                transition: all .3s ease;
+                transform: rotateZ(0deg);
+            }
+
+            > li:nth-child(n+2) {
+                display: none;
+            }
+        }
+
+        label {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+        }
+
+        > li {
+            display: block;
+
+            a {
+                display: block;
+
+                &:hover, &:focus {
+                }
+            }
+        }
+
+        i {
+            flex-grow: 0;
+        }
+    }
+}
+
+input + .popup {
+    position: absolute; /* All other options e.g. static, relative resize the container which is bad */
     display: none;
     z-index: 3;
 }
 
-input:focus ~ .dropdown, input ~ .dropdown.active {
+/* In the past we also used input:focus ~ .popup this is a problem because clicking on something e.g. close button will not close the popup since it is still focused. */
+input:checked ~ .popup, input ~ .popup.active {
     display: inline-block;
 }
 

table.scss

@@ -27,7 +27,7 @@ table input[type=radio]:checked + i {
 }
 
 table .sort-asc, table .sort-desc, table .filter {
-    padding: 0 5px 0 5px;
+    padding: 0 2px 0 2px;
     cursor: pointer;
 }