improve input, button, tables

alignment.scss

@@ -34,4 +34,8 @@
 
 .overflowfix {
     overflow: auto;
+}
+
+.nowrap {
+    white-space: nowrap;
 }

button.scss

@@ -1,4 +1,4 @@
-.btn {
+.btn, .link {
     cursor: pointer;
     user-select: none;
 }
@@ -34,6 +34,15 @@ button, input[type="submit"], input[type="button"], label.button, a.button {
     }
 }
 
+button.save, .button.save, input[type="submit"].save {
+    color: rgba(0, 0, 0, 0.75);
+    background: var(--button-colored-background);
+
+    &:hover, &:focus {
+        background: var(--button-colored-background);
+    }
+}
+
 button.save, .button.save, input[type="submit"].save {
     color: rgba(0, 0, 0, 0.75);
     background: #8fff79;
@@ -69,3 +78,19 @@ button.disabled, .button.disabled, input[type="submit"].disabled {
         background: #e1e1e1;
     }
 }
+
+.link.default {
+    color: var(--button-colored-background);
+}
+.link.save {
+    color: #8fff79;
+}
+.link.cancel {
+    color: #ee5649;
+}
+.link.close {
+    color: #fffc3e;
+}
+.link.disabled {
+    color: #e1e1e1;
+}

editor.scss

@@ -1,4 +1,5 @@
-code[contenteditable] {
+code[contenteditable], .contenteditable {
     display: block;
     outline: none;
+    white-space: pre-wrap;
 }

form.scss

@@ -63,7 +63,7 @@ form {
         }
     }
 
-    textarea {
+    textarea, .contenteditable {
         height: 8rem;
     }
 }

grid.scss

@@ -46,7 +46,7 @@
 .md-hidden,
 .lg-hidden
 {
-    display: hidden;
+    display: none;
 }
 
 .col-xs-0 {
@@ -205,6 +205,10 @@
     text-align: center;
 }
 
+.right-xs {
+    margin-left: auto !important;
+}
+
 .end-xs {
     justify-content: flex-end;
     text-align: end;
@@ -240,7 +244,7 @@
 
 @media only screen and (min-width: 48em) {
     .sm-hidden {
-        display: inherit;
+        display: block;
     }
 
     .container {
@@ -425,7 +429,7 @@
 
 @media only screen and (min-width: 62em) {
     .md-hidden {
-        display: inherit;
+        display: block;
     }
 
     .container {
@@ -610,7 +614,7 @@
 
 @media only screen and (min-width: 75em) {
     .lg-hidden {
-        display: inherit;
+        display: block;
     }
 
     .container {

input.scss

@@ -3,6 +3,22 @@ input, select, textarea, .textarea, option {
     font-weight: 300;
 }
 
+input[type=checkbox] ~ .checked-visibility {
+    display: none;
+}
+
+input[type=checkbox]:checked ~ .checked-visibility {
+    display: inline-block;
+}
+
+input[type=checkbox] ~ .checked-visibility-alt {
+    display: inline-block;
+}
+
+input[type=checkbox]:checked ~ .checked-visibility-alt {
+    display: none;
+}
+
 input, select, textarea, .textarea {
     border: 1px solid var(--input-border);
 

portlet.scss

@@ -26,6 +26,12 @@
         //border-bottom-right-radius: 4px;
         border-top: 1px solid #ebedf2;
         padding: .7rem 1rem .7rem 1rem;
+        box-sizing: border-box;
+        display: flex;
+        flex: 0 1 auto;
+        flex-direction: row;
+        flex-wrap: wrap;
+        column-gap: .5rem;
     }
 
     .portlet-body > h2 {
@@ -45,7 +51,7 @@
 
 .portlet-body {
     background: #fff;
-    padding: .7rem 1rem .7rem 1rem;
+    padding: 1rem;
 
     //border-top-left-radius: 4px;
     //border-top-right-radius: 4px;

table.scss

@@ -58,6 +58,10 @@ table.default.sticky {
     }
 }
 
+.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action {
+    color: var(--button-colored-background);
+}
+
 table.default {
     //border-radius: 4px;
     width: 100%;
@@ -66,12 +70,6 @@ table.default {
     box-sizing: border-box;
     overflow-x: auto;
 
-    tbody {
-        .order-up, .order-down, .remove-form, .update-form, .save-form {
-            color: var(--button-colored-background);
-        }
-    }
-
     caption {
         font-size: 1.5rem;
         font-weight: 400;