Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
106 lines (87 sloc) 2.03 KB
class="todo-item row"
v-bind:class="{'is-complete': todo.completed}">
<div class="column column-10">
class="button-outline button-small mark">
<div v-if="!todo.completed">
<div class="column column-80">
<div class="column column-10">
class="button-outline button-small del">X</button>
export default {
name: "TodoItem",
props: ["todo"],
methods: {
markComplete() {
this.todo.completed = !this.todo.completed;
.row {
flex-direction: inherit;
p {
overflow-wrap: break-word;
padding: auto;
margin-top: 2px;
padding-left: 2rem;
text-transform: capitalize;
.button-outline.del {
border-radius: 1rem;
border-color: #AF3E4D;
transition: all 750ms
.button-outline.del:hover {
border-color: rgb(117, 41, 52);
background: #AF3E4D;
color: #ffffff;
border-radius: 2em;
border-color: #165f58;
color: #ffffff;
background: #69A2B0;
transition: all 750ms;
font-weight: bolder;
border-top-right-radius: 3rem;
border-bottom-right-radius: 3rem;
.is-complete .button-outline.mark:hover {
background: #165f58;
border-top-right-radius: 10rem;
border-bottom-right-radius: 10rem;
color: #fff;
.button-small {
font-size: .8rem;
height: 2.8rem;
line-height: 2.8rem;
padding: 0 1.5rem;
.is-complete {
text-decoration: line-through;
.is-complete .button-outline.mark {
background: rgba(94, 101, 114, 0.603);
border-color: rgba(94, 101, 114, 0.603);
You can’t perform that action at this time.