look-ui 1.0.1

package/index.scss

@@ -0,0 +1,42 @@
+// base
+@import './src/css/button/index.scss';
+
+// data
+@import './src/css/table/index.scss';
+@import './src/css/pagination/index.scss';
+
+// form
+@import './src/css/radio/index.scss';
+@import './src/css/checkbox/index.scss';
+@import './src/css/input/index.scss';
+@import './src/css/input-number/index.scss';
+@import './src/css/select/index.scss';
+@import './src/css/cascader/index.scss';
+@import './src/css/switch/index.scss';
+@import './src/css/slider/index.scss';
+@import './src/css/picker/index.scss';
+@import './src/css/time-picker/index.scss';
+@import './src/css/date-picker/index.scss';
+@import './src/css/upload/index.scss';
+@import './src/css/transfer/index.scss';
+@import './src/css/form/index.scss';
+
+// navigation
+@import './src/css/bread-crumb/index.scss';
+@import './src/css/dropdown/index.scss';
+@import './src/css/nav-menu/index.scss';
+@import './src/css/page-header/index.scss';
+@import './src/css/tabs/index.scss';
+@import './src/css/steps/index.scss';
+
+// notification
+@import './src/css/alert/index.scss';
+@import './src/css/loading/index.scss';
+@import './src/css/notification/index.scss';
+@import './src/css/message-box/index.scss';
+
+// others
+@import './src/css/dialog/index.scss';
+@import './src/css/popover/index.scss';
+@import './src/css/card/index.scss';
+@import './src/css/calendar/index.scss';

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "look-ui",
+  "version": "1.0.1",
+  "description": "a ui library which is based on element-ui",
+  "main": "index.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Shiyan Chen",
+  "license": "ISC"
+}

package/src/css/alert/index.scss

@@ -0,0 +1,66 @@
+@import '../index.scss';
+.lookui-alert {
+  &.el-alert--success {
+    &.is-light {
+      background-color: $--green-100;
+      color: #000;
+      border: 1px solid $--green-400
+    }
+    &.is-dark {
+      background-color: $--green-900;
+    }
+  }
+  &.el-alert--info {
+    &.is-light {
+      background-color: $--themeColor-100;
+      color: #000;
+      border: 1px solid $--themeColor-400;
+    }
+    &.is-dark {
+      background-color: $--themeColor;
+    }
+  }
+  &.el-alert--warning {
+    &.is-light {
+      background-color: $--yellow-100;
+      color: #000;
+      border: 1px solid $--yellow-400;
+    }
+    &.is-dark {
+      background-color: $--orange-900;
+    }
+  }
+  &.el-alert--error {
+    &.is-light {
+      background-color: $--red-100;
+      color: #000;
+      border: 1px solid $--red-400;
+    }
+    &.is-dark {
+      background-color: $--red-900;
+    }
+  }
+  .el-icon {
+    &-success {
+      color: $--green-900;
+    }
+    &-info {
+      color: $--themeColor;
+    }
+    &-warning {
+      color: $--orange-900;
+    }
+    &-error {
+      color: $--red-900;
+    }
+  }
+  .el-alert__content {
+    .el-alert__title.is-bold {
+      font-weight: normal;
+      font-size: 14px;
+    }
+    .el-alert__description {
+      color: #000;
+    }
+  }
+}

package/src/css/bread-crumb/index.scss

@@ -0,0 +1,6 @@
+@import '../index.scss';
+.lookui-breadcrumb {
+  .el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
+    color: $--themeColor;
+  }
+}

package/src/css/button/index.scss

@@ -0,0 +1,250 @@
+@import '../index.scss';
+
+.lookui-btn {
+  &.el-button {
+    &--default {
+      color: #666;
+      // background-color: $--themeColor;
+      // border-color: $--themeColor;
+      &:hover {
+        color: $--themeColor;
+        background-color: #f1f4fa;
+        border-color: $--themeColor-100;
+      }
+      &:focus {
+        color: $--themeColor;
+        background-color: #f1f4fa;
+        border-color: $--themeColor-700;
+      }
+      &.is-disabled {
+        color: #bfbfbf;
+        background-color: #f5f5f5;
+        border-color: #d9d9d9;
+      }
+      &.is-plain {
+        color: #666;
+        &:hover {
+          color: $--themeColor;
+          background-color: #f1f4fa;
+          border-color: $--themeColor-100;
+        }
+        &:focus {
+          color: $--themeColor;
+          background-color: #f1f4fa;
+          border-color: $--themeColor-700;
+        }
+        &.is-disabled {
+          color: #bfbfbf;
+          background-color: #f5f5f5;
+          border-color: #d9d9d9;
+        }
+      }
+    }
+    &--primary {
+      color: #fff;
+      background-color: $--themeColor;
+      border-color: $--themeColor;
+      &:hover {
+        color: #fff;
+        background-color: $--themeColor-700;
+        border-color: $--themeColor-700;
+      }
+      &:focus {
+        color: #fff;
+        background-color: #3f57ae;
+        border-color: #3f57ae;
+      }
+      &.is-disabled {
+        color: #fff;
+        background-color: $--themeColor-400;
+        border-color: $--themeColor-400;
+      }
+      &.is-plain {
+        color: $--themeColor;
+        background-color: $--themeColor-100;
+        border-color: $--themeColor-400;
+        &:hover {
+          color: #fff;
+          background-color: $--themeColor;
+          border-color: $--themeColor;
+        }
+        &:focus {
+          color: #fff;
+          background-color: #3f57ae;
+          border-color: #3f57ae;
+        }
+        &.is-disabled {
+          color: $--themeColor-400;
+          background-color: $--themeColor-100;
+          border-color: $--themeColor-400;
+        }
+      }
+    }
+    &--success {
+      color: #fff;
+      background-color: $--green-900;
+      border-color: $--green-900;
+      &:hover {
+        color: #fff;
+        background-color: $--green-700;
+        border-color: $--green-700;
+      }
+      &:focus {
+        color: #fff;
+        background-color: #5ba88a;
+        border-color: #5ba88a;
+      }
+      &.is-disabled {
+        color: #fff;
+        background-color: $--green-400;
+        border-color: $--green-400;
+      }
+      &.is-plain {
+        color: $--green-900;
+        background-color: $--green-100;
+        border-color: $--green-400;
+        &:hover {
+          color: #fff;
+          background-color: $--green-900;
+          border-color: $--green-900;
+        }
+        &:focus {
+          color: #fff;
+          background-color: #5ba88a;
+          border-color: #5ba88a;
+        }
+        &.is-disabled {
+          color: $--green-400;
+          background-color: $--green-100;
+          border-color: $--green-400;
+        }
+      }
+    }
+    &--info {
+      color: #6b5400;
+      background-color: $--yellow-900;
+      border-color: $--yellow-900;
+      &:hover {
+        color: #6b5400;
+        background-color: $--yellow-700;
+        border-color: $--yellow-700;
+      }
+      &:focus {
+        color: #6b5400;
+        background-color: #deb148;
+        border-color: #deb148;
+      }
+      &.is-disabled {
+        color: #fff;
+        background-color: $--yellow-400;
+        border-color: $--yellow-400;
+      }
+      &.is-plain {
+        color: #6b5400;
+        background-color: $--yellow-100;
+        border-color: $--yellow-400;
+        &:hover {
+          color: #6b5400;
+          background-color: $--yellow-900;
+          border-color: $--yellow-900;
+        }
+        &:focus {
+          color: #6b5400;
+          background-color: #deb148;
+          border-color: #deb148;
+        }
+        &.is-disabled {
+          color: $--yellow-400;
+          background-color: $--yellow-100;
+          border-color: $--yellow-400;
+        }
+      }
+    }
+    &--warning {
+      color: #fff;
+      background-color: $--orange-900;
+      border-color: $--orange-900;
+      &:hover {
+        color: #fff;
+        background-color: $--orange-700;
+        border-color: $--orange-700;
+      }
+      &:focus {
+        color: #fff;
+        background-color: #d4733d;
+        border-color: #d4733d;
+      }
+      &.is-disabled {
+        color: #fff;
+        background-color: $--orange-400;
+        border-color: $--orange-400;
+      }
+      &.is-plain {
+        color: $--orange-900;
+        background-color: $--orange-100;
+        border-color: $--orange-400;
+        &:hover {
+          color: #fff;
+          background-color: $--orange-900;
+          border-color: $--orange-900;
+        }
+        &:focus {
+          color: #fff;
+          background-color: #d4733d;
+          border-color: #d4733d;
+        }
+        &.is-disabled {
+          color: $--orange-400;
+          background-color: $--orange-100;
+          border-color: $--orange-400;
+        }
+      }
+    }
+    &--danger {
+      color: #fff;
+      background-color: $--red-900;
+      border-color: $--red-900;
+      &:hover {
+        color: #fff;
+        background-color: $--red-700;
+        border-color: $--red-700;
+      }
+      &:focus {
+        color: #fff;
+        background-color: #d2383a;
+        border-color: #d2383a;
+      }
+      &.is-disabled {
+        color: #fff;
+        background-color: $--red-400;
+        border-color: $--red-400;
+      }
+      &.is-plain {
+        color: $--red-900;
+        background-color: $--red-100;
+        border-color: $--red-400;
+        &:hover {
+          color: #fff;
+          background-color: $--red-900;
+          border-color: $--red-900;
+        }
+        &:focus {
+          color: #fff;
+          background-color: #d2383a;
+          border-color: #d2383a;
+        }
+        &.is-disabled {
+          color: $--red-400;
+          background-color: $--red-100;
+          border-color: $--red-400;
+        }
+      }
+    }
+    &--text {
+      color: $--themeColor;
+      &.is-disabled {
+        color: #bfbfbf;
+      }
+    }
+  }
+}

