feat(dark): add button and modal style

DTStack · Jul 24, 2020 · 38095dd · 38095dd
1 parent 66b3f5b
commit 38095dd
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 14 deletions.
diff --git a/theme/dt-theme/dark/button.less b/theme/dt-theme/dark/button.less
@@ -0,0 +1,77 @@
+@import '../const.less';
+
+.ant-btn {
+    padding: 0px 16px;
+    border-color: @primaryColor;
+    color: @primaryColor;
+    &:hover, &:focus {
+        border-color: @hoverColor;
+        color: @hoverColor;
+    }
+    &:active, &.active {
+        color: @clickColor;
+        border-color: @clickColor;
+    }
+}
+
+.ant-btn-primary {
+    color: #fff;
+    &:hover, &:focus {
+        color: #fff;
+        border-color: @hoverColor;
+        background-color: @hoverColor;
+    }
+    &:active, &.active {
+        color: #fff;
+        background-color: @clickColor;
+        border-color: @clickColor;
+    }
+}
+
+.ant-btn-danger {
+    color: #fff;
+    border-color: @red_dark;
+    background-color: @red_dark;
+    &:hover, &:focus {
+        color: #fff;
+        background-color: #f08e89;
+        border-color: #f08e89;
+    }
+    &:active, &.active {
+        color: #fff;
+        border-color: @red_dark;
+        background-color: @red_dark;
+    }
+}
+
+.ant-btn-link {
+    border-color: transparent;
+    &:hover, &:focus {
+        border-color: transparent;
+    }
+    &:active, &.active {
+        border-color: transparent;
+    }
+}
+
+.ant-btn-link-disabled,
+.ant-btn-link.disabled,
+.ant-btn-link[disabled],
+.ant-btn-link-disabled:hover,
+.ant-btn-link.disabled:hover,
+.ant-btn-link[disabled]:hover,
+.ant-btn-link-disabled:focus,
+.ant-btn-link.disabled:focus,
+.ant-btn-link[disabled]:focus,
+.ant-btn-link-disabled:active,
+.ant-btn-link.disabled:active,
+.ant-btn-link[disabled]:active,
+.ant-btn-link-disabled.active,
+.ant-btn-link.disabled.active,
+.ant-btn-link[disabled].active {
+    color: @white4D;
+}
+
+.ant-btn-lg {
+    height: 36px;
+}
diff --git a/theme/dt-theme/dark/index.less b/theme/dt-theme/dark/index.less
@@ -1,4 +1,6 @@
 @import './resetDark.less';
+@import './button.less';
+@import './modal.less';
 
 * {
     margin: 0;

diff --git a/theme/dt-theme/dark/modal.less b/theme/dt-theme/dark/modal.less
@@ -0,0 +1,45 @@
+@import '../const.less';
+
+.ant-modal-title {
+    font-weight: 500;
+}
+.ant-modal-content {
+    background-color: @blue2;
+}
+.ant-modal-header {
+    padding: 15px 20px;
+    border-bottom-color: @blue3;
+}
+.ant-modal-body {
+    padding: 24px 20px 28px;
+}
+.ant-modal-footer {
+    border-top: 0px;
+    padding: 20px;
+}
+.ant-modal-confirm {
+    width: 460px !important;
+}
+.ant-modal-confirm .ant-modal-body {
+    padding: 52px 20px 20px 32px;
+}
+.ant-modal-confirm-body .ant-modal-confirm-title {
+    font-size: 16px;
+}
+.ant-modal-confirm-body .ant-modal-confirm-content {
+    margin-top: 12px;
+    font-size: 14px;
+}
+.ant-modal-confirm .ant-modal-confirm-btns {
+    margin-top: 32px;
+}
+.ant-modal-confirm-body > .anticon {
+    font-size: 20px;
+    margin-right: 8px;
+}
+.ant-modal-confirm-body > .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content {
+    margin-left: 30px;
+}
+.ant-modal-confirm .ant-modal-confirm-btns {
+    margin-top: 36px;
+}
diff --git a/theme/dt-theme/dark/resetDark.less b/theme/dt-theme/dark/resetDark.less
@@ -445,27 +445,28 @@
 
 // dt-theme
 @primary-color: #3F87FF;
-// @heading-color: #333333;
+@heading-color: #F2F2F2;
 @font-size-base: 12px;
-// @text-color: #333333;
+@text-color: #BFBFBF;
 @border-radius-base: 2px;
-// @border-color-base: #DDDDDD;
-// @success-color: #16DE9A;
-// @error-color: #FF5F5C;
-// @warning-color: #FFB310;
-// @disabled-color: #BFBFBF;
-// @disabled-bg: #E8E8E8;
+@border-color-base: #272A40;
+@success-color: #00A755;
+@error-color: #E25F5D;
+@warning-color: #C28C3A;
+@disabled-color: #666666;
+@disabled-bg: #292D42;
 @btn-height-sm: 28px;
-// @btn-disable-border: #E8E8E8;
-// @input-placeholder-color: #999999;
+@btn-disable-border: #292D42;
+@input-placeholder-color: #666666;
 @input-height-lg: 36px;
 @input-height-sm: 28px;
 @input-hover-border-color: #3F87FF;
 @modal-footer-padding-horizontal: 20px;
 @form-item-margin-bottom: 20px;
-// @label-required-color: #FF5F5C;
-// @table-header-bg: #FAFAFA;
+@label-required-color: #E25F5D;
+@table-header-bg: #222433;
 @table-padding-vertical: 19px;
-// @item-hover-bg: #F2F9FF;
-// @select-item-selected-bg: #F2F9FF;
+@item-hover-bg: #292D42;
+@select-item-selected-bg: #292D42;
 @select-item-selected-font-weight: normal;
+@modal-header-bg: #1A1C29;