style fixes, bug fixes

alert.scss

@@ -1,5 +1,3 @@
-
-
 .log-msg {
     padding: 1rem;
     margin: 1rem;

alignment.scss

@@ -1,3 +1,7 @@
+.nobreak, .nowrap {
+    white-space: nowrap;
+}
+
 .center {
     margin: 0 auto;
 }
@@ -35,7 +39,3 @@
 .overflowfix {
     overflow: auto;
 }
-
-.nowrap {
-    white-space: nowrap;
-}

button.scss

@@ -9,7 +9,6 @@ button, input[type="submit"], input[type="button"], label.button, a.button {
     min-width: 70px;
     background: var(--button-colored-background);
     color: var(--text-on-background-color-2);
-    margin: 0;
     padding: 0 1rem 0 1rem;
     flex-grow: 0;
     height: 32px;
@@ -82,15 +81,19 @@ button.disabled, .button.disabled, input[type="submit"].disabled {
 .link.default {
     color: var(--button-colored-background);
 }
+
 .link.save {
     color: #8fff79;
 }
+
 .link.cancel {
     color: #ee5649;
 }
+
 .link.close {
     color: #fffc3e;
 }
+
 .link.disabled {
     color: #e1e1e1;
 }

canvas.scss

@@ -1,10 +1,8 @@
-
-
 canvas {
     background: #fff;
     user-select: none;
-}
 
-canvas.chart {
+    &.chart {
-    width: 100%;
+        width: 100%;
+    }
 }

cookie_consent.scss

@@ -40,14 +40,14 @@
     .consent_element {
         margin-top: 1rem;
     }
-}
 
-#cookieConsentForm form {
+    form {
-    background : #fff;
+        background : #fff;
-    border: 1px solid var(--box-border);
+        border: 1px solid var(--box-border);
-    display: inline-block;
+        display: inline-block;
-    padding: 1rem;
+        padding: 1rem;
-    border-radius: 3px;
+        border-radius: 3px;
+    }
 }
 
 #cookieConsentForm_defaultbuttons,

form.scss

@@ -34,46 +34,3 @@ form {
         }
     }
 }
-
-.form-group {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    > *:not(label) {
-        flex: 1;
-    }
-
-    & + * {
-        margin-top: .75rem;
-    }
-
-    label {
-        flex: 0 0 100%;
-    }
-
-    .input-control {
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-
-        & +.input-control {
-            margin-left: 1rem;
-        }
-    }
-
-    textarea, .contenteditable {
-        height: 8rem;
-    }
-}
-
-* + .form-group {
-    margin-top: .75rem;
-}
-
-@media (max-width: 768px) {
-    .form-group {
-        flex-direction: column;
-    }
-}

grid.scss

@@ -211,7 +211,7 @@
 
 .end-xs {
     justify-content: flex-end;
-    text-align: end;
+    margin-left: auto;
 }
 
 .top-xs {

input.scss

@@ -368,33 +368,35 @@ label.radio, label.checkbox {
     }
 }
 