package/src/css/calendar/index.scss

@@ -0,0 +1,22 @@
+@import '../index.scss';
+
+.lookui-calendar {
+  .el-calendar-table td {
+    &.is-selected {
+      background-color: $--themeColor;
+      color: #fff;
+    }
+  }
+  .el-calendar-table .el-calendar-day:hover {
+    background-color: $--themeColor;
+    color: #fff;
+  }
+  .el-button {
+    &:hover,
+    &:focus {
+      background-color: $--themeColor-100;
+      border-color: $--themeColor-400;
+      color: $--themeColor;
+    }
+  }
+}

package/src/css/card/index.scss

@@ -0,0 +1,34 @@
+@import '../index.scss';
+.lookui-card {
+  .el-card__header {
+    > div {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      > span {
+        color: $--themeColor;
+      }
+    }
+  }
+  .info {
+    padding: 8px 16px;
+    .name {
+      color: $--themeColor;
+      font-size: 14px;
+    }
+    .description {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .txt {
+        color: #666666;
+        font-size: 12px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        margin-right: 10px;
+      }
+    }
+  }
+}

package/src/css/cascader/index.scss

@@ -0,0 +1,25 @@
+@import '../index.scss';
+.lookui-cascader {
+  .el-input .el-input__inner:focus,
+  .el-input.is-focus .el-input__inner {
+    border-color: $--themeColor;
+  }
+}
+
+.lookui-cascader-popper {
+  .el-cascader-node:not(.is-disabled):focus,
+  .el-cascader-node:not(.is-disabled):hover {
+    background: $--themeColor-100;
+  }
+  .el-cascader-node.in-active-path,
+  .el-cascader-node.is-active,
+  .el-cascader-node.is-selectable.in-checked-path {
+    color: $--themeColor;
+    font-weight: 400;
+  }
+  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: $--themeColor;
+    border-color: $--themeColor;
+  }
+}

package/src/css/checkbox/index.scss

@@ -0,0 +1,29 @@
+@import '../index.scss';
+.lookui-checkbox {
+  .el-checkbox__input.is-checked+.el-checkbox__label {
+    color: $--themeColor;
+    padding-left: 8px;
+  }
+  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: $--themeColor;
+    border-color: $--themeColor;
+    width: 16px;
+    height: 16px;
+  }
+  .el-checkbox__input.is-disabled+span.el-checkbox__label {
+    color:#bfbfbf;
+  }
+  .el-checkbox__input.is-disabled .el-checkbox__inner {
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    background-color:#f5f5f5;
+    border:1px solid #d9d9d9;
+    border-radius:2px;
+  }
+  .el-checkbox__inner::after {
+    left: 5px;
+    top: 2px;
+  }
+}

package/src/css/date-picker/index.scss

