bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

简化color组件样式

master
yutent 2023-11-24 18:55:09 +08:00
parent f119d77c4f
commit eca1a50619
1 changed files with 23 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/form/color.js
View File

@ -156,6 +156,8 @@ class Color extends Component {
position: relative;
width: 32px;
height: 32px;
-webkit-user-select: none;
user-select: none;
}
.alpha-bg {
background: linear-gradient(
@ -177,6 +179,14 @@ class Color extends Component {
background-size: 12px 12px;
background-position: 0 0, 6px 6px;
}
.focus {
transition: box-shadow 0.15s linear;
&:focus-within {
box-shadow: 0 0 0 2px var(--color-plain-a);
}
}
`,
// 预览
css`
@ -187,7 +197,6 @@ class Color extends Component {
border: 1px solid var(--color-grey-2);
border-radius: 3px;
cursor: pointer;
transition: box-shadow 0.15s linear;
span {
width: 100%;
@ -197,10 +206,6 @@ class Color extends Component {
background: var(--value);
outline: none;
}
&:focus-within {
box-shadow: 0 0 0 2px var(--color-plain-a);
}
}
`,
// .color-panel
@ -213,8 +218,8 @@ class Color extends Component {
top: 38px;
width: 310px;
padding: 5px;
background: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
background: var(--color-plain-1);
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}
.dashboard {
display: flex;
@ -276,9 +281,9 @@ class Color extends Component {
display: block;
width: 12px;
height: 12px;
border: 1px solid #888;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
transform: translateY(-6px);
content: '';
}
@ -312,9 +317,9 @@ class Color extends Component {
display: block;
width: 12px;
height: 12px;
border: 1px solid #888;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
transform: translateX(-6px);
content: '';
}
@ -335,43 +340,34 @@ class Color extends Component {
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 12px;
.input {
width: 200px;
height: 24px;
padding: 0 6px;
line-height: 22px;
font: inherit;
font-size: 12px;
border: 2px solid var(--color-plain-2);
border-radius: 4px;
font-family: monospace;
border: 1px solid var(--color-grey-2);
border-radius: 3px;
outline: none;
color: var(--color-dark-1);
transition: box-shadow 0.15s linear;
&::placeholder {
color: var(--color-grey-1);
}
&:focus {
box-shadow: 0 0 0 2px var(--color-plain-a);
}
}
.clear,
.submit {
font-size: 12px;
color: var(--color-dark-1);
cursor: pointer;
user-select: none;
}
.clear {
color: var(--color-grey-3);
}
.submit {
padding: 2px 6px;
border-radius: 2px;
color: var(--color-plain-1);
color: #fff;
background: var(--color-teal-2);
outline: none;
transition: box-shadow 0.15s linear, background 0.15s linear;
@ -379,10 +375,6 @@ class Color extends Component {
&:hover {
background: var(--color-teal-1);
}
&:focus {
box-shadow: 0 0 0 2px var(--color-teal-a);
}
}
}
`,
@ -597,7 +589,7 @@ class Color extends Component {
return html`
<main class="container" style=${styles}>
<section class="preview alpha-bg" @click=${this.toggleColorPanel}>
<section class="preview focus alpha-bg" @click=${this.toggleColorPanel}>
<span tabindex=${this.disabled ? -1 : 0}></span>
</section>
@ -625,9 +617,9 @@ class Color extends Component {
</section>
<section class="input-box">
<input class="input" :value=${this.#value} maxlength="25" />
<input class="input focus" :value=${this.#value} maxlength="25" />
<a class="clear" @click=${_ => this.#close(true)}>清除</a>
<a tabindex="0" class="submit" @click=${this.#submit}>确定</a>
<a tabindex="0" class="submit focus" @click=${this.#submit}>确定</a>
</section>
</div>
</main>