@arco-themes/react-cecloud-tds-design 0.0.1

package/README.md

@@ -0,0 +1,84 @@
+
+
+# @arco-themes/react-cecloud-tds-design
+
+Powered By [ArcoDesign](https://arco.design/)
+
+[Click to Preview](https://arco.design/themes/design/18924)
+
+## Installation
+
+```
+npm install @arco-themes/react-cecloud-tds-design
+```
+
+## Changelog
+
+
+- 0.0.1
+
+    Release: 
+   - InputTag: 
+   - Progress: 
+   - Modal: 
+   - Tree: 
+   - Cascader: 
+   - DatePicker: 
+   - Radio: 
+   - TimePicker: 
+   - Select: 
+   - Tabs: 
+   - Table: 
+   - Menu: 
+   - Form: 
+   - Input: 
+   - Tooltip: 
+   - InputNumber: 
+   - AutoComplete: 
+   - TreeSelect: 
+   - Empty: 
+   - Button: 
+   - Message: 
+   - Pagination: 
+   - Drawer: 
+   - Transfer: 
+   - Global: 
+   - Checkbox: 
+   - Descriptions: 
+   - Upload: 
+   - Alert: 
+   - Switch: 
+   - Spin: 
+   - Link: 
+   - Slider: 
+   - Notification: 
+   - Avatar: 
+   - Size: 
+   - List: 
+   - Card: 
+   - Font: 
+   - Popconfirm: 
+   - Popover: 
+   - Anchor: 
+   - Divider: 
+   - Steps: 
+   - Collapse: 
+   - Dropdown: 
+   - Badge: 
+   - Comment: 
+   - Timeline: 
+   - Color: 
+   - Result: 
+   - Calendar: 
+   - Typography: 
+   - Breadcrumb: 
+   - ResizeBox: 
+   - PageHeader: 
+   - Tag: 
+   - Rate: 
+   - Shadow: 
+   - Skeleton: 
+   - Statistic: 
+   - Image: 
+
+    

package/component.less

@@ -0,0 +1,33 @@
+/* 自定义组件样式 */
+@import "./components/Alert/index.less";
+@import "./components/AutoComplete/index.less";
+@import "./components/Button/index.less";
+@import "./components/Cascader/index.less";
+@import "./components/Checkbox/index.less";
+@import "./components/DatePicker/index.less";
+@import "./components/Descriptions/index.less";
+@import "./components/Drawer/index.less";
+@import "./components/Empty/index.less";
+@import "./components/Form/index.less";
+@import "./components/Input/index.less";
+@import "./components/InputNumber/index.less";
+@import "./components/InputTag/index.less";
+@import "./components/Link/index.less";
+@import "./components/Menu/index.less";
+@import "./components/Message/index.less";
+@import "./components/Modal/index.less";
+@import "./components/Pagination/index.less";
+@import "./components/Progress/index.less";
+@import "./components/Radio/index.less";
+@import "./components/Select/index.less";
+@import "./components/Slider/index.less";
+@import "./components/Spin/index.less";
+@import "./components/Switch/index.less";
+@import "./components/Table/index.less";
+@import "./components/Tabs/index.less";
+@import "./components/TimePicker/index.less";
+@import "./components/Tooltip/index.less";
+@import "./components/Transfer/index.less";
+@import "./components/Tree/index.less";
+@import "./components/TreeSelect/index.less";
+@import "./components/Upload/index.less";

package/components/Alert/index.css

@@ -0,0 +1 @@
+.arco-alert{align-items:flex-start}.arco-alert .arco-alert-title+.arco-alert-content{color:var(--color-text-4)}

package/components/Alert/index.less

@@ -0,0 +1,7 @@
+.@{alert-prefix-cls} { 
+  align-items: flex-start;
+
+  .arco-alert-title+.arco-alert-content{
+    color: var(--color-text-4);
+  }
+}

package/components/AutoComplete/index.less

@@ -0,0 +1,3 @@
+.@{auto-complete-prefix-cls} { 
+  
+}

package/components/Button/index.css

@@ -0,0 +1 @@
+.arco-btn.arco-btn-size-default.arco-btn-icon-only{font-size:16px}.arco-btn-group{display:inline-flex}

package/components/Button/index.less

@@ -0,0 +1,9 @@
+.@{btn-prefix-cls} { 
+  &.arco-btn-size-default.arco-btn-icon-only{
+    font-size: 16px;
+  }
+
+  &-group{
+    display: inline-flex;
+  }
+}

package/components/Cascader/index.css

@@ -0,0 +1 @@
+.arco-cascader-addbefore{background-color:rgb(var(--primary-2))}

package/components/Cascader/index.less

@@ -0,0 +1,5 @@
+.@{cascader-prefix-cls} { 
+  &-addbefore{
+    background-color: rgb(var(--primary-2));
+  }
+}

package/components/Checkbox/index.css

@@ -0,0 +1 @@
+.arco-checkbox.arco-checkbox-checked .arco-checkbox-mask .arco-checkbox-mask-icon{color:var(--color-white)}.arco-checkbox.arco-checkbox-disabled .arco-checkbox-text{color:var(--color-text-2)}.arco-checkbox.arco-checkbox-disabled.arco-checkbox-checked .arco-checkbox-mask .arco-checkbox-mask-icon{color:var(--color-text-5)}

package/components/Checkbox/index.less

@@ -0,0 +1,15 @@
+.@{checkbox-prefix-cls} { 
+  &.arco-checkbox-checked .arco-checkbox-mask .arco-checkbox-mask-icon{
+    color: var(--color-white);
+  }
+
+  // 禁用文字色调整
+  &.arco-checkbox-disabled .arco-checkbox-text{
+    color: var(--color-text-2);
+  }
+
+  // 禁用对号颜色
+  &.arco-checkbox-disabled.arco-checkbox-checked .arco-checkbox-mask .arco-checkbox-mask-icon{
+    color: var(--color-text-5);
+  }
+}

package/components/DatePicker/index.css

@@ -0,0 +1 @@
+.arco-picker-container{background-color:var(--color-bg-1)}.arco-picker-suffix-icon svg{width:16px;height:16px;margin-top:2px}.arco-picker-range-container{background-color:var(--color-bg-1)}

package/components/DatePicker/index.less

@@ -0,0 +1,41 @@
+.@{picker-prefix-cls} { 
+  &-container{
+    background-color: var(--color-bg-1);
+  }
+  // &-focused .arco-picker-input-active input, 
+  // &-focused:hover .arco-picker-input-active input{
+  //   background: transparent;
+  // }
+  &-suffix-icon{
+    svg{
+      width: 16px;
+      height: 16px;
+      margin-top: 2px;
+    }
+  }
+}
+.@{date-panel-prefix-cls} { 
+
+}
+.@{time-picker-prefix-cls} { 
+
+}
+.@{quarter-panel-prefix-cls} { 
+
+}
+.@{year-panel-prefix-cls} { 
+
+}
+.@{week-panel-prefix-cls} { 
+
+}
+.@{range-picker-prefix-cls} { 
+  &-container{
+    background-color: var(--color-bg-1);
+  }
+}
+.@{date-picker-prefix-cls} { 
+}
+.@{month-panel-prefix-cls} { 
+
+}

package/components/Descriptions/index.css

@@ -0,0 +1 @@
+.arco-descriptions-layout-inline-horizontal .arco-descriptions-body{border-radius:8px;border:1px solid var(--color-border-2)}.arco-descriptions-layout-inline-horizontal .arco-descriptions-row:not(:last-child){border-bottom:1px solid var(--color-border-2)}.arco-descriptions-layout-inline-horizontal .arco-descriptions-item{height:42px;padding:0 0 0 24px}.arco-descriptions-layout-inline-horizontal .arco-descriptions-item:not(:last-child){border-right:1px solid var(--color-border-2)}.arco-descriptions-title{margin-bottom:8px;padding:5px 0}.arco-descriptions-item-label-inline{color:var(--color-text-4)}

package/components/Descriptions/index.less

@@ -0,0 +1,32 @@
+.@{descriptions-prefix-cls} { 
+  &-layout-inline-horizontal{
+    .arco-descriptions-body{
+      border-radius: 8px;
+      border: 1px solid var(--color-border-2);
+    }
+    .arco-descriptions-row:not(:last-child){
+      border-bottom: 1px solid var(--color-border-2);
+    }
+    .arco-descriptions-item{
+      &:not(:last-child){
+        border-right: 1px solid var(--color-border-2);
+      }
+      height: 42px;
+      padding: 0 0 0 24px;
+    }
+  }
+
+  // &.arco-descriptions-border:not(.arco-descriptions-rtl) .arco-descriptions-item,
+  // &.arco-descriptions-border:not(.arco-descriptions-rtl) .arco-descriptions-item-value {
+  //   border-right: 0;
+  // }
+
+  &-title{
+    margin-bottom: 8px;
+    padding: 5px 0;    
+  }
+
+  &-item-label-inline{
+    color: var(--color-text-4)
+  }
+}

package/components/Drawer/index.css

@@ -0,0 +1 @@
+.arco-drawer{background-color:var(--color-bg-1);box-shadow:0 4px 24px 0 rgba(16,27,47,0.08)}.arco-drawer-mask{background-color:transparent}.arco-drawer-footer{text-align:left}.arco-drawer-footer>.arco-btn.arco-btn-secondary{margin-left:0}

package/components/Drawer/index.less

@@ -0,0 +1,15 @@
+.@{drawer-prefix-cls} { 
+  background-color: var(--color-bg-1);
+  box-shadow: 0px 4px 24px 0px rgba(16, 27, 47, 0.08);
+
+  &-mask{
+    background-color: transparent;
+  }
+
+  &-footer{
+    text-align: left;
+    &>.arco-btn.arco-btn-secondary{
+      margin-left: 0;
+    }
+  }
+}

package/components/Empty/index.css

@@ -0,0 +1 @@
+.arco-empty-image{margin-bottom:0}.arco-empty-image .arco-icon{width:36px;height:36px}.arco-empty-wrapper .arco-empty-description{margin:16px 0;color:var(--color-text-5)}

package/components/Empty/index.less

@@ -0,0 +1,13 @@
+.@{empty-prefix-cls} { 
+  &-image{
+    margin-bottom: 0;
+    .arco-icon{
+      width: 36px;
+      height: 36px;
+    }
+  }
+  &-wrapper .arco-empty-description{
+    margin: 16px 0;
+    color: var(--color-text-5);
+  }
+}

package/components/Form/index.css

@@ -0,0 +1 @@
+.arco-form{color:var(--color-text-2)}.arco-form .arco-form-item>.arco-form-label-item{padding-right:4px}.arco-form-message{margin:4px 0 16px;line-height:18px}.arco-form input:-internal-autofill-previewed,.arco-form input:-internal-autofill-selected{-webkit-text-fill-color:var(--color-text-2);transition:background-color 5000s ease-in-out 0s !important}.arco-form .arco-row.arco-form-item-status-error .arco-select:not(.arco-select-disabled):hover .arco-select-view,.arco-form .arco-row.arco-form-item-status-error .arco-picker:not(.arco-picker-disabled):hover,.arco-form .arco-row.arco-form-item-status-warning .arco-select:not(.arco-select-disabled):hover .arco-select-view,.arco-form .arco-row.arco-form-item-status-warning .arco-picker:not(.arco-picker-disabled):hover{background-color:transparent}.arco-form .formblink-appear-done+.arco-form-extra,.arco-form .formblink-appear+.arco-form-extra{display:none}.arco-form.arco-form-inline .arco-form-label-item,.arco-form.arco-form-horizontal .arco-form-label-item{text-align:right;line-height:16px;min-height:32px;display:inline-flex !important;align-items:center;flex-direction:row-reverse}.arco-form.arco-form-inline .arco-form-label-item.arco-form-label-item-left,.arco-form.arco-form-horizontal .arco-form-label-item.arco-form-label-item-left{text-align:left;flex-direction:row}.arco-form-label-item .arco-form-item-tooltip{color:var(--color-text-3);font-size:16px;margin-bottom:-2px}

package/components/Form/index.less

@@ -0,0 +1,67 @@
+.@{form-prefix-cls} { 
+  color: var(--color-text-2);
+  
+  // 标签距离右侧4px
+  .arco-form-item > .arco-form-label-item {
+    padding-right: 4px;
+  }
+
+  &-message{
+    margin: 4px 0 16px;
+    line-height: 18px;
+  }
+
+  // input:-webkit-autofill,
+  // input:-webkit-autofill:hover,
+  // input:-webkit-autofill:focus,
+  // input:-webkit-autofill:active {
+  //   box-shadow: 0 0 0 1000px #1d9ae0 inset;
+  //   -webkit-text-fill-color: var(--color-text-2);
+  //   caret-color: var(--color-text-2);
+  //   -webkit-transition-delay: 111111s;
+  //   -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
+  // }
+ 
+  input:-internal-autofill-previewed,
+  input:-internal-autofill-selected {
+    -webkit-text-fill-color: var(--color-text-2);
+    transition: background-color 5000s ease-in-out 0s !important;
+  }
+  .arco-row{
+    &.arco-form-item-status-error .arco-select:not(.arco-select-disabled):hover .arco-select-view,
+    &.arco-form-item-status-error .arco-picker:not(.arco-picker-disabled):hover, 
+    &.arco-form-item-status-warning .arco-select:not(.arco-select-disabled):hover .arco-select-view,
+    &.arco-form-item-status-warning .arco-picker:not(.arco-picker-disabled):hover {
+      background-color: transparent;
+    }
+  }
+
+  // 校验信息展示时隐藏底部黑色提示信息
+  .formblink-appear-done + .arco-form-extra, 
+  .formblink-appear + .arco-form-extra{
+    display: none;
+  }
+
+  // form-label折行展示优化
+  &.arco-form-inline .arco-form-label-item,
+  &.arco-form-horizontal .arco-form-label-item {
+    text-align: right;
+    line-height: 16px;
+    min-height: 32px;
+    display: inline-flex !important;
+    align-items: center;
+    flex-direction: row-reverse;
+
+    &.arco-form-label-item-left{
+      text-align: left;
+      flex-direction: row;
+    }
+  }
+
+  // 标签中的提示图标样式
+  &-label-item .arco-form-item-tooltip{
+    color: var(--color-text-3);
+    font-size: 16px;
+    margin-bottom: -2px;
+  }
+}

package/components/Input/index.css

@@ -0,0 +1 @@
+.arco-input-size-default{line-height:18px}.arco-input-group .arco-input-group-addbefore{border-right:0}.arco-input-group .arco-input-group-addafter{border-left:0}.arco-input-group>:last-child,.arco-input-group>:first-child,.arco-input-group>.arco-input-inner-wrapper{border-radius:4px}.arco-input-group-addbefore .arco-select .arco-select-view,.arco-input-group-addafter .arco-select .arco-select-view{border-color:var(--color-border-1);background-color:var(--color-fill-4)}.arco-input-group-addbefore .arco-select-size-default.arco-select.arco-select-single .arco-select-view{height:32px}.arco-input-group-addafter .arco-select-size-default.arco-select.arco-select-single .arco-select-view{height:32px}.arco-input-group.arco-input-group-compact{display:inline-flex}.arco-input-group.arco-input-group-compact>:first-child{border-top-right-radius:0;border-bottom-right-radius:0}

package/components/Input/index.less

@@ -0,0 +1,51 @@
+.@{input-prefix-cls} { 
+  &-size-default{
+    line-height: 18px;
+  }
+
+  &-group{
+    .arco-input-group-addbefore{
+      border-right: 0;
+    }
+    .arco-input-group-addafter{
+      border-left: 0;
+    }
+
+    & > :last-child,
+    & > :first-child,
+    & > .arco-input-inner-wrapper{
+      border-radius: 4px;
+    }
+  }
+  &-group-addbefore .arco-select .arco-select-view,
+  &-group-addafter .arco-select .arco-select-view{
+    border-color: var(--color-border-1);
+    background-color: var(--color-fill-4);
+  }
+
+  // 解决缩放125对齐问题
+  &-group-addbefore{
+    .arco-select-size-default.arco-select.arco-select-single{
+      .arco-select-view{
+        height: 32px;
+      }
+    }
+  }
+  &-group-addafter{
+    .arco-select-size-default.arco-select.arco-select-single{
+      .arco-select-view{
+        height: 32px;
+      }
+    }
+  }
+  &-group.arco-input-group-compact{
+    display: inline-flex;
+    & > :first-child{
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+.@{textarea-prefix-cls} { 
+
+}

package/components/InputNumber/index.css

@@ -0,0 +1 @@
+.arco-input-number.arco-input-number-mode-button .arco-input-group>.arco-input-inner-wrapper{border-radius:0}.arco-input-number.arco-input-number-mode-button .arco-input-group-addbefore .arco-input-number-step-button{border:solid var(--color-border-1);border-width:1px 0 1px 1px;border-radius:4px 0 0 4px}.arco-input-number.arco-input-number-mode-button .arco-input-group-addbefore .arco-input-number-step-button:hover{background-color:var(--color-bg-white)}.arco-input-number.arco-input-number-mode-button .arco-input-group-addbefore .arco-input-number-step-button:hover .arco-icon{color:rgb(var(--primary-5))}.arco-input-number.arco-input-number-mode-button .arco-input-group-addbefore .arco-input-number-step-button.arco-input-number-step-button-disabled{background-color:var(--color-fill-2)}.arco-input-number.arco-input-number-mode-button .arco-input-group-addbefore .arco-input-number-step-button.arco-input-number-step-button-disabled .arco-icon{color:var(--color-text-6)}.arco-input-number.arco-input-number-mode-button .arco-input-group-addafter .arco-input-number-step-button{border:solid var(--color-border-1);border-width:1px 1px 1px 0;border-radius:0 4px 4px 0}.arco-input-number.arco-input-number-mode-button .arco-input-group-addafter .arco-input-number-step-button:hover{background-color:var(--color-bg-white)}.arco-input-number.arco-input-number-mode-button .arco-input-group-addafter .arco-input-number-step-button:hover .arco-icon{color:rgb(var(--primary-5))}.arco-input-number.arco-input-number-mode-button .arco-input-group-addafter .arco-input-number-step-button.arco-input-number-step-button-disabled{background-color:var(--color-fill-2)}.arco-input-number.arco-input-number-mode-button .arco-input-group-addafter .arco-input-number-step-button.arco-input-number-step-button-disabled .arco-icon{color:var(--color-text-6)}.arco-input-number.arco-input-number-mode-button .arco-input-group>.arco-input-inner-wrapper-focus{border-radius:0}

package/components/InputNumber/index.less

@@ -0,0 +1,49 @@
+.@{input-number-prefix-cls} { 
+  &.arco-input-number-mode-button .arco-input-group > .arco-input-inner-wrapper{
+    border-radius: 0;
+  }
+  &.arco-input-number-mode-button{
+    .arco-input-group-addbefore .arco-input-number-step-button{
+      border: solid var(--color-border-1);
+      border-width: 1px 0 1px 1px;
+      border-radius: 4px 0 0 4px;
+
+      &:hover{
+        background-color: var(--color-bg-white);
+        .arco-icon{
+          color: rgb(var(--primary-5));
+        }
+      }
+
+      &.arco-input-number-step-button-disabled{
+        background-color: var(--color-fill-2);
+        .arco-icon{
+          color: var(--color-text-6);
+        }
+      }
+    }
+    .arco-input-group-addafter .arco-input-number-step-button{
+      border: solid var(--color-border-1);
+      border-width: 1px 1px 1px 0;
+      border-radius: 0 4px 4px 0;
+
+      &:hover{
+        background-color: var(--color-bg-white);
+        .arco-icon{
+          color: rgb(var(--primary-5));
+        }
+      }
+
+      &.arco-input-number-step-button-disabled{
+        background-color: var(--color-fill-2);
+        .arco-icon{
+          color: var(--color-text-6);
+        }
+      }
+    }
+
+    .arco-input-group > .arco-input-inner-wrapper-focus{
+      border-radius: 0;
+    }
+  }
+}

package/components/InputTag/index.css

@@ -0,0 +1 @@
+.arco-input-tag-wrapper .arco-input-tag-addbefore,.arco-input-tag-wrapper .arco-input-tag-addafter{border:0}.arco-input-tag-wrapper .arco-input-tag:not(.arco-input-tag-focused):not(:first-child),.arco-input-tag-wrapper .arco-input-tag:not(.arco-input-tag-focused):not(:last-child){border-radius:4px}

package/components/InputTag/index.less

@@ -0,0 +1,10 @@
+.@{input-tag-prefix-cls} { 
+  &-wrapper .arco-input-tag-addbefore, 
+  &-wrapper .arco-input-tag-addafter{
+    border: 0;
+  }
+  &-wrapper .arco-input-tag:not(.arco-input-tag-focused):not(:first-child),
+  &-wrapper .arco-input-tag:not(.arco-input-tag-focused):not(:last-child){
+    border-radius: 4px;
+  }
+}

package/components/Link/index.css

@@ -0,0 +1 @@
+.arco-link{font-weight:600;display:inline-flex;align-items:center}.arco-link-icon{margin-right:4px}

package/components/Link/index.less

@@ -0,0 +1,9 @@
+.@{link-prefix-cls} { 
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+
+  &-icon {
+    margin-right: 4px;
+  }
+}

package/components/Menu/index.css

@@ -0,0 +1 @@
+.arco-menu-light .arco-menu-item.arco-menu-selected{background-color:rgb(var(--link-2))}.arco-menu-indent{width:34px}.arco-menu-indent+span.arco-menu-indent{width:12px}.arco-menu-inline-header{background-color:inherit !important}.arco-menu-vertical .arco-menu-item{margin:0 !important}.arco-menu-vertical .arco-menu-inline-header[aria-expanded="true"]{margin:0 !important}.arco-menu-vertical .arco-menu-inline-header{margin:0 !important}.arco-menu-vertical .arco-menu-item,.arco-menu-vertical .arco-menu-group-title,.arco-menu-vertical .arco-menu-pop-header,.arco-menu-vertical .arco-menu-inline-header{line-height:44px}

package/components/Menu/index.less

@@ -0,0 +1,59 @@
+.@{menu-prefix-cls} { 
+  &-light .arco-menu-item.arco-menu-selected{
+    background-color: rgb(var(--link-2));
+  }
+
+  &-indent {
+    width: 34px;
+    &+span.arco-menu-indent {
+      width: 12px;
+    }
+  }
+  
+  &-inline-header {
+    background-color: inherit !important;
+  }
+  // &-inline-header[aria-expanded="false"]:hover {
+  //   color: rgb(var(--primary-6)) !important;
+  // }
+  // &-inline-content {
+  //   background-color: inherit !important;
+  //   .arco-menu-item:not(.arco-menu-selected):hover {
+  //     background-color: rgb(var(--primary-2)) !important;
+  //     color: rgb(var(--primary-6)) !important;
+  //   }
+  //   // item 选中状态 颜色修改
+  //   .arco-menu-item.arco-menu-selected {
+  //     background-color: rgb(var(--primary-2)) !important;
+  //     color: rgb(var(--primary-6)) !important;
+  //   }
+  // }
+
+  // 去掉 menu-item的margin
+  &-vertical .arco-menu-item {
+    margin: 0 !important;
+    // margin-bottom: 4px !important;
+  }
+  // sub-menu 不会因收缩打开而位移
+  &-vertical .arco-menu-inline-header[aria-expanded="true"] {
+    // padding: 0 !important;
+    // padding-left: 12px !important;
+    margin: 0 !important;
+  }
+  &-vertical .arco-menu-inline-header {
+    margin: 0 !important;
+  }
+  // 收起的submenu hover状态下 icon颜色
+  // &-vertical .arco-menu-inline-header[aria-expanded="false"]:hover .arco-icon {
+  //   color: rgb(var(--primary-6)) !important;
+  // }
+
+  &-vertical{
+    .arco-menu-item,
+    .arco-menu-group-title,
+    .arco-menu-pop-header,
+    .arco-menu-inline-header{
+      line-height: 44px;
+    }
+  }  
+}

package/components/Message/index.css

@@ -0,0 +1 @@
+.arco-message-icon{font-size:16px}.arco-message-content{height:16px;line-height:16px}

package/components/Message/index.less

@@ -0,0 +1,10 @@
+.@{message-prefix-cls} { 
+  &-icon{
+    font-size: 16px;
+  }
+
+  &-content{
+    height: 16px;
+    line-height: 16px;
+  }
+}

package/components/Modal/index.css

@@ -0,0 +1 @@
+.arco-modal{background-color:var(--color-bg-1)}.arco-modal-header{padding:0 28px}.arco-modal-content{padding:0px 28px}.arco-modal-footer{padding:20px 28px}.arco-modal-simple{width:520px;padding:16px 28px 20px 28px}.arco-modal-simple .arco-modal-footer{margin-top:28px}.arco-modal .arco-modal-title{font-weight:600}.arco-modal.arco-modal-simple{padding-top:20px}.arco-modal.arco-modal-simple .arco-modal-header{margin-bottom:20px}.arco-modal.arco-modal-simple .arco-modal-footer{margin-top:20px}.arco-modal.arco-modal-simple .arco-modal-close-icon{right:20px}

package/components/Modal/index.less

@@ -0,0 +1,39 @@
+.@{modal-prefix-cls} { 
+  background-color: var(--color-bg-1);
+  &-header {
+    padding: 0 28px;
+  }
+  &-content {
+    padding: 0px 28px;
+  }
+  &-footer {
+    padding: 20px 28px;
+  }
+  &-simple {
+    width: 520px;
+    padding: 16px 28px 20px 28px;
+    .arco-modal-footer {
+      margin-top: 28px;
+    }
+  }
+  .arco-modal-title{
+    font-weight: 600;
+  }
+
+  // 简洁模式
+  &.arco-modal-simple{
+    padding-top: 20px;
+
+    .arco-modal-header{
+      margin-bottom: 20px;
+    }
+
+    .arco-modal-footer{
+      margin-top: 20px;
+    }
+
+    .arco-modal-close-icon{
+      right: 20px;
+    }
+  }
+}

package/components/Pagination/index.css

@@ -0,0 +1 @@
+.arco-pagination .arco-pagination-jumper-input{margin-left:8px}.arco-pagination-option{height:32px}.arco-pagination ul.arco-pagination-list ul,.arco-pagination ul.arco-pagination-list li{margin-left:0}.arco-pagination .arco-select .arco-select-view{color:var(--color-text-2)}

package/components/Pagination/index.less

@@ -0,0 +1,17 @@
+.@{pagination-prefix-cls} { 
+  & .arco-pagination-jumper-input{
+    margin-left: 8px;
+  }
+  &-option{
+    height: 32px;
+  }
+
+  ul.arco-pagination-list{
+    ul, li{
+      margin-left: 0;
+    }
+  }
+  .arco-select .arco-select-view{
+    color: var(--color-text-2);
+  }
+}

package/components/Progress/index.css

@@ -0,0 +1 @@
+.arco-progress-small .arco-progress-line-outer{height:4px !important}.arco-progress-default .arco-progress-line-outer{height:8px !important}.arco-progress-large .arco-progress-line-outer{height:12px !important}