Button
.ant-btn {
border-radius: 10px
;
height: 38px
;
line-height: 38px
;
}
.ant-btn:hover {
opacity: 0.7
;
}
.ant-btn-primary {
background: #0062FF
;
border-color: #0062FF
;
}
.ant-btn-primary:hover {
background: #0062FF
;
border-color: #0062FF
;
opacity: 0.7
;
}
.ant-btn-primary:focus {
background: #0062FF
;
border-color: #0062FF
;
}
Select
.ant-select-selection {
border: none
;
border-bottom: 1px solid
rgba(226,226,234,1
);
border-radius: 0
;
}
.ant-select-selection.ant-select-selection--single {
border: none
;
border-bottom: 1px solid
rgba(226,226,234,1
);
box-shadow: none
;
}
.ant-select-selection.ant-select-selection--single:hover {
border-color: rgba(0,98,255,0.7
)
}
.ant-select-selection.ant-select-selection--single:focus {
border-color: rgba(0,98,255,1
)
}
.ant-select-dropdown {
border-radius: 10px
;
padding: 0
;
}
.ant-select-dropdown-menu {
padding: 0
;
}
.ant-select-dropdown-menu-item {
font-family: 'PingFangSC-Medium,PingFang SC';
border-radius: 10px
;
padding-left: 15px
;
height: 45px
;
line-height: 35px
;
}
Checkbox
.ant-checkbox .ant-checkbox-inner {
}
.ant-checkbox-indeterminate .ant-checkbox-inner::after {
background-color: #3DD598
;
}
.ant-checkbox-wrapper:hover .ant-checkbox-inner {
border: 1px solid #3DD598
;
}
.ant-checkbox-checked::after {
border: none
;
border: 1px solid #3DD598
;
}
.ant-checkbox-input:focus + .ant-checkbox-inner {
border: 1px solid #3DD598
!important;
}
.ant-checkbox-checked .ant-checkbox-inner {
border: 1px solid #3DD598
;
background: #3DD598
;
}
Dropdown
该样式可自己设置 class，直接修改样式
Modal 样式
.ant-modal-content {
border-radius: 10px
;
}
.ant-modal-header {
height: 60px
;
border-radius: 10px 10px 0 0
;
}
.ant-modal-title {
font-size: 16px
;
font-weight: 500
;
font-family: PingFangSC-Medium,PingFang SC
;
color: rgba(68,68,79,1
);
line-height: 32px
;
}
.ant-modal-body {
padding: 20px
;
font-family: PingFangSC-Medium,PingFang SC
;
}
Table
.ant-table {
border-radius: 10px 10px 0 0
;
overflow: hidden
;
}
.ant-table-thead > tr > th {
border: none
;
height: 52px
;
background: rgba(250,250,251,1
) !important;
padding: 0 16px
;
font-size: 16px
;
font-family: PingFangSC-Semibold,PingFang SC
;
}
.ant-table-thead > tr > th:first-child {
border-radius: 10px 0 0 10px
;
}
.ant-table-thead > tr > th:last-child {
border-radius: 0 10px 10px 0
;
}
.ant-table-tbody > tr {
background: rgba(255,255,255,1
);
font-size: 14px
;
font-family: Poppins-Regular,Poppins
;
font-weight: 400
;
color: rgba(23,23,37,1
);
height: 66px
;
box-sizing: border-box
;
}
.ant-table-tbody > tr > td {
background: rgba(255,255,255,1
) !important;
border-top: 1px solid
rgba(255,255,255,1
);
border-bottom: 1px solid
rgba(255,255,255,1
);
padding: 12px
;
height: 66px
;
}
.ant-table-tbody > tr > td:first-child {
border-left: 1px solid
rgba(255,255,255,1
);
border-radius: 15px 0 0 15px
;
}
.ant-table-tbody > tr > td:last-child {
border-right: 1px solid
rgba(255,255,255,1
);
border-left: none
!important;
border-radius: 0 15px 15px 0
;
}
.ant-table-row-hover > td {
border-color: rgba(61,213,152,1
) !important;
}
.ant-table-row-hover > td:last-child {
border-left: none
!important;
}
.ant-table-pagination.ant-pagination {
margin: 90px 0 10px 0
!important;
}
.ant-pagination-options {
margin-left: 10px
;
}
.ant-pagination-options-size-changer.ant-select {
margin-right: 0
;
}
.ant-pagination-options .ant-select-selection {
border-radius: 10px
;
}
.ant-table-tbody .ant-table-selection-column {
padding-left: 11px
;
}
.editable-cell {
position: relative
;
}
.editable-cell-value-wrap {
padding: 6px 12px 5px 5px
;
cursor: pointer
;
}
.editable-row:hover .editable-cell-value-wrap {
padding: 6px 12px 5px 5px
;
min-height: 32px
;
}
.ant-table-tbody .ant-input {
font-family:Poppins-Regular,Poppins
;
color:rgba(23,23,37,1
);
border: none
;
border-bottom: 1px solid
rgba(226,226,234,1
);
border-radius: 0
;
box-shadow: none
!important;
padding-left: 5px
;
padding-bottom: 0
!important;
}
.ant-table-tbody .ant-input:hover {
}
.ant-table-tbody .ant-input:focus {
border: none
;
border-bottom: 1px solid #d9d9d9
!important;
padding-bottom: 0
!important
}
Alert
.ant-alert.ant-alert-no-icon {
padding: 8px 15px
;
}
.ant-alert-info {
background:rgba(255,255,255,1
);
box-shadow:0 4px 10px 0
rgba(196,203,216,0.25
);
}
.ant-alert {
-webkit-box-sizing: border-box
;
box-sizing: border-box
;
margin: 0
;
color: rgba(0,0,0,.65
);
font-size: 14px
;
font-variant: tabular-nums
;
line-height: 1.5
;
list-style: none
;
-webkit-font-feature-settings: "tnum";
font-feature-settings: "tnum";
position: relative
;
padding: 8px 15px 8px 37px
;
word-wrap: break-word
;
border: none
;
border-radius: 10px
;
margin-bottom: 20px
;
}
Input
.borderNone .ant-input {
border: none
;
}
.borderNone .anticon {
color: #92929D
;
}
.borderNone .ant-input-affix-wrapper .ant-input:hover {
}
.borderNone .ant-input-affix-wrapper .ant-input:focus{
border: none
;
border-bottom: 0 solid white
!important;
box-shadow: none
;
}
.borderNone .ant-input-affix-wrapper .ant-input:not(:first-child) {
padding-left: 35px
;
}
