2
0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-23 13:31:06 +08:00

style(input): cut size

This commit is contained in:
07akioni 2019-10-10 18:39:51 +08:00
parent 20fcfe4065
commit 4733320cea

View File

@ -28,9 +28,13 @@
@include themes-mixin {
@include b(input) {
@include once {
position: relative;
width: 100%;
display: inline-block;
@include input-size-mixin("small");
@include input-size-mixin("medium");
@include input-size-mixin("large");
@include e(icon) {
position: absolute;
line-height: $--input-icon-size;
@ -44,7 +48,6 @@
line-height: $--input-icon-size;
height: $--input-icon-size;
width: $--input-icon-size;
color: $--input-icon-color;
}
}
left: 0;
@ -58,59 +61,11 @@
transform: translateY(-50%);
line-height: 12px;
}
@include e(input, textarea) {
-webkit-appearance: none;
box-sizing: border-box;
border: none;
font-size: inherit;
padding-left: 14px;
padding-right: 14px;
border-radius: $--input-border-radius;
outline: none;
color: map-get($--input-color, 'default');
font-family: $--n-font-family;
background-color: map-get($--input-background-color, 'default');
width: 100%;
caret-color: $--input-caret-color;
transition: color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
vertical-align: bottom;
box-shadow: map-get($--input-box-shadow, 'default');
&:hover {
box-shadow: map-get($--input-box-shadow, 'hover');
@include e(icon) {
i {
&::before {
color: $--input-icon-color;
}
&:focus {
box-shadow: map-get($--input-box-shadow, 'focus');
background-color: map-get($--input-background-color, 'focus');
}
&::placeholder {
transition: color .3s $default-cubic-bezier;
color: map-get($--input-placeholder-color, 'default');
opacity: 1;
}
}
@include input-size-mixin("small");
@include input-size-mixin("medium");
@include input-size-mixin("large");
@include m(icon) {
@include e(input) {
padding-left: 38px!important;
}
}
@include m(disabled) {
cursor: not-allowed;
@include e(input, textarea) {
cursor: not-allowed;
background-color: map-get($--input-background-color, 'disabled');
color: map-get($--input-color, 'disabled');
box-shadow: map-get($--input-box-shadow, 'disabled') !important;
&::placeholder {
color: map-get($--input-placeholder-color, 'disabled');
}
}
}
@include m(clearable) {
@include e(input, textarea, textarea-mirror) {
padding-right: 32px;
}
}
@include e(textarea, textarea-mirror) {
@ -137,5 +92,60 @@
white-space: pre-wrap;
overflow-wrap: break-word;
}
@include m(clearable) {
@include e(input, textarea, textarea-mirror) {
padding-right: 32px;
}
}
@include m(icon) {
@include e(input) {
padding-left: 38px!important;
}
}
}
@include e(input, textarea) {
@include once {
-webkit-appearance: none;
box-sizing: border-box;
border: none;
font-size: inherit;
padding-left: 14px;
padding-right: 14px;
border-radius: $--input-border-radius;
outline: none;
font-family: $--n-font-family;
width: 100%;
transition: color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
vertical-align: bottom;
}
color: map-get($--input-color, 'default');
background-color: map-get($--input-background-color, 'default');
caret-color: $--input-caret-color;
box-shadow: map-get($--input-box-shadow, 'default');
&:hover {
box-shadow: map-get($--input-box-shadow, 'hover');
}
&:focus {
box-shadow: map-get($--input-box-shadow, 'focus');
background-color: map-get($--input-background-color, 'focus');
}
&::placeholder {
transition: color .3s $default-cubic-bezier;
color: map-get($--input-placeholder-color, 'default');
opacity: 1;
}
}
@include m(disabled) {
cursor: not-allowed;
@include e(input, textarea) {
cursor: not-allowed;
background-color: map-get($--input-background-color, 'disabled');
color: map-get($--input-color, 'disabled');
box-shadow: map-get($--input-box-shadow, 'disabled') !important;
&::placeholder {
color: map-get($--input-placeholder-color, 'disabled');
}
}
}
}
}