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

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

@@ -0,0 +1,133 @@
+/*
+ * @description: 输入框 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+@plugin "../../plugin/index";
+
+.@{componentPrefix}-input {
+  @ns: @{componentPrefix}-input;
+  @sizes: small, large;
+
+  // base
+  & {
+    .useIFlexRCC(0);
+    align-items: stretch; // 子元素撑满高度
+    .useBorderDft(5);
+    .useSizeDft(0, 0);
+    user-select: none;
+    width: 100%;
+    transition: all .3s;
+
+    &:focus-within {
+      border: solid 1px var(--pixel-color-primary);
+      box-shadow: 0 0 5px 0 var(--pixel-color-primary-light);
+    }
+
+    &:hover {
+      border: solid 1px var(--pixel-color-gray-dark);
+
+      .pixel-input-icon-close {
+        display: inline-block;
+      }
+    }
+  }
+
+  // element wrapper
+  .e(wrapper, {
+    .useIFlexRCC(7);
+    align-items: stretch;
+    width: 100%;
+    padding: 0 7px;
+  });
+
+  // element inner
+  .e(inner, {
+    flex: 1;
+    border: none;
+    background: transparent;
+    border-radius: inherit;
+    min-width: 100px;
+    font-size: inherit;
+    padding: 0;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--pixel-color-gray);
+    }
+
+    &[type="password"]::-ms-reveal {
+      display: none !important;
+    }
+  });
+
+  // element icon
+  .e(icon, {
+    flex: 0;
+    color: var(--pixel-color-gray-dark);
+    height: 100%;
+
+    .m(limit, {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      gap: 3px;
+      font-size: var(--pixel-font-size-small);
+
+      &[data-overflow = 'true'] {
+        color: red;
+      }
+    });
+  });
+
+  // ele slot
+  .e(slot, {
+    flex-shrink: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    background-color: var(--pixel-color-gray-deep-fade);
+    border-radius: inherit 0 0 inherit;
+    border-right: inherit;
+
+    .m(suffix, {
+      border-right: unset;
+      border-left: inherit;
+      border-radius: 0 inherit inherit 0;
+    });
+  });
+
+  // modifier size
+  each(@sizes, .(@size) {
+    & when (@size = small) {
+      .m(@size, {
+        .useSizeSmall(0, 0);
+      });
+    }
+
+    & when (@size = large) {
+      .m(@size, {
+        .useSizeLarge(0, 0);
+      });
+    }
+  });
+
+  // status disabled
+  .is(disabled, {
+    background-color: var(--pixel-color-gray-deep-fade);
+  });
+
+}
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,70 @@
+/*
+ * @description:  布局 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-layout {
+  @ns: @{componentPrefix}-layout;
+
+  // base
+  & {
+    .reset();
+
+    display: flex;
+    flex-direction: column;
+    background: var(--pixel-color-bg-page);
+    flex: auto;
+  }
+
+  .m(with-aider, {
+    flex-direction: row;
+  });
+}
+
+.@{componentPrefix}-layout__header {
+  @ns: @{componentPrefix}-layout__header;
+
+  // base
+  & {
+    height: var(--pixel-component-size-xxxl);
+    background-color: var(--pixel-color-bg-container);
+  }
+}
+
+.@{componentPrefix}-layout__content {
+  @ns: @{componentPrefix}-layout__content;
+
+  // base
+  & {
+    flex: auto;
+  }
+}
+
+.@{componentPrefix}-layout__aside {
+  @ns: @{componentPrefix}-layout__aside;
+
+  // base
+  & {
+    position: relative;
+    transition: all .2s;
+    background: var(--pixel-color-bg-container);
+    width: 232px;
+  }
+}
+
+.@{componentPrefix}-layout__footer {
+  @ns: @{componentPrefix}-layout__footer;
+
+  // base
+  & {
+    color: var(--pixel-color-text-placeholder);
+    padding: 24px;
+  }
+}
+
+
+
+
+
+

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

@@ -0,0 +1,73 @@
+/*
+ * @description: 链接 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-link {
+  @ns: @{componentPrefix}-link;
+  @types: primary, info, warning, danger;
+
+  & {
+    --pixel-link-font-color: var(--pixel-color-cyan);
+    --pixel-link-bg-color: var(--pixel-color-cyan-light);
+  }
+
+  // base
+  & {
+    .useIFlexRCC(3);
+
+    cursor: pointer;
+    text-decoration: none;
+    color: var(--pixel-link-font-color);
+
+    &:hover,
+    &:focus {
+      --pixel-link-font-color: var(--pixel-color-cyan-light);
+    }
+
+    &:active {
+      --pixel-link-font-color: var(--pixel-color-cyan);
+    }
+
+    &:after {
+      background-color: var(--pixel-link-bg-color);
+    }
+  }
+
+  // types
+  each(@types, .(@type) {
+    .m(@type, {
+      --pixel-link-font-color: getClrVar(@type);
+      &:hover,
+      &:focus {
+        --pixel-link-font-color: getClrVar(@type, light);
+      }
+      &:active {
+        --pixel-link-font-color: getClrVar(@type, dark);;
+      }
+      &:after {
+        --pixel-link-bg-color: getClrVar(@type, light);
+      }
+    })
+  });
+
+  // disabled
+  .is(disabled, {
+    --pixel-link-font-color: var(--pixel-color-cyan);
+    &:after {
+      --pixel-link-bg-color: transparent;
+    }
+
+  });
+
+  each(@types, .(@type) {
+    .mIs(@type, disabled, {
+      --pixel-link-font-color: getClrVar(@type);
+      &:after {
+        --pixel-link-bg-color: transparent;
+      }
+    });
+  });
+}
+

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

@@ -0,0 +1,146 @@
+/*
+ * @description:  菜单 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-menu {
+  @ns: @{componentPrefix}-menu;
+  @logo: @{componentPrefix}-menu__logo;
+  @scrollbar: @{componentPrefix}-scrollbar;
+
+  // base
+  & {
+    .reset();
+
+    position: relative;
+    width: 232px;
+    display: inline-block;
+    background: var(--pixel-color-bg-container);
+    transition: width .28s cubic-bezier(.645, .045, .355, 1);
+    white-space: nowrap;
+
+  }
+
+  // ele inner
+  .e(inner, {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .d(@ns, {
+      padding: var(--pixel-component-paddingTB-l) var(--pixel-component-paddingLR-s);
+      flex: 1;
+    });
+
+    .d(@logo, {
+      box-sizing: border-box;
+      width: 100%;
+      height: var(--pixel-component-size-xxxxl);
+      border-bottom: 1px solid var(--pixel-color-component-stroke);
+    });
+
+  });
+
+  .e(logo, {
+    display: flex;
+    align-items: center;
+
+    & > * {
+      margin-left: var(--pixel-component-margin-xxl);
+    }
+  });
+
+  .e(item, {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    text-overflow: ellipsis;
+    position: relative;
+    padding: 0 10px 0 16px;
+    height: var(--pixel-component-size-l);
+    line-height: var(--pixel-component-size-l);
+    border-bottom: 0;
+    text-align: left;
+    border-radius: var(--pixel-radius-default);
+    transition: background-color .28s cubic-bezier(.38, 0, .24, 1),
+    padding .28s cubic-bezier(.38, 0, .24, 1);
+    box-sizing: border-box;
+    color: var(--pixel-color-text-secondary);
+
+    .is(active, {
+      color: var(--pixel-color-brand-active);
+      background-color: var(--pixel-color-brand-fade);
+    });
+
+    &:hover:not(.is-active):not(.is-disabled) {
+      background: var(--pixel-color-bg-secondarycontainer-hover);
+    };
+
+    .is(opened, {
+      color: var(--pixel-color-brand-active);
+      //background-color: var(--pixel-color-brand-fade);
+    });
+  });
+
+  .e(content, {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  })
+}
+
+.@{componentPrefix}-head-menu {
+  @ns: @{componentPrefix}-head-menu;
+  @menu: @{componentPrefix}-menu;
+  @logo: @{componentPrefix}-menu__logo;
+  @operations: @{componentPrefix}-menu__operations;
+
+  // base
+  & {
+    .reset();
+
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+  }
+
+  // ele inner
+  .e(inner, {
+    display: flex;
+    height: var(--pixel-component-size-xxxl);
+
+    .d(@menu, {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    });
+
+    .d(@logo, {
+      height: 100%;
+      margin-right: var(--pixel-component-margin-xxxl);
+    });
+
+    .d(@operations, {
+      position: relative;
+      display: flex;
+      align-items: center;
+      height: var(--pixel-component-size-xxxl);
+      line-height: 64px;
+      text-align: right;
+      margin-right: var(--pixel-component-margin-s);
+      overflow: hidden;
+    });
+
+  });
+
+  .e(submenu, {
+    border-top: 1px solid var(--pixel-color-component-stroke);
+    padding-left: 0;
+  });
+
+}
+
+
+
+

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

@@ -0,0 +1,236 @@
+/*
+ * @description: 对话框 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+// message box
+.@{componentPrefix}-message-box {
+  @ns: @{componentPrefix}-message-box;
+  @types: success, info, warning, danger;
+
+  // base
+  & {
+    .useFlexRCC(5);
+    align-items: stretch;
+    .useBorderDft(3);
+    box-shadow: rgba(17, 17, 26, 0.05) 0 4px 16px, rgba(17, 17, 26, 0.05) 0 8px 32px;
+    outline: none;
+    padding: 10px 10px 15px;
+    font-size: var(--pixel-font-size-default);
+  }
+
+  // ele icon
+  .e(icon, {
+    height: 1.55em;
+  });
+  .e(inner, {
+    flex: 1;
+    overflow: hidden;
+  });
+}
+
+.@{componentPrefix}-message {
+  @ns: @{componentPrefix}-message;
+
+  //var
+  & {
+    --pixel-message-title-font-size: 18px;
+    --pixel-message-title-font-weight: bolder;
+    --pixel-message-title-icon-bg: transparent;
+    --pixel-message-gap: 15px;
+    --pixel-message-text-margin: 0;
+  }
+
+  // ele header;
+  .e(header, {
+    margin-bottom: var(--pixel-message-gap);
+    .m(default, {
+      .useFlexRCC(20);
+      justify-content: space-between;
+    });
+
+    .e(title, {
+      margin: 0;
+      font-weight: var(--pixel-message-title-font-weight);
+      font-size: var(--pixel-message-title-font-size) !important;
+
+      .filter-overflow();
+    });
+
+    .e(icon, {
+      border-radius: 5px;
+      outline: none;
+      color: var(--pixel-color-gray-dark);
+      padding: 5px;
+      background-color: var(--pixel-message-title-icon-bg);
+
+      &:hover,
+      &:focus {
+        --pixel-message-title-icon-bg: var(--pixel-color-gray-fade);
+      }
+    });
+
+  });
+
+  // ele body
+  .e(body, {
+    flex: 1;
+    font-size: inherit;
+  });
+
+  // ele text
+  .e(text, {
+    .filter-overflow();
+    margin-right: var(--pixel-message-text-margin);
+  });
+
+  // ele footer
+  .e(footer, {
+    margin-top: var(--pixel-message-gap);
+
+    .m(default, {
+      display: flex;
+      justify-content: flex-end;
+      gap: 5px;
+    })
+  });
+}
+
+
+// message-draggable-container
+.@{componentPrefix}-message-draggable-container {
+  @ns: @{componentPrefix}-message-draggable-container;
+  @box: @{componentPrefix}-message-box;
+  @inner: @{componentPrefix}-message;
+
+  position: fixed;
+  .d(@box, {
+    position: static !important;
+    .e(header, {
+      cursor: move;
+      user-select: none;
+    });
+  });
+}
+
+// message-container
+.@{componentPrefix}-message-container {
+  @ns: @{componentPrefix}-message-container;
+  @box: @{componentPrefix}-message-box;
+  @inner: @{componentPrefix}-message;
+  @types: success, info, warning, danger;
+
+  position: fixed;
+  transition: all .4s ease;
+
+  .d(@inner, {
+    --pixel-message-gap: 0;
+    --pixel-message-title-font-size: 12px;
+    --pixel-message-title-font-weight: normal;
+
+    .e(header, {
+      .useFlexRCC(5);
+
+      .e(icon, {
+        background-color: transparent;
+      })
+    });
+  });
+
+  .d(@box, {
+    padding: 5px 10px;
+    align-items: center;
+    box-shadow: none;
+
+    each(@types, .(@type) {
+      .m(@type, {
+        background-color: getClrVar(@type, fade);
+        border-color: getClrVar(@type, lighter);
+      })
+    })
+  });
+
+}
+
+// notify-container
+.@{componentPrefix}-notify-container {
+  @ns: @{componentPrefix}-notify-container;
+  @inner: @{componentPrefix}-message;
+
+  width: 300px;
+  transition: all .4s ease;
+
+  .d(@inner, {
+    --pixel-message-title-font-size: var(--pixel-font-size-default);
+    --pixel-message-text-margin: 10px;
+
+    .e(text, {
+      word-wrap: break-word;
+      white-space: break-spaces;
+    });
+  });
+
+}
+
+// confirm-container
+.@{componentPrefix}-confirm-container {
+  @ns: @{componentPrefix}-confirm-container;
+  @box: @{componentPrefix}-message-box;
+  @inner: @{componentPrefix}-message;
+
+  // base
+  & {
+    // 全屏 & 元素居中
+    .useModal();
+    .useFlexRCC();
+  }
+
+  .d(@box, {
+    min-width: 280px;
+    max-width: 400px;
+    position: absolute;
+  });
+
+  .d(@inner, {
+    --pixel-message-text-margin: 25px;
+    .e(text, {
+      word-wrap: break-word;
+      white-space: break-spaces;
+    });
+  });
+
+}
+
+.pos-top-right {
+  position: fixed;
+  top: 0;
+  right: 20px;
+}
+
+.pos-top-left {
+  position: fixed;
+  top: 0;
+  left: 20px;
+}
+
+.pos-bottom-right {
+  position: fixed;
+  right: 20px;
+  bottom: 0;
+}
+
+.pos-bottom-left {
+  position: fixed;
+  left: 20px;
+  bottom: 0;
+}
+
+.pos-top-center {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+

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

@@ -0,0 +1,22 @@
+/*
+ * @description: 气泡确认框 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-popconfirm {
+  @ns: @{componentPrefix}-popconfirm;
+
+  // base
+  & {
+    min-width: 200px;
+    padding: 0;
+    white-space: unset;
+  }
+;
+  .e(inner, {
+    background-color: inherit;
+    border: none;
+  });
+}
+