1 /*

     2  * Todo-like application

     3  */

     4 

     5 .todo {

     6 	margin: 0;

     7 	padding: 0;

     8 	min-height: 5px;

     9 	list-style: none;

    10 

    11 	>li {

    12 		display: block;

    13 		position: relative;

    14 		overflow: hidden;

    15 		border-bottom: 1px solid #e7e7e7;

    16 		margin: 0 5px;

    17 		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAYAAADagWXwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RkQ1OEY4NTM4NUIxMUUzQjdCMUMxQzJCQUE3MTMxOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RkQ1OEY4NjM4NUIxMUUzQjdCMUMxQzJCQUE3MTMxOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRGRDU4RjgzMzg1QjExRTNCN0IxQzFDMkJBQTcxMzE4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRGRDU4Rjg0Mzg1QjExRTNCN0IxQzFDMkJBQTcxMzE4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pTD+wgAAACtJREFUeNpimDBhwn8gYABhdDYjiIELMDHgAUwTJ06Ea0VnjxpLO2MBAgwAGYZLegQbQ3UAAAAASUVORK5CYII=) 1px 11px no-repeat;

    18 

    19 		&:last-child,

    20 		&:only-child {

    21 			border-bottom: 0;

    22 		}

    23 		>:first-child {

    24 			display: block;

    25 			border-right: 1px solid #FFE1EB;

    26 			height: 100%;

    27 			padding: 6px 11px 6px 18px;

    28 			width: 20px;

    29 			vertical-align: top;

    30 			position: absolute;

    31 

    32 			&:hover {

    33 				cursor: move;

    34 			}

    35 		}

    36 		&.complete {

    37 			background: 0 0;

    38 

    39 			&.complete >:first-child:hover {

    40 				cursor: default;

    41 			}

    42 			>* {

    43 				text-decoration: line-through;

    44 				font-style: italic;

    45 			}

    46 		}

    47 		&.ui-sortable-helper {

    48 			border-top: 1px solid #eee;

    49 			background: rgba(113, 132, 63, .1);

    50 		}

    51 		>p {

    52 			height: 100%;

    53 			margin-left: 52px;

    54 			border-left: 1px solid #FFE1EB;

    55 			display: inline-block;

    56 			padding: 8px 0 6px 7px;

    57 			margin-bottom: 0;

    58 			min-height: 37px;

    59 			line-height: normal;

    60 			font-size: 14px;

    61 			font-weight: 500;

    62 			color: #333;

    63 

    64 			>span {

    65 				display: block;

    66 				line-height: 12px;

    67 				font-size: 10px;

    68 				font-weight: 400;

    69 			}

    70 			>:first-child {

    71 				margin-top: -5px;

    72 				color: #999;

    73 				margin-bottom: 4px;

    74 			}

    75 			>.date {

    76 				color: #bfbfbf;

    77 			}

    78 		}

    79 	}

    80 	&-group-title {

    81 		margin: 0;

    82 		line-height: 31px;

    83 		padding: 0 0 0 10px;

    84 		background: #fafafa;

    85 		border-bottom: 1px solid #e7e7e7;

    86 		border-top: 1px solid #f4f4f4;

    87 		color: #999;

    88 	}

    89 }