<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-1' name='replace-name-with-backend-1' value='replace-value-with-backend-1' checked />
<label for='replace-id-with-backend-1' class='icon-checked'>
<span class="icon fas fa-bell " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend-1' class='icon-unchecked'>
<span class="icon fal fa-bell " aria-hidden="true"></span>
</label>
</div>
<div class='item-toggle'>
<input
class='item-toggle-input'
type='checkbox'
id='{{id}}'
name='{{name}}'
value='{{value}}'
{{#if checked}}checked{{/if}}
{{#if disabled}}disabled{{/if}}
/>
<label for='{{id}}' class='icon-checked'>
{{render '@icon' icon.icon-checked}}
{{#if text }}
<span class="label-text">{{text}}</span>
{{/if}}
</label>
<label for='{{id}}' class='icon-unchecked'>
{{render '@icon' icon.icon-unchecked}}
{{#if text }}
<span class="label-text">{{text}}</span>
{{/if}}
</label>
</div>
{
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"text": null,
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-bell"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-bell"
}
},
"checked": true,
"disabled": false
}
.item-toggle {
.item-toggle-input {
position: absolute;
opacity: 0;
}
.label-text {
position: relative;
top: 2px;
margin-left: 10px;
}
.item-toggle-input:checked ~ .icon-checked {
@apply text-red;
opacity: 1;
visibility: visible;
}
.item-toggle-input:checked ~ .icon-unchecked {
opacity: 0;
visibility: hidden;
}
.item-toggle-input:disabled ~ .icon-checked,
.item-toggle-input:disabled ~ .icon-unchecked {
opacity: 0.5;
}
.icon-checked,
.icon-unchecked {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
transition: color 250ms ease-in-out, opacity 250ms ease-in-out,
visibility 250ms ease-in-out;
}
.icon-checked {
position: absolute;
opacity: 0;
visibility: hidden;
}
.icon-unchecked {
@apply text-black-500;
display: flex;
}
}
No notes defined.