Weko
/
ceiba-scores
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Modification du conteneur du text des checkbox
continuous-integration/drone/push Build is passing Details
continuous-integration/drone Build is passing Details

This commit is contained in:
Simon 2023-06-05 18:06:03 +02:00
parent 7cce542804
commit 483a0f14ec
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Question.vue
View File

@ -94,7 +94,9 @@ const d = ref(0);
@click="nextQuestion" @click="nextQuestion"
/> />
<label :for="`question_${question.id}_answer_${answer.id}`"> <label :for="`question_${question.id}_answer_${answer.id}`">
<div>
{{ answer.title }} {{ answer.title }}
</div>
</label> </label>
</li> </li>
</ul> </ul>
@ -264,36 +266,37 @@ legend
label label
cursor: pointer cursor: pointer
display: block
input[type=radio] input[type=radio]
display: none display: none
& + label & + label > div
position: relative position: relative
padding: .2rem .2rem .2rem 2rem padding: .2rem .2rem .2rem 2rem
& + label::before, & + label > div::before,
& + label::after & + label > div::after
display: block display: block
position: absolute position: absolute
box-sizing: border-box box-sizing: border-box
content:'' content:''
border-radius: 1rem border-radius: 1rem
& + label::before & + label > div::before
bottom: .3rem top: .5rem
left: 0 left: 0
background-color: var(--color-green) background-color: var(--color-green)
width: 1rem width: 1rem
height: 1rem height: 1rem
& + label::after & + label > div::after
bottom: calc(3px + .3rem) top: calc(3px + .5rem)
left: 3px left: 3px
width: calc(1rem - 6px) width: calc(1rem - 6px)
height: calc(1rem - 6px) height: calc(1rem - 6px)
&:checked + label &:checked + label > div
text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor
&:not(:checked) + label::before &:not(:checked) + label > div::before
background-color: var(--color-green) background-color: var(--color-green)
&:not(:checked) + label::after &:not(:checked) + label > div::after
background-color: white background-color: white
.main .main