@qi-tian-da-sheng/bin-project-ui 1.0.0

package/packages/styles/components/tag/_index.less

@@ -0,0 +1,83 @@
+/*
+ * @description: 标签 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-tag {
+  @ns: @{componentPrefix}-tag;
+  @types: success, info, warning, danger, primary;
+
+  // base
+  & {
+    .useFlexRCC(7);
+    .useBorderDft(4);
+    .useSizeSmall(6, 6);
+
+    color: var(--pixel-color-cyan);
+    background-color: var(--pixel-color-cyan-fade);
+
+    .e(icon, {
+      border-radius: 50%;
+      padding: 2px;
+      font-size: 12px;
+
+      &:hover {
+        background-color: var(--pixel-color-cyan);
+        color: white;
+      }
+    });
+  }
+
+  // theme default
+  .m(dark, {
+    background-color: var(--pixel-color-cyan);
+    color: var(--pixel-color-white);
+
+    .e(icon, {
+      &:hover {
+        background-color: var(--pixel-color-gray-dark);
+      }
+    }, @ns);
+  });
+
+  .m(light, {
+    border-color: var(--pixel-color-cyan-fade);
+    background-color: var(--pixel-color-bg);
+  });
+
+  // size
+  .m(small, {
+    .useSizeMini(5, 5);
+  });
+
+  .m(large, {
+    .useSizeDft(7, 7);
+  });
+
+  // type
+  each(@types, .(@type) {
+    .m(@type, {
+      color: getClrVar(@type);
+      background-color: getClrVar(@type, fade);
+
+      & .@{ns}__icon:hover {
+        color: var(--pixel-color-white);
+        background-color: getClrVar(@type);
+      }
+      &.@{ns}--dark {
+        color: var(--pixel-color-white);
+        background-color: getClrVar(@type);
+
+        .@{ns}__icon:hover {
+          background-color: var(--pixel-color-gray-dark);
+        }
+      }
+
+      &.@{ns}--light {
+        border-color: getClrVar(@type, lighter);
+        background-color: var(--pixel-color-bg);
+      }
+    });
+  });
+}

package/packages/styles/components/tooltip/_index.less

@@ -0,0 +1,22 @@
+/*
+ * @description: 文字提示 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-tooltip {
+  @ns: @{componentPrefix}-tooltip;
+
+  font-size: var(--pixel-font-size-small);
+
+  .m(dark, {
+    color: rgb(237, 237, 237);
+    background: rgb(23, 23, 23);
+  });
+
+  .m(light, {
+    color: rgb(23, 23, 23);
+    background: rgb(250, 250, 250);
+  })
+}
+

package/packages/styles/extra/_index.less

@@ -0,0 +1,6 @@
+/*
+ * @description: UI 组件其它样式
+ * @author: MC.Yang
+ */
+@import "mark";
+@import "alert";

package/packages/styles/extra/alert.less

@@ -0,0 +1,26 @@
+.p-alert {
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  color: red;
+  font-size: 13px;
+  transition: all .3s ease;
+  line-height: 1.2em !important;
+
+  opacity: 0;
+  user-select: none;
+  transform: translateY(-15px);
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  & > *:first-child {
+    margin-right: 5px;
+  }
+
+  & * {
+    color: inherit;
+    font-size: inherit;
+  }
+}

package/packages/styles/extra/mark.less

@@ -0,0 +1,23 @@
+.p-mark--cover {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  border: none;
+  display: none;
+}
+
+.p-mark--part {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  border: none;
+  display: none;
+}

package/packages/styles/global.less

@@ -0,0 +1,12 @@
+/*
+ * @description: UI 组件全局样式
+ * @author: MC.Yang
+ */
+@import "animate.css";
+@import "theme/_index";
+@import "icons/iconfont.css";
+
+@import "components/_index";
+@import "mixn/_index";
+@import "animation/_index";
+@import "extra/_index";

package/packages/styles/icons/iconfont.css

