2024-10-10

web/bsadmin/assets/sass/todo-list.scss

@@ -0,0 +1,144 @@
+@import "variable"; // variable
+
+
+/* TO DO LIST
+================================================== */
+
+
+/* WebKit browsers */
+
+
+/* Mozilla Firefox 4 to 18 */
+
+
+/* Mozilla Firefox 19+ */
+
+
+/* Internet Explorer 10+ */
+
+//@keyframes "collapseItem" {
+//    0% {
+//        -ms-transform: perspective(500px) rotateX(0deg);
+//        transform: perspective(500px) rotateX(0deg);
+//    }
+//    100% {
+//        -ms-transform: perspective(500px) rotateX(-90deg);
+//        transform: perspective(500px) rotateX(-90deg);
+//    }
+//}
+//
+//@-webkit-keyframes "collapseItem" {
+//    0% {
+//        -webkit-transform: perspective(500px) rotateX(0deg);
+//    }
+//    100% {
+//        -webkit-transform: perspective(500px) rotateX(-90deg);
+//    }
+//}
+
+.tdl-holder {
+    margin: 0px auto;
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    li {
+        background-color: $white;
+        border-bottom: 1px solid $border;
+        color: $text-light;
+        list-style: outside none none;
+        margin: 0;
+        padding: 0;
+        span {
+            margin-left: 30px;
+            font-family: $mol;
+            vertical-align: middle;
+            -webkit-transition: all .2s linear;
+            -moz-transition: all .2s linear;
+            -o-transition: all .2s linear;
+            transition: all .2s linear;
+        }
+    }
+    label {
+        cursor: pointer;
+        display: block;
+        line-height: 52px;
+        padding: 0 15px;
+        position: relative;
+        margin: 0px!important;
+        &:hover {
+            background-color: $white-light;
+            color: $text-light;
+            a {
+                display: block;
+            }
+        }
+        a {
+//            background-color: $background_color_1;
+            border-radius: 50%;
+            color: $text-light;
+            display: none;
+            float: right;
+            font-weight: bold;
+            line-height: normal;
+            height: 16px;
+            margin-top: 20px;
+            text-align: center;
+            text-decoration: none;
+            width: 16px;
+            -webkit-transition: all .2s linear;
+            -moz-transition: all .2s linear;
+            -o-transition: all .2s linear;
+            transition: all .2s linear;
+            &:hover {
+//                background-color: $background_color_4;
+//                color: $color_4;
+            }
+        }
+    }
+    input[type="checkbox"] {
+        cursor: pointer;
+        opacity: 0;
+        position: absolute;
+        &+i {
+            background-color: $white;
+            border: 1px solid $border;
+            display: block;
+            height: 18px;
+            position: absolute;
+            top: 20px;
+            width: 18px;
+            z-index: 1;
+        }
+        &:checked {
+            &+i {
+                &::after {
+//                    background-color: #777;
+//                    border-radius: 50%;
+                    content: "\e64c";
+                    font-family: 'themify';
+                    display: block;
+//                    height: 8px;
+                    left: 0px;
+                    position: absolute;
+                    top: -20px;
+//                    width: 8px;
+                    z-index: 2;
+                }
+            }
+            &~span {
+                color: $text-light;
+                text-decoration: line-through;
+            }
+        }
+    }
+    input[type="text"] {
+        background-color: $white-light;
+        height: 50px;
+        margin-top: 40px;
+    }
+
+}
+