ct-component-plus 0.0.42 → 0.0.43

package/packages/style/element.less

@@ -1,726 +1,726 @@
-:root {
-  --el-color-primary: var(--ct-color-primary);
-  --el-color-danger: var(--ct-color-danger);
-  --el-color-warning: var(--ct-color-warning);
-  --el-border-color: var(--ct-border-color);
-  --el-component-size: var(--ct-component-size);
-  --el-border-color-hover: var(--ct-color-grey-sub);
-  --el-text-color-placeholder: var(--ct-color-placeholder);
-  --el-text-color-regular: var(--ct-color-black);
-  --el-disabled-bg-color: var(--ct-component-disabled-bg-color);
-  --el-disabled-border-color: var(--ct-border-color);
-  --el-font-size-base: var(--ct-font-size);
-  --el-box-shadow-light: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
-  --el-fill-color-light: var(--ct-component-hover-color);
-
-  --ct-cascader-node-height: 30px;
-  --el-disabled-text-color: var(--ct-font-color);
-}
-
-.el {
-  @R: .el;
-
-  &-popper {
-    &.is-light {
-      border: var(--ct-popper-light-border);
-      box-shadow: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
-
-      .el-popper__arrow {
-        &::before {
-          border: var(--ct-popper-light-border);
-        }
-      }
-    }
-  }
-
-  &-radio {
-    margin-right: 34px;
-    @R: .el-radio;
-
-    &:not(.is-disabled):hover {
-      color: var(--ct-color-primary);
-
-      @{R}__inner {
-        border-color: var(--ct-color-primary);
-      }
-    }
-
-    &__label {
-      padding-left: 6px;
-      font-weight: 400;
-    }
-
-    &__inner {
-      &::after {
-        width: 8px;
-        height: 8px;
-      }
-    }
-
-    &__input {
-      &.is-checked {
-        @{R}__inner {
-          background: #fff;
-
-          &::after {
-            background-color: var(--ct-color-primary);
-          }
-        }
-      }
-    }
-  }
-
-  &-checkbox {
-    margin-right: 34px;
-    @R: .el-checkbox;
-
-    &:not(.is-disabled):hover {
-      color: var(--ct-color-primary);
-
-      @{R}__inner {
-        border-color: var(--ct-color-primary);
-      }
-    }
-
-    &__label {
-      padding-left: 6px;
-      font-weight: 400;
-    }
-  }
-
-  &-input {
-    &__wrapper {
-      padding: 1px var(--ct-component-inner-padding);
-
-      &:focus-within {
-
-        .ct-icon,
-        .el-icon {
-          color: var(--ct-color-primary);
-        }
-      }
-    }
-
-    &__suffix {
-      &-inner {
-        line-height: calc(var(--el-input-height) - 2px);
-      }
-    }
-    &.is-disabled {
-      .el-input__inner {
-        -webkit-text-fill-color: unset;
-      }
-    }
-  }
-
-  &-select {
-    --ct-select-poper-border: none;
-    --ct-select-focus-icon-color: var(--ct-color-primary);
-
-    &__popper {
-      font-size: var(--ct-font-size);
-
-      &.el-popper {
-        &.is-light {
-          border: var(--ct-select-poper-border);
-
-          .el-popper__arrow {
-            &::before {
-              border: var(--ct-select-poper-border);
-            }
-          }
-        }
-      }
-    }
-
-    &-dropdown {
-      --ct-select-item-height: calc(var(--ct-component-size, 30px) - 2px);
-      @R: .el-select-dropdown;
-
-      .el-scrollbar.is-empty {
-        @{R}__wrap {
-          display: none;
-        }
-      }
-
-      &__wrap {
-        padding: 10px 0 4px;
-      }
-
-      &__item {
-        height: var(--ct-select-item-height);
-        line-height: var(--ct-select-item-height);
-        margin: 0 6px 6px;
-        padding: 0 10px;
-        border-radius: var(--ct-border-radius);
-
-        &:hover,
-        &.hover {
-          background-color: var(--ct-component-hover-color);
-        }
-
-        &.selected {
-          font-weight: 400;
-        }
-      }
-
-      &.is-multiple {
-        @{R}__item {
-          &.selected {
-            &::after {
-              right: var(--ct-component-inner-padding);
-            }
-          }
-        }
-      }
-    }
-
-    .el-input {
-      &.is-focus {
-        .el-input__suffix {
-
-          .el-icon,
-          .ct-icon {
-            color: var(--ct-select-focus-icon-color);
-          }
-        }
-      }
-    }
-  }
-
-  &-cascader {
-    .el-input {
-      &.is-focus {
-        .el-input__wrapper {
-
-          .el-icon,
-          .ct-icon {
-            color: var(--ct-color-primary);
-          }
-        }
-      }
-    }
-
-    &__dropdown {}
-
-    &-menu {
-      &__list {
-        padding: 10px 6px;
-      }
-    }
-
-    &-panel {
-      --el-cascader-menu-border: 1px solid #F0F3F9;
-    }
-
-    &-node {
-      height: var(--ct-cascader-node-height);
-      padding: 0;
-      line-height: var(--ct-cascader-node-height);
-      border-radius: var(--ct-border-radius);
-
-      &:not(:first-child) {
-        margin-top: 6px;
-      }
-
-      &__label {
-        padding: 0 10px;
-      }
-
-      &__prefix {
-        display: none;
-      }
-
-      .arrow-right {
-        color: var(--ct-color-grey-tip);
-      }
-
-      &.in-active-path,
-      &.is-active,
-      &.is-selectable.in-checked-path {
-        font-weight: 400;
-
-        .arrow-right {
-          color: var(--ct-color-primary);
-        }
-      }
-
-      >.el-radio,
-      >.el-checkbox {
-        margin-left: 10px;
-        margin-right: -2px;
-      }
-    }
-
-    &__suggestion {
-      &-list {
-        padding: 10px 6px;
-      }
-
-      &-item {
-        height: 30px;
-        padding: 0 10px;
-        border-radius: var(--ct-border-radius);
-
-        &:not(:first-child) {
-          margin-top: 6px;
-        }
-
-        &.is-checked {
-          font-weight: 400;
-        }
-      }
-    }
-  }
-
-  &-date-editor {
-    &.el-range-editor {
-      &:not(.is-active):focus-within {
-
-        .ct-icon,
-        .el-icon {
-          color: var(--el-input-icon-color);
-        }
-      }
-    }
-
-    &.is-active {
-
-      .ct-icon,
-      .el-icon {
-        color: var(--ct-color-primary);
-      }
-    }
-
-    .el-range-separator {
-      color: var(--ct-color-grey-sub);
-    }
-
-    &.el-input__wrapper {
-      padding: 1px var(--ct-component-inner-padding);
-    }
-
-    .el-input__prefix,
-    .el-range__icon {
-      position: absolute;
-      right: var(--ct-component-inner-padding);
-      top: 50%;
-      transform: translateY(-50%);
-      font-size: 16px;
-
-      .el-input__icon {
-        margin-right: 0;
-        background-color: inherit;
-      }
-    }
-
-    .el-range__close-icon i,
-    .clear-icon {
-      position: relative;
-      width: 16px;
-      z-index: 2;
-      background-color: #fff;
-    }
-  }
-
-  &-date-picker {
-    --el-datepicker-header-text-color: var(--ct-color-grey-transition);
-    --ct-datepicker-border-color: #F0F3F9;
-    width: 304px;
-    @R: .el-picker-panel;
-
-    @{R}__content {
-      margin: 0 auto;
-    }
-
-    &__header {
-      height: 44px;
-      margin: 0;
-      padding: 0 22px;
-      line-height: 44px;
-      border-bottom: 1px solid var(--ct-datepicker-border-color);
-
-      .el-picker-panel__icon-btn {
-        color: var(--ct-color-grey-transition);
-
-        &:hover {
-          color: var(--ct-color-primary);
-        }
-      }
-
-      &-label {
-        font-size: 14px;
-        font-weight: 600;
-      }
-    }
-
-    .el-picker-panel__content {
-      width: 304px;
-    }
-  }
-
-  &-month-table,
-  &-year-table {
-    padding: 9px 12px;
-    font-size: 14px;
-
-    td {
-      padding: 9px;
-
-      >div {
-        height: 26px;
-        padding: 0;
-      }
-
-      .cell {
-        width: 50px;
-        height: 26px;
-        line-height: 26px;
-        border-radius: 4px;
-      }
-
-      &.today {
-        .cell {
-          font-weight: 400;
-          border: 1px solid var(--ct-color-primary);
-        }
-      }
-
-      &.current {
-        .cell {
-          background-color: var(--ct-color-primary);
-          color: #fff !important;
-          font-weight: 400;
-        }
-      }
-    }
-  }
-
-  &-date-range-picker {
-    --ct-datepicker-border-color: #F0F3F9;
-    --el-datepicker-inrange-bg-color: #F5F7FC;
-    --el-datepicker-inner-border-color: var(--ct-datepicker-border-color);
-    --el-datepicker-header-text-color: var(--ct-color-grey-transition);
-    width: 608px;
-
-    &__content {
-      padding: 0;
-    }
-
-    &__header {
-      height: 44px;
-      padding: 0 24px;
-      line-height: 44px;
-      border-bottom: 1px solid var(--ct-datepicker-border-color);
-
-      div {
-        font-size: 14px;
-        font-weight: 600;
-      }
-    }
-
-    .el-picker-panel__icon-btn {
-      color: var(--ct-color-grey-transition);
-      margin-top: 14px;
-
-      &:hover {
-        color: var(--ct-color-primary);
-      }
-    }
-  }
-
-  &-date-table {
-    padding: 0 14px;
-    margin: 0;
-    margin-bottom: 14px;
-    font-size: 14px;
-
-    th {
-      padding: 9px 12.5px;
-    }
-
-    tr {
-      .in-range {
-        &:first-of-type {
-          .el-date-table-cell {
-            border-radius: 4px 0 0 4px;
-
-          }
-        }
-
-        &:last-of-type {
-          .el-date-table-cell {
-            border-radius: 0 4px 4px 0;
-          }
-        }
-      }
-    }
-
-    td {
-      &.today {
-        .el-date-table-cell {
-          &__text {
-            border: 1px solid var(--ct-color-primary);
-            font-weight: 400;
-          }
-        }
-      }
-
-      .el-date-table-cell {
-        height: 26px;
-        padding: 0;
-
-        .el-date-table-cell__text {
-          border-radius: 4px;
-        }
-      }
-    }
-  }
-
-  &-picker {
-    &__popper {
-      &.is-light {
-        border: none;
-        box-shadow: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
-
-        .el-popper__arrow {
-          &::before {
-            border: none;
-          }
-        }
-      }
-    }
-  }
-
-  &-pagination {
-    @R: .el-pagination;
-    --el-pagination-border-radius: 4px;
-    --el-pagination-button-width: 28px;
-    --el-pagination-button-height: 28px;
-    --el-pagination-button-color: var(--ct-color-black);
-    --pagination-item-margin: 3px;
-    --el-component-size: 28px;
-    --el-border-color: var(--ct-border-color-light);
-    --el-text-color-regular: var(--ct-color-black);
-
-    .el-pager {
-      li {
-        margin: 0 var(--pagination-item-margin);
-      }
-    }
-
-    .btn-prev {
-      margin-right: var(--pagination-item-margin);
-    }
-
-    .btn-next {
-      margin-left: var(--pagination-item-margin);
-    }
-
-    &.have-border {
-      .pagination-border-item-style {
-        border: 1px solid var(--ct-border-color-light);
-
-        &:not([disabled]):hover {
-          border-color: var(--ct-color-primary);
-        }
-      }
-
-      .el-pager {
-        li {
-          .pagination-border-item-style;
-
-          &.is-active {
-            background-color: var(--ct-color-primary);
-            border-color: var(--ct-color-primary);
-            color: #fff;
-          }
-        }
-      }
-
-      .btn-prev,
-      .btn-next {
-        .pagination-border-item-style;
-      }
-    }
-
-    &.is-background {
-      --el-pagination-bg-color: var(--ct-color-bg);
-
-      .el-pager {
-        li {
-          margin: 0 var(--pagination-item-margin);
-        }
-      }
-
-      .btn-prev {
-        margin-right: var(--pagination-item-margin);
-      }
-
-      .btn-next {
-        margin-left: var(--pagination-item-margin);
-        margin-right: 0;
-      }
-
-      @{R}__jump {
-        .el-input__wrapper {
-          background-color: var(--ct-color-bg);
-          box-shadow: none;
-        }
-      }
-
-    }
-
-    &__jump {
-      margin-left: 34px;
-
-      .el-input {
-        width: 36px;
-
-        &__wrapper {
-          padding: 1px 5px;
-        }
-      }
-    }
-  }
-
-  &-table {
-    @R: .el-table;
-    font-size: 15px;
-    --el-table-header-text-color: var(--ct-font-color);
-    --el-table-header-bg-color: #F0F3F9;
-    // --el-table-row-hover-bg-color: #F7F9FD;
-    --el-table-row-hover-bg-color: #FAFAFC;
-
-    .cell {}
-
-    & @{R}__cell {
-      padding: 16px 0;
-    }
-
-    thead {
-      @{R}__cell {
-        padding: 15px 0;
-      }
-    }
-
-    th {
-      &@{R}__cell {
-        background-color: var(--el-table-header-bg-color);
-
-        &.is-leaf {
-          border-bottom-color: transparent;
-        }
-
-        &.is-sortable {
-          .caret-wrapper {
-            display: none;
-          }
-        }
-      }
-
-      &:first-of-type {
-        border-radius: 4px 0 0 4px;
-      }
-
-      &:last-of-type {
-        border-radius: 0 4px 4px 0;
-      }
-    }
-
-    @{R}-column {
-      &--selection {
-        .cell {
-          width: 100%;
-          justify-content: center;
-        }
-      }
-    }
-  }
-
-  &-notification {
-    border-radius: var(--ct-border-radius-l);
-    box-shadow: 0px 4px 40px 0px rgba(52, 63, 77, 0.1);
-    padding: 16px 24px 30px;
-    border: none;
-    @R: .el-notification;
-
-    @{R}__group {
-      margin-right: 0;
-      margin-left: 0;
-    }
-
-    @{R}__title {
-      border-bottom: none;
-      padding-bottom: 0;
-      font-weight: 600;
-      color: var(--ct-color-black);
-      line-height: 24px;
-      font-size: var(--ct-font-title-s);
-    }
-
-    @{R}__content {
-      margin-top: 16px;
-      line-height: 26px;
-    }
-
-    @{R}__closeBtn {
-      top: 16px;
-      right: 16px;
-      color: #d9dee7;
-    }
-  }
-
-  &-button {
-    border-radius: 3px;
-    min-width: 80px;
-  }
-
-  &-message {
-    height: 40px;
-    padding: 11px 16px;
-    min-width: 540px;
-
-    .el-icon.el-message__icon {
-      width: 18px;
-      height: 18px;
-      margin-right: 8px;
-
-      svg {
-        width: unset;
-        height: unset;
-      }
-    }
-
-    &__content {
-      line-height: 18px;
-    }
-
-    .el-icon.el-message__closeBtn {
-      width: 14px;
-      height: 14px;
-      right: 16px;
-      color: var(--ct-border-color);
-    }
-  }
-
-  &-message.ct-message--success {
-    background-color: var(--ct-color-success-bg);
-    border: var(--ct-color-success-border) 1px solid;
-  }
-
-  &-message.ct-message--info {
-    background-color: var(--ct-color-primary-bg);
-    border: var(--ct-color-primary-border) 1px solid;
-  }
-
-  &-message.ct-message--warning {
-    background-color: var(--ct-color-warning-bg);
-    border: var(--ct-color-warning-border) 1px solid;
-  }
-
-  &-message.ct-message--error {
-    background-color: var(--ct-color-danger-bg);
-    border: var(--ct-color-danger-border) 1px solid;
-  }
+:root {
+  --el-color-primary: var(--ct-color-primary);
+  --el-color-danger: var(--ct-color-danger);
+  --el-color-warning: var(--ct-color-warning);
+  --el-border-color: var(--ct-border-color);
+  --el-component-size: var(--ct-component-size);
+  --el-border-color-hover: var(--ct-color-grey-sub);
+  --el-text-color-placeholder: var(--ct-color-placeholder);
+  --el-text-color-regular: var(--ct-color-black);
+  --el-disabled-bg-color: var(--ct-component-disabled-bg-color);
+  --el-disabled-border-color: var(--ct-border-color);
+  --el-font-size-base: var(--ct-font-size);
+  --el-box-shadow-light: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
+  --el-fill-color-light: var(--ct-component-hover-color);
+
+  --ct-cascader-node-height: 30px;
+  --el-disabled-text-color: var(--ct-font-color);
+}
+
+.el {
+  @R: .el;
+
+  &-popper {
+    &.is-light {
+      border: var(--ct-popper-light-border);
+      box-shadow: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
+
+      .el-popper__arrow {
+        &::before {
+          border: var(--ct-popper-light-border);
+        }
+      }
+    }
+  }
+
+  &-radio {
+    margin-right: 34px;
+    @R: .el-radio;
+
+    &:not(.is-disabled):hover {
+      color: var(--ct-color-primary);
+
+      @{R}__inner {
+        border-color: var(--ct-color-primary);
+      }
+    }
+
+    &__label {
+      padding-left: 6px;
+      font-weight: 400;
+    }
+
+    &__inner {
+      &::after {
+        width: 8px;
+        height: 8px;
+      }
+    }
+
+    &__input {
+      &.is-checked {
+        @{R}__inner {
+          background: #fff;
+
+          &::after {
+            background-color: var(--ct-color-primary);
+          }
+        }
+      }
+    }
+  }
+
+  &-checkbox {
+    margin-right: 34px;
+    @R: .el-checkbox;
+
+    &:not(.is-disabled):hover {
+      color: var(--ct-color-primary);
+
+      @{R}__inner {
+        border-color: var(--ct-color-primary);
+      }
+    }
+
+    &__label {
+      padding-left: 6px;
+      font-weight: 400;
+    }
+  }
+
+  &-input {
+    &__wrapper {
+      padding: 1px var(--ct-component-inner-padding);
+
+      &:focus-within {
+
+        .ct-icon,
+        .el-icon {
+          color: var(--ct-color-primary);
+        }
+      }
+    }
+
+    &__suffix {
+      &-inner {
+        line-height: calc(var(--el-input-height) - 2px);
+      }
+    }
+    &.is-disabled {
+      .el-input__inner {
+        -webkit-text-fill-color: unset;
+      }
+    }
+  }
+
+  &-select {
+    --ct-select-poper-border: none;
+    --ct-select-focus-icon-color: var(--ct-color-primary);
+
+    &__popper {
+      font-size: var(--ct-font-size);
+
+      &.el-popper {
+        &.is-light {
+          border: var(--ct-select-poper-border);
+
+          .el-popper__arrow {
+            &::before {
+              border: var(--ct-select-poper-border);
+            }
+          }
+        }
+      }
+    }
+
+    &-dropdown {
+      --ct-select-item-height: calc(var(--ct-component-size, 30px) - 2px);
+      @R: .el-select-dropdown;
+
+      .el-scrollbar.is-empty {
+        @{R}__wrap {
+          display: none;
+        }
+      }
+
+      &__wrap {
+        padding: 10px 0 4px;
+      }
+
+      &__item {
+        height: var(--ct-select-item-height);
+        line-height: var(--ct-select-item-height);
+        margin: 0 6px 6px;
+        padding: 0 10px;
+        border-radius: var(--ct-border-radius);
+
+        &:hover,
+        &.hover {
+          background-color: var(--ct-component-hover-color);
+        }
+
+        &.selected {
+          font-weight: 400;
+        }
+      }
+
+      &.is-multiple {
+        @{R}__item {
+          &.selected {
+            &::after {
+              right: var(--ct-component-inner-padding);
+            }
+          }
+        }
+      }
+    }
+
+    .el-input {
+      &.is-focus {
+        .el-input__suffix {
+
+          .el-icon,
+          .ct-icon {
+            color: var(--ct-select-focus-icon-color);
+          }
+        }
+      }
+    }
+  }
+
+  &-cascader {
+    .el-input {
+      &.is-focus {
+        .el-input__wrapper {
+
+          .el-icon,
+          .ct-icon {
+            color: var(--ct-color-primary);
+          }
+        }
+      }
+    }
+
+    &__dropdown {}
+
+    &-menu {
+      &__list {
+        padding: 10px 6px;
+      }
+    }
+
+    &-panel {
+      --el-cascader-menu-border: 1px solid #F0F3F9;
+    }
+
+    &-node {
+      height: var(--ct-cascader-node-height);
+      padding: 0;
+      line-height: var(--ct-cascader-node-height);
+      border-radius: var(--ct-border-radius);
+
+      &:not(:first-child) {
+        margin-top: 6px;
+      }
+
+      &__label {
+        padding: 0 10px;
+      }
+
+      &__prefix {
+        display: none;
+      }
+
+      .arrow-right {
+        color: var(--ct-color-grey-tip);
+      }
+
+      &.in-active-path,
+      &.is-active,
+      &.is-selectable.in-checked-path {
+        font-weight: 400;
+
+        .arrow-right {
+          color: var(--ct-color-primary);
+        }
+      }
+
+      >.el-radio,
+      >.el-checkbox {
+        margin-left: 10px;
+        margin-right: -2px;
+      }
+    }
+
+    &__suggestion {
+      &-list {
+        padding: 10px 6px;
+      }
+
+      &-item {
+        height: 30px;
+        padding: 0 10px;
+        border-radius: var(--ct-border-radius);
+
+        &:not(:first-child) {
+          margin-top: 6px;
+        }
+
+        &.is-checked {
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  &-date-editor {
+    &.el-range-editor {
+      &:not(.is-active):focus-within {
+
+        .ct-icon,
+        .el-icon {
+          color: var(--el-input-icon-color);
+        }
+      }
+    }
+
+    &.is-active {
+
+      .ct-icon,
+      .el-icon {
+        color: var(--ct-color-primary);
+      }
+    }
+
+    .el-range-separator {
+      color: var(--ct-color-grey-sub);
+    }
+
+    &.el-input__wrapper {
+      padding: 1px var(--ct-component-inner-padding);
+    }
+
+    .el-input__prefix,
+    .el-range__icon {
+      position: absolute;
+      right: var(--ct-component-inner-padding);
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 16px;
+
+      .el-input__icon {
+        margin-right: 0;
+        background-color: inherit;
+      }
+    }
+
+    .el-range__close-icon i,
+    .clear-icon {
+      position: relative;
+      width: 16px;
+      z-index: 2;
+      background-color: #fff;
+    }
+  }
+
+  &-date-picker {
+    --el-datepicker-header-text-color: var(--ct-color-grey-transition);
+    --ct-datepicker-border-color: #F0F3F9;
+    width: 304px;
+    @R: .el-picker-panel;
+
+    @{R}__content {
+      margin: 0 auto;
+    }
+
+    &__header {
+      height: 44px;
+      margin: 0;
+      padding: 0 22px;
+      line-height: 44px;
+      border-bottom: 1px solid var(--ct-datepicker-border-color);
+
+      .el-picker-panel__icon-btn {
+        color: var(--ct-color-grey-transition);
+
+        &:hover {
+          color: var(--ct-color-primary);
+        }
+      }
+
+      &-label {
+        font-size: 14px;
+        font-weight: 600;
+      }
+    }
+
+    .el-picker-panel__content {
+      width: 304px;
+    }
+  }
+
+  &-month-table,
+  &-year-table {
+    padding: 9px 12px;
+    font-size: 14px;
+
+    td {
+      padding: 9px;
+
+      >div {
+        height: 26px;
+        padding: 0;
+      }
+
+      .cell {
+        width: 50px;
+        height: 26px;
+        line-height: 26px;
+        border-radius: 4px;
+      }
+
+      &.today {
+        .cell {
+          font-weight: 400;
+          border: 1px solid var(--ct-color-primary);
+        }
+      }
+
+      &.current {
+        .cell {
+          background-color: var(--ct-color-primary);
+          color: #fff !important;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  &-date-range-picker {
+    --ct-datepicker-border-color: #F0F3F9;
+    --el-datepicker-inrange-bg-color: #F5F7FC;
+    --el-datepicker-inner-border-color: var(--ct-datepicker-border-color);
+    --el-datepicker-header-text-color: var(--ct-color-grey-transition);
+    width: 608px;
+
+    &__content {
+      padding: 0;
+    }
+
+    &__header {
+      height: 44px;
+      padding: 0 24px;
+      line-height: 44px;
+      border-bottom: 1px solid var(--ct-datepicker-border-color);
+
+      div {
+        font-size: 14px;
+        font-weight: 600;
+      }
+    }
+
+    .el-picker-panel__icon-btn {
+      color: var(--ct-color-grey-transition);
+      margin-top: 14px;
+
+      &:hover {
+        color: var(--ct-color-primary);
+      }
+    }
+  }
+
+  &-date-table {
+    padding: 0 14px;
+    margin: 0;
+    margin-bottom: 14px;
+    font-size: 14px;
+
+    th {
+      padding: 9px 12.5px;
+    }
+
+    tr {
+      .in-range {
+        &:first-of-type {
+          .el-date-table-cell {
+            border-radius: 4px 0 0 4px;
+
+          }
+        }
+
+        &:last-of-type {
+          .el-date-table-cell {
+            border-radius: 0 4px 4px 0;
+          }
+        }
+      }
+    }
+
+    td {
+      &.today {
+        .el-date-table-cell {
+          &__text {
+            border: 1px solid var(--ct-color-primary);
+            font-weight: 400;
+          }
+        }
+      }
+
+      .el-date-table-cell {
+        height: 26px;
+        padding: 0;
+
+        .el-date-table-cell__text {
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+
+  &-picker {
+    &__popper {
+      &.is-light {
+        border: none;
+        box-shadow: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
+
+        .el-popper__arrow {
+          &::before {
+            border: none;
+          }
+        }
+      }
+    }
+  }
+
+  &-pagination {
+    @R: .el-pagination;
+    --el-pagination-border-radius: 4px;
+    --el-pagination-button-width: 28px;
+    --el-pagination-button-height: 28px;
+    --el-pagination-button-color: var(--ct-color-black);
+    --pagination-item-margin: 3px;
+    --el-component-size: 28px;
+    --el-border-color: var(--ct-border-color-light);
+    --el-text-color-regular: var(--ct-color-black);
+
+    .el-pager {
+      li {
+        margin: 0 var(--pagination-item-margin);
+      }
+    }
+
+    .btn-prev {
+      margin-right: var(--pagination-item-margin);
+    }
+
+    .btn-next {
+      margin-left: var(--pagination-item-margin);
+    }
+
+    &.have-border {
+      .pagination-border-item-style {
+        border: 1px solid var(--ct-border-color-light);
+
+        &:not([disabled]):hover {
+          border-color: var(--ct-color-primary);
+        }
+      }
+
+      .el-pager {
+        li {
+          .pagination-border-item-style;
+
+          &.is-active {
+            background-color: var(--ct-color-primary);
+            border-color: var(--ct-color-primary);
+            color: #fff;
+          }
+        }
+      }
+
+      .btn-prev,
+      .btn-next {
+        .pagination-border-item-style;
+      }
+    }
+
+    &.is-background {
+      --el-pagination-bg-color: var(--ct-color-bg);
+
+      .el-pager {
+        li {
+          margin: 0 var(--pagination-item-margin);
+        }
+      }
+
+      .btn-prev {
+        margin-right: var(--pagination-item-margin);
+      }
+
+      .btn-next {
+        margin-left: var(--pagination-item-margin);
+        margin-right: 0;
+      }
+
+      @{R}__jump {
+        .el-input__wrapper {
+          background-color: var(--ct-color-bg);
+          box-shadow: none;
+        }
+      }
+
+    }
+
+    &__jump {
+      margin-left: 34px;
+
+      .el-input {
+        width: 36px;
+
+        &__wrapper {
+          padding: 1px 5px;
+        }
+      }
+    }
+  }
+
+  &-table {
+    @R: .el-table;
+    font-size: 15px;
+    --el-table-header-text-color: var(--ct-font-color);
+    --el-table-header-bg-color: #F0F3F9;
+    // --el-table-row-hover-bg-color: #F7F9FD;
+    --el-table-row-hover-bg-color: #FAFAFC;
+
+    .cell {}
+
+    & @{R}__cell {
+      padding: 16px 0;
+    }
+
+    thead {
+      @{R}__cell {
+        padding: 15px 0;
+      }
+    }
+
+    th {
+      &@{R}__cell {
+        background-color: var(--el-table-header-bg-color);
+
+        &.is-leaf {
+          border-bottom-color: transparent;
+        }
+
+        &.is-sortable {
+          .caret-wrapper {
+            display: none;
+          }
+        }
+      }
+
+      &:first-of-type {
+        border-radius: 4px 0 0 4px;
+      }
+
+      &:last-of-type {
+        border-radius: 0 4px 4px 0;
+      }
+    }
+
+    @{R}-column {
+      &--selection {
+        .cell {
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  &-notification {
+    border-radius: var(--ct-border-radius-l);
+    box-shadow: 0px 4px 40px 0px rgba(52, 63, 77, 0.1);
+    padding: 16px 24px 30px;
+    border: none;
+    @R: .el-notification;
+
+    @{R}__group {
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    @{R}__title {
+      border-bottom: none;
+      padding-bottom: 0;
+      font-weight: 600;
+      color: var(--ct-color-black);
+      line-height: 24px;
+      font-size: var(--ct-font-title-s);
+    }
+
+    @{R}__content {
+      margin-top: 16px;
+      line-height: 26px;
+    }
+
+    @{R}__closeBtn {
+      top: 16px;
+      right: 16px;
+      color: #d9dee7;
+    }
+  }
+
+  &-button {
+    border-radius: 3px;
+    min-width: 80px;
+  }
+
+  &-message {
+    height: 40px;
+    padding: 11px 16px;
+    min-width: 540px;
+
+    .el-icon.el-message__icon {
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+
+      svg {
+        width: unset;
+        height: unset;
+      }
+    }
+
+    &__content {
+      line-height: 18px;
+    }
+
+    .el-icon.el-message__closeBtn {
+      width: 14px;
+      height: 14px;
+      right: 16px;
+      color: var(--ct-border-color);
+    }
+  }
+
+  &-message.ct-message--success {
+    background-color: var(--ct-color-success-bg);
+    border: var(--ct-color-success-border) 1px solid;
+  }
+
+  &-message.ct-message--info {
+    background-color: var(--ct-color-primary-bg);
+    border: var(--ct-color-primary-border) 1px solid;
+  }
+
+  &-message.ct-message--warning {
+    background-color: var(--ct-color-warning-bg);
+    border: var(--ct-color-warning-border) 1px solid;
+  }
+
+  &-message.ct-message--error {
+    background-color: var(--ct-color-danger-bg);
+    border: var(--ct-color-danger-border) 1px solid;
+  }
 }