thing-it-device-kisi/web/kisiDoor.html

[thing-it-node] Device Plugin for Kisi products.

<style>
    .tiDoor input.tiToggleRoundFlat + label {
        background-color: red;
    }

    .tiDoor input.tiToggleRoundFlat + label:after {
        background-color: red;
    }

    .tiDoor input.tiToggleRoundFlat:checked + label {
        background-color: lawngreen;
    }

    .tiDoor input.tiToggleRoundFlat:checked + label:after {
        background-color: lawngreen;
    }
</style>
<div class="tiDoor" style="width: 100%;" class="flexLayout flexJustifyCenter" ng-click="panel.callDeviceService(component, 'unlockDoor', {place: component.configuration.doorId})">
    <div style="width: 100%;" class="flexLayout flexDirectionColumn flexAlignCenter">
        <div ng-if="!component._state.unlock"
             class="marginBottom1 flexLayout flexAlignCenter flexJustifyCenter growAnimation"
             style="border-radius: 50%; background-color: red; width: 6em; height: 6em;">
            <i class="icon sl-lock-2 semiBold fontSize4" style="color: white;"></i>
        </div>
        <div ng-if="component._state.unlock"
             class="marginBottom1 flexLayout flexAlignCenter flexJustifyCenter growAnimation"
             style="border-radius: 50%; background-color: lawngreen; width: 6em; height: 6em;">
            <i class="icon sl-lock-unlock-2 semiBold fontSize4" style="color: white;"></i>
        </div>
    </div>
</div>