// Todo list .todo background-color: scale-color($base, $lightness: -15%) border-radius: 8px 8px 6px 6px color: scale-color($base, $lightness: 33%) margin-bottom: 20px ul margin: 0 list-style-type: none li background: $base url(asset-path('todo/todo.png', image)) 92% center no-repeat background-size: 20px 20px cursor: pointer margin-top: 2px padding: 18px 42px 17px 25px position: relative +transition(.25s) &:first-child margin-top: 0 &:last-child border-radius: 0 0 6px 6px padding-bottom: 18px &.todo-done background: transparent url(asset-path('todo/done.png', image)) 92% center no-repeat background-size: 20px 20px color: $firm .todo-name color: $firm .todo-search background: $firm url(asset-path('todo/search.png', image)) 92% center no-repeat background-size: 16px 16px border-radius: 6px 6px 0 0 color: $base padding: 19px 25px 20px input.todo-search-field background: none border: none color: $base font-size: 19px font-weight: 700 margin: 0 line-height: 23px padding: 5px 0 text-indent: 0 +box-shadow(none) +placeholder-color($base) .todo-icon float: left font-size: 24px padding: 11px 22px 0 0 .todo-content padding-top: 1px overflow: hidden .todo-name color: $inverse font-size: 17px margin: 1px 0 3px // Serving 2x images @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) .todo li background-image: (asset-path('todo/todo-2x.png', image)) &.todo-done background-image: (asset-path('todo/done-2x.png', image)) .todo-search background-image: (asset-path('todo/search-2x.png', image))