@phelan/design 0.0.1 → 0.0.2

package/packages/styles/src/calendar.scss

@@ -1,327 +0,0 @@
-.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

@@ -1,85 +0,0 @@
-@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

@@ -1,59 +0,0 @@
-@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

@@ -1,46 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-@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;
-  }
-}