|
@@ -201,43 +201,317 @@ ul li {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 全局按钮样式
|
|
// 全局按钮样式
|
|
|
-.ant-btn-primary {
|
|
|
|
|
- background: $primary-color;
|
|
|
|
|
- border: 1px solid $primary-color;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- transition: $transition-base;
|
|
|
|
|
|
|
+.ant-btn {
|
|
|
|
|
+ border-radius: $radius-lg; // 8px - follow global specs
|
|
|
|
|
+
|
|
|
|
|
+ &.ant-btn-primary {
|
|
|
|
|
+ background: $primary-color;
|
|
|
|
|
+ border: 1px solid $primary-color;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ transition: $transition-base;
|
|
|
|
|
+ box-shadow: $shadow-sm;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: $primary-light;
|
|
|
|
|
+ border-color: $primary-light;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ background: $primary-dark;
|
|
|
|
|
+ border-color: $primary-dark;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
|
|
|
+ transform: translateY(0);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:focus {
|
|
|
|
|
+ background: $primary-color;
|
|
|
|
|
+ border-color: $primary-color;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:disabled {
|
|
|
|
|
+ background: $bg-tertiary;
|
|
|
|
|
+ border-color: $border-base;
|
|
|
|
|
+ color: $text-disabled;
|
|
|
|
|
+ box-shadow: none;
|
|
|
|
|
+ transform: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 输入框组件
|
|
|
|
|
+.ant-input,
|
|
|
|
|
+.ant-input-affix-wrapper,
|
|
|
|
|
+.ant-input-number,
|
|
|
|
|
+.ant-input-password {
|
|
|
|
|
+ border-radius: $radius-lg !important;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &:focus {
|
|
|
|
|
+ border-color: $primary-color !important;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ant-input-affix-wrapper-focused,
|
|
|
|
|
+.ant-input-affix-wrapper:focus {
|
|
|
|
|
+ border-color: $primary-color !important;
|
|
|
|
|
+ box-shadow: 0 0 0 2px rgba($primary-color, 0.1) !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 下拉选择框
|
|
|
|
|
+.ant-select {
|
|
|
|
|
+ .ant-select-selector {
|
|
|
|
|
+ border-radius: $radius-lg !important;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &:focus {
|
|
|
|
|
+ border-color: $primary-color !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.ant-select-focused .ant-select-selector {
|
|
|
|
|
+ border-color: $primary-color !important;
|
|
|
|
|
+ box-shadow: 0 0 0 2px rgba($primary-color, 0.1) !important;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 下拉菜单
|
|
|
|
|
+.ant-select-dropdown,
|
|
|
|
|
+.ant-dropdown {
|
|
|
|
|
+ border-radius: $radius-lg !important;
|
|
|
|
|
+ box-shadow: $shadow-lg !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 模态框
|
|
|
|
|
+.ant-modal {
|
|
|
|
|
+ border-radius: $radius-2xl !important;
|
|
|
|
|
+
|
|
|
|
|
+ .ant-modal-header {
|
|
|
|
|
+ border-radius: $radius-2xl $radius-2xl 0 0 !important;
|
|
|
|
|
+ border-bottom: 1px solid $border-base;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ant-modal-footer {
|
|
|
|
|
+ border-top: 1px solid $border-base;
|
|
|
|
|
+
|
|
|
|
|
+ .ant-btn {
|
|
|
|
|
+ border-radius: $radius-lg;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 抽屉
|
|
|
|
|
+.ant-drawer {
|
|
|
|
|
+ .ant-drawer-header {
|
|
|
|
|
+ border-bottom: 1px solid $border-base;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ant-drawer-footer {
|
|
|
|
|
+ border-top: 1px solid $border-base;
|
|
|
|
|
+ border-radius: 0;
|
|
|
|
|
+
|
|
|
|
|
+ .ant-btn {
|
|
|
|
|
+ border-radius: $radius-lg;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 表格
|
|
|
|
|
+.ant-table {
|
|
|
|
|
+ border-radius: $radius-lg !important;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ thead {
|
|
|
|
|
+ .ant-table-cell {
|
|
|
|
|
+ background: $bg-tertiary;
|
|
|
|
|
+ font-weight: $font-weight-semibold;
|
|
|
|
|
+ color: $text-primary;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ tbody {
|
|
|
|
|
+ .ant-table-row {
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: $bg-hover !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ant-table-cell {
|
|
|
|
|
+ border-bottom-color: $border-light;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 卡片
|
|
|
|
|
+.ant-card {
|
|
|
|
|
+ border-radius: $radius-xl !important;
|
|
|
|
|
+ border: 1px solid $border-light !important;
|
|
|
box-shadow: $shadow-sm;
|
|
box-shadow: $shadow-sm;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
&:hover {
|
|
&:hover {
|
|
|
- background: $primary-light;
|
|
|
|
|
- border-color: $primary-light;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
|
|
+ box-shadow: $shadow-md;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- &:active {
|
|
|
|
|
- background: $primary-dark;
|
|
|
|
|
- border-color: $primary-dark;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
|
|
|
- transform: translateY(0);
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .ant-card-head {
|
|
|
|
|
+ border-radius: $radius-xl $radius-xl 0 0 !important;
|
|
|
|
|
+ font-weight: $font-weight-semibold;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .ant-card-body {
|
|
|
|
|
+ padding: $spacing-4;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 标签
|
|
|
|
|
+.ant-tag {
|
|
|
|
|
+ border-radius: $radius-md !important;
|
|
|
|
|
+ padding: $spacing-1 $spacing-2;
|
|
|
|
|
+ font-size: $font-sm;
|
|
|
|
|
+
|
|
|
|
|
+ &.ant-tag-processing {
|
|
|
|
|
+ background: $tag-bg-blue !important;
|
|
|
|
|
+ color: $tag-text-blue !important;
|
|
|
|
|
+ border-color: transparent !important;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.ant-tag-success {
|
|
|
|
|
+ background: $tag-bg-teal !important;
|
|
|
|
|
+ color: $tag-text-teal !important;
|
|
|
|
|
+ border-color: transparent !important;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.ant-tag-warning {
|
|
|
|
|
+ background: $tag-bg-amber !important;
|
|
|
|
|
+ color: $tag-text-amber !important;
|
|
|
|
|
+ border-color: transparent !important;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.ant-tag-error {
|
|
|
|
|
+ background: $tag-bg-rose !important;
|
|
|
|
|
+ color: $tag-text-rose !important;
|
|
|
|
|
+ border-color: transparent !important;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 消息提示
|
|
|
|
|
+.ant-message {
|
|
|
|
|
+ .ant-message-notice-content {
|
|
|
|
|
+ border-radius: $radius-lg;
|
|
|
|
|
+ box-shadow: $shadow-lg;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 通知
|
|
|
|
|
+.ant-notification-notice {
|
|
|
|
|
+ border-radius: $radius-lg !important;
|
|
|
|
|
+ box-shadow: $shadow-lg !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 弹出框
|
|
|
|
|
+.ant-popover {
|
|
|
|
|
+ .ant-popover-inner {
|
|
|
|
|
+ border-radius: $radius-lg !important;
|
|
|
|
|
+ box-shadow: $shadow-lg !important;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ant-popover-inner-content {
|
|
|
|
|
+ border-radius: $radius-lg;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 工具提示
|
|
|
|
|
+.ant-tooltip {
|
|
|
|
|
+ .ant-tooltip-inner {
|
|
|
|
|
+ border-radius: $radius-md !important;
|
|
|
|
|
+ background: $text-primary;
|
|
|
|
|
+ padding: $spacing-2 $spacing-3;
|
|
|
|
|
+ font-size: $font-sm;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 表单
|
|
|
|
|
+.ant-form-item-label > label {
|
|
|
|
|
+ font-weight: $font-weight-medium;
|
|
|
|
|
+ color: $text-primary;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 单选框和复选框
|
|
|
|
|
+.ant-radio-wrapper,
|
|
|
|
|
+.ant-checkbox-wrapper {
|
|
|
|
|
+ font-size: $font-base;
|
|
|
|
|
+ color: $text-primary;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ant-radio-inner,
|
|
|
|
|
+.ant-checkbox-inner {
|
|
|
|
|
+ border-radius: $radius-sm !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 步骤条
|
|
|
|
|
+.ant-steps {
|
|
|
|
|
+ .ant-steps-item-icon {
|
|
|
|
|
+ border-radius: $radius-full !important;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ant-steps-item-title {
|
|
|
|
|
+ font-weight: $font-weight-medium;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 日期选择器
|
|
|
|
|
+.ant-picker {
|
|
|
|
|
+ border-radius: $radius-lg !important;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover,
|
|
|
&:focus {
|
|
&:focus {
|
|
|
- background: $primary-color;
|
|
|
|
|
- border-color: $primary-color;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
|
|
|
|
|
|
|
+ border-color: $primary-color !important;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- &:disabled {
|
|
|
|
|
- background: $bg-tertiary;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ &.ant-picker-focused {
|
|
|
|
|
+ border-color: $primary-color !important;
|
|
|
|
|
+ box-shadow: 0 0 0 2px rgba($primary-color, 0.1) !important;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ant-picker-panel-container {
|
|
|
|
|
+ border-radius: $radius-lg !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 上传组件
|
|
|
|
|
+.ant-upload {
|
|
|
|
|
+ border-radius: $radius-lg !important;
|
|
|
|
|
+
|
|
|
|
|
+ &.ant-upload-drag {
|
|
|
|
|
+ border-radius: $radius-xl !important;
|
|
|
border-color: $border-base;
|
|
border-color: $border-base;
|
|
|
- color: $text-disabled;
|
|
|
|
|
- box-shadow: none;
|
|
|
|
|
- transform: none;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ border-color: $primary-color !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 列表
|
|
|
|
|
+.ant-list {
|
|
|
|
|
+ .ant-list-item {
|
|
|
|
|
+ border-radius: $radius-lg;
|
|
|
|
|
+ padding: $spacing-3 $spacing-4;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: $bg-hover;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+// 分割线
|
|
|
|
|
+.ant-divider {
|
|
|
|
|
+ border-color: $border-light;
|
|
|
|
|
+ margin: $spacing-4 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
// ==================== 排序按钮组 ====================
|
|
// ==================== 排序按钮组 ====================
|
|
|
.sort-buttons {
|
|
.sort-buttons {
|
|
|
border: 1px solid $border-base;
|
|
border: 1px solid $border-base;
|