From 70112b5c51691ba46947e9696a971ae8f342f46c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?= <188633308@qq.com> Date: Thu, 17 Jun 2021 14:12:03 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web-react/src/assets/style/frame/dark.less | 7 +- web-react/src/assets/style/frame/light.less | 7 +- web-react/src/assets/style/lib/button.less | 1 - .../src/assets/style/lib/tree-layout.less | 13 +--- web-react/src/assets/style/main.less | 72 ++++++------------- web-react/src/views/login/index.jsx | 2 +- .../login.less => views/login/index.less} | 14 ++-- 7 files changed, 35 insertions(+), 81 deletions(-) rename web-react/src/{assets/style/login.less => views/login/index.less} (81%) diff --git a/web-react/src/assets/style/frame/dark.less b/web-react/src/assets/style/frame/dark.less index 05e9afb..19da8cd 100644 --- a/web-react/src/assets/style/frame/dark.less +++ b/web-react/src/assets/style/frame/dark.less @@ -9,10 +9,5 @@ @logo-box-shadow: none; @header-action-color: fade(@white, 60%); @header-action-hover-color: @white; - @header-action-hover-background: fade(@white, 20%); - @header-search-color: @white; - @header-search-background: fade(@white, 15%); - @header-search-focus-background: fade(@white, 30%); - @header-search-icon-color: fade(@white, 60%); - @header-search-icon-hover-color: @white); + @header-action-hover-background: fade(@white, 20%)); } diff --git a/web-react/src/assets/style/frame/light.less b/web-react/src/assets/style/frame/light.less index a6425a9..ea9fb10 100644 --- a/web-react/src/assets/style/frame/light.less +++ b/web-react/src/assets/style/frame/light.less @@ -8,10 +8,5 @@ @logo-box-shadow: inset -1px -1px 1px @border-color-split; @header-action-color: fade(@black, 35%); @header-action-hover-color: @icon-color-hover; - @header-action-hover-background: fade(@black, 5%); - @header-search-color: @black; - @header-search-background: @white; - @header-search-focus-background: fade(@black, 5%); - @header-search-icon-color: fade(@black, 45%); - @header-search-icon-hover-color: fade(@black, 80%)); + @header-action-hover-background: fade(@black, 5%)); } diff --git a/web-react/src/assets/style/lib/button.less b/web-react/src/assets/style/lib/button.less index c2160f9..c14e462 100644 --- a/web-react/src/assets/style/lib/button.less +++ b/web-react/src/assets/style/lib/button.less @@ -1,5 +1,4 @@ @import (reference) '../extend.less'; -@btn-default-border: @border-color-split; .ant-btn { box-shadow: none; } diff --git a/web-react/src/assets/style/lib/tree-layout.less b/web-react/src/assets/style/lib/tree-layout.less index e840e7d..5bab956 100644 --- a/web-react/src/assets/style/lib/tree-layout.less +++ b/web-react/src/assets/style/lib/tree-layout.less @@ -13,17 +13,8 @@ background-color: @white; .header-actions { - >.ant-input-search { - .ant-input { - color: @black; - background-color: @white; - &:focus { - background-color: fade(@black, 5%); - } - } - .anticon-search { - color: fade(@black, 45%); - } + .ant-input-search { + margin: (@layout-header-height - 20px - 32px) / 2 @padding-md; } } } diff --git a/web-react/src/assets/style/main.less b/web-react/src/assets/style/main.less index 722cbd9..e0f4171 100644 --- a/web-react/src/assets/style/main.less +++ b/web-react/src/assets/style/main.less @@ -9,13 +9,7 @@ @logo-box-shadow: none, @header-action-color: fade(@white, 60%), @header-action-hover-color: @white, - @header-action-hover-background: fade(@white, 20%), - @header-search-color: @white, - @header-search-background: fade(@white, 15%), - @header-search-focus-background: fade(@white, 30%), - @header-search-icon-color: fade(@white, 60%), - @header-search-icon-hover-color: @white, -) { + @header-action-hover-background: fade(@white, 20%)) { .yo-layout--spin { position: absolute; top: 0; @@ -55,26 +49,24 @@ box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05); } } - >.ant-input-search, - >.ant-select-auto-complete { - display: flex; - align-items: center; - - margin: 5px @padding-md; - .ant-input { - height: 34px; - padding: 5px 30px 5px 11px; - - transition: @animation-duration-slow; - transition-property: background-color; - - border-color: transparent; - &:focus { - box-shadow: none; + .ant-select-auto-complete { + margin: (@layout-header-height - 10px - 30px) / 2 @padding-md; + .ant-input-affix-wrapper { + border: 0; + background-color: fade(@white, 15%); + &:focus, + &-focused { + background-color: fade(@white, 30%); + } + .ant-input { + color: fade(@white, 85%); + background-color: transparent; + } + .ant-input-suffix { + .anticon { + color: fade(@white, 60%); + } } - } - .ant-select-selection { - background-color: transparent; } } } @@ -160,6 +152,8 @@ } .ant-layout-content { position: relative; + + overflow-y: auto; >.yo-tab-external-mount { position: absolute; top: 0; @@ -474,18 +468,8 @@ } } } - >.ant-input-search, - >.ant-select-auto-complete { - .ant-input { - &:focus { - background-color: fade(@black, 5%); - } - } - } } } - .layout-sider { - } >section { >.ant-layout-sider { .yo-layout-sider(); @@ -534,22 +518,6 @@ } } } - >.ant-input-search, - >.ant-select-auto-complete { - .ant-input { - color: @header-search-color; - background-color: @header-search-background; - &:focus { - background-color: @header-search-focus-background; - } - } - .anticon-search { - color: @header-search-icon-color; - &:hover { - color: @header-search-icon-hover-color; - } - } - } } .user-container { margin: (@layout-header-height - 40px) / 2 0; diff --git a/web-react/src/views/login/index.jsx b/web-react/src/views/login/index.jsx index 263c9e6..031b9c3 100644 --- a/web-react/src/views/login/index.jsx +++ b/web-react/src/views/login/index.jsx @@ -5,7 +5,7 @@ import { encryptByRSA } from 'util/rsa' import { RSA_PUBLIC_KEY } from 'util/global' import { api } from 'common/api' import { token } from 'common/token' -import 'assets/style/login.less' +import './index.less' export default class index extends Component { diff --git a/web-react/src/assets/style/login.less b/web-react/src/views/login/index.less similarity index 81% rename from web-react/src/assets/style/login.less rename to web-react/src/views/login/index.less index a0e48ee..3fdfe6a 100644 --- a/web-react/src/assets/style/login.less +++ b/web-react/src/views/login/index.less @@ -1,4 +1,4 @@ -@import (reference) './app.less'; +@import (reference) 'assets/style/app.less'; .yo-login { position: fixed; top: 0; @@ -52,6 +52,8 @@ margin-bottom: 0; } .ant-form-item-label { + padding: @padding-xs 0 0 !important; + transition: @animation-duration-base; transform: translate(0); >label { @@ -63,15 +65,19 @@ transform: translate(11px, 28px); } } - .ant-input { + .ant-input, + .ant-input-affix-wrapper { border-width: 0 0 @border-width-base 0 !important; border-color: fade(@black, 10%); background-color: transparent; } .ant-input:hover, - .ant-input:focus { + .ant-input:focus, + .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover, + .ant-input-affix-wrapper:focus, + .ant-input-affix-wrapper-focused { border-width: 0 0 @border-width-base 0 !important; border-color: @primary-color; - box-shadow: none; + box-shadow: none !important; } }