@@ -0,0 +1,73 @@
+@import '../index.scss';
+.lookui-date-popper {
+  .el-date-table td {
+    &.today span {
+      color: $--themeColor;
+    }
+    &.available:hover {
+      color: $--themeColor;
+    }
+    // 选中的日期
+    &.current:not(.disabled) span {
+      background-color: $--themeColor;
+      color: #fff;
+    }
+    // 多个日期
+    &.selected span {
+      background-color: $--themeColor;
+    }
+    // 日期范围（今天日期（开始 || 结束））
+    &.today.end-date span {
+      color: #fff;
+    }
+    &.today.start-date span {
+      color: #fff;
+    }
+    // 周：
+    &.start-date span {
+      background-color: $--themeColor;
+    }
+    &.end-date span {
+      background-color: $--themeColor;
+    }
+  }
+  // 月、年
+  .el-month-table td, .el-year-table td {
+    &.today .cell {
+      color: $--themeColor;
+    }
+    .cell:hover {
+      color: $--themeColor;
+    }
+    // 选中的月份
+    &.current:not(.disabled) .cell {
+      color: $--themeColor;
+    }
+    // 月份范围（选中月份（开始 || 结束））
+    &.start-date .cell {
+      background-color: $--themeColor;
+      color: #fff;
+    }
+    &.end-date .cell {
+      background-color: $--themeColor;
+      color: #fff;
+    }
+  }
+  // 顶部年份切换箭头
+  .el-picker-panel__icon-btn:hover {
+    color: $--themeColor;
+  }
+  // 顶部年份切换 label
+  .el-date-picker__header-label {
+    &.active {
+      color: $--themeColor;
+    }
+    &:hover {
+      color: $--themeColor;
+    }
+  }
+  // 快捷选项
+  .el-picker-panel__shortcut:hover {
+    color: $--themeColor;
+  }
+}

package/src/css/dialog/index.scss

@@ -0,0 +1,9 @@
+@import '../index.scss';
+.lookui-dialog {
+  .el-dialog__header {
+    border-bottom: 1px solid #d9d9d9;
+    .el-dialog__title {
+      color: $--themeColor;
+    }
+  }
+}

package/src/css/dropdown/index.scss

@@ -0,0 +1,19 @@
+@import '../index.scss';
+.lookui-dropdown-menu {
+  .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
+    background-color: #f1f5fd;
+    color: #666;
+  }
+  .el-badge__content--primary {
+    background-color: $--themeColor;
+    margin-top: 9px;
+  }
+}
+
+.lookui-dropdown {
+  .el-button--primary {
+    color: #FFF;
+    background-color: $--themeColor;
+    border-color: $--themeColor;
+  }
+}

package/src/css/form/index.scss

@@ -0,0 +1,8 @@
+@import '../index.scss';
+.lookui-form {
+  .el-button--primary {
+    color: #FFF;
+    background-color: $--themeColor;
+    border-color: $--themeColor;
+  }
+}

package/src/css/index.scss

@@ -0,0 +1,42 @@
+$--themeColor: #506eda;
+$--themeColor-100: #e4e8fb;
+$--themeColor-400: #acb7f1;
+$--themeColor-700: #8493e9;
+
+$--green-100: #def9f1;
+$--green-400: #8ee1c7;
+$--green-700: #6fcfaa;
+$--green-900: #55bf96;
+
+$--blue-100: #e4f5ff;
+$--blue-400: #bfe8ff;
+$--blue-700: #75ceff;
+$--blue-900: #43bcff;
+
+$--yellow-100: #fff7e5;
+$--yellow-400: #fbdda2;
+$--yellow-700: #f5d087;
+$--yellow-900: #ffc800;
+
+$--orange-100: #ffeee5;
+$--orange-400: #fbc2a2;
+$--orange-700: #f8a779;
+$--orange-900: #f68d52;
+
+$--red-100: #fbeced;
+$--red-400: #fbbbbb;
+$--red-700: #fe8989;
+$--red-900: #ff4d4f;
+
+$--grey-100: #f5f5f5;
+$--grey-400: #d9d9d9;
+$--grey-700: #bfbfbf;
+$--grey-900: #666666;
+
+$--main-font-color: #000000;
+$--normal-font-color: #666666;
+$--secondary-font-color: #bfbfbf;
+
+$--solid-border-color: #d9d9d9;
+$--dashed-border-color: #bfbfbf;
+