/* Relevant resets */ /* Reset the default browser styles on list items */ ul, li { margin: 0; padding: 0; border: 0; } /* Global Styles */ body { line-height: 1; font-family: "Lato", sans-serif; background-color: #EFF1F2; } .container { width: 70%; margin: 1em auto 3em; border: 1px solid #efefef; } .panel, li { /* Use flexbox */ display: flex; /* Center everything inside .panel and li vertically */ align-items: center; /* Distribute space evenly between the contents*/ justify-content: space-between; list-style-type: none; padding: 10px; border-bottom: 1px solid #efefef; background-color: #E7E8EB; } .text-input { border: 1px solid #dedede; padding-left: 10px; width: 70%; height: 35px; color: #555; } button { color: #555; background-color: #FFFFFF; border: 1px solid #bbb; outline: 0; width: 100px; height: 38px; cursor: pointer; font-size: 12px; } /* Task area */ .list li { background-color: #3465A4; } .list li .delete { background-color: transparent; border: 1px solid #3465A4; color: #ddd; /* Hide the delete button by default*/ visibility: hidden; font-size: 20px; font-weight: bold; } .list li:hover > .delete { /* Show the delete button when hovering over each list item */ visibility: visible; } .list label { padding-right: 10px; display: inline-block; width: 70%; font-size: 18px; line-height: 24px; color: #fcfcfc; z-index: 2; overflow: hidden; } .list li.done label { color: #d9d9d9; text-decoration: line-through; } /* Media Queries */ @media screen and (max-width: 768px) { .container { width: 90%; max-width: 90%; } button { width: 80px; } }
<!-- Main Div Holding our Application Data --> <div class="container" id="todo"> <!-- Panel for holding our input --> <section class="panel"> <input type="checkbox" id="mark-all"> <input type="text" placeholder="What do you need to do?" autofocus class="text-input"> <button>Clear List</button> </section> <!-- Unorderd list for holding our todo items --> <ul class="list"> <li> <input type="checkbox" class="checkbox"> <label for="checkbox"></label> <button class="delete">X</button> </li> </ul> </div>
//Create a new Vue instance new Vue({ //Bind this Vue instance to our container div with an ID of todo el: "#todo" });