mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
290 lines
9.4 KiB
SCSS
290 lines
9.4 KiB
SCSS
@import './mixins/mixins.scss';
|
|
|
|
@mixin input-number-size-mixin ($size) {
|
|
@include m($size + '-size') {
|
|
$height: map-get($--n-height, $size);
|
|
height: $height;
|
|
line-height: $height;
|
|
@include e(minus-button, add-button, input) {
|
|
height: $height;
|
|
line-height: $height
|
|
}
|
|
@include e(minus-button, add-button) {
|
|
width: map-get($--n-input-number-button-width, $size);
|
|
}
|
|
@include e(input) {
|
|
font-size: map-get($--n-font-size, $size);
|
|
padding: 0 map-get($--n-input-number-button-width, $size);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include themes-mixin {
|
|
@include b(input-number) {
|
|
@include once {
|
|
position: relative;
|
|
border-radius: $--n-input-number-border-radius;
|
|
box-sizing: border-box;
|
|
width: 152px;
|
|
display: inline-block;
|
|
outline: none;
|
|
z-index: auto;
|
|
@include input-number-size-mixin('small');
|
|
@include input-number-size-mixin('medium');
|
|
@include input-number-size-mixin('large');
|
|
@include e(border-mask) {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
box-shadow: inset 0 0 0px 1px transparent;
|
|
border-radius: $--n-input-number-border-radius;
|
|
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
|
|
pointer-events: none;
|
|
}
|
|
@include e(minus-button) {
|
|
left: 0;
|
|
border-top-left-radius: $--n-input-number-border-radius;
|
|
border-bottom-left-radius: $--n-input-number-border-radius;
|
|
@include b(input-number-button-border-mask) {
|
|
border-top-left-radius: $--n-input-number-border-radius;
|
|
border-bottom-left-radius: $--n-input-number-border-radius;
|
|
}
|
|
@include b(input-number-button-body) {
|
|
left: 1px;
|
|
right: 0;
|
|
@include b(icon) {
|
|
transform: translateX(-1px);
|
|
}
|
|
}
|
|
@include b(input-number-button-boundary) {
|
|
left: 0;
|
|
}
|
|
}
|
|
@include e(add-button) {
|
|
right: 0;
|
|
border-top-right-radius: $--n-input-number-border-radius;
|
|
border-bottom-right-radius: $--n-input-number-border-radius;
|
|
@include b(input-number-button-border-mask) {
|
|
border-top-right-radius: $--n-input-number-border-radius;
|
|
border-bottom-right-radius: $--n-input-number-border-radius;
|
|
}
|
|
@include b(input-number-button-body) {
|
|
right: 1px;
|
|
left: 0;
|
|
@include b(icon) {
|
|
transform: translateX(1px);
|
|
}
|
|
}
|
|
@include b(input-number-button-boundary) {
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
@include m(disabled) {
|
|
@include e(minus-button, add-button) {
|
|
@include b(input-number-button-body) {
|
|
background-color: map-get($--input-number-button-background-color, 'disabled');
|
|
}
|
|
@include b(input-number-button-boundary) {
|
|
background-color: map-get($--input-number-button-background-color, 'disabled');
|
|
}
|
|
@include b(icon) {
|
|
fill: map-get($--input-number-button-text-color, 'disabled');
|
|
stroke: map-get($--input-number-button-text-color, 'disabled');
|
|
}
|
|
@include once {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
@include e(input) {
|
|
&::placeholder {
|
|
color: map-get( $--input-placeholder-color, 'disabled');
|
|
}
|
|
background: map-get($--input-number-background-color, 'disabled');
|
|
color: map-get($--input-number-text-color, 'disabled');
|
|
@include once {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
@include once {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
@include m(invalid) {
|
|
@include e(input) {
|
|
@include once {
|
|
text-decoration: line-through;
|
|
}
|
|
text-decoration-color: $--input-number-text-decoration-color;
|
|
}
|
|
}
|
|
@include e(minus-button, add-button) {
|
|
@include once {
|
|
background-color: transparent;
|
|
overflow: hidden;
|
|
outline: none;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
z-index: auto;
|
|
top: 0;
|
|
padding: 0;
|
|
border: none;
|
|
font-size: 14px;
|
|
}
|
|
@include b(input-number-button-border-mask) {
|
|
@include once {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
transition:
|
|
box-shadow .3s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
|
|
}
|
|
@include b(input-number-button-body) {
|
|
@include once {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
background-color: map-get($--input-number-button-background-color, 'default');
|
|
}
|
|
@include b(input-number-button-boundary) {
|
|
@include once {
|
|
width: 1px;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
background-color: map-get($--input-number-button-background-color, 'default');
|
|
}
|
|
@include b(icon) {
|
|
fill: map-get($--input-number-button-text-color, 'default');
|
|
stroke: map-get($--input-number-button-text-color, 'default');
|
|
}
|
|
&:hover ~ {
|
|
@include e(border-mask) {
|
|
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover');
|
|
}
|
|
}
|
|
&:hover {
|
|
@include b(input-number-button-body) {
|
|
background-color: map-get($--input-number-button-background-color, 'hover');
|
|
}
|
|
@include b(input-number-button-boundary) {
|
|
background-color: map-get($--input-number-button-background-color, 'hover');
|
|
}
|
|
@include b(icon) {
|
|
fill:map-get($--input-number-button-text-color, 'hover');
|
|
stroke: map-get($--input-number-button-text-color, 'hover');
|
|
}
|
|
}
|
|
&:active {
|
|
@include once {
|
|
transition:
|
|
color .3s $--n-ease-in-out-cubic-bezier,
|
|
background-color .15s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
@include b(input-number-button-body) {
|
|
background-color: map-get($--input-number-button-background-color, 'active');
|
|
}
|
|
@include b(input-number-button-boundary) {
|
|
background-color: map-get($--input-number-button-background-color, 'active');
|
|
}
|
|
@include b(icon) {
|
|
fill:map-get($--input-number-button-text-color, 'active');
|
|
stroke: map-get($--input-number-button-text-color, 'active');
|
|
}
|
|
}
|
|
@include m(disabled) {
|
|
@include once {
|
|
cursor: not-allowed;
|
|
}
|
|
@include b(input-number-button-body) {
|
|
background-color: map-get($--input-number-button-background-color, 'disabled');
|
|
}
|
|
@include b(input-number-button-boundary) {
|
|
background-color: map-get($--input-number-button-background-color, 'disabled');
|
|
}
|
|
@include b(icon) {
|
|
fill: map-get($--input-number-button-text-color, 'disabled');
|
|
stroke: map-get($--input-number-button-text-color, 'disabled');
|
|
}
|
|
}
|
|
}
|
|
@include e(input) {
|
|
@include once {
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
border-radius: $--n-input-number-border-radius;
|
|
transition:
|
|
color .3s $--n-ease-in-out-cubic-bezier,
|
|
caret-color .3s $--n-ease-in-out-cubic-bezier,
|
|
background-color .3s $--n-ease-in-out-cubic-bezier,
|
|
box-shadow .3s $--n-ease-in-out-cubic-bezier,
|
|
text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
|
|
border: none;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
background-color: map-get($--input-number-background-color, 'default');
|
|
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
|
|
color: map-get($--input-number-text-color, 'default');
|
|
caret-color: $--input-number-caret-color;
|
|
&::placeholder {
|
|
@include once {
|
|
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
color: map-get( $--input-placeholder-color, 'default');
|
|
}
|
|
&:hover ~ {
|
|
@include e(border-mask) {
|
|
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover');
|
|
}
|
|
}
|
|
&:focus {
|
|
background-color: map-get($--input-number-background-color, 'focus');
|
|
& ~ {
|
|
@include e(border-mask) {
|
|
box-shadow: map-get($--input-number-box-shadow, 'focus');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include as-form-item {
|
|
@include with-status(error) {
|
|
@include b(input-number) {
|
|
@include e(border-mask) {
|
|
box-shadow: map-get($--input-number-box-shadow, 'error-default');
|
|
}
|
|
@include e(input) {
|
|
&:hover ~ {
|
|
@include e(border-mask) {
|
|
box-shadow: map-get($--input-number-box-shadow, 'error-hover');
|
|
}
|
|
}
|
|
&:focus {
|
|
background-color: map-get($--input-number-background-color, 'error-focus');
|
|
& ~ {
|
|
@include e(border-mask) {
|
|
box-shadow: map-get($--input-number-box-shadow, 'error-focus');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|