-label.radio {
+label {
-    .checkmark {
+    &.radio {
-        border-radius: 50%;
+        .checkmark {
-
-        &:after {
-            top: 5px;
-            left: 5px;
-            width: 5px;
-            height: 5px;
             border-radius: 50%;
-            background: #fff;
+
+            &:after {
+                top: 5px;
+                left: 5px;
+                width: 5px;
+                height: 5px;
+                border-radius: 50%;
+                background: #fff;
+            }
         }
     }
-}
 
-label.checkbox {
+    &.checkbox {
-    .checkmark {
+        .checkmark {
-        &:after {
+            &:after {
-            top: 2px;
+                top: 2px;
-            left: 4px;
+                left: 4px;
-            width: 4px;
+                width: 4px;
-            height: 6px;
+                height: 6px;
-            border: solid white;
+                border: solid white;
-            border-width: 0 3px 3px 0;
+                border-width: 0 3px 3px 0;
-            -webkit-transform: rotate(45deg);
+                -webkit-transform: rotate(45deg);
-            -ms-transform: rotate(45deg);
+                -ms-transform: rotate(45deg);
-            transform: rotate(45deg);
+                transform: rotate(45deg);
+            }
         }
     }
 }
@@ -472,9 +474,6 @@ select.plain {
     box-shadow: none;
 }
 
-// * fix height definition (should be automatic)
-// * fix close automatic if radio, if checkbox = multiple, don't close automatic
-// * fix opening drop down when clicken on text instead of end of text area
 .dropdown {
     cursor: pointer;
     display: inline-block;

layout.scss

@@ -37,3 +37,63 @@ div.sticky, section.sticky {
 .inline {
     display: inline;
 }
+
+.form-group {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    > *:not(label) {
+        flex: 1;
+    }
+
+    & + * {
+        margin-top: .75rem;
+    }
+
+    label {
+        flex: 0 0 100%;
+    }
+
+    .input-control {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        & +.input-control {
+            margin-left: 1rem;
+        }
+    }
+
+    textarea, .contenteditable {
+        height: 8rem;
+    }
+}
+
+* + .form-group {
+    margin-top: .75rem;
+}
+
+@media (max-width: 768px) {
+    .form-group {
+        flex-direction: column;
+    }
+}
+
+@each $tuple in
+    'wf-100' 100%, 'wf-80' 80%, 'wf-20' 20%, 'wf-66' 66.66%,
+    'wf-50' 50%, 'wf-33' 33.33%, 'wf-25' 25%, 'wf-75' 75% {
+    .#{nth($tuple, 1)} {
+        width: #{nth($tuple, 2)};
+    }
+}
+
+.spacer {
+    padding: 5px;
+}
+
+.resizable {
+    resize: both;
+    overflow: auto;
+}

portlet.scss

@@ -1,38 +1,22 @@
 .portlet {
     border: 1px solid var(--box-border);
-    //box-shadow: 0 0 3px 1px rgba(72, 71, 114, 0.3);
     box-sizing: border-box;
     margin-top: 1rem;
-    //overflow-x: auto; removed in order to prevent scroll bars for tooltips which are longer than the portlet (test in general settings view)
-    //border-top: 2px solid var(--box-highlight);
-
-    //border-top-left-radius: 4px;
-    //border-top-right-radius: 4px;
-    //border-bottom-left-radius: 4px;
-    //border-bottom-right-radius: 4px;
 
     .portlet-head {
         background: #fff;
-        //border-top-left-radius: 4px;
-        //border-top-right-radius: 4px;
         border-bottom: 1px solid #ebedf2;
         padding: .7rem 1rem .7rem 1rem;
         font-weight: 300;
         display: flex;
-        flex: 0 1 auto;
-        flex-direction: row;
     }
 
     .portlet-foot {
         background: #fff;
-        //border-bottom-left-radius: 4px;
-        //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;
     }
@@ -44,6 +28,46 @@
     .portlet-separator {
         border-bottom: 1px solid #ebedf2;
     }
+
+    &.highlight-1 {
+        background: var(--color-red);
+        color: #fff;
+
+        .portlet-body, .portlet-head {
+            background: var(--color-red);
+            border: 0;
+        }
+    }
+
+    &.highlight-2 {
+        background: var(--color-green);
+        color: #fff;
+
+        .portlet-body, .portlet-head {
+            background: var(--color-green);
+            border: 0;
+        }
+    }
+
+    &.highlight-3 {
+        background: var(--color-blue);
+        color: #fff;
+
+        .portlet-body, .portlet-head {
+            background: var(--color-blue);
+            border: 0;
+        }
+    }
+
+    &.highlight-4 {
+        background: var(--color-yellow);
+        color: #fff;
+
+        .portlet-body, .portlet-head {
+            background: var(--color-yellow);
+            border: 0;
+        }
+    }
 }
 
 .plain-portlet {
@@ -55,49 +79,4 @@
 .portlet-body {
     background: #fff;
     padding: 1rem;
-
-    //border-top-left-radius: 4px;
-    //border-top-right-radius: 4px;
-    //border-bottom-left-radius: 4px;
-    //border-bottom-right-radius: 4px;
-}
-
-.portlet.highlight-1 {
-    background: var(--color-red);
-    color: #fff;
-
-    .portlet-body, .portlet-head {
-        background: var(--color-red);
-        border: 0;
-    }
-}
-
-.portlet.highlight-2 {
-    background: var(--color-green);
-    color: #fff;
-
-    .portlet-body, .portlet-head {
-        background: var(--color-green);
-        border: 0;
-    }
-}
-
-.portlet.highlight-3 {
-    background: var(--color-blue);
-    color: #fff;
-
-    .portlet-body, .portlet-head {
-        background: var(--color-blue);
-        border: 0;
-    }
-}
-
-.portlet.highlight-4 {
-    background: var(--color-yellow);
-    color: #fff;
-
-    .portlet-body, .portlet-head {
-        background: var(--color-yellow);
-        border: 0;
-    }
 }

progress.scss

@@ -1,5 +1,3 @@
-
-
 .meter {
     height: 15px; /* Can be anything */
     position: relative;
@@ -17,6 +15,27 @@
         position: relative;
         overflow: hidden;
     }
+
+    &.orange > span {
+        background-color: #f1a165;
+        background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
+        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
+        background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
+    }
+
+    &.blue > span {
+        background-color: #96c2f1;
+        background-image: -moz-linear-gradient(top, #96c2f1, #4394f3);
+        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #96c2f1),color-stop(1, #4394f3));
+        background-image: -webkit-linear-gradient(#96c2f1, #4394f3);
+    }
+
+    &.red > span {
+        background-color: #f0a3a3;
+        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
+        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
+        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
+    }
 }
 
 .meter > span:after, .animate > span > span {
@@ -62,29 +81,6 @@
     }
 }
 
-.meter {
-    &.orange > span {
-        background-color: #f1a165;
-        background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
-        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
-        background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
-    }
-
-    &.blue > span {
-        background-color: #96c2f1;
-        background-image: -moz-linear-gradient(top, #96c2f1, #4394f3);
-        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #96c2f1),color-stop(1, #4394f3));
-        background-image: -webkit-linear-gradient(#96c2f1, #4394f3);
-    }
-
-    &.red > span {
-        background-color: #f0a3a3;
-        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
-        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
-        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
-    }
-}
-
 .noanimation > span > span, .noanimation > span:after {
     -webkit-animation: none;
 }

size.scss

@@ -1,16 +0,0 @@
-@each $tuple in
-    'wf-100' 100%, 'wf-80' 80%, 'wf-20' 20%, 'wf-66' 66.66%,
-    'wf-50' 50%, 'wf-33' 33.33%, 'wf-25' 25%, 'wf-75' 75% {
-    .#{nth($tuple, 1)} {
-        width: #{nth($tuple, 2)};
-    }
-}
-
-.spacer {
-    padding: 5px;
-}
-
-.resizable {
-    resize: both;
-    overflow: auto;
-}

styles.scss

@@ -1,5 +1,5 @@
-@import "clean", "default", "size", "transformation", "alignment", "visibility", "animate", "grid";
+@import "clean", "default", "alignment", "visibility", "animate", "grid";
-@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag", "tree";
+@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "pagination", "progress", "section", "tab", "table", "tag", "tree";
 @import "media";
 @import "portlet", "menu";
 @import "editor", "cookie_consent";

table.scss

@@ -1,36 +1,186 @@
-table.fixed {
+.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action {
-    table-layout: fixed;
-}
-
-table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
-    display: none;
-}
-
-table .order-up, table .order-down {
-    cursor: pointer;
-}
-
-table thead input[type=radio] {
-    padding: 0;
-    margin: 0;
-    display: none;
-}
-
-table thead i.fa {
-    color: #888;
-}
-
-table input[type=radio]:checked + i {
     color: var(--button-colored-background);
 }
 
-table input[type=checkbox]:checked + label i {
+table {
-    color: var(--button-colored-background);
+    &.fixed {
+        table-layout: fixed;
+    }
+
+    input[type=radio]:checked + i {
+        color: var(--button-colored-background);
+    }
+
+    input[type=checkbox]:checked + label i {
+        color: var(--button-colored-background);
+    }
+
+    .order-up, .order-down {
+        cursor: pointer;
+    }
+
+    .sort-asc, .sort-desc, .filter {
+        padding: 0 2px 0 2px;
+        cursor: pointer;
+    }
+
+    &:not([id]) > thead .sort-asc, &:not([id]) > thead .sort-desc {
+        display: none;
+    }
+
+    &.default.sticky {
+        position: relative;
+
+        thead {
+            th, td {
+                background: var(--table-head-background);
+                position: sticky;
+                top: 0;
+                z-index: 2;
+
+                & > * {
+                    vertical-align : middle;
+                }
+            }
+        }
+    }
+
+    &.default {
+        //border-radius: 4px;
+        width: 100%;
+        max-width: 100%;
+        font-size: 0.9em;
+        box-sizing: border-box;
+        overflow-x: auto;
+
+        caption {
+            font-size: 1.5rem;
+            font-weight: 400;
+            border-bottom: 1px solid var(--box-border);
+            background: var(--table-caption-background);
+            padding: .5rem;
+
+            //border-top-left-radius: 4px;
+            //border-top-right-radius: 4px;
+
+            text-align: left;
+
+            i {
+                font-size: .8rem;
+            }
+
+            height: 2.5rem;
+        }
+
+        td {
+            padding: 3px 10px 3px 10px;
+            white-space: nowrap;
+        }
+
+        tbody {
+            tr {
+                height: 2.5rem;
+
+                &:nth-of-type(2n) td {
+                    background: var(--table-row-background);
+                }
+
+                &:nth-of-type(2n+1) td {
+                    background: var(--table-row-background-alt);
+                }
+
+                &:hover td, &:focus td {
+                    background: var(--table-row-background-hover);
+                }
+
+                td, th {
+                    border-bottom: 1px solid #ebedf2;
+                }
+
+                &:last-child td, &:last-child th {
+                    border: none;
+                }
+
+                &:focus, &:hover {
+                    outline: none;
+                    transform: scale(1);
+                    box-shadow: 0 0 5px var(--box-border);
+                }
+            }
+
+            th {
+                background: var(--table-head-background);
+            }
+        }
+
+        thead {
+            background: var(--table-head-background);
+
+            tr {
+                height: 2.5rem;
+            }
+
+            td {
+                border-bottom: 1px solid #ebedf2;
+            }
+
+            input[type=radio] {
+                display: none;
+
+                &:checked + label {
+                    color: var(--box-highlight);;
+                }
+            }
+        }
+
+        .empty {
+            text-align: center;
+            color: #d8d8d8;
+        }
+
+        tfoot {
+            border: none;
+
+            label {
+                float: left;
+            }
+
+            select {
+                width: auto;
+                float: right;
+                margin: 0;
+                min-width: 0px;
+            }
+
+            td {
+                text-align: center;
+                padding-top: 10px;
+            }
+        }
+    }
+
+    &.list {
+        th {
+            text-align: left;
+            padding: 2px 0 2px 0;
+        }
+
+        td {
+            padding: 2px 5px 2px 5px;
+        }
+    }
 }
 
-table .sort-asc, table .sort-desc, table .filter {
+thead {
-    padding: 0 2px 0 2px;
+    input[type=radio] {
-    cursor: pointer;
+        padding: 0;
+        margin: 0;
+        display: none;
+    }
+
+    i.fa {
+        color: #888;
+    }
 }
 
 @for $i from 1 through 10 {
@@ -41,152 +191,6 @@ table .sort-asc, table .sort-desc, table .filter {
     }
 }
 
-table.default.sticky {
-    position: relative;
-
-    thead {
-        th, td {
-            background: var(--table-head-background);
-            position: sticky;
-            top: 0;
-            z-index: 2;
-
-            & > * {
-                vertical-align : middle;
-            }
-        }
-    }
-}
-
-.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action {
-    color: var(--button-colored-background);
-}
-
-table.default {
-    //border-radius: 4px;
-    width: 100%;
-    max-width: 100%;
-    font-size: 0.9em;
-    box-sizing: border-box;
-    overflow-x: auto;
-
-    caption {
-        font-size: 1.5rem;
-        font-weight: 400;
-        border-bottom: 1px solid var(--box-border);
-        background: var(--table-caption-background);
-        padding: .5rem;
-
-        //border-top-left-radius: 4px;
-        //border-top-right-radius: 4px;
-
-        text-align: left;
-
-        i {
-            font-size: .8rem;
-        }
-
-        height: 2.5rem;
-    }
-
-    td {
-        padding: 3px 10px 3px 10px;
-        white-space: nowrap;
-    }
-
-    tbody {
-        tr {
-            height: 2.5rem;
-
-            &:nth-of-type(2n) td {
-                background: var(--table-row-background);
-            }
-
-            &:nth-of-type(2n+1) td {
-                background: var(--table-row-background-alt);
-            }
-
-            &:hover td, &:focus td {
-                background: var(--table-row-background-hover);
-            }
-
-            td, th {
-                border-bottom: 1px solid #ebedf2;
-            }
-
-            &:last-child td, &:last-child th {
-                border: none;
-            }
-
-            &:focus, &:hover {
-                outline: none;
-                transform: scale(1);
-                box-shadow: 0 0 5px var(--box-border);
-            }
-        }
-
-        th {
-            background: var(--table-head-background);
-        }
-    }
-
-    thead {
-        background: var(--table-head-background);
-
-        tr {
-            height: 2.5rem;
-        }
-
-        td {
-            border-bottom: 1px solid #ebedf2;
-        }
-
-        input[type=radio] {
-            display: none;
-
-            &:checked + label {
-                color: var(--box-highlight);;
-            }
-        }
-    }
-
-    .empty {
-        text-align: center;
-        color: #d8d8d8;
-    }
-
-    tfoot {
-        border: none;
-
-        label {
-            float: left;
-        }
-
-        select {
-            width: auto;
-            float: right;
-            margin: 0;
-            min-width: 0px;
-        }
-
-        td {
-            text-align: center;
-            padding-top: 10px;
-        }
-    }
-}
-
-table.list {
-    th {
-        text-align: left;
-        padding: 2px 0 2px 0;
-    }
-
-    td {
-        padding: 2px 5px 2px 5px;
-    }
-}
-
 @media screen and (max-width: 600px) {
     table.table {
         display: table;
@@ -227,7 +231,3 @@ table.list {
         }
     }
 }
-
-.nobreak {
-    white-space: nowrap;
-}