refactor(pricing-plans): improve label class binding for payment frequency selection
This commit is contained in:
@@ -4,17 +4,22 @@
|
||||
<fieldset
|
||||
class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-sm dark:text-white gap-x-1 dark:bg-white/5 bg-black/5">
|
||||
<legend class="sr-only">Payment frequency</legend>
|
||||
<label class="cursor-pointer rounded-sm px-2.5 py-1"
|
||||
:class="selected === 'monthly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
|
||||
<label
|
||||
:class="selected === 'monthly' ?
|
||||
'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
|
||||
'cursor-pointer rounded-sm px-2.5 py-1'">
|
||||
<input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
|
||||
class="sr-only">
|
||||
<span>Monthly</span>
|
||||
<span :class="selected === 'monthly' ? 'dark:text-white' : ''">Monthly</span>
|
||||
</label>
|
||||
<label class="cursor-pointer rounded-sm px-2.5 py-1"
|
||||
:class="selected === 'yearly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
|
||||
<label
|
||||
:class="selected === 'yearly' ?
|
||||
'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
|
||||
'cursor-pointer rounded-sm px-2.5 py-1'">
|
||||
<input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
|
||||
class="sr-only">
|
||||
<span>Annually <span class="text-xs dark:text-warning text-coollabs">(save ~20%)</span></span>
|
||||
<span :class="selected === 'yearly' ? 'dark:text-white' : ''">Annually <span
|
||||
class="text-xs dark:text-warning text-coollabs">(save ~20%)</span></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user