@lingxiteam/assets 1.0.11-alpha.31 → 1.0.11-alpha.32

package/es/error/errorDisplay/Web/Drawer/Drawer.less

@@ -1,445 +1,445 @@
-@import url('../../animation.less');
-
-.lx-drawer {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 99999;
-  pointer-events: none;
-  overflow: hidden;
-
-  &.opening &-container {
-    animation: lxMoveOpen 0.3s;
-  }
-
-  &.closeing &-container {
-    animation: lxMoveClose 0.3s;
-    animation-fill-mode: forwards;
-  }
-
-  &.opening &-mask {
-    animation: lxFateIn 0.3s;
-    animation-fill-mode: forwards;
-  }
-
-  &.opening &-mask {
-    animation: lxFateOut 0.3s;
-    animation-fill-mode: forwards;
-  }
-
-  &-mask {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.45);
-    overflow: hidden;
-    pointer-events: auto;
-  }
-
-  &-container {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 800px;
-    height: 100%;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    pointer-events: auto;
-    transition: all 0.3s;
-  }
-
-  &-container.error &-head,
-  &-container.red &-head {
-    background-color: #fa7570;
-    border-color: #fa7570;
-    color: #fff;
-  }
-
-  &-container.error &-body {
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  &-container.error &-code-desc {
-    padding: 12px 20px;
-    overflow-y: auto;
-    flex: 1;
-    font-size: 12px;
-    color: rgba(28, 36, 46, 0.75);
-  }
-
-  &-container.purple &-head {
-    background-color: #9747ff;
-    border-color: #9747ff;
-    color: #fff;
-  }
-
-  &-container.blue &-head {
-    background-color: #47e;
-    border-color: #47e;
-    color: #fff;
-  }
-
-  &-head {
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid #e7e8ea;
-
-    &-title {
-      flex: 1;
-    }
-
-    &-close {
-      width: 16px;
-      height: 16px;
-      display: flex;
-      vertical-align: middle;
-      cursor: pointer;
-    }
-
-    &-title + &-extra {
-      margin-left: 16px;
-    }
-  }
-
-  &-head,
-  &-body,
-  &-footer {
-    padding: 12px 20px;
-  }
-
-  &-body {
-    color: rgba(28, 36, 46, 0.75);
-    flex: 1;
-    overflow-y: auto;
-    cursor: default;
-  }
-
-  &-group {
-    &-item + &-item {
-      margin-top: 20px;
-    }
-
-    &-item-head {
-      padding: 10px 12px;
-    }
-
-    &-item-body {
-      padding: 16px 12px;
-    }
-
-    &-item-head {
-      font-size: 16px;
-      font-weight: 500;
-      color: #1c242e;
-      background-color: #f9f9f9;
-    }
-
-    &-item-body {
-      font-size: 12px;
-      color: rgba(28, 36, 46, 0.55);
-    }
-
-    &-article + &-article {
-      margin-top: 20px;
-      padding-top: 20px;
-      border-top: 1px solid #f0f0f0;
-    }
-
-    &-article {
-      color: rgba(28, 36, 46, 0.75);
-
-      &-title {
-        font-size: 13px;
-        color: #1c242e;
-        font-weight: 500;
-      }
-
-      &-author {
-        font-size: 12px;
-        color: rgba(28, 36, 46, 0.25);
-      }
-
-      &-content {
-        color: rgba(28, 36, 46, 0.55);
-        font-size: 12px;
-      }
-
-      &-author + &-content,
-      &-title + &-content {
-        margin-top: 8px;
-      }
-
-      &-extra {
-        float: right;
-      }
-    }
-  }
-
-  &-code-tabs {
-    flex: 1;
-
-    &.full {
-      height: 100%;
-      flex: 2;
-      display: flex;
-      flex-direction: column;
-    }
-
-    &-head {
-      position: relative;
-      background-color: #fafafa;
-      height: 40px;
-      padding: 0 20px;
-      display: flex;
-      align-items: center;
-
-      &-item {
-        position: relative;
-        color: rgba(28, 36, 46, 0.75);
-        height: 40px;
-        margin-right: 30px;
-        text-align: center;
-        line-height: 40px;
-        cursor: pointer;
-
-        &::before {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 0;
-          height: 2px;
-          transition: all 0.3s;
-          background-color: #47e;
-        }
-
-        &.active {
-          color: #47e;
-
-          &::before {
-            width: 100%;
-          }
-        }
-      }
-    }
-
-    &-control {
-      position: absolute;
-      left: 50%;
-      top: -8px;
-      cursor: pointer;
-      transform: translateX(-50%);
-      width: 64px;
-      height: 16px;
-      line-height: 16px;
-      background: #e5e5e5;
-      border-radius: 6px 6px 6px 6px;
-      text-align: center;
-      z-index: 2;
-
-      &-icon {
-        width: 12px;
-        height: 12px;
-        color: rgba(28, 36, 46, 0.25);
-        display: inline-block;
-        vertical-align: middle;
-
-        &.flip {
-          transform: rotate(-180deg);
-          transition: all 0.3s;
-        }
-      }
-    }
-
-    &-body {
-      padding: 16px 20px;
-      overflow: auto;
-
-      img {
-        max-width: 100%;
-      }
-    }
-  }
-
-  &-err-item {
-    background: #fafafa;
-    padding: 8px 16px;
-    border-radius: 4px;
-    margin-bottom: 16px;
-
-    &-head {
-      display: flex;
-      align-items: center;
-
-      &-title {
-        margin-right: 8px;
-      }
-
-      &-cell {
-        flex: 1;
-      }
-
-      &-extra {
-        margin-left: 8px;
-        user-select: none;
-        &-arrow {
-          height: 12px;
-          width: 12px;
-          position: relative;
-          top: -1px;
-          left: 2px;
-          transition: transform 0.3s;
-          &.lx-icon-up {
-            transform: rotate(-180deg);
-          }
-        }
-      }
-    }
-
-    &.red &-head {
-      &-title {
-        color: #fa7570;
-
-        a {
-          color: #fa7570;
-        }
-      }
-    }
-
-    &.purple &-head {
-      &-title {
-        color: #9747ff;
-
-        a {
-          color: #9747ff;
-        }
-      }
-    }
-
-    &.blue &-head {
-      &-title {
-        color: #47e;
-
-        a {
-          color: #47e;
-        }
-      }
-    }
-
-    &-head + &-body {
-      margin-top: 4px;
-    }
-
-    &-head {
-      color: rgba(28, 36, 46, 0.75);
-    }
-
-    &-body {
-      color: rgba(28, 36, 46, 0.75);
-      &-subcontent {
-        border-top: 1px solid #f0f0f0;
-        margin-top: 6px;
-        padding: 4px 0;
-        animation: lxFadeIn .3s;
-      }
-      &-jump {
-        font-size: 12px;
-        animation: lxFadeIn .3s;
-      }
-    }
-  }
-
-  &-footer {
-    text-align: right;
-    border-top: 1px solid #e7e8ea;
-  }
-
-  &-empty {
-    text-align: center;
-    color: rgba(28, 36, 46, 0.45);
-  }
-
-  &-article {
-    // 内置文章样式
-    dt {
-      margin-bottom: 6px;
-      font-weight: 600;
-    }
-    li, p {
-      line-height: 30px;
-      padding: 2px 0;
-      margin: 0;
-    }
-    section {
-      padding: 6px;
-      background-color: rgba(161, 161, 161, 0.15);
-      border-radius: 4px;
-    }
-  }
-
-  &-sub-title {
-    background-color: rgba(28, 36, 46, 0.04);
-    color: rgba(28, 36, 46, 0.55);
-    height: 32px;
-    line-height: 32px;
-    padding: 0 16px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-size: 12px;
-  }
-
-  &-btn {
-    display: inline-block;
-    padding: 0 15px;
-    border: 1px solid rgba(28, 36, 46, 0.15);
-    border-radius: 4px;
-    height: 32px;
-    line-height: 30px;
-    color: #1c242e;
-    &:hover {
-      border-color: rgb(112, 158, 250);
-      color: rgb(112, 158, 250);
-    }
-    &-disabled {
-      cursor: not-allowed;
-      pointer-events: none;
-      &,
-      &:hover,
-      &:focus,
-      &:active {
-        border-color: #e5e5e5 !important;
-        color: rgba(28,36,46,0.65) !important;
-        background-color: #e5e5e5 !important;
-        opacity: 1;
-      }
-    }
-  }
-
-  &-btn&-btn-primary {
-    color: rgb(68, 119, 238);
-    background-color: rgb(68, 119, 238);
-    &,
-    &:hover {
-      color: white;
-    }
-    &:hover {
-      border-color: rgb(112, 158, 250);
-      background-color: rgb(112, 158, 250);
-    }
-  }
-
-  &-footer &-btn {
-    margin-left: 8px;
-  }
-}
+@import url('../../animation.less');
+
+.lx-drawer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  pointer-events: none;
+  overflow: hidden;
+
+  &.opening &-container {
+    animation: lxMoveOpen 0.3s;
+  }
+
+  &.closeing &-container {
+    animation: lxMoveClose 0.3s;
+    animation-fill-mode: forwards;
+  }
+
+  &.opening &-mask {
+    animation: lxFateIn 0.3s;
+    animation-fill-mode: forwards;
+  }
+
+  &.opening &-mask {
+    animation: lxFateOut 0.3s;
+    animation-fill-mode: forwards;
+  }
+
+  &-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.45);
+    overflow: hidden;
+    pointer-events: auto;
+  }
+
+  &-container {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 800px;
+    height: 100%;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    pointer-events: auto;
+    transition: all 0.3s;
+  }
+
+  &-container.error &-head,
+  &-container.red &-head {
+    background-color: #fa7570;
+    border-color: #fa7570;
+    color: #fff;
+  }
+
+  &-container.error &-body {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &-container.error &-code-desc {
+    padding: 12px 20px;
+    overflow-y: auto;
+    flex: 1;
+    font-size: 12px;
+    color: rgba(28, 36, 46, 0.75);
+  }
+
+  &-container.purple &-head {
+    background-color: #9747ff;
+    border-color: #9747ff;
+    color: #fff;
+  }
+
+  &-container.blue &-head {
+    background-color: #47e;
+    border-color: #47e;
+    color: #fff;
+  }
+
+  &-head {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #e7e8ea;
+
+    &-title {
+      flex: 1;
+    }
+
+    &-close {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+
+    &-title + &-extra {
+      margin-left: 16px;
+    }
+  }
+
+  &-head,
+  &-body,
+  &-footer {
+    padding: 12px 20px;
+  }
+
+  &-body {
+    color: rgba(28, 36, 46, 0.75);
+    flex: 1;
+    overflow-y: auto;
+    cursor: default;
+  }
+
+  &-group {
+    &-item + &-item {
+      margin-top: 20px;
+    }
+
+    &-item-head {
+      padding: 10px 12px;
+    }
+
+    &-item-body {
+      padding: 16px 12px;
+    }
+
+    &-item-head {
+      font-size: 16px;
+      font-weight: 500;
+      color: #1c242e;
+      background-color: #f9f9f9;
+    }
+
+    &-item-body {
+      font-size: 12px;
+      color: rgba(28, 36, 46, 0.55);
+    }
+
+    &-article + &-article {
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid #f0f0f0;
+    }
+
+    &-article {
+      color: rgba(28, 36, 46, 0.75);
+
+      &-title {
+        font-size: 13px;
+        color: #1c242e;
+        font-weight: 500;
+      }
+
+      &-author {
+        font-size: 12px;
+        color: rgba(28, 36, 46, 0.25);
+      }
+
+      &-content {
+        color: rgba(28, 36, 46, 0.55);
+        font-size: 12px;
+      }
+
+      &-author + &-content,
+      &-title + &-content {
+        margin-top: 8px;
+      }
+
+      &-extra {
+        float: right;
+      }
+    }
+  }
+
+  &-code-tabs {
+    flex: 1;
+
+    &.full {
+      height: 100%;
+      flex: 2;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &-head {
+      position: relative;
+      background-color: #fafafa;
+      height: 40px;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+
+      &-item {
+        position: relative;
+        color: rgba(28, 36, 46, 0.75);
+        height: 40px;
+        margin-right: 30px;
+        text-align: center;
+        line-height: 40px;
+        cursor: pointer;
+
+        &::before {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 0;
+          height: 2px;
+          transition: all 0.3s;
+          background-color: #47e;
+        }
+
+        &.active {
+          color: #47e;
+
+          &::before {
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    &-control {
+      position: absolute;
+      left: 50%;
+      top: -8px;
+      cursor: pointer;
+      transform: translateX(-50%);
+      width: 64px;
+      height: 16px;
+      line-height: 16px;
+      background: #e5e5e5;
+      border-radius: 6px 6px 6px 6px;
+      text-align: center;
+      z-index: 2;
+
+      &-icon {
+        width: 12px;
+        height: 12px;
+        color: rgba(28, 36, 46, 0.25);
+        display: inline-block;
+        vertical-align: middle;
+
+        &.flip {
+          transform: rotate(-180deg);
+          transition: all 0.3s;
+        }
+      }
+    }
+
+    &-body {
+      padding: 16px 20px;
+      overflow: auto;
+
+      img {
+        max-width: 100%;
+      }
+    }
+  }
+
+  &-err-item {
+    background: #fafafa;
+    padding: 8px 16px;
+    border-radius: 4px;
+    margin-bottom: 16px;
+
+    &-head {
+      display: flex;
+      align-items: center;
+
+      &-title {
+        margin-right: 8px;
+      }
+
+      &-cell {
+        flex: 1;
+      }
+
+      &-extra {
+        margin-left: 8px;
+        user-select: none;
+        &-arrow {
+          height: 12px;
+          width: 12px;
+          position: relative;
+          top: -1px;
+          left: 2px;
+          transition: transform 0.3s;
+          &.lx-icon-up {
+            transform: rotate(-180deg);
+          }
+        }
+      }
+    }
+
+    &.red &-head {
+      &-title {
+        color: #fa7570;
+
+        a {
+          color: #fa7570;
+        }
+      }
+    }
+
+    &.purple &-head {
+      &-title {
+        color: #9747ff;
+
+        a {
+          color: #9747ff;
+        }
+      }
+    }
+
+    &.blue &-head {
+      &-title {
+        color: #47e;
+
+        a {
+          color: #47e;
+        }
+      }
+    }
+
+    &-head + &-body {
+      margin-top: 4px;
+    }
+
+    &-head {
+      color: rgba(28, 36, 46, 0.75);
+    }
+
+    &-body {
+      color: rgba(28, 36, 46, 0.75);
+      &-subcontent {
+        border-top: 1px solid #f0f0f0;
+        margin-top: 6px;
+        padding: 4px 0;
+        animation: lxFadeIn .3s;
+      }
+      &-jump {
+        font-size: 12px;
+        animation: lxFadeIn .3s;
+      }
+    }
+  }
+
+  &-footer {
+    text-align: right;
+    border-top: 1px solid #e7e8ea;
+  }
+
+  &-empty {
+    text-align: center;
+    color: rgba(28, 36, 46, 0.45);
+  }
+
+  &-article {
+    // 内置文章样式
+    dt {
+      margin-bottom: 6px;
+      font-weight: 600;
+    }
+    li, p {
+      line-height: 30px;
+      padding: 2px 0;
+      margin: 0;
+    }
+    section {
+      padding: 6px;
+      background-color: rgba(161, 161, 161, 0.15);
+      border-radius: 4px;
+    }
+  }
+
+  &-sub-title {
+    background-color: rgba(28, 36, 46, 0.04);
+    color: rgba(28, 36, 46, 0.55);
+    height: 32px;
+    line-height: 32px;
+    padding: 0 16px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 12px;
+  }
+
+  &-btn {
+    display: inline-block;
+    padding: 0 15px;
+    border: 1px solid rgba(28, 36, 46, 0.15);
+    border-radius: 4px;
+    height: 32px;
+    line-height: 30px;
+    color: #1c242e;
+    &:hover {
+      border-color: rgb(112, 158, 250);
+      color: rgb(112, 158, 250);
+    }
+    &-disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        border-color: #e5e5e5 !important;
+        color: rgba(28,36,46,0.65) !important;
+        background-color: #e5e5e5 !important;
+        opacity: 1;
+      }
+    }
+  }
+
+  &-btn&-btn-primary {
+    color: rgb(68, 119, 238);
+    background-color: rgb(68, 119, 238);
+    &,
+    &:hover {
+      color: white;
+    }
+    &:hover {
+      border-color: rgb(112, 158, 250);
+      background-color: rgb(112, 158, 250);
+    }
+  }
+
+  &-footer &-btn {
+    margin-left: 8px;
+  }
+}