Created
June 22, 2012 22:01
-
-
Save MikeFielden/2975451 to your computer and use it in GitHub Desktop.
New Todo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* New Todo */ | |
.container { | |
box-sizing: border-box; | |
width: 510px; | |
} | |
/* input container */ | |
.container > section { | |
position: relative; | |
} | |
.container > section#inputContainer input { | |
height: 30px; | |
width: 400px; | |
font-size: 1.3em; | |
padding-left: 20px; | |
padding-top: 10px; | |
line-height: 15px; | |
} | |
.container > section#inputContainer span.charactersRemaining { | |
display: inline-block; | |
position: absolute; | |
top: 4px; | |
left: 430px; | |
height: 20px; | |
width: 20xp; | |
background: #ccc; | |
font-size: .9em; | |
padding: 7px; | |
border-radius: 4px; | |
} | |
.container > section h1 { | |
color: rgb(67, 67, 67); | |
border-bottom: 1px solid #c6c6c6; | |
} | |
.container > section ul { | |
list-style-type: none; | |
margin: 10px 0; | |
padding: 0; | |
height: 500px; | |
overflow: hidden; | |
width: 500px; | |
} | |
.container > section li { | |
width: 100%; | |
border-left: 1px solid #c6c6c6; | |
border-bottom: 3px solid #c6c6c6; | |
margin: 5px 0px; | |
padding: 10px; | |
} | |
.container > section li > span { | |
display: inline-block; | |
} | |
.container > section ul:first-child { | |
border-top: 3px solid #c6c6c6; | |
} | |
.container > section ul:last-child { | |
/*border-right: 1px solid #c6c6c6; */ | |
} | |
.container > section li > span.resizeHandle { | |
width: 2%; | |
height: 15px; | |
border-radius: 15px; | |
background: grey; | |
} | |
.container > section li > span.PLACEHOLDER { | |
} | |
.container > section li > span.todoMessage { | |
padding-left: 10px; | |
font-size: 1.2em; | |
width: 70%; | |
word-spacing: -.10em; | |
} | |
.container > section li > span.smartDate { | |
font-size: .7em; | |
width: 13%; | |
padding-right: 10px; | |
} | |
.container > section li > span.deleteIcon { | |
position: absolute; | |
right: 10px; | |
} | |
.container > section li > span.deleteIcon:hover { | |
cursor: pointer; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<section id="inputContainer"> | |
<input placeholder="Enter a Todo and press Enter"></input> | |
<span class="charactersRemaining"> 40 </span> | |
</section> | |
<section id="activeTodos"> | |
<h1>Active</h1> | |
<ul> | |
<li> | |
<span class="resizeHandle"></span> | |
<input type="checkbox" name="chkComplete" value="" /> | |
<span class="todoMessage">This is an example Todo Message</span> | |
<span class="smartDate">a few seconds ago</span> | |
<span class="deleteIcon">X</span> | |
</li> | |
<li> | |
<span class="resizeHandle"></span> | |
<input type="checkbox" name="chkComplete" value="" /> | |
<span class="todoMessage">This is another example Todo Message</span> | |
<span class="smartDate">yesterday</span> | |
<span class="deleteIcon">X</span> | |
</li> | |
</ul> | |
</section> | |
<section id="completedTodos"> | |
<h1>Completed</h1> | |
<ul> | |
<li> | |
<span class="resizeHandle"></span> | |
<span class=""></span> | |
<span class="todoMessage">This is an example Todo Message</span> | |
<span class="smartDate"></span> | |
<span class="deleteIcon"></span> | |
</li> | |
</ul> | |
</section> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment