Skip to content

Commit 622b799

Browse files
ilius33ilius33
committed
template done
1 parent 9bb1c14 commit 622b799

File tree

3 files changed

+72
-4
lines changed

3 files changed

+72
-4
lines changed

‎index.html

+20-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,26 @@
77
<body>
88

99
<div ng-app="ToDoList" class="todo-list">
10-
10+
<div class="todo-list-row ">
11+
<div class="todo-list-check-col"></div>
12+
<div class="todo-list-text-col todo-list-text-col_heading">I want to...</div>
13+
</div>
14+
<div class="todo-list-row">
15+
<div class="todo-list-check-col"><input type="checkbox" checked></div>
16+
<div class="todo-list-text-col todo-list-text-col_done">task 1task 1task 1task 1task 1task 1task 1task 1task 1task 1task 1task 1</div>
17+
</div>
18+
<div class="todo-list-row">
19+
<div class="todo-list-check-col"><input type="checkbox"></div>
20+
<div class="todo-list-text-col">task 2</div>
21+
</div>
22+
<div class="todo-list-row">
23+
<div class="todo-list-check-col"><input type="checkbox"></div>
24+
<div class="todo-list-text-col"><input class="todo-list-input" type="text"></div>
25+
</div>
26+
<div class="todo-list-row">
27+
<div class="todo-list-check-col"></div>
28+
<div class="todo-list-text-col todo-list-text-col_footer">3 task(s) remaining</div>
29+
</div>
1130
</div>
1231

1332
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>

‎style.css

+52-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,60 @@ body {
22
background-color:rgb(241, 241, 241);
33
}
44

5+
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
6+
57
.todo-list {
68
-moz-box-shadow: 2px 2px 9px 0px #ccc;
79
-webkit-box-shadow: 2px 2px 9px 0px #ccc;
810
box-shadow: 2px 2px 9px 0px #ccc;
9-
width:100px;
10-
height: 100px;
11-
background-color:white;
11+
background-color: white;
12+
width: 400px;
13+
}
14+
15+
.todo-list-row {
16+
border-bottom: 1px solid rgb(214,214,214);
17+
display: table;
18+
width: 100%;
19+
}
20+
21+
.todo-list-check-col {
22+
width:50px;
23+
display: table-cell;
24+
text-align: center;
25+
vertical-align: middle;
26+
}
27+
28+
.todo-list-text-col {
29+
border-left: 4px double rgb(247,211,216);
30+
padding-left: 10px;
31+
font: italic 14pt 'Roboto Condensed', sans-serif;
32+
width: 350px;
33+
white-space: nowrap;
34+
overflow: hidden;
35+
text-overflow:ellipsis;
36+
line-height: 40px;
37+
}
38+
39+
.todo-list-text-col_heading {
40+
font-size: 16pt;
41+
color:rgb(214,214,214);
42+
line-height: 70px;
43+
}
44+
45+
.todo-list-text-col_footer {
46+
font-size: 10pt;
47+
font-style: normal;
48+
color:rgb(160,160,160);
49+
line-height: 70px;
50+
}
51+
52+
.todo-list-text-col_done {
53+
text-decoration: line-through;
54+
}
55+
56+
.todo-list-input {
57+
border:none;
58+
font: italic 14pt 'Roboto Condensed', sans-serif;
59+
width: 100%;
60+
outline: none;
1261
}

‎todo.png

-46.1 KB
Binary file not shown.

0 commit comments

Comments
 (0)