fixed checkbox styling

beyond-all-reason · Dec 8, 2021 · 41886a9 · 41886a9
1 parent 98e09d6
commit 41886a9
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 48 deletions.
diff --git a/src/assets/styles/themes/carbon/inputs.scss b/src/assets/styles/themes/carbon/inputs.scss
@@ -139,4 +139,47 @@ input[type=password] {
             box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1);
         }
     }
+}
+
+.control.checkbox {
+    .checkmark {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        padding: 0;
+    }
+
+    input[type=checkbox] {
+        display: none;
+    }
+    label {
+        display: flex;
+        position: relative;
+        gap: 15px;
+        &.hasLabel {
+            padding-left: 5px !important;
+        }
+        &:not(.hasLabel) {
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+    }
+    .icon {
+        &.hasLabel:after {
+            position: absolute;
+            content: "";
+            top: 0;
+            margin-left: 4px;
+            width: 1px;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.1);
+        }
+    }
+    .check {
+        visibility: hidden;
+    }
+    .checked .check {
+        visibility: visible;
+    }
 }
diff --git a/src/components/inputs/Checkbox.vue b/src/components/inputs/Checkbox.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="control checkbox">
         <input :id="uuid" type="checkbox" v-model="checked" @change="$emit('update:modelValue', checked)">
-        <label :for="uuid" :class="{ checked, label }">
-            <div class="icon" :class="{ label }">
+        <label :for="uuid" :class="{ checked, hasLabel: Boolean(label) }">
+            <div class="icon" :class="{ hasLabel: Boolean(label) }">
                 <Icon class="check" icon="check-bold" />
             </div>
             <div v-if="label" class="label">{{ label }}</div>
@@ -20,7 +20,10 @@ export default defineComponent({
             type: String,
             default: "text"
         },
-        label: String,
+        label: {
+            type: String,
+            default: ""
+        },
         modelValue: Boolean,
     },
     setup(props, context) {
@@ -31,47 +34,4 @@ export default defineComponent({
         return { uuid, label, checked };
     }
 });
-</script>
-
-<style scoped lang="scss">
-.checkmark {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    padding: 0;
-}
-
-input[type=checkbox] {
-    display: none;
-}
-label {
-    display: flex;
-    position: relative;
-    gap: 15px;
-    &.hasLabel {
-        padding-left: 5px !important;
-    }
-    &:not(.hasLabel) {
-        padding-left: 5px;
-        padding-right: 5px;
-    }
-}
-.icon {
-    &.hasLabel:after {
-        position: absolute;
-        content: "";
-        top: 0;
-        margin-left: 4px;
-        width: 1px;
-        height: 100%;
-        background: rgba(255, 255, 255, 0.1);
-    }
-}
-.check {
-    visibility: hidden;
-}
-.checked .check {
-    visibility: visible;
-}
-</style>
+</script>
diff --git a/src/views/debug/inputs.vue b/src/views/debug/inputs.vue
@@ -3,6 +3,7 @@
         <div class="controls">
             <Textbox label="Text" placeholder="text" :disabled="disabled" />
             <Checkbox v-model="disabled" label="Controls disabled" />
+            <Checkbox v-model="disabled" />
             <Textbox label="bob" placeholder="test" v-model="test" :disabled="disabled" />
             <div class="control">
                 <label for="type-search">Search (search)</label>

diff --git a/src/views/login.vue b/src/views/login.vue
@@ -77,8 +77,8 @@ export default defineComponent({
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    margin-top: calc((100vh - 700px) / 2);
     max-width: 500px;
     gap: 80px;
-    margin-top: 10%;
 }
 </style>