ok-technopolis-autumn-2018 · kaifeur · Nov 22, 2018
diff --git a/images/close.png b/images/close.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/completed.png b/images/completed.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/select-all.png b/images/select-all.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/index.html b/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Todo MVC</title>
+    <link rel="stylesheet" href="styles/default.css" />
+</head>
+<body>
+
+<div class="main-layout">
+
+    <h1 class="todo-title">Todos</h1>
+
+    <div class="todo-board __has-content">
+
+        <form class="todo-creator">
+            <button class="todo-creator_check-all" aria-label="Check all items as done"></button>
+            <div class="todo-creator_text-input-w">
+                <input class="todo-creator_text-input" type="text"  placeholder="New todo name" aria-label="Input new todo text" />
+            </div>
+        </form>
+
+        <div class="todos-list">
+            <div class="todos-list_item">
+                <div class="custom-checkbox todos-list_item_ready-marker">
+                    <input type="checkbox" class="custom-checkbox_target" aria-label="Mark todo as ready" checked/>
+                    <div class="custom-checkbox_visual">
+                        <div class="custom-checkbox_visual_icon"></div>
+                    </div>
+                </div>
+                <button class="todos-list_item_remove" aria-label="Delete todo"></button>
+                <div class="todos-list_item_text-w">
+                    <textarea class="todos-list_item_text">HTML</textarea>
+                </div>
+            </div>
+            <div class="todos-list_item">
+                <div class="custom-checkbox todos-list_item_ready-marker">
+                    <input type="checkbox" class="custom-checkbox_target" aria-label="Mark todo as ready" />
+                    <div class="custom-checkbox_visual">
+                        <div class="custom-checkbox_visual_icon"></div>
+                    </div>
+                </div>
+                <button class="todos-list_item_remove" aria-label="Delete todo"></button>
+                <div class="todos-list_item_text-w">
+                    <textarea class="todos-list_item_text">CSS</textarea>
+                </div>
+            </div>
+
+            <!--<div class="todos-list_item">-->
+                <!--<input type="checkbox" class="todos-list_item_ready-marker" aria-label="Mark todo as ready" />-->
+                <!--<div class="todos-list_item_text">JS</div>-->
+                <!--<button class="todos-list_item_remove" aria-label="Delete todo"></button>-->
+            <!--</div>-->
+            <!--<div class="todos-list_item">-->
+                <!--<input type="checkbox" class="todos-list_item_ready-marker" aria-label="Mark todo as ready" />-->
+                <!--<div class="todos-list_item_text">JS Tools</div>-->
+                <!--<button class="todos-list_item_remove" aria-label="Delete todo"></button>-->
+            <!--</div>-->
+        </div>
+
+        <div class="todos-toolbar">
+            <div class="todos-toolbar_unready-counter">3 items left</div>
+
+            <div class="filters todos-toolbar_filters">
+                <button class="filters-item __selected" aria-label="Filter: All, is selected">All</button>
+                <button class="filters-item" aria-label="Filter: Active">Active</button>
+                <button class="filters-item" aria-label="Filter: Completed">Completed</button>
+            </div>
+
+            <button class="todos-toolbar_clear-completed">Clear completed</button>
+
+        </div>
+
+    </div>
+</div>
+
+</body>
diff --git a/styles/base/custom-checkbox/custom-checkbox.css b/styles/base/custom-checkbox/custom-checkbox.css
@@ -0,0 +1,41 @@
+
+.custom-checkbox {
+    display: inline-block;
+    position: relative;
+    }
+
+    .custom-checkbox_target {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: none;
+        outline: none;
+        border: none;
+        opacity: 0;
+        padding: 0;
+        margin: 0;
+        border-radius: 50%;
+        z-index: 1;
+        }
+
+    .custom-checkbox_visual {
+        width: 36px;
+        height: 36px;
+        box-sizing: border-box;
+        border: 1px solid #ccc;
+        border-radius: 50%;
+        position: relative;
+        }
+        .custom-checkbox_target:checked ~ .custom-checkbox_visual {
+            border-color: #5dc2af;
+            }
+
+        .custom-checkbox_target:checked ~ .custom-checkbox_visual .custom-checkbox_visual_icon {
+            width: 20px;
+            height: 20px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin: -10px;
+            background: url(../../../images/completed.png);
+            }
diff --git a/styles/base/main.css b/styles/base/main.css
@@ -0,0 +1,13 @@
+body {
+    background: #f5f5f5;
+
+    }
+
+.main-layout {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 0 16px 16px;
+    /*background: #f00;*/
+    }
+
+
diff --git a/styles/default.css b/styles/default.css
@@ -0,0 +1,17 @@
+@import "reset.css";
+
+
+@import "base/main.css";
+@import "base/custom-checkbox/custom-checkbox.css";
+
+
+@import "project/todo-title/todo-title.css";
+@import "project/todo-board/todo-board.css";
+@import "project/todo-creator/todo-creator.css";
+@import "project/todos-list/todos-list.css";
+@import "project/todos-toolbar/todos-toolbar.css";
+
+
+
+
+
diff --git a/styles/project/todo-board/todo-board.css b/styles/project/todo-board/todo-board.css
@@ -0,0 +1,47 @@
+
+
+.todo-board {
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,.2);
+
+    position: relative;
+    }
+
+    .todo-board:before,
+    .todo-board:after {
+        /*content: '';*/
+        position: absolute;
+        top: 100%;
+        background: #fff;
+        box-shadow: 0 2px 4px rgba(0,0,0,.2);
+        z-index: -1;
+        }
+        .todo-board.__has-content:before,
+        .todo-board.__has-content:after {
+            content: '';
+            }
+
+        .todo-board:before {
+            left: 8px;
+            right: 8px;
+            height: 8px;
+            }
+
+        .todo-board:after {
+            left: 4px;
+            right: 4px;
+            height: 4px;
+            }
+
+
+    .todo-board .todos-list,
+    .todo-board .todos-toolbar {
+        display: none;
+        }
+    .todo-board.__has-content .todos-list,
+    .todo-board.__has-content .todos-toolbar {
+        display: block;
+        }
+
+
+
diff --git a/styles/project/todo-creator/todo-creator.css b/styles/project/todo-creator/todo-creator.css
@@ -0,0 +1,70 @@
+
+
+.todo-creator {
+    padding: 16px 16px;
+    }
+    .todo-creator:after {
+        content: '';
+        display: table;
+        clear: both;
+        }
+
+    .todo-creator_check-all {
+        float: left;
+        margin-right: 16px;
+        margin-top: 11px;
+
+        padding: 0;
+
+        width: 24px;
+        height: 12px;
+
+        border: none;
+        outline: none;
+
+
+        background: url(../../../images/select-all.png) no-repeat 0 0;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 1.5),
+               (min-resolution: 120dpi),
+               (min-resolution: 1.5dppx) {
+            .todo-creator_check-all {
+                background: url(../../../images/[email protected]) no-repeat 0 0;
+                }
+            }
+
+    .todo-creator_text-input-w {
+        overflow: hidden;
+        }
+
+        .todo-creator_text-input {
+            border: none;
+            background: none;
+            outline: none;
+            width: 100%;
+            /*box-sizing: border-box;*/
+            font-size: 24px;
+            color: #666;
+            font-weight: 300;
+            }
+
+            .todo-creator_text-input::-webkit-input-placeholder {
+                font-style: italic;
+                color: #ccc;
+                }
+
+            .todo-creator_text-input:-moz-placeholder {
+                font-style: italic;
+                color: #ccc;
+                }
+
+            .todo-creator_text-input::-moz-placeholder {
+                font-style: italic;
+                color: #ccc;
+                }
+
+            .todo-creator_text-input:-ms-input-placeholder {
+                font-style: italic;
+                color: #ccc;
+                }
diff --git a/styles/project/todo-title/todo-title.css b/styles/project/todo-title/todo-title.css
@@ -0,0 +1,13 @@
+
+
+.todo-title {
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    font-size: 100px;
+    font-weight: 100;
+    text-transform: lowercase;
+    text-align: center;
+    color: rgba(175, 47, 47, 0.15);
+
+    margin: 8px 0;
+    }
+
diff --git a/styles/project/todos-list/todos-list.css b/styles/project/todos-list/todos-list.css
@@ -0,0 +1,67 @@
+
+.todos-list {
+
+    }
+
+    .todos-list_item {
+        padding: 16px;
+        margin-bottom: -1px;
+        border-top: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        }
+        .todos-list_item:after {
+            content: '';
+            clear: both;
+            display: table;
+            }
+
+        .todos-list_item_ready-marker {
+            float: left;
+            margin-right: 16px;
+            }
+
+        .todos-list_item_text-w {
+            overflow: hidden;
+            }
+
+            .todos-list_item_text {
+                width: 100%;
+                box-sizing: border-box;
+                font-family: "Helvetica Neue", Arial, sans-serif;
+                font-size: 24px;
+                color: #666;
+                line-height: 30px;
+                font-weight: 200;
+                width: 100%;
+                border: none;
+                resize: none;
+                max-height: 32px;
+                }
+
+        .todos-list_item_remove {
+            float: right;
+            margin-left: 16px;
+            /*display: none;*/
+            visibility: hidden;
+            height: 18px;
+            width: 18px;
+            margin: 12px;
+            background: url("../../../images/close.png") no-repeat 0 0;
+            border: none;
+            }
+
+            @media (-webkit-min-device-pixel-ratio: 1.5),
+                   (min-resolution: 120dpi),
+                   (min-resolution: 1.5dppx) {
+                .todo-list_item-remove {
+                    background: url("../../../images/[email protected]") no-repeat 0 0;
+                    margin: 22px;
+                    width: 34px;
+                    height: 34px;
+                    }
+                }
+
+            .todos-list_item:hover .todos-list_item_remove {
+                /*display: block;*/
+                visibility: visible;
+                }