Fixed topbar css

Aded InputComponents.js to take care (dynamically create, add events) of input elements.
2023-08-10 21:12:51 +03:00 · 2022-01-31 00:16:27 +01:00
parent 79a3c07b82
commit 82aa5ab114
9 changed files with 144 additions and 11 deletions
--- a/css/_components.scss
+++ b/css/_components.scss
@ -0,0 +1,56 @@
+.checkbox-holder {
+    position:relative;
+    width:15px;
+    height:15px;
+    display:block;
+
+    .checkbox {
+        display: inline-block;
+        cursor: pointer;
+        padding-right: 1em;
+
+        .box {
+            color: $basetext;
+            background: darken($basecolor, 5%);
+            border: none;
+            padding: 0.5rem;
+            border-radius: 0.5rem;
+            box-sizing: border-box;
+            margin-right: 0.5rem;
+            display: inline-block;
+            vertical-align: middle;
+            border: solid 2px $basecolor;
+            pointer-events: none;
+
+            svg {
+                visibility: hidden;
+                width: 1em;
+                height: 1em;
+                display: block;
+                path {
+                    fill: $basetext;
+                }
+            }
+
+        }
+
+        //checked
+        &.checked .box svg {
+            visibility: visible;
+        }
+
+        label {
+            display: inline-block;
+            pointer-events: none;
+        } //hover label or box
+
+        &:hover:not(.disabled){
+             border-color: $basecolor;
+        }
+
+        &.disabled {
+            cursor: not-allowed;
+            .box svg path {fill: $basetext;}
+        }
+    }
+}