From b0e32f0c94bcd41d339fb1d9fe530192eb82a0d4 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Wed, 21 Dec 2022 16:54:11 +0800
Subject: [PATCH] fix css

---
 .../client/src/tiptap/core/styles/table.scss  | 467 +++++++++---------
 1 file changed, 235 insertions(+), 232 deletions(-)

diff --git a/packages/client/src/tiptap/core/styles/table.scss b/packages/client/src/tiptap/core/styles/table.scss
index 33dbe38c..803f98c2 100644
--- a/packages/client/src/tiptap/core/styles/table.scss
+++ b/packages/client/src/tiptap/core/styles/table.scss
@@ -1,285 +1,288 @@
 /* stylelint-disable */
-$tableBorderColor: var(--semi-color-border);
-$tableHeaderBgColor: var(--semi-color-fill-0);
-$tableSelectedBorderColor: rgb(0 101 255);
-$tableSelectedCellBgColor: transparent;
-$tableSelectedControlBgColor: #2584ff;
-$tableResizeHandleBgColor: #adf;
 
-.tableWrapper {
-  position: relative;
-  margin: 0.5em 0px;
+.ProseMirror {
+  $tableBorderColor: var(--semi-color-border);
+  $tableHeaderBgColor: var(--semi-color-fill-0);
+  $tableSelectedBorderColor: rgb(0 101 255);
+  $tableSelectedCellBgColor: transparent;
+  $tableSelectedControlBgColor: #2584ff;
+  $tableResizeHandleBgColor: #adf;
 
-  &.has-focus {
-    .scrollWrapper {
-      margin-top: -20px;
-    }
-  }
-}
-
-.scrollWrapper {
-  overflow-y: hidden;
-  overflow-x: auto;
-  padding-left: 28px;
-  padding-top: 28px;
-  padding-bottom: 8px;
-  margin-left: -28px;
-  margin-top: -20px;
-  margin-bottom: -8px;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-  -webkit-transition: border 250ms ease-in-out 0s;
-  transition: border 250ms ease-in-out 0s;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-radius: 4px;
-  overflow: auto;
-
-  box-sizing: border-box;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  tr {
+  .tableWrapper {
     position: relative;
-    border-bottom: 1px solid $tableBorderColor;
-  }
+    margin: 0.5em 0px;
 
-  th {
-    background: $tableHeaderBgColor;
-  }
-
-  td,
-  th {
-    position: relative;
-    vertical-align: top;
-    border: 1px solid $tableBorderColor;
-    position: relative;
-    padding: 4px 8px;
-    text-align: left;
-    min-width: 100px;
-  }
-
-  .selectedCell {
-    position: relative;
-    border: 1px solid $tableSelectedBorderColor;
-    background-color: $tableSelectedCellBgColor;
-
-    &::after {
-      box-sizing: content-box;
-      height: 100%;
-      width: 100%;
-      border: 1px solid $tableSelectedBorderColor;
-      content: '';
-      position: absolute;
-      left: -1px;
-      top: -1px;
-      bottom: 0px;
-      z-index: 12;
-      display: inline-block;
-      pointer-events: none;
+    &.has-focus {
+      .scrollWrapper {
+        margin-top: -20px;
+      }
     }
   }
 
-  .grip-column {
-    position: absolute;
-    top: -12px;
-    left: -1px;
+  .scrollWrapper {
+    overflow-y: hidden;
+    overflow-x: auto;
+    padding-left: 28px;
+    padding-top: 28px;
+    padding-bottom: 8px;
+    margin-left: -28px;
+    margin-top: -20px;
+    margin-bottom: -8px;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    -webkit-transition: border 250ms ease-in-out 0s;
+    transition: border 250ms ease-in-out 0s;
+  }
+
+  table {
     width: 100%;
+    border-collapse: collapse;
+    border-radius: 4px;
+    overflow: auto;
 
-    > span {
-      position: absolute;
-      top: -18px;
-      left: 100%;
-      transform: translateX(-8px);
+    box-sizing: border-box;
 
-      display: inline-block;
-      width: 16px;
-      height: 16px;
+    * {
+      box-sizing: border-box;
+    }
 
-      font-size: 0;
-      cursor: pointer;
+    tr {
+      position: relative;
+      border-bottom: 1px solid $tableBorderColor;
+    }
 
-      .semi-icon-default {
-        font-size: inherit;
+    th {
+      background: $tableHeaderBgColor;
+    }
+
+    td,
+    th {
+      position: relative;
+      vertical-align: top;
+      border: 1px solid $tableBorderColor;
+      position: relative;
+      padding: 4px 8px;
+      text-align: left;
+      min-width: 100px;
+    }
+
+    .selectedCell {
+      position: relative;
+      border: 1px solid $tableSelectedBorderColor;
+      background-color: $tableSelectedCellBgColor;
+
+      &::after {
+        box-sizing: content-box;
+        height: 100%;
+        width: 100%;
+        border: 1px solid $tableSelectedBorderColor;
+        content: '';
+        position: absolute;
+        left: -1px;
+        top: -1px;
+        bottom: 0px;
+        z-index: 12;
+        display: inline-block;
+        pointer-events: none;
       }
     }
 
-    &::before {
-      content: '';
+    .grip-column {
       position: absolute;
-      left: 100%;
-      bottom: 4px;
-      transform: translateX(-1px);
-
-      width: 4px;
-      height: 4px;
-      background-color: $tableBorderColor;
-      border-radius: 50%;
-      display: block;
-    }
-
-    &::after {
-      box-sizing: content-box;
-      content: '';
-      cursor: pointer;
-      position: absolute;
-      top: 0;
-      left: 0;
+      top: -12px;
+      left: -1px;
       width: 100%;
-      height: 10px;
-      background: $tableHeaderBgColor;
-      border: 1px solid $tableBorderColor;
-      display: block;
-    }
-
-    &:hover {
-      color: $tableSelectedBorderColor;
 
       > span {
-        font-size: 14px;
+        position: absolute;
+        top: -18px;
+        left: 100%;
+        transform: translateX(-8px);
+
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+
+        font-size: 0;
+        cursor: pointer;
+
+        .semi-icon-default {
+          font-size: inherit;
+        }
       }
 
       &::before {
-        display: none;
+        content: '';
+        position: absolute;
+        left: 100%;
+        bottom: 4px;
+        transform: translateX(-1px);
+
+        width: 4px;
+        height: 4px;
+        background-color: $tableBorderColor;
+        border-radius: 50%;
+        display: block;
       }
 
       &::after {
+        box-sizing: content-box;
+        content: '';
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 10px;
+        background: $tableHeaderBgColor;
+        border: 1px solid $tableBorderColor;
+        display: block;
+      }
+
+      &:hover {
+        color: $tableSelectedBorderColor;
+
+        > span {
+          font-size: 14px;
+        }
+
+        &::before {
+          display: none;
+        }
+
+        &::after {
+          background: $tableSelectedControlBgColor;
+          border-color: $tableSelectedControlBgColor;
+        }
+      }
+
+      &.last::after {
+        border-top-right-radius: 3px;
+      }
+
+      &.selected::after {
         background: $tableSelectedControlBgColor;
         border-color: $tableSelectedControlBgColor;
       }
     }
 
-    &.last::after {
-      border-top-right-radius: 3px;
-    }
-
-    &.selected::after {
-      background: $tableSelectedControlBgColor;
-      border-color: $tableSelectedControlBgColor;
-    }
-  }
-
-  .grip-row {
-    position: absolute;
-    left: -12px;
-    top: -1px;
-    height: 100%;
-
-    > span {
-      transform: translateY(8px);
+    .grip-row {
       position: absolute;
-      left: -16px;
-      bottom: 4px;
-
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-
-      font-size: 0;
-      cursor: pointer;
-
-      .semi-icon-default {
-        font-size: inherit;
-      }
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: -10px;
-      bottom: -2px;
-      width: 4px;
-      height: 4px;
-      background-color: $tableBorderColor;
-      border-radius: 50%;
-      display: block;
-    }
-
-    &::after {
-      box-sizing: content-box;
-      content: '';
-      cursor: pointer;
-      position: absolute;
-      left: 0;
-      top: 0;
+      left: -12px;
+      top: -1px;
       height: 100%;
-      width: 10px;
-      background: $tableHeaderBgColor;
-      border: 1px solid $tableBorderColor;
-      display: block;
-    }
-
-    &:hover {
-      color: $tableSelectedBorderColor;
 
       > span {
-        font-size: 14px;
+        transform: translateY(8px);
+        position: absolute;
+        left: -16px;
+        bottom: 4px;
+
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+
+        font-size: 0;
+        cursor: pointer;
+
+        .semi-icon-default {
+          font-size: inherit;
+        }
       }
 
       &::before {
-        display: none;
+        content: '';
+        position: absolute;
+        left: -10px;
+        bottom: -2px;
+        width: 4px;
+        height: 4px;
+        background-color: $tableBorderColor;
+        border-radius: 50%;
+        display: block;
       }
 
       &::after {
+        box-sizing: content-box;
+        content: '';
+        cursor: pointer;
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 10px;
+        background: $tableHeaderBgColor;
+        border: 1px solid $tableBorderColor;
+        display: block;
+      }
+
+      &:hover {
+        color: $tableSelectedBorderColor;
+
+        > span {
+          font-size: 14px;
+        }
+
+        &::before {
+          display: none;
+        }
+
+        &::after {
+          background: $tableSelectedControlBgColor;
+          border-color: $tableSelectedBorderColor;
+        }
+      }
+
+      &.last::after {
+        border-bottom-left-radius: 3px;
+      }
+
+      &.selected::after {
         background: $tableSelectedControlBgColor;
         border-color: $tableSelectedBorderColor;
       }
     }
 
-    &.last::after {
-      border-bottom-left-radius: 3px;
-    }
+    .grip-table {
+      &::after {
+        box-sizing: content-box;
+        content: '';
+        cursor: pointer;
+        position: absolute;
+        top: -12px;
+        left: -12px;
+        display: block;
+        background: $tableHeaderBgColor;
+        width: 10px;
+        height: 10px;
+        border: 1px solid $tableBorderColor;
+        border-top-left-radius: 3px;
+      }
 
-    &.selected::after {
-      background: $tableSelectedControlBgColor;
-      border-color: $tableSelectedBorderColor;
+      &:hover::after {
+        background: $tableSelectedControlBgColor;
+        border-color: $tableSelectedBorderColor;
+      }
+
+      &.selected::after {
+        background: $tableSelectedControlBgColor;
+        border-color: $tableSelectedBorderColor;
+      }
     }
   }
 
-  .grip-table {
-    &::after {
-      box-sizing: content-box;
-      content: '';
-      cursor: pointer;
-      position: absolute;
-      top: -12px;
-      left: -12px;
-      display: block;
-      background: $tableHeaderBgColor;
-      width: 10px;
-      height: 10px;
-      border: 1px solid $tableBorderColor;
-      border-top-left-radius: 3px;
-    }
+  .column-resize-handle {
+    position: absolute;
+    top: 0;
+    right: -2px;
+    bottom: -2px;
+    width: 4px;
+    pointer-events: none;
+    background-color: $tableResizeHandleBgColor;
+  }
 
-    &:hover::after {
-      background: $tableSelectedControlBgColor;
-      border-color: $tableSelectedBorderColor;
-    }
-
-    &.selected::after {
-      background: $tableSelectedControlBgColor;
-      border-color: $tableSelectedBorderColor;
-    }
+  .resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize; /* stylelint-disable declaration-block-no-duplicate-properties */
   }
 }
-
-.column-resize-handle {
-  position: absolute;
-  top: 0;
-  right: -2px;
-  bottom: -2px;
-  width: 4px;
-  pointer-events: none;
-  background-color: $tableResizeHandleBgColor;
-}
-
-.resize-cursor {
-  cursor: ew-resize;
-  cursor: col-resize; /* stylelint-disable declaration-block-no-duplicate-properties */
-}