n20-common-lib 1.3.3 → 1.3.6

package/src/assets/css/plain-text.scss

@@ -1,138 +1,138 @@
-$--md: 1440px;
-
-.plain-text {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  border: 1px solid #eeeeee;
-
-  .plain-text-item {
-    display: flex;
-    padding-top: 12px;
-    padding-bottom: 12px;
-    align-items: center;
-
-
-    .plain-text-item-label {
-      flex: 30%;
-      text-align: right;
-      color: $--color-text-regular;
-      padding-right: 22px;
-    }
-
-    .plain-text-item-content {
-      flex: 70%;
-      color: $--color-text-primary;
-      padding-left: 22px;
-    }
-  }
-}
-
-@media only screen and (max-width: $--md) {
-  .plain-text-item {
-    flex: 49%;
-    max-width: 50%;
-
-    .after-color {
-      width: 250px;
-      height: 24px;
-      line-height: 24px;
-      padding-left: 2px;
-      margin-bottom: 4px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background-color: rgba(22, 119, 255, 0.1);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-    }
-
-    .before-color {
-      width: 250px;
-      height: 24px;
-      line-height: 24px;
-      padding-left: 2px;
-      text-decoration: line-through;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background-color: rgba(255, 59, 48, 0.1)
-    }
-
-    &:nth-of-type(odd) {
-      border-right: 1px solid #eeeeee;
-    }
-  }
-
-  .plain-text-item:last-of-type {}
-
-  .plain-text:nth-child(even) {
-    border-right: 1px solid #eeeeee;
-  }
-
-  .plain-text-item:nth-child(4n-1) {
-    background-color: rgba(0, 122, 255, 0.05);
-  }
-
-  .plain-text-item:nth-child(4n) {
-    background-color: rgba(0, 122, 255, 0.05);
-  }
-}
-
-@media only screen and (min-width: $--md + 1px) {
-  .plain-text-item {
-    flex: 33%;
-    max-width: 33%;
-
-    .after-color {
-      min-width: 200px;
-      max-width: 280px;
-      width: 100%;
-      height: 24px;
-      line-height: 24px;
-      padding-left: 2px;
-      margin-bottom: 4px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background-color: rgba(22, 119, 255, 0.1);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-    }
-
-    .before-color {
-      min-width: 200px;
-      max-width: 280px;
-      width: 100%;
-      height: 24px;
-      line-height: 24px;
-      padding-left: 2px;
-      text-decoration: line-through;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background-color: rgba(255, 59, 48, 0.1)
-    }
-
-    &:nth-of-type(3n-1) {
-      border-right: 1px solid #eeeeee;
-      border-left: 1px solid #eeeeee;
-    }
-  }
-
-  .plain-text-item:nth-child(6n) {
-    background-color: rgba(0, 122, 255, 0.05);
-  }
-
-  .plain-text-item:nth-child(6n-1) {
-    background-color: rgba(0, 122, 255, 0.05);
-  }
-
-  .plain-text-item:nth-child(6n-2) {
-    background-color: rgba(0, 122, 255, 0.05);
-  }
+$--md: 1440px;
+
+.plain-text {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  border: 1px solid #eeeeee;
+
+  .plain-text-item {
+    display: flex;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    align-items: center;
+
+
+    .plain-text-item-label {
+      flex: 30%;
+      text-align: right;
+      color: $--color-text-regular;
+      padding-right: 22px;
+    }
+
+    .plain-text-item-content {
+      flex: 70%;
+      color: $--color-text-primary;
+      padding-left: 22px;
+    }
+  }
+}
+
+@media only screen and (max-width: $--md) {
+  .plain-text-item {
+    flex: 49%;
+    max-width: 50%;
+
+    .after-color {
+      width: 250px;
+      height: 24px;
+      line-height: 24px;
+      padding-left: 2px;
+      margin-bottom: 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      background-color: rgba(22, 119, 255, 0.1);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+    }
+
+    .before-color {
+      width: 250px;
+      height: 24px;
+      line-height: 24px;
+      padding-left: 2px;
+      text-decoration: line-through;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      background-color: rgba(255, 59, 48, 0.1)
+    }
+
+    &:nth-of-type(odd) {
+      border-right: 1px solid #eeeeee;
+    }
+  }
+
+  .plain-text-item:last-of-type {}
+
+  .plain-text:nth-child(even) {
+    border-right: 1px solid #eeeeee;
+  }
+
+  .plain-text-item:nth-child(4n-1) {
+    background-color: rgba(0, 122, 255, 0.05);
+  }
+
+  .plain-text-item:nth-child(4n) {
+    background-color: rgba(0, 122, 255, 0.05);
+  }
+}
+
+@media only screen and (min-width: $--md + 1px) {
+  .plain-text-item {
+    flex: 33%;
+    max-width: 33%;
+
+    .after-color {
+      min-width: 200px;
+      max-width: 280px;
+      width: 100%;
+      height: 24px;
+      line-height: 24px;
+      padding-left: 2px;
+      margin-bottom: 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      background-color: rgba(22, 119, 255, 0.1);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+    }
+
+    .before-color {
+      min-width: 200px;
+      max-width: 280px;
+      width: 100%;
+      height: 24px;
+      line-height: 24px;
+      padding-left: 2px;
+      text-decoration: line-through;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      background-color: rgba(255, 59, 48, 0.1)
+    }
+
+    &:nth-of-type(3n-1) {
+      border-right: 1px solid #eeeeee;
+      border-left: 1px solid #eeeeee;
+    }
+  }
+
+  .plain-text-item:nth-child(6n) {
+    background-color: rgba(0, 122, 255, 0.05);
+  }
+
+  .plain-text-item:nth-child(6n-1) {
+    background-color: rgba(0, 122, 255, 0.05);
+  }
+
+  .plain-text-item:nth-child(6n-2) {
+    background-color: rgba(0, 122, 255, 0.05);
+  }
 }

package/src/assets/css/rootvar.scss

@@ -1,139 +1,139 @@
-@import './element-variables.scss';
-$--color-FFBF00: #ffbf00;
-
-:root {
-  // Color
-  --color-primary: #{$--color-primary};
-  --color-white: #{$--color-white};
-  --color-black: #{$--color-black};
-  --color-primary-light-1: #{$--color-primary-light-1};
-  --color-primary-light-2: #{$--color-primary-light-2};
-  --color-primary-light-3: #{$--color-primary-light-3};
-  --color-primary-light-4: #{$--color-primary-light-4};
-  --color-primary-light-5: #{$--color-primary-light-5};
-  --color-primary-light-6: #{$--color-primary-light-6};
-  --color-primary-light-7: #{$--color-primary-light-7};
-  --color-primary-light-8: #{$--color-primary-light-8};
-  --color-primary-light-9: #{$--color-primary-light-9};
-  --color-success: #{$--color-success};
-  --color-warning: #{$--color-warning};
-  --color-danger: #{$--color-danger};
-  --color-info: #{$--color-info};
-  --color-success-light: #{$--color-success-light};
-  --color-warning-light: #{$--color-warning-light};
-  --color-danger-light: #{$--color-danger-light};
-  --color-info-light: #{$--color-info-light};
-  --color-success-lighter: #{$--color-success-lighter};
-  --color-warning-lighter: #{$--color-warning-lighter};
-  --color-danger-lighter: #{$--color-danger-lighter};
-  --color-info-lighter: #{$--color-info-lighter};
-  --button-disabled-background-color: #{$--button-disabled-background-color};
-
-  --color-mask: #{rgba($--color-black, 0.45)};
-
-  --color-primary-hover: #{$--color-primary-hover};
-  --color-success-hover: #{$--color-success-hover};
-  --color-warning-hover: #{$--color-warning-hover};
-  --color-danger-hover: #{$--color-danger-hover};
-  --color-info-hover: #{$--color-info-hover};
-
-  --color-primary-01: #{rgba($--color-primary, 0.1)};
-  --color-primary-04: #{rgba($--color-primary, 0.4)};
-
-  --color-warning-01: #{rgba($--color-warning, 0.1)};
-  --color-warning-04: #{rgba($--color-warning, 0.4)};
-
-  --color-FFBF00: #{$--color-FFBF00};
-  --color-FFBF00-hover: #{mix($--color-black, $--color-FFBF00, 10%)};
-  --color-FFBF00-01: #{rgba($--color-FFBF00, 0.1)};
-  --color-FFBF00-04: #{rgba($--color-FFBF00, 0.4)};
-
-  --color-success-01: #{rgba($--color-success, 0.1)};
-  --color-success-04: #{rgba($--color-success, 0.4)};
-
-  // Text
-  --color-text-primary: #{$--color-text-primary};
-  --color-text-regular: #{$--color-text-regular};
-  --color-text-secondary: #{$--color-text-secondary};
-  --color-text-placeholder: #{$--color-text-placeholder};
-  // Border
-  --border-color-base: #{$--border-color-base};
-  --border-color-light: #{$--border-color-light};
-  --table-row-hover-background-color: #{$--table-row-hover-background-color};
-  --border-color-lighter: #{$--border-color-lighter};
-  --border-color-extra-light: #{$--border-color-extra-light};
-  // Background
-  --background-color-base: #{$--background-color-base};
-  --button-default-border-color: #{$--button-default-border-color};
-  // Link
-  --link-color: #{$--link-color};
-  --link-hover-color: #{$--link-hover-color};
-  // fontSize
-  --font-family-pingfang: 'Pingfang SC';
-  --font-family-yahei: 'Microsoft YaHe';
-  --font-size-extra-large: #{$--font-size-extra-large};
-  --font-size-large: #{$--font-size-large};
-  --font-size-medium: #{$--font-size-medium};
-  --font-size-base: #{$--font-size-base};
-  --font-size-small: #{$--font-size-small};
-  --font-size-extra-small: #{$--font-size-extra-small};
-  // fontWeight
-  --font-weight-bold: #{$--font-weight-bold};
-  --font-weight-primary: #{$--font-weight-primary};
-  --font-weight-secondary: #{$--font-weight-secondary};
-  // fontLineHeight
-  --font-line-height-primary: #{$--font-line-height-primary};
-  --font-line-height-secondary: #{$--font-line-height-secondary};
-  --font-color-disabled-base: #{$--font-color-disabled-base};
-  // Size
-  --size-base: #{$--size-base};
-  // Icon
-  --icon-color: #{$--icon-color};
-  --icon-color-base: #{$--icon-color-base};
-  // Radius
-  --border-radius-base: #{$--border-radius-base};
-
-  // line-height
-  --line-height-16: 16px;
-  --line-height-18: 18px;
-  --line-height-22: 22px;
-  --line-height-24: 24px;
-  --line-height-28: 28px;
-  --line-height-32: 32px;
-
-  --background-linear-gradient: linear-gradient(
-    to bottom right,
-    #{mix($--color-white, $--color-primary, 8.5%)},
-    #{$--color-primary}
-  );
-  --color-success-linear-gradient: linear-gradient(
-    to bottom right,
-    #{mix($--color-white, $--color-success, 8.5%)},
-    #{$--color-success}
-  );
-  --color-FFBF00-linear-gradient: linear-gradient(
-    to bottom right,
-    #{mix($--color-white, $--color-FFBF00, 8.5%)},
-    #{$--color-FFBF00}
-  );
-  --color-warning-linear-gradient: linear-gradient(
-    to bottom right,
-    #{mix($--color-white, $--color-warning, 8.5%)},
-    #{$--color-warning}
-  );
-
-  --color-F48393: #f48393;
-  --color-F4CC7A: #f4cc7a;
-  --color-63D9AE: #63d9ae;
-  --color-73A0FA: #73a0fa;
-  --color-83D0EF: #83d0ef;
-  --color-BEE56F: #bee56f;
-  --color-EADF72: #eadf72;
-  --color-F1B688: #f1b688;
-  --color-F9C0B5: #f9c0b5;
-  --color-F49583: #f49583;
-  --color-EC5E5E: #ec5e5e;
-  --color-AE89E0: #ae89e0;
-  --color-5F5CD2: #5f5cd2;
-  --color-7585A2: #7585a2;
-}
+@import './element-variables.scss';
+$--color-FFBF00: #ffbf00;
+
+:root {
+  // Color
+  --color-primary: #{$--color-primary};
+  --color-white: #{$--color-white};
+  --color-black: #{$--color-black};
+  --color-primary-light-1: #{$--color-primary-light-1};
+  --color-primary-light-2: #{$--color-primary-light-2};
+  --color-primary-light-3: #{$--color-primary-light-3};
+  --color-primary-light-4: #{$--color-primary-light-4};
+  --color-primary-light-5: #{$--color-primary-light-5};
+  --color-primary-light-6: #{$--color-primary-light-6};
+  --color-primary-light-7: #{$--color-primary-light-7};
+  --color-primary-light-8: #{$--color-primary-light-8};
+  --color-primary-light-9: #{$--color-primary-light-9};
+  --color-success: #{$--color-success};
+  --color-warning: #{$--color-warning};
+  --color-danger: #{$--color-danger};
+  --color-info: #{$--color-info};
+  --color-success-light: #{$--color-success-light};
+  --color-warning-light: #{$--color-warning-light};
+  --color-danger-light: #{$--color-danger-light};
+  --color-info-light: #{$--color-info-light};
+  --color-success-lighter: #{$--color-success-lighter};
+  --color-warning-lighter: #{$--color-warning-lighter};
+  --color-danger-lighter: #{$--color-danger-lighter};
+  --color-info-lighter: #{$--color-info-lighter};
+  --button-disabled-background-color: #{$--button-disabled-background-color};
+
+  --color-mask: #{rgba($--color-black, 0.45)};
+
+  --color-primary-hover: #{$--color-primary-hover};
+  --color-success-hover: #{$--color-success-hover};
+  --color-warning-hover: #{$--color-warning-hover};
+  --color-danger-hover: #{$--color-danger-hover};
+  --color-info-hover: #{$--color-info-hover};
+
+  --color-primary-01: #{rgba($--color-primary, 0.1)};
+  --color-primary-04: #{rgba($--color-primary, 0.4)};
+
+  --color-warning-01: #{rgba($--color-warning, 0.1)};
+  --color-warning-04: #{rgba($--color-warning, 0.4)};
+
+  --color-FFBF00: #{$--color-FFBF00};
+  --color-FFBF00-hover: #{mix($--color-black, $--color-FFBF00, 10%)};
+  --color-FFBF00-01: #{rgba($--color-FFBF00, 0.1)};
+  --color-FFBF00-04: #{rgba($--color-FFBF00, 0.4)};
+
+  --color-success-01: #{rgba($--color-success, 0.1)};
+  --color-success-04: #{rgba($--color-success, 0.4)};
+
+  // Text
+  --color-text-primary: #{$--color-text-primary};
+  --color-text-regular: #{$--color-text-regular};
+  --color-text-secondary: #{$--color-text-secondary};
+  --color-text-placeholder: #{$--color-text-placeholder};
+  // Border
+  --border-color-base: #{$--border-color-base};
+  --border-color-light: #{$--border-color-light};
+  --table-row-hover-background-color: #{$--table-row-hover-background-color};
+  --border-color-lighter: #{$--border-color-lighter};
+  --border-color-extra-light: #{$--border-color-extra-light};
+  // Background
+  --background-color-base: #{$--background-color-base};
+  --button-default-border-color: #{$--button-default-border-color};
+  // Link
+  --link-color: #{$--link-color};
+  --link-hover-color: #{$--link-hover-color};
+  // fontSize
+  --font-family-pingfang: 'Pingfang SC';
+  --font-family-yahei: 'Microsoft YaHe';
+  --font-size-extra-large: #{$--font-size-extra-large};
+  --font-size-large: #{$--font-size-large};
+  --font-size-medium: #{$--font-size-medium};
+  --font-size-base: #{$--font-size-base};
+  --font-size-small: #{$--font-size-small};
+  --font-size-extra-small: #{$--font-size-extra-small};
+  // fontWeight
+  --font-weight-bold: #{$--font-weight-bold};
+  --font-weight-primary: #{$--font-weight-primary};
+  --font-weight-secondary: #{$--font-weight-secondary};
+  // fontLineHeight
+  --font-line-height-primary: #{$--font-line-height-primary};
+  --font-line-height-secondary: #{$--font-line-height-secondary};
+  --font-color-disabled-base: #{$--font-color-disabled-base};
+  // Size
+  --size-base: #{$--size-base};
+  // Icon
+  --icon-color: #{$--icon-color};
+  --icon-color-base: #{$--icon-color-base};
+  // Radius
+  --border-radius-base: #{$--border-radius-base};
+
+  // line-height
+  --line-height-16: 16px;
+  --line-height-18: 18px;
+  --line-height-22: 22px;
+  --line-height-24: 24px;
+  --line-height-28: 28px;
+  --line-height-32: 32px;
+
+  --background-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-primary, 8.5%)},
+    #{$--color-primary}
+  );
+  --color-success-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-success, 8.5%)},
+    #{$--color-success}
+  );
+  --color-FFBF00-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-FFBF00, 8.5%)},
+    #{$--color-FFBF00}
+  );
+  --color-warning-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-warning, 8.5%)},
+    #{$--color-warning}
+  );
+
+  --color-F48393: #f48393;
+  --color-F4CC7A: #f4cc7a;
+  --color-63D9AE: #63d9ae;
+  --color-73A0FA: #73a0fa;
+  --color-83D0EF: #83d0ef;
+  --color-BEE56F: #bee56f;
+  --color-EADF72: #eadf72;
+  --color-F1B688: #f1b688;
+  --color-F9C0B5: #f9c0b5;
+  --color-F49583: #f49583;
+  --color-EC5E5E: #ec5e5e;
+  --color-AE89E0: #ae89e0;
+  --color-5F5CD2: #5f5cd2;
+  --color-7585A2: #7585a2;
+}

