diff --git a/src/core/view/components/button/index.vue b/src/core/view/components/button/index.vue index e6c844752667ef67e1b6757eafe1bae217c82c9b..df1997ebefecb594165b7fd372dd1081038cb38b 100644 --- a/src/core/view/components/button/index.vue +++ b/src/core/view/components/button/index.vue @@ -178,7 +178,6 @@ export default { line-height: 2.55555556; border-radius: 5px; -webkit-tap-highlight-color: transparent; - overflow: hidden; color: #000000; background-color: #f8f8f8; cursor: pointer; @@ -262,47 +261,28 @@ export default { uni-button[type="primary"][plain] { color: #007aff; - border: 1px solid #007aff; background-color: transparent; } uni-button[type="primary"][plain][disabled] { color: rgba(0, 0, 0, 0.2); - border-color: rgba(0, 0, 0, 0.2); } uni-button[type="primary"][plain]:after { - border-width: 0; + border-color:#007aff; } uni-button[type="default"][plain] { color: #353535; - border: 1px solid #353535; background-color: transparent; } uni-button[type="default"][plain][disabled] { color: rgba(0, 0, 0, 0.2); - border-color: rgba(0, 0, 0, 0.2); } uni-button[type="default"][plain]:after { - border-width: 0; - } - - uni-button[plain] { - color: #353535; - border: 1px solid #353535; - background-color: transparent; - } - - uni-button[plain][disabled] { - color: rgba(0, 0, 0, 0.2); - border-color: rgba(0, 0, 0, 0.2); - } - - uni-button[plain]:after { - border-width: 0; + border-color: #353535; } uni-button[plain][native] .uni-button-cover-view-inner { @@ -311,17 +291,32 @@ export default { uni-button[type="warn"][plain] { color: #e64340; - border: 1px solid #e64340; background-color: transparent; } uni-button[type="warn"][plain][disabled] { color: rgba(0, 0, 0, 0.2); - border-color: rgba(0, 0, 0, 0.2); } uni-button[type="warn"][plain]:after { - border-width: 0; + border-color: #e64340; + } + + uni-button[plain] { + color: #353535; + background-color: transparent; + } + + uni-button[plain][disabled] { + color: rgba(0, 0, 0, 0.2); + } + + uni-button[plain]:after { + border-color: #353535; + } + + uni-button[plain][disabled]:after { + border-color: rgba(0, 0, 0, 0.2); } uni-button[size="mini"] { @@ -395,10 +390,13 @@ export default { .button-hover[plain] { color: rgba(53, 53, 53, 0.6); - border-color: rgba(53, 53, 53, 0.6); background-color: transparent; } + .button-hover[plain]:after { + border-color: rgba(53, 53, 53, 0.6); + } + .button-hover[type="primary"] { color: rgba(255, 255, 255, 0.6); background-color: #0062cc; @@ -406,10 +404,13 @@ export default { .button-hover[type="primary"][plain] { color: rgba(0, 122, 255, 0.6); - border-color: rgba(0, 122, 255, 0.6); background-color: transparent; } + .button-hover[type="primary"][plain]:after { + border-color: rgba(0, 122, 255, 0.6); + } + .button-hover[type="default"] { color: rgba(0, 0, 0, 0.6); background-color: #dedede; @@ -417,10 +418,13 @@ export default { .button-hover[type="default"][plain] { color: rgba(53, 53, 53, 0.6); - border-color: rgba(53, 53, 53, 0.6); background-color: transparent; } + .button-hover[type="default"][plain]:after { + border-color: rgba(53, 53, 53, 0.6); + } + .button-hover[type="warn"] { color: rgba(255, 255, 255, 0.6); background-color: #ce3c39; @@ -428,10 +432,13 @@ export default { .button-hover[type="warn"][plain] { color: rgba(230, 67, 64, 0.6); - border-color: rgba(230, 67, 64, 0.6); background-color: transparent; } + .button-hover[type="warn"][plain]:after { + border-color: rgba(230, 67, 64, 0.6); + } + @media (prefers-color-scheme: dark) { uni-button, uni-button[type='default'] { @@ -458,7 +465,10 @@ export default { uni-button[type='default'][plain] { color: #d6d6d6; - border: 1px solid #d6d6d6; + } + + uni-button[type='default'][plain]:after { + border-color: #d6d6d6; } .button-hover[type='default'][plain] { @@ -467,9 +477,16 @@ export default { background-color: rgba(50, 50, 50, 0.2); } + .button-hover[type='default'][plain]:after { + border-color: rgba(150, 150, 150, 0.6); + } + uni-button[type='default'][plain][disabled] { - border-color: hsla(0, 0%, 100%, 0.2); color: hsla(0, 0%, 100%, 0.2); } + + uni-button[type='default'][plain][disabled]:after { + border-color: hsla(0, 0%, 100%, 0.2); + } }