feat: more/improved styles, moved settings

2021-09-05 21:06:15 +02:00
parent 9967de43dd
commit 27cf8cdac8
13 changed files with 174 additions and 155 deletions
--- a/src/ui/Widgets/BoolBox/BoolBox.css
+++ b/src/ui/Widgets/BoolBox/BoolBox.css
@@ -0,0 +1,61 @@
+.bool-box {
+    height: 1.1em;
+    margin: 0.5em;
+    line-height: 1em;
+}
+
+.bool-box-label {
+    display: inline-block;
+    margin-right: 0.5em;
+}
+
+input.bool-box-checkbox[type="checkbox"] {
+    position: relative;
+    display: inline-block;
+    width: 2em;
+    height: 1em;
+    padding: 0;
+    top: 0.1em;
+    margin: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+input.bool-box-checkbox[type="checkbox"]::before {
+    width: 2em;
+    height: 1em;
+    border-radius: 1em;
+    background-color: var(--color-ui-accent-dark);
+    display: inline-block;
+    content: "";
+    z-index: 0;
+    position: absolute;
+    transition: background-color 200ms;
+}
+
+input.bool-box-checkbox[type="checkbox"]:checked::before {
+    background-color: var(--color-ui-accent-light);
+}
+
+input.bool-box-checkbox[type="checkbox"]::after {
+    position: absolute;
+    width: 1.05em;
+    height: 1.05em;
+    border-radius: 1em;
+    border-color: var(--color-ui-neutral-dark);
+    border-width: 0.05em;
+    border-style: solid;
+    background-color: var(--color-ui-neutral-dark);
+    display: block;
+    content: "";
+    top: -0.075em;
+    z-index: 1;
+    left: -0.075em;
+    transition: left 200ms, background-color 200ms;
+}
+
+input.bool-box-checkbox[type="checkbox"]:checked::after {
+    left: 0.925em;
+    background-color: var(--color-ui-neutral-light);
+}