less/modules/todo.less

0001 //
0002 // Todo list
0003 // --------------------------------------------------
0004
0005 .todo {
0006   background-color: mix(@base, black, 85%);
0007   color: mix(@base, @inverse, 66%);
0008   margin-bottom: 20px;
0009   .border-radius(8px 8px 6px 6px);
0010
0011   ul {
0012     margin: 0;
0013     list-style-type: none;
0014   }
0015   li {
0016     background: @base url(../img/todo/todo.png) 92% center no-repeat;
0017     background-size: 20px 20px;
0018     cursor: pointer;
0019     margin-top: 2px;
0020     padding: 18px 42px 17px 25px;
0021     position: relative;
0022     .transition(.25s);
0023
0024     &:first-child {
0025       margin-top: 0;
0026     }
0027     &:last-child {
0028       .border-radius(0 0 6px 6px);
0029       padding-bottom: 18px;
0030     }
0031     &.todo-done {
0032       background: transparent url(../img/todo/done.png) 92% center no-repeat;
0033       background-size: 20px 20px;
0034       color: @firm;
0035
0036       .todo-name {
0037         color: @firm;
0038       }
0039     }
0040   }
0041 }
0042
0043 .todo-search {
0044   position: relative;
0045   background: @firm;
0046   background-size: 16px 16px;
0047   border-radius: 6px 6px 0 0;
0048   color: @base;
0049   padding: 19px 25px 20px;
0050
0051   &:before {
0052     position: absolute;
0053     font-family: 'Flat-UI-Icons';
0054     content: "\e01c";
0055     font-size: 16px;
0056     display: inline-block;
0057     top: 50%;
0058     left: 92%;
0059     margin: -0.5em 0 0 -1em;
0060   }
0061 }
0062
0063 input.todo-search-field {
0064   background: none;
0065   border: none;
0066   color: @base;
0067   font-size: 19px;
0068   font-weight: 700;
0069   margin: 0;
0070   line-height: 23px;
0071   padding: 5px 0;
0072   text-indent: 0;
0073   .box-shadow(none);
0074   .placeholder-color(@base);
0075 }
0076
0077 .todo-icon {
0078   float: left;
0079   font-size: 24px;
0080   padding: 11px 22px 0 0;
0081 }
0082
0083 .todo-content {
0084   padding-top: 1px;
0085   overflow: hidden;
0086 }
0087
0088 .todo-name {
0089   color: @inverse;
0090   font-size: 17px;
0091   margin: 1px 0 3px;
0092 }
0093
0094 // Retina Support
0095 @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 (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
0096   .todo {
0097     li {
0098       background-image: url(../img/todo/todo-2x.png);
0099
0100       &.todo-done {
0101         background-image: url(../img/todo/done-2x.png);
0102       }
0103     }
0104   }
0105 }