This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

完成link组件的调整

old
宇天 2021-02-24 13:40:10 +08:00
parent ccc877378a
commit 1f889a47fa
1 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/form/link.wc
View File

@ -8,10 +8,12 @@
:host { :host {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
border-radius: 2px;
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
font-size: 14px; font-size: inherit;
cursor: pointer; cursor: pointer;
transition: box-shadow 0.15s linear;
.link { .link {
display: flex; display: flex;
@ -39,7 +41,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
border-bottom: 1px dashed var(--color-plain-3); border-bottom: 1px dashed var(--color-grey-1);
content: ''; content: '';
opacity: 0; opacity: 0;
transition: opacity 0.15s linear; transition: opacity 0.15s linear;
@ -48,10 +50,9 @@
:host(:not([disabled]):focus-within) { :host(:not([disabled]):focus-within) {
&::after { &::after {
height: 2px;
border-width: 2px;
opacity: 1; opacity: 1;
} }
box-shadow: 0 0 0 2px var(--color-plain-a);
} }
:host(:not([disabled]):hover), :host(:not([disabled]):hover),
@ -80,6 +81,9 @@
:host([type='danger']:not([disabled]):active) { :host([type='danger']:not([disabled]):active) {
color: var(--color-red-3); color: var(--color-red-3);
} }
:host([type='danger']:not([disabled]):focus-within) {
box-shadow: 0 0 0 2px var(--color-red-a);
}
// ------------- // -------------
:host([type='info']) { :host([type='info']) {
@ -94,6 +98,9 @@
:host([type='info']:not([disabled]):active) { :host([type='info']:not([disabled]):active) {
color: var(--color-blue-3); color: var(--color-blue-3);
} }
:host([type='info']:not([disabled]):focus-within) {
box-shadow: 0 0 0 2px var(--color-blue-a);
}
// -------- // --------
:host([type='success']) { :host([type='success']) {
@ -108,6 +115,9 @@
:host([type='success']:not([disabled]):active) { :host([type='success']:not([disabled]):active) {
color: var(--color-green-3); color: var(--color-green-3);
} }
:host([type='success']:not([disabled]):focus-within) {
box-shadow: 0 0 0 2px var(--color-green-a);
}
// --------- // ---------
:host([type='primary']) { :host([type='primary']) {
color: var(--color-teal-2); color: var(--color-teal-2);
@ -121,6 +131,9 @@
:host([type='primary']:not([disabled]):active) { :host([type='primary']:not([disabled]):active) {
color: var(--color-teal-3); color: var(--color-teal-3);
} }
:host([type='primary']:not([disabled]):focus-within) {
box-shadow: 0 0 0 2px var(--color-teal-a);
}
// ---------- // ----------
:host([type='warning']) { :host([type='warning']) {
@ -135,6 +148,9 @@
:host([type='warning']:not([disabled]):active) { :host([type='warning']:not([disabled]):active) {
color: var(--color-orange-3); color: var(--color-orange-3);
} }
:host([type='warning']:not([disabled]):focus-within) {
box-shadow: 0 0 0 2px var(--color-orange-a);
}
// ------- // -------
:host([type='inverse']) { :host([type='inverse']) {
@ -149,6 +165,9 @@
:host([type='inverse']:not([disabled]):active) { :host([type='inverse']:not([disabled]):active) {
color: var(--color-dark-3); color: var(--color-dark-3);
} }
:host([type='inverse']:not([disabled]):focus-within) {
box-shadow: 0 0 0 2px var(--color-dark-a);
}
// ------- // -------
:host([type='default']) { :host([type='default']) {
@ -163,6 +182,9 @@
:host([type='default']:not([disabled]):active) { :host([type='default']:not([disabled]):active) {
color: var(--color-grey-3); color: var(--color-grey-3);
} }
:host([type='default']:not([disabled]):focus-within) {
box-shadow: 0 0 0 2px var(--color-grey-a);
}
</style> </style>
<script> <script>