Skip to content

T
todomvc
Commit 175b6eff authored by Addy Osmani's avatar Addy Osmani
Browse files
Options

Merge pull request #126 from addyosmani/ss/new-template 

Delicious new template
parents fd140ecd 8ae33c52
Hide whitespace changes
Inline Side-by-side
Showing with 331 additions and 136 deletions
assets/base.css
View file @ 175b6eff
...@@ -4,205 +4,386 @@ body { ...@@ -4,205 +4,386 @@ body {
padding: 0; padding: 0;
} }
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
color: inherit;
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
body { body {
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em; line-height: 1.4em;
background: #eeeeee; background: #eeeeee url('bg.png');
color: #333333; color: #4d4d4d;
width: 520px; width: 550px;
margin: 0 auto; margin: 0 auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
} }
#todoapp { #todoapp {
background: #fff; background: #fff;
padding: 20px; background: rgba(255, 255, 255, 0.9);
margin-bottom: 40px; margin: 130px 0 40px 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; border: 1px solid #ccc;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; position: relative;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; border-top-left-radius: 2px;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; border-top-right-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
-webkit-border-radius: 0 0 5px 5px; 0 25px 50px 0 rgba(0, 0, 0, 0.15);
-moz-border-radius: 0 0 5px 5px; }
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px; #todoapp:before {
border-radius: 0 0 5px 5px; content: '';
border-left: 1px solid #f5d6d6;
border-right: 1px solid #f5d6d6;
width: 2px;
position: absolute;
top: 0;
left: 40px;
height: 100%;
} }
#todoapp h1 { #todoapp h1 {
font-size: 36px; position: absolute;
top: -120px;
width: 100%;
font-size: 70px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
padding: 0 0 10px 0; color: #b3b3b3;
color: rgba(255, 255, 255, 0.3);
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
#header {
padding-top: 15px;
border-radius: inherit;
}
#todoapp header:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 15px;
z-index: 2;
border-bottom: 1px solid #6c615c;
background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-radius: inherit;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#todoapp input:-moz-placeholder {
font-style: italic;
color: #a9a9a9;
} }
#todoapp input[type="text"] { #new-todo,
width: 466px; .edit {
margin: 0;
width: 100%;
font-size: 24px; font-size: 24px;
font-family: inherit; font-family: inherit;
line-height: 1.4em; line-height: 1.4em;
border: 0; border: 0;
outline: none; outline: none;
color: inherit;
padding: 6px; padding: 6px;
border: 1px solid #999999; border: 1px solid #999;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; -webkit-box-sizing: border-box;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; -moz-box-sizing: border-box;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; -ms-box-sizing: border-box;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; -o-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
} }
#todoapp input::-webkit-input-placeholder { #new-todo {
font-style: italic; padding: 16px 16px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.02);
position: relative;
z-index: 2;
box-shadow: none;
} }
#main { #main {
position: relative;
z-index: 2;
border-top: 1px dotted #adadad;
}
label[for='toggle-all'] {
display: none; display: none;
} }
#toggle-all {
position: absolute;
top: -42px;
left: 12px;
text-align: center;
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transform: rotate(90deg);
/*-moz-transform: rotate(90deg);*/
-ms-transform: rotate(90deg);
/*-o-transform: rotate(90deg);*/
transform: rotate(90deg);
}
#toggle-all:before {
content: '»';
font-size: 28px;
color: #d9d9d9;
padding: 0 25px 7px;
}
#toggle-all:checked:before {
color: #737373;
}
/* Need this ugly hack, since only
WebKit supports styling of inputs */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all {
top: -52px;
left: -11px;
}
}
#todo-list { #todo-list {
margin: 10px 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
#todo-list li { #todo-list li {
padding: 18px 20px 18px 0;
position: relative; position: relative;
font-size: 24px; font-size: 24px;
border-bottom: 1px solid #cccccc; border-bottom: 1px dotted #ccc;
} }
#todo-list li:last-child { #todo-list li:last-child {
border-bottom: none; border-bottom: none;
} }
#todo-list li.done label { #todo-list li.editing {
color: #777777; border-bottom: none;
padding: 0;
}
#todo-list li.editing .edit {
display: block;
width: 506px;
padding: 13px 17px 12px 17px;
margin: 0 0 0 43px;
}
#todo-list li.editing .view {
display: none;
}
#todo-list li .toggle {
text-align: center;
width: 35px;
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
#todo-list li .toggle:after {
font-size: 18px;
content: '✔';
line-height: 40px;
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
}
#todo-list li .toggle:checked:after {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
bottom: 1px;
position: relative;
}
#todo-list li label {
word-break: break-word;
margin: 20px 15px;
display: inline-block;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#todo-list li.complete label {
color: #a9a9a9;
text-decoration: line-through; text-decoration: line-through;
} }
#todo-list li .destroy { #todo-list li .destroy {
display: none; display: none;
position: absolute; position: absolute;
top: 20px; top: 10px;
right: 10px; right: 10px;
cursor: pointer; width: 40px;
width: 20px; height: 40px;
height: 20px; font-size: 22px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center; color: #a88a8a;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#todo-list li .destroy:hover {
text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
#todo-list li .destroy:after {
content: '✖';
} }
#todo-list li:hover .destroy { #todo-list li:hover .destroy {
display: block; display: block;
} }
#todo-list li.editing { #todo-list li .edit {
border-bottom: none; display: none;
margin-top: -1px;
padding: 0;
} }
#todo-list li.editing:last-child { #todo-list li.editing:last-child {
margin-bottom: -1px; margin-bottom: -1px;
} }
#todo-list li.editing .edit { #footer {
display: block; color: #777;
width: 444px; padding: 0 15px;
padding: 13px 15px 14px 20px; position: absolute;
margin: 0; right: 0;
bottom: -31px;
left: 0;
z-index: 1;
text-align: center;
} }
#todo-list li.editing .view { #footer:before {
display: none; content: '';
position: absolute;
right: 0;
bottom: 31px;
left: 0;
height: 100px;
z-index: -1;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 6px 0 -3px rgba(255, 255, 255, 0.8),
0 7px 1px -3px rgba(0, 0, 0, 0.3),
0 42px 0 -6px rgba(255, 255, 255, 0.8),
0 43px 2px -6px rgba(0, 0, 0, 0.2);
} }
#todo-list li .view label { #todo-count {
word-break: break-word; float: left;
text-align: left;
} }
#todo-list li .edit { #filters {
display: none; margin: 0;
padding: 0;
list-style: none;
position: absolute;
right: 0;
left: 0;
} }
#todoapp footer { #filters li {
display: none; display: inline;
margin: 0 -20px -20px -20px; }
overflow: hidden;
color: #555555; #filters li a {
background: #f4fce8; color: #83756f;
border-top: 1px solid #ededed; margin: 2px;
padding: 0 20px; text-decoration: none;
line-height: 37px; }
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px; #filters li a.selected {
-ms-border-radius: 0 0 5px 5px; font-weight: bold;
-o-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
} }
#clear-completed { #clear-completed {
display: none;
float: right; float: right;
line-height: 20px; line-height: 20px;
text-decoration: none; text-decoration: none;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
color: #555555;
font-size: 11px; font-size: 11px;
margin-top: 8px; padding: 0 10px;
margin-bottom: 8px; position: relative;
padding: 0 10px 1px; border-radius: 3px;
cursor: pointer; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
} }
#clear-completed:hover { #clear-completed:hover {
background: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
}
#clear-completed:active {
position: relative;
top: 1px;
}
#todo-count span {
font-weight: bold;
}
#instructions {
margin: 10px auto;
color: #777777;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#instructions a {
color: #336699;
} }
#credits { #info {
margin: 30px auto; margin: 65px auto 0;
color: #999; color: #a6a6a6;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; font-size: 12px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
text-align: center; text-align: center;
} }
#credits a { #info a {
color: #888; color: inherit;
} }
\ No newline at end of file
template/index.html
View file @ 175b6eff
...@@ -2,51 +2,65 @@ ...@@ -2,51 +2,65 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Template - TodoMVC</title> <title>Template • TodoMVC</title>
<link rel="stylesheet" href="../assets/base.css"> <link rel="stylesheet" href="../assets/base.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
</head> </head>
<body> <body>
<div id="todoapp"> <section id="todoapp">
<header> <header id="header">
<h1>Todos</h1> <h1>todos</h1>
<input id="new-todo" type="text" placeholder="What needs to be done?"> <input id="new-todo" placeholder="What needs to be done?" autofocus>
</header> </header>
<!-- this section is hidden by default and you be shown when there are todos and hidden when not --> <!-- this section should hidden by default and shown when there are todos -->
<section id="main"> <section id="main">
<input id="toggle-all" type="checkbox"> <input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label> <label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"> <ul id="todo-list">
<li class="done"> <li class="complete">
<div class="view"> <div class="view">
<input class="toggle" type="checkbox" checked> <input class="toggle" type="checkbox" checked>
<label>Create a TodoMVC template</label> <label>Create a TodoMVC template</label>
<a class="destroy"></a> <button class="destroy"></button>
</div> </div>
<input class="edit" type="text" value="Create a TodoMVC template"> <input class="edit" value="Create a TodoMVC template">
</li> </li>
<li> <li>
<div class="view"> <div class="view">
<input class="toggle" type="checkbox"> <input class="toggle" type="checkbox">
<label>Rule the web</label> <label>Rule the web</label>
<a class="destroy"></a> <button class="destroy"></button>
</div> </div>
<input class="edit" type="text" value="Rule the web"> <input class="edit" value="Rule the web">
</li> </li>
</ul> </ul>
</section> </section>
<!-- this footer needs to be shown with JS when there are todos and hidden when not --> <!-- this footer should hidden by default and shown when there are todos -->
<footer> <footer id="footer">
<a id="clear-completed">Clear completed</a> <span id="todo-count"><strong>1</strong> item left</span>
<div id="todo-count"></div> <!-- remove this if you don't implement routing -->
<ul id="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed">Clear completed (1)</button>
</footer> </footer>
</div> </section>
<div id="instructions"> <footer id="info">
Double-click to edit a todo. <p>Double-click to edit a todo</p>
</div> <!-- delete this ↓ -->
<div id="credits"> <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
Created by <a href="http://addyosmani.github.com/todomvc/">you</a>. <!-- change this out with your name and url ↓ -->
</div> <p>Created by <a href="http://addyosmani.github.com/todomvc/">you</a></p>
</footer>
<!-- scripts here --> <!-- scripts here -->
<script src="js/app.js"></script> <script src="js/app.js"></script>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7