Went through todos

.github/workflows/main.yml

@@ -25,11 +25,12 @@ jobs:
       run: npm install
     - name: Compile CSS
       run: |
-        npx sass cssOMS/styles.scss cssOMS/styles.css --style=compressed
+        npx sass cssOMS/styles.scss cssOMS/styles.css --style=compressed --no-source-map
-        npx sass cssOMS/animate.scss cssOMS/animate.css --style=compressed
+        npx sass cssOMS/code_textarea.scss cssOMS/code_textarea.css --style=compressed --no-source-map
-        npx sass cssOMS/timeline.scss cssOMS/timeline.css --style=compressed
+        npx sass cssOMS/animate.scss cssOMS/animate.css --style=compressed --no-source-map
-        npx sass cssOMS/tree.scss cssOMS/tree.css --style=compressed
+        npx sass cssOMS/timeline.scss cssOMS/timeline.css --style=compressed --no-source-map
-        npx sass cssOMS/print.scss cssOMS/print.css --style=compressed
+        npx sass cssOMS/tree.scss cssOMS/tree.css --style=compressed --no-source-map
+        npx sass cssOMS/print.scss cssOMS/print.css --style=compressed --no-source-map
     - name: Check for modified files
       id: git-check
       run: echo ::set-output name=modified::$(if git diff-index --quiet HEAD -- *.{scss,css}; then echo "false"; else echo "true"; fi)

accordion.scss

@@ -50,6 +50,24 @@
     }
 }
 
