fix: mweb-lark task list item

Change-Id: I1f6abad357cbca53f7e244bb836d4d6154099bde
imageslr · Jun 22, 2021 · c1235be · c1235be
1 parent a003029
commit c1235be
Showing 1 changed file with 28 additions and 45 deletions.
diff --git a/src/themes/mweb-lark.scss b/src/themes/mweb-lark.scss
@@ -147,56 +147,39 @@ li+li, ul ul, ol ul, ul ol, ol ol, li ul, li ol {
 
 // task list
 
-// TODO：MWeb 预览和 chrome 预览效果不一样，前者会显示 input。暂时用默认的。
 .task-list-item {
-  margin-left: 1.3em;
+  padding-left: 28px;
+  margin-left: -6px;
   list-style-type: none;
-  text-indent: -1.5em; // 这个数值刚好令 checkbox 与上一行第一个字对齐
+  word-wrap: break-all;
 
-  &:before {
-    content: "";
-    display: static;
-    margin-right: 0px;
-  }
+  input {
+    margin: 0 !important;
+    appearance: none;
+    -webkit-appearance: none;
 
-  > input[type=checkbox] {
-    text-indent: -1.7em;
+    &:before {
+      content: " ";
+      display: inline-block;
+      position: relative;
+      line-height: normal;
+      font-size: 16px;
+      top: 2px;
+      border-radius: 2px;
+      border: 1px solid #2b2f36;
+      background-position: 50%;
+      white-space: normal;
+      width: 14px;
+      height: 14px;
+      margin-left: -22px;
+      margin-right: 6px;
+    }
+
+    &:checked:before {
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjU4OSAzLjkwM2wuODA4LjgwOGEuMzUuMzUgMCAwIDEgMCAuNDk1TDYuMTggMTAuNDI1YS4zNS4zNSAwIDAgMS0uNDk1IDBMMi43MDMgNy40NDRhLjM1LjM1IDAgMCAxIDAtLjQ5NWwuODA4LS44MDhhLjM1LjM1IDAgMCAxIC40OTUgMGwxLjkyNSAxLjkyNCA0LjE2My00LjE2M2EuMzUuMzUgMCAwIDEgLjQ5NSAweiIgZmlsbD0iIzMzNzBGRiIvPjwvc3ZnPg==);
+      background-size: contain;
+    }
   }
 }
 
-// 下面这个是飞书样式的 checkbox
-// .task-list-item {
-//   padding-left: 28px;
-//   margin-left: -6px;
-//   list-style-type: none;
-//   word-wrap: break-all;
-
-//   input {
-//     margin: 0 !important;
-//     appearance: none;
-
-//     &:before {
-//       content: " ";
-//       display: inline-block;
-//       position: relative;
-//       line-height: normal;
-//       font-size: 16px;
-//       top: 2px;
-//       border-radius: 2px;
-//       border: 1px solid #2b2f36;
-//       background-position: 50%;
-//       white-space: normal;
-//       width: 14px;
-//       height: 14px;
-//       margin-left: -22px;
-//       margin-right: 6px;
-//     }
-
-//     &:checked:before {
-//       background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjU4OSAzLjkwM2wuODA4LjgwOGEuMzUuMzUgMCAwIDEgMCAuNDk1TDYuMTggMTAuNDI1YS4zNS4zNSAwIDAgMS0uNDk1IDBMMi43MDMgNy40NDRhLjM1LjM1IDAgMCAxIDAtLjQ5NWwuODA4LS44MDhhLjM1LjM1IDAgMCAxIC40OTUgMGwxLjkyNSAxLjkyNCA0LjE2My00LjE2M2EuMzUuMzUgMCAwIDEgLjQ5NSAweiIgZmlsbD0iIzMzNzBGRiIvPjwvc3ZnPg==);
-//       background-size: contain;
-//     }
-//   }
-// }
-
 }