package/src/assets/css/select.scss

@@ -1,26 +1,26 @@
-.el-select.remote-icon-auto {
-  .el-select__caret {
-    &::before {
-         content: '\E6E1';
-     }
-  }
-  .is-focus {
-    .el-select__caret {
-        transform: rotate(0deg);
-    }
-  }
-}
-.el-select.remote-icon {
-  .el-select__caret {
-    &::before {
-         content: '\E6E1';
-     }
-  }
-  &.remote-icon-expand {
-    .is-focus {
-      .el-select__caret {
-          transform: rotate(0deg);
-      }
-    }
-  }
+.el-select.remote-icon-auto {
+  .el-select__caret {
+    &::before {
+         content: '\E6E1';
+     }
+  }
+  .is-focus {
+    .el-select__caret {
+        transform: rotate(0deg);
+    }
+  }
+}
+.el-select.remote-icon {
+  .el-select__caret {
+    &::before {
+         content: '\E6E1';
+     }
+  }
+  &.remote-icon-expand {
+    .is-focus {
+      .el-select__caret {
+          transform: rotate(0deg);
+      }
+    }
+  }
 }

package/src/assets/css/title-pop.scss

@@ -1,23 +1,23 @@
-
-.el-popover.n20-title-pop{
-  background-color: #303133;
-  min-width: auto;
-  color: $--color-white;
-  padding: 6px;
-}
-
-.n20-title-pop[x-placement^=left] .popper__arrow::after {
-  border-left-color: #303133;
-}
-
-.n20-title-pop[x-placement^=right] .popper__arrow::after {
-  border-right-color: #303133;
-}
-
-.n20-title-pop[x-placement^=bottom] .popper__arrow::after {
-  border-bottom-color: #303133;
-}
-
-.n20-title-pop[x-placement^=top] .popper__arrow::after {
-  border-top-color: #303133;
-}
+
+.el-popover.n20-title-pop{
+  background-color: #303133;
+  min-width: auto;
+  color: $--color-white;
+  padding: 6px;
+}
+
+.n20-title-pop[x-placement^=left] .popper__arrow::after {
+  border-left-color: #303133;
+}
+
+.n20-title-pop[x-placement^=right] .popper__arrow::after {
+  border-right-color: #303133;
+}
+
+.n20-title-pop[x-placement^=bottom] .popper__arrow::after {
+  border-bottom-color: #303133;
+}
+
+.n20-title-pop[x-placement^=top] .popper__arrow::after {
+  border-top-color: #303133;
+}