@phelan/design 0.0.1

package/packages/styles/src/calendar.scss

@@ -0,0 +1,327 @@
+.m-calendar {
+    --m-calendar-color-black: var(--el-text-color-black, #101316);
+    --m-calendar-color-font: var(--el-text-color-regular, #343d46);
+    --m-calendar-colro-border: #E6EBF4;
+
+    --m-calendar-color-task-bg: #eaf2fe; // 默认选中
+
+    --m-calendar-color-task-brand: var(--el-color-primary, #0d3a93); // 品牌色
+
+    --m-calendar-color-mix-font: var(--el-text-color-secondary, #71777e);
+    --m-calendar-color-mix-background: #f5f5f6; //混合任务背景色
+
+    --m-calendar-color-font-prev: #c2c5c7; // 上个月字体颜色
+    --m-calendar-color-font-next: #c2c5c7; // 下个月字体颜色
+
+    // 任务样式配置
+    --m-calendar-task-border-radius: 4px; // 任务圆角大小
+    --m-calendar-task-brand-bar-width: 6px; // 品牌色竖条宽度
+    --m-calendar-task-brand-bar-border-radius: 2px; // 品牌色竖条圆角
+
+    // 任务位置边距配置
+    --m-calendar-task-margin-left: 1px; //左侧边距
+    --m-calendar-task-margin-right: 4px; // head 右侧边距
+
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    // 头部样式覆盖
+    .el-calendar__header {
+        padding: 16px 20px;
+        border-bottom: 1px solid var(--el-border-color-lighter);
+
+        .el-calendar__title {
+            color: var(--m-calendar-color-black);
+            text-align: center;
+            font-family: "ALDI SUED OT";
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 400;
+        }
+
+        .el-button--small {
+            padding: 8px 14px;
+            color: var(--m-calendar-color-mix-font);
+            font-family: "ALDI SUED OT";
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+        }
+    }
+
+    //表格样式覆盖
+    .el-calendar__body {
+        flex-grow: 1;
+
+        .el-calendar-table {
+            height: 100%;
+
+            thead th {
+                color: var(--m-calendar-color-mix-font);
+                font-family: "ALDI SUED OT";
+                font-size: 16px;
+                font-weight: 400;
+            }
+
+            tr:first-child {
+                td{
+                    border-top: 1px solid var(--m-calendar-colro-border);
+                }
+            }
+            tr {
+                td{
+                    &:first-child {
+                        border-left: 1px solid var(--m-calendar-colro-border);
+                    }
+                }
+
+                td.prev{
+                    .el-calendar-day{
+                        &>span{
+                            color: var(--m-calendar-color-font-prev) !important;
+                        }
+                    }
+                }
+                td.next{
+                    .el-calendar-day{
+                        &>span{
+                            color: var(--m-calendar-color-font-next) !important;
+                        }
+                    }
+                }
+            }
+
+            td{
+                border: 1px solid transparent;
+                border-bottom: 1px solid var(--m-calendar-colro-border);
+                border-right: 1px solid var(--m-calendar-colro-border);
+                box-sizing: border-box;
+            }
+
+            td.is-selected {
+                background-color: transparent;
+                border: 1px solid var(--m-calendar-color-task-brand) !important;
+            }
+
+            .el-calendar-day {
+                padding: 0;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+
+                &:hover {
+                    background-color: transparent;
+                }
+
+                &>span{
+                    color: var(--m-calendar-color-font);
+                    font-family: "ALDI SUED OT";
+                    font-size: 16px;
+                    font-style: normal;
+                    font-weight: 400;
+                    padding: 6px 8px;
+                    box-sizing: border-box;
+                    line-height: 16px;
+                }
+            }
+        }
+    }
+
+    .gantt-calendar-cell {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        // 日期
+        .gantt-calendar-cell-day {
+            color: var(--m-calendar-color-font);
+            font-family: "ALDI SUED OT";
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 400;
+            padding: 6px 8px;
+            box-sizing: border-box;
+            flex-shrink: 0;
+        }
+
+        .gantt-calendar-cell-day.is-prev-month {
+            color: var(--m-calendar-color-font-prev);
+        }
+
+        .gantt-calendar-cell-day.is-next-month {
+            color: var(--m-calendar-color-font-next);
+        }
+
+        // 任务
+        .gantt-calendar-cell-tasks {
+            flex-grow: 1;
+
+            .gantt-calendar-cell-task {
+                border: 1px solid transparent;
+                background-color: var(--m-calendar-color-task-bg);
+                color: var(--m-calendar-color-task-brand);
+                border-radius: var(--m-calendar-task-border-radius);
+                height: 20px;
+                box-sizing: border-box;
+                overflow: hidden;
+                line-height: 20px;
+                margin-bottom: 8px;
+                position: relative;
+                padding-left: 10px;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+
+                .gantt-calendar-cell-task-name {
+                    color: var(--m-calendar-color-font);
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    font-family: "ALDI SUED OT";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: 400;
+                    max-width: 100%;
+                    text-align: left;
+                }
+            }
+
+            .gantt-calendar-cell-task.is-extra {
+                background-color: var(--m-calendar-color-mix-background);
+                color: var(--m-calendar-color-mix-font);
+                margin: 0 3px;
+
+                .gantt-calendar-cell-task-name {
+                    color: var(--m-calendar-color-mix-font);
+                    text-align: center;
+                }
+            }
+
+            .gantt-calendar-cell-task.is-empty {
+                background-color: transparent;
+                color: transparent;
+            }
+
+            // 已结束任务的标记样式
+            .gantt-calendar-cell-task.task-ended {
+                opacity: 0.5;
+            }
+
+            // 任务跨天位置样式
+            .gantt-calendar-cell-task.is-head {
+                border-radius: var(--m-calendar-task-border-radius) 0 0 var(--m-calendar-task-border-radius);
+                margin-left: var(--m-calendar-task-margin-left);
+                margin-right: var(--m-calendar-task-margin-right);
+            }
+
+            .gantt-calendar-cell-task.is-week-head {
+                &:before {
+                    content: "";
+                    position: absolute;
+                    left: 0px;
+                    top: 0px;
+                    width: var(--m-calendar-task-brand-bar-width);
+                    height: 20px;
+                    border-radius: var(--m-calendar-task-brand-bar-border-radius) 0 0 var(--m-calendar-task-brand-bar-border-radius);
+                    background-color: currentColor;
+                }
+            }
+
+            .gantt-calendar-cell-task.is-end,
+            .gantt-calendar-cell-task.is-middle {
+                visibility: hidden;
+            }
+
+            .gantt-calendar-cell-task.is-single {
+                border-radius: var(--m-calendar-task-border-radius) 0 0 var(--m-calendar-task-border-radius);
+                margin-left: var(--m-calendar-task-margin-left);
+                margin-right: var(--m-calendar-task-margin-right);
+
+                &:before {
+                    content: "";
+                    position: absolute;
+                    left: 0px;
+                    top: 0px;
+                    width: var(--m-calendar-task-brand-bar-width);
+                    height: 20px;
+                    border-radius: var(--m-calendar-task-brand-bar-border-radius) 0 0 var(--m-calendar-task-brand-bar-border-radius);
+                    background-color: currentColor;
+                }
+            }
+
+            .gantt-calendar-cell-task.task-clicked {
+                border: 1px solid var(--m-calendar-color-font);
+            }
+
+            .gantt-calendar-cell-task-popover {
+                width: 100%;
+                text-align: left;
+
+                .gantt-calendar-cell-task-popover-header {
+                    height: 8px;
+                    width: inherit;
+                    background-color: var(--m-calendar-color-task-brand);
+                }
+
+                .gantt-calendar-cell-task-popover-title {
+                    margin: 8px 12px;
+                    color: var(--m-calendar-color-font);
+                    font-family: "ALDI SUED OT";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 400;
+                }
+
+                .gantt-calendar-cell-task-popover-body {
+                    margin: 0 12px;
+                    font-family: "ALDI SUED OT";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 400;
+
+                    .gantt-calendar-cell-task-popover-body-group {
+                        margin-bottom: 20px;
+                        position: relative;
+                        color: var(--m-calendar-color-task-brand);
+
+                        &:last-child {
+                            margin-bottom: 12px;
+                        }
+
+                        &:before {
+                            content: "";
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            width: 4px;
+                            height: 100%;
+                            background-color: currentColor;
+                        }
+
+                        .gantt-calendar-cell-task-popover-body-group-title {
+                            margin-left: 8px;
+                            color: var(--m-calendar-color-font);
+                        }
+
+                        .gantt-calendar-cell-task-popover-body-group-content {
+                            margin-left: 8px;
+                            color: var(--m-calendar-color-font);
+                        }
+                    }
+                }
+
+                .gantt-calendar-cell-task-popover-content {
+                    margin: 0 12px 12px;
+                    color: var(--m-calendar-color-font);
+                    font-family: "ALDI SUED OT";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 400;
+                }
+            }
+        }
+    }
+}

package/packages/styles/src/card.scss

@@ -0,0 +1,85 @@
+@use './theme.scss';
+
+.m-card-panel {
+  width: 100%;
+  border-radius: 4px;
+  background: var(--el-color-white);
+  box-sizing: border-box;
+
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .m-panel-header {
+    .m-panel-title {
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      color: var(--el-color-black);
+
+      .m-panel-prologue {
+        width: 3px;
+        height: 14px;
+        background: var(--el-color-primary);
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .m-panel-extra {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--el-text-color-secondary);
+    cursor: pointer;
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE 10+ */
+    user-select: none; /* 标准语法 */
+
+    &-icon {
+      margin-left: 4px;
+      position: relative;
+      top: -1px;
+    }
+  }
+
+  .m-panel-content {
+    transition: all 0.3s ease;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+}
+
+.m-card-panel-small {
+  padding: 20px 24px;
+}
+
+.m-card-panel-default {
+  padding: 24px;
+}
+
+.m-title-module {
+  display: flex;
+  align-items: center;
+
+  .m-title-module-block {
+    width: 3px;
+    height: 14px;
+    background: var(--el-color-primary);
+    margin-right: 8px;
+  }
+
+  .m-title-module-content {
+    font-weight: 500;
+    font-size: 16px;
+    color: var(--el-color-black);
+    line-height: 24px;
+  }
+}

package/packages/styles/src/cascader.scss

@@ -0,0 +1,59 @@
+@use './theme.scss';
+
+$prefix: "m-cascader";
+
+.#{$prefix} {
+  --el-border-radius-base: 2px;
+
+  &.el-cascader {
+    .el-input__wrapper {
+      border: 1px solid #d3dcec;
+      box-shadow: unset;
+    }
+    .el-input__wrapper:hover {
+      border-color: var(--el-color-primary-light-3);
+      box-shadow: unset;
+    }
+    .el-input__wrapper.is-focus {
+      border-radius: 2px;
+      border: 1px solid var(--el-color-primary);
+      box-shadow: 0 0 0 2px var(--Projection, #e3ecf9);
+    }
+  }
+}
+
+.#{$prefix}-dropdown {
+  .el-cascader-menu {
+    padding: 0 8px;
+    .el-cascader-menu__list {
+      .el-cascader-node {
+        padding: 0 8px;
+
+        .el-cascader-node__prefix {
+          left: 0px;
+          display: none;
+        }
+
+        &:hover {
+          background-color: #f5f5f6;
+        }
+
+        &:active {
+          background-color: var(--el-color-primary-light-9);
+        }
+
+        &.is-selectable.in-checked-path,
+        &.is-active {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+
+  &.el-cascader__dropdown {
+    // popper箭头隐藏
+    .el-popper__arrow::before {
+      display: none;
+    }
+  }
+}

package/packages/styles/src/checkbox.scss

@@ -0,0 +1,46 @@
+@use './theme.scss';
+
+.m-checkbox {
+  --m-checkbox-checked-text-color: var(--el-text-color-regular);
+  --m-checkbox-font-weight: 400;
+  --m-checkbox-inner-border-color: #cfd8e9;
+
+  --el-checkbox-checked-text-color: var(--m-checkbox-checked-text-color);
+  --el-checkbox-font-weight: var(--m-checkbox-font-weight);
+  --el-checkbox-disabled-border-color: var(--m-checkbox-inner-border-color);
+  --el-checkbox-disabled-checked-input-border-color: var(--m-checkbox-inner-border-color);
+
+  // 修改图标样式
+  &.el-checkbox--large .el-checkbox__inner,
+  &.el-checkbox.is-bordered.el-checkbox--large .el-checkbox__inner,
+  .el-checkbox__inner {
+    width: 16px;
+    height: 16px;
+    &::after {
+      left: 5px;
+      width: 4px;
+      height: 9px;
+    }
+  }
+
+  &.el-checkbox.el-checkbox--small .el-checkbox__inner:after {
+    left: 4px;
+  }
+
+  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after {
+    border-color: var(--el-text-color-placeholder);
+  }
+  // 半选图标样式
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
+    top: 6px;
+  }
+
+  //修改图标边框样式
+  .el-checkbox__inner {
+    border-color: var(--m-checkbox-inner-border-color);
+
+    &:hover {
+      border-color: var(--el-color-primary);
+    }
+  }
+}

package/packages/styles/src/column-table.scss

@@ -0,0 +1,13 @@
+@use './theme.scss';
+
+.m-column-table {
+  --m-column-table-border-color: #e6ebf4;
+
+  &.m-column-table-with-border {
+    border: 1px solid var(--m-column-table-border-color);
+  }
+
+  &.el-table .el-table__cell {
+    padding: 11px 0;
+  }
+}