Fix checkbox
This commit is contained in:
parent
8def35fcd1
commit
e93b893efd
|
@ -11,7 +11,7 @@
|
||||||
{id}
|
{id}
|
||||||
bind:checked
|
bind:checked
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="relative w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-blue-600 dark:focus:ring-offset-gray-800 before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200"
|
class="relative w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-[#96ddff] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-[#96ddff] focus:ring-[#96ddff] ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-[var(--blue)] before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-20"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<label for={id}><slot /></label>
|
<label for={id}><slot /></label>
|
||||||
|
|
|
@ -15,10 +15,16 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
input {
|
input {
|
||||||
|
background-color: rgb(232, 232, 232);
|
||||||
|
color: var(--blue);
|
||||||
background: white;
|
background: white;
|
||||||
border: 4px solid var(--blue);
|
border: 4px solid var(--blue);
|
||||||
box-shadow: 0 0 4px var(--blue), 0 0 1px var(--blue) inset;
|
border-radius: 25px;
|
||||||
border-radius: var(--border-radius);
|
text-align: left;
|
||||||
text-align: center;
|
font-size: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 20px;
|
||||||
|
padding: 28px 20px;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -8,13 +8,7 @@
|
||||||
|
|
||||||
<div class="cover h-14 cursor-pointer">
|
<div class="cover h-14 cursor-pointer">
|
||||||
<div class="h-14 w-14 flex justify-center items-center">
|
<div class="h-14 w-14 flex justify-center items-center">
|
||||||
<input
|
<input {id} bind:group {value} type="radio" class="w-6 h-6 absolute flex justify-center items-center text-red-600 bg-gray-100 border-gray-300" />
|
||||||
{id}
|
|
||||||
bind:group
|
|
||||||
{value}
|
|
||||||
type="radio"
|
|
||||||
class="w-6 h-6 absolute flex justify-center items-center text-red-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<label for={id}><slot /></label>
|
<label for={id}><slot /></label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -35,7 +35,7 @@ p {
|
||||||
:root {
|
:root {
|
||||||
--quizHeader: 300px;
|
--quizHeader: 300px;
|
||||||
--fontSize: 40px;
|
--fontSize: 40px;
|
||||||
--blue: rgba(150, 221, 255);
|
--blue: #96ddff;
|
||||||
--border-radius: 25px;
|
--border-radius: 25px;
|
||||||
--grey: rgba(0, 0, 0, 0.4);
|
--grey: rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
@ -43,4 +43,3 @@ p {
|
||||||
|
|
||||||
|
|
||||||
@import url("normalize.scss")
|
@import url("normalize.scss")
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import TextForm from './Forms/textForm.svelte'
|
import TextForm from './Forms/TextForm.svelte'
|
||||||
import NumberForm from './Forms/NumberForm.svelte'
|
import NumberForm from './Forms/NumberForm.svelte'
|
||||||
import SingleForm from './Forms/SingleForm.svelte'
|
import SingleForm from './Forms/SingleForm.svelte'
|
||||||
import MultiplyForm from './Forms/MultiplyForm.svelte'
|
import MultiplyForm from './Forms/MultiplyForm.svelte'
|
||||||
|
@ -9,7 +9,7 @@
|
||||||
$: console.log(control)
|
$: console.log(control)
|
||||||
|
|
||||||
const answers = {
|
const answers = {
|
||||||
type: 'TextForm',
|
type: 'MultiplyForm',
|
||||||
//... answers
|
//... answers
|
||||||
}
|
}
|
||||||
const components = {
|
const components = {
|
||||||
|
|
|
@ -5,6 +5,9 @@ import path from 'path'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
server: {
|
||||||
|
port: 3003
|
||||||
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
$lib: path.resolve(__dirname, 'src', 'lib'),
|
$lib: path.resolve(__dirname, 'src', 'lib'),
|
||||||
|
|
Loading…
Reference in New Issue