+.spoiler {
+    > input {
+        display: none;
+
+        + span {
+            color: transparent;
+            opacity: 0;
+        }
+
+        &:checked {
+            + span {
+                color: inherit;
+                opacity: 1;
+            }
+        }
+    }
+}
+
 .more-container {
     > label {
         width: 100%;
@@ -76,9 +94,6 @@
 
     > input {
         display: none;
-    }
-
-    > input {
         &:checked {
             + label {
                 border-bottom: none;

alert.scss

@@ -21,6 +21,21 @@
     z-index: 5;
 }
 
+#hover-preview {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    width: 800px;
+    height: 600px;
+    border: 3px solid var(--bborder); // 3px due to scale
+    background: var(--box-bg);
+    transform: scale(0.3333);
+    z-index: 5;
+    overflow: auto;
+    justify-content: center;
+    align-items: center;
+}
+
 #app-message-container {
     position: absolute;
     margin: 0 auto;

article.scss

@@ -61,15 +61,6 @@ article {
         font-size: 1rem;
     }
 
-    a {
-        color: var(--link-c);
-        border-bottom: 1px dotted var(--link-c);
-
-        &:hover {
-            border-bottom: none;
-        }
-    }
-
     p {
         line-height: 1.5em;
     }

code_textarea.css

@@ -0,0 +1 @@
+.codeArea{background:var(--thead-bg);color:var(--thead-c);display:inline-block}.codeArea textarea{font-size:15px;font-family:monospace;line-height:21px;font-weight:500;margin:0;padding:0;white-space:pre;overflow:auto;border:0}.codeArea table{padding:0px 0px 0px 0px !important;margin:0px 0px 0px 0px !important;font-size:1px;line-height:0px;width:auto}.codeArea td:nth-child(1){border-bottom:1px solid var(--bborder);border-right:0px;vertical-align:top;width:1px;background:var(--thead-bg)}.codeArea td:nth-child(2){border-bottom:1px solid var(--bborder);border-left:0px;vertical-align:top}.codeArea canvas{border:0px;background:var(--thead-bg);margin-top:0px;padding-top:0px}

code_textarea.scss

@@ -0,0 +1,46 @@
+.codeArea {
+    background: var(--thead-bg);
+    color: var(--thead-c);
+    display: inline-block;
+
+    textarea {
+        font-size: 15px;
+        font-family: monospace;
+        line-height: 21px;
+        font-weight: 500;
+        margin: 0;
+        padding: 0;
+        white-space: pre;
+        overflow: auto;
+        border: 0;
+    }
+
+    table {
+        padding: 0px 0px 0px 0px !important;
+        margin: 0px 0px 0px 0px !important;
+        font-size: 1px;
+        line-height: 0px;
+        width: auto;
+    }
+
+    td:nth-child(1) {
+        border-bottom: 1px solid var(--bborder);
+        border-right: 0px;
+        vertical-align: top;
+        width: 1px;
+        background: var(--thead-bg);
+    }
+
+    td:nth-child(2) {
+        border-bottom: 1px solid var(--bborder);
+        border-left: 0px;
+        vertical-align: top;
+    }
+
+    canvas {
+        border: 0px;
+        background: var(--thead-bg);
+        margin-top: 0px;
+        padding-top: 0px;
+    }
+}

develop.scss

@@ -1,5 +1,5 @@
 // @todo remove content from this file when implemented
 
-thead td label, .portlet-head .inputWrapper, .portlet-head .g-icon {
+thead td label, .portlet-head .inputWrapper, .portlet-head > .g-icon {
     display: none;
 }

input.scss

@@ -10,7 +10,7 @@ input[type=checkbox]:checked ~ .checked-visibility-alt {
 
 input[type=checkbox]:checked ~ .checked-visibility,
 input[type=checkbox] ~ .checked-visibility-alt {
-    display: inline-block;
+    display: inline-flex;
 }
 
 input, select, textarea, .textarea {
@@ -46,7 +46,8 @@ input[type="datetime"],
 input[type="email"],
 input[type="date"],
 input[type="number"],
-input[type="datetime-local"] {
+input[type="datetime-local"],
+.smart-input-wrapper .input-div {
     box-sizing: border-box;
     color: var(--ipt-c);
     background: var(--ipt-bg);
@@ -79,7 +80,8 @@ input[type="datetime"],
 input[type="email"],
 input[type="date"],
 input[type="number"],
-input[type="datetime-local"] {
+input[type="datetime-local"],
+.smart-input-wrapper .input-div {
     height: 30px;
     padding-left: .5rem;
 }
@@ -320,7 +322,7 @@ input::placeholder {
     opacity: 0.5;
 }
 
-textarea:invalid, input:invalid {
+textarea:invalid, input:invalid, .invalid {
     transition: all 0.5s !important;
     border-color: #f00 !important;
 
@@ -564,4 +566,42 @@ select.plain {
     label {
         padding: .5rem;
     }
-}
+}
+
+.smart-input-wrapper {
+    width: 100%;
+    position: relative;
+    .input-div {
+        outline: none;
+        overflow: auto;
+        white-space: pre-wrap;
+        cursor: not-allowed;
+        background: var(--disabled-bg);
+        line-height: 30px;
+
+        &[contenteditable="true"] {
+            background: var(--ipt-bg);
+            cursor: text;
+        }
+
+        &:focus+.input-datalist {
+            display: block;
+        }
+    }
+
+    .input-datalist {
+        position: absolute;
+        background: var(--ipt-bg);
+        border: 1px solid var(--iborder);
+        z-index: 3;
+
+        > div {
+            padding: .5rem;
+            cursor: pointer;
+            &:hover, &:focus, &:active, &.active {
+                background: var(--thead-bg);
+                color: var(--thead-c);
+            }
+        }
+    }
+}

link.scss

@@ -2,11 +2,11 @@
     font-weight: bold;
 }
 
-.portlet-body a:not(.button), a.content, a .content {
+a.content, a .content, article a {
     color: var(--link-c);
     border-bottom: 1px dotted var(--link-c);
 
     &:hover {
-        border-bottom: 1px dotted transparent ;
+        border-bottom: none;
     }
 }

print.css

@@ -1,2 +1 @@
 body,main{background:none !important}body,#content,main{overflow:revert !important;height:auto}main>header,#nav-side-outer,body>nav,.nav-top{display:none !important}h1,h2,h3,h4,h5,ul{page-break-after:avoid}img{break-before:auto;break-after:auto;break-inside:avoid;display:block}code,ul,blockquote{break-inside:avoid}ul li{page-break-before:avoid;page-break-after:avoid}p{widows:4;orphans:3}.pH{display:none}.portlet{border:none !important}table,figure{page-break-inside:auto}.pagebreak{page-break-after:always;display:block}
-/*# sourceMappingURL=print.css.map */

table.scss

@@ -163,6 +163,9 @@ table {
         }
     }
 
+    // @bug .sticky is broken for tables in a .slider
+    //      The .slider is important to avoid overflowing. However, this prevents .sticky from working
+    //      https://github.com/Karaka-Management/cssOMS/issues/28
     &.sticky thead {
         th, td {
             position: sticky;

timeline.css

@@ -1,2 +1 @@
-.timeline1{list-style:none;margin:0 0 30px 120px;padding-left:30px;border-left:3px solid var(--bborder)}.timeline1 li{margin:0;position:relative}.timeline1 p{margin:0 0 15px}.timeline1-date{margin-top:-18px;top:50%;left:-150px;font-size:0.95em;line-height:20px;position:absolute;padding:5px 10px 5px 10px;border:1px solid var(--bborder)}.timeline1-circle,.timeline1-circle-start,.timeline1-circle-end{border:3px solid var(--bborder);border-radius:50%;display:block;position:absolute}.timeline1-circle{margin-top:-10px;top:50%;left:-40px;width:10px;height:10px;background:tomato}.timeline1-circle-start,.timeline1-circle-end{width:20px;height:20px;background:var(--box-bg);left:-45px;margin-top:0}.timeline1-circle-start{top:0}.timeline1-circle-end{top:100%}.timeline1-content{padding:50px 20px 0;border-radius:0.5em;position:relative}.timeline1-content p{text-align:justify}.timeline1 label{font-size:1.3em;position:absolute;z-index:90;top:20px}.timeline1-radio,.timeline1-break{display:none}@media only screen and (max-width: 600px){.timeline1-date{margin:0;font-size:0.95em;position:inherit;padding:0;border:none}.timeline1{margin:0 0 0 .5rem}}
+.timeline1{list-style:none;margin:0 0 30px 120px;padding-left:30px;border-left:3px solid var(--bborder)}.timeline1 li{margin:0;position:relative}.timeline1 p{margin:0 0 15px}.timeline1-date{margin-top:-18px;top:50%;left:-150px;font-size:.95em;line-height:20px;position:absolute;padding:5px 10px 5px 10px;border:1px solid var(--bborder)}.timeline1-circle,.timeline1-circle-start,.timeline1-circle-end{border:3px solid var(--bborder);border-radius:50%;display:block;position:absolute}.timeline1-circle{margin-top:-10px;top:50%;left:-40px;width:10px;height:10px;background:tomato}.timeline1-circle-start,.timeline1-circle-end{width:20px;height:20px;background:var(--box-bg);left:-45px;margin-top:0}.timeline1-circle-start{top:0}.timeline1-circle-end{top:100%}.timeline1-content{padding:50px 20px 0;border-radius:.5em;position:relative}.timeline1-content p{text-align:justify}.timeline1 label{font-size:1.3em;position:absolute;z-index:90;top:20px}.timeline1-radio,.timeline1-break{display:none}@media only screen and (max-width: 600px){.timeline1-date{margin:0;font-size:.95em;position:inherit;padding:0;border:none}.timeline1{margin:0 0 0 .5rem}}
-/*# sourceMappingURL=timeline.css.map */

tree.css

@@ -1,2 +1 @@
-.tree,.tree ul,.tree li{list-style:none;padding:0;position:relative}.tree{display:table;text-align:center}.tree .tree{border-top:1px solid var(--bborder)}.tree .box{margin:0;padding:1rem;border:0}.tree ul{width:100%;display:table}.tree ul:not(.tree) li:before{border:1px solid var(--bborder)}.tree li{display:table-cell;padding:.5em 0;vertical-align:top}.tree li:before{content:"";left:0;position:absolute;right:0;top:0}.tree li:first-child:before{left:50%}.tree li:last-child:before{right:50%}.tree li>span{text-align:left;border:solid 0.1em var(--bborder);display:inline-block;margin:0 .2em .5em;position:relative}.tree ul:not(.tree):before,.tree span:before{border:solid 1px var(--bborder);content:"";height:.45em;left:50%;position:absolute}.tree ul:before{top:-.5rem}.tree span:before{top:-.5rem}.tree>li:before,.tree>li:after,.tree>li>span:before{border:none}
+.tree,.tree ul,.tree li{list-style:none;padding:0;position:relative}.tree{display:table;text-align:center}.tree .tree{border-top:1px solid var(--bborder)}.tree .box{margin:0;padding:1rem;border:0}.tree ul{width:100%;display:table}.tree ul:not(.tree) li:before{border:1px solid var(--bborder)}.tree li{display:table-cell;padding:.5em 0;vertical-align:top}.tree li:before{content:"";left:0;position:absolute;right:0;top:0}.tree li:first-child:before{left:50%}.tree li:last-child:before{right:50%}.tree li>span{text-align:left;border:solid .1em var(--bborder);display:inline-block;margin:0 .2em .5em;position:relative}.tree ul:not(.tree):before,.tree span:before{border:solid 1px var(--bborder);content:"";height:.45em;left:50%;position:absolute}.tree ul:before{top:-0.5rem}.tree span:before{top:-0.5rem}.tree>li:before,.tree>li:after,.tree>li>span:before{border:none}
-/*# sourceMappingURL=tree.css.map */