mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
477 lines
14 KiB
SCSS
477 lines
14 KiB
SCSS
@import './mixins/mixins.scss';
|
|
|
|
@mixin input-group-label-size-mixin ($size) {
|
|
$font-size: map-get($map: $--n-font-size, $key: $size);
|
|
$height: map-get($map: $--n-height, $key: $size);
|
|
@include m($size + '-size') {
|
|
font-size: $font-size;
|
|
line-height: $height;
|
|
height: $height;
|
|
}
|
|
}
|
|
|
|
@mixin input-size-mixin ($size) {
|
|
$font-size: map-get($map: $--n-font-size, $key: $size);
|
|
$height: map-get($map: $--n-height, $key: $size);
|
|
$line-height: round($font-size * 1.5);
|
|
@include m($size + "-size") {
|
|
font-size: $font-size;
|
|
line-height: $line-height;
|
|
@include e(input) {
|
|
height: $height;
|
|
}
|
|
@include e(input, textarea, textarea-mirror, splitor, placeholder) {
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
line-height: $line-height;
|
|
font-size: $font-size;
|
|
padding-top: ($height - $line-height) / 2;
|
|
padding-bottom: ($height - $line-height) / 2;
|
|
}
|
|
@include e(placeholder) {
|
|
left: 14px;
|
|
right: 14px;
|
|
}
|
|
@include m(suffix) {
|
|
@include not-m(split) {
|
|
@include e(input) {
|
|
padding-right: 38px!important;
|
|
}
|
|
@include e(placeholder) {
|
|
right: 38px!important;
|
|
}
|
|
}
|
|
@include m(split) {
|
|
*:not(:first-child) {
|
|
@include e(input) {
|
|
padding-right: 38px!important;
|
|
}
|
|
@include e(placeholder) {
|
|
right: 38px!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(prefix) {
|
|
@include not-m(split) {
|
|
@include e(input) {
|
|
padding-left: 38px!important;
|
|
}
|
|
@include e(placeholder) {
|
|
left: 38px!important;
|
|
}
|
|
}
|
|
@include m(split) {
|
|
*:not(:first-child) {
|
|
@include e(input) {
|
|
padding-left: 38px!important;
|
|
}
|
|
@include e(placeholder) {
|
|
left: 38px!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(clearable) {
|
|
@include not-m(split) {
|
|
@include e(input) {
|
|
padding-right: 38px!important;
|
|
}
|
|
@include e(placeholder) {
|
|
right: 38px!important;
|
|
}
|
|
}
|
|
@include m(split) {
|
|
*:not(:first-child) {
|
|
@include e(input) {
|
|
padding-right: 38px!important;
|
|
}
|
|
@include e(placeholder) {
|
|
right: 38px!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(round) {
|
|
@include not-m(textarea) {
|
|
@include e(input) {
|
|
padding-left: $height / 2;
|
|
padding-right: $height / 2;
|
|
}
|
|
@include e(placeholder) {
|
|
left: $height / 2;
|
|
right: $height / 2;
|
|
}
|
|
border-radius: $height / 2;
|
|
@include e(border-mask) {
|
|
border-radius: $height / 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include themes-mixin {
|
|
@include b(input) {
|
|
@include once {
|
|
z-index: auto;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
width: 100%;
|
|
display: inline-block;
|
|
border-radius: $--n-input-border-radius;
|
|
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
|
|
@include input-size-mixin("small");
|
|
@include input-size-mixin("medium");
|
|
@include input-size-mixin("large");
|
|
@include e(border-mask) {
|
|
z-index: 1;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
border-radius: $--n-input-border-radius;
|
|
transition: border-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
@include e(placeholder) {
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
|
overflow: hidden;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
@include e(suffix, prefix) {
|
|
position: absolute;
|
|
line-height: 1.75;
|
|
height: 0;
|
|
width: $--n-input-icon-size;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
top: 50%;
|
|
@include b(icon) {
|
|
justify-self: center;
|
|
font-size: $--n-input-icon-size;
|
|
}
|
|
}
|
|
@include e(suffix) {
|
|
@include fade-in-scale-up-transition(button-suffix);
|
|
justify-content: flex-end;
|
|
right: 12px;
|
|
}
|
|
@include e(prefix) {
|
|
justify-content: flex-start;
|
|
left: 12px;
|
|
}
|
|
@include b(input-clear) {
|
|
display: flex;
|
|
margin-right: 4px;
|
|
}
|
|
@include e(textarea, textarea-mirror) {
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: 1.75;
|
|
margin: 0;
|
|
resize: vertical;
|
|
}
|
|
@include e(textarea) {
|
|
@include m(autosize) {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
resize: none;
|
|
}
|
|
}
|
|
@include e(textarea-mirror) {
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
position: static;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: break-word;
|
|
}
|
|
@include m(split) {
|
|
display: inline-flex;
|
|
@include e(input, placeholder) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
@include e(placeholder) {
|
|
color: map-get($--input-placeholder-color, 'default');
|
|
}
|
|
background-color: map-get($--input-background-color, 'default');
|
|
box-shadow: map-get($--input-box-shadow, 'default');
|
|
@include e(border-mask) {
|
|
border: 1px solid map-get($--input-border-mask-border-color, 'default');
|
|
}
|
|
&:hover {
|
|
@include e(border-mask) {
|
|
border-color: map-get($--input-border-mask-border-color, 'hover');
|
|
}
|
|
}
|
|
@include m(focus) {
|
|
@include e(border-mask) {
|
|
border-color: map-get($--input-border-mask-border-color, 'focus');
|
|
box-shadow: map-get($--input-border-mask-box-shadow, 'focus');
|
|
}
|
|
background-color: map-get($--input-background-color, 'focus');
|
|
}
|
|
@include once {
|
|
@include m(textarea) {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
@include e(textarea, textarea-mirror) {
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
}
|
|
@include e(placeholder) {
|
|
white-space: unset;
|
|
}
|
|
}
|
|
}
|
|
@include e(suffix, prefix) {
|
|
@include b(icon) {
|
|
fill: map-get($--input-icon-color, 'default');
|
|
stroke: map-get($--input-icon-color, 'default');
|
|
}
|
|
}
|
|
@include e(input, textarea) {
|
|
@include once {
|
|
-webkit-appearance: none;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
font-size: inherit;
|
|
outline: none;
|
|
font-family: inherit;
|
|
width: 100%;
|
|
transition: color .3s $--n-ease-in-out-cubic-bezier, text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
|
|
background-color: transparent;
|
|
min-width: 0;
|
|
}
|
|
color: map-get($--input-color, 'default');
|
|
caret-color: map-get($--input-caret-color, 'default');
|
|
&::placeholder {
|
|
color: transparent;
|
|
}
|
|
}
|
|
@include e(splitor) {
|
|
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
|
color: map-get($--input-color, 'default');
|
|
@include once {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
}
|
|
@include m(disabled) {
|
|
@include once {
|
|
cursor: not-allowed;
|
|
}
|
|
box-shadow: map-get($--input-box-shadow, 'disabled') !important;
|
|
@include e(border-mask) {
|
|
border-color: map-get($--input-border-mask-border-color, 'disabled') !important;
|
|
}
|
|
background-color: map-get($--input-background-color, 'disabled');
|
|
@include e(input, textarea) {
|
|
@include once {
|
|
cursor: not-allowed;
|
|
}
|
|
color: map-get($--input-color, 'disabled');
|
|
}
|
|
@include e(placeholder) {
|
|
color: map-get($--input-placeholder-color, 'disabled');
|
|
}
|
|
@include e(suffix, prefix) {
|
|
@include b(icon) {
|
|
fill: map-get($--input-icon-color, 'disabled');
|
|
stroke: map-get($--input-icon-color, 'disabled');
|
|
}
|
|
}
|
|
@include e(splitor) {
|
|
color: map-get($--input-color, 'disabled');
|
|
}
|
|
}
|
|
}
|
|
@include b(input-group-label) {
|
|
@include once {
|
|
user-select: none;
|
|
box-sizing: border-box;
|
|
padding: 0 12px;
|
|
display: inline-block;
|
|
border-radius: $--n-input-border-radius;
|
|
transition:
|
|
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;
|
|
@include input-group-label-size-mixin("small");
|
|
@include input-group-label-size-mixin("medium");
|
|
@include input-group-label-size-mixin("large");
|
|
}
|
|
background-color: $--input-group-label-background-color;
|
|
color: map-get($--input-color, 'default');
|
|
box-shadow: map-get($--input-box-shadow, 'default');
|
|
}
|
|
@include as-form-item {
|
|
@include with-status(error) {
|
|
@include b(input) {
|
|
box-shadow: map-get($--input-box-shadow, 'error-default');
|
|
@include e(border-mask) {
|
|
border-color: map-get($--input-border-mask-border-color, 'error-default');
|
|
}
|
|
&:hover {
|
|
@include e(border-mask) {
|
|
border-color: map-get($--input-border-mask-border-color, 'error-hover');
|
|
}
|
|
}
|
|
@include m(focus) {
|
|
@include e(border-mask) {
|
|
border-color: map-get($--input-border-mask-border-color, 'error-focus');
|
|
box-shadow: map-get($--input-border-mask-box-shadow, 'error-focus');
|
|
}
|
|
}
|
|
@include e(input, textarea) {
|
|
caret-color: map-get($--input-caret-color, 'error');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include once {
|
|
@include b(input-group) {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
flex-wrap: nowrap;
|
|
vertical-align: bottom;
|
|
& > {
|
|
@include b(input) {
|
|
&:not(:last-child) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
@include e(border-mask) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
}
|
|
}
|
|
&:not(:first-child) {
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
@include e(border-mask) {
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
}
|
|
margin-left: -1px!important;
|
|
}
|
|
}
|
|
@include b(input-number) {
|
|
&:not(:last-child) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
@include e(input, add-button, border-mask) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
}
|
|
}
|
|
&:not(:first-child) {
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
@include e(input, minus-button, border-mask) {
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
}
|
|
}
|
|
}
|
|
@include b(button) {
|
|
&:not(:last-child) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
@include e(border-mask) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
}
|
|
}
|
|
&:not(:first-child) {
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
@include e(border-mask) {
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
}
|
|
@include not-m(default-type) {
|
|
margin-left: 0!important;
|
|
}
|
|
}
|
|
}
|
|
* {
|
|
&:not(:last-child) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
& > {
|
|
@include b(input) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
@include e(border-mask) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
}
|
|
}
|
|
@include b(base-selection) {
|
|
@include b(base-selection-label) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
}
|
|
@include b(base-selection-tags) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
}
|
|
@include b(base-selection-border-mask) {
|
|
border-top-right-radius: 0!important;
|
|
border-bottom-right-radius: 0!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:not(:first-child) {
|
|
margin-left: -1px!important;
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
& > {
|
|
@include b(input) {
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
@include e(border-mask) {
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
}
|
|
}
|
|
@include b(base-selection) {
|
|
@include b(base-selection-label) {
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
}
|
|
@include b(base-selection-tags) {
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
}
|
|
@include b(base-selection-border-mask) {
|
|
border-top-left-radius: 0!important;
|
|
border-bottom-left-radius: 0!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |