diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1062418 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea/ +*.iml diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/img/icons/close.png b/img/icons/close.png new file mode 100755 index 0000000..3e27ea0 Binary files /dev/null and b/img/icons/close.png differ diff --git a/img/icons/close@2x.png b/img/icons/close@2x.png new file mode 100755 index 0000000..4bdb650 Binary files /dev/null and b/img/icons/close@2x.png differ diff --git a/img/icons/completed.png b/img/icons/completed.png new file mode 100755 index 0000000..600f54e Binary files /dev/null and b/img/icons/completed.png differ diff --git a/img/icons/completed@2x.png b/img/icons/completed@2x.png new file mode 100755 index 0000000..5f2ca9e Binary files /dev/null and b/img/icons/completed@2x.png differ diff --git a/img/icons/select-all.png b/img/icons/select-all.png new file mode 100755 index 0000000..3d6dbd9 Binary files /dev/null and b/img/icons/select-all.png differ diff --git a/img/icons/select-all@2x.png b/img/icons/select-all@2x.png new file mode 100755 index 0000000..273b145 Binary files /dev/null and b/img/icons/select-all@2x.png differ diff --git a/index.html b/index.html old mode 100644 new mode 100755 index 2382b8f..bc5c1a8 --- a/index.html +++ b/index.html @@ -3,51 +3,94 @@ TODOS + -
-

TODOS

-
-
-
- - +
+
+ todos
-
-
- - - -
-
- - - -
-
- - - +
+
+ +
+ +
-
- - - -
-
+
+
+
+ -
-
- 4 tasks to do +
+
+ +
+
HTML
+
+
+
+ +
+ +
+
+
+
CSS
+
+
+
+ +
+ +
+
+
+
JS
+
+
+
+ +
+ +
+
+
+
JSCode
+
+
-
- - - + +
+ +
+ 4 tasks to do +
+
+ + + +
-
diff --git a/styles/base.css b/styles/base.css new file mode 100755 index 0000000..4992f0b --- /dev/null +++ b/styles/base.css @@ -0,0 +1,15 @@ +body, input, button, textarea { + font-family: Helvetica Neue, Arial, sans-serif; + font-size: 24px; +} + +body { + background: #f5f5f5; +} + +.main-wrapper { + max-width: 560px; + min-width: 280px; + margin: 0 auto; + padding: 0 10px; +} \ No newline at end of file diff --git a/styles/default.css b/styles/default.css new file mode 100755 index 0000000..b1de9f6 --- /dev/null +++ b/styles/default.css @@ -0,0 +1,7 @@ +@import "reset.css"; +@import "base.css"; +@import "./project/todos-wrapper/todos-wrapper.css"; +@import "./project/todos-header/todos-header.css"; +@import "./project/todos-input/todos-input.css"; +@import "./project/todos-item.css"; +@import "./project/todos-status-bar.css"; \ No newline at end of file diff --git a/styles/project/todos-header/todos-header.css b/styles/project/todos-header/todos-header.css new file mode 100755 index 0000000..9c689ab --- /dev/null +++ b/styles/project/todos-header/todos-header.css @@ -0,0 +1,6 @@ +.todos-header { + font-size: 100px; + font-weight: 100; + color : rgba(175,47,47,0.15); + text-align: center; +} \ No newline at end of file diff --git a/styles/project/todos-input/todos-input.css b/styles/project/todos-input/todos-input.css new file mode 100755 index 0000000..909faf3 --- /dev/null +++ b/styles/project/todos-input/todos-input.css @@ -0,0 +1,49 @@ +.todos-input { + border-bottom : 1px solid #e6e6e6; + } + .todos-input:after { + content: ''; + display: block; + clear: both; + width: 100%; + } + .todos-input_select-all { + width: 60px; + height: 64px; + background: none; + border: none; + padding: 0; + margin: 0; + position: relative; + float: left; + outline: none; + } + .todos-input_select-all_icon { + width: 24px; + height: 12px; + background: url('../../../img/icons/select-all.png') no-repeat 0 0; + position: absolute; + left: 50%; + top: 50%; + margin: -6px -12px; + } + .todos-input_input-text-wrap { + overflow: hidden; + } + .todos-input_input-text { + width: 100%; + border: 0; + background: none; + color: #666; + font-size: 19px; + font-weight: 200; + margin: 19px 0 0 0; + padding-right: 10px; + outline: none; + box-sizing: border-box; + } + .todos-input_input-text::placeholder { + color : #ccc; + font-style: italic; + } + diff --git a/styles/project/todos-item.css b/styles/project/todos-item.css new file mode 100755 index 0000000..f06f33d --- /dev/null +++ b/styles/project/todos-item.css @@ -0,0 +1,94 @@ +.todos-item { + border-bottom: 1px solid #e6e6e6; + min-height: 60px; + display: flex; + overflow: hidden; + } + + .todos-item_done-mark-wrap { + width: 60px; + height: 60px; + background: none; + float:left; + box-sizing: border-box; + position: relative; + overflow: hidden; + align-self: center; + order: 1; + } + .todos-item_done-mark { + opacity: 0; + width: 50%; + height: 50%; + margin: 25%; + } + + .todos-item_done-mark_visible { + position: absolute; + box-sizing: border-box; + width: 60%; + height: 60%; + margin: 20%; + top: 0; + padding: 10%; + background: none; + border: 1px solid #ccc; + border-radius: 50%; + } + .todos-item.__done .todos-item_done-mark_visible { + background: url("../../img/icons/completed.png") no-repeat center; + /*content: url("../../img/icons/completed.png");*/ + border-color: #5dc2af; + + } + + .todos-item_text-wrap { + overflow: hidden; + position: relative; + align-self: flex-start; + flex: 1 0; + order: 59; + } + + .todos-item_text { + resize: none; + width: 100%; + border: 0; + background: none; + color: #666; + font-size: 20px; + font-weight: 200; + padding: 20px 10px 20px 0; + outline: none; + box-sizing: border-box; + } + .todos-item.__done .todos-item_text { + text-decoration:line-through; + color: #ccc; + } + .todos-item_delete { + width: 60px; + height: 60px; + background: none; + border: none; + padding: 0; + margin: 0; + position: relative; + float: right; + align-self: flex-end; + order: 60; + outline: none; + } +.todos-item:hover{ + background: #fafafa; + } + .todos-item:hover .todos-item_delete_icon { + opacity: 100; + width: 16px; + height: 16px; + background: url('../../img/icons/close.png') no-repeat 0 0; + position: absolute; + left: 50%; + top: 50%; + margin: -8px -8px; + } diff --git a/styles/project/todos-status-bar.css b/styles/project/todos-status-bar.css new file mode 100755 index 0000000..914929b --- /dev/null +++ b/styles/project/todos-status-bar.css @@ -0,0 +1,56 @@ +.todos-status-bar { + position: relative; + bottom: 0; + min-height: 40px; + } + + .todos-status-bar_counter { + + float: left; + font-size: 12px; + height: 20px; + color: #888; + margin: 10px; + box-sizing: border-box; + line-height: 20px; + } + + .todos-status-bar_delete-completed { + float: right; + background: none; + height: 20px; + width: auto; + border: none; + padding: 0; + margin: 10px; + outline: none; + font-size: 12px; + color: #888; + vertical-align: middle; + } + + .todos-status-bar_filters { + width: 100%; + text-align: center; + } + + .todos-status-bar_filters_filter { + color: #888; + font-size: 12px; + background: none; + height: 20px; + border: none; + padding: 0; + margin: 10px; + outline: none; + vertical-align: middle; + } + + .button-text { + margin: 0 7px; + } + + .todos-status-bar_filters_filter.__active { + border: 1px solid #ebdfdf; + border-radius: 3px; + } \ No newline at end of file diff --git a/styles/project/todos-wrapper/todos-wrapper.css b/styles/project/todos-wrapper/todos-wrapper.css new file mode 100755 index 0000000..5a15b49 --- /dev/null +++ b/styles/project/todos-wrapper/todos-wrapper.css @@ -0,0 +1,26 @@ +.todos-wrapper { + background: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, .2); + position: relative; + } + + .todos-wrapper:after, .todos-wrapper:before { + content: ''; + position: absolute; + top: 100%; + background: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, .2); + z-index: -1; + } + + .todos-wrapper:before { + height: 10px; + left: 4px; + right: 4px; + } + + .todos-wrapper:after { + height: 5px; + left: 2px; + right: 2px; + } diff --git a/styles/reset.css b/styles/reset.css new file mode 100755 index 0000000..681d5d7 --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,22 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; +} +body { + line-height: 1; +}