Mercurial > nebulaweb3

comparison default/assets/scss/components/_todo.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }