完成number组件的调整
parent
1f889a47fa
commit
9617a7000a
|
@ -35,7 +35,7 @@ li {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 32px;
|
height: 36px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border: 2px solid var(--color-plain-2);
|
border: 2px solid var(--color-plain-2);
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
|
@ -45,10 +45,10 @@ li {
|
||||||
|
|
||||||
input {
|
input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 32px;
|
min-width: 36px;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 6px;
|
padding: 0 8px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
@ -69,7 +69,7 @@ li {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 28px;
|
height: 32px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -167,7 +167,7 @@ li {
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([size='large']) {
|
:host([size='large']) {
|
||||||
min-width: 232px;
|
min-width: 234px;
|
||||||
.label {
|
.label {
|
||||||
height: 52px;
|
height: 52px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
@ -190,7 +190,7 @@ li {
|
||||||
:host([size='medium']) {
|
:host([size='medium']) {
|
||||||
min-width: 160px;
|
min-width: 160px;
|
||||||
.label {
|
.label {
|
||||||
height: 36px;
|
height: 44px;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
@ -198,7 +198,21 @@ li {
|
||||||
}
|
}
|
||||||
.prepend,
|
.prepend,
|
||||||
.append {
|
.append {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([size='small']) {
|
||||||
|
min-width: 96px;
|
||||||
|
.label {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.prepend,
|
||||||
|
.append {
|
||||||
|
height: 28px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:host([size='mini']) {
|
:host([size='mini']) {
|
||||||
|
|
|
@ -1,23 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<span data-act="-">-</span>
|
<span data-act="-">-</span>
|
||||||
<!-- <wc-icon class="icon" is="minus"></wc-icon> -->
|
|
||||||
<input value="0" maxlength="9" />
|
<input value="0" maxlength="9" />
|
||||||
<span data-act="+">+</span>
|
<span data-act="+">+</span>
|
||||||
<!-- <wc-icon class="icon" is="plus"></wc-icon> -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
:host {
|
:host {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
width: 128px;
|
min-width: 128px;
|
||||||
height: 32px;
|
height: 36px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
color: var(--color-dark-2);
|
color: var(--color-dark-1);
|
||||||
border-radius: 2px;
|
border-radius: 6px;
|
||||||
|
cursor: text;
|
||||||
|
transition: box-shadow 0.15s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
@ -27,7 +27,7 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border: 1px solid var(--color-plain-3);
|
border: 2px solid var(--color-plain-2);
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
background: var(--bg-color, #fff);
|
background: var(--bg-color, #fff);
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
@ -39,17 +39,16 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: var(--bg-color, --color-plain-1);
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-radius: 2px 0 0 2px;
|
border-radius: 4px 0 0 4px;
|
||||||
border-right: 1px solid var(--color-plain-3);
|
border-right: 2px solid var(--color-plain-1);
|
||||||
}
|
}
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-radius: 0 2px 2px 0;
|
border-radius: 0 4px 4px 0;
|
||||||
border-left: 1px solid var(--color-plain-3);
|
border-left: 2px solid var(--color-plain-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
|
@ -60,16 +59,15 @@
|
||||||
|
|
||||||
input {
|
input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 32px;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 5px;
|
padding: 0 6px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
font: inherit;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: inherit;
|
|
||||||
font-family: inherit;
|
|
||||||
background: none;
|
background: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
@ -104,12 +102,6 @@
|
||||||
cursor: inherit;
|
cursor: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:host(:focus-within) {
|
|
||||||
@include focus1;
|
|
||||||
}
|
|
||||||
:host(:focus-within[readonly]) {
|
|
||||||
@include focus2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 额外样式 */
|
/* 额外样式 */
|
||||||
:host([round]) {
|
:host([round]) {
|
||||||
|
@ -124,48 +116,111 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([size='large']) {
|
:host([size='large']) {
|
||||||
width: 192px;
|
min-width: 234px;
|
||||||
height: 42px;
|
height: 52px;
|
||||||
.label {
|
.label {
|
||||||
font-size: 16px;
|
font-size: 18px;
|
||||||
span {
|
span {
|
||||||
width: 48px;
|
width: 52px;
|
||||||
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.prepend,
|
|
||||||
.append {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([size='medium']) {
|
:host([size='medium']) {
|
||||||
width: 144px;
|
min-width: 160px;
|
||||||
height: 36px;
|
height: 44px;
|
||||||
.label {
|
.label {
|
||||||
span {
|
span {
|
||||||
width: 36px;
|
width: 44px;
|
||||||
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.prepend,
|
}
|
||||||
.append {
|
:host([size='small']) {
|
||||||
height: 34px;
|
min-width: 96px;
|
||||||
|
height: 32px;
|
||||||
|
.label {
|
||||||
|
span {
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:host([size='mini']) {
|
:host([size='mini']) {
|
||||||
width: 96px;
|
min-width: 72px;
|
||||||
height: 24px;
|
height: 26px;
|
||||||
.label {
|
.label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
span {
|
span {
|
||||||
width: 28px;
|
width: 26px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.icon {
|
}
|
||||||
--size: 16px;
|
//
|
||||||
|
:host(:focus-within) {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-plain-a);
|
||||||
|
}
|
||||||
|
:host([type='primary']:focus-within) {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-teal-a);
|
||||||
|
}
|
||||||
|
:host([type='default']:focus-within) {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-grey-a);
|
||||||
|
}
|
||||||
|
:host([type='info']:focus-within) {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-blue-a);
|
||||||
|
}
|
||||||
|
:host([type='success']:focus-within) {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-green-a);
|
||||||
|
}
|
||||||
|
:host([type='danger']:focus-within) {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-red-a);
|
||||||
|
}
|
||||||
|
:host([type='warning']:focus-within) {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-orange-a);
|
||||||
|
}
|
||||||
|
:host([type='inverse']:focus-within) {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-dark-a);
|
||||||
|
}
|
||||||
|
:host([type='primary']) .label {
|
||||||
|
border-color: var(--color-teal-2);
|
||||||
|
span {
|
||||||
|
border-color: var(--color-teal-a);
|
||||||
}
|
}
|
||||||
.prepend,
|
}
|
||||||
.append {
|
:host([type='default']) .label {
|
||||||
height: 18px;
|
border-color: var(--color-grey-2);
|
||||||
|
span {
|
||||||
|
border-color: var(--color-grey-a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='info']) .label {
|
||||||
|
border-color: var(--color-blue-2);
|
||||||
|
span {
|
||||||
|
border-color: var(--color-blue-a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='success']) .label {
|
||||||
|
border-color: var(--color-green-2);
|
||||||
|
span {
|
||||||
|
border-color: var(--color-green-a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='danger']) .label {
|
||||||
|
border-color: var(--color-red-2);
|
||||||
|
span {
|
||||||
|
border-color: var(--color-red-a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='warning']) .label {
|
||||||
|
border-color: var(--color-orange-2);
|
||||||
|
span {
|
||||||
|
border-color: var(--color-orange-a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='inverse']) .label {
|
||||||
|
border-color: var(--color-dark-2);
|
||||||
|
span {
|
||||||
|
border-color: var(--color-dark-a);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Reference in New Issue