|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 To Do App
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7 .todo-widget {
|
|
|
8 padding-bottom: em(20);
|
|
|
9 display: flex;
|
|
|
10 flex-direction: column;
|
|
|
11 .list-group {
|
|
|
12 flex: 1;
|
|
|
13 margin-bottom: em(20);
|
|
|
14 }
|
|
|
15 input { height: em(45) }
|
|
|
16 .list-group-item {
|
|
|
17 margin: 0;
|
|
|
18 padding: 0;
|
|
|
19 border: 0;
|
|
|
20 &.checked {
|
|
|
21 .label-text{
|
|
|
22 font-style: italic;
|
|
|
23 text-decoration: line-through;
|
|
|
24 }
|
|
|
25 }
|
|
|
26 &:hover {
|
|
|
27 background: #f9f9f9;
|
|
|
28 }
|
|
|
29 &:hover .edit-item,
|
|
|
30 &:hover .delete-item {
|
|
|
31 opacity: 1;
|
|
|
32 }
|
|
|
33 }
|
|
|
34 @include mobile {
|
|
|
35 .list-group-item {
|
|
|
36 .label-text {
|
|
|
37 padding-right: em(70);
|
|
|
38 }
|
|
|
39 .edit-item,
|
|
|
40 .delete-item {
|
|
|
41 opacity: 1;
|
|
|
42 }
|
|
|
43 }
|
|
|
44 }
|
|
|
45 @include tablet {
|
|
|
46 .list-group-item {
|
|
|
47 .label-text {
|
|
|
48 padding-right: em(45);
|
|
|
49 }
|
|
|
50 .delete-item,
|
|
|
51 .edit-item {
|
|
|
52 opacity: 1;
|
|
|
53 }
|
|
|
54 }
|
|
|
55 opacity: 1;
|
|
|
56 }
|
|
|
57 label {
|
|
|
58 display: block;
|
|
|
59 position: relative;
|
|
|
60 padding: em(15);
|
|
|
61 font-weight: normal;
|
|
|
62 cursor: pointer;
|
|
|
63 flex: 1;
|
|
|
64 margin-bottom: 0;
|
|
|
65
|
|
|
66 input[type="checkbox"] {
|
|
|
67 display: none;
|
|
|
68 }
|
|
|
69
|
|
|
70 .label-text {
|
|
|
71 display: block;
|
|
|
72 }
|
|
|
73 }
|
|
|
74 .edit-item,
|
|
|
75 .delete-item {
|
|
|
76 @include position(absolute, 50% em(10,16) null null);
|
|
|
77 color: $body-color;
|
|
|
78 opacity: 0;
|
|
|
79 transition: all 0.3s ease;
|
|
|
80 transform: translateY(-50%);
|
|
|
81 cursor: pointer;
|
|
|
82 font-size: em(16);
|
|
|
83 background: $info;
|
|
|
84 color: #fff;
|
|
|
85 @include size( em(30,16) );
|
|
|
86 line-height: em(30,16);
|
|
|
87 text-align: center;
|
|
|
88 border-radius: 100px;
|
|
|
89 }
|
|
|
90 .edit-item {
|
|
|
91 right: em(50,16);
|
|
|
92 }
|
|
|
93
|
|
|
94 .edit-field {
|
|
|
95 position: relative;
|
|
|
96 input { padding-right: em(50) }
|
|
|
97 .submit-btn {
|
|
|
98 @include position(absolute, 50% em(10,15) null null );
|
|
|
99 transform: translateY(-50%);
|
|
|
100 @include size( em(30,15) );
|
|
|
101 line-height: em(27,15);
|
|
|
102 font-size: em(15);
|
|
|
103 padding: 0;
|
|
|
104 border-radius: 100px;
|
|
|
105 text-align: center;
|
|
|
106 i { font-size: em(16,15); }
|
|
|
107 }
|
|
|
108
|
|
|
109 }
|
|
|
110 }
|
