jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update checkbox to fix breakage with wordwrap.

Browse source
This commit is contained in:
bmauger 2022-02-18 11:26:51 -05:00
parent 495019b471
commit b96d85199f
2 changed files with 22 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/styles/common-error-styles.scss
View file

@ -22,6 +22,7 @@
} }
&.ui-radio, &.ui-radio,
&.ui-checkbox { &.ui-checkbox {
input[type=checkbox],
input[type=radio]+label:before, input[type=radio]+label:before,
input[type=checkbox]+label:before { input[type=checkbox]+label:before {
border: 1px solid $red; border: 1px solid $red;

82
src/ux-components/checkbox/checkbox.vue
View file

@ -1,15 +1,15 @@
<template> <template>
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag --> <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
<div class="ui-checkbox d-flex" :class="[hasError ? 'has-error' : '']"> <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
<input <input class="form-check-input"
type="checkbox" type="checkbox"
aria-checked="false" aria-checked="false"
:name="checkboxName" :name="checkboxName"
:id="buttonID" :id="buttonID"
:tabindex="tabIndex" :tabindex="tabIndex"
:aria-required="isRequired" :aria-required="isRequired"
/> />
<label class="d-flex align-items-center" :for="buttonID"> <label class="d-flex align-items-start" :for="buttonID">
<p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p> <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{ <span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText screenReaderOnlyText
@ -34,61 +34,21 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.ui-checkbox { .form-check {
position: relative; .form-check-input {
input[type="checkbox"] { border: 1px solid $gray-500;
position: absolute !important; border-radius: 2px;
height: 1px; &:checked {
width: 1px; background-size: 125%;
overflow: hidden; border: 1px solid $blue;
clip: rect(1px, 1px, 1px, 1px);
+ label {
display: block;
position: relative;
&:hover {
cursor: pointer;
}
} }
+ label::before { &:focus {
content: "";
position: relative;
display: inline-block;
margin-right: 8px;
width: 16px;
height: 16px;
background: white;
border: 1px solid $gray-500;
border-radius: 2px;
flex-shrink: 0;
}
&:checked + label::before {
background: $blue;
}
&:checked + label::after {
content: "";
position: absolute;
top: 8px;
left: 2px;
border-left: 2px solid $white;
border-bottom: 2px solid $white;
height: 6px;
width: 12px;
transform: rotate(-45deg);
}
&:hover + label::before {
box-shadow: 0 0 0 4px $blue-300; box-shadow: 0 0 0 4px $blue-300;
} }
&:focus + label::before { }
box-shadow: 0 0 0 2px $blue; &:hover {
} .form-check-input {
&:focus:checked + label::before { box-shadow: 0 0 0 4px $blue-300;
box-shadow: 0 0 0 2px transparent;
}
&:disabled + label {
color: $gray-200;
}
&:disabled + label::before {
background: $gray-200;
} }
} }
} }