From e8574efa423947f57fa9cc71c83c5337021eca2f Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 17 Nov 2022 21:11:38 +0100
Subject: [PATCH] =?UTF-8?q?Styl=20checkbox=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OrderMessage.vue     |  9 ++++---
 src/components/OrderTrainPicker.vue |  4 ++--
 src/styles/global.scss              | 37 +++++++++++++++++++++++++++++
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/components/OrderMessage.vue b/src/components/OrderMessage.vue
index 0410f31..b47b95a 100644
--- a/src/components/OrderMessage.vue
+++ b/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">
+      <label for="save-increment" class="g-checkbox">
         <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>
 
diff --git a/src/components/OrderTrainPicker.vue b/src/components/OrderTrainPicker.vue
index 1bfe51a..5e7ebea 100644
--- a/src/components/OrderTrainPicker.vue
+++ b/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>
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index b441c35..5ff23a6 100644
--- a/src/styles/global.scss
+++ b/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;
+      }
+    }
+  }
+}
+