Merge pull request avinash201199#98 from keshav-rockwinder/patch-1

Create checklist.css

checklist.css

@@ -0,0 +1,97 @@
+@import url('https://fonts.googleapis.com/css2?family=poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+*
+
+{margin: 0;
+padding: 0;
+box-sizing: border-box;
+font-family: 'poppins'sans-serif;
+}
+
+body
+{display: flex;
+justify-content: center;
+align-items: center;
+min-height: 100vh;
+background: #111;
+}
+.list
+{position: relative;
+background: #fff;
+width: 350px;
+}
+.list h2
+{background-image: #03a9f4;
+color: #fff;
+padding: 10px 20px;
+font-weight:600;
+}
+.list ul
+{
+    position: relative;
+    padding: 20px;
+}
+.list ul li
+{
+    position: relative;
+    list-style: none;
+    padding: 15px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+}
+.list ul li:last-child
+{
+    border-bottom: none;
+}
+.list ul li label
+{
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+}
+.list ul li label input
+{
+    visibility: hidden;
+    appearance: none;
+}
+.list ul li label p
+{
+    position: absolute;
+}
+.list ul li label span{
+    position: relative;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.list ul li label span::before
+{
+    content: '';
+    position: absolute;
+    top: 5px;
+    width: 10px;
+    height: 5px;
+    border-left: 2px solid #ccc;
+    border-bottom: 2px solid #ccc;
+    transform: rotate(-40deg);
+}
+.list ul li label input:checked~p
+{
+    text-decoration: line-through;
+    color: #ccc;
+}
+.list ul li label input:checked~span
+{
+    background: #03a9f4;
+    border: 1px solid #03a9f4;
+}
+.list ul li label input:checked~span::before
+{
+    border-left: 2px solid #fff;
+    border-bottom: 2px solid #fff;
+}