iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-26 23:12:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

final

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-10-27 05:35:07 +07:00
parent 93e36b9a68
commit 9e38b84748
3 changed files with 40 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
others/toggles.svelte Normal file
View File

@@ -0,0 +1,37 @@
<!-- Toggle A -->
<div class="flex items-center justify-center w-full mb-12">
<label for="toogleA" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input id="toogleA" type="checkbox" class="sr-only" />
<!-- line -->
<div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" />
<!-- dot -->
<div
class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition"
/>
</div>
<!-- label -->
<div class="ml-3 text-gray-700 font-medium">Toggle Me!</div>
</label>
</div>
<!-- Toggle B -->
<div class="flex items-center justify-center w-full mb-12">
<label for="toggleB" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input type="checkbox" id="toggleB" class="sr-only" />
<!-- line -->
<div class="block bg-gray-600 w-14 h-8 rounded-full" />
<!-- dot -->
<div
class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"
/>
</div>
<!-- label -->
<div class="ml-3 text-gray-700 font-medium">Toggle Me!</div>
</label>
</div>