Todo in sframe with less2

2017-10-30 15:12:15 +01:00
parent 4c0049ad55
commit 68accaf653
24 changed files with 2556 additions and 251 deletions
--- a/www/todo/app-todo.less
+++ b/www/todo/app-todo.less
@@ -0,0 +1,130 @@
+@import (once) "../../customize/src/less2/include/browser.less";
+@import (once) "../../customize/src/less2/include/toolbar.less";
+@import (once) "../../customize/src/less2/include/markdown.less";
+@import (once) '../../customize/src/less2/include/fileupload.less';
+@import (once) '../../customize/src/less2/include/alertify.less';
+//@import (once) '../../customize/src/less/mixins.less';
+//@import (once) '../../customize/src/less/variables.less";
+
+@import (once) '../../customize/src/less2/include/avatar.less';
+
+
+.toolbar_main();
+.fileupload_main();
+.alertify_main();
+
+// body
+&.cp-app-todo {
+    display: flex;
+    flex-flow: column;
+
+    @button-border: 2px;
+
+    #cp-toolbar {
+        display: flex; // We need this to remove a 3px border at the bottom of the toolbar
+    }
+
+    .cp-cryptpad-toolbar {
+        padding: 0px;
+        display: inline-block;
+    }
+
+    #cp-app-todo-container {
+        display: flex;
+        flex: 1;
+        flex-flow: column;
+        padding: 20px;
+        align-items: center;
+        background-color: lighten(@colortheme_todo-bg, 15%);
+        min-height: 0;
+    }
+
+    @spacing: 15px;
+
+    #cp-app-todo-taskslist {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        min-width: 40%;
+        max-width: 90%;
+    }
+
+    .cp-app-todo-create-form {
+        margin: @spacing;
+        min-width: 40%;
+        display: flex;
+
+        #cp-app-todo-newtodo {
+            flex: 1;
+            margin-right: 15px;
+            border-radius: 0;
+            border: 0;
+            background-color: darken(@colortheme_todo-bg, 10%);
+            color: #fff;
+            padding: 5px 10px;
+            font-weight: bold;
+        }
+
+        button {
+            cursor: pointer;
+            border-radius: 0;
+            background-color: darken(@colortheme_todo-bg, 20%);
+            border:0;
+            &:hover {
+                background-color: darken(@colortheme_todo-bg, 25%);
+            }
+        }
+    }
+
+    .cp-app-todo-task {
+        border: 1px solid black;
+        padding: @spacing;
+        display: flex;
+        align-items: center;
+        background-color: white;
+
+        &.cp-app-todo-task-complete {
+            background-color: #f0f0f0;
+            color: #777;
+        }
+
+        .cp-app-todo-task-text {
+            margin: @spacing;
+            flex: 1;
+            word-wrap: break-word;
+            min-width: 0;
+            font-weight: bold;
+        }
+        .cp-app-todo-task-date {
+            margin: @spacing;
+        }
+        .cp-app-todo-task-remove {
+            margin: @spacing;
+            cursor: pointer;
+        }
+        .cp-app-todo-task-checkbox {
+            font-size: 45px;
+            width: 45px;
+            cursor: pointer;
+            &:hover {
+                color: #999;
+            }
+        }
+        .cp-app-todo-task-checkbox-checked {
+
+        }
+        .cp-app-todo-task-checkbox-unchecked {
+
+        }
+
+        button {
+            border-radius: 0;
+            border:0;
+        }
+    }
+
+    display: flex;
+    flex-flow: column;
+
+}
+