script editor

frontend/src/lib/components/bforms/BFormOption.svelte

@@ -17,14 +17,15 @@
   export let icon: IconName = "check";
   export let unclickable: boolean = false;
   export let red: boolean = false;
+  export let alwaysOpen: boolean = false;
 
   const enabled = writable(state === true);
-  $: $enabled = state === true;
+  $: $enabled = state === true || alwaysOpen;
 
   setContext(ctxKey, { subscribe: enabled.subscribe });
 </script>
 
-<div class="bform-option" class:unclickable class:on={state === true} class:off={state === false} style="--color: {color}">
+<div class="bform-option" class:red class:unclickable class:on={state === true} class:off={state === false} style="--color: {color}">
   <Icon on:click block name={icon} />
   <div class="bform-option-body">
     <slot></slot>
@@ -42,24 +43,24 @@
     cursor: pointer
     background: $color-main1
 
-    :global(.icon)
+    > :global(div > .icon)
       padding: 0.1em 0.5ch
       padding-top: 0.45em
       color: $color-main2
 
     &.off
       background-color: $color-main2
-      :global(.icon)
+      > :global(div > .icon)
         color: $color-main4
 
     &.on
       background-color: $color-main2
-      :global(.icon)
+      > :global(div > .icon)
         color: var(--color)
 
     &.red
       background-color: $color-main2-red
-      :global(.icon)
+      > :global(div > .icon)
         color: $color-main6-redder
 
     &.unclickable