Styl checkboxów

src/components/OrderMessage.vue

@@ -19,7 +19,7 @@
     </div>
 
     <div class="message_checkboxes">
-      <label for="copy-increment">
+      <label for="copy-increment" class="g-checkbox">
         <input
           type="checkbox"
           name="copy-increment"
@@ -27,10 +27,9 @@
           v-model="incrementOnCopy"
           @change="onCheckboxChange"
         />
-        Aktualizuj numer rozkazu po skopiowaniu
+        <span>Aktualizuj numer rozkazu po skopiowaniu</span>
       </label>
-      <br />
+      <label for="save-increment" class="g-checkbox">
-      <label for="save-increment">
         <input
           type="checkbox"
           name="save-increment"
@@ -38,7 +37,7 @@
           v-model="incrementOnSave"
           @change="onCheckboxChange"
         />
-        Aktualizuj numer rokazu po zapisaniu
+        <span>Aktualizuj numer rokazu po zapisaniu</span>
       </label>
     </div>
 

src/components/OrderTrainPicker.vue

@@ -38,9 +38,9 @@
         </select>
       </label>
 
-      <label for="fill-checkpoint">
+      <label for="fill-checkpoint" class="g-checkbox">
         <input type="checkbox" name="fill-checkpoint" id="fill-checkpoint" v-model="fillCheckpointName" />
-        Uzupełniaj skrót post.
+        <span> Uzupełniaj skrót post.</span>
       </label>
     </div>
 

src/styles/global.scss

@@ -143,3 +143,40 @@ ul {
     overflow: auto;
   }
 }
+
+// Checkbox
+label.g-checkbox {
+  display: inline-block;
+  margin: 0.25em 0;
+  cursor: pointer;
+  color: #aaa;
+
+  span::before {
+    content: '';
+    display: inline-block;
+    width: 1ch;
+    height: 1ch;
+
+    background-color: #aaa;
+    border-radius: 50%;
+    margin-right: 0.25em;
+  }
+
+  input {
+    width: 0;
+    opacity: 0;
+
+    &:focus-visible + span {
+      text-decoration: underline;
+    }
+
+    &:checked + span {
+      color: greenyellow;
+
+      &::before {
+        background-color: greenyellow;
+      }
+    }
+  }
+}
+