@@ -0,0 +1,411 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4701700 */
+  src: url('iconfont.woff2?t=1728182726311') format('woff2'),
+       url('iconfont.woff?t=1728182726311') format('woff'),
+       url('iconfont.ttf?t=1728182726311') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.pixel-close-2:before {
+  content: "\e633";
+}
+
+.pixel-close:before {
+  content: "\e623";
+}
+
+.pixel-format-brush:before {
+  content: "\e60d";
+}
+
+.pixel-format-brush-1:before {
+  content: "\e607";
+}
+
+.pixel-alike:before {
+  content: "\e629";
+}
+
+.pixel-bottom-align:before {
+  content: "\e718";
+}
+
+.pixel-top-align:before {
+  content: "\e719";
+}
+
+.pixel-left-align:before {
+  content: "\e71a";
+}
+
+.pixel-right-align:before {
+  content: "\e71b";
+}
+
+.pixel-level-isometric-alignment:before {
+  content: "\e6e4";
+}
+
+.pixel-vertical-isometric-alignment:before {
+  content: "\e6e5";
+}
+
+.pixel-vertical-centering:before {
+  content: "\e61b";
+}
+
+.pixel-horizontal-centering:before {
+  content: "\e61c";
+}
+
+.pixel-collect:before {
+  content: "\e661";
+}
+
+.pixel-email:before {
+  content: "\e663";
+}
+
+.pixel-top:before {
+  content: "\e63c";
+}
+
+.pixel-bottom:before {
+  content: "\e63d";
+}
+
+.pixel-left:before {
+  content: "\e63e";
+}
+
+.pixel-loading-1:before {
+  content: "\e644";
+}
+
+.pixel-edit-1:before {
+  content: "\e8cf";
+}
+
+.pixel-home:before {
+  content: "\e61d";
+}
+
+.pixel-danger:before {
+  content: "\e96d";
+}
+
+.pixel-open-folder:before {
+  content: "\e64e";
+}
+
+.pixel-open-folder-1:before {
+  content: "\ebdf";
+}
+
+.pixel-tags:before {
+  content: "\e7e5";
+}
+
+.pixel-remove:before {
+  content: "\e603";
+}
+
+.pixel-folder:before {
+  content: "\ec17";
+}
+
+.pixel-add:before {
+  content: "\e621";
+}
+
+.pixel-remove-1:before {
+  content: "\e66e";
+}
+
+.pixel-right:before {
+  content: "\e627";
+}
+
+.pixel-search-1:before {
+  content: "\e683";
+}
+
+.pixel-logout:before {
+  content: "\e651";
+}
+
+.pixel-search-2:before {
+  content: "\ec4c";
+}
+
+.pixel-eye-slash:before {
+  content: "\e7ec";
+}
+
+.pixel-eye:before {
+  content: "\e7ed";
+}
+
+.pixel-tag-2:before {
+  content: "\e7f0";
+}
+
+.pixel-lock-2:before {
+  content: "\e7fb";
+}
+
+.pixel-lock-3:before {
+  content: "\e619";
+}
+
+.pixel-other-1:before {
+  content: "\e714";
+}
+
+.pixel-success:before {
+  content: "\e72d";
+}
+
+.pixel-top-1:before {
+  content: "\e622";
+}
+
+.pixel-right-1:before {
+  content: "\e625";
+}
+
+.pixel-bottom-1:before {
+  content: "\e624";
+}
+
+.pixel-left-1:before {
+  content: "\e626";
+}
+
+.pixel-edit-user:before {
+  content: "\e6c5";
+}
+
+.pixel-top-2:before {
+  content: "\e653";
+}
+
+.pixel-download:before {
+  content: "\e660";
+}
+
+.pixel-left-2:before {
+  content: "\e68d";
+}
+
+.pixel-edit:before {
+  content: "\e646";
+}
+
+.pixel-search:before {
+  content: "\e6f7";
+}
+
+.pixel-loading-2:before {
+  content: "\e891";
+}
+
+.pixel-unlock-2:before {
+  content: "\e759";
+}
+
+.pixel-info-1:before {
+  content: "\e6de";
+}
+
+.pixel-unlock-1:before {
+  content: "\e61e";
+}
+
+.pixel-edit-2:before {
+  content: "\e63f";
+}
+
+.pixel-warning-1:before {
+  content: "\e65c";
+}
+
+.pixel-other-2:before {
+  content: "\e61a";
+}
+
+.pixel-time:before {
+  content: "\e662";
+}
+
+.pixel-danger-3:before {
+  content: "\e602";
+}
+
+.pixel-download-1:before {
+  content: "\e604";
+}
+
+.pixel-upload:before {
+  content: "\e62c";
+}
+
+.pixel-home-1:before {
+  content: "\e605";
+}
+
+.pixel-lock-1:before {
+  content: "\e639";
+}
+
+.pixel-add-user:before {
+  content: "\e61f";
+}
+
+.pixel-email-1:before {
+  content: "\e66f";
+}
+
+.pixel-minus-circle:before {
+  content: "\e678";
+}
+
+.pixel-success-1:before {
+  content: "\e67f";
+}
+
+.pixel-user-1:before {
+  content: "\e682";
+}
+
+.pixel-minus-bold:before {
+  content: "\e686";
+}
+
+.pixel-success-filling:before {
+  content: "\e68b";
+}
+
+.pixel-remove-3:before {
+  content: "\e7ea";
+}
+
+.pixel-time-1:before {
+  content: "\e7eb";
+}
+
+.pixel-collect-1:before {
+  content: "\e665";
+}
+
+.pixel-danger-2:before {
+  content: "\e8ba";
+}
+
+.pixel-remove-user:before {
+  content: "\e64f";
+}
+
+.pixel-bottom-2:before {
+  content: "\e72e";
+}
+
+.pixel-danger-1:before {
+  content: "\e610";
+}
+
+.pixel-search-user:before {
+  content: "\e600";
+}
+
+.pixel-add-1:before {
+  content: "\e601";
+}
+
+.pixel-loading:before {
+  content: "\e62b";
+}
+
+.pixel-lock:before {
+  content: "\e62d";
+}
+
+.pixel-tag:before {
+  content: "\e64d";
+}
+
+.pixel-unlock:before {
+  content: "\e655";
+}
+
+.pixel-info:before {
+  content: "\e771";
+}
+
+.pixel-warning:before {
+  content: "\ea48";
+}
+
+.pixel-tag-1:before {
+  content: "\e66c";
+}
+
+.pixel-custom-user:before {
+  content: "\e632";
+}
+
+.pixel-edit-3:before {
+  content: "\e620";
+}
+
+.pixel-remove-2:before {
+  content: "\e62f";
+}
+
+.pixel-other:before {
+  content: "\e631";
+}
+
+.pixel-other-3:before {
+  content: "\e7bc";
+}
+
+.pixel-time-2:before {
+  content: "\e67b";
+}
+
+.pixel-add-3:before {
+  content: "\e635";
+}
+
+.pixel-collect-2:before {
+  content: "\e60c";
+}
+
+.pixel-close-1:before {
+  content: "\e6ac";
+}
+
+.pixel-close-3:before {
+  content: "\e6b9";
+}
+
+.pixel-upload-1:before {
+  content: "\e606";
+}
+
+.pixel-right-2:before {
+  content: "\e62e";
+}
+
+.pixel-user:before {
+  content: "\e677";